@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/popup/popup_content_confirm.js

@@ -1,67 +1,67 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import SVGRemove from '../../../svg/remove.svg'
-import Button from '../button'
-import classNames from 'classnames'
-
-const PopupContentConfirm = props => {
-  const {
-    type,
-    title,
-    onCancel,
-    onDelete,
-    onSave,
-    className,
-    children,
-    hideClose,
-    ...rest
-  } = props
-
-  return (
-    <div
-      {...rest}
-      className={classNames('gm-popup-content-confirm', className)}
-    >
-      <div className='gm-popup-content-confirm-title-wrap'>
-        <div className='gm-popup-content-confirm-title'>{title}</div>
-        {!hideClose && <div className='gm-popup-content-confirm-close' onClick={onCancel}>
-          <SVGRemove />
-        </div>}
-      </div>
-      <div className='gm-popup-content-confirm-content'>
-        {children}
-        <div className='gm-popup-content-confirm-button'>
-          <Button className='gm-margin-right-5' onClick={onCancel}>
-            取消
-          </Button>
-          {type === 'delete' ? (
-            <Button type='danger' onClick={onDelete}>
-              删除
-            </Button>
-          ) : (
-            <Button type='primary' onClick={onSave}>
-              保存
-            </Button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-PopupContentConfirm.propTypes = {
-  type: PropTypes.oneOf(['save', 'delete']),
-  title: PropTypes.string,
-  onCancel: PropTypes.func.isRequired,
-  onDelete: PropTypes.func,
-  onSave: PropTypes.func,
-  className: PropTypes.string,
-  hideClose: PropTypes.bool,
-  style: PropTypes.object
-}
-
-PopupContentConfirm.defaultProps = {
-  type: 'save'
-}
-
-export default PopupContentConfirm
+import React from 'react'
+import PropTypes from 'prop-types'
+import SVGRemove from '../../../svg/remove.svg'
+import Button from '../button'
+import classNames from 'classnames'
+
+const PopupContentConfirm = props => {
+  const {
+    type,
+    title,
+    onCancel,
+    onDelete,
+    onSave,
+    className,
+    children,
+    hideClose,
+    ...rest
+  } = props
+
+  return (
+    <div
+      {...rest}
+      className={classNames('gm-popup-content-confirm', className)}
+    >
+      <div className='gm-popup-content-confirm-title-wrap'>
+        <div className='gm-popup-content-confirm-title'>{title}</div>
+        {!hideClose && <div className='gm-popup-content-confirm-close' onClick={onCancel}>
+          <SVGRemove />
+        </div>}
+      </div>
+      <div className='gm-popup-content-confirm-content'>
+        {children}
+        <div className='gm-popup-content-confirm-button'>
+          <Button className='gm-margin-right-5' onClick={onCancel}>
+            取消
+          </Button>
+          {type === 'delete' ? (
+            <Button type='danger' onClick={onDelete}>
+              删除
+            </Button>
+          ) : (
+            <Button type='primary' onClick={onSave}>
+              保存
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+PopupContentConfirm.propTypes = {
+  type: PropTypes.oneOf(['save', 'delete']),
+  title: PropTypes.string,
+  onCancel: PropTypes.func.isRequired,
+  onDelete: PropTypes.func,
+  onSave: PropTypes.func,
+  className: PropTypes.string,
+  hideClose: PropTypes.bool,
+  style: PropTypes.object
+}
+
+PopupContentConfirm.defaultProps = {
+  type: 'save'
+}
+
+export default PopupContentConfirm

package/src/component/popup/style.less

@@ -1,105 +1,105 @@
-.gm-popup {
-  position: absolute;
-  z-index: 2000;
-  background: white;
-  outline: none;
-  //box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  // 开启硬件加速
-  transform: translateZ(0);
-
-  // 默认arrow边框颜色 @gm-border-color
-  // 默认arrow背景色 #FFF
-  .gm-popup-arrow {
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    border: 5px solid transparent;
-
-    &::after {
-      content: ' ';
-      display: block;
-      width: 0;
-      height: 0;
-      position: absolute;
-      margin-left: -4px;
-      border: 4px solid transparent;
-    }
-
-    &.gm-popup-arrow-bottom {
-      top: -5px;
-      border-top-width: 0;
-      border-bottom-color: hsla(0, 0%, 85%, 0.7);
-
-      &::after {
-        top: 1px;
-        border-top-width: 0;
-        border-bottom-color: white;
-      }
-    }
-
-    &.gm-popup-arrow-left {
-      left: 10px;
-    }
-
-    &.gm-popup-arrow-top {
-      bottom: -5px;
-      border-bottom-width: 0;
-      border-top-color: hsla(0, 0%, 85%, 0.7);
-
-      &::after {
-        bottom: 1px;
-        border-bottom-width: 0;
-        border-top-color: white;
-      }
-    }
-
-    &.gm-popup-arrow-right {
-      left: ~'calc(100% - 20px)';
-    }
-
-    &.gm-popup-arrow-center {
-      left: ~'calc(50% - 4px)';
-    }
-  }
-
-  &.gm-popup-pure {
-    background-color: transparent;
-    box-shadow: none;
-  }
-}
-
-.gm-popup-content-confirm {
-  min-width: 300px;
-  max-width: 450px;
-  position: relative;
-
-  .gm-popup-content-confirm-title-wrap {
-    padding: 20px;
-
-    .gm-popup-content-confirm-title {
-      padding-left: 5px;
-      border-left: 3px solid @brand-primary;
-    }
-  }
-
-  .gm-popup-content-confirm-content {
-    padding: 0 20px 20px;
-  }
-
-  .gm-popup-content-confirm-button {
-    text-align: right;
-    margin-top: 10px;
-  }
-
-  .gm-popup-content-confirm-close {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    color: @gm-color-second;
-    cursor: pointer;
-    padding: 5px;
-  }
-}
+.gm-popup {
+  position: absolute;
+  z-index: 2000;
+  background: white;
+  outline: none;
+  //box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  // 开启硬件加速
+  transform: translateZ(0);
+
+  // 默认arrow边框颜色 @gm-border-color
+  // 默认arrow背景色 #FFF
+  .gm-popup-arrow {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+
+    &::after {
+      content: ' ';
+      display: block;
+      width: 0;
+      height: 0;
+      position: absolute;
+      margin-left: -4px;
+      border: 4px solid transparent;
+    }
+
+    &.gm-popup-arrow-bottom {
+      top: -5px;
+      border-top-width: 0;
+      border-bottom-color: hsla(0, 0%, 85%, 0.7);
+
+      &::after {
+        top: 1px;
+        border-top-width: 0;
+        border-bottom-color: white;
+      }
+    }
+
+    &.gm-popup-arrow-left {
+      left: 10px;
+    }
+
+    &.gm-popup-arrow-top {
+      bottom: -5px;
+      border-bottom-width: 0;
+      border-top-color: hsla(0, 0%, 85%, 0.7);
+
+      &::after {
+        bottom: 1px;
+        border-bottom-width: 0;
+        border-top-color: white;
+      }
+    }
+
+    &.gm-popup-arrow-right {
+      left: ~'calc(100% - 20px)';
+    }
+
+    &.gm-popup-arrow-center {
+      left: ~'calc(50% - 4px)';
+    }
+  }
+
+  &.gm-popup-pure {
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
+
+.gm-popup-content-confirm {
+  min-width: 300px;
+  max-width: 450px;
+  position: relative;
+
+  .gm-popup-content-confirm-title-wrap {
+    padding: 20px;
+
+    .gm-popup-content-confirm-title {
+      padding-left: 5px;
+      border-left: 3px solid @brand-primary;
+    }
+  }
+
+  .gm-popup-content-confirm-content {
+    padding: 0 20px 20px;
+  }
+
+  .gm-popup-content-confirm-button {
+    text-align: right;
+    margin-top: 10px;
+  }
+
+  .gm-popup-content-confirm-close {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    color: @gm-color-second;
+    cursor: pointer;
+    padding: 5px;
+  }
+}

package/src/component/price/index.js

@@ -1,147 +1,147 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Big from 'big.js'
-import _ from 'lodash'
-import storage from '../storage'
-
-const eventBus = {
-  add(eventName, handler) {
-    window.addEventListener(eventName, handler)
-  },
-  dispatch(eventName, detail) {
-    window.dispatchEvent(new window.CustomEvent(eventName, { detail }))
-  },
-  remove(eventName, handler) {
-    window.removeEventListener(eventName, handler)
-  }
-}
-
-// 默认 _symbol 为货币符号
-const symbolKey = 'Price#symbol'
-const unitKey = 'Price#unit'
-
-// 默认 _symbol 为货币符号
-let _symbol = storage.get(symbolKey) || '¥'
-let _unit = storage.get(unitKey) || '元'
-// [{ symbol: '￥', type: 'CNY', unit: '元' },...]
-let _currencyList = [] // 多币种列表
-
-const getCurrentFromType = type =>
-  _.find(_currencyList, item => item.type === type)
-
-class Price extends React.Component {
-  rerender = () => {
-    this.forceUpdate()
-  }
-
-  componentDidMount() {
-    eventBus.add('REACT_GM_UPDATE_PRICE', this.rerender)
-  }
-
-  componentWillUnmount() {
-    eventBus.remove('REACT_GM_UPDATE_PRICE', this.rerender)
-  }
-
-  formatValue = (value, precision, keepZero, isFenUnit) => {
-    const divRatio = isFenUnit ? 100 : 1
-    const result = Big(Math.abs(value))
-      .div(divRatio)
-      .toFixed(precision)
-    return keepZero ? result : parseFloat(result)
-  }
-
-  // 增加千分符
-  addComma = (useGrouping, num) => {
-    if (!useGrouping) return num
-
-    return num
-      .toString()
-      .replace(/^\d+/g, m => m.replace(/(?=(?!^)(\d{3})+$)/g, ','))
-  }
-
-  render() {
-    const {
-      value,
-      useGrouping,
-      precision,
-      currencyScale,
-      keepZero,
-      isFenUnit,
-      feeType,
-      ...rest
-    } = this.props
-    const current = getCurrentFromType(feeType)
-
-    return (
-      <span {...rest}>
-        {value < 0 ? '-' : ''}
-        <span
-          style={{
-            fontSize: `${currencyScale > 1 ? '1' : currencyScale}em`
-          }}
-        >
-          {current ? current.symbol : _symbol}
-        </span>
-        {this.addComma(
-          useGrouping,
-          this.formatValue(value, precision, keepZero, isFenUnit)
-        )}
-      </span>
-    )
-  }
-}
-
-Price.propTypes = {
-  value: PropTypes.number.isRequired,
-  /** 保留几位小数，默认是 2 位 */
-  precision: PropTypes.number,
-  /** 是否使用千分符 */
-  useGrouping: PropTypes.bool,
-  /** 货币符号的缩放大小 */
-  currencyScale: PropTypes.number,
-  /** 是否保留小数点后无效的零 */
-  keepZero: PropTypes.bool,
-  isFenUnit: PropTypes.bool,
-  feeType: PropTypes.string // 多币种
-}
-
-Price.defaultProps = {
-  precision: 2,
-  useGrouping: true,
-  currencyScale: 0.85,
-  keepZero: true,
-  isFenUnit: false,
-  feeType: ''
-}
-
-Price.setCurrencyList = (list = []) => {
-  if (!list || !list.length) return
-  _currencyList = list
-}
-
-// 设置符号
-Price.setCurrency = symbol => {
-  if (!symbol || symbol === _symbol) return
-  _symbol = symbol
-  storage.set(symbolKey, symbol)
-  eventBus.dispatch('REACT_GM_UPDATE_PRICE')
-}
-
-// 获得符号
-Price.getCurrency = (type = '') => {
-  const current = type ? getCurrentFromType(type) : null
-  return current ? current.symbol : _symbol
-}
-
-Price.setUnit = unit => {
-  if (!unit || unit === _unit) return
-  _unit = unit
-  storage.set(unitKey, unit)
-}
-
-Price.getUnit = (type = '') => {
-  const current = type ? getCurrentFromType(type) : null
-  return current ? current.unit : _unit
-}
-
-export default Price
+import React from 'react'
+import PropTypes from 'prop-types'
+import Big from 'big.js'
+import _ from 'lodash'
+import storage from '../storage'
+
+const eventBus = {
+  add(eventName, handler) {
+    window.addEventListener(eventName, handler)
+  },
+  dispatch(eventName, detail) {
+    window.dispatchEvent(new window.CustomEvent(eventName, { detail }))
+  },
+  remove(eventName, handler) {
+    window.removeEventListener(eventName, handler)
+  }
+}
+
+// 默认 _symbol 为货币符号
+const symbolKey = 'Price#symbol'
+const unitKey = 'Price#unit'
+
+// 默认 _symbol 为货币符号
+let _symbol = storage.get(symbolKey) || '¥'
+let _unit = storage.get(unitKey) || '元'
+// [{ symbol: '￥', type: 'CNY', unit: '元' },...]
+let _currencyList = [] // 多币种列表
+
+const getCurrentFromType = type =>
+  _.find(_currencyList, item => item.type === type)
+
+class Price extends React.Component {
+  rerender = () => {
+    this.forceUpdate()
+  }
+
+  componentDidMount() {
+    eventBus.add('REACT_GM_UPDATE_PRICE', this.rerender)
+  }
+
+  componentWillUnmount() {
+    eventBus.remove('REACT_GM_UPDATE_PRICE', this.rerender)
+  }
+
+  formatValue = (value, precision, keepZero, isFenUnit) => {
+    const divRatio = isFenUnit ? 100 : 1
+    const result = Big(Math.abs(value))
+      .div(divRatio)
+      .toFixed(precision)
+    return keepZero ? result : parseFloat(result)
+  }
+
+  // 增加千分符
+  addComma = (useGrouping, num) => {
+    if (!useGrouping) return num
+
+    return num
+      .toString()
+      .replace(/^\d+/g, m => m.replace(/(?=(?!^)(\d{3})+$)/g, ','))
+  }
+
+  render() {
+    const {
+      value,
+      useGrouping,
+      precision,
+      currencyScale,
+      keepZero,
+      isFenUnit,
+      feeType,
+      ...rest
+    } = this.props
+    const current = getCurrentFromType(feeType)
+
+    return (
+      <span {...rest}>
+        {value < 0 ? '-' : ''}
+        <span
+          style={{
+            fontSize: `${currencyScale > 1 ? '1' : currencyScale}em`
+          }}
+        >
+          {current ? current.symbol : _symbol}
+        </span>
+        {this.addComma(
+          useGrouping,
+          this.formatValue(value, precision, keepZero, isFenUnit)
+        )}
+      </span>
+    )
+  }
+}
+
+Price.propTypes = {
+  value: PropTypes.number.isRequired,
+  /** 保留几位小数，默认是 2 位 */
+  precision: PropTypes.number,
+  /** 是否使用千分符 */
+  useGrouping: PropTypes.bool,
+  /** 货币符号的缩放大小 */
+  currencyScale: PropTypes.number,
+  /** 是否保留小数点后无效的零 */
+  keepZero: PropTypes.bool,
+  isFenUnit: PropTypes.bool,
+  feeType: PropTypes.string // 多币种
+}
+
+Price.defaultProps = {
+  precision: 2,
+  useGrouping: true,
+  currencyScale: 0.85,
+  keepZero: true,
+  isFenUnit: false,
+  feeType: ''
+}
+
+Price.setCurrencyList = (list = []) => {
+  if (!list || !list.length) return
+  _currencyList = list
+}
+
+// 设置符号
+Price.setCurrency = symbol => {
+  if (!symbol || symbol === _symbol) return
+  _symbol = symbol
+  storage.set(symbolKey, symbol)
+  eventBus.dispatch('REACT_GM_UPDATE_PRICE')
+}
+
+// 获得符号
+Price.getCurrency = (type = '') => {
+  const current = type ? getCurrentFromType(type) : null
+  return current ? current.symbol : _symbol
+}
+
+Price.setUnit = unit => {
+  if (!unit || unit === _unit) return
+  _unit = unit
+  storage.set(unitKey, unit)
+}
+
+Price.getUnit = (type = '') => {
+  const current = type ? getCurrentFromType(type) : null
+  return current ? current.unit : _unit
+}
+
+export default Price