@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/h5public/src/components/factory/src/DformList/Group/index.tsx

@@ -15,7 +15,9 @@ const Group = (props: any) => {
       aria-disabled={props['aria-disabled']}
     >
       {children}
-      {error && !!error[fieldProps] && <div className={`${prefixCls}-error`}>{error[fieldProps]}</div>}
+      {error && !!error[fieldProps] && (
+        <div className={`${prefixCls}-error`}>{error[fieldProps]}</div>
+      )}
     </div>
   );
 };

package/lib/h5public/src/components/factory/src/DformList/List/index.tsx

@@ -1,5 +1,5 @@
-import { EngineBaseProps } from '@lingxiteam/types';
 import React, { FC } from 'react';
+import { EngineBaseProps } from '@lingxiteam/types';
 
 interface ListProps {
   getEngineApis: EngineBaseProps['getEngineApis'];
@@ -37,7 +37,8 @@ const List: FC<ListProps> = ({ list = [], getEngineApis, __render__, itemKey, in
 
   return (
     <>
-      {list.map((item: any, index) => {
+      {
+      list.map((item: any, index) => {
         const itemProps = {
           key: item[uniqueField] ?? index,
           item,
@@ -51,8 +52,10 @@ const List: FC<ListProps> = ({ list = [], getEngineApis, __render__, itemKey, in
           ...getLoopItemExtraProps?.(item, index),
         };
         return <MemoLoopItem {...itemProps} />;
-      })}
+      })
+    }
     </>
+
   );
 };
 

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

@@ -1,9 +1,9 @@
-import { EngineBaseProps, LingxiForwardRef } from '@lingxiteam/types';
 import React from 'react';
-import { useFormItem } from '../utils/hooks/useFormItem';
+import List from './List';
 import FormItem from './FormItem';
+import { LingxiForwardRef, EngineBaseProps } from '@lingxiteam/types';
+import { useFormItem } from '../utils/hooks/useFormItem';
 import Group from './Group';
-import List from './List';
 import Title from './Title';
 
 export interface DformListProps extends Omit<EngineBaseProps, 'list'> {
@@ -57,7 +57,13 @@ const DformList = LingxiForwardRef<any, DformListProps>((props, ref) => {
 
   return (
     <Group style={style} hidden={!visible} fieldProps={fieldProps} error={error} aria-label={fieldProps} aria-disabled={disabled}>
-      <Title required={required} title={title} disabled={disabled} onAdd={onClick} getLocale={getLocale} />
+      <Title
+        required={required}
+        title={title}
+        disabled={disabled}
+        onAdd={onClick}
+        getLocale={getLocale}
+      />
       {formListType === 'list' ? (
         <List
           list={defaultValue}

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

@@ -1,11 +1,11 @@
 import { DformPicker } from '@lingxiteam/dform';
 import { LingxiForwardRef } from '@lingxiteam/types';
 import React, { useEffect, useRef, useState } from 'react';
-import { DFormWrapper, Empty, FormItem } from '../BasicComponents';
+import { DFormWrapper, FormItem, Empty } from '../BasicComponents';
 import { useFormItem, UseFormItemProps } from '../utils/hooks/useFormItem';
 import { withTransformProps } from '../utils/withTransformProps';
-import './index.less';
 import transformProps from './transformProps';
+import './index.less';
 
 const prefix = 'Lcdp_MyDformPicker';
 export interface MyDformPickerProps extends UseFormItemProps {
@@ -36,12 +36,14 @@ export interface MyDformPickerProps extends UseFormItemProps {
   isInputSearch?: boolean;
 
   ellipsis?: boolean;
+
+  localFilterType?: 'label' | 'value'; // 本地过滤筛选模式 匹配下拉项名称（默认） 匹配下拉选项值
 }
 
 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 getValueInfo = (v: any) => data?.find((d) => d[props?.alias?.value || 'value'] === v);
   const {
     defaultValue,
     onChange,
@@ -53,32 +55,38 @@ const MyDformPicker = LingxiForwardRef<any, MyDformPickerProps>((props, ref) =>
     onClick,
     getEngineApis,
     isInputSearch,
+    localFilterType,
     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],
-            };
+  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);
-    },
-  });
+          return item;
+        });
+        setData(temDataSoure);
+      },
+    });
 
   let dealProps: any = { ...restProps };
   if (!props?.icon) {
@@ -95,7 +103,10 @@ const MyDformPicker = LingxiForwardRef<any, MyDformPickerProps>((props, ref) =>
     };
   }
 
-  if ((filter === 'local' || filter === 'remote') && !data?.length) {
+  if (
+    (filter === 'local' || filter === 'remote') &&
+    !data?.length
+  ) {
     dealProps.pickerProps = {
       ...(dealProps.pickerProps || {}),
       // 使用 loading 属性，实现显示空数据
@@ -107,12 +118,35 @@ const MyDformPicker = LingxiForwardRef<any, MyDformPickerProps>((props, ref) =>
   dealProps.pickerProps = {
     ...(dealProps.pickerProps || {}),
     style: {
-      ...(dealProps.pickerProps?.style || {}),
+      ...dealProps.pickerProps?.style || {},
       '--item-height': '40px',
     },
     popupClassName: `${prefix}_lcdp_wrap`,
   };
 
+  // 通用排序比较器生成函数
+  const createComparator = (key: string, inputLower: string) => (a: any, b: any) => {
+    const getVal = (item: any) => {
+      if (item[key] === undefined || item[key] === null) {
+        return '';
+      }
+      return String(item[key]).toLowerCase();
+    };
+  
+    const aVal = getVal(a);
+    const bVal = getVal(b);
+  
+    // 精确匹配优先
+    if (aVal === inputLower) return -1;
+    if (bVal === inputLower) return 1;
+
+    // 按匹配位置排序
+    const aIndex = aVal.indexOf(inputLower);
+    const bIndex = bVal.indexOf(inputLower);
+  
+    return aIndex - bIndex;
+  };
+
   const searchOnChange = (e: any) => {
     const inputValue = e.target.value;
     if (filter === 'remote') {
@@ -131,12 +165,20 @@ const MyDformPicker = LingxiForwardRef<any, MyDformPickerProps>((props, ref) =>
         setData([...(dataSource || [])]);
         return;
       }
+      // 根据本地搜索类型进行搜索
+      const inputLower = inputValue?.toLowerCase() || '';
+      const filterKey = localFilterType === 'value' ? 'value' : 'label';
 
-      let searchData = [];
-      searchData = data?.filter(item => {
-        return item.label?.toLowerCase().indexOf(inputValue?.toLowerCase()) >= 0;
-      });
-
+      // 排列一下搜索结果
+      const searchData = (dataSource || [])
+        .filter(item => {
+          if (item[filterKey] !== undefined && item[filterKey] !== null) {
+            const val = String(item[filterKey]).toLowerCase();
+            return val.includes(inputLower);
+          }
+          return false;
+        })
+        .sort(createComparator(filterKey, inputLower));
       setData(searchData);
     }
   };
@@ -155,7 +197,7 @@ const MyDformPicker = LingxiForwardRef<any, MyDformPickerProps>((props, ref) =>
           }}
           type="search"
           placeholder={getLocale('DformPicker.searchPlaceholder', '请输入要搜索的选项')}
-          onChange={e => {
+          onChange={(e) => {
             if (isInputSearch === true) {
               searchOnChange(e); // 输入搜索事件
             }
@@ -179,7 +221,7 @@ const MyDformPicker = LingxiForwardRef<any, MyDformPickerProps>((props, ref) =>
     return null;
   };
   const handDataSoure = () => {
-    const temDataSoure = dataSource?.map(item => {
+    const temDataSoure = dataSource?.map((item) => {
       if (labelKey && valueKey) {
         // 如果远程过滤和自定义数据都配置，同时还未启动远程过滤，走自定义数据
         if (item[labelKey]) {
@@ -201,7 +243,6 @@ const MyDformPicker = LingxiForwardRef<any, MyDformPickerProps>((props, ref) =>
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(dataSource)]);
-
   return (
     <FormItem>
       <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
@@ -230,6 +271,10 @@ const MyDformPicker = LingxiForwardRef<any, MyDformPickerProps>((props, ref) =>
           getLocale={(t: string, tempValue: Record<string, any> | undefined) => {
             return getLocale(`DformPicker.${t}`, '', tempValue);
           }}
+          onCancel={() => {
+            // 点击取消将数据源还原，防止原来选择的值不显示
+            setData([...(dataSource || [])]);
+          }}
         />
       </DFormWrapper>
     </FormItem>

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

@@ -8,11 +8,11 @@ import transformProps from './transformProps';
 
 export interface MyDformInputProps extends INomarRadioProps {
   dataSource: any[];
-  allowUnChecked: boolean;
-  inputTextAlign: string;
-  visible: boolean;
-  readOnly: boolean;
-  title: string;
+  allowUnChecked: boolean,
+  inputTextAlign: string,
+  visible: boolean,
+  readOnly: boolean,
+  title: string,
 }
 const MyDformRadio = LingxiForwardRef<any, MyDformInputProps>((props, ref) => {
   const {
@@ -26,9 +26,21 @@ 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 {

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

@@ -1,22 +1,65 @@
+import React, { useEffect, useMemo, useState } from 'react';
 import { RangeDatePicker } from '@lingxiteam/dform';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import React, { useEffect, useState } from 'react';
 import { DFormWrapper } from '../BasicComponents';
-import Icon from '../Icon';
-import { dateToFormatter, toDate, useLocaleFormatter } from '../utils/date';
 import { useFormItem, UseFormItemProps } from '../utils/hooks/useFormItem';
+import { dateToFormatter, toDate, useLocaleFormatter } from '../utils/date';
+import Icon from '../Icon';
 import './index.less';
+import { generatorDisabledCallback, getRuleCallback, HolidaysLimitType } from '../utils/DateUtils/generatorDisabledCallback';
+import moment from 'moment';
 
 const prefixCls = 'lcdp-dform-rangepicker';
-export interface DatePickerProps extends UseFormItemProps {
+export interface DatePickerProps
+  extends UseFormItemProps{
   minDate?: any;
   maxDate?: any;
   formatter?: string;
   name: string;
-  titleIcon?: any; // 标题图标
+  titleIcon?: any;// 标题图标
   hasTitleIcon?: string;
   modeType?: 'year' | 'month' | 'date' | 'onlyTime' | 'time';
   valueFormat?: 'standard' | 'show';
+
+  /**
+   * 选择类型
+   */
+  selectType: 'multiple' | 'calendar';
+
+  /**
+   * 限制范围
+   */
+  limitRange?: string;
+
+  /**
+   * 开始时间
+   */
+  startTime?: string;
+
+  /**
+   * 结束时间
+   */
+  endTime?: string;
+
+  /**
+   * 可用多选日期
+   */
+  validMultiDate?: string[];
+
+  /**
+   * 节假日限制
+   */
+  holidaysLimit: HolidaysLimitType;
+
+  /**
+   * 指定日期
+   */
+  selectTime?: string;
+
+   /**
+   * 自定义提示文案
+   */
+   customTip?: string;
 }
 
 const RangePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
@@ -33,8 +76,40 @@ const RangePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
     titleIcon,
     getEngineApis,
     valueFormat,
+    limitRange,
+    startTime,
+    endTime,
+    holidaysLimit,
+    validMultiDate,
+    selectTime,
+    customTip,
     ...restProps
   } = props;
+
+  const disabledFnResult = useMemo(() => {
+    // 日历模式才需要开启禁用函数
+    if (props?.modeType === 'date' && props?.selectType === 'calendar') {
+      return generatorDisabledCallback({
+        limitRange: limitRange as any,
+        startDate: startTime,
+        endDate: endTime,
+        holidaysLimit,
+        validMultiDate,
+        selectTime,
+        timeMode: 'date',
+      });
+    }
+    return null;
+  }, [
+    limitRange,
+    startTime,
+    endTime,
+    holidaysLimit,
+    validMultiDate,
+    selectTime,
+    props?.modeType,
+  ]);
+
   const { getLocale, getLocaleEnv } = getEngineApis?.() || {};
   const lanEnv = getLocaleEnv();
   const { showFormat, valueFormat: finalValueFormat } = useLocaleFormatter(newFormatter, lanEnv, {
@@ -43,25 +118,55 @@ const RangePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
   });
 
   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(
-    ref,
-    {
-      ...props,
-      defaultValue:
-        modeType === 'onlyTime'
-          ? defaultValue
-          : 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;
-      },
+  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)),
+  } as any, {
+    get value() {
+      const v = isForm ? form?.getFieldValue(fieldProps) : val;
+      return Array.isArray(v) ? v.map((va) => dateToFormatter(showFormat, va, finalValueFormat)) : undefined;
+    },
+  });
+
+  const finalRules = useMemo(() => {
+    const rules: any[] = getRules();
+    if (disabledFnResult) {
+      const rangeCheckValidator = (_: any, val: any) => {
+        const result = getRuleCallback({
+          ...disabledFnResult,
+          tiemMode: 'date',
+          currentValue: val,
+          getLocale: (key, obj) => getLocale(key, '', obj),
+          name: props.title || '',
+          holidaysLimit,
+          format: finalValueFormat,
+        });
+        // 校验不通过
+        if (result) {
+          return Promise.reject(
+            new Error(customTip || result),
+          );
+        }
+        return Promise.resolve();
+      };
+      rules.push({ validator: rangeCheckValidator });
     }
-  );
+    return rules;
+  }, [disabledFnResult, getRules()?.length, customTip]);
+
   const [afterMinDate, setAfterMinDate] = useState<any>();
   const [afterMaxDate, setAfterMaxDate] = useState<any>();
   useEffect(() => {
@@ -84,30 +189,22 @@ const RangePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
     }
     let iconView = null;
     if (iconInfo && iconInfo?.prefixIconIconFileInfo) {
-      iconView = (
-        <span
-          className={cName}
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{
-            __html: iconInfo?.iconFileInfo?.svgContent,
-          }}
-          onClick={() => {
-            if (onClick) {
-              onClick();
-            }
-          }}
-        />
-      );
+      iconView = <span
+        className={cName}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: iconInfo?.iconFileInfo?.svgContent }}
+        onClick={() => {
+          if (onClick) {
+            onClick();
+          }
+        }}
+      />;
     } else {
-      const { type, theme, isIconFont, fontAddress } = iconInfo;
       iconView = (
         <span className={cName}>
           {/** @ts-ignore */}
           <Icon
-            type={type}
-            theme={theme}
-            isIconFont={isIconFont}
-            fontAddress={fontAddress}
+            icon={iconInfo}
             onClick={() => {
               if (onClick) {
                 onClick();
@@ -126,6 +223,9 @@ const RangePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
     <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
       <RangeDatePicker
         {...restProps}
+        shouldDisableDate={disabledFnResult?.disabledDateFn ? (curDate) => {
+          return disabledFnResult?.disabledDateFn(moment(curDate));
+        } : undefined}
         titleExtension={hasTitleIcon === 'hasIcon' && titleIcon && titleIcon?.type ? renderIcon(titleIcon, `${prefixCls}-icon`, null) : null}
         defaultValue={val as any}
         value={val}
@@ -133,15 +233,14 @@ const RangePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
         timeMode={modeType}
         format={showFormat}
         required={required}
-        rules={getRules()}
+        rules={finalRules}
         getLocale={(t: string, tempValue: Record<string, any> | undefined) => {
           return getLocale(`DformRangePicker.${t}`, '', tempValue);
         }}
         disabled={disabled}
         minDate={afterMinDate}
         maxDate={afterMaxDate}
-        onChange={(v: any) => {
-          // ['2022-22','2023-04']
+        onChange={(v: any) => { // ['2022-22','2023-04']
           onDateChange(v);
         }}
         readonly={readOnly}

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

@@ -1,17 +1,17 @@
 import { Form } from '@lingxiteam/dform';
 import React from 'react';
 import { AppForwardRef, FormItem } from '../BasicComponents';
-import { dateToFormatter } from '../utils/date';
-import { DFormContext } from '../utils/form';
 import { withTransformProps } from '../utils/withTransformProps';
 import type { DatePickerProps } from './RangePicker';
 import RangePicker from './RangePicker';
 import transformProps from './transformProps';
+import { dateToFormatter } from '../utils/date';
+import { DFormContext } from '../utils/form';
 
 interface DformRangePickerProps extends DatePickerProps {
   title: string;
   defaultCurrent?: any;
-  fieldName?: string;
+  fieldName?: string
 }
 
 const DformRangePicker = AppForwardRef<DformRangePickerProps>((props, ref) => {
@@ -21,8 +21,7 @@ const DformRangePicker = AppForwardRef<DformRangePickerProps>((props, ref) => {
   const formateDate = () => {
     if (Array.isArray(defaultValue)) {
       const targetDefault = defaultValue.map((item: any) => {
-        if (item instanceof Date) {
-          // 兼容数据为日期类型
+        if (item instanceof Date) { // 兼容数据为日期类型
           return dateToFormatter(props?.formatter || 'YYYY-MM-DD', item);
         }
         return item;
@@ -44,7 +43,7 @@ const DformRangePicker = AppForwardRef<DformRangePickerProps>((props, ref) => {
     <FormItem>
       {/* 统一由AddressPicker组件的hidden校验 */}
       <Form.DFormField name={fieldProps || fieldName} initialValue={defaultValue} params={{ formFlag: true, hidden: true }}>
-        {/** @ts-ignore */}
+        { /** @ts-ignore */ }
         <RangePicker {...props} ref={ref} defaultValue={formateDate()} fieldProps={fieldProps || fieldName} />
       </Form.DFormField>
     </FormItem>