feffery_antd_components 0.4.3 → 0.4.5

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

@@ -16,7 +16,10 @@ import FormContext from '../../contexts/FormContext';
 // 状态管理
 import useFormStore from '../../store/formStore';
 // 参数类型
-import { propTypes, defaultProps } from '../../components/dataEntry/AntdInput.react';
+import {
+    propTypes,
+    defaultProps,
+} from '../../components/dataEntry/AntdInput.react';
 
 const { Search, TextArea } = Input;
 
@@ -24,7 +27,7 @@ const { Search, TextArea } = Input;
  * 输入框组件AntdInput
  */
 const AntdInput = (props) => {
-    let {
+    const {
         id,
         className,
         style,
@@ -73,24 +76,26 @@ const AntdInput = (props) => {
     // 批属性监听
     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);
 
     // 收集当前组件相关表单值
-    const currentFormValue = useFormStore(state => state.values?.[formId]?.[name || id])
+    const currentFormValue = useFormStore(
+        (state) => state.values?.[formId]?.[name || id]
+    );
 
     // 处理组件卸载后，对应表单项值的清除
     useEffect(() => {
@@ -98,10 +103,10 @@ const AntdInput = (props) => {
             // 若上文中存在有效表单id
             if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
-                deleteItemValue(formId, name || id)
+                deleteItemValue(formId, name || id);
             }
-        }
-    }, [name, id])
+        };
+    }, [name, id]);
 
     useEffect(() => {
         // 初始化value
@@ -109,53 +114,45 @@ const AntdInput = (props) => {
             // 当defaultValue不为空且value为空时，为value初始化defaultValue对应的value值
             setProps({
                 value: defaultValue,
-                md5Value: md5(defaultValue)
-            })
+                md5Value: md5(defaultValue),
+            });
         }
         // 在value存在时，初始化md5Value
         if (value) {
             setProps({
-                md5Value: md5(value)
-            })
+                md5Value: md5(value),
+            });
         }
-    }, [])
+    }, []);
 
     // 监听输入内容变化事件
-    const onChange = e => {
+    const onChange = (e) => {
         // AntdForm表单批量控制
         if (formId && (name || id) && enableBatchControl) {
             // 表单值更新
-            updateItemValue(formId, name || id, e.target.value)
+            updateItemValue(formId, name || id, e.target.value);
         }
         // 若启用md5加密且为密码模式
         if (passwordUseMd5 && mode === 'password') {
             setProps({
                 md5Value: e.target.value ? md5(e.target.value) : null,
-                value: (
-                    emptyAsNone ?
-                        (
-                            e.target.value === '' ?
-                                null :
-                                e.target.value
-                        ) :
-                        e.target.value
-                )
-            })
+                value: emptyAsNone
+                    ? e.target.value === ''
+                        ? null
+                        : e.target.value
+                    : e.target.value,
+            });
         } else {
             setProps({
-                value: (
-                    emptyAsNone ?
-                        (
-                            e.target.value === '' ?
-                                null :
-                                e.target.value
-                        ) :
-                        e.target.value
-                )
-            })
+                value: emptyAsNone
+                    ? e.target.value === ''
+                        ? null
+                        : e.target.value
+                    : e.target.value,
+            });
         }
         setRawValue(e.target.value);
-    }
+    };
 
     // 解决value经回调更新后，rawValue未更新的问题
     useEffect(() => {
@@ -165,49 +162,46 @@ const AntdInput = (props) => {
         } else {
             setRawValue(value);
         }
-    }, [value, currentFormValue])
+    }, [value, currentFormValue]);
 
     const { run: onDebounceChange } = useRequest(
         (e) => {
             setProps({
-                debounceValue: (
-                    emptyAsNone ?
-                        (
-                            e === '' ?
-                                null :
-                                e
-                        ) :
-                        e
-                )
-            })
+                debounceValue: emptyAsNone ? (e === '' ? null : e) : e,
+            });
         },
         {
             debounceWait: debounceWait,
-            manual: true
+            manual: true,
         }
-    )
+    );
 
     // 监听聚焦到输入框时enter键点按次数
-    const onPressEnter = e => {
-        setProps({ nSubmit: nSubmit + 1 })
-    }
+    const onPressEnter = (e) => {
+        setProps({ nSubmit: nSubmit + 1 });
+    };
 
     // 监听搜索按钮点按事件
