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

package/src/component/flex/style.less

@@ -1,105 +1,105 @@
-.gm-flex-flex {
-  flex: 1;
-}
-
-.gm-flex-auto {
-  flex: auto;
-}
-
-.gm-flex-none {
-  flex: none;
-}
-
-.gm-flex {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-content: stretch;
-  align-items: stretch;
-  box-sizing: border-box;
-
-  .gm-flex-block {
-    display: block;
-  }
-
-  &.gm-flex-wrap {
-    flex-wrap: wrap;
-  }
-
-  &.gm-flex-nowrap {
-    flex-wrap: nowrap;
-  }
-
-  &.gm-flex-row {
-    flex-direction: row;
-  }
-
-  &.gm-flex-column {
-    flex-direction: column;
-  }
-
-  &.gm-flex-justify-start {
-    justify-content: flex-start;
-  }
-
-  &.gm-flex-justify-end {
-    justify-content: flex-end;
-  }
-
-  &.gm-flex-justify-center {
-    justify-content: center;
-  }
-
-  &.gm-flex-justify-between {
-    justify-content: space-between;
-  }
-
-  &.gm-flex-justify-around {
-    justify-content: space-around;
-  }
-
-  &.gm-flex-align-start {
-    align-items: flex-start;
-  }
-
-  &.gm-flex-align-end {
-    align-items: flex-end;
-  }
-
-  &.gm-flex-align-center {
-    align-items: center;
-  }
-
-  &.gm-flex-align-baseline {
-    align-items: baseline;
-  }
-
-  &.gm-flex-align-stretch {
-    align-items: stretch;
-  }
-
-  &.gm-flex-align-content-start {
-    align-content: flex-start;
-  }
-
-  &.gm-flex-align-content-end {
-    align-content: flex-end;
-  }
-
-  &.gm-flex-align-content-center {
-    align-content: center;
-  }
-
-  &.gm-flex-align-content-between {
-    align-content: space-between;
-  }
-
-  &.gm-flex-align-content-around {
-    align-content: space-around;
-  }
-
-  &.gm-flex-align-content-stretch {
-    align-content: stretch;
-  }
-}
+.gm-flex-flex {
+  flex: 1;
+}
+
+.gm-flex-auto {
+  flex: auto;
+}
+
+.gm-flex-none {
+  flex: none;
+}
+
+.gm-flex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-content: stretch;
+  align-items: stretch;
+  box-sizing: border-box;
+
+  .gm-flex-block {
+    display: block;
+  }
+
+  &.gm-flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  &.gm-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  &.gm-flex-row {
+    flex-direction: row;
+  }
+
+  &.gm-flex-column {
+    flex-direction: column;
+  }
+
+  &.gm-flex-justify-start {
+    justify-content: flex-start;
+  }
+
+  &.gm-flex-justify-end {
+    justify-content: flex-end;
+  }
+
+  &.gm-flex-justify-center {
+    justify-content: center;
+  }
+
+  &.gm-flex-justify-between {
+    justify-content: space-between;
+  }
+
+  &.gm-flex-justify-around {
+    justify-content: space-around;
+  }
+
+  &.gm-flex-align-start {
+    align-items: flex-start;
+  }
+
+  &.gm-flex-align-end {
+    align-items: flex-end;
+  }
+
+  &.gm-flex-align-center {
+    align-items: center;
+  }
+
+  &.gm-flex-align-baseline {
+    align-items: baseline;
+  }
+
+  &.gm-flex-align-stretch {
+    align-items: stretch;
+  }
+
+  &.gm-flex-align-content-start {
+    align-content: flex-start;
+  }
+
+  &.gm-flex-align-content-end {
+    align-content: flex-end;
+  }
+
+  &.gm-flex-align-content-center {
+    align-content: center;
+  }
+
+  &.gm-flex-align-content-between {
+    align-content: space-between;
+  }
+
+  &.gm-flex-align-content-around {
+    align-content: space-around;
+  }
+
+  &.gm-flex-align-content-stretch {
+    align-content: stretch;
+  }
+}

package/src/component/flip_number/flip_number.tsx

