@lingxiteam/ebe-utils 0.0.8 → 0.0.10

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

@@ -0,0 +1,247 @@
+import { DformPicker } from '@lingxiteam/dform';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useEffect, useRef, useState } from 'react';
+import { DFormWrapper, Empty, FormItem } from '../BasicComponents';
+import { useFormItem, UseFormItemProps } from '../utils/hooks/useFormItem';
+import { withTransformProps } from '../utils/withTransformProps';
+import './index.less';
+import transformProps from './transformProps';
+
+export interface MyDformPickerProps extends UseFormItemProps {
+  dataSource: any[];
+  filter: string;
+  filterOption: any;
+  labelKey?: string;
+  valueKey?: string;
+  title: string;
+  onClick?: () => void;
+  alias?: any;
+  postfix?: any;
+  type?: string;
+  theme?: string;
+  isIconFont?: boolean;
+  fontAddress?: any;
+  postfixIconPosition?: string;
+  iconColor?: string;
+  fontSize?: any;
+  icon?: any;
+  color?: any;
+  titleIcon?: any;
+  prefixIcon?: any;
+
+  /**
+   * 是否按搜索健触发，默认false，表示按下搜索健触发远程过滤回掉，为true时，表示输入就触发远程过滤回掉
+   */
+  isInputSearch?: boolean;
+
+  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);
+        },
+      });
+
+    let dealProps: any = { ...restProps };
+    if (!props?.icon) {
+      dealProps = {
+        icon: {
+          isIconFont: false,
+          theme: 'outlined',
+          type: 'right',
+        },
+        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} />,
+      };
+    }
+
+    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
+          );
+        });
+
+        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();
+                }
+                // 回车搜索事件
+              }
+            }}
+          />
+        );
+      }
+      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 (
+      <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';
+
+export default withTransformProps(MyDformPicker, transformProps);

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

@@ -0,0 +1,21 @@
+interface Props {
+  basicStatus: number;
+  fieldName: string;
+  name: string;
+  options: any[];
+  value: any;
+  [key: string]: any;
+}
+
+export default function transformProps(props: Props) {
+  const { basicStatus, fieldName, name, options, value, ...restProps } = props;
+  const newProps: Record<string, any> = {
+    ...(restProps as any),
+    fieldProps: fieldName,
+    title: name,
+    data: options,
+    defaultValue: value,
+    status: `${basicStatus}`,
+  };
+  return newProps;
+}

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

@@ -0,0 +1,108 @@
+import { DformRadio, INomarRadioProps } from '@lingxiteam/dform';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React from 'react';
+import { DFormWrapper, FormItem } from '../BasicComponents';
+import { useFormItem } from '../utils/hooks/useFormItem';
+import { withTransformProps } from '../utils/withTransformProps';
+import transformProps from './transformProps';
+
+export interface MyDformInputProps extends INomarRadioProps {
+  dataSource: any[];
+  allowUnChecked: boolean;
+  inputTextAlign: string;
+  visible: boolean;
+  readOnly: boolean;
+  title: string;
+}
+const MyDformRadio = LingxiForwardRef<any, MyDformInputProps>((props, ref) => {
+  const {
+    defaultValue,
+    onChange,
+    dataSource,
+    allowUnChecked = false,
+    inputTextAlign = 'left',
+    selectedType = 'roundDot',
+    getEngineApis,
+    ...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) => {
+        if (params.labelKey && params.valueKey) {
+          if (item[params.labelKey]) {
+            return {
+              ...item,
+              label: item[params.labelKey],
+              value: item[params.valueKey],
+            };
+          }
+        }
+        return item;
+      });
+      setData(temDataSoure);
+    },
+  });
+  const [data, setData] = React.useState<MyDformInputProps['dataSource']>([]);
+
+  React.useEffect(() => {
+    if (dataSource) {
+      setData(dataSource);
+    }
+  }, [JSON.stringify(dataSource)]);
+
+  return (
+    <FormItem>
+      <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
+        <DformRadio
+          {...restProps}
+          // @ts-ignore
+          inputTextAlign={inputTextAlign}
+          textAlign="left"
+          selectedType={selectedType}
+          radioType={
+            restProps.positionType === 'horizontal'
+              ? 'horizontal'
+              : restProps.radioType
+          }
+          radioPosition={
+            restProps.positionType === 'horizontal'
+              ? 'left'
+              : restProps.radioPosition
+          }
+          allowUnChecked={allowUnChecked}
+          defaultValue={val}
+          required={required}
+          rules={getRules()}
+          validateTrigger="onChange"
+          disabled={disabled}
+          data={data}
+          onChange={(v: any) => onInputChange(v)}
+          readonly={readOnly}
+          getLocale={(
+            t: string,
+            tempValue: Record<string, any> | undefined,
+          ) => {
+            return getLocale(`DformRadio.${t}`, '', tempValue);
+          }}
+        />
+      </DFormWrapper>
+    </FormItem>
+  );
+});
+
+MyDformRadio.displayName = 'dformRadio';
+
+export default withTransformProps(MyDformRadio, transformProps);

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