-    const onSearch = e => {
-        setProps({ nClicksSearch: nClicksSearch + 1 })
-    }
+    const onSearch = (e) => {
+        setProps({ nClicksSearch: nClicksSearch + 1 });
+    };
 
     // 不同的mode模式下渲染不同的组件
     if (mode === 'default') {
         return (
             <Input
                 // 提取具有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}
                 styles={styles}
@@ -216,19 +210,19 @@ const AntdInput = (props) => {
                 placeholder={placeholder}
                 autoComplete={autoComplete}
                 defaultValue={
-                    formId && (name || id) && enableBatchControl ?
-                        undefined :
-                        defaultValue
+                    formId && (name || id) && enableBatchControl
+                        ? undefined
+                        : defaultValue
                 }
                 value={
-                    formId && (name || id) && enableBatchControl ?
-                        currentFormValue :
-                        rawValue || value
+                    formId && (name || id) && enableBatchControl
+                        ? currentFormValue
+                        : rawValue || value
                 }
                 size={
-                    context && !isUndefined(context.componentSize) ?
-                        context.componentSize :
-                        size
+                    context && !isUndefined(context.componentSize)
+                        ? context.componentSize
+                        : size
                 }
                 addonBefore={addonBefore}
                 addonAfter={addonAfter}
@@ -236,38 +230,42 @@ const AntdInput = (props) => {
                 suffix={suffix}
                 allowClear={allowClear}
                 autoFocus={autoFocus}
-                variant={(
-                    !variant ?
-                        (bordered ? 'outlined' : 'borderless') :
-                        variant
-                )}
+                variant={
+                    !variant ? (bordered ? 'outlined' : 'borderless') : variant
+                }
                 disabled={
-                    context && !isUndefined(context.componentDisabled) ?
-                        context.componentDisabled :
-                        disabled
+                    context && !isUndefined(context.componentDisabled)
+                        ? context.componentDisabled
+                        : disabled
                 }
                 maxLength={maxLength}
                 status={status}
                 readOnly={readOnly}
                 onChange={(e) => {
-                    onChange(e)
-                    onDebounceChange(e.target.value)
+                    onChange(e);
+                    onDebounceChange(e.target.value);
                 }}
                 onPressEnter={onPressEnter}
                 onFocus={() => setProps({ focusing: true })}
                 onBlur={() => setProps({ focusing: false })}
-                data-dash-is-loading={useLoading()} />
+                data-dash-is-loading={useLoading()}
+            />
         );
     } else if (mode === 'search') {
         return (
             <Search
                 // 提取具有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}
                 styles={styles}
@@ -276,58 +274,62 @@ const AntdInput = (props) => {
                 placeholder={placeholder}
                 autoComplete={autoComplete}
                 size={
-                    context && !isUndefined(context.componentSize) ?
-                        context.componentSize :
-                        size
+                    context && !isUndefined(context.componentSize)
+                        ? context.componentSize
+                        : size
                 }
                 addonBefore={addonBefore}
                 prefix={prefix}
                 suffix={suffix}
                 allowClear={allowClear}
                 autoFocus={autoFocus}
-                variant={(
-                    !variant ?
-                        (bordered ? 'outlined' : 'borderless') :
-                        variant
-                )}
+                variant={
+                    !variant ? (bordered ? 'outlined' : 'borderless') : variant
+                }
                 defaultValue={
-                    formId && (name || id) && enableBatchControl ?
-                        undefined :
-                        defaultValue
+                    formId && (name || id) && enableBatchControl
+                        ? undefined
+                        : defaultValue
                 }
                 value={
-                    formId && (name || id) && enableBatchControl ?
-                        currentFormValue :
-                        rawValue || value
+                    formId && (name || id) && enableBatchControl
+                        ? currentFormValue
+                        : rawValue || value
                 }
                 disabled={
-                    context && !isUndefined(context.componentDisabled) ?
-                        context.componentDisabled :
-                        disabled
+                    context && !isUndefined(context.componentDisabled)
+                        ? context.componentDisabled
+                        : disabled
                 }
                 maxLength={maxLength}
                 status={status}
                 readOnly={readOnly}
                 onSearch={onSearch}
                 onChange={(e) => {
-                    onChange(e)
-                    onDebounceChange(e.target.value)
+                    onChange(e);
+                    onDebounceChange(e.target.value);
                 }}
                 onPressEnter={onPressEnter}
                 onFocus={() => setProps({ focusing: true })}
                 onBlur={() => setProps({ focusing: false })}
-                data-dash-is-loading={useLoading()} />
+                data-dash-is-loading={useLoading()}
+            />
         );
     } else if (mode === 'text-area') {
         return (
             <TextArea
                 // 提取具有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}
                 styles={styles}
@@ -336,65 +338,72 @@ const AntdInput = (props) => {
                 placeholder={placeholder}
                 autoComplete={autoComplete}
                 size={
-                    context && !isUndefined(context.componentSize) ?
-                        context.componentSize :
-                        size
+                    context && !isUndefined(context.componentSize)
+                        ? context.componentSize
+                        : size
                 }
                 allowClear={allowClear}
                 autoFocus={autoFocus}
-                variant={(
-                    !variant ?
-                        (bordered ? 'outlined' : 'borderless') :
-                        variant
-                )}
+                variant={
+                    !variant ? (bordered ? 'outlined' : 'borderless') : variant
+                }
                 defaultValue={
-                    formId && (name || id) && enableBatchControl ?
-                        undefined :
-                        defaultValue
+                    formId && (name || id) && enableBatchControl
+                        ? undefined
+                        : defaultValue
                 }
                 value={
-                    formId && (name || id) && enableBatchControl ?
-                        currentFormValue :
-                        rawValue || value
+                    formId && (name || id) && enableBatchControl
+                        ? currentFormValue
+                        : rawValue || value
                 }
                 disabled={
-                    context && !isUndefined(context.componentDisabled) ?
-                        context.componentDisabled :
-                        disabled
+                    context && !isUndefined(context.componentDisabled)
+                        ? context.componentDisabled
+                        : disabled
                 }
                 maxLength={maxLength}
                 showCount={
-                    showCount && countFormat && !maxLength ?
-                        {
-                            // 基于countFormat所定义的正则规则来自定义计算字符数
-                            formatter: ({ value }) => {
-                                return value.match(eval(`/${countFormat}/g`))?.length || 0;
-                            }
-                        } :
-                        showCount
+                    showCount && countFormat && !maxLength
+                        ? {
+                              // 基于countFormat所定义的正则规则来自定义计算字符数
+                              formatter: ({ value }) => {
+                                  return (
+                                      value.match(eval(`/${countFormat}/g`))
+                                          ?.length || 0
+                                  );
+                              },
+                          }
+                        : showCount
                 }
                 status={status}
                 autoSize={autoSize}
                 readOnly={readOnly}
                 onChange={(e) => {
-                    onChange(e)
-                    onDebounceChange(e.target.value)
+                    onChange(e);
+                    onDebounceChange(e.target.value);
                 }}
                 onPressEnter={onPressEnter}
                 onFocus={() => setProps({ focusing: true })}
                 onBlur={() => setProps({ focusing: false })}
-                data-dash-is-loading={useLoading()} />
+                data-dash-is-loading={useLoading()}
+            />
         );
     } else if (mode === 'password') {
         return (
             <Input.Password
                 // 提取具有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}
                 styles={styles}
@@ -403,29 +412,27 @@ const AntdInput = (props) => {
                 placeholder={placeholder}
                 autoComplete={autoComplete}
                 size={
-                    context && !isUndefined(context.componentSize) ?
-                        context.componentSize :
-                        size
+                    context && !isUndefined(context.componentSize)
+                        ? context.componentSize
+                        : size
+                }
+                variant={
+                    !variant ? (bordered ? 'outlined' : 'borderless') : variant
                 }
-                variant={(
-                    !variant ?
-                        (bordered ? 'outlined' : 'borderless') :
-                        variant
-                )}
                 disabled={
-                    context && !isUndefined(context.componentDisabled) ?
-                        context.componentDisabled :
-                        disabled
+                    context && !isUndefined(context.componentDisabled)
+                        ? context.componentDisabled
+                        : disabled
                 }
                 defaultValue={
-                    formId && (name || id) && enableBatchControl ?
-                        undefined :
-                        defaultValue
+                    formId && (name || id) && enableBatchControl
+                        ? undefined
+                        : defaultValue
                 }
                 value={
-                    formId && (name || id) && enableBatchControl ?
-                        currentFormValue :
-                        rawValue || value
+                    formId && (name || id) && enableBatchControl
+                        ? currentFormValue
+                        : rawValue || value
                 }
                 maxLength={maxLength}
                 status={status}
@@ -434,18 +441,19 @@ const AntdInput = (props) => {
                 prefix={prefix}
                 readOnly={readOnly}
                 onChange={(e) => {
-                    onChange(e)
-                    onDebounceChange(e.target.value)
+                    onChange(e);
+                    onDebounceChange(e.target.value);
                 }}
                 onPressEnter={onPressEnter}
                 onFocus={() => setProps({ focusing: true })}
                 onBlur={() => setProps({ focusing: false })}
-                data-dash-is-loading={useLoading()} />
+                data-dash-is-loading={useLoading()}
+            />
         );
     }
-}
+};
 
 export default AntdInput;
 
 AntdInput.defaultProps = defaultProps;
-AntdInput.propTypes = propTypes;
+AntdInput.propTypes = propTypes;