@lingxiteam/ebe-utils 0.2.3 → 0.2.5

package/lib/h5public/src/components/factory/src/DformPicker/index.tsx

@@ -7,6 +7,7 @@ import { withTransformProps } from '../utils/withTransformProps';
 import './index.less';
 import transformProps from './transformProps';
 
+const prefix = 'Lcdp_MyDformPicker';
 export interface MyDformPickerProps extends UseFormItemProps {
   dataSource: any[];
   filter: string;
@@ -37,210 +38,203 @@ export interface MyDformPickerProps extends UseFormItemProps {
   ellipsis?: boolean;
 }
 
-const MyDformPicker = LingxiForwardRef<any, MyDformPickerProps>(
-  (props, ref) => {
-    const [data, setData] = useState<any[]>([]);
-    const inputRef = useRef<HTMLInputElement>(null);
-    const getValueInfo = (v: any) =>
-      data?.find((d) => d[props?.alias?.value || 'value'] === v);
-    const {
-      defaultValue,
-      onChange,
-      dataSource,
-      labelKey,
-      valueKey,
-      filter,
-      filterOption,
-      onClick,
-      getEngineApis,
-      isInputSearch,
-      ellipsis,
-      ...restProps
-    } = props;
-    const { getLocale, dataState } = getEngineApis?.() || {};
-    const { disabled, val, onInputChange, required, readOnly, visible } =
-      useFormItem(ref, props, {
-        valueInfo() {
-          return getValueInfo(this.value);
-        },
-        setData,
-        setDataWithLabelAndValue: (params: {
-          dataSource: any[];
-          labelKey?: string;
-          valueKey?: string;
-        }) => {
-          const temDataSoure = params.dataSource?.map((item) => {
-            if (params.labelKey && params.valueKey) {
-              if (item[params.labelKey]) {
-                return {
-                  ...item,
-                  id: item[params.valueKey],
-                  label: item[params.labelKey],
-                  value: item[params.valueKey],
-                };
-              }
-            }
-            return item;
-          });
-          setData(temDataSoure);
-        },
+const MyDformPicker = LingxiForwardRef<any, MyDformPickerProps>((props, ref) => {
+  const [data, setData] = useState<any[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const getValueInfo = (v: any) => data?.find(d => d[props?.alias?.value || 'value'] === v);
+  const {
+    defaultValue,
+    onChange,
+    dataSource,
+    labelKey,
+    valueKey,
+    filter,
+    filterOption,
+    onClick,
+    getEngineApis,
+    isInputSearch,
+    ellipsis,
+    ...restProps
+  } = props;
+  const { getLocale, dataState } = getEngineApis?.() || {};
+  const { disabled, val, onInputChange, required, readOnly, visible } = useFormItem(ref, props, {
+    valueInfo() {
+      return getValueInfo(this.value);
+    },
+    setData,
+    setDataWithLabelAndValue: (params: { dataSource: any[]; labelKey?: string; valueKey?: string }) => {
+      const temDataSoure = params.dataSource?.map(item => {
+        if (params.labelKey && params.valueKey) {
+          if (item[params.labelKey]) {
+            return {
+              ...item,
+              id: item[params.valueKey],
+              label: item[params.labelKey],
+              value: item[params.valueKey],
+            };
+          }
+        }
+        return item;
       });
+      setData(temDataSoure);
+    },
+  });
 
-    let dealProps: any = { ...restProps };
-    if (!props?.icon) {
-      dealProps = {
-        icon: {
-          isIconFont: false,
-          theme: 'outlined',
-          type: 'right',
-        },
+  let dealProps: any = { ...restProps };
+  if (!props?.icon) {
+    dealProps = {
+      icon: {
         isIconFont: false,
         theme: 'outlined',
         type: 'right',
-        ...restProps,
-      };
-    }
+      },
+      isIconFont: false,
+      theme: 'outlined',
+      type: 'right',
+      ...restProps,
+    };
+  }
 
-    if ((filter === 'local' || filter === 'remote') && !data?.length) {
-      dealProps.pickerProps = {
-        ...(dealProps.pickerProps || {}),
-        // 使用 loading 属性，实现显示空数据
-        loading: true,
-        loadingContent: <Empty getLocale={getLocale} dataState={dataState} />,
-      };
-    }
+  if ((filter === 'local' || filter === 'remote') && !data?.length) {
+    dealProps.pickerProps = {
+      ...(dealProps.pickerProps || {}),
+      // 使用 loading 属性，实现显示空数据
+      loading: true,
+      loadingContent: <Empty getLocale={getLocale} dataState={dataState} />,
+    };
+  }
 
-    const searchOnChange = (e: any) => {
-      const inputValue = e.target.value;
-      if (filter === 'remote') {
-        try {
-          // 根据搜索内容（包含空）进行远程搜索
-          if (filterOption) {
-            filterOption(inputValue);
-          }
-        } catch (err) {
-          // eslint-disable-next-line no-console
-          console.log('err', err);
-        }
-      } else {
-        // 清空搜索内容时，恢复原有全部数据
-        if (!inputValue?.length) {
-          setData([...(dataSource || [])]);
-          return;
+  dealProps.pickerProps = {
+    ...(dealProps.pickerProps || {}),
+    style: {
+      ...(dealProps.pickerProps?.style || {}),
+      '--item-height': '40px',
+    },
+    popupClassName: `${prefix}_lcdp_wrap`,
+  };
+
+  const searchOnChange = (e: any) => {
+    const inputValue = e.target.value;
+    if (filter === 'remote') {
+      try {
+        // 根据搜索内容（包含空）进行远程搜索
+        if (filterOption) {
+          filterOption(inputValue);
         }
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.log('err', err);
+      }
+    } else {
+      // 清空搜索内容时，恢复原有全部数据
+      if (!inputValue?.length) {
+        setData([...(dataSource || [])]);
+        return;
+      }
 
-        let searchData = [];
-        searchData = data?.filter((item) => {
-          return (
-            item.label?.toLowerCase().indexOf(inputValue?.toLowerCase()) >= 0
-          );
-        });
+      let searchData = [];
+      searchData = data?.filter(item => {
+        return item.label?.toLowerCase().indexOf(inputValue?.toLowerCase()) >= 0;
+      });
 
-        setData(searchData);
-      }
-    };
+      setData(searchData);
+    }
+  };
 
-    const setSearchView = (cType: string) => {
-      if (filter === 'local' || filter === 'remote') {
-        return (
-          <input
-            style={{
-              width: 'auto',
-              height: '32px',
-              borderRadius: '16px',
-              fontSize: '13px',
-              backgroundColor: '#f5f5f9',
-              padding: '0px 15px',
-            }}
-            type="search"
-            placeholder={getLocale(
-              'DformPicker.searchPlaceholder',
-              '请输入要搜索的选项',
-            )}
-            onChange={(e) => {
-              if (isInputSearch === true) {
-                searchOnChange(e); // 输入搜索事件
-              }
-            }}
-            ref={inputRef}
-            autoComplete="off"
-            onKeyPress={(e) => {
-              if (e.key === 'Enter' || e?.keyCode === 13) {
-                // 点击搜索健进行搜索
-                searchOnChange(e);
-                const inputDOM: HTMLInputElement = inputRef.current!;
-                if (inputDOM) {
-                  inputDOM.blur();
-                }
-                // 回车搜索事件
+  const setSearchView = (cType: string) => {
+    if (filter === 'local' || filter === 'remote') {
+      return (
+        <input
+          style={{
+            width: 'auto',
+            height: '32px',
+            borderRadius: '16px',
+            fontSize: '13px',
+            backgroundColor: '#f5f5f9',
+            padding: '0px 15px',
+          }}
+          type="search"
+          placeholder={getLocale('DformPicker.searchPlaceholder', '请输入要搜索的选项')}
+          onChange={e => {
+            if (isInputSearch === true) {
+              searchOnChange(e); // 输入搜索事件
+            }
+          }}
+          ref={inputRef}
+          autoComplete="off"
+          onKeyPress={e => {
+            if (e.key === 'Enter' || e?.keyCode === 13) {
+              // 点击搜索健进行搜索
+              searchOnChange(e);
+              const inputDOM: HTMLInputElement = inputRef.current!;
+              if (inputDOM) {
+                inputDOM.blur();
               }
-            }}
-          />
-        );
-      }
-      return null;
-    };
-    const handDataSoure = () => {
-      const temDataSoure = dataSource?.map((item) => {
-        if (labelKey && valueKey) {
-          // 如果远程过滤和自定义数据都配置，同时还未启动远程过滤，走自定义数据
-          if (item[labelKey]) {
-            return {
-              ...item,
-              id: item[valueKey],
-              label: item[labelKey],
-              value: item[valueKey],
-            };
-          }
+              // 回车搜索事件
+            }
+          }}
+        />
+      );
+    }
+    return null;
+  };
+  const handDataSoure = () => {
+    const temDataSoure = dataSource?.map(item => {
+      if (labelKey && valueKey) {
+        // 如果远程过滤和自定义数据都配置，同时还未启动远程过滤，走自定义数据
+        if (item[labelKey]) {
+          return {
+            ...item,
+            id: item[valueKey],
+            label: item[labelKey],
+            value: item[valueKey],
+          };
         }
-        return item;
-      });
-      setData(temDataSoure);
-    };
-    useEffect(() => {
-      if (Array.isArray(dataSource)) {
-        handDataSoure();
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [JSON.stringify(dataSource)]);
+      return item;
+    });
+    setData(temDataSoure);
+  };
+  useEffect(() => {
+    if (Array.isArray(dataSource)) {
+      handDataSoure();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(dataSource)]);
 
-    return (
-      <FormItem>
-        <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
-          <DformPicker
-            {...dealProps}
-            customTitle={setSearchView(filter)}
-            defaultValue={val}
-            ellipsis={ellipsis}
-            data={data || []}
-            required={required}
-            disabled={disabled}
-            onClick={() => {
-              if (onClick) {
-                onClick();
-              } else {
-                // handDataSoure();
-              }
-            }}
-            insistOpenModal={filter === 'local' || filter === 'remote'}
-            onChange={(v: any) => {
-              onInputChange(v);
-            }}
-            cancelText={getLocale?.('cancelText', '取消')}
-            confirmText={getLocale?.('confirm', '确定')}
-            readonly={readOnly}
-            getLocale={(
-              t: string,
-              tempValue: Record<string, any> | undefined,
-            ) => {
-              return getLocale(`DformPicker.${t}`, '', tempValue);
-            }}
-          />
-        </DFormWrapper>
-      </FormItem>
-    );
-  },
-);
+  return (
+    <FormItem>
+      <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
+        <DformPicker
+          {...dealProps}
+          customTitle={setSearchView(filter)}
+          defaultValue={val}
+          ellipsis={ellipsis}
+          data={data || []}
+          required={required}
+          disabled={disabled}
+          onClick={() => {
+            if (onClick) {
+              onClick();
+            } else {
+              // handDataSoure();
+            }
+          }}
+          insistOpenModal={filter === 'local' || filter === 'remote'}
+          onChange={(v: any) => {
+            onInputChange(v);
+          }}
+          cancelText={getLocale?.('cancelText', '取消')}
+          confirmText={getLocale?.('confirm', '确定')}
+          readonly={readOnly}
+          getLocale={(t: string, tempValue: Record<string, any> | undefined) => {
+            return getLocale(`DformPicker.${t}`, '', tempValue);
+          }}
+        />
+      </DFormWrapper>
+    </FormItem>
+  );
+});
 
 MyDformPicker.displayName = 'dformPicker';
 

package/lib/h5public/src/components/factory/src/DformRadio/index.tsx

@@ -26,21 +26,9 @@ const MyDformRadio = LingxiForwardRef<any, MyDformInputProps>((props, ref) => {
     ...restProps
   } = props;
   const { getLocale } = getEngineApis?.() || {};
-  const {
-    disabled,
-    val,
-    getRules,
-    onInputChange,
-    required,
-    readOnly,
-    visible,
-  } = useFormItem(ref, props, {
-    setDataWithLabelAndValue: (params: {
-      dataSource: any[];
-      labelKey?: string;
-      valueKey?: string;
-    }) => {
-      const temDataSoure = params.dataSource?.map((item) => {
+  const { disabled, val, getRules, onInputChange, required, readOnly, visible } = useFormItem(ref, props, {
+    setDataWithLabelAndValue: (params: { dataSource: any[]; labelKey?: string; valueKey?: string }) => {
+      const temDataSoure = params.dataSource?.map(item => {
         if (params.labelKey && params.valueKey) {
           if (item[params.labelKey]) {
             return {
@@ -72,16 +60,8 @@ const MyDformRadio = LingxiForwardRef<any, MyDformInputProps>((props, ref) => {
           inputTextAlign={inputTextAlign}
           textAlign="left"
           selectedType={selectedType}
-          radioType={
-            restProps.positionType === 'horizontal'
-              ? 'horizontal'
-              : restProps.radioType
-          }
-          radioPosition={
-            restProps.positionType === 'horizontal'
-              ? 'left'
-              : restProps.radioPosition
-          }
+          radioType={restProps.positionType === 'horizontal' ? 'horizontal' : restProps.radioType}
+          radioPosition={restProps.positionType === 'horizontal' ? 'left' : restProps.radioPosition}
           allowUnChecked={allowUnChecked}
           defaultValue={val}
           required={required}
@@ -91,10 +71,7 @@ const MyDformRadio = LingxiForwardRef<any, MyDformInputProps>((props, ref) => {
           data={data}
           onChange={(v: any) => onInputChange(v)}
           readonly={readOnly}
-          getLocale={(
-            t: string,
-            tempValue: Record<string, any> | undefined,
-          ) => {
+          getLocale={(t: string, tempValue: Record<string, any> | undefined) => {
             return getLocale(`DformRadio.${t}`, '', tempValue);
           }}
         />

package/lib/h5public/src/components/factory/src/DformRangePicker/RangePicker.tsx

@@ -37,52 +37,30 @@ const RangePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
   } = props;
   const { getLocale, getLocaleEnv } = getEngineApis?.() || {};
   const lanEnv = getLocaleEnv();
-  const { showFormat, valueFormat: finalValueFormat } = useLocaleFormatter(
-    newFormatter,
-    lanEnv,
-    {
-      valueFormat,
-      mode: modeType,
-    },
-  );
+  const { showFormat, valueFormat: finalValueFormat } = useLocaleFormatter(newFormatter, lanEnv, {
+    valueFormat,
+    mode: modeType,
+  });
 
   const onDateChange = (v?: string[]) => {
-    onInputChange(
-      Array.isArray(v)
-        ? v.map((va) => dateToFormatter(showFormat, va, finalValueFormat))
-        : undefined,
-    );
+    onInputChange(Array.isArray(v) ? v.map(va => dateToFormatter(showFormat, va, finalValueFormat)) : undefined);
   };
 
-  const {
-    disabled,
-    required,
-    getRules,
-    readOnly,
-    visible,
-    val,
-    onInputChange,
-    form,
-    isForm,
-  } = useFormItem(
+  const { disabled, required, getRules, readOnly, visible, val, onInputChange, form, isForm } = useFormItem(
     ref,
     {
       ...props,
       defaultValue:
         modeType === 'onlyTime'
           ? defaultValue
-          : defaultValue?.map((v: string | Date | undefined) =>
-              dateToFormatter(showFormat, v, finalValueFormat),
-            ),
+          : defaultValue?.map((v: string | Date | undefined) => dateToFormatter(showFormat, v, finalValueFormat)),
     } as any,
     {
       get value() {
         const v = isForm ? form?.getFieldValue(fieldProps) : val;
-        return Array.isArray(v)
-          ? v.map((va) => dateToFormatter(showFormat, va, finalValueFormat))
-          : undefined;
+        return Array.isArray(v) ? v.map(va => dateToFormatter(showFormat, va, finalValueFormat)) : undefined;
       },
-    },
+    }
   );
   const [afterMinDate, setAfterMinDate] = useState<any>();
   const [afterMaxDate, setAfterMaxDate] = useState<any>();
@@ -148,11 +126,7 @@ const RangePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
     <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
       <RangeDatePicker
         {...restProps}
-        titleExtension={
-          hasTitleIcon === 'hasIcon' && titleIcon && titleIcon?.type
-            ? renderIcon(titleIcon, `${prefixCls}-icon`, null)
-            : null
-        }
+        titleExtension={hasTitleIcon === 'hasIcon' && titleIcon && titleIcon?.type ? renderIcon(titleIcon, `${prefixCls}-icon`, null) : null}
         defaultValue={val as any}
         value={val}
         fieldProps={fieldProps}

package/lib/h5public/src/components/factory/src/DformRangePicker/index.tsx

@@ -43,18 +43,9 @@ const DformRangePicker = AppForwardRef<DformRangePickerProps>((props, ref) => {
   return (
     <FormItem>
       {/* 统一由AddressPicker组件的hidden校验 */}
-      <Form.DFormField
-        name={fieldProps || fieldName}
-        initialValue={defaultValue}
-        params={{ formFlag: true, hidden: true }}
-      >
+      <Form.DFormField name={fieldProps || fieldName} initialValue={defaultValue} params={{ formFlag: true, hidden: true }}>
         {/** @ts-ignore */}
-        <RangePicker
-          {...props}
-          ref={ref}
-          defaultValue={formateDate()}
-          fieldProps={fieldProps || fieldName}
-        />
+        <RangePicker {...props} ref={ref} defaultValue={formateDate()} fieldProps={fieldProps || fieldName} />
       </Form.DFormField>
     </FormItem>
   );

package/lib/h5public/src/components/factory/src/DformRangePicker/transformProps.tsx

@@ -9,15 +9,7 @@ interface Props {
 }
 
 export default function transformProps(props: Props) {
-  const {
-    basicStatus,
-    fieldName,
-    name,
-    format,
-    value,
-    timeMode,
-    ...restProps
-  } = props;
+  const { basicStatus, fieldName, name, format, value, timeMode, ...restProps } = props;
   const newProps: Record<string, any> = {
     ...(restProps as any),
     fieldProps: fieldName,