@lingxiteam/ebe-utils 0.0.8 → 0.0.10

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

@@ -0,0 +1,115 @@
+import { MultiplePicker } from '@lingxiteam/dform';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useEffect, useState } from 'react';
+import { DFormWrapper, FormItem } from '../BasicComponents';
+import { MyIconProps } from '../Icon';
+import useDefaultValue from '../utils/hooks/useDefaultValue';
+import { useFormItem, UseFormItemProps } from '../utils/hooks/useFormItem';
+import { withTransformProps } from '../utils/withTransformProps';
+import transformProps from './transformProps';
+
+export interface MyIMultiplePickerProps extends UseFormItemProps {
+  regexp?: any[];
+  dataSource?: any[];
+  postfix?: any;
+  icon?: MyIconProps;
+  postfixIconPosition?: string;
+  iconColor?: string;
+  valueType?: any;
+  maxValueLength?: any;
+  max?: number;
+  leftContent?: string;
+  rightContent?: string;
+}
+
+const MyMultiplePicker = LingxiForwardRef<any, MyIMultiplePickerProps>(
+  (props, ref) => {
+    const {
+      defaultValue,
+      onChange,
+      dataSource,
+      regexp,
+      maxValueLength,
+      getEngineApis,
+      leftContent,
+      rightContent,
+      ...restProps
+    } = props;
+    const { getLocale } = getEngineApis?.() || {};
+    const { disabled, val, onInputChange, required, readOnly, visible } =
+      useFormItem(
+        ref,
+        {
+          ...props,
+          defaultValue: useDefaultValue(defaultValue, restProps?.max),
+        },
+        {
+          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] = useState<MyIMultiplePickerProps['dataSource']>([]);
+    const dealProps = {
+      icon: {
+        isIconFont: false,
+        theme: 'outlined',
+        type: 'right',
+      },
+      ...restProps,
+    };
+    if (!restProps?.valueType) {
+      dealProps.valueType = 'ellipsis';
+    }
+    useEffect(() => {
+      if (Array.isArray(dataSource)) {
+        setData(dataSource);
+      }
+    }, [JSON.stringify(dataSource)]);
+
+    return (
+      <FormItem>
+        <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
+          <MultiplePicker
+            {...dealProps}
+            defaultValue={val}
+            maxValueLength={restProps?.max}
+            required={required}
+            disabled={disabled}
+            data={data || []}
+            onChange={(v: any) => onInputChange(v)}
+            readonly={readOnly}
+            rightContent={rightContent ?? getLocale?.('confirm')}
+            leftContent={leftContent ?? getLocale?.('cancelText')}
+            getLocale={(
+              t: string,
+              tempValue: Record<string, any> | undefined,
+            ) => {
+              return getLocale(`DMultiplePicker.${t}`, '', tempValue);
+            }}
+          />
+        </DFormWrapper>
+      </FormItem>
+    );
+  },
+);
+
+MyMultiplePicker.displayName = 'multiplePicker';
+
+export default withTransformProps(MyMultiplePicker, transformProps);

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

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

package/lib/h5public/src/components/factory/src/DatePicker/InnerDatePicker.tsx

@@ -0,0 +1,234 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import DatePicker from 'antd-mobile-5/es/components/date-picker';
+import Picker from 'antd-mobile-5/es/components/picker';
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
+import { FormItem } from '../BasicComponents';
+import {
+  dateToFormatter,
+  subtractDate,
+  toDate,
+  useLocaleFormatter,
+} from '../utils/date';
+import { useToggleBoolean } from '../utils/hooks/useToggleBoolean';
+
+export interface MyDatePickerProps {
+  name?: string;
+  dateRange?: string;
+  formatter?: string;
+  minDate?: string;
+  maxDate?: string;
+  value?: string;
+  onChange?: (e?: string) => void;
+  visible: boolean;
+  mode: 'datetime' | 'date' | 'month' | 'year' | 'time';
+  title: string;
+}
+
+const MyDatePicker = LingxiForwardRef<any, MyDatePickerProps>((props, ref) => {
+  const {
+    name,
+    value,
+    dateRange,
+    onChange,
+    formatter: newFormatter = 'YYYY-MM-DD HH:mm:ss',
+    visible = false,
+    minDate: tempMinDate,
+    maxDate: tempMaxDate,
+    mode,
+    getEngineApis,
+    title,
+    ...restProps
+  } = props;
+  const { getLocale, getLocaleEnv } = getEngineApis?.() || {};
+  const [show, setShow] = useToggleBoolean(visible);
+  const [hourMinuteData, setHourMinuteData] = useState<any[]>([]);
+  const [hourMinuteValue, setHourMinuteValue] = useState<any[]>([0, 0]);
+  const lanv = getLocaleEnv?.();
+  const { showFormat: formatter } = useLocaleFormatter(newFormatter, lanv);
+
+  useImperativeHandle(ref, () => ({
+    visible: show,
+    setVisible: setShow,
+  }));
+
+  const labelRenderer = useCallback((type: string, data: number) => {
+    switch (type) {
+      case 'year':
+        return getLocale('DformRangePicker.year', `${data}年`, {
+          year: `${data}`,
+        });
+      case 'month':
+        return getLocale('DformRangePicker.month', `${data}月`, {
+          month: `${data}`,
+        });
+      case 'day':
+        return getLocale('DformRangePicker.day', `${data}日`, {
+          day: `${data}`,
+        });
+      case 'hour':
+        return getLocale('DformRangePicker.hour', `${data}时`, {
+          hour: `${data}`,
+        });
+      case 'minute':
+        return getLocale('DformRangePicker.minute', `${data}分`, {
+          minute: `${data}`,
+        });
+      case 'second':
+        return getLocale('DformRangePicker.second', `${data}秒`, {
+          second: `${data}`,
+        });
+      default:
+        return data;
+    }
+  }, []);
+
+  const [minDate, maxDate] = useMemo(() => {
+    if (dateRange === 'custom') {
+      let min: any = props.minDate;
+      let max: any = props.maxDate;
+      if (min === 'new Date();') {
+        min = new Date();
+      } else {
+        min = toDate(min);
+      }
+      if (max === 'new Date();') {
+        max = new Date();
+      } else {
+        max = toDate(max);
+      }
+      return [min, max];
+    }
+    return [subtractDate(new Date(), dateRange, 'months'), new Date()];
+  }, [dateRange, props.maxDate, props.minDate]) as any;
+
+  const precision = useMemo(() => {
+    let value = '';
+    // eslint-disable-next-line default-case
+    switch (mode) {
+      case 'datetime':
+        value = 'minute';
+        break;
+      case 'date':
+        value = 'day';
+        break;
+      case 'month':
+        value = 'month';
+        break;
+      case 'year':
+        value = 'year';
+        break;
+      case 'time':
+        value = 'minuteHour';
+        break;
+    }
+    return value;
+  }, [mode]);
+
+  const onClose = () => {
+    setShow(false);
+  };
+
+  useEffect(() => {
+    if (precision === 'minuteHour') {
+      const hours = [];
+      const minutes = [];
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < 24; i++) {
+        hours.push({
+          label: getLocale('DformRangePicker.hour', `${i}时`, { hour: `${i}` }),
+          value: i,
+        });
+      }
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < 60; i++) {
+        minutes.push({
+          label: getLocale('DformRangePicker.minute', `${i}分`, {
+            minute: `${i}`,
+          }),
+          value: i,
+        });
+      }
+      setHourMinuteData([hours, minutes]);
+
+      if (value) {
+        let myValue: any = dateToFormatter('HH:mm', toDate(value));
+        myValue = myValue?.split(':');
+        if (Array.isArray(myValue) && myValue.length > 1) {
+          setHourMinuteValue([Number(myValue[0]), Number(myValue[1])]);
+        }
+      }
+    }
+  }, [precision]);
+
+  return (
+    <FormItem>
+      {/* <DatePicker
+        {...restProps}
+        visible={show}
+        value={toDate(value)}
+        minDate={minDate}
+        maxDate={maxDate}
+        onDismiss={onClose}
+        onOk={(val: Date) => {
+          onClose();
+          if (onChange) {
+            onChange(dateToFormatter(formatter, val));
+          }
+        }}
+      /> */}
+      {precision !== 'minuteHour' && (
+        <DatePicker
+          {...restProps}
+          visible={show}
+          title={title}
+          value={toDate(value)}
+          // @ts-ignore
+          precision={precision}
+          cancelText={getLocale?.('cancelText', '取消')}
+          confirmText={getLocale?.('confirm', '确定')}
+          min={minDate}
+          max={maxDate}
+          onClose={onClose}
+          renderLabel={labelRenderer}
+          onConfirm={(val: Date) => {
+            onClose();
+            if (onChange) {
+              onChange(dateToFormatter(formatter, val));
+            }
+          }}
+        />
+      )}
+      {precision === 'minuteHour' && (
+        <Picker
+          columns={hourMinuteData}
+          visible={show}
+          onClose={onClose}
+          title={title}
+          cancelText={getLocale?.('cancelText', '取消')}
+          confirmText={getLocale?.('confirm', '确定')}
+          value={hourMinuteValue}
+          onConfirm={(val: any) => {
+            setHourMinuteValue(val);
+            let date: any = dateToFormatter('yyyy-MM-DD', new Date());
+            date = `${date} ${val[0]}:${val[1]}`;
+            date = toDate(date);
+            onClose();
+            if (onChange) {
+              onChange(dateToFormatter(formatter, date));
+            }
+          }}
+        />
+      )}
+    </FormItem>
+  );
+});
+
+MyDatePicker.displayName = 'InnerDatePicker';
+
+export default MyDatePicker;

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