@@ -0,0 +1,20 @@
+interface Props {
+  basicStatus: number;
+  fieldName: string;
+  name: string;
+  options: any[];
+  [key: string]: any;
+}
+
+export default function transformProps(props: Props) {
+  const { basicStatus, fieldName, value, name, options, ...restProps } = props;
+  const newProps: Record<string, any> = {
+    ...(restProps as any),
+    fieldProps: fieldName,
+    title: name,
+    data: options,
+    status: `${basicStatus}`,
+    defaultValue: value,
+  };
+  return newProps;
+}

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

@@ -0,0 +1,181 @@
+import { RangeDatePicker } from '@lingxiteam/dform';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { 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 './index.less';
+
+const prefixCls = 'lcdp-dform-rangepicker';
+export interface DatePickerProps extends UseFormItemProps {
+  minDate?: any;
+  maxDate?: any;
+  formatter?: string;
+  name: string;
+  titleIcon?: any; // 标题图标
+  hasTitleIcon?: string;
+  modeType?: 'year' | 'month' | 'date' | 'onlyTime' | 'time';
+  valueFormat?: 'standard' | 'show';
+}
+
+const RangePicker = LingxiForwardRef<any, DatePickerProps>((props, ref) => {
+  const {
+    defaultValue,
+    onChange,
+    minDate,
+    maxDate,
+    formatter: newFormatter = 'YYYY-MM-DD',
+    fieldProps = '',
+    name,
+    modeType,
+    hasTitleIcon = 'none',
+    titleIcon,
+    getEngineApis,
+    valueFormat,
+    ...restProps
+  } = props;
+  const { getLocale, getLocaleEnv } = getEngineApis?.() || {};
+  const lanEnv = getLocaleEnv();
+  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,
+    );
+  };
+
+  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 [afterMinDate, setAfterMinDate] = useState<any>();
+  const [afterMaxDate, setAfterMaxDate] = useState<any>();
+  useEffect(() => {
+    if (maxDate === 'new Date();') {
+      setAfterMaxDate(new Date());
+    } else {
+      setAfterMaxDate(toDate(maxDate));
+    }
+
+    if (minDate === 'new Date();') {
+      setAfterMinDate(new Date());
+    } else {
+      setAfterMinDate(toDate(minDate));
+    }
+  }, [maxDate, minDate]);
+
+  const renderIcon = (iconInfo: any, cName: string, onClick: any) => {
+    if (!iconInfo) {
+      return null;
+    }
+    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();
+            }
+          }}
+        />
+      );
+    } else {
+      const { type, theme, isIconFont, fontAddress } = iconInfo;
+      iconView = (
+        <span className={cName}>
+          {/** @ts-ignore */}
+          <Icon
+            type={type}
+            theme={theme}
+            isIconFont={isIconFont}
+            fontAddress={fontAddress}
+            onClick={() => {
+              if (onClick) {
+                onClick();
+              }
+            }}
+            getEngineApis={getEngineApis}
+            $$componentItem={props.$$componentItem}
+            name="时间段选择"
+          />
+        </span>
+      );
+    }
+    return iconView;
+  };
+  return (
+    <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
+      <RangeDatePicker
+        {...restProps}
+        titleExtension={
+          hasTitleIcon === 'hasIcon' && titleIcon && titleIcon?.type
+            ? renderIcon(titleIcon, `${prefixCls}-icon`, null)
+            : null
+        }
+        defaultValue={val as any}
+        value={val}
+        fieldProps={fieldProps}
+        timeMode={modeType}
+        format={showFormat}
+        required={required}
+        rules={getRules()}
+        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']
+          onDateChange(v);
+        }}
+        readonly={readOnly}
+      />
+    </DFormWrapper>
+  );
+});
+
+RangePicker.displayName = 'RangePicker';
+
+export default RangePicker;

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

