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

package/src/component/popup/style.less

@@ -1,107 +1,107 @@
-.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边框颜色 var(--gm-color-border)
-  // 默认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 var(--gm-color-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: var(--gm-color-secondary);
-    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边框颜色 var(--gm-color-border)
+  // 默认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 var(--gm-color-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: var(--gm-color-secondary);
+    cursor: pointer;
+    padding: 5px;
+  }
+}

package/src/component/price/constant.ts

@@ -1,4 +1,4 @@
-const symbolKey = 'Price#symbol'
-const unitKey = 'Price#unit'
-
-export { symbolKey, unitKey }
+const symbolKey = 'Price#symbol'
+const unitKey = 'Price#unit'
+
+export { symbolKey, unitKey }

package/src/component/price/event_bus.ts

@@ -1,13 +1,13 @@
-const eventBus = {
-  add(eventName: string, handler: (event: Event) => any): void {
-    window.addEventListener(eventName, handler)
-  },
-  dispatch(eventName: string, detail?: any): void {
-    window.dispatchEvent(new window.CustomEvent(eventName, { detail }))
-  },
-  remove(eventName: string, handler: (event: Event) => any): void {
-    window.removeEventListener(eventName, handler)
-  },
-}
-
-export default eventBus
+const eventBus = {
+  add(eventName: string, handler: (event: Event) => any): void {
+    window.addEventListener(eventName, handler)
+  },
+  dispatch(eventName: string, detail?: any): void {
+    window.dispatchEvent(new window.CustomEvent(eventName, { detail }))
+  },
+  remove(eventName: string, handler: (event: Event) => any): void {
+    window.removeEventListener(eventName, handler)
+  },
+}
+
+export default eventBus

package/src/component/price/index.ts

@@ -1,2 +1,2 @@
-export { default as Price } from './price'
-export type { PriceProps, CurrencyListOptions } from './price'
+export { default as Price } from './price'
+export type { PriceProps, CurrencyListOptions } from './price'

package/src/component/price/price.tsx

