@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/img_uploader/index.js

@@ -1,149 +1,149 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Uploader from '../uploader/index'
-import _ from 'lodash'
-import Flex from '../flex'
-import classNames from 'classnames'
-import SvgCloseCircle from '../../../svg/close-circle.svg'
-
-const { DefaultImage } = Uploader
-
-function ImgUploader(props) {
-  const {
-    data,
-    onChange,
-    onUpload,
-    disabled,
-    accept,
-    multiple,
-    contentSize,
-    desc,
-    className,
-    children,
-    imgRender,
-    ...rest
-  } = props
-
-  const handleRemove = (e, index) => {
-    e.stopPropagation()
-
-    const newData = _.filter(data, (v, i) => i !== index)
-    onChange(newData)
-  }
-
-  const handleUploader = files => {
-    const result = onUpload(files)
-    if (result && result.then) {
-      result.then(urls => {
-        onChange(data.concat(urls))
-      })
-    }
-  }
-
-  const handleReplace = (files, index) => {
-    const result = onUpload(files)
-    if (result && result.then) {
-      result.then(urls => {
-        const newData = [...data]
-        newData[index] = urls[0]
-
-        onChange(newData)
-      })
-    }
-  }
-
-  return (
-    <div {...rest} className={classNames('gm-img-uploader', className)}>
-      <Flex wrap>
-        {_.map(data, (item, index) => (
-          <Uploader
-            key={index}
-            accept={accept}
-            disabled={disabled}
-            onUpload={files => handleReplace(files, index)}
-            className='gm-img-uploader-item'
-          >
-            <DefaultImage
-              style={{
-                width: contentSize.width,
-                height: contentSize.height
-              }}
-            >
-              {imgRender ? (
-                imgRender(item)
-              ) : (
-                <img
-                  src={item}
-                  style={{
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'contain'
-                  }}
-                />
-              )}
-            </DefaultImage>
-            {!disabled && (
-              <SvgCloseCircle
-                className='gm-img-uploader-close'
-                onClick={e => handleRemove(e, index)}
-              />
-            )}
-          </Uploader>
-        ))}
-        {children || (
-          <Uploader
-            disabled={disabled}
-            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.propTypes = {
-  /** list */
-  data: PropTypes.array.isRequired,
-  onChange: PropTypes.func.isRequired,
-  /** 上传按钮回调，参数是 files，返回 promise resolve 回 [url] */
-  onUpload: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
-  /** 上传接受的图片类型 */
-  accept: PropTypes.string,
-  /** 注意，这是添加按钮选择单图还是多图 */
-  multiple: PropTypes.bool,
-  /** 图片的尺寸 */
-  contentSize: PropTypes.shape({
-    width: PropTypes.string,
-    height: PropTypes.string
-  }),
-  /** 描述 */
-  desc: PropTypes.string,
-  /** return element */
-  imgRender: PropTypes.func,
-
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-ImgUploader.defaultProps = {
-  contentSize: {
-    width: '64px',
-    height: '64px'
-  },
-  accept: 'image/*',
-  size: 1024
-}
-
-export default ImgUploader
+import React from 'react'
+import PropTypes from 'prop-types'
+import Uploader from '../uploader/index'
+import _ from 'lodash'
+import Flex from '../flex'
+import classNames from 'classnames'
+import SvgCloseCircle from '../../../svg/close-circle.svg'
+
+const { DefaultImage } = Uploader
+
+function ImgUploader(props) {
+  const {
+    data,
+    onChange,
+    onUpload,
+    disabled,
+    accept,
+    multiple,
+    contentSize,
+    desc,
+    className,
+    children,
+    imgRender,
+    ...rest
+  } = props
+
+  const handleRemove = (e, index) => {
+    e.stopPropagation()
+
+    const newData = _.filter(data, (v, i) => i !== index)
+    onChange(newData)
+  }
+
+  const handleUploader = files => {
+    const result = onUpload(files)
+    if (result && result.then) {
+      result.then(urls => {
+        onChange(data.concat(urls))
+      })
+    }
+  }
+
+  const handleReplace = (files, index) => {
+    const result = onUpload(files)
+    if (result && result.then) {
+      result.then(urls => {
+        const newData = [...data]
+        newData[index] = urls[0]
+
+        onChange(newData)
+      })
+    }
+  }
+
+  return (
+    <div {...rest} className={classNames('gm-img-uploader', className)}>
+      <Flex wrap>
+        {_.map(data, (item, index) => (
+          <Uploader
+            key={index}
+            accept={accept}
+            disabled={disabled}
+            onUpload={files => handleReplace(files, index)}
+            className='gm-img-uploader-item'
+          >
+            <DefaultImage
+              style={{
+                width: contentSize.width,
+                height: contentSize.height
+              }}
+            >
+              {imgRender ? (
+                imgRender(item)
+              ) : (
+                <img
+                  src={item}
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'contain'
+                  }}
+                />
+              )}
+            </DefaultImage>
+            {!disabled && (
+              <SvgCloseCircle
+                className='gm-img-uploader-close'
+                onClick={e => handleRemove(e, index)}
+              />
+            )}
+          </Uploader>
+        ))}
+        {children || (
+          <Uploader
+            disabled={disabled}
+            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.propTypes = {
+  /** list */
+  data: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  /** 上传按钮回调，参数是 files，返回 promise resolve 回 [url] */
+  onUpload: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+  /** 上传接受的图片类型 */
+  accept: PropTypes.string,
+  /** 注意，这是添加按钮选择单图还是多图 */
+  multiple: PropTypes.bool,
+  /** 图片的尺寸 */
+  contentSize: PropTypes.shape({
+    width: PropTypes.string,
+    height: PropTypes.string
+  }),
+  /** 描述 */
+  desc: PropTypes.string,
+  /** return element */
+  imgRender: PropTypes.func,
+
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+ImgUploader.defaultProps = {
+  contentSize: {
+    width: '64px',
+    height: '64px'
+  },
+  accept: 'image/*',
+  size: 1024
+}
+
+export default ImgUploader

package/src/component/img_uploader/index.stories.js

@@ -1,51 +1,51 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import ImgUploader from './index'
-import { observable } from 'mobx'
-
-const store = observable({
-  data: [
-    'https://js.guanmai.cn/static_storage/json/common/logo/default/logo.pure.png'
-  ],
-  setData(newData) {
-    this.data = newData
-  }
-})
-
-const handleUpload = files => {
-  console.log(files)
-  // 调用方做突破尺寸和文件大小判断
-
-  return Promise.resolve([
-    'https://js.guanmai.cn/static_storage/json/common/logo/default/logo.pure.png'
-  ])
-}
-
-storiesOf('ImgUploader', module)
-  .add('default', () => (
-    <div>
-      <div style={{ height: '100px' }} />
-      <ImgUploader
-        data={store.data}
-        onUpload={handleUpload}
-        onChange={data => store.setData(data)}
-        accept='image/*'
-        desc='图片尺寸720*720像素，大小小于1M'
-        multiple
-      />
-    </div>
-  ))
-  .add('disabled', () => (
-    <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>
-  ))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import ImgUploader from './index'
+import { observable } from 'mobx'
+
+const store = observable({
+  data: [
+    'https://js.guanmai.cn/static_storage/json/common/logo/default/logo.pure.png'
+  ],
+  setData(newData) {
+    this.data = newData
+  }
+})
+
+const handleUpload = files => {
+  console.log(files)
+  // 调用方做突破尺寸和文件大小判断
+
+  return Promise.resolve([
+    'https://js.guanmai.cn/static_storage/json/common/logo/default/logo.pure.png'
+  ])
+}
+
+storiesOf('ImgUploader', module)
+  .add('default', () => (
+    <div>
+      <div style={{ height: '100px' }} />
+      <ImgUploader
+        data={store.data}
+        onUpload={handleUpload}
+        onChange={data => store.setData(data)}
+        accept='image/*'
+        desc='图片尺寸720*720像素，大小小于1M'
+        multiple
+      />
+    </div>
+  ))
+  .add('disabled', () => (
+    <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>
+  ))

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.js

@@ -1,19 +1,19 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-/** 没什么，就一个input，多了个类名 gm-input 用来和库配合做UI */
-const Input = forwardRef((props, ref) => {
-  const { className, ...rest } = props
-  return (
-    <input ref={ref} {...rest} className={classNames('gm-input', className)} />
-  )
-})
-
-Input.displayName = 'Input'
-
-Input.propTypes = {
-  className: PropTypes.string
-}
-
-export default Input
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+/** 没什么，就一个input，多了个类名 gm-input 用来和库配合做UI */
+const Input = forwardRef((props, ref) => {
+  const { className, ...rest } = props
+  return (
+    <input ref={ref} {...rest} className={classNames('gm-input', className)} />
+  )
+})
+
+Input.displayName = 'Input'
+
+Input.propTypes = {
+  className: PropTypes.string
+}
+
+export default Input

package/src/component/input_number/index.js

@@ -1,73 +1,73 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-class InputNumber extends React.Component {
-  handleChange = e => {
-    const { max, min, precision, minus } = this.props
-    const value = e.target.value.replace(/。/g, '.')
-
-    let figure = value
-
-    const reg = new RegExp(
-      '(^[1-9]\\d*(\\.\\d{0,' +
-        precision +
-        '})?$)|(^0(\\.\\d{0,' +
-        precision +
-        '})?$)'
-    )
-
-    if (minus && value.indexOf('-') === 0) {
-      // 去掉减号，然后去匹配正则
-      figure = value.slice(1)
-    }
-
-    if (reg.test(figure) || figure === '' || /^0[1-9]/.test(value)) {
-      const currentValue = Number(value)
-      if (max !== undefined && currentValue > max) {
-        this.props.onChange(max)
-      } else if (min !== undefined && currentValue < min) {
-        this.props.onChange(min)
-      } else {
-        // 如果第一个数字是0，第二个是1-9，则选取第二个数字
-        this.props.onChange(/^0[1-9]/.test(value) ? value.slice(1) : value)
-      }
-    } else if (
-      value.length < this.props.value.toString().length &&
-      reg.test(value)
-    ) {
-      // 有默认值，且不符合以上的规则，但是是一个删减字符的操作
-      this.props.onChange(value)
-    }
-  }
-
-  render() {
-    const {
-      precision,
-      minus, // eslint-disable-line
-      ...rest
-    } = this.props
-
-    return <input {...rest} type='text' onChange={this.handleChange} />
-  }
-}
-
-InputNumber.displayName = 'InputNumber'
-
-InputNumber.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  max: PropTypes.number,
-  min: PropTypes.number,
-  precision: PropTypes.number, // 精确度，保留几位小数
-  onChange: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  minus: PropTypes.bool, // 是否支持输入负数,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-InputNumber.defaultProps = {
-  precision: 2,
-  minus: false
-}
-
-export default InputNumber
+import React from 'react'
+import PropTypes from 'prop-types'
+
+class InputNumber extends React.Component {
+  handleChange = e => {
+    const { max, min, precision, minus } = this.props
+    const value = e.target.value.replace(/。/g, '.')
+
+    let figure = value
+
+    const reg = new RegExp(
+      '(^[1-9]\\d*(\\.\\d{0,' +
+        precision +
+        '})?$)|(^0(\\.\\d{0,' +
+        precision +
+        '})?$)'
+    )
+
+    if (minus && value.indexOf('-') === 0) {
+      // 去掉减号，然后去匹配正则
+      figure = value.slice(1)
+    }
+
+    if (reg.test(figure) || figure === '' || /^0[1-9]/.test(value)) {
+      const currentValue = Number(value)
+      if (max !== undefined && currentValue > max) {
+        this.props.onChange(max)
+      } else if (min !== undefined && currentValue < min) {
+        this.props.onChange(min)
+      } else {
+        // 如果第一个数字是0，第二个是1-9，则选取第二个数字
+        this.props.onChange(/^0[1-9]/.test(value) ? value.slice(1) : value)
+      }
+    } else if (
+      value.length < this.props.value.toString().length &&
+      reg.test(value)
+    ) {
+      // 有默认值，且不符合以上的规则，但是是一个删减字符的操作
+      this.props.onChange(value)
+    }
+  }
+
+  render() {
+    const {
+      precision,
+      minus, // eslint-disable-line
+      ...rest
+    } = this.props
+
+    return <input {...rest} type='text' onChange={this.handleChange} />
+  }
+}
+
+InputNumber.displayName = 'InputNumber'
+
+InputNumber.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  max: PropTypes.number,
+  min: PropTypes.number,
+  precision: PropTypes.number, // 精确度，保留几位小数
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  minus: PropTypes.bool, // 是否支持输入负数,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+InputNumber.defaultProps = {
+  precision: 2,
+  minus: false
+}
+
+export default InputNumber