feffery_antd_components 0.4.4 → 0.4.5

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

@@ -14,7 +14,10 @@ import FormContext from '../../../contexts/FormContext';
 // 状态管理
 import useFormStore from '../../../store/formStore';
 // 参数类型
-import { propTypes, defaultProps } from '../../../components/dataEntry/check-card/AntdCheckCardGroup.react';
+import {
+    propTypes,
+    defaultProps,
+} from '../../../components/dataEntry/check-card/AntdCheckCardGroup.react';
 
 /**
  * 组合选择卡片组件AntdCheckCardGroup
@@ -43,20 +46,20 @@ const AntdCheckCardGroup = (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, value)
+            updateItemValue(formId, name || id, value);
         }
-    }, [value, name, id])
+    }, [value, name, id]);
 
     // 处理组件卸载后，对应表单项值的清除
     useEffect(() => {
@@ -64,28 +67,33 @@ const AntdCheckCardGroup = (props) => {
             // 若上文中存在有效表单id
             if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
-                deleteItemValue(formId, name || id)
+                deleteItemValue(formId, name || id);
             }
-        }
-    }, [name, id])
+        };
+    }, [name, id]);
 
     useEffect(() => {
         if (defaultValue && !value) {
-            setProps({ value: defaultValue })
+            setProps({ value: defaultValue });
         }
-    }, [])
+    }, []);
 
-    children = parseChildrenToArray(children)
+    children = parseChildrenToArray(children);
 
     return (
         <CheckCard.Group
             // 提取具有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}
@@ -94,30 +102,31 @@ const AntdCheckCardGroup = (props) => {
             value={value}
             defaultValue={defaultValue}
             disabled={
-                context && !isUndefined(context.componentDisabled) ?
-                    context.componentDisabled :
-                    disabled
+                context && !isUndefined(context.componentDisabled)
+                    ? context.componentDisabled
+                    : disabled
             }
             size={size}
             onChange={(e) => {
                 // 只读模式下不进行值更新
                 if (!readOnly) {
                     if (allowNoValue) {
-                        setProps({ value: e })
+                        setProps({ value: e });
                     } else {
                         if (e && e.length !== 0) {
-                            setProps({ value: e })
+                            setProps({ value: e });
                         }
                     }
                 }
             }}
-            data-dash-is-loading={useLoading()} >
+            data-dash-is-loading={useLoading()}
+        >
             {children}
-        </ CheckCard.Group>
+        </CheckCard.Group>
     );
-}
+};
 
 export default AntdCheckCardGroup;
 
 AntdCheckCardGroup.defaultProps = defaultProps;
-AntdCheckCardGroup.propTypes = propTypes;
+AntdCheckCardGroup.propTypes = propTypes;

package/src/lib/fragments/dataEntry/form/AntdForm.react.js

@@ -14,13 +14,16 @@ import FormContext from '../../../contexts/FormContext';
 // 状态管理
 import useFormStore from '../../../store/formStore';
 // 参数类型
-import { propTypes, defaultProps } from '../../../components/dataEntry/form/AntdForm.react';
+import {
+    propTypes,
+    defaultProps,
+} from '../../../components/dataEntry/form/AntdForm.react';
 
 /**
  * 表单组件AntdForm
  */
 const AntdForm = (props) => {
-    let {
+    const {
         id,
         children,
         className,
@@ -42,12 +45,14 @@ const AntdForm = (props) => {
     } = props;
 
     // 订阅当前表单值搜集状态的变动
-    const _values = useFormStore((state) => state.values[id])
+    const _values = useFormStore((state) => state.values[id]);
 
-    const updateFormValues = useFormStore((state) => state.updateFormValues)
-    const updateValidateStatuses = useFormStore((state) => state.updateValidateStatuses)
-    const updateHelps = useFormStore((state) => state.updateHelps)
-    const updateTooltips = useFormStore((state) => state.updateTooltips)
+    const updateFormValues = useFormStore((state) => state.updateFormValues);
+    const updateValidateStatuses = useFormStore(
+        (state) => state.updateValidateStatuses
+    );
+    const updateHelps = useFormStore((state) => state.updateHelps);
+    const updateTooltips = useFormStore((state) => state.updateTooltips);
 
     // 调试用
     // console.log('='.repeat(50))
@@ -57,54 +62,62 @@ const AntdForm = (props) => {
     useUnmount(() => {
         // 处理内存泄漏及相关的其他问题
         if (enableBatchControl && id) {
-            updateFormValues(id, undefined)
+            updateFormValues(id, undefined);
         }
-    })
+    });
 
     // _values状态响应value变化
     useEffect(() => {
         if (enableBatchControl && id) {
-            updateFormValues(id, values)
+            updateFormValues(id, values);
         }
-    }, [values])
+    }, [values]);
 
     // value响应_value状态变化
     useEffect(() => {
-        if (enableBatchControl && id && !isUndefined(_values) && !isEmpty(_values)) {
-            setProps({ values: _values })
+        if (
+            enableBatchControl &&
+            id &&
+            !isUndefined(_values) &&
+            !isEmpty(_values)
+        ) {
+            setProps({ values: _values });
         }
-    }, [_values])
+    }, [_values]);
 
     useEffect(() => {
         if (enableBatchControl && id) {
-            updateValidateStatuses(id, validateStatuses || {})
+            updateValidateStatuses(id, validateStatuses || {});
         }
-    }, [validateStatuses])
+    }, [validateStatuses]);
 
     useEffect(() => {
         if (enableBatchControl && id) {
-            updateHelps(id, helps || {})
+            updateHelps(id, helps || {});
         }
-    }, [helps])
+    }, [helps]);
 
     useEffect(() => {
         if (enableBatchControl && id) {
-            updateTooltips(id, tooltips || {})
+            updateTooltips(id, tooltips || {});
         }
-    }, [tooltips])
+    }, [tooltips]);
 
     return (
-        <FormContext.Provider
-            value={enableBatchControl ? id : null}
-        >
+        <FormContext.Provider value={enableBatchControl ? id : null}>
             <Form
                 // 提取具有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}
@@ -114,14 +127,15 @@ const AntdForm = (props) => {
                 labelAlign={labelAlign}
                 labelWrap={labelWrap}
                 layout={layout}
-                data-dash-is-loading={useLoading()}>
+                data-dash-is-loading={useLoading()}
+            >
                 {children}
             </Form>
-        </FormContext.Provider >
+        </FormContext.Provider>
     );
-}
+};
 
 export default AntdForm;
 
 AntdForm.defaultProps = defaultProps;
