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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.26.2-beta.0",
+  "version": "1.27.1-beta.0",
   "description": "观麦前端基础组件库",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@gm-common/hooks": "^2.10.0",
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/locales": "^1.26.2-beta.0",
+    "@gm-pc/locales": "^1.27.1-beta.0",
     "big.js": "^6.0.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19",
@@ -48,5 +48,5 @@
     "react-router-dom": "^5.2.0",
     "react-window": "^1.8.5"
   },
-  "gitHead": "2e733432de552d94159fd1f0f95f4539338dc460"
+  "gitHead": "eecad3bce81dd37787dc6e90f6ecfc2ee666ad26"
 }

package/src/common/hooks/index.ts

@@ -1,5 +1,5 @@
-import { useMutationObserver } from './use_mutation_observer'
-
-export { useMutationObserver }
-
-export * from './use_form'
+import { useMutationObserver } from './use_mutation_observer'
+
+export { useMutationObserver }
+
+export * from './use_form'

package/src/common/hooks/use_form/index.ts

@@ -1,2 +1,2 @@
-export * from './use_form'
-export { default as useForm } from './use_form'
+export * from './use_form'
+export { default as useForm } from './use_form'

package/src/common/hooks/use_form/use_form.ts

@@ -1,184 +1,184 @@
-/*
- * @Description: 受控表单自定义hook
- */
-
-import { useEffect, useCallback, useState, useRef } from 'react'
-import _, { noop } from 'lodash'
-
-import { handleValues } from './utils'
-import { RecordPartial, anyCallback, StringKey } from '../../../types'
-import { getRecordPartialObject, isFalsy } from '../../utils'
-
-export type OnFieldsChange<K = any> = (
-  [changeField, changedValue]: [StringKey<K>, any],
-  allValues: UseFormProps['initialValues']
-) => void
-
-export interface UseFormProps<K = any> {
-  /* 表单初始值 */
-  initialValues?: RecordPartial<K, any>
-  /* 规格化配置 */
-  normalizes?: keyof any extends K
-    ? { [key: string]: anyCallback }
-    : {
-        [P in keyof K]?: anyCallback<K[P]>
-      }
-  /* 表单项改变的回调，常用于表单项联动 */
-  onFieldsChange?: OnFieldsChange<K>
-}
-
-export interface FormInstance<Values = any> {
-  /* 重置表单为初始值 */
-  resetFields(): void
-  /* 设置表单值 */
-  setFieldsValue(newValues: RecordPartial<Values, any>): void
-  /* 获取表单值， isOrigin：是否获取表单原始值 */
-  getFieldsValue(nameList?: StringKey<Values>[], isOrigin?: boolean): Partial<Values>
-  /* 表单是否验证 */
-  apiDoValidate(): boolean
-  validateFields(): Promise<RecordPartial<Values, any>>
-}
-export default function useForm<K = any>(props: UseFormProps<K>) {
-  const {
-    // 初始默认值
-    initialValues = {},
-    normalizes = getRecordPartialObject<K, anyCallback>(),
-    // 表单项改变的回调
-    onFieldsChange = _.noop,
-  } = props
-  const canSubmitRef = useRef<Partial<Record<StringKey<K>, string>>>({})
-  // 由于setState后没法拿到最新值，故将最新值保存到ref中
-  const latestValuesRef = useRef<RecordPartial<K, any>>({
-    ...initialValues,
-  })
-  // 存储表单值
-  const [values, setValues] = useState<RecordPartial<K, any>>({
-    ...initialValues,
-  })
-
-  useEffect(() => {
-    latestValuesRef.current = { ...values }
-  }, [values])
-  const getNormalizeValue = useCallback(
-    (key: StringKey<K>, value: any) => {
-      if (normalizes[key] && !isFalsy(value)) {
-        return normalizes[key]?.(value)
-      }
-      return value
-    },
-    [normalizes]
-  )
-  /**
-   * @description: 根据组件类型，name以及组件onChange的原始值获取格式化的值
-   * @param {string} type 组件类型
-   * @param {string} fieldName 表单名称
-   * @param {object} originValue onChange的原始值
-   */
-  const onChange = useCallback(
-    (fieldName: StringKey<K>, originValue: any) => {
-      const target = originValue?.target
-      const newValue = target
-        ? ['checkbox', 'radio'].includes(target?.type)
-          ? target.checked
-          : target.value
-        : originValue
-      setValues((values) => {
-        latestValuesRef.current = handleValues(
-          values,
-          fieldName,
-          newValue,
-          onFieldsChange
-        )
-        return latestValuesRef.current
-      })
-
-      return getNormalizeValue(fieldName, newValue)
-    },
-    [onFieldsChange, getNormalizeValue]
-  )
-  /**
-   * @description: 重置表单
-   */
-  const resetFields = useCallback(() => {
-    setValues({ ...initialValues })
-  }, [initialValues])
-  /**
-   * @description: 修改表单值
-   * @param {object: {fieldName: newValue}} newValues
-   */
-  const setFieldsValue: FormInstance<K>['setFieldsValue'] = useCallback(
-    (newValues = {}) => {
-      setValues((values) => ({ ...values, ...newValues }))
-    },
-    []
-  )
-  /**
-   * @description: 获取表单值
-   * @param {(keyof K | string][]} nameList
-   * @return {object} values 表单值
-   */
-  const getFieldsValue: FormInstance<K>['getFieldsValue'] = useCallback(
-    (nameList, isOrigin) => {
-      let tempValues = { ...latestValuesRef.current }
-      // 如果有传入nameList，返回nameList的值
-      if (Array.isArray(nameList)) {
-        tempValues = _.pick({ ...latestValuesRef.current }, nameList)
-      }
-      if (isOrigin) {
-        return tempValues as Partial<K>
-      }
-      // 如果配置了规格化
-      if (Object.keys(normalizes).length) {
-        Object.keys(normalizes).forEach((key) => {
-          const tempKey = (key as unknown) as StringKey<K>
-          const value = tempValues[tempKey]
-          // 如果有规格化，返回规格化的数据
-          tempValues[tempKey] = getNormalizeValue(tempKey, value)
-        })
-      }
-      return tempValues as Partial<K>
-    },
-    [normalizes, getNormalizeValue]
-  )
-
-  const setCanSubmit = (key: StringKey<K>, message: string) => {
-    canSubmitRef.current[key] = message
-  }
-  const canSubmit = useCallback(() => {
-    return Object.values(canSubmitRef.current).every((value) => !value)
-  }, [])
-  const validateFields = useCallback((): Promise<RecordPartial<K, any>> => {
-    return new Promise((resolve, reject) => {
-      if (canSubmit()) {
-        resolve(latestValuesRef.current)
-      } else {
-        reject(_.omitBy(canSubmitRef.current, _.isUndefined))
-      }
-    })
-  }, [canSubmit])
-  return {
-    values,
-    onChange,
-    resetFields,
-    setFieldsValue,
-    getFieldsValue,
-    getNormalizeValue,
-    canSubmit,
-    setCanSubmit,
-    validateFields,
-  }
-}
-/**
- * @description: 获取表单实例
- * @return {Readonly<FormInstance<T>>} 表单实例
- */
-export function useControlFormRef<T>() {
-  const ref = useRef<Readonly<FormInstance<T>>>(({
-    resetFields: noop,
-    getFieldsValue: noop,
-    setFieldsValue: noop,
-    apiDoValidate: noop,
-    validateFields: () => Promise.resolve(),
-  } as unknown) as FormInstance<T>)
-  return ref
-}
+/*
+ * @Description: 受控表单自定义hook
+ */
+
+import { useEffect, useCallback, useState, useRef } from 'react'
+import _, { noop } from 'lodash'
+
+import { handleValues } from './utils'
+import { RecordPartial, anyCallback, StringKey } from '../../../types'
+import { getRecordPartialObject, isFalsy } from '../../utils'
+
+export type OnFieldsChange<K = any> = (
+  [changeField, changedValue]: [StringKey<K>, any],
+  allValues: UseFormProps['initialValues']
+) => void
+
+export interface UseFormProps<K = any> {
+  /* 表单初始值 */
+  initialValues?: RecordPartial<K, any>
+  /* 规格化配置 */
+  normalizes?: keyof any extends K
+    ? { [key: string]: anyCallback }
+    : {
+        [P in keyof K]?: anyCallback<K[P]>
+      }
+  /* 表单项改变的回调，常用于表单项联动 */
+  onFieldsChange?: OnFieldsChange<K>
+}
+
+export interface FormInstance<Values = any> {
+  /* 重置表单为初始值 */
+  resetFields(): void
+  /* 设置表单值 */
+  setFieldsValue(newValues: RecordPartial<Values, any>): void
+  /* 获取表单值， isOrigin：是否获取表单原始值 */
+  getFieldsValue(nameList?: StringKey<Values>[], isOrigin?: boolean): Partial<Values>
+  /* 表单是否验证 */
+  apiDoValidate(): boolean
+  validateFields(): Promise<RecordPartial<Values, any>>
+}
+export default function useForm<K = any>(props: UseFormProps<K>) {
+  const {
+    // 初始默认值
+    initialValues = {},
+    normalizes = getRecordPartialObject<K, anyCallback>(),
+    // 表单项改变的回调
+    onFieldsChange = _.noop,
+  } = props
+  const canSubmitRef = useRef<Partial<Record<StringKey<K>, string>>>({})
+  // 由于setState后没法拿到最新值，故将最新值保存到ref中
+  const latestValuesRef = useRef<RecordPartial<K, any>>({
+    ...initialValues,
+  })
+  // 存储表单值
+  const [values, setValues] = useState<RecordPartial<K, any>>({
+    ...initialValues,
+  })
+
+  useEffect(() => {
+    latestValuesRef.current = { ...values }
+  }, [values])
+  const getNormalizeValue = useCallback(
+    (key: StringKey<K>, value: any) => {
+      if (normalizes[key] && !isFalsy(value)) {
+        return normalizes[key]?.(value)
+      }
+      return value
+    },
+    [normalizes]
+  )
+  /**
+   * @description: 根据组件类型，name以及组件onChange的原始值获取格式化的值
+   * @param {string} type 组件类型
+   * @param {string} fieldName 表单名称
+   * @param {object} originValue onChange的原始值
+   */
+  const onChange = useCallback(
+    (fieldName: StringKey<K>, originValue: any) => {
+      const target = originValue?.target
+      const newValue = target
+        ? ['checkbox', 'radio'].includes(target?.type)
+          ? target.checked
+          : target.value
+        : originValue
+      setValues((values) => {
+        latestValuesRef.current = handleValues(
+          values,
+          fieldName,
+          newValue,
+          onFieldsChange
+        )
+        return latestValuesRef.current
+      })
+
+      return getNormalizeValue(fieldName, newValue)
+    },
+    [onFieldsChange, getNormalizeValue]
+  )
+  /**
+   * @description: 重置表单
+   */
+  const resetFields = useCallback(() => {
+    setValues({ ...initialValues })
+  }, [initialValues])
+  /**
+   * @description: 修改表单值
+   * @param {object: {fieldName: newValue}} newValues
+   */
+  const setFieldsValue: FormInstance<K>['setFieldsValue'] = useCallback(
+    (newValues = {}) => {
+      setValues((values) => ({ ...values, ...newValues }))
+    },
+    []
+  )
+  /**
+   * @description: 获取表单值
+   * @param {(keyof K | string][]} nameList
+   * @return {object} values 表单值
+   */
+  const getFieldsValue: FormInstance<K>['getFieldsValue'] = useCallback(
+    (nameList, isOrigin) => {
+      let tempValues = { ...latestValuesRef.current }
+      // 如果有传入nameList，返回nameList的值
+      if (Array.isArray(nameList)) {
+        tempValues = _.pick({ ...latestValuesRef.current }, nameList)
+      }
+      if (isOrigin) {
+        return tempValues as Partial<K>
+      }
+      // 如果配置了规格化
+      if (Object.keys(normalizes).length) {
+        Object.keys(normalizes).forEach((key) => {
+          const tempKey = (key as unknown) as StringKey<K>
+          const value = tempValues[tempKey]
+          // 如果有规格化，返回规格化的数据
+          tempValues[tempKey] = getNormalizeValue(tempKey, value)
+        })
+      }
+      return tempValues as Partial<K>
+    },
+    [normalizes, getNormalizeValue]
+  )
+
+  const setCanSubmit = (key: StringKey<K>, message: string) => {
+    canSubmitRef.current[key] = message
+  }
+  const canSubmit = useCallback(() => {
+    return Object.values(canSubmitRef.current).every((value) => !value)
+  }, [])
+  const validateFields = useCallback((): Promise<RecordPartial<K, any>> => {
+    return new Promise((resolve, reject) => {
+      if (canSubmit()) {
+        resolve(latestValuesRef.current)
+      } else {
+        reject(_.omitBy(canSubmitRef.current, _.isUndefined))
+      }
+    })
+  }, [canSubmit])
+  return {
+    values,
+    onChange,
+    resetFields,
+    setFieldsValue,
+    getFieldsValue,
+    getNormalizeValue,
+    canSubmit,
+    setCanSubmit,
+    validateFields,
+  }
+}
+/**
+ * @description: 获取表单实例
+ * @return {Readonly<FormInstance<T>>} 表单实例
+ */
+export function useControlFormRef<T>() {
+  const ref = useRef<Readonly<FormInstance<T>>>(({
+    resetFields: noop,
+    getFieldsValue: noop,
+    setFieldsValue: noop,
+    apiDoValidate: noop,
+    validateFields: () => Promise.resolve(),
+  } as unknown) as FormInstance<T>)
+  return ref
+}

