@gm-pc/react 1.27.0 → 1.27.1-beta.0

package/src/component/img_uploader/img_uploader.tsx

@@ -1,168 +1,168 @@
-import React, {
-  CSSProperties,
-  FC,
-  PropsWithChildren,
-  ReactNode,
-  MouseEvent,
-  useCallback,
-} from 'react'
-import classNames from 'classnames'
-import { Uploader, UploaderFile, DefaultImage } from '../uploader'
-import { Flex } from '../flex'
-import SvgCloseCircle from '../../svg/close-circle.svg'
-
-// tip: 为了兼容特殊情况，设置 url 属性，提示调用方。
-type CheckType<T> = T extends String ? string : T & { url: string }
-
-export interface ImgUploaderProps<T> {
-  /** 已上传图片 URL 集合 */
-  data: CheckType<T>[]
-  /** 图片修改回调 */
-  onChange(lists: CheckType<T>[]): void
-  /** 上传按钮回调函数 */
-  onUpload(data: UploaderFile[]): Promise<CheckType<T>[]>
-  disabled?: boolean
-  accept?: string
-  /** 注意，这是添加按钮选择单图还是多图 */
-  multiple?: boolean
-  /** 图片的尺寸 */
-  contentSize?: {
-    width: string
-    height: string
-  }
-  desc?: string
-  /** 自定义图片展示 */
-  imgRender?(item: CheckType<T>): ReactNode
-  /** max 最大图片数 */
-  max?: number
-  className?: string
-  style?: CSSProperties
-}
-
-const ImgUploader = <T,>(
-  props: PropsWithChildren<ImgUploaderProps<T>>
-): ReturnType<FC<ImgUploaderProps<T>>> => {
-  let {
-    data,
-    onChange,
-    onUpload,
-    disabled,
-    accept,
-    multiple,
-    contentSize,
-    desc,
-    className,
-    children,
-    imgRender,
-    max,
-    ...rest
-  } = props
-
-  if (!imgRender) {
-    imgRender = (item: any) => (
-      <img
-        src={item?.url || item}
-        alt=''
-        style={{
-          width: '100%',
-          height: '100%',
-          objectFit: 'contain',
-        }}
-      />
-    )
-  }
-
-  const handleUploader = useCallback(
-    (files: UploaderFile[]): void => {
-      const result = onUpload(files)
-      if (result && result.then) {
-        result.then((urls) => {
-          onChange(data.concat(urls))
-          return urls
-        })
-      }
-    },
-    [onUpload, onChange, data]
-  )
-
-  const handleReplace = useCallback(
-    (files: UploaderFile[], index: number): void => {
-      const result = onUpload(files)
-      if (result && result.then) {
-        result.then((urls) => {
-          const newData = [...data]
-          newData[index] = urls[0]
-
-          onChange(newData)
-
-          return urls
-        })
-      }
-    },
-    [onUpload, onChange, data]
-  )
-
-  const handleRemove = useCallback(
-    (index: number): void => {
-      const newData = data.filter((_, i) => i !== index)
-      onChange(newData)
-    },
-    [data, onChange]
-  )
-
-  return (
-    <div {...rest} className={classNames('gm-img-uploader', className)}>
-      <Flex wrap>
-        {data.map((item, index) => (
-          <Uploader
-            onUpload={(files) => handleReplace(files, index)}
-            key={index}
-            accept={accept}
-            disabled={disabled}
-            className='gm-img-uploader-item'
-          >
-            <DefaultImage
-              style={{ width: contentSize!.width, height: contentSize!.height }}
-            >
-              {imgRender!(item)}
-            </DefaultImage>
-            {!disabled && (
-              <SvgCloseCircle
-                className='gm-img-uploader-close'
-                onClick={(event: MouseEvent) => {
-                  event.stopPropagation()
-                  handleRemove(index)
-                }}
-              />
-            )}
-          </Uploader>
-        ))}
-        {children ?? (
-          <Uploader
-            disabled={disabled || (max ? data.length >= max : false)}
-            accept={accept}
-            onUpload={handleUploader}
-            multiple={multiple}
-          >
-            <DefaultImage
-              style={{
-                width: contentSize!.width,
-                height: contentSize!.height,
-              }}
-            />
-          </Uploader>
-        )}
-      </Flex>
-      {desc && <div className='gm-text-desc gm-margin-5'>{desc}</div>}
-    </div>
-  )
-}
-
-ImgUploader.defaultProps = {
-  contentSize: {
-    width: '64px',
-    height: '64px',
-  },
-  accept: 'image/*',
-}
-export default ImgUploader
+import React, {
+  CSSProperties,
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  MouseEvent,
+  useCallback,
+} from 'react'
+import classNames from 'classnames'
+import { Uploader, UploaderFile, DefaultImage } from '../uploader'
+import { Flex } from '../flex'
+import SvgCloseCircle from '../../svg/close-circle.svg'
+
+// tip: 为了兼容特殊情况，设置 url 属性，提示调用方。
+type CheckType<T> = T extends String ? string : T & { url: string }
+
+export interface ImgUploaderProps<T> {
+  /** 已上传图片 URL 集合 */
+  data: CheckType<T>[]
+  /** 图片修改回调 */
+  onChange(lists: CheckType<T>[]): void
+  /** 上传按钮回调函数 */
+  onUpload(data: UploaderFile[]): Promise<CheckType<T>[]>
+  disabled?: boolean
+  accept?: string
+  /** 注意，这是添加按钮选择单图还是多图 */
+  multiple?: boolean
+  /** 图片的尺寸 */
+  contentSize?: {
+    width: string
+    height: string
+  }
+  desc?: string
+  /** 自定义图片展示 */
+  imgRender?(item: CheckType<T>): ReactNode
+  /** max 最大图片数 */
+  max?: number
+  className?: string
+  style?: CSSProperties
+}
+
+const ImgUploader = <T,>(
+  props: PropsWithChildren<ImgUploaderProps<T>>
+): ReturnType<FC<ImgUploaderProps<T>>> => {
+  let {
+    data,
+    onChange,
+    onUpload,
+    disabled,
+    accept,
+    multiple,
+    contentSize,
+    desc,
+    className,
+    children,
+    imgRender,
+    max,
+    ...rest
+  } = props
+
+  if (!imgRender) {
+    imgRender = (item: any) => (
+      <img
+        src={item?.url || item}
+        alt=''
+        style={{
+          width: '100%',
+          height: '100%',
+          objectFit: 'contain',
+        }}
+      />
+    )
+  }
+
+  const handleUploader = useCallback(
+    (files: UploaderFile[]): void => {
+      const result = onUpload(files)
+      if (result && result.then) {
+        result.then((urls) => {
+          onChange(data.concat(urls))
+          return urls
+        })
+      }
+    },
+    [onUpload, onChange, data]
+  )
+
+  const handleReplace = useCallback(
+    (files: UploaderFile[], index: number): void => {
+      const result = onUpload(files)
+      if (result && result.then) {
+        result.then((urls) => {
+          const newData = [...data]
+          newData[index] = urls[0]
+
+          onChange(newData)
+
+          return urls
+        })
+      }
+    },
+    [onUpload, onChange, data]
+  )
+
+  const handleRemove = useCallback(
+    (index: number): void => {
+      const newData = data.filter((_, i) => i !== index)
+      onChange(newData)
+    },
+    [data, onChange]
+  )
+
+  return (
+    <div {...rest} className={classNames('gm-img-uploader', className)}>
+      <Flex wrap>
+        {data.map((item, index) => (
+          <Uploader
+            onUpload={(files) => handleReplace(files, index)}
+            key={index}
+            accept={accept}
+            disabled={disabled}
+            className='gm-img-uploader-item'
+          >
+            <DefaultImage
+              style={{ width: contentSize!.width, height: contentSize!.height }}
+            >
+              {imgRender!(item)}
+            </DefaultImage>
+            {!disabled && (
+              <SvgCloseCircle
+                className='gm-img-uploader-close'
+                onClick={(event: MouseEvent) => {
+                  event.stopPropagation()
+                  handleRemove(index)
+                }}
+              />
+            )}
+          </Uploader>
+        ))}
+        {children ?? (
+          <Uploader
+            disabled={disabled || (max ? data.length >= max : false)}
+            accept={accept}
+            onUpload={handleUploader}
+            multiple={multiple}
+          >
+            <DefaultImage
+              style={{
+                width: contentSize!.width,
+                height: contentSize!.height,
+              }}
+            />
+          </Uploader>
+        )}
+      </Flex>
+      {desc && <div className='gm-text-desc gm-margin-5'>{desc}</div>}
+    </div>
+  )
+}
+
+ImgUploader.defaultProps = {
+  contentSize: {
+    width: '64px',
+    height: '64px',
+  },
+  accept: 'image/*',
+}
+export default ImgUploader

