feffery_antd_components 0.4.4 → 0.4.5

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

@@ -15,18 +15,19 @@ import FormContext from '../../contexts/FormContext';
 // 状态管理
 import useFormStore from '../../store/formStore';
 // 参数类型
-import { propTypes, defaultProps } from '../../components/dataEntry/AntdTreeSelect.react';
+import {
+    propTypes,
+    defaultProps,
+} from '../../components/dataEntry/AntdTreeSelect.react';
 
 const { SHOW_ALL, SHOW_CHILD, SHOW_PARENT } = TreeSelect;
 
 // 定义勾选项回填策略映射字典
-const str2ShowCheckedStrategy = new Map(
-    [
-        ['show-all', SHOW_ALL],
-        ['show-child', SHOW_CHILD],
-        ['show-parent', SHOW_PARENT]
-    ]
-)
+const str2ShowCheckedStrategy = new Map([
+    ['show-all', SHOW_ALL],
+    ['show-child', SHOW_CHILD],
+    ['show-parent', SHOW_PARENT],
+]);
 
 // 递归替换originTreeData中节点的title为treeNodeKeyToTitle中对应的值
 const replaceNodeTitle = (originTreeData, treeNodeKeyToTitle) => {
@@ -35,7 +36,10 @@ const replaceNodeTitle = (originTreeData, treeNodeKeyToTitle) => {
         // 遍历originTreeData
         for (let i = 0; i < originTreeData.length; i++) {
             // 递归替换originTreeData中节点的title为treeNodeKeyToTitle中对应的值
-            originTreeData[i] = replaceNodeTitle(originTreeData[i], treeNodeKeyToTitle);
+            originTreeData[i] = replaceNodeTitle(
+                originTreeData[i],
+                treeNodeKeyToTitle
+            );
         }
     } else {
         // 否则针对当前节点对象，当treeNodeKeyToTitle中存在对应key时，替换title
@@ -45,12 +49,15 @@ const replaceNodeTitle = (originTreeData, treeNodeKeyToTitle) => {
         // 若当前节点对象存在children属性
         if (originTreeData.children) {
             // 递归替换originTreeData中节点的title为treeNodeKeyToTitle中对应的值
-            originTreeData.children = replaceNodeTitle(originTreeData.children, treeNodeKeyToTitle);
+            originTreeData.children = replaceNodeTitle(
+                originTreeData.children,
+                treeNodeKeyToTitle
+            );
         }
     }
     // 返回处理后的originTreeData
     return originTreeData;
-}
+};
 
 /**
  * 树选择组件AntdTreeSelect
@@ -119,31 +126,33 @@ const AntdTreeSelect = (props) => {
         if (dataLoading.current) {
             dataLoading.current = false;
         }
-    }, [treeData])
+    }, [treeData]);
 
     // 批属性监听
     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(() => {
@@ -151,23 +160,23 @@ const AntdTreeSelect = (props) => {
             // 若上文中存在有效表单id
             if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
-                deleteItemValue(formId, name || id)
+                deleteItemValue(formId, name || id);
             }
-        }
-    }, [name, id])
+        };
+    }, [name, id]);
 
     useEffect(() => {
         if (!value && defaultValue) {
-            setProps({ value: defaultValue })
+            setProps({ value: defaultValue });
         }
         if (!treeExpandedKeys && treeDefaultExpandedKeys) {
-            setProps({ treeExpandedKeys: treeDefaultExpandedKeys })
+            setProps({ treeExpandedKeys: treeDefaultExpandedKeys });
         }
-    }, [])
+    }, []);
 
     const flatToTreeData = useMemo(() => {
         return flatToTree(treeData);
-    }, [treeData])
+    }, [treeData]);
 
     // 用于获取用户已选择值的回调函数
     const updateSelectedValue = (e) => {
@@ -175,66 +184,75 @@ const AntdTreeSelect = (props) => {
             // AntdForm表单批量控制
             if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
-                updateItemValue(formId, name || id, e.map(item => item.value))
+                updateItemValue(
+                    formId,
+                    name || id,
+                    e.map((item) => item.value)
+                );
             }
-            setProps({ value: e.map(item => item.value) })
+            setProps({ value: e.map((item) => item.value) });
         } else {
             // AntdForm表单批量控制
             if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
-                updateItemValue(formId, name || id, e)
+                updateItemValue(formId, name || id, e);
             }
-            setProps({ value: e })
+            setProps({ value: e });
         }
-    }
+    };
 
     return (
         <ConfigProvider locale={str2Locale.get(locale)}>
             <TreeSelect
                 // 提取具有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={{
                     width: '100%',
-                    ...style
+                    ...style,
                 }}
                 popupClassName={popupClassName}
                 key={key}
                 treeData={
-                    treeNodeKeyToTitle ?
-                        (
-                            replaceNodeTitle(
-                                cloneDeep(treeDataMode === 'flat' ? flatToTreeData : treeData),
-                                treeNodeKeyToTitle
-                            )
-                        ) :
-                        (
-                            treeDataMode === 'flat' ? flatToTreeData : treeData
-                        )
+                    treeNodeKeyToTitle
+                        ? replaceNodeTitle(
+                              cloneDeep(
+                                  treeDataMode === 'flat'
+                                      ? flatToTreeData
+                                      : treeData
+                              ),
+                              treeNodeKeyToTitle
+                          )
+                        : treeDataMode === 'flat'
+                          ? flatToTreeData
+                          : treeData
                 }
                 allowClear={isUndefined(readOnly) ? allowClear : !readOnly}
-                variant={(
-                    !variant ?
-                        (bordered ? 'outlined' : 'borderless') :
-                        variant
-                )}
+                variant={
+                    !variant ? (bordered ? 'outlined' : 'borderless') : variant
+                }
                 treeLine={treeLine}
                 listHeight={listHeight}
                 placeholder={placeholder}
                 defaultValue={
-                    formId && (name || id) && enableBatchControl ?
-                        undefined :
-                        defaultValue
+                    formId && (name || id) && enableBatchControl
+                        ? undefined
+                        : defaultValue
                 }
                 value={
-                    formId && (name || id) && enableBatchControl ?
-                        currentFormValue :
-                        value
+                    formId && (name || id) && enableBatchControl
+                        ? currentFormValue
+                        : value
                 }
                 maxCount={maxCount}
                 maxTagCount={maxTagCount}
@@ -242,15 +260,17 @@ const AntdTreeSelect = (props) => {
                 maxTagTextLength={maxTagTextLength}
                 multiple={multiple}
                 size={
-                    context && !isUndefined(context.componentSize) ?
-                        context.componentSize :
-                        size
+                    context && !isUndefined(context.componentSize)
+                        ? context.componentSize
+                        : size
                 }
                 prefix={prefix}
                 suffixIcon={suffixIcon}
                 switcherIcon={switcherIcon}
                 treeCheckable={treeCheckable}
-                showCheckedStrategy={str2ShowCheckedStrategy.get(showCheckedStrategy)}
+                showCheckedStrategy={str2ShowCheckedStrategy.get(
+                    showCheckedStrategy
+                )}
                 treeCheckStrictly={treeCheckStrictly}
                 treeDefaultExpandAll={treeDefaultExpandAll}
                 treeDefaultExpandedKeys={treeDefaultExpandedKeys}
@@ -259,98 +279,97 @@ const AntdTreeSelect = (props) => {
                 showSearch={readOnly ? false : true}
                 virtual={virtual}
                 disabled={
-                    context && !isUndefined(context.componentDisabled) ?
-                        context.componentDisabled :
-                        disabled
+                    context && !isUndefined(context.componentDisabled)
+                        ? context.componentDisabled
+                        : disabled
                 }
                 placement={placement}
                 status={status}
                 treeNodeFilterProp={treeNodeFilterProp}
-                filterTreeNode={
-                    (inputValue, treeNode) => {
-                        // 处理''特殊情况
-                        inputValue = inputValue || ''
-                        if (inputValue !== '') {
-                            if (treeNodeFilterMode === 'case-insensitive') {
-                                // 进行大小写不敏感筛选
-                                return (treeNode[treeNodeFilterProp] || '').toLowerCase()
-                                    .includes(inputValue.toLowerCase())
-                            } else if (treeNodeFilterMode === 'case-sensitive') {
-                                // 判断输入的内容是否是当前选项筛选依据字段值的子串
-                                return treeNode[treeNodeFilterProp].includes(inputValue)
-                            } else if (treeNodeFilterMode === 'regex') {
-                                // 判断输入的正则规则是否匹配当前选项筛选依据字段值
-                                try {
-                                    // 尝试进行正则匹配
-                                    return eval(`/${inputValue}/`).test(treeNode[treeNodeFilterProp])
-                                } catch {
-                                    // 忽略非法的正则表达式
-                                    return false
-                                }
+                filterTreeNode={(inputValue, treeNode) => {
+                    // 处理''特殊情况
+                    inputValue = inputValue || '';
+                    if (inputValue !== '') {
+                        if (treeNodeFilterMode === 'case-insensitive') {
+                            // 进行大小写不敏感筛选
+                            return (treeNode[treeNodeFilterProp] || '')
+                                .toLowerCase()
+                                .includes(inputValue.toLowerCase());
+                        } else if (treeNodeFilterMode === 'case-sensitive') {
+                            // 判断输入的内容是否是当前选项筛选依据字段值的子串
+                            return treeNode[treeNodeFilterProp].includes(
+                                inputValue
+                            );
+                        } else if (treeNodeFilterMode === 'regex') {
+                            // 判断输入的正则规则是否匹配当前选项筛选依据字段值
+                            try {
+                                // 尝试进行正则匹配
+                                return eval(`/${inputValue}/`).test(
+                                    treeNode[treeNodeFilterProp]
+                                );
+                            } catch {
+                                // 忽略非法的正则表达式
+                                return false;
                             }
                         }
-                        return false
                     }
-                }
+                    return false;
+                }}
                 autoClearSearchValue={autoClearSearchValue}
                 dropdownRender={
-                    (dropdownBefore || dropdownAfter) ?
-                        (menu) => {
-                            return (
-                                <>
-                                    {dropdownBefore}
-                                    {menu}
-                                    {dropdownAfter}
-                                </>
-                            );
-                        } : undefined
+                    dropdownBefore || dropdownAfter
+                        ? (menu) => {
+                              return (
+                                  <>
+                                      {dropdownBefore}
+                                      {menu}
+                                      {dropdownAfter}
+                                  </>
+                              );
+                          }
+                        : undefined
                 }
                 onTreeExpand={(e) => {
-                    setProps({ treeExpandedKeys: e })
+                    setProps({ treeExpandedKeys: e });
                 }}
                 data-dash-is-loading={useLoading()}
                 getPopupContainer={
-                    popupContainer === 'parent' ?
-                        (triggerNode) => triggerNode.parentNode :
-                        undefined
+                    popupContainer === 'parent'
+                        ? (triggerNode) => triggerNode.parentNode
+                        : undefined
                 }
                 open={isUndefined(readOnly) || !readOnly ? undefined : false}
                 loadData={
-                    enableAsyncLoad ?
-                        (node) => {
-                            // 更新最新的异步加载数据目标节点
-                            setProps({
-                                loadingNode: {
-                                    key: node.key,
-                                    title: node.title,
-                                    value: node.value
-                                }
-                            })
-                            return new Promise(
-                                (resolve) => {
-                                    // 更新数据异步加载标识
-                                    dataLoading.current = true;
-                                    // 轮询检测是否加载完成
-                                    const timer = setInterval(
-                                        () => {
-                                            if (!dataLoading.current) {
-                                                clearInterval(timer);
-                                                resolve();
-                                            }
-                                        },
-                                        200
-                                    );
-                                }
-                            )
-                        } :
-                        undefined
+                    enableAsyncLoad
+                        ? (node) => {
+                              // 更新最新的异步加载数据目标节点
+                              setProps({
+                                  loadingNode: {
+                                      key: node.key,
+                                      title: node.title,
+                                      value: node.value,
+                                  },
+                              });
+                              return new Promise((resolve) => {
+                                  // 更新数据异步加载标识
+                                  dataLoading.current = true;
+                                  // 轮询检测是否加载完成
+                                  const timer = setInterval(() => {
+                                      if (!dataLoading.current) {
+                                          clearInterval(timer);
+                                          resolve();
+                                      }
+                                  }, 200);
+                              });
+                          }
+                        : undefined
                 }
             />
         </ConfigProvider>
     );
-}
+};
 
 export default AntdTreeSelect;
 
 AntdTreeSelect.defaultProps = defaultProps;
-AntdTreeSelect.propTypes = propTypes;
+AntdTreeSelect.propTypes = propTypes;

package/src/lib/fragments/dataEntry/check-card/AntdCheckCard.react.js

@@ -14,13 +14,16 @@ import FormContext from '../../../contexts/FormContext';
 // 状态管理
 import useFormStore from '../../../store/formStore';
 // 参数类型
-import { propTypes, defaultProps } from '../../../components/dataEntry/check-card/AntdCheckCard.react';
+import {
+    propTypes,
+    defaultProps,
+} from '../../../components/dataEntry/check-card/AntdCheckCard.react';
 
 /**
  * 选择卡片组件AntdCheckCard
  */
 const AntdCheckCard = (props) => {
-    let {
+    const {
         id,
         children,
         className,
@@ -42,20 +45,20 @@ const AntdCheckCard = (props) => {
         ...others
     } = props;
 
-    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);
 
     // 处理AntdForm表单值搜集功能
     useEffect(() => {
         // 若上文中存在有效表单id
         if (formId && (name || id) && enableBatchControl) {
             // 表单值更新
-            updateItemValue(formId, name || id, checked)
+            updateItemValue(formId, name || id, checked);
         }
-    }, [checked, name, id])
+    }, [checked, name, id]);
 
     // 处理组件卸载后，对应表单项值的清除
     useEffect(() => {
@@ -63,26 +66,31 @@ const AntdCheckCard = (props) => {
             // 若上文中存在有效表单id
             if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
-                deleteItemValue(formId, name || id)
+                deleteItemValue(formId, name || id);
             }
-        }
-    }, [name, id])
+        };
+    }, [name, id]);
 
     useEffect(() => {
         if (!isUndefined(defaultChecked) && isUndefined(checked)) {
-            setProps({ checked: defaultChecked })
+            setProps({ checked: defaultChecked });
         }
-    }, [])
+    }, []);
 
     return (
         <CheckCard
             // 提取具有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}
             key={key}
@@ -92,21 +100,22 @@ const AntdCheckCard = (props) => {
             value={value}
             defaultChecked={defaultChecked}
             disabled={
-                context && !isUndefined(context.componentDisabled) ?
-                    context.componentDisabled :
-                    disabled
+                context && !isUndefined(context.componentDisabled)
+                    ? context.componentDisabled
+                    : disabled
             }
             size={size}
-            onChange={e => {
+            onChange={(e) => {
                 if (!readOnly) {
-                    setProps({ checked: e })
+                    setProps({ checked: e });
                 }
             }}
-            data-dash-is-loading={useLoading()} />
+            data-dash-is-loading={useLoading()}
+        />
     );
-}
+};
 
 export default AntdCheckCard;
 
 AntdCheckCard.defaultProps = defaultProps;
-AntdCheckCard.propTypes = propTypes;
+AntdCheckCard.propTypes = propTypes;