package/src/common/hooks/use_form/utils.ts

@@ -1,23 +1,23 @@
-/**
- * @description: 处理表单值
- * @param {object} values 旧的表单值
- * @param {string} fieldName 修改的表单名
- * @param {any} newValue 修改后的表单值
- */
-import { anyCallback } from '../../../types'
-import { judgeFunction } from '../../utils'
-function handleValues<T>(
-  values: T,
-  fieldName: keyof T,
-  newValue: Partial<T>,
-  onFieldsChange: anyCallback
-): T {
-  const newValues = { ...values, [fieldName]: newValue }
-  // 表单值改变的时候触发回调,放入宏任务队列，避免setState的回调又是setState导致警告
-  const timer = setTimeout(() => {
-    judgeFunction(onFieldsChange, [fieldName, newValue], { ...newValues })
-    clearTimeout(timer)
-  })
-  return newValues
-}
-export { handleValues }
+/**
+ * @description: 处理表单值
+ * @param {object} values 旧的表单值
+ * @param {string} fieldName 修改的表单名
+ * @param {any} newValue 修改后的表单值
+ */
+import { anyCallback } from '../../../types'
+import { judgeFunction } from '../../utils'
+function handleValues<T>(
+  values: T,
+  fieldName: keyof T,
+  newValue: Partial<T>,
+  onFieldsChange: anyCallback
+): T {
+  const newValues = { ...values, [fieldName]: newValue }
+  // 表单值改变的时候触发回调,放入宏任务队列，避免setState的回调又是setState导致警告
+  const timer = setTimeout(() => {
+    judgeFunction(onFieldsChange, [fieldName, newValue], { ...newValues })
+    clearTimeout(timer)
+  })
+  return newValues
+}
+export { handleValues }