package/src/component/img_uploader/index.ts

@@ -1,2 +1,2 @@
-export { default as ImgUploader } from './img_uploader'
-export type { ImgUploaderProps } from './img_uploader'
+export { default as ImgUploader } from './img_uploader'
+export type { ImgUploaderProps } from './img_uploader'

package/src/component/img_uploader/stories.tsx

@@ -1,58 +1,58 @@
-import React from 'react'
-import ImgUploader from './img_uploader'
-import { observable } from 'mobx'
-import { UploaderFile } from '../uploader'
-
-const store = observable({
-  data: ['https://js.guanmai.cn/static_storage/json/common/logo/default/logo.pure.png'],
-  setData(newData: string[]) {
-    this.data = newData
-  },
-})
-
-const handleUpload = (files: UploaderFile[]) => {
-  console.log(files)
-  // 调用方做突破尺寸和文件大小判断
-
-  return Promise.resolve([
-    'https://js.guanmai.cn/static_storage/json/common/logo/default/logo.pure.png',
-  ])
-}
-
-export const ComImgUploader = () => (
-  <div>
-    <div style={{ height: '100px' }} />
-    <ImgUploader
-      data={store.data}
-      onUpload={handleUpload}
-      onChange={(data) => {
-        store.setData(data)
-      }}
-      accept='image/*'
-      desc='图片尺寸720*720像素，大小小于1M'
-      multiple
-      max={2}
-    />
-  </div>
-)
-
-export const ComImgUploaderWithDisabled = () => (
-  <div>
-    <div style={{ height: '100px' }} />
-    <ImgUploader
-      disabled
-      data={store.data}
-      onUpload={handleUpload}
-      onChange={(data) => {
-        store.setData(data)
-      }}
-      accept='image/*'
-      desc='图片尺寸720*720像素，大小小于1M'
-      multiple
-    />
-  </div>
-)
-
-export default {
-  title: '表单/ImgUploader',
-}
+import React from 'react'
+import ImgUploader from './img_uploader'
+import { observable } from 'mobx'
+import { UploaderFile } from '../uploader'
+
+const store = observable({
+  data: ['https://js.guanmai.cn/static_storage/json/common/logo/default/logo.pure.png'],
+  setData(newData: string[]) {
+    this.data = newData
+  },
+})
+
+const handleUpload = (files: UploaderFile[]) => {
+  console.log(files)
+  // 调用方做突破尺寸和文件大小判断
+
+  return Promise.resolve([
+    'https://js.guanmai.cn/static_storage/json/common/logo/default/logo.pure.png',
+  ])
+}
+
+export const ComImgUploader = () => (
+  <div>
+    <div style={{ height: '100px' }} />
+    <ImgUploader
+      data={store.data}
+      onUpload={handleUpload}
+      onChange={(data) => {
+        store.setData(data)
+      }}
+      accept='image/*'
+      desc='图片尺寸720*720像素，大小小于1M'
+      multiple
+      max={2}
+    />
+  </div>
+)
+
+export const ComImgUploaderWithDisabled = () => (
+  <div>
+    <div style={{ height: '100px' }} />
+    <ImgUploader
+      disabled
+      data={store.data}
+      onUpload={handleUpload}
+      onChange={(data) => {
+        store.setData(data)
+      }}
+      accept='image/*'
+      desc='图片尺寸720*720像素，大小小于1M'
+      multiple
+    />
+  </div>
+)
+
+export default {
+  title: '表单/ImgUploader',
+}

