@gm-pc/react 1.25.1-beta.1 → 1.26.0-beta.1

package/src/component/flip_number/stories.tsx

@@ -1,28 +1,28 @@
-import React from 'react'
-import FlipNumber from './flip_number'
-import { observable } from 'mobx'
-
-const store = observable({
-  from: 0,
-  to: 0,
-})
-
-setTimeout(() => {
-  store.from = 234.2343
-  store.to = 709394
-})
-
-export const ComFlipNumber = () => (
-  <FlipNumber
-    useGroup
-    delay={1000}
-    decimal={2}
-    from={store.from}
-    to={store.to}
-    className='gm-text-20'
-  />
-)
-
-export default {
-  title: '反馈/FlipNumber',
-}
+import React from 'react'
+import FlipNumber from './flip_number'
+import { observable } from 'mobx'
+
+const store = observable({
+  from: 0,
+  to: 0,
+})
+
+setTimeout(() => {
+  store.from = 234.2343
+  store.to = 709394
+})
+
+export const ComFlipNumber = () => (
+  <FlipNumber
+    useGroup
+    delay={1000}
+    decimal={2}
+    from={store.from}
+    to={store.to}
+    className='gm-text-20'
+  />
+)
+
+export default {
+  title: '反馈/FlipNumber',
+}

package/src/component/flip_number/utils.ts

@@ -1,58 +1,58 @@
-import _ from 'lodash'
-import Big from 'big.js'
-import { is } from '@gm-common/tool'
-
-function formatNum(number: number, decimals: number, useGrouping: boolean) {
-  const num = Big(number).toFixed(decimals)
-  return useGrouping
-    ? num.toString().replace(/^\d+/g, (m) => m.replace(/(?=(?!^)(\d{3})+$)/g, ','))
-    : num
-}
-
-function getNumLength(str1: string, str2: string): number {
-  return Math.max(str1.length, str2.length)
-}
-
-function filterForNum(strArr: any[]): number[] {
-  return _.filter(strArr, (item) => is.number(item)) as number[]
-}
-
-interface GetRawArray {
-  (numStr: string, length: number): GetRawArrayReturns
-}
-
-interface GetRawArrayReturns {
-  rawList: string[]
-  symbolList: { symbol: string; position: number }[]
-}
-
-/**
- * @description 根据字符串返回相应的反转字符串数组以及符号数组
- * @param numStr 需要转换成数组的数字字符串
- * @param length 需要转换的长度
- */
-const getRawArray: GetRawArray = function (numStr, length) {
-  const alignNum = (str: string, len: number): string => {
-    return str.length < len ? alignNum(`0${str}`, len) : str
-  }
-  const symbolList: { symbol: string; position: number }[] = []
-  const rawStrArr = alignNum(numStr, length).split('')
-  _.forEach(rawStrArr, (item, index) => {
-    if (item === ',' || item === '.') {
-      symbolList.push({
-        symbol: item,
-        position: index,
-      })
-    }
-  })
-  const rawList = filterForNum(rawStrArr)
-    .map((item) => `${item}`)
-    .reverse()
-  _.forEach(symbolList, (item) => {
-    rawList.splice(item.position, 0, item.symbol)
-  })
-  return { rawList, symbolList }
-}
-
-export { formatNum, filterForNum, getNumLength, getRawArray }
-export type { GetRawArray, GetRawArrayReturns }
+import _ from 'lodash'
+import Big from 'big.js'
+import { is } from '@gm-common/tool'
+
+function formatNum(number: number, decimals: number, useGrouping: boolean) {
+  const num = Big(number).toFixed(decimals)
+  return useGrouping
+    ? num.toString().replace(/^\d+/g, (m) => m.replace(/(?=(?!^)(\d{3})+$)/g, ','))
+    : num
+}
+
+function getNumLength(str1: string, str2: string): number {
+  return Math.max(str1.length, str2.length)
+}
+
+function filterForNum(strArr: any[]): number[] {
+  return _.filter(strArr, (item) => is.number(item)) as number[]
+}
+
+interface GetRawArray {
+  (numStr: string, length: number): GetRawArrayReturns
+}
+
+interface GetRawArrayReturns {
+  rawList: string[]
+  symbolList: { symbol: string; position: number }[]
+}
+
+/**
+ * @description 根据字符串返回相应的反转字符串数组以及符号数组
+ * @param numStr 需要转换成数组的数字字符串
+ * @param length 需要转换的长度
+ */
+const getRawArray: GetRawArray = function (numStr, length) {
+  const alignNum = (str: string, len: number): string => {
+    return str.length < len ? alignNum(`0${str}`, len) : str
+  }
+  const symbolList: { symbol: string; position: number }[] = []
+  const rawStrArr = alignNum(numStr, length).split('')
+  _.forEach(rawStrArr, (item, index) => {
+    if (item === ',' || item === '.') {
+      symbolList.push({
+        symbol: item,
+        position: index,
+      })
+    }
+  })
+  const rawList = filterForNum(rawStrArr)
+    .map((item) => `${item}`)
+    .reverse()
+  _.forEach(symbolList, (item) => {
+    rawList.splice(item.position, 0, item.symbol)
+  })
+  return { rawList, symbolList }
+}
+
+export { formatNum, filterForNum, getNumLength, getRawArray }
+export type { GetRawArray, GetRawArrayReturns }