package/src/common/hooks/use_mutation_observer.ts

@@ -1,19 +1,19 @@
-import { MutableRefObject, useEffect } from 'react'
-
-function useMutationObserver(
-  ref: MutableRefObject<HTMLElement | null | undefined>,
-  callback: MutationCallback,
-  options = { attributes: true, characterData: true, subtree: true, childList: true }
-) {
-  useEffect((): void | (() => void) => {
-    if (ref.current) {
-      const observer = new window.MutationObserver(callback)
-      observer.observe(ref.current, options)
-      return () => {
-        observer.disconnect()
-      }
-    }
-  }, [ref, callback, options])
-}
-
-export { useMutationObserver }
+import { MutableRefObject, useEffect } from 'react'
+
+function useMutationObserver(
+  ref: MutableRefObject<HTMLElement | null | undefined>,
+  callback: MutationCallback,
+  options = { attributes: true, characterData: true, subtree: true, childList: true }
+) {
+  useEffect((): void | (() => void) => {
+    if (ref.current) {
+      const observer = new window.MutationObserver(callback)
+      observer.observe(ref.current, options)
+      return () => {
+        observer.disconnect()
+      }
+    }
+  }, [ref, callback, options])
+}
+
+export { useMutationObserver }

package/src/common/utils/date.ts