package/src/component/img_uploader/style.less

@@ -1,22 +1,22 @@
-.gm-img-uploader {
-  display: inline-block;
-
-  .gm-img-uploader-item {
-    position: relative;
-    margin-right: 10px;
-
-    .gm-img-uploader-close {
-      position: absolute;
-      cursor: pointer;
-      display: none;
-      right: -0.5em;
-      top: -0.5em;
-    }
-
-    &:hover {
-      .gm-img-uploader-close {
-        display: block;
-      }
-    }
-  }
-}
+.gm-img-uploader {
+  display: inline-block;
+
+  .gm-img-uploader-item {
+    position: relative;
+    margin-right: 10px;
+
+    .gm-img-uploader-close {
+      position: absolute;
+      cursor: pointer;
+      display: none;
+      right: -0.5em;
+      top: -0.5em;
+    }
+
+    &:hover {
+      .gm-img-uploader-close {
+        display: block;
+      }
+    }
+  }
+}

package/src/component/input/index.ts

@@ -1,5 +1,5 @@
-export { default as Input } from './input'
-export { default as InputClose } from './input_close'
-
-export type { InputProps } from './input'
-export type { InputCloseProps } from './input_close'
+export { default as Input } from './input'
+export { default as InputClose } from './input_close'
+
+export type { InputProps } from './input'
+export type { InputCloseProps } from './input_close'