package/src/component/form/context.tsx

@@ -1,15 +1,15 @@
-import { createContext } from 'react'
-import { FormBtnPosition } from './types'
-
-export interface FormContextOptions {
-  labelWidth?: string
-  disabledCol?: boolean
-  inline?: boolean
-  btnPosition?: FormBtnPosition
-  colWidth?: string
-  canValidate?: boolean
-}
-
-const FormContext = createContext<Readonly<FormContextOptions>>({})
-
-export default FormContext
+import { createContext } from 'react'
+import { FormBtnPosition } from './types'
+
+export interface FormContextOptions {
+  labelWidth?: string
+  disabledCol?: boolean
+  inline?: boolean
+  btnPosition?: FormBtnPosition
+  colWidth?: string
+  canValidate?: boolean
+}
+
+const FormContext = createContext<Readonly<FormContextOptions>>({})
+
+export default FormContext

package/src/component/form/form.tsx

@@ -1,142 +1,142 @@
-import React, {
-  Component,
-  FormEvent,
-  PropsWithChildren,
-  ReactElement,
-  ReactNode,
-  ComponentType,
-  Children,
-} from 'react'
-import classNames from 'classnames'
-import FormContext from './context'
-import Validator from '../../validator'
-import { FormProps, FormItemProps } from './types'
-import { ConfigConsumer } from '../config_provider'
-const { Provider } = FormContext
-
-interface FormState {
-  canValidate: boolean
-}
-/**
- * 请使用ControledForm
- * @deprecated
- */
-class Form extends Component<FormProps, FormState> {
-  static defaultProps = {
-    btnPosition: 'center',
-    colWidth: '320px',
-  }
-
-  readonly state: FormState = {
-    canValidate: false,
-  }
-
-  public apiDoValidate = (): boolean => {
-    const error = this._validateAll()
-    this.setState({ canValidate: error })
-    return !error
-  }
-
-  private _getFormItemFields = (
-    children: ReactElement,
-    formItems: ReactElement<FormItemProps>[]
-  ) => {
-    Children.toArray(children).forEach((value: ReactNode) => {
-      const child = value as ReactElement<PropsWithChildren<FormItemProps>, ComponentType>
-      if (
-        child.type &&
-        ['FormItem', 'ControlledFormItem'].includes(child.type.displayName!)
-      ) {
-        formItems.push(child)
-      } else if (child.props && child.props.children) {
-        this._getFormItemFields(child.props.children as ReactElement, formItems)
-      }
-    })
-  }
-
-  private _validateAll = (): boolean => {
-    const { children } = this.props
-    const helpList: { label: ReactNode; help: string }[] = []
-    const formItems: ReactElement<FormItemProps>[] = []
-    this._getFormItemFields(children as ReactElement, formItems)
-    formItems.forEach((item) => {
-      if (item.props.error) {
-        helpList.push({
-          label: item.props.label,
-          help: item.props.help!,
-        })
-      } else if (item.props.validate) {
-        let help = ''
-        if (item.props.required) {
-          help = item.props.validate(function (value: any) {
-            return Validator.validate(Validator.TYPE.required, value)
-          })
-        } else {
-          help = item.props.validate()
-        }
-        if (help) {
-          helpList.push({
-            label: item.props.label,
-            help,
-          })
-        }
-      }
-    })
-    return !!helpList.length
-  }
-
-  private _handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
-    event.preventDefault()
-    const { onSubmit, onSubmitValidated } = this.props
-    onSubmit && onSubmit(event)
-
-    const error = this._validateAll()
-    if (!error) {
-      onSubmitValidated && onSubmitValidated()
-    }
-
-    this.setState({
-      canValidate: error,
-    })
-  }
-
-  render() {
-    const {
-      inline,
-      labelWidth,
-      disabledCol,
-      className,
-      children,
-      hasButtonInGroup,
-      onSubmitValidated,
-      btnPosition,
-      colWidth,
-      ...rest
-    } = this.props
-    const { canValidate } = this.state
-    return (
-      <Provider
-        value={{ labelWidth, disabledCol, inline, btnPosition, colWidth, canValidate }}
-      >
-        <ConfigConsumer>
-          {({ fontSize }) => (
-            <form
-              {...rest}
-              className={classNames(
-                'gm-form',
-                { 'form-inline': inline, [`gm-form-text-${fontSize}`]: fontSize },
-                className
-              )}
-              onSubmit={this._handleSubmit}
-            >
-              {children}
-              {hasButtonInGroup && <button type='submit' style={{ display: 'none' }} />}
-            </form>
-          )}
-        </ConfigConsumer>
-      </Provider>
-    )
-  }
-}
-
-export default Form
+import React, {
+  Component,
+  FormEvent,
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+  ComponentType,
+  Children,
+} from 'react'
+import classNames from 'classnames'
+import FormContext from './context'
+import Validator from '../../validator'
+import { FormProps, FormItemProps } from './types'
+import { ConfigConsumer } from '../config_provider'
+const { Provider } = FormContext
+
+interface FormState {
+  canValidate: boolean
+}
+/**
+ * 请使用ControledForm
+ * @deprecated
+ */
+class Form extends Component<FormProps, FormState> {
+  static defaultProps = {
+    btnPosition: 'center',
+    colWidth: '320px',
+  }
+
+  readonly state: FormState = {
+    canValidate: false,
+  }
+
+  public apiDoValidate = (): boolean => {
+    const error = this._validateAll()
+    this.setState({ canValidate: error })
+    return !error
+  }
+
+  private _getFormItemFields = (
+    children: ReactElement,
+    formItems: ReactElement<FormItemProps>[]
+  ) => {
+    Children.toArray(children).forEach((value: ReactNode) => {
+      const child = value as ReactElement<PropsWithChildren<FormItemProps>, ComponentType>
+      if (
+        child.type &&
+        ['FormItem', 'ControlledFormItem'].includes(child.type.displayName!)
+      ) {
+        formItems.push(child)
+      } else if (child.props && child.props.children) {
+        this._getFormItemFields(child.props.children as ReactElement, formItems)
+      }
+    })
+  }
+
+  private _validateAll = (): boolean => {
+    const { children } = this.props
+    const helpList: { label: ReactNode; help: string }[] = []
+    const formItems: ReactElement<FormItemProps>[] = []
+    this._getFormItemFields(children as ReactElement, formItems)
+    formItems.forEach((item) => {
+      if (item.props.error) {
+        helpList.push({
+          label: item.props.label,
+          help: item.props.help!,
+        })
+      } else if (item.props.validate) {
+        let help = ''
+        if (item.props.required) {
+          help = item.props.validate(function (value: any) {
+            return Validator.validate(Validator.TYPE.required, value)
+          })
+        } else {
+          help = item.props.validate()
+        }
+        if (help) {
+          helpList.push({
+            label: item.props.label,
+            help,
+          })
+        }
+      }
+    })
+    return !!helpList.length
+  }
+
+  private _handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+    const { onSubmit, onSubmitValidated } = this.props
+    onSubmit && onSubmit(event)
+
+    const error = this._validateAll()
+    if (!error) {
+      onSubmitValidated && onSubmitValidated()
+    }
+
+    this.setState({
+      canValidate: error,
+    })
+  }
+
+  render() {
+    const {
+      inline,
+      labelWidth,
+      disabledCol,
+      className,
+      children,
+      hasButtonInGroup,
+      onSubmitValidated,
+      btnPosition,
+      colWidth,
+      ...rest
+    } = this.props
+    const { canValidate } = this.state
+    return (
+      <Provider
+        value={{ labelWidth, disabledCol, inline, btnPosition, colWidth, canValidate }}
+      >
+        <ConfigConsumer>
+          {({ fontSize }) => (
+            <form
+              {...rest}
+              className={classNames(
+                'gm-form',
+                { 'form-inline': inline, [`gm-form-text-${fontSize}`]: fontSize },
+                className
+              )}
+              onSubmit={this._handleSubmit}
+            >
+              {children}
+              {hasButtonInGroup && <button type='submit' style={{ display: 'none' }} />}
+            </form>
+          )}
+        </ConfigConsumer>
+      </Provider>
+    )
+  }
+}
+
+export default Form