@@ -1,28 +1,28 @@
-import moment, { Moment } from 'moment'
-
-// 设置moment的时间值
-const setTimes = (date: Moment, time?: Moment): Moment => {
-  // 没有设置时间
-  if (!time) {
-    return moment(date)
-  }
-
-  const year = moment(date).year()
-  const month = moment(date).month()
-  const day = moment(date).date()
-
-  return moment(time).set({ year, month, date: day })
-}
-
-const getTimeCells = (span: number): Moment[] => {
-  let time = moment().startOf('day')
-  const cells = []
-  while (time <= moment().endOf('day')) {
-    cells.push(time)
-    time = moment(+time + span)
-  }
-  cells.push(moment().endOf('day'))
-  return cells
-}
-
-export { setTimes, getTimeCells }
+import moment, { Moment } from 'moment'
+
+// 设置moment的时间值
+const setTimes = (date: Moment, time?: Moment): Moment => {
+  // 没有设置时间
+  if (!time) {
+    return moment(date)
+  }
+
+  const year = moment(date).year()
+  const month = moment(date).month()
+  const day = moment(date).date()
+
+  return moment(time).set({ year, month, date: day })
+}
+
+const getTimeCells = (span: number): Moment[] => {
+  let time = moment().startOf('day')
+  const cells = []
+  while (time <= moment().endOf('day')) {
+    cells.push(time)
+    time = moment(+time + span)
+  }
+  cells.push(moment().endOf('day'))
+  return cells
+}
+
+export { setTimes, getTimeCells }

