release(cropper): v0.2.0

index.json

@@ -54,7 +54,7 @@
     "react": false
   },
   "cropper": {
-    "version": "0.1.0",
+    "version": "0.2.0",
     "style": true,
     "icon": false,
     "test": true,

src/cropper/README.md

@@ -31,15 +31,15 @@ import LunaCropper from 'luna-cropper'
 ```javascript
 const container = document.getElementById('container')
 const cropper = new LunaCropper(container, {
-  url: 'https://res.liriliri.io/luna/wallpaper.jpg',
+  image: 'https://res.liriliri.io/luna/wallpaper.jpg',
 })
 console.log(cropper.getData())
 ```
 
 ## Configuration
 
-* preview(null | HTMLElement): Preview dom container.
-* url(string): Image url.
+* image(string): Image url.
+* preview(HTMLElement): Preview dom container.
 
 ## Api
 

src/cropper/index.ts

@@ -7,16 +7,16 @@ import throttle from 'licia/throttle'
 import clone from 'licia/clone'
 import max from 'licia/max'
 import contain from 'licia/contain'
-import { drag, eventPage } from '../share/util'
+import { drag, eventPage, exportCjs } from '../share/util'
 
 const $document = $(document as any)
 
 /** IOptions */
 export interface IOptions extends IComponentOptions {
   /** Image url. */
-  url: string
+  image: string
   /** Preview dom container. */
-  preview: HTMLElement | null
+  preview?: HTMLElement
 }
 
 interface IImageData {
@@ -51,7 +51,7 @@ interface ICropBoxData {
  * @example
  * const container = document.getElementById('container')
  * const cropper = new LunaCropper(container, {
- *   url: 'https://res.liriliri.io/luna/wallpaper.jpg',
+ *   image: 'https://res.liriliri.io/luna/wallpaper.jpg',
  * })
  * console.log(cropper.getData())
  */
@@ -108,7 +108,7 @@ export default class Cropper extends Component<IOptions> {
       this.initPreview(options.preview)
     }
 
-    this.load(options.url)
+    this.load(options.image)
   }
   destroy() {
     super.destroy()
@@ -179,6 +179,22 @@ export default class Cropper extends Component<IOptions> {
   private bindEvent() {
     this.resizeSensor.addListener(this.onResize)
     this.$container.on(drag('start'), this.onCropStart)
+
+    this.on('optionChange', (name, val) => {
+      switch (name) {
+        case 'preview':
+          if (val) {
+            this.initPreview(val)
+            this.load(this.options.image)
+          } else {
+            this.$preview = null
+          }
+          break
+        case 'image':
+          this.load(val)
+          break
+      }
+    })
   }
   private onCropStart = (e: any) => {
     e = e.origEvent
@@ -627,8 +643,9 @@ export default class Cropper extends Component<IOptions> {
   }
 }
 
-module.exports = Cropper
-module.exports.default = Cropper
-
 const round = Math.round
 const abs = Math.abs
+
+if (typeof module !== 'undefined') {
+  exportCjs(module, Cropper)
+}

src/cropper/package.json

@@ -1,5 +1,5 @@
 {
   "name": "cropper",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Image cropper"
 }

src/cropper/react.tsx

@@ -0,0 +1,46 @@
+import { CSSProperties, FC, useEffect, useRef } from 'react'
+import Cropper, { IOptions } from './index'
+
+interface ICropperProps extends IOptions {
+  style?: CSSProperties
+  className?: string
+  onCreate?: (cropper: Cropper) => void
+}
+
+const LunaCropper: FC<ICropperProps> = (props) => {
+  const cropperRef = useRef<HTMLDivElement>(null)
+  const cropper = useRef<Cropper>()
+
+  useEffect(() => {
+    const { image, preview } = props
+    cropper.current = new Cropper(cropperRef.current!, {
+      image,
+      preview,
+    })
+    props.onCreate && props.onCreate(cropper.current)
+
+    return () => cropper.current?.destroy()
+  }, [])
+
+  useEffect(() => {
+    if (cropper.current) {
+      cropper.current.setOption('image', props.image)
+    }
+  }, [props.image])
+
+  useEffect(() => {
+    if (cropper.current) {
+      cropper.current.setOption('preview', props.preview)
+    }
+  }, [props.preview])
+
+  return (
+    <div
+      className={props.className || ''}
+      style={props.style}
+      ref={cropperRef}
+    ></div>
+  )
+}
+
+export default LunaCropper

src/cropper/story.js

@@ -1,10 +1,12 @@
 import 'luna-cropper.css'
 import Cropper from 'luna-cropper.js'
+import LunaCropper from './react'
 import readme from './README.md'
 import story from '../share/story'
 import h from 'licia/h'
 import $ from 'licia/$'
 import { text } from '@storybook/addon-knobs'
+import { useState } from 'react'
 
 const def = story(
   'cropper',
@@ -27,10 +29,10 @@ const def = story(
     wrapper.appendChild(container)
     wrapper.appendChild(preview)
 
-    const url = text('Url', 'https://res.liriliri.io/luna/wallpaper.jpg')
+    const { image } = createKnobs()
 
     const cropper = new Cropper(container, {
-      url,
+      image,
       preview,
     })
 
@@ -39,9 +41,44 @@ const def = story(
   {
     readme,
     source: __STORY__,
+    ReactComponent() {
+      const { image } = createKnobs()
+      const [ref, setRef] = useState()
+
+      return (
+        <>
+          <LunaCropper
+            style={{
+              width: '100%',
+              height: 400,
+              aspectRatio: '2',
+            }}
+            onCreate={(cropper) => {
+              console.log(cropper)
+            }}
+            preview={ref}
+            image={image}
+          />
+          <div
+            style={{ width: '50%', margin: '1rem 0' }}
+            ref={(ref) => {
+              setRef(ref)
+            }}
+          />
+        </>
+      )
+    },
   }
 )
 
+function createKnobs() {
+  const image = text('Image', 'https://res.liriliri.io/luna/wallpaper.jpg')
+
+  return {
+    image,
+  }
+}
+
 export default def
 
-export const { cropper } = def
+export const { cropper: html, react } = def