@@ -1,154 +1,154 @@
-import React, { Component, HTMLAttributes } from 'react'
-import Big from 'big.js'
-import eventBus from './event_bus'
-import { Storage } from '../storage'
-import { symbolKey, unitKey } from './constant'
-
-interface PriceProps extends HTMLAttributes<HTMLSpanElement> {
-  value: number
-  /* 保留几位小数 */
-  precision?: number
-  /* 是否使用千分符 */
-  useGrouping?: boolean
-  /* 货币符号缩放大小 */
-  currencyScale?: number
-  /* 保留小数点后无效的零 */
-  keepZero?: boolean
-  isFenUnit?: boolean
-  feeType?: string
-}
-
-interface CurrencyListOptions {
-  symbol: string
-  type: string
-  unit: string
-}
-
-let currencyList: CurrencyListOptions[] = []
-
-function getCurrentFromType(type: string): CurrencyListOptions | undefined {
-  return currencyList.find((value) => value.type === type)
-}
-
-let symbol = Storage.get(symbolKey) ?? '¥'
-let unit = Storage.get(unitKey) ?? '元'
-
-class Price extends Component<PriceProps> {
-  /**
-   * 设置符号列表
-   */
-  static setCurrencyList(list: CurrencyListOptions[]): void {
-    if (!list || !list.length) {
-      return
-    }
-    currencyList = list
-  }
-
-  /**
-   * 设置符号
-   */
-  static setCurrency(_symbol: string): void {
-    if (!_symbol || _symbol === symbol) {
-      return
-    }
-    Storage.set(symbolKey, _symbol)
-    symbol = _symbol
-    eventBus.dispatch('REACT_GM_UPDATE_PRICE')
-  }
-
-  /**
-   * 获取符号
-   */
-  static getCurrency(type = ''): string {
-    const current = type ? getCurrentFromType(type) : null
-    return current ? current.symbol : (symbol as string)
-  }
-
-  static setUnit(_unit: string): void {
-    if (!_unit || _unit === unit) {
-      return
-    }
-    Storage.set(unitKey, _unit)
-    unit = _unit
-  }
-
-  static getUnit(type = ''): string {
-    const current = type ? getCurrentFromType(type) : null
-    return current ? current.unit : (unit as string)
-  }
-
-  static defaultProps = {
-    precision: 2,
-    useGrouping: true,
-    currencyScale: 0.85,
-    keepZero: true,
-    feeType: '',
-  }
-
-  componentDidMount() {
-    eventBus.add('REACT_GM_UPDATE_PRICE', this._rerender)
-  }
-
-  componentWillUnmount() {
-    eventBus.remove('REACT_GM_UPDATE_PRICE', this._rerender)
-  }
-
-  private _rerender = (): void => {
-    this.forceUpdate()
-  }
-
-  private _formatValue = (
-    value: number,
-    precision: number,
-    keepZero: boolean,
-    isFenUnit: boolean
-  ): string => {
-    if (isNaN(value)) {
-      console.trace('value can not be NaN')
-      return ''
-    }
-    const divRatio = isFenUnit ? 100 : 1
-    const result = Big(Math.abs(value)).div(divRatio).toFixed(precision)
-    return keepZero ? result : `${parseFloat(result)}`
-  }
-
-  /**
-   * 增加千分符
-   */
-  private _addComma = (useGrouping: boolean, num: string): string => {
-    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>
-    )
-  }
-}
-
-export default Price
-export type { PriceProps, CurrencyListOptions }
+import React, { Component, HTMLAttributes } from 'react'
+import Big from 'big.js'
+import eventBus from './event_bus'
+import { Storage } from '../storage'
+import { symbolKey, unitKey } from './constant'
+
+interface PriceProps extends HTMLAttributes<HTMLSpanElement> {
+  value: number
+  /* 保留几位小数 */
+  precision?: number
+  /* 是否使用千分符 */
+  useGrouping?: boolean
+  /* 货币符号缩放大小 */
+  currencyScale?: number
+  /* 保留小数点后无效的零 */
+  keepZero?: boolean
+  isFenUnit?: boolean
+  feeType?: string
+}
+
+interface CurrencyListOptions {
+  symbol: string
+  type: string
+  unit: string
+}
+
+let currencyList: CurrencyListOptions[] = []
+
+function getCurrentFromType(type: string): CurrencyListOptions | undefined {
+  return currencyList.find((value) => value.type === type)
+}
+
+let symbol = Storage.get(symbolKey) ?? '¥'
+let unit = Storage.get(unitKey) ?? '元'
+
+class Price extends Component<PriceProps> {
+  /**
+   * 设置符号列表
+   */
+  static setCurrencyList(list: CurrencyListOptions[]): void {
+    if (!list || !list.length) {
+      return
+    }
+    currencyList = list
+  }
+
+  /**
+   * 设置符号
+   */
+  static setCurrency(_symbol: string): void {
+    if (!_symbol || _symbol === symbol) {
+      return
+    }
+    Storage.set(symbolKey, _symbol)
+    symbol = _symbol
+    eventBus.dispatch('REACT_GM_UPDATE_PRICE')
+  }
+
+  /**
+   * 获取符号
+   */
+  static getCurrency(type = ''): string {
+    const current = type ? getCurrentFromType(type) : null
+    return current ? current.symbol : (symbol as string)
+  }
+
+  static setUnit(_unit: string): void {
+    if (!_unit || _unit === unit) {
+      return
+    }
+    Storage.set(unitKey, _unit)
+    unit = _unit
+  }
+
+  static getUnit(type = ''): string {
+    const current = type ? getCurrentFromType(type) : null
+    return current ? current.unit : (unit as string)
+  }
+
+  static defaultProps = {
+    precision: 2,
+    useGrouping: true,
+    currencyScale: 0.85,
+    keepZero: true,
+    feeType: '',
+  }
+
+  componentDidMount() {
+    eventBus.add('REACT_GM_UPDATE_PRICE', this._rerender)
+  }
+
+  componentWillUnmount() {
+    eventBus.remove('REACT_GM_UPDATE_PRICE', this._rerender)
+  }
+
+  private _rerender = (): void => {
+    this.forceUpdate()
+  }
+
+  private _formatValue = (
+    value: number,
+    precision: number,
+    keepZero: boolean,
+    isFenUnit: boolean
+  ): string => {
+    if (isNaN(value)) {
+      console.trace('value can not be NaN')
+      return ''
+    }
+    const divRatio = isFenUnit ? 100 : 1
+    const result = Big(Math.abs(value)).div(divRatio).toFixed(precision)
+    return keepZero ? result : `${parseFloat(result)}`
+  }
+
+  /**
+   * 增加千分符
+   */
+  private _addComma = (useGrouping: boolean, num: string): string => {
+    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>
+    )
+  }
+}
+
+export default Price
+export type { PriceProps, CurrencyListOptions }

package/src/component/price/stories.tsx

@@ -1,22 +1,22 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import _ from 'lodash'
-import Price from './price'
-
-const list = [0, 10839, 2345454545, 1000, 12310, 10000000, -10, -226, -1000, -1000002323]
-
-storiesOf('其他/Price', module).add('default', () => (
-  <div>
-    {_.map(list, (v) => (
-      <div key={v}>
-        <Price value={v} />
-      </div>
-    ))}
-    <Price isFenUnit value={1234} style={{ fontSize: '28px', color: 'red' }} /> <br />
-    <Price
-      value={40002288}
-      currencyScale={0.8}
-      style={{ fontSize: '28px', color: 'red' }}
-    />
-  </div>
-))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import _ from 'lodash'
+import Price from './price'
+
+const list = [0, 10839, 2345454545, 1000, 12310, 10000000, -10, -226, -1000, -1000002323]
+
+storiesOf('其他/Price', module).add('default', () => (
+  <div>
+    {_.map(list, (v) => (
+      <div key={v}>
+        <Price value={v} />
+      </div>
+    ))}
+    <Price isFenUnit value={1234} style={{ fontSize: '28px', color: 'red' }} /> <br />
+    <Price
+      value={40002288}
+      currencyScale={0.8}
+      style={{ fontSize: '28px', color: 'red' }}
+    />
+  </div>
+))

package/src/component/progress/index.ts

@@ -1,2 +1,2 @@
-export { default as Progress } from './progress'
-export type { ProgressProps } from './progress'
+export { default as Progress } from './progress'
+export type { ProgressProps } from './progress'