@gm-pc/cropper 1.24.9-beta.13 → 1.24.9-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/cropper",
-  "version": "1.24.9-beta.13",
+  "version": "1.24.9-beta.14",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -26,10 +26,10 @@
     "react-dom": "^16.14.0"
   },
   "dependencies": {
-    "@gm-pc/locales": "^1.24.9-beta.13",
-    "@gm-pc/react": "^1.24.9-beta.13",
-    "@gm-pc/table-x": "^1.24.9-beta.13",
+    "@gm-pc/locales": "^1.24.9-beta.14",
+    "@gm-pc/react": "^1.24.9-beta.14",
+    "@gm-pc/table-x": "^1.24.9-beta.14",
     "cropperjs": "^1.5.9"
   },
-  "gitHead": "b773c85a7a6d591837f7f90058bbbc3c596f5a8c"
+  "gitHead": "00c9b30ab0b492a57273126591b003ca2f3dce1b"
 }

package/src/cropper.tsx

@@ -1,120 +1,120 @@
-import React, { FC, useEffect, useRef } from 'react'
-import { Button, Flex, UploaderFile, Modal } from '@gm-pc/react'
-import CropperJS from 'cropperjs'
-import { getLocale } from '@gm-pc/locales'
-import getType from './get_type'
-
-const DEFAULT_OPTIONS: CropperJS.Options = {
-  aspectRatio: 1,
-  viewMode: 1,
-}
-
-export interface CropperProps {
-  file?: UploaderFile
-  url?: string
-  options?: CropperJS.Options
-  croppedOptions?: { width?: number; height: number }
-  onCancel(): void
-  onOK(blob: Blob | null): void
-}
-
-interface CropperStatic {
-  SIZE: {
-    SKU: { width: number; height: number }
-    LOGO: { width: number; height: number }
-  }
-  render(props: Omit<CropperProps, 'onCancel' | 'onOK'>): Promise<Blob | null>
-  hide: typeof Modal.hide
-}
-
-const Cropper: FC<CropperProps> & CropperStatic = ({
-  file,
-  url,
-  options,
-  croppedOptions,
-  onCancel,
-  onOK,
-}) => {
-  const imageRef = useRef<HTMLImageElement>(null)
-  const imgPreviewRef = useRef<HTMLDivElement>(null)
-  const cropperRef = useRef<CropperJS>()
-
-  useEffect(() => {
-    const imgDOM: HTMLImageElement = imageRef.current!
-    const imgPreviewDOM: HTMLDivElement = imgPreviewRef.current!
-    cropperRef.current = new CropperJS(imgDOM, {
-      ...DEFAULT_OPTIONS,
-      ...options,
-      preview: imgPreviewDOM,
-    })
-  }, [options])
-
-  const handleOK = (): void => {
-    cropperRef.current!.getCroppedCanvas(croppedOptions).toBlob(
-      (blob) => {
-        onOK(blob)
-      },
-      url ? getType(url) ?? 'image/jpeg' : file?.type
-    )
-  }
-
-  return (
-    <div className='gm-cropper'>
-      <Flex justifyBetween>
-        <div>
-          <img
-            alt=''
-            className='gm-cropper-img'
-            ref={imageRef}
-            src={url ?? file?.preview}
-          />
-        </div>
-        <div>
-          <div ref={imgPreviewRef} className='gm-cropper-preview' />
-          <div className='gm-text-desc gm-text-center gm-margin-top-10'>
-            {getLocale('预览')}
-          </div>
-        </div>
-      </Flex>
-      <div className='text-right gm-margin-top-10'>
-        <Button onClick={onCancel}>{getLocale('取消')}</Button>
-        <div className='gm-gap-10' />
-        <Button type='primary' onClick={handleOK}>
-          {getLocale('确定')}
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-Cropper.SIZE = {
-  SKU: { width: 720, height: 720 },
-  LOGO: { width: 720, height: 720 },
-}
-
-Cropper.render = (props) => {
-  return new Promise<Blob | null>((resolve, reject) => {
-    const handleOk = (blob: Blob | null) => {
-      Modal.hide()
-      resolve(blob)
-    }
-
-    const handleCancel = () => {
-      Modal.hide()
-      reject(new Error('cancel'))
-    }
-
-    Modal.render({
-      title: getLocale('编辑头像'),
-      children: <Cropper {...props} onCancel={handleCancel} onOK={handleOk} />,
-      disableMaskClose: true,
-      style: {
-        width: '520px',
-      },
-    })
-  })
-}
-
-Cropper.hide = Modal.hide
-
-export default Cropper
+import React, { FC, useEffect, useRef } from 'react'
+import { Button, Flex, UploaderFile, Modal } from '@gm-pc/react'
+import CropperJS from 'cropperjs'
+import { getLocale } from '@gm-pc/locales'
+import getType from './get_type'
+
+const DEFAULT_OPTIONS: CropperJS.Options = {
+  aspectRatio: 1,
+  viewMode: 1,
+}
+
+export interface CropperProps {
+  file?: UploaderFile
+  url?: string
+  options?: CropperJS.Options
+  croppedOptions?: { width?: number; height: number }
+  onCancel(): void
+  onOK(blob: Blob | null): void
+}
+
+interface CropperStatic {
+  SIZE: {
+    SKU: { width: number; height: number }
+    LOGO: { width: number; height: number }
+  }
+  render(props: Omit<CropperProps, 'onCancel' | 'onOK'>): Promise<Blob | null>
+  hide: typeof Modal.hide
+}
+
+const Cropper: FC<CropperProps> & CropperStatic = ({
+  file,
+  url,
+  options,
+  croppedOptions,
+  onCancel,
+  onOK,
+}) => {
+  const imageRef = useRef<HTMLImageElement>(null)
+  const imgPreviewRef = useRef<HTMLDivElement>(null)
+  const cropperRef = useRef<CropperJS>()
+
+  useEffect(() => {
+    const imgDOM: HTMLImageElement = imageRef.current!
+    const imgPreviewDOM: HTMLDivElement = imgPreviewRef.current!
+    cropperRef.current = new CropperJS(imgDOM, {
+      ...DEFAULT_OPTIONS,
+      ...options,
+      preview: imgPreviewDOM,
+    })
+  }, [options])
+
+  const handleOK = (): void => {
+    cropperRef.current!.getCroppedCanvas(croppedOptions).toBlob(
+      (blob) => {
+        onOK(blob)
+      },
+      url ? getType(url) ?? 'image/jpeg' : file?.type
+    )
+  }
+
+  return (
+    <div className='gm-cropper'>
+      <Flex justifyBetween>
+        <div>
+          <img
+            alt=''
+            className='gm-cropper-img'
+            ref={imageRef}
+            src={url ?? file?.preview}
+          />
+        </div>
+        <div>
+          <div ref={imgPreviewRef} className='gm-cropper-preview' />
+          <div className='gm-text-desc gm-text-center gm-margin-top-10'>
+            {getLocale('预览')}
+          </div>
+        </div>
+      </Flex>
+      <div className='text-right gm-margin-top-10'>
+        <Button onClick={onCancel}>{getLocale('取消')}</Button>
+        <div className='gm-gap-10' />
+        <Button type='primary' onClick={handleOK}>
+          {getLocale('确定')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+Cropper.SIZE = {
+  SKU: { width: 720, height: 720 },
+  LOGO: { width: 720, height: 720 },
+}
+
+Cropper.render = (props) => {
+  return new Promise<Blob | null>((resolve, reject) => {
+    const handleOk = (blob: Blob | null) => {
+      Modal.hide()
+      resolve(blob)
+    }
+
+    const handleCancel = () => {
+      Modal.hide()
+      reject(new Error('cancel'))
+    }
+
+    Modal.render({
+      title: getLocale('编辑头像'),
+      children: <Cropper {...props} onCancel={handleCancel} onOK={handleOk} />,
+      disableMaskClose: true,
+      style: {
+        width: '520px',
+      },
+    })
+  })
+}
+
+Cropper.hide = Modal.hide
+
+export default Cropper

package/src/get_type.ts

@@ -1,12 +1,12 @@
-function getType(url: string): string | undefined {
-  if (url.includes('.png')) {
-    return 'image/png'
-  } else if (url.includes('.jpg') || url.includes('.jpeg')) {
-    return 'image/jpeg'
-  } else if (url.includes('png')) {
-    return 'image/png'
-  }
-  return undefined
-}
-
-export default getType
+function getType(url: string): string | undefined {
+  if (url.includes('.png')) {
+    return 'image/png'
+  } else if (url.includes('.jpg') || url.includes('.jpeg')) {
+    return 'image/jpeg'
+  } else if (url.includes('png')) {
+    return 'image/png'
+  }
+  return undefined
+}
+
+export default getType

package/src/index.less

@@ -1,21 +1,21 @@
-@import '~cropperjs/dist/cropper.min.css';
-
-.gm-cropper {
-  width: 500px;
-
-  .gm-cropper-img {
-    display: block;
-    width: 360px;
-    height: 360px;
-    max-width: 360px;
-    max-height: 360px;
-  }
-
-  .gm-cropper-preview {
-    width: 120px;
-    max-width: 120px;
-    height: 120px;
-    max-height: 120px;
-    overflow: hidden;
-  }
-}
+@import '~cropperjs/dist/cropper.min.css';
+
+.gm-cropper {
+  width: 500px;
+
+  .gm-cropper-img {
+    display: block;
+    width: 360px;
+    height: 360px;
+    max-width: 360px;
+    max-height: 360px;
+  }
+
+  .gm-cropper-preview {
+    width: 120px;
+    max-width: 120px;
+    height: 120px;
+    max-height: 120px;
+    overflow: hidden;
+  }
+}

package/src/index.ts

@@ -1,2 +1,2 @@
-export { default as Cropper } from './cropper'
-export type { CropperProps } from './cropper'
+export { default as Cropper } from './cropper'
+export type { CropperProps } from './cropper'

package/src/stories.tsx

@@ -1,77 +1,77 @@
-import React from 'react'
-import Cropper from './cropper'
-import { Uploader } from '@gm-pc/react'
-
-export const ComCropper = () => {
-  return (
-    <Uploader
-      accept='image/*'
-      onUpload={(files) => {
-        console.log(files[0])
-        console.log('size before', files[0].size / 1024)
-        Cropper.render({
-          file: files[0],
-        }).then((data) => {
-          console.log(data)
-          console.log('size after', data!.size / 1024)
-
-          window.open(window.URL.createObjectURL(data))
-        })
-      }}
-    />
-  )
-}
-
-export const ComCropperWithSize = () => {
-  return (
-    <Uploader
-      accept='image/*'
-      onUpload={(files) => {
-        console.log(files[0])
-        console.log('size before', files[0].size / 1024, 'kb')
-        Cropper.render({
-          file: files[0],
-          croppedOptions: {
-            ...Cropper.SIZE.SKU,
-          },
-        }).then((data) => {
-          console.log(data)
-          console.log('size after', data!.size / 1024, 'kb')
-
-          window.open(window.URL.createObjectURL(data))
-        })
-      }}
-    />
-  )
-}
-
-export const ComCropperWithAspectRatio = () => {
-  return (
-    <Uploader
-      accept='image/*'
-      onUpload={(files) => {
-        console.log(files[0])
-        console.log('size before', files[0].size / 1024, 'kb')
-        Cropper.render({
-          file: files[0],
-          options: {
-            aspectRatio: 2,
-          },
-          croppedOptions: {
-            width: 720,
-            height: 360,
-          },
-        }).then((data) => {
-          console.log(data)
-          console.log('size after', data!.size / 1024, 'kb')
-
-          window.open(window.URL.createObjectURL(data))
-        })
-      }}
-    />
-  )
-}
-
-export default {
-  title: 'Cropper/Cropper',
-}
+import React from 'react'
+import Cropper from './cropper'
+import { Uploader } from '@gm-pc/react'
+
+export const ComCropper = () => {
+  return (
+    <Uploader
+      accept='image/*'
+      onUpload={(files) => {
+        console.log(files[0])
+        console.log('size before', files[0].size / 1024)
+        Cropper.render({
+          file: files[0],
+        }).then((data) => {
+          console.log(data)
+          console.log('size after', data!.size / 1024)
+
+          window.open(window.URL.createObjectURL(data))
+        })
+      }}
+    />
+  )
+}
+
+export const ComCropperWithSize = () => {
+  return (
+    <Uploader
+      accept='image/*'
+      onUpload={(files) => {
+        console.log(files[0])
+        console.log('size before', files[0].size / 1024, 'kb')
+        Cropper.render({
+          file: files[0],
+          croppedOptions: {
+            ...Cropper.SIZE.SKU,
+          },
+        }).then((data) => {
+          console.log(data)
+          console.log('size after', data!.size / 1024, 'kb')
+
+          window.open(window.URL.createObjectURL(data))
+        })
+      }}
+    />
+  )
+}
+
+export const ComCropperWithAspectRatio = () => {
+  return (
+    <Uploader
+      accept='image/*'
+      onUpload={(files) => {
+        console.log(files[0])
+        console.log('size before', files[0].size / 1024, 'kb')
+        Cropper.render({
+          file: files[0],
+          options: {
+            aspectRatio: 2,
+          },
+          croppedOptions: {
+            width: 720,
+            height: 360,
+          },
+        }).then((data) => {
+          console.log(data)
+          console.log('size after', data!.size / 1024, 'kb')
+
+          window.open(window.URL.createObjectURL(data))
+        })
+      }}
+    />
+  )
+}
+
+export default {
+  title: 'Cropper/Cropper',
+}