DrawArea refactor

src/DrawArea.tsx

@@ -0,0 +1,78 @@
+import React, { FC, useState } from 'react'
+import * as PropTypes from 'prop-types'
+
+import Drawable from './Drawable'
+import DrawContext from './DrawContext'
+import Drawed from './Drawed'
+
+import { Lines, Point } from './types'
+
+type Props = {
+  className?: string
+  color?: string
+  disabled?: boolean
+  hidden?: boolean
+  thickness?: number
+}
+
+const DrawArea: FC<Props> = ({
+  className = '',
+  color = '#000000',
+  disabled = false,
+  hidden = false,
+  thickness = 10,
+  children,
+}) => {
+  const [lines, setLines] = useState<Lines>([])
+  const [isDrawing, setIsDrawing] = useState<boolean>(false)
+
+  const reset = () => setLines([])
+
+  const undo = () => setLines(lines.slice(0, -1))
+
+  const finishLine = () => setIsDrawing(false)
+
+  const addPoint = (newPoint: Point) => {
+    if (isDrawing) {
+      const prevLines = [...lines]
+      const lastLine = prevLines.pop()
+      setLines(prevLines.concat([lastLine.concat(newPoint)]))
+    } else {
+      setIsDrawing(true)
+      setLines([...lines, [newPoint]])
+    }
+  }
+
+  const content = hidden
+    ? null
+    : (
+        <div className={className}>
+          <Drawed color={color} lines={lines} thickness={thickness} />
+          {disabled || <Drawable addPoint={addPoint} finishLine={finishLine} />}
+        </div>
+      )
+
+  if (!children) return content
+
+  return (
+    <DrawContext.Provider value={{
+      lines,
+      isDrawing,
+      reset,
+      undo,
+    }}>
+      {children}
+      {content}
+    </DrawContext.Provider>
+  )
+}
+
+DrawArea.propTypes = {
+  className: PropTypes.string,
+  color: PropTypes.string,
+  disabled: PropTypes.bool,
+  hidden: PropTypes.bool,
+  thickness: PropTypes.number,
+}
+
+export default DrawArea

src/DrawContext.tsx

@@ -1,56 +1,14 @@
-import React, { createContext, FC, useState } from 'react'
-import * as PropTypes from 'prop-types'
-
-import DrawZone from './DrawZone'
+import { createContext } from 'react'
 
 import { Lines } from './types'
 
 type DrawContextType = {
   lines: Lines
-  setLines: (lines: Lines) => void
   isDrawing: boolean
-  setIsDrawing: (isDrawing: boolean) => boolean
   reset: () => void
   undo: () => void
 }
 
-type Props = {
-  className?: string
-  color?: string
-  disabled?: boolean
-  hidden?: boolean
-  thickness?: number
-}
-
-export const DrawContext = createContext<DrawContextType>(null)
-
-export const DrawProvider: FC<Props> = ({ children, ...props }) => {
-  const [lines, setLines] = useState<Lines>([])
-  const [isDrawing, setIsDrawing] = useState<boolean>(false)
-
-  const reset = () => setLines([])
-  const undo = () => setLines(lines.slice(0, -1))
-
-  return (
-    <DrawContext.Provider value={{ lines, setLines, isDrawing, setIsDrawing, reset, undo }}>
-      {children}
-      <DrawZone {...props} />
-    </DrawContext.Provider>
-  )
-}
-
-DrawZone.propTypes = {
-  className: PropTypes.string,
-  color: PropTypes.string,
-  disabled: PropTypes.bool,
-  hidden: PropTypes.bool,
-  thickness: PropTypes.number,
-}
+const DrawContext = createContext<DrawContextType>(null)
 
-DrawZone.defaultProps = {
-  className: '',
-  color: '#000000',
-  disabled: false,
-  hidden: false,
-  thickness: 10,
-}
+export default DrawContext

src/index.ts

@@ -1,3 +1,4 @@
-import { DrawContext, DrawProvider } from './DrawContext'
+import DrawArea from './DrawArea'
+import DrawContext from './DrawContext'
 
-export { DrawContext, DrawProvider }
+export { DrawArea, DrawContext }