package/src/component/form/form_block.tsx

@@ -1,39 +1,39 @@
-import React, { Children, CSSProperties, FC, useContext } from 'react'
-import classNames from 'classnames'
-import FormContext from './context'
-import { Flex } from '../flex'
-import { FormBlockProps } from './types'
-
-const FormBlock: FC<FormBlockProps> = ({
-  col = 1,
-  disabledCol,
-  inline,
-  className,
-  style,
-  children,
-}) => {
-  const context = useContext(FormContext)
-  disabledCol = disabledCol ?? context.disabledCol
-  inline = inline ?? context.inline
-  const { colWidth } = context
-  const _cw = +colWidth!.replace('px', '')
-  const _style: CSSProperties = Object.assign(
-    {},
-    style,
-    disabledCol || inline ? {} : { width: _cw * col }
-  )
-
-  return (
-    <Flex wrap style={_style} className={classNames('gm-form-block', className)}>
-      {Children.map(children, (child, index) => (
-        <Flex key={index} column>
-          {child}
-        </Flex>
-      ))}
-    </Flex>
-  )
-}
-
-FormBlock.displayName = 'FormBlock'
-
-export default FormBlock
+import React, { Children, CSSProperties, FC, useContext } from 'react'
+import classNames from 'classnames'
+import FormContext from './context'
+import { Flex } from '../flex'
+import { FormBlockProps } from './types'
+
+const FormBlock: FC<FormBlockProps> = ({
+  col = 1,
+  disabledCol,
+  inline,
+  className,
+  style,
+  children,
+}) => {
+  const context = useContext(FormContext)
+  disabledCol = disabledCol ?? context.disabledCol
+  inline = inline ?? context.inline
+  const { colWidth } = context
+  const _cw = +colWidth!.replace('px', '')
+  const _style: CSSProperties = Object.assign(
+    {},
+    style,
+    disabledCol || inline ? {} : { width: _cw * col }
+  )
+
+  return (
+    <Flex wrap style={_style} className={classNames('gm-form-block', className)}>
+      {Children.map(children, (child, index) => (
+        <Flex key={index} column>
+          {child}
+        </Flex>
+      ))}
+    </Flex>
+  )
+}
+
+FormBlock.displayName = 'FormBlock'
+
+export default FormBlock

