feffery_antd_components 0.4.4 → 0.4.5

package/src/lib/fragments/dataEntry/AntdDatePicker.react.js

@@ -21,13 +21,16 @@ import FormContext from '../../contexts/FormContext';
 // 状态管理
 import useFormStore from '../../store/formStore';
 // 参数类型
-import { propTypes, defaultProps } from '../../components/dataEntry/AntdDatePicker.react';
+import {
+    propTypes,
+    defaultProps,
+} from '../../components/dataEntry/AntdDatePicker.react';
 
 // 调用dayjs额外插件模块
-dayjs.extend(isoWeek)
-dayjs.extend(advancedFormat)
-dayjs.extend(isSameOrAfter)
-dayjs.extend(isSameOrBefore)
+dayjs.extend(isoWeek);
+dayjs.extend(advancedFormat);
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
 
 /**
  * 日期选择组件AntdDatePicker
@@ -93,31 +96,33 @@ const AntdDatePicker = (props) => {
                 setRawValue(null);
             }
         }
-    }, [value, currentFormValue])
+    }, [value, currentFormValue]);
 
     // 批属性监听
     useEffect(() => {
         if (batchPropsNames && batchPropsNames.length !== 0) {
-            let _batchPropsValues = {};
-            for (let propName of batchPropsNames) {
+            const _batchPropsValues = {};
+            for (const propName of batchPropsNames) {
                 _batchPropsValues[propName] = props[propName];
             }
             setProps({
-                batchPropsValues: _batchPropsValues
-            })
+                batchPropsValues: _batchPropsValues,
+            });
         }
-    })
+    });
 
-    const context = useContext(PropsContext)
-    const formId = useContext(FormContext)
+    const context = useContext(PropsContext);
+    const formId = useContext(FormContext);
 
-    const updateItemValue = useFormStore((state) => state.updateItemValue)
-    const deleteItemValue = useFormStore((state) => state.deleteItemValue)
+    const updateItemValue = useFormStore((state) => state.updateItemValue);
+    const deleteItemValue = useFormStore((state) => state.deleteItemValue);
 
-    locale = (context && context.locale) || locale
+    locale = (context && context.locale) || locale;
 
     // 收集当前组件相关表单值
-    const currentFormValue = useFormStore(state => state.values?.[formId]?.[name || id])
+    const currentFormValue = useFormStore(
+        (state) => state.values?.[formId]?.[name || id]
+    );
 
     // 处理组件卸载后，对应表单项值的清除
     useEffect(() => {
@@ -125,68 +130,66 @@ const AntdDatePicker = (props) => {
             // 若上文中存在有效表单id
             if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
-                deleteItemValue(formId, name || id)
+                deleteItemValue(formId, name || id);
             }
-        }
-    }, [name, id])
+        };
+    }, [name, id]);
 
     useEffect(() => {
         // 初始化value
         if (defaultValue && !value) {
             // 当defaultValue不为空且value为空时，为value初始化defaultValue对应值
-            setProps({ value: defaultValue })
+            setProps({ value: defaultValue });
         }
 
         // 调整不同showTime下的format缺省参数
         if (showTime && !format) {
             setProps({
-                format: 'YYYY-MM-DD HH:mm:ss'
-            })
+                format: 'YYYY-MM-DD HH:mm:ss',
+            });
         } else if (!showTime && !format) {
             setProps({
-                format: 'YYYY-MM-DD'
-            })
+                format: 'YYYY-MM-DD',
+            });
         }
 
         // 处理pickerValue缺省赋值
         if (!pickerValue) {
             setProps({
-                pickerValue: dayjs(new Date()).format(format || (showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'))
-            })
+                pickerValue: dayjs(new Date()).format(
+                    format || (showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')
+                ),
+            });
         }
-    }, [])
+    }, []);
 
     useEffect(() => {
         if (!isUndefined(firstDayOfWeek)) {
-            dayjs.locale(
-                locale === 'en-us' ? 'en' : locale,
-                {
-                    week: {
-                        dow: firstDayOfWeek
-                    }
-                }
-            )
+            dayjs.locale(locale === 'en-us' ? 'en' : locale, {
+                week: {
+                    dow: firstDayOfWeek,
+                },
+            });
         }
-    }, [firstDayOfWeek])
+    }, [firstDayOfWeek]);
 
     const onChange = (date, dateString) => {
         if (isString(dateString)) {
             // AntdForm表单批量控制
             if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
-                updateItemValue(formId, name || id, dateString)
+                updateItemValue(formId, name || id, dateString);
             }
             // 更新rawValue
             setRawValue(date);
-            setProps({ value: dateString })
+            setProps({ value: dateString });
         }
-    }
-
-    const checkDisabledDate = current => {
+    };
 
+    const checkDisabledDate = (current) => {
         // 根据disabledDatesStrategy设定的各个子条件进行是否禁用判断
         for (let i = 0; i < disabledDatesStrategy.length; i++) {
-            let strategy = disabledDatesStrategy[i];
+            const strategy = disabledDatesStrategy[i];
             // 判断当前子策略方式
             if (strategy.mode === 'eq') {
                 // 判断当前子策略约束目标
@@ -277,7 +280,11 @@ const AntdDatePicker = (props) => {
                         return true;
                     }
                 } else if (strategy.target === 'specific-date') {
-                    if (current.isSameOrBefore(dayjs(strategy.value, 'YYYY-MM-DD'))) {
+                    if (
+                        current.isSameOrBefore(
+                            dayjs(strategy.value, 'YYYY-MM-DD')
+                        )
+                    ) {
                         return true;
                     }
                 }
@@ -339,7 +346,11 @@ const AntdDatePicker = (props) => {
                         return true;
                     }
                 } else if (strategy.target === 'specific-date') {
-                    if (current.isSameOrAfter(dayjs(strategy.value, 'YYYY-MM-DD'))) {
+                    if (
+                        current.isSameOrAfter(
+                            dayjs(strategy.value, 'YYYY-MM-DD')
+                        )
+                    ) {
                         return true;
                     }
                 }
@@ -438,21 +449,25 @@ const AntdDatePicker = (props) => {
                 }
             }
         }
-    }
+    };
 
     return (
         <div>
-            <ConfigProvider
-                locale={str2Locale.get(locale)}
-            >
+            <ConfigProvider locale={str2Locale.get(locale)}>
                 <DatePicker
                     // 提取具有data-*或aria-*通配格式的属性
-                    {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
+                    {...pickBy(
+                        (_, k) =>
+                            k.startsWith('data-') || k.startsWith('aria-'),
+                        others
+                    )}
                     id={id}
                     className={
-                        isString(className) ?
-                            className :
-                            (className ? useCss(className) : undefined)
+                        isString(className)
+                            ? className
+                            : className
+                              ? useCss(className)
+                              : undefined
                     }
                     style={style}
                     popupClassName={popupClassName}
@@ -461,127 +476,148 @@ const AntdDatePicker = (props) => {
                     onChange={onChange}
                     onPanelChange={(v, m) => {
                         setProps({
-                            pickerValue: v.format(format)
-                        })
+                            pickerValue: v.format(format),
+                        });
                     }}
                     picker={picker}
                     calendarStartDay={firstDayOfWeek}
                     disabled={
-                        context && !isUndefined(context.componentDisabled) ?
-                            context.componentDisabled :
-                            disabled
+                        context && !isUndefined(context.componentDisabled)
+                            ? context.componentDisabled
+                            : disabled
                     }
                     placeholder={placeholder}
-                    variant={(
-                        !variant ?
-                            (bordered ? 'outlined' : 'borderless') :
-                            variant
-                    )}
+                    variant={
+                        !variant
+                            ? bordered
+                                ? 'outlined'
+                                : 'borderless'
+                            : variant
+                    }
                     size={
-                        context && !isUndefined(context.componentSize) ?
-                            context.componentSize :
-                            size
+                        context && !isUndefined(context.componentSize)
+                            ? context.componentSize
+                            : size
+                    }
+                    disabledDate={
+                        disabledDatesStrategy ? checkDisabledDate : undefined
                     }
-                    disabledDate={disabledDatesStrategy ? checkDisabledDate : undefined}
                     pickerValue={pickerValue && dayjs(pickerValue, format)}
                     value={
-                        formId && (name || id) && enableBatchControl ?
-                            (currentFormValue ? dayjs(currentFormValue, format) : undefined) :
-                            (rawValue || (value ? dayjs(value, format) : undefined))
+                        formId && (name || id) && enableBatchControl
+                            ? currentFormValue
+                                ? dayjs(currentFormValue, format)
+                                : undefined
+                            : rawValue ||
+                              (value ? dayjs(value, format) : undefined)
                     }
                     defaultValue={
-                        formId && (name || id) && enableBatchControl ?
-                            undefined :
-                            (defaultValue ? dayjs(defaultValue, format) : undefined)
+                        formId && (name || id) && enableBatchControl
+                            ? undefined
+                            : defaultValue
+                              ? dayjs(defaultValue, format)
+                              : undefined
                     }
                     showTime={
                         // 处理时间选择面板在日期选定后的默认选中值
-                        isObject(showTime) && showTime.defaultValue ?
-                            {
-                                defaultValue: dayjs(
-                                    dayjs(new Date()).format('YYYY-MM-DD') + ' ' + showTime.defaultValue,
-                                    'YYYY-MM-DD' + ' ' + (showTime.format || 'HH:mm:ss')
-                                )
-                            } :
-                            showTime
+                        isObject(showTime) && showTime.defaultValue
+                            ? {
+                                  defaultValue: dayjs(
+                                      dayjs(new Date()).format('YYYY-MM-DD') +
+                                          ' ' +
+                                          showTime.defaultValue,
+                                      'YYYY-MM-DD' +
+                                          ' ' +
+                                          (showTime.format || 'HH:mm:ss')
+                                  ),
+                              }
+                            : showTime
                     }
                     allowClear={isUndefined(readOnly) ? allowClear : !readOnly}
                     autoFocus={autoFocus}
                     status={status}
                     placement={placement}
-                    open={isUndefined(readOnly) || !readOnly ? undefined : false}
+                    open={
+                        isUndefined(readOnly) || !readOnly ? undefined : false
+                    }
                     inputReadOnly={readOnly}
                     renderExtraFooter={() => extraFooter}
                     showNow={showToday}
                     needConfirm={needConfirm}
                     presets={
                         // 处理预设快捷选项列表
-                        (presets || []).map(
-                            (preset) => ({
-                                label: preset.label,
-                                value: () => {
-                                    return dayjs(preset.value, format)
-                                }
-                            })
-                        )
+                        (presets || []).map((preset) => ({
+                            label: preset.label,
+                            value: () => {
+                                return dayjs(preset.value, format);
+                            },
+                        }))
                     }
                     cellRender={
-                        customCells ?
-                            (current, info) => {
-                                // 尝试搜索命中项
-                                let matchCell;
-                                // 目前仅作用于日期类型
-                                if (info.type === 'date') {
-                                    matchCell = customCells.filter(item => {
-                                        // 初始化基础条件
-                                        let conditions = true
-                                        // 若具有明确年份
-                                        if (item.year) {
-                                            conditions = conditions && current.year() === item.year
-                                        }
-                                        // 若具有明确月份
-                                        if (item.month) {
-                                            conditions = conditions && current.month() + 1 === item.month
-                                        }
-                                        // 若具有明确日期
-                                        if (item.date) {
-                                            conditions = conditions && current.date() === item.date
-                                        }
-                                        return conditions;
-                                    });
-                                }
-                                if (matchCell.length > 0) {
-                                    return (
-                                        <div className={
-                                            matchCell[0].className ?
-                                                `ant-picker-cell-inner ${matchCell[0].className}` :
-                                                'ant-picker-cell-inner'
-                                        }
-                                            style={matchCell[0].style}
-                                        >
-                                            {current.date()}
-                                        </div>
-                                    );
-                                }
-                                return info.originNode;
-                            } :
-                            undefined
+                        customCells
+                            ? (current, info) => {
+                                  // 尝试搜索命中项
+                                  let matchCell;
+                                  // 目前仅作用于日期类型
+                                  if (info.type === 'date') {
+                                      matchCell = customCells.filter((item) => {
+                                          // 初始化基础条件
+                                          let conditions = true;
+                                          // 若具有明确年份
+                                          if (item.year) {
+                                              conditions =
+                                                  conditions &&
+                                                  current.year() === item.year;
+                                          }
+                                          // 若具有明确月份
+                                          if (item.month) {
+                                              conditions =
+                                                  conditions &&
+                                                  current.month() + 1 ===
+                                                      item.month;
+                                          }
+                                          // 若具有明确日期
+                                          if (item.date) {
+                                              conditions =
+                                                  conditions &&
+                                                  current.date() === item.date;
+                                          }
+                                          return conditions;
+                                      });
+                                  }
+                                  if (matchCell.length > 0) {
+                                      return (
+                                          <div
+                                              className={
+                                                  matchCell[0].className
+                                                      ? `ant-picker-cell-inner ${matchCell[0].className}`
+                                                      : 'ant-picker-cell-inner'
+                                              }
+                                              style={matchCell[0].style}
+                                          >
+                                              {current.date()}
+                                          </div>
+                                      );
+                                  }
+                                  return info.originNode;
+                              }
+                            : undefined
                     }
                     prefix={prefix}
                     suffixIcon={suffixIcon}
                     data-dash-is-loading={useLoading()}
                     getPopupContainer={
-                        popupContainer === 'parent' ?
-                            (triggerNode) => triggerNode.parentNode :
-                            undefined
+                        popupContainer === 'parent'
+                            ? (triggerNode) => triggerNode.parentNode
+                            : undefined
                     }
                 />
             </ConfigProvider>
         </div>
     );
-}
+};
 
 export default AntdDatePicker;
 
 AntdDatePicker.defaultProps = defaultProps;
-AntdDatePicker.propTypes = propTypes;
+AntdDatePicker.propTypes = propTypes;