@@ -0,0 +1,13 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import DformCustom from '../DformCustom';
+import InnerDatePicker from './InnerDatePicker';
+
+const DatePicker = LingxiForwardRef<any, any>((props, ref) => {
+  return (
+    <DformCustom.Item showError={false}>
+      <InnerDatePicker {...props} ref={ref} />
+    </DformCustom.Item>
+  );
+});
+
+export default DatePicker;

package/lib/h5public/src/components/factory/src/DformCustom/Context.tsx

@@ -0,0 +1,31 @@
+import type { FormInstance } from 'rc-field-form';
+import React from 'react';
+
+export interface DFormCustomContextProviderType {
+  inCustomForm: true;
+  name: string;
+  error: any;
+  onChange: (...v: any[]) => void;
+  disabled?: boolean;
+  getRules: ({ compName }?: any) => any;
+  visible: boolean;
+  value: unknown;
+  message?: string;
+  form: FormInstance;
+}
+
+const DFormCustomContext = React.createContext<
+  DFormCustomContextProviderType | { inCustomForm: false }
+>({
+  inCustomForm: false,
+});
+
+DFormCustomContext.displayName = 'DFormCustomContext';
+
+const DFormCustomProvider = DFormCustomContext.Provider;
+
+const useDformCustom = () => {
+  return React.useContext(DFormCustomContext);
+};
+
+export { DFormCustomContext, useDformCustom, DFormCustomProvider };