package/src/component/form/form_button.tsx

@@ -1,28 +1,28 @@
-import React, { CSSProperties, FC, useContext } from 'react'
-import { FormButtonProps } from './types'
-import FormContext from './context'
-import { Flex } from '../flex'
-
-const FormButton: FC<FormButtonProps> = ({ labelWidth, btnPosition, children }) => {
-  const context = useContext(FormContext)
-  labelWidth = labelWidth ?? context.labelWidth
-  btnPosition = btnPosition ?? context.btnPosition
-  const { inline } = context
-  const style: CSSProperties = {
-    marginLeft: btnPosition === 'left' && !inline && labelWidth ? labelWidth : 0,
-  }
-
-  return (
-    <Flex
-      column
-      alignStart={btnPosition === 'left'}
-      alignCenter={btnPosition === 'center'}
-      alignEnd={btnPosition === 'right'}
-      style={style}
-    >
-      <div>{children}</div>
-    </Flex>
-  )
-}
-
-export default FormButton
+import React, { CSSProperties, FC, useContext } from 'react'
+import { FormButtonProps } from './types'
+import FormContext from './context'
+import { Flex } from '../flex'
+
+const FormButton: FC<FormButtonProps> = ({ labelWidth, btnPosition, children }) => {
+  const context = useContext(FormContext)
+  labelWidth = labelWidth ?? context.labelWidth
+  btnPosition = btnPosition ?? context.btnPosition
+  const { inline } = context
+  const style: CSSProperties = {
+    marginLeft: btnPosition === 'left' && !inline && labelWidth ? labelWidth : 0,
+  }
+
+  return (
+    <Flex
+      column
+      alignStart={btnPosition === 'left'}
+      alignCenter={btnPosition === 'center'}
+      alignEnd={btnPosition === 'right'}
+      style={style}
+    >
+      <div>{children}</div>
+    </Flex>
+  )
+}
+
+export default FormButton