package/src/common/utils/get_record_partical_object.ts

@@ -1,4 +1,4 @@
-import { RecordPartial } from '../../types'
-export function getRecordPartialObject<K, V>(): RecordPartial<K, V> {
-  return Object.create(null)
-}
+import { RecordPartial } from '../../types'
+export function getRecordPartialObject<K, V>(): RecordPartial<K, V> {
+  return Object.create(null)
+}

package/src/common/utils/index.ts

@@ -1,3 +1,3 @@
-export * from './date'
-export * from './get_record_partical_object'
-export * from './utils'
+export * from './date'
+export * from './get_record_partical_object'
+export * from './utils'

package/src/common/utils/utils.ts

@@ -1,16 +1,16 @@
-import { anyCallback } from '../../types'
-
-export function isFalsy(value: any): boolean {
-  return [undefined, null, ''].includes(value)
-}
-/**
- * @description: 判断是否是函数，是的话执行该函数并传入响应的参数
- * @param {function} fn 待执行的函数
- * @param {} args fn的参数
- */
-
-export function judgeFunction(fn?: anyCallback, ...args: any[]) {
-  if (typeof fn === 'function') {
-    return fn(...args)
-  }
-}
+import { anyCallback } from '../../types'
+
+export function isFalsy(value: any): boolean {
+  return [undefined, null, ''].includes(value)
+}
+/**
+ * @description: 判断是否是函数，是的话执行该函数并传入响应的参数
+ * @param {function} fn 待执行的函数
+ * @param {} args fn的参数
+ */
+
+export function judgeFunction(fn?: anyCallback, ...args: any[]) {
+  if (typeof fn === 'function') {
+    return fn(...args)
+  }
+}

package/src/component/affix/affix.tsx

@@ -1,31 +1,31 @@
-import React, { CSSProperties, FC } from 'react'
-import _ from 'lodash'
-
-interface AffixProps {
-  top?: number
-  bottom?: number
-}
-
-const Affix: FC<AffixProps> = ({ children, top, bottom }) => {
-  const style: CSSProperties = {
-    position: 'sticky',
-    zIndex: 950,
-  }
-
-  if (!_.isNil(top)) {
-    style.top = `${top}px`
-  }
-
-  if (!_.isNil(bottom)) {
-    style.bottom = `${bottom}px`
-  }
-
-  return (
-    <div className='gm-affix' style={style}>
-      {children}
-    </div>
-  )
-}
-
-export default Affix
-export type { AffixProps }
+import React, { CSSProperties, FC } from 'react'
+import _ from 'lodash'
+
+interface AffixProps {
+  top?: number
+  bottom?: number
+}
+
+const Affix: FC<AffixProps> = ({ children, top, bottom }) => {
+  const style: CSSProperties = {
+    position: 'sticky',
+    zIndex: 950,
+  }
+
+  if (!_.isNil(top)) {
+    style.top = `${top}px`
+  }
+
+  if (!_.isNil(bottom)) {
+    style.bottom = `${bottom}px`
+  }
+
+  return (
+    <div className='gm-affix' style={style}>
+      {children}
+    </div>
+  )
+}
+
+export default Affix
+export type { AffixProps }