@@ -0,0 +1,20 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+@prefixCls: lcdp-dform-rangepicker;
+
+.@{prefixCls} {
+
+  &-icon {
+    display: flex;
+    align-items: center;
+    width: 16 * @hd;
+    height: 16 * @hd;
+    align-self: center;
+    margin-right: 4 * @hd;
+
+    svg {
+      width: 16 * @hd;
+      height: 16 * @hd;
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+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';
+
+interface DformRangePickerProps extends DatePickerProps {
+  title: string;
+  defaultCurrent?: any;
+  fieldName?: string;
+}
+
+const DformRangePicker = AppForwardRef<DformRangePickerProps>((props, ref) => {
+  const { defaultValue, fieldProps, fieldName } = props;
+  const { isForm } = React.useContext(DFormContext) || {};
+
+  const formateDate = () => {
+    if (Array.isArray(defaultValue)) {
+      const targetDefault = defaultValue.map((item: any) => {
+        if (item instanceof Date) {
+          // 兼容数据为日期类型
+          return dateToFormatter(props?.formatter || 'YYYY-MM-DD', item);
+        }
+        return item;
+      });
+      return targetDefault;
+    }
+
+    return [];
+  };
+  if (!isForm) {
+    return (
+      <FormItem>
+        {/** @ts-ignore */}
+        <RangePicker ref={ref} {...props} defaultValue={formateDate()} />
+      </FormItem>
+    );
+  }
+  return (
+    <FormItem>
+      {/* 统一由AddressPicker组件的hidden校验 */}
+      <Form.DFormField
+        name={fieldProps || fieldName}
+        initialValue={defaultValue}
+        params={{ formFlag: true, hidden: true }}
+      >
+        {/** @ts-ignore */}
+        <RangePicker
+          {...props}
+          ref={ref}
+          defaultValue={formateDate()}
+          fieldProps={fieldProps || fieldName}
+        />
+      </Form.DFormField>
+    </FormItem>
+  );
+});
+
+export default withTransformProps(DformRangePicker, transformProps);

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

@@ -0,0 +1,31 @@
+interface Props {
+  basicStatus: number;
+  fieldName: string;
+  name: string;
+  format?: string;
+  timeMode?: string;
+  visible?: boolean;
+  [key: string]: any;
+}
+
+export default function transformProps(props: Props) {
+  const {
+    basicStatus,
+    fieldName,
+    name,
+    format,
+    value,
+    timeMode,
+    ...restProps
+  } = props;
+  const newProps: Record<string, any> = {
+    ...(restProps as any),
+    fieldProps: fieldName,
+    title: name,
+    modeType: timeMode,
+    formatter: format,
+    status: `${basicStatus}`,
+    defaultValue: value,
+  };
+  return newProps;
+}