-AntdForm.propTypes = propTypes;
+AntdForm.propTypes = propTypes;

package/src/lib/fragments/dataEntry/form/AntdFormItem.react.js

@@ -13,7 +13,10 @@ import FormContext from '../../../contexts/FormContext';
 // 状态管理
 import useFormStore from '../../../store/formStore';
 // 参数类型
-import { propTypes, defaultProps } from '../../../components/dataEntry/form/AntdFormItem.react';
+import {
+    propTypes,
+    defaultProps,
+} from '../../../components/dataEntry/form/AntdFormItem.react';
 
 const { Item } = Form;
 
@@ -21,7 +24,7 @@ const { Item } = Form;
  * 表单项组件AntdFormItem
  */
 const AntdFormItem = (props) => {
-    let {
+    const {
         id,
         children,
         className,
@@ -45,19 +48,26 @@ const AntdFormItem = (props) => {
     } = props;
 
     const formId = useContext(FormContext);
-    const _validateStatus = useFormStore((state) => state.validateStatuses?.[formId]?.[label]);
+    const _validateStatus = useFormStore(
+        (state) => state.validateStatuses?.[formId]?.[label]
+    );
     const _help = useFormStore((state) => state.helps?.[formId]?.[label]);
     const _tooltip = useFormStore((state) => state.tooltips?.[formId]?.[label]);
 
     return (
         <Item
             // 提取具有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}
@@ -74,13 +84,14 @@ const AntdFormItem = (props) => {
             required={required}
             validateStatus={validateStatus || (formId && _validateStatus)}
             layout={layout}
-            data-dash-is-loading={useLoading()}>
+            data-dash-is-loading={useLoading()}
+        >
             {children}
         </Item>
     );
-}
+};
 
 export default React.memo(AntdFormItem);
 
 AntdFormItem.defaultProps = defaultProps;
-AntdFormItem.propTypes = propTypes;
+AntdFormItem.propTypes = propTypes;

package/src/lib/fragments/formRender/AntdFormRender.react.js

@@ -3,13 +3,15 @@ import FormRender, { useForm } from 'form-render';
 import { Cascader } from 'antd';
 import { isString } from 'lodash';
 import useCss from '../../hooks/useCss';
-import { propTypes, defaultProps } from '../../components/formRender/AntdFormRender.react';
-
+import {
+    propTypes,
+    defaultProps,
+} from '../../components/formRender/AntdFormRender.react';
 
 // 定义表单生成组件AntdFormRender，api参数参考https://xrender.fun/form-render/api-props
 const AntdFormRender = (props) => {
     // 取得必要属性或参数
-    let {
+    const {
         id,
         className,
         style,
@@ -40,11 +42,11 @@ const AntdFormRender = (props) => {
         resetForm,
         resetFormClicks,
         setProps,
-        loading_state
+        loading_state,
     } = props;
 
     function evalAllValidator(json) {
-        for (let key in json) {
+        for (const key in json) {
             if (typeof json[key] === 'object') {
                 json[key] = evalAllValidator(json[key]);
             } else if (key === 'validator') {
@@ -55,56 +57,48 @@ const AntdFormRender = (props) => {
     }
 
     const cascader = (props) => {
-
-        return (
-            <Cascader
-                {...props}
-                onChange={(e) => props.onChange(e)}
-            />
-        )
-    }
+        return <Cascader {...props} onChange={(e) => props.onChange(e)} />;
+    };
 
     const form = useForm();
 
     const onFinish = (data) => {
-        setProps({ validateStatuses: true })
-        setProps({ values: data })
-    }
+        setProps({ validateStatuses: true });
+        setProps({ values: data });
+    };
 
     const onFinishFailed = (data) => {
-        setProps({ validateStatuses: false })
-        setProps({ values: data.values })
-    }
+        setProps({ validateStatuses: false });
+        setProps({ values: data.values });
+    };
 
     const schemaConfig = useMemo(() => {
         if (schema) {
-            let schemaJson = JSON.parse(JSON.stringify(schema));
+            const schemaJson = JSON.parse(JSON.stringify(schema));
             return evalAllValidator(schemaJson);
         }
     }, [schema]);
 
     const footerConfig = useMemo(() => {
-        if (typeof (footer) == 'boolean') {
-            return footer
-        } else {
-            if ('$$typeof' in footer) {
-                return () => (<>{footer}</>)
-            } else {
-                return {
-                    submit: {
-                        text: footer?.submit?.text,
-                        hide: footer?.submit?.hide,
-                        ...footer?.submit?.btnProps
-                    },
-                    reset: {
-                        text: footer?.reset?.text,
-                        hide: footer?.reset?.hide,
-                        ...footer?.reset?.btnProps
-                    }
-                }
-            }
+        if (typeof footer === 'boolean') {
+            return footer;
+        }
+        if ('$$typeof' in footer) {
+            return () => <>{footer}</>;
         }
-    }, [footer])
+        return {
+            submit: {
+                text: footer?.submit?.text,
+                hide: footer?.submit?.hide,
+                ...footer?.submit?.btnProps,
+            },
+            reset: {
+                text: footer?.reset?.text,
+                hide: footer?.reset?.hide,
+                ...footer?.reset?.btnProps,
+            },
+        };
+    }, [footer]);
 
     const watchConfig = useMemo(() => {
         if (watch) {
@@ -112,11 +106,11 @@ const AntdFormRender = (props) => {
                 Object.entries(watch).map(([key, value]) => [key, eval(value)])
             );
         }
-    }, [watch])
+    }, [watch]);
 
     useEffect(() => {
         form.setValues(values);
-    }, [values])
+    }, [values]);
 
     useEffect(() => {
         if (submitForm) {
@@ -124,7 +118,7 @@ const AntdFormRender = (props) => {
             setProps({ submitFormClicks: submitFormClicks + 1 });
             setProps({ submitForm: false });
         }
-    }, [submitForm])
+    }, [submitForm]);
 
     useEffect(() => {
         if (resetForm) {
@@ -132,16 +126,18 @@ const AntdFormRender = (props) => {
             setProps({ resetFormClicks: resetFormClicks + 1 });
             setProps({ resetForm: false });
         }
-    }, [resetForm])
+    }, [resetForm]);
 
     return (
         <FormRender
             id={id}
             form={form}
             className={
-                isString(className) ?
-                    className :
-                    (className ? useCss(className) : undefined)
+                isString(className)
+                    ? className
+                    : className
+                      ? useCss(className)
+                      : undefined
             }
             style={style}
             key={key}
@@ -172,9 +168,9 @@ const AntdFormRender = (props) => {
             }
         />
     );
-}
+};
 
 export default React.memo(AntdFormRender);
 
 AntdFormRender.defaultProps = defaultProps;
-AntdFormRender.propTypes = propTypes;
+AntdFormRender.propTypes = propTypes;