optimize colorpicker

limichange · Jan 15, 2020 · d0a063b · d0a063b
1 parent d5c3c58
commit d0a063b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 12 deletions.
diff --git a/...onents/mainPage/Editor/EditorBody/EditorArea/RightPanel/ControlPanel/Background/index.tsx b/...onents/mainPage/Editor/EditorBody/EditorArea/RightPanel/ControlPanel/Background/index.tsx
@@ -5,15 +5,15 @@ import editorStore from '../../../../../../../../store/editorStore'
 import Colorpicker from '../Colorpicker'
 
 export default function Background() {
-  const [value, setValue] = useState('trnasparent')
+  const [value, setValue] = useState('transparent')
   const [editorState] = useSubscribe(editorStore)
 
   useEffect(() => {
     const { component } = editorStore.findComponent(editorState.key)
 
     if (!component) return
 
-    setValue(component.style.background || 'trnasparent')
+    setValue(component.style.background || 'transparent')
   }, [editorState])
 
   function onChange(color) {
@@ -26,7 +26,7 @@ export default function Background() {
     <Item.Panel>
       <Item.Row>
         <Item.Label>background</Item.Label>
-        <Colorpicker color={value} onChange={onChange}></Colorpicker>
+        <Colorpicker defaultValue={value} onChange={onChange}></Colorpicker>
       </Item.Row>
     </Item.Panel>
   )

diff --git a/.../components/mainPage/Editor/EditorBody/EditorArea/RightPanel/ControlPanel/Color/index.tsx b/.../components/mainPage/Editor/EditorBody/EditorArea/RightPanel/ControlPanel/Color/index.tsx
@@ -26,7 +26,7 @@ export default function Color() {
     <Item.Panel>
       <Item.Row>
         <Item.Label>color</Item.Label>
-        <Colorpicker color={value} onChange={onChange}></Colorpicker>
+        <Colorpicker defaultValue={value} onChange={onChange}></Colorpicker>
       </Item.Row>
     </Item.Panel>
   )

diff --git a/...nents/mainPage/Editor/EditorBody/EditorArea/RightPanel/ControlPanel/Colorpicker/index.tsx b/...nents/mainPage/Editor/EditorBody/EditorArea/RightPanel/ControlPanel/Colorpicker/index.tsx
@@ -1,8 +1,13 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { SketchPicker } from 'react-color'
 
 export default function Colorpicker(props) {
   const [displayColorPicker, setDisplayColorPicker] = useState(false)
+  const [color, setColor] = useState('#000000')
+
+  useEffect(() => {
+    setColor(props.defaultValue)
+  }, [props.defaultValue])
 
   function handleClick() {
     setDisplayColorPicker(!displayColorPicker)
@@ -13,10 +18,18 @@ export default function Colorpicker(props) {
   }
 
   function onChange(color) {
+    setColor(handleColor(color))
+  }
+
+  function onChangeComplete(color) {
+    props.onChange && props.onChange(handleColor(color))
+  }
+
+  function handleColor(color) {
     const rgb = color.rgb
-    const result =
-      rgb.a === 1 ? color.hex : `rgba(${rgb.r},${rgb.g}, ${rgb.b}, ${rgb.a})`
-    props.onChange(result)
+    return rgb.a === 1
+      ? color.hex
+      : `rgba(${rgb.r},${rgb.g}, ${rgb.b}, ${rgb.a})`
   }
 
   return (
@@ -26,7 +39,7 @@ export default function Colorpicker(props) {
         style={{
           border: '1px solid #A7A7A7',
           borderRadius: 4,
-          background: props.color,
+          background: color,
           height: 20,
           width: 50
         }}></div>
@@ -49,7 +62,11 @@ export default function Colorpicker(props) {
               right: 15,
               zIndex: 1100001
             }}>
-            <SketchPicker color={props.color} onChange={onChange} />
+            <SketchPicker
+              color={color}
+              onChange={onChange}
+              onChangeComplete={onChangeComplete}
+            />
           </div>
         </>
       ) : null}

diff --git a/renderer/components/mainPage/Editor/EditorBody/EditorArea/RightPanel/ControlPanel/index.tsx b/renderer/components/mainPage/Editor/EditorBody/EditorArea/RightPanel/ControlPanel/index.tsx
@@ -19,7 +19,7 @@ export default function SettingPanel() {
 
   return (
     <>
-      {component.type}
+      {component.type}-{editorState.key}
       <Normal></Normal>
       <Color></Color>
       <Background></Background>

diff --git a/renderer/store/editorStore.ts b/renderer/store/editorStore.ts
@@ -114,7 +114,7 @@ const editorStore = {
   findComponent,
   moveComponent,
   subscribe: setState => {
-    const sub = subject.subscribe(setState)
+    const sub = subject.subscribe(value => setState(klona(value)))
     subject.next(state)
     return sub
   },