package/lib/h5public/src/components/factory/src/DformCustom/FormCustomField.tsx

@@ -0,0 +1,97 @@
+import { Form } from '@lingxiteam/dform';
+import { EngineApisType } from '@lingxiteam/types';
+import { isFunction } from 'lodash';
+import React, { FC, useMemo } from 'react';
+import { useDeepCompareEffect } from '../utils/ahooks';
+import { useDformCustom } from './Context';
+import './index.less';
+
+interface FormCustomFieldType {
+  children: React.ReactElement;
+  showError?: boolean;
+  trigger?: string;
+  valuePropName?: string;
+  getEngineApis?: () => Required<EngineApisType>;
+}
+
+interface ErrorBlockType {
+  error: any;
+}
+
+const ErrorBlock: FC<ErrorBlockType> = ({ error }) => {
+  return error ? (
+    <div className="lcdp-dform-custom-error-text">{error}</div>
+  ) : null;
+};
+
+const FormCustomField: FC<FormCustomFieldType> = (props) => {
+  const {
+    children,
+    showError,
+    valuePropName = 'value',
+    trigger = 'onChange',
+    getEngineApis,
+  } = props;
+  const formContext = useDformCustom();
+  const { compatConfig } = getEngineApis?.() || {};
+  if (!formContext.inCustomForm) {
+    return children;
+  }
+
+  const { name, error, disabled, onChange, getRules, visible, message, form } =
+    formContext;
+
+  // 兼容表单行容器没有放到表单内，拖拽画布出现bug，导致存在这种数据。
+  if (!form) {
+    return children;
+  }
+
+  const childProps = children.props || {};
+  const { disabled: childDisabled } = childProps;
+  const triggerHandle = childProps[trigger];
+  const value = childProps[valuePropName];
+
+  useDeepCompareEffect(() => {
+    form?.setFieldValue(name, value);
+  }, [value]);
+
+  const rules = useMemo(() => {
+    if (visible) {
+      // 小于3.3.1 不进行校验，目前就图片需要传入
+      if (compatConfig?.dfromAllDisabled === true) {
+        return [];
+      }
+      return getRules();
+    }
+    return [];
+  }, [visible]);
+  return (
+    <>
+      <Form.DFormField
+        name={name}
+        rules={rules}
+        valuePropName={valuePropName}
+        trigger={trigger}
+      >
+        {React.cloneElement(children, {
+          [trigger]: (...e: any[]) => {
+            if (isFunction(triggerHandle)) {
+              triggerHandle(...e);
+            }
+            if (isFunction(onChange)) {
+              onChange(...e);
+            }
+          },
+          [valuePropName]: value,
+          disabled: disabled || childDisabled,
+          rules: visible ? getRules() : [],
+        })}
+      </Form.DFormField>
+      {showError && (
+        <ErrorBlock error={error?.[name] ? message || error?.[name] : ''} />
+      )}
+    </>
+  );
+};
+
+export default FormCustomField;

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

