release(mask-editor): v0.5.0

index.json

@@ -210,7 +210,7 @@
     "dependencies": ["painter"],
     "style": false,
     "react": true,
-    "version": "0.4.1",
+    "version": "0.5.0",
     "icon": false,
     "test": true,
     "install": false

src/mask-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mask-editor",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Image mask editing",
   "luna": {
     "dependencies": [

src/mask-editor/react.tsx

@@ -1,6 +1,7 @@
 import { CSSProperties, FC, useEffect, useRef } from 'react'
 import MaskEditor, { IOptions } from './index'
-import { useNonInitialEffect } from '../share/hooks'
+import each from 'licia/each'
+import { useEvent, useOption, usePrevious } from '../share/hooks'
 
 interface IMaskEditorProps extends IOptions {
   style?: CSSProperties
@@ -11,33 +12,29 @@ interface IMaskEditorProps extends IOptions {
 const LunaMaskEditor: FC<IMaskEditorProps> = (props) => {
   const maskEditorRef = useRef<HTMLDivElement>(null)
   const maskEditor = useRef<MaskEditor>()
+  const prevProps = usePrevious(props)
 
   useEffect(() => {
-    const { image, mask } = props
+    const { image, mask, theme } = props
     maskEditor.current = new MaskEditor(maskEditorRef.current!, {
       image,
       mask,
+      theme,
     })
     props.onCreate && props.onCreate(maskEditor.current)
 
-    if (props.onChange) {
-      maskEditor.current.on('change', props.onChange)
-    }
-
     return () => maskEditor.current?.destroy()
   }, [])
 
-  useNonInitialEffect(() => {
-    if (maskEditor.current) {
-      maskEditor.current.setOption('image', props.image)
-    }
-  }, [props.image])
-
-  useNonInitialEffect(() => {
-    if (maskEditor.current) {
-      maskEditor.current.setOption('mask', props.mask)
-    }
-  }, [props.mask])
+  useEvent<MaskEditor>(
+    maskEditor,
+    'change',
+    prevProps?.onChange,
+    props.onChange
+  )
+  each(['theme', 'image', 'mask'], (key: keyof IMaskEditorProps) => {
+    useOption<MaskEditor, IMaskEditorProps>(maskEditor, key, props[key])
+  })
 
   return <div ref={maskEditorRef} style={props.style}></div>
 }

src/share/story.js

@@ -87,7 +87,10 @@ export default function story(
 
       fixKnobs(`react-${name}`)
 
-      const { theme } = createKnobs()
+      const { theme, language } = createKnobs()
+      if (language) {
+        i18n.locale(language)
+      }
       window.components = []
       delete window.component
       window.componentName = upperFirst(camelCase(`react-${name}`))