@@ -1,209 +1,209 @@
-// @ts-nocheck
-import React, { Component } from 'react'
-import classNames from 'classnames'
-import { filterForNum, formatNum, getNumLength, getRawArray } from './utils'
-import _ from 'lodash'
-
-interface FlipNumberProps {
-  /* 最后显示的数字 */
-  to: number
-  /* 起始数字，默认为 0 */
-  from?: number
-  /* 延迟，默认为 0 */
-  delay?: number
-  /* 滚动时长，默认为 1500 毫秒 */
-  duration?: number
-  /**
-   * 滚动函数，控制滚动的加速度，默认起末慢，中间快
-   * @see https://github.com/danro/easing-js/blob/4f5e7edbde7f7200a1baf08e357377896c0d207e/easing.js#L39-L42
-   */
-  easeFn?(percent: number): number
-  /* 是否逐个数字滚动，默认 true */
-  individually?: boolean
-  /* 小数点个数，默认无小数点 */
-  decimal?: number
-  /* 是否启用逗号分隔数字 */
-  useGroup?: boolean
-  className?: string
-}
-
-interface FlipNumberState {
-  height: number
-  heightList: number[]
-}
-
-class FlipNumber extends Component<FlipNumberProps, FlipNumberState> {
-  static defaultProps = {
-    from: 0,
-    duration: 1500,
-    individually: true,
-    decimal: 0,
-    easeFn(percent: number): number {
-      return (percent /= 0.5) < 1
-        ? 0.5 * Math.pow(percent, 3)
-        : 0.5 * (Math.pow(percent - 2, 3) + 2)
-    },
-  }
-
-  constructor(props) {
-    super(props)
-    // eslint-disable-next-line react/state-in-constructor
-    this.state = {
-      height: 0,
-      heightList: [],
-    }
-
-    this.height = 0
-    this.numberArray = [...Array(10).keys()]
-
-    this.doInitData(props)
-  }
-
-  componentDidMount() {
-    this.height =
-      this['gm-flip-number-digit0'].clientHeight / (this.numberArray.length + 1)
-    this.doInitView(this.props)
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.to !== this.props.to) {
-      window.cancelAnimationFrame(this.requestId)
-      clearTimeout(this.timeoutID)
-      this.doInitData(nextProps)
-      this.doInitView(nextProps)
-    }
-  }
-
-  doInitData = (props) => {
-    const { from, to, decimal, useGroup } = props
-    // 小数点 + useGroup
-    this.fromStr = formatNum(from, decimal, useGroup)
-    this.toStr = formatNum(to, decimal, useGroup)
-    // 格式化滚动数字数组
-    const totalLen = getNumLength(this.fromStr, this.toStr)
-    this.toRawArr = getRawArray(this.toStr, totalLen) // to 的字符串数组
-    this.toNumArr = filterForNum(this.toRawArr.rawList).map(Number) // to 的去掉',' '.'后的数字数组
-    this.digitLen = this.toNumArr.length
-    this.fromRawArr = getRawArray(this.fromStr, totalLen)
-    this.fromNumArr = _.map([...Array(this.digitLen)], (_) => 0)
-  }
-
-  doInitView = (props) => {
-    const { delay, duration } = props
-    const fromNum = parseInt(filterForNum(this.fromStr.split('')).join(''), 10)
-    const heightList = []
-    _.forEach(this.toNumArr, (dom, index) => {
-      const height = this.onDraw({
-        from: this.fromNumArr[index],
-        percent: 1,
-        alter: Math.floor(fromNum / Math.pow(10, index)),
-      })
-      heightList.unshift(height)
-    })
-    this.setState({
-      heightList: heightList,
-    })
-
-    delay
-      ? (this.timeoutID = setTimeout(() => this.flipTo(duration), delay))
-      : this.flipTo(duration)
-  }
-
-  /**
-   * @description 数字的绘制函数，通过上下移动每一条数字轴来实现
-   * @argument from 开始滚动的数字
-   * @argument percent 已经滚动的时间占总滚动时间 duration 的比例
-   * @argument alter from 变成 to 每个数字轴需要改变的距离
-   * @returns 返回数字轴应该移动的距离
-   */
-  onDraw = ({ from, percent, alter }) => {
-    const expectNum = (percent * alter + from) % 10 // 表示需要滚动多少个数字，小数居多，整数表示刚好显示完全一个数字
-    return -expectNum * this.height
-  }
-
-  flipTo = (duration) => {
-    const { easeFn, individually } = this.props
-    this.fromNumArr = filterForNum(this.fromRawArr.rawList).map(Number)
-    const draw = (percent) => {
-      let temp = 0
-      const heightList = []
-      for (let d = this.toNumArr.length - 1; d >= 0; d--) {
-        const alter = this.toNumArr[d] - this.fromNumArr[d]
-        temp += alter
-        const height = this.onDraw({
-          from: this.fromNumArr[d],
-          percent: easeFn(percent),
-          alter: individually ? temp : alter,
-        })
-        heightList.push(height)
-        temp *= 10
-      }
-      this.setState({
-        heightList,
-      })
-    }
-    const startTime = window.performance.now()
-    const tick = (now) => {
-      const timeConsuming = now - startTime
-      draw(timeConsuming / duration)
-      if (timeConsuming < duration) this.requestId = window.requestAnimationFrame(tick)
-      else {
-        draw(1)
-      }
-    }
-    this.requestId = window.requestAnimationFrame(tick)
-  }
-
-  renderDigitAxis = () => {
-    const { heightList } = this.state
-    const digitAxis = _.map(this.toNumArr, (item, index) => (
-      <div
-        style={{ transform: `translateY(${heightList[index]}px)` }}
-        ref={(rel) => {
-          this[`gm-flip-number-digit${index}`] = rel
-        }}
-        className='gm-inline-block gm-position-relative'
-        key={`digitAxis${index}`}
-      >
-        {_.map(this.numberArray, (i, d) => (
-          <div key={`digitChild${d}`}>{i}</div>
-        ))}
-        <div>{this.numberArray[0]}</div>
-      </div>
-    ))
-
-    _.forEach(this.toRawArr.symbolList, (item, index) => {
-      const symbolAxis = (
-        <div className='gm-inline-block' key={`symbolAxis${index}`}>
-          {_.map(this.numberArray, (i, d) => (
-            <div key={`symbolChile${d}`}>{item.symbol}</div>
-          ))}
-          <div>{item.symbol}</div>
-        </div>
-      )
-      digitAxis.splice(item.position, 0, symbolAxis)
-    })
-
-    return digitAxis
-  }
-
-  render() {
-    const { className, to } = this.props
-    return (
-      <div
-        key={`${to}`}
-        ref={(rel) => {
-          this.wrap = rel
-        }}
-        style={{ height: `${this.height}px` }}
-        className={classNames('gm-position-relative gm-overflow-hidden', className)}
-      >
-        {this.renderDigitAxis()}
-      </div>
-    )
-  }
-}
-
-export default FlipNumber
-export type { FlipNumberProps }
+// @ts-nocheck
+import React, { Component } from 'react'
+import classNames from 'classnames'
+import { filterForNum, formatNum, getNumLength, getRawArray } from './utils'
+import _ from 'lodash'
+
+interface FlipNumberProps {
+  /* 最后显示的数字 */
+  to: number
+  /* 起始数字，默认为 0 */
+  from?: number
+  /* 延迟，默认为 0 */
+  delay?: number
+  /* 滚动时长，默认为 1500 毫秒 */
+  duration?: number
+  /**
+   * 滚动函数，控制滚动的加速度，默认起末慢，中间快
+   * @see https://github.com/danro/easing-js/blob/4f5e7edbde7f7200a1baf08e357377896c0d207e/easing.js#L39-L42
+   */
+  easeFn?(percent: number): number
+  /* 是否逐个数字滚动，默认 true */
+  individually?: boolean
+  /* 小数点个数，默认无小数点 */
+  decimal?: number
+  /* 是否启用逗号分隔数字 */
+  useGroup?: boolean
+  className?: string
+}
+
+interface FlipNumberState {
+  height: number
+  heightList: number[]
+}
+
+class FlipNumber extends Component<FlipNumberProps, FlipNumberState> {
+  static defaultProps = {
+    from: 0,
+    duration: 1500,
+    individually: true,
+    decimal: 0,
+    easeFn(percent: number): number {
+      return (percent /= 0.5) < 1
+        ? 0.5 * Math.pow(percent, 3)
+        : 0.5 * (Math.pow(percent - 2, 3) + 2)
+    },
+  }
+
+  constructor(props) {
+    super(props)
+    // eslint-disable-next-line react/state-in-constructor
+    this.state = {
+      height: 0,
+      heightList: [],
+    }
+
+    this.height = 0
+    this.numberArray = [...Array(10).keys()]
+
+    this.doInitData(props)
+  }
+
+  componentDidMount() {
+    this.height =
+      this['gm-flip-number-digit0'].clientHeight / (this.numberArray.length + 1)
+    this.doInitView(this.props)
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.to !== this.props.to) {
+      window.cancelAnimationFrame(this.requestId)
+      clearTimeout(this.timeoutID)
+      this.doInitData(nextProps)
+      this.doInitView(nextProps)
+    }
+  }
+
+  doInitData = (props) => {
+    const { from, to, decimal, useGroup } = props
+    // 小数点 + useGroup
+    this.fromStr = formatNum(from, decimal, useGroup)
+    this.toStr = formatNum(to, decimal, useGroup)
+    // 格式化滚动数字数组
+    const totalLen = getNumLength(this.fromStr, this.toStr)
+    this.toRawArr = getRawArray(this.toStr, totalLen) // to 的字符串数组
+    this.toNumArr = filterForNum(this.toRawArr.rawList).map(Number) // to 的去掉',' '.'后的数字数组
+    this.digitLen = this.toNumArr.length
+    this.fromRawArr = getRawArray(this.fromStr, totalLen)
+    this.fromNumArr = _.map([...Array(this.digitLen)], (_) => 0)
+  }
+
+  doInitView = (props) => {
+    const { delay, duration } = props
+    const fromNum = parseInt(filterForNum(this.fromStr.split('')).join(''), 10)
+    const heightList = []
+    _.forEach(this.toNumArr, (dom, index) => {
+      const height = this.onDraw({
+        from: this.fromNumArr[index],
+        percent: 1,
+        alter: Math.floor(fromNum / Math.pow(10, index)),
+      })
+      heightList.unshift(height)
+    })
+    this.setState({
+      heightList: heightList,
+    })
+
+    delay
+      ? (this.timeoutID = setTimeout(() => this.flipTo(duration), delay))
+      : this.flipTo(duration)
+  }
+
+  /**
+   * @description 数字的绘制函数，通过上下移动每一条数字轴来实现
+   * @argument from 开始滚动的数字
+   * @argument percent 已经滚动的时间占总滚动时间 duration 的比例
+   * @argument alter from 变成 to 每个数字轴需要改变的距离
+   * @returns 返回数字轴应该移动的距离
+   */
+  onDraw = ({ from, percent, alter }) => {
+    const expectNum = (percent * alter + from) % 10 // 表示需要滚动多少个数字，小数居多，整数表示刚好显示完全一个数字
+    return -expectNum * this.height
+  }
+
+  flipTo = (duration) => {
+    const { easeFn, individually } = this.props
+    this.fromNumArr = filterForNum(this.fromRawArr.rawList).map(Number)
+    const draw = (percent) => {
+      let temp = 0
+      const heightList = []
+      for (let d = this.toNumArr.length - 1; d >= 0; d--) {
+        const alter = this.toNumArr[d] - this.fromNumArr[d]
+        temp += alter
+        const height = this.onDraw({
+          from: this.fromNumArr[d],
+          percent: easeFn(percent),
+          alter: individually ? temp : alter,
+        })
+        heightList.push(height)
+        temp *= 10
+      }
+      this.setState({
+        heightList,
+      })
+    }
+    const startTime = window.performance.now()
+    const tick = (now) => {
+      const timeConsuming = now - startTime
+      draw(timeConsuming / duration)
+      if (timeConsuming < duration) this.requestId = window.requestAnimationFrame(tick)
+      else {
+        draw(1)
+      }
+    }
+    this.requestId = window.requestAnimationFrame(tick)
+  }
+
+  renderDigitAxis = () => {
+    const { heightList } = this.state
+    const digitAxis = _.map(this.toNumArr, (item, index) => (
+      <div
+        style={{ transform: `translateY(${heightList[index]}px)` }}
+        ref={(rel) => {
+          this[`gm-flip-number-digit${index}`] = rel
+        }}
+        className='gm-inline-block gm-position-relative'
+        key={`digitAxis${index}`}
+      >
+        {_.map(this.numberArray, (i, d) => (
+          <div key={`digitChild${d}`}>{i}</div>
+        ))}
+        <div>{this.numberArray[0]}</div>
+      </div>
+    ))
+
+    _.forEach(this.toRawArr.symbolList, (item, index) => {
+      const symbolAxis = (
+        <div className='gm-inline-block' key={`symbolAxis${index}`}>
+          {_.map(this.numberArray, (i, d) => (
+            <div key={`symbolChile${d}`}>{item.symbol}</div>
+          ))}
+          <div>{item.symbol}</div>
+        </div>
+      )
+      digitAxis.splice(item.position, 0, symbolAxis)
+    })
+
+    return digitAxis
+  }
+
+  render() {
+    const { className, to } = this.props
+    return (
+      <div
+        key={`${to}`}
+        ref={(rel) => {
+          this.wrap = rel
+        }}
+        style={{ height: `${this.height}px` }}
+        className={classNames('gm-position-relative gm-overflow-hidden', className)}
+      >
+        {this.renderDigitAxis()}
+      </div>
+    )
+  }
+}
+
+export default FlipNumber
+export type { FlipNumberProps }

package/src/component/flip_number/index.ts

@@ -1,2 +1,2 @@
-export { default as FlipNumber } from './flip_number'
-export type { FlipNumberProps } from './flip_number'
+export { default as FlipNumber } from './flip_number'
+export type { FlipNumberProps } from './flip_number'