@@ -0,0 +1,11 @@
+
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+@prefixCls: lcdp-dform-custom;
+
+.@{prefixCls}-error-text {
+  color: #FF7474;
+  font-size: 12 * @hd;
+  padding: 4 * @hd 0;
+  flex-direction: row-reverse;
+}

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

@@ -0,0 +1,78 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React from 'react';
+import { DFormWrapper, FormItem } from '../BasicComponents';
+import { useFormItem, UseFormItemProps } from '../utils/hooks/useFormItem';
+import {
+  DFormCustomContextProviderType,
+  DFormCustomProvider,
+  useDformCustom,
+} from './Context';
+import FormCustomField from './FormCustomField';
+
+export interface MyDformCustomProps extends UseFormItemProps {
+  style?: React.CSSProperties;
+  regexp: any;
+  message: string;
+  children: any;
+  title: any;
+  supportComps: any;
+  compNameKey: any;
+  onChange: () => void;
+}
+
+const DformCustom = LingxiForwardRef<any, MyDformCustomProps>((props, ref) => {
+  const {
+    style,
+    fieldProps,
+    getEngineApis,
+    // supportComps = ['Star', 'Image', 'Calendar', 'DatePicker', 'Picker', 'Input'],
+  } = props;
+
+  // 这个禁用可能来自表单
+  const {
+    disabled,
+    visible = true,
+    onInputChange,
+    error,
+    getRules,
+    val,
+    form,
+  } = useFormItem(ref, props);
+
+  const values: DFormCustomContextProviderType = {
+    inCustomForm: true,
+    name: fieldProps!,
+    error,
+    onChange: onInputChange,
+    disabled,
+    getRules: visible ? getRules : () => [],
+    visible,
+    value: val,
+    message: props.message,
+    form: form!,
+  };
+
+  return (
+    <FormItem>
+      <DFormWrapper visible={visible} getEngineApis={getEngineApis}>
+        <div id={`lcdp-form-item-${fieldProps}`} style={style}>
+          <DFormCustomProvider value={values}>
+            {props.children}
+          </DFormCustomProvider>
+        </div>
+      </DFormWrapper>
+    </FormItem>
+  );
+});
+
+DformCustom.displayName = 'dformCustom';
+
+(DformCustom as any).useDformCustom = useDformCustom;
+(DformCustom as any).Item = FormCustomField;
+
+const instance = DformCustom as typeof DformCustom & {
+  useDformCustom: typeof useDformCustom;
+  Item: typeof FormCustomField;
+};
+
+export default instance as any;