package/src/component/input/input.tsx

@@ -1,24 +1,24 @@
-import React, { forwardRef, InputHTMLAttributes, useContext } from 'react'
-import classNames from 'classnames'
-import { ConfigContext } from '../config_provider'
-
-type InputProps = InputHTMLAttributes<HTMLInputElement>
-
-/** 没什么，就一个input，多了个类名 gm-input 用来和库配合做UI */
-const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const { className, value = '', ...rest } = props
-  const { fontSize } = useContext(ConfigContext)
-  return (
-    <input
-      ref={ref}
-      {...rest}
-      value={value}
-      className={classNames('gm-input', className, {
-        [`gm-input-${fontSize}`]: fontSize,
-      })}
-    />
-  )
-})
-
-export default Input
-export type { InputProps }
+import React, { forwardRef, InputHTMLAttributes, useContext } from 'react'
+import classNames from 'classnames'
+import { ConfigContext } from '../config_provider'
+
+type InputProps = InputHTMLAttributes<HTMLInputElement>
+
+/** 没什么，就一个input，多了个类名 gm-input 用来和库配合做UI */
+const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const { className, value = '', ...rest } = props
+  const { fontSize } = useContext(ConfigContext)
+  return (
+    <input
+      ref={ref}
+      {...rest}
+      value={value}
+      className={classNames('gm-input', className, {
+        [`gm-input-${fontSize}`]: fontSize,
+      })}
+    />
+  )
+})
+
+export default Input
+export type { InputProps }

package/src/component/input/input_close.tsx

@@ -1,51 +1,51 @@
-import React, { ChangeEvent, forwardRef, InputHTMLAttributes, useRef } from 'react'
-import classNames from 'classnames'
-import SVGCloseCircle from '../../svg/close-circle.svg'
-import { findDOMNode } from 'react-dom'
-import Input, { InputProps } from './input'
-
-interface InputCloseProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-  onChange?(value: string): void
-}
-
-const InputClose = forwardRef<HTMLInputElement, InputCloseProps>((props, ref) => {
-  const { value, onChange, disabled, className, style, ...rest } = props
-
-  const refWrap = useRef<HTMLDivElement>(null)
-
-  const handleClose = () => {
-    onChange && onChange('')
-    const dom = findDOMNode(refWrap.current) as Element
-    if (dom) {
-      const input = dom.querySelector('input')
-      if (input) {
-        input.focus()
-      }
-    }
-  }
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    onChange && onChange(e.target.value)
-  }
-
-  return (
-    <div
-      ref={refWrap}
-      className={classNames('gm-input-close', className, { disabled })}
-      style={style}
-    >
-      <Input
-        ref={ref}
-        {...(rest as InputProps)}
-        value={value}
-        onChange={handleChange}
-        disabled={disabled}
-      />
-      {value && <SVGCloseCircle onClick={handleClose} className='gm-input-close-icon' />}
-    </div>
-  )
-})
-
-export default InputClose
-export type { InputCloseProps }
+import React, { ChangeEvent, forwardRef, InputHTMLAttributes, useRef } from 'react'
+import classNames from 'classnames'
+import SVGCloseCircle from '../../svg/close-circle.svg'
+import { findDOMNode } from 'react-dom'
+import Input, { InputProps } from './input'
+
+interface InputCloseProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  onChange?(value: string): void
+}
+
+const InputClose = forwardRef<HTMLInputElement, InputCloseProps>((props, ref) => {
+  const { value, onChange, disabled, className, style, ...rest } = props
+
+  const refWrap = useRef<HTMLDivElement>(null)
+
+  const handleClose = () => {
+    onChange && onChange('')
+    const dom = findDOMNode(refWrap.current) as Element
+    if (dom) {
+      const input = dom.querySelector('input')
+      if (input) {
+        input.focus()
+      }
+    }
+  }
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange && onChange(e.target.value)
+  }
+
+  return (
+    <div
+      ref={refWrap}
+      className={classNames('gm-input-close', className, { disabled })}
+      style={style}
+    >
+      <Input
+        ref={ref}
+        {...(rest as InputProps)}
+        value={value}
+        onChange={handleChange}
+        disabled={disabled}
+      />
+      {value && <SVGCloseCircle onClick={handleClose} className='gm-input-close-icon' />}
+    </div>
+  )
+})
+
+export default InputClose
+export type { InputCloseProps }