Przeglądaj źródła

feat: 5.27 EditableForm commit

lanjianrong 4 lat temu
rodzic
commit
7b5ba126cb

+ 13 - 5
src/components/EditableForm/src/components/ChangeDatePicker.jsx

@@ -1,22 +1,31 @@
 import React, { forwardRef, useState } from 'react'
 import { DatePicker } from 'antd'
+import type { DatePickerProps } from 'antd'
 import dayjs, { isDayjs } from 'dayjs'
 
-const ChangeDatePicker = props => {
-  const { defaultValue, refinstance, onSave, defaultOpen = false, ...restProps } = props
+type ChangeDatePickerProps = {
+  onSave?: () => void
+} & DatePickerProps
+
+function ChangeDatePicker({
+  defaultValue,
+  onSave,
+  defaultOpen = false,
+  ...restProps
+}: ChangeDatePickerProps) {
   const [val, setVal] = useState(defaultValue)
   const [open, setOpen] = useState(defaultOpen)
   const handleOnChange = d => {
     if (!d) return
     const date = d.format('YYYY-MM-DD')
     setVal(date)
-    onSave({ currentTarget: { value: date } })
+    onSave?.({ currentTarget: { value: date } })
   }
 
   const handleOnOpenChange = e => {
     setOpen(e)
     if (!e && val === defaultValue) {
-      onSave({ currentTarget: { value: null } })
+      onSave?.({ currentTarget: { value: null } })
     }
   }
   return (
@@ -25,7 +34,6 @@ const ChangeDatePicker = props => {
       value={isDayjs(val) ? val : dayjs(val)}
       style={{ width: '100%' }}
       placeholder="请选择日期"
-      ref={refinstance}
       onBlur={() => onSave({ currentTarget: { value: val } })}
       onChange={handleOnChange}
       onOpenChange={handleOnOpenChange}

+ 8 - 3
src/components/EditableForm/src/components/ChangeSelect.jsx

@@ -1,8 +1,13 @@
 import React, { forwardRef, useState } from 'react'
 import { Select } from 'antd'
+import type { SelectProps } from 'antd'
+import type { RefSelectProps } from 'antd/lib/select'
 
-const ChangeSelect = props => {
-  const { defaultValue, refinstance, options, onSave } = props
+type ChangeSelectProps<T> = {
+  refinstance: React.Ref<RefSelectProps> | undefined
+  onSave?: () => void
+} & SelectProps<T>
+function ChangeSelect<T>({ defaultValue, refinstance, options, onSave }: ChangeSelectProps<T>) {
   let extraDefaultValue
   let mode = null
   if (Array.isArray(defaultValue)) {
@@ -38,7 +43,7 @@ const ChangeSelect = props => {
     <Select
       defaultValue={extraDefaultValue}
       ref={refinstance}
-      onBlur={() => onSave({ currentTarget: { ...selectedObj } })}
+      onBlur={() => onSave?.({ currentTarget: { ...selectedObj } })}
       options={options}
       defaultOpen={true}
       mode={mode}

+ 8 - 3
src/components/EditableForm/src/components/ChangeTreeSelect.jsx

@@ -1,8 +1,13 @@
 import React, { forwardRef, useState } from 'react'
 import { TreeSelect } from 'antd'
+import type { TreeSelectProps } from 'antd'
+import type { RefSelectProps } from 'antd/lib/select'
+type ChangeTreeSelectProps<V, O> = {
+  refinstance: React.Ref<RefSelectProps>
+  onSave?: () => void
+} & TreeSelectProps<V, O>
 
-const ChangeTreeSelect = props => {
-  const { defaultValue, refinstance, options, onSave } = props
+function ChangeTreeSelect<V, O>({ defaultValue, refinstance, options, onSave }: ChangeTreeSelectProps<V, O>) {
   const [selectedObj, setSelectedObj] = useState({ value: defaultValue, label: '' })
   const handleOnChange = (value, option) => {
     let local = ''
@@ -25,7 +30,7 @@ const ChangeTreeSelect = props => {
         allowClear
         defaultValue={defaultValue}
         ref={refinstance}
-        onBlur={() => onSave({ currentTarget: { ...selectedObj } })}
+        onBlur={() => onSave?.({ currentTarget: { ...selectedObj } })}
         treeData={options}
         defaultOpen={true}
         mode={Array.isArray(selectedObj.value)}

+ 1 - 1
src/components/EditableForm/src/editableFormItem.tsx

@@ -7,7 +7,7 @@ import { useDispatch } from 'umi'
 import useOptions from './useOptions'
 import ChangeSelect from './components/ChangeSelect'
 import ChangeTreeSelect from './components/ChangeTreeSelect'
-import ChangeDatePicker from './components/ChangeDatePicker'
+import ChangeDatePicker from './components/ChangeDatePicker.tsx'
 import './index.less'
 import { isArray, isNull } from '@/utils/is'
 import classNames from 'classnames'

+ 27 - 19
src/components/LazyCascader/LazyCascader.jsx

@@ -1,27 +1,36 @@
 import { getAuthCache } from '@/utils/auth'
 import { CASCADER_HISTORY_KEY } from '@/utils/cache/cacheEnum'
 import { isUnDef } from '@/utils/is'
+import type { CascaderProps } from 'antd'
 import { Cascader, Divider, Tag } from 'antd'
 import React, { forwardRef, useEffect, useState, useLayoutEffect } from 'react'
 import { connect } from 'umi'
+import type { Dispatch } from 'umi'
 import styles from './index.less'
-import { serializeRecord } from './util'
+import { saveRecordToAuth } from './util'
+import type { CascaderRef } from 'antd/lib/cascader'
 
-const CLazyCascader = props => {
-  const {
-    refinstance,
-    options,
-    dispatch,
-    value,
-    onChange,
-    changeOnSelect = false,
-    popupVisible = false,
-    showFooter = false,
-    defaultValue,
-    onBlur,
-    isEditFormItem,
-    ...resetProps
-  } = props
+type LazyCascaderProps<T> = {
+  refinstance: CascaderRef
+  dispatch: Dispatch
+  isEditFormItem?: boolean
+  showFooter?: boolean
+} & CascaderProps<T>
+
+function CLazyCascader<T>({
+  refinstance,
+  options,
+  dispatch,
+  value,
+  onChange,
+  changeOnSelect = false,
+  popupVisible = false,
+  showFooter = false,
+  defaultValue,
+  onBlur,
+  isEditFormItem,
+  ...resetProps
+}: LazyCascaderProps<T>) {
   const [visible, setVisible] = useState(popupVisible)
 
   const [historyRecord, setHistoryRecord] = useState(
@@ -48,7 +57,7 @@ const CLazyCascader = props => {
     const len = nvalue?.length
     if (len === 3) {
       const { name, id } = selectedOptions[2]
-      const htr = serializeRecord(
+      const htr = saveRecordToAuth(
         name,
         id,
         selectedOptions.map(item => ({ id: item.id, name: item.name }))
@@ -128,8 +137,7 @@ const CLazyCascader = props => {
                       item.value.map(v => v.id),
                       item.value
                     )
-                  }
-                >
+                  }>
                   <Tag>{item.name}</Tag>
                 </div>
               ))}

src/components/LazyCascader/index.jsx → src/components/LazyCascader/index.tsx


+ 1 - 1
src/components/LazyCascader/util.js

@@ -21,7 +21,7 @@ export function formatValues(value) {
 }
 
 /** 对级联数据进行auth历史性存储 */
-export function serializeRecord(name = '', id = '', value = []) {
+export function saveRecordToAuth(name = '', id = '', value = []) {
   if (!name || !id) return
   let hty = getAuthCache(CASCADER_HISTORY_KEY) || []
   // 数组为空

+ 4 - 4
src/components/TimeLineList/index.tsx

@@ -80,9 +80,9 @@ function TimeLineList<T>({
     return dataMap.map(t =>
       t.map((item, i) => {
         const itemTime = dayjs(item?.[dataField])
-        const currentTime = dayjs()
+        const currentTime = dayjs().startOf('d')
         if (itemTime && currentTime) {
-          const renderTime = currentTime.diff(itemTime, 'day')
+          const renderTime = currentTime.diff(itemTime.startOf('d'), 'day')
           return (
             <div key={item.id} className="time-item-content time-item-has-line">
               <div className="time-item-label time-item-label-has-line">
@@ -107,9 +107,9 @@ function TimeLineList<T>({
     return dataMap.map(t =>
       t.map((item, i) => {
         const itemTime = dayjs(item?.[dataField])
-        const currentTime = dayjs()
+        const currentTime = dayjs().startOf('d')
         if (itemTime && currentTime) {
-          const renderTime = currentTime.diff(itemTime, 'day')
+          const renderTime = currentTime.diff(itemTime.startOf('d'), 'day')
           return (
             <div
               key={item.id}