@lingxiteam/ebe-utils 0.0.9 → 0.0.10

package/lib/h5public/src/components/factory/src/utils/date.ts

@@ -0,0 +1,146 @@
+import moment from 'moment';
+import { useMemo } from 'react';
+
+type toDateFunction = (
+  dateString?: string,
+  format?: string | string[],
+) => Date | undefined;
+
+/**
+ * moment 识别日期含有年月日中文的情况，Invalid Date
+ * @param dataStr
+ * @returns
+ */
+export const clearChineseStr = (
+  dataStr: string,
+  replaceString: string = '-',
+) => {
+  let targetStr = dataStr;
+  if (targetStr) {
+    if (targetStr.includes('年')) {
+      targetStr = targetStr.replace(/年/g, replaceString);
+    }
+    if (targetStr.includes('月')) {
+      targetStr = targetStr.replace(/月/g, replaceString);
+    }
+    if (targetStr.includes('日')) {
+      targetStr = targetStr.replace(/日/g, '');
+    }
+  }
+  return targetStr;
+};
+
+/**
+ * 转化成Date格式
+ * @param dateString 时间字符串
+ * @returns
+ */
+export const toDate: toDateFunction = (
+  dateString,
+  format?: string | string[],
+) => {
+  if (dateString) {
+    if (typeof dateString === 'string') {
+      // 根据格式严格转换，转换失败时采用内置标准格式转换
+      const date = moment(clearChineseStr(dateString), format, true)?.isValid()
+        ? moment(clearChineseStr(dateString), format)
+        : moment(clearChineseStr(dateString));
+      return date.toDate();
+    }
+    return dateString;
+  }
+  return undefined;
+};
+
+/**
+ * 获取距离某个时间的指定日期，例如：距离当前时间6个月的日期  subtractDate(new Date(), 6, 'months');
+ * @param date 指定日期
+ * @param amount 长度
+ * @param unit 单位
+ * @returns
+ */
+export const subtractDate = (
+  date: moment.MomentInput,
+  amount: moment.DurationInputArg1,
+  unit: moment.DurationInputArg2,
+) => {
+  return moment(date).subtract(amount, unit).toDate();
+};
+
+/**
+ * date格式化
+ * @param formatter 格式化字符串 如：yyyy-MM-dd
+ * @param date 日期
+ * @param valueFormat 取值格式，根据取值格式转换值
+ * @returns
+ */
+export const dateToFormatter = (
+  formatter: string,
+  date?: Date | string,
+  valueFormat?: string | undefined,
+) => {
+  if (!date) {
+    return undefined;
+  }
+  const format: string[] = [formatter];
+  const transferFormat = valueFormat || formatter;
+  if (valueFormat) {
+    format.push(valueFormat);
+  }
+  if (typeof date === 'string') {
+    return moment(toDate(date, format)).format(transferFormat);
+  }
+  return moment(date, format).format(transferFormat);
+};
+
+// 标准格式对应值
+export const STANDARD_FORMAT: Record<string, string> = {
+  date: 'YYYY-MM-DD',
+  time: 'YYYY-MM-DD HH:mm:ss',
+  month: 'YYYY-MM',
+  year: 'YYYY',
+  onlyTime: 'HH:mm',
+  datetime: 'YYYY-MM-DD HH:mm:ss',
+};
+
+/**
+ *
+ * @param formatter 当前的时间格式化类型
+ * @param lanEnv 语言 'zh-CN', 'zh-HK', ''
+ * @returns
+ */
+export const useLocaleFormatter = (
+  formatter: string,
+  lanEnv: string | undefined,
+  standardFormat?: {
+    valueFormat?: 'standard' | 'show';
+    mode?: string;
+    extendStandardFormat?: Record<string, string>;
+  },
+) => {
+  const { valueFormat, mode, extendStandardFormat = {} } = standardFormat || {};
+  const myFormatter = useMemo(() => {
+    if (
+      typeof lanEnv === 'string' &&
+      !['zh-CN', 'zh-HK'].includes(lanEnv) &&
+      typeof formatter === 'string' &&
+      formatter.length > 0
+    ) {
+      return clearChineseStr(formatter, '/');
+    }
+    return formatter;
+  }, [lanEnv]);
+
+  // 取值格式可设置为展示格式或标准格式
+  const finalValueFormat = useMemo(() => {
+    if (valueFormat === 'standard') {
+      const FORMAT = { ...STANDARD_FORMAT, ...extendStandardFormat };
+      return FORMAT[mode || 'date'] || myFormatter;
+    }
+    return myFormatter;
+  }, [valueFormat, mode, myFormatter]);
+  return {
+    showFormat: myFormatter,
+    valueFormat: finalValueFormat,
+  };
+};

package/lib/h5public/src/components/factory/src/utils/dynamicUtils/DynamicContext.tsx

@@ -0,0 +1,106 @@
+import { createContext, useContext } from 'react';
+
+export interface DynamicDataContext {
+  /**
+   * 是否在动态数据容器内
+   */
+  _innerDynamicDataContainer: boolean;
+
+  /**
+   * 动态数据容器内表单引用集合
+   */
+  formsRefMap: Record<string, any>;
+
+  /**
+   *
+   * @param formCode 动态数据编码
+   * @param formRef 表单引用
+   * @returns
+   */
+  updateFormChildRef: (formCode: string, formRef: any) => void;
+
+  /**
+   * 表单内容变动回调
+   * @param formCode 表单编码
+   * @param changedFieldName 表单变动字段
+   * @param changedFieldValue 表单变动值
+   * @returns
+   */
+  onFormChange: (
+    formCode: string,
+    changedFieldName: string,
+    changedFieldValue: unknown,
+  ) => void;
+
+  /**
+   * 表单，目前提供给自定义组件使用
+   */
+  form: {
+    /**
+     * 获取动态容器表单值
+     * @returns
+     */
+    getFieldsValue: () => Record<string, any>;
+
+    /**
+     * 重置动态容器
+     * @returns
+     */
+    resetFields: () => void;
+
+    /**
+     * 设置表单值
+     * @param assignData
+     * @returns
+     */
+    setFieldsValue: (assignData: Record<string, unknown>) => void;
+
+    /**
+     * 监听表单值变化
+     * @param formCode
+     * @param fieldCode
+     * @returns
+     */
+    useWatch: (formCode: string, fieldCode: string) => unknown;
+  };
+}
+
+export interface NoopInDynamicContainerProps {
+  /**
+   * 是否在动态数据容器内
+   */
+  _innerDynamicDataContainer: false;
+
+  form: DynamicDataContext['form'];
+}
+
+export const dynamicDataContext = createContext<
+  DynamicDataContext | NoopInDynamicContainerProps
+>({
+  _innerDynamicDataContainer: false,
+  form: {
+    getFieldsValue: () => {
+      console.warn('请在动态容器下使用getFieldsValue方法');
+      return {};
+    },
+    resetFields: () => {
+      console.warn('请在动态容器下使用resetFields方法');
+    },
+    setFieldsValue: () => {
+      console.warn('请在动态容器下使用resetFields方法');
+    },
+    useWatch: (formCode: string, fieldCode: string) => {
+      console.warn('请在动态容器下使用useWatch方法');
+    },
+  },
+});
+
+dynamicDataContext.displayName = 'FactoryDynamicDataContext';
+
+const useDynamicData = () => {
+  return useContext(dynamicDataContext);
+};
+
+const DynamicDataProvider = dynamicDataContext.Provider;
+
+export { DynamicDataProvider, useDynamicData };

package/lib/h5public/src/components/factory/src/utils/form.ts

@@ -0,0 +1,146 @@
+import { FormInstance } from 'rc-field-form';
+import React from 'react';
+
+export type StatusType = 'disabled' | 'readonly';
+
+export type MonitorFn = (v: unknown, type: StatusType) => void;
+export interface DFormContextProps {
+  visible?: boolean;
+  isForm?: boolean;
+  error?: any;
+  form?: FormInstance;
+  formListRef?: any;
+  allDisabled?: boolean;
+
+  /**
+   * 上报组件id 和fieldProps
+   */
+  uploadChildRelation: (id: string, fieldProps: string) => void;
+
+  /**
+   * 状态下发
+   */
+  statusMonitor?: {
+    addListener: (fn: MonitorFn) => void;
+    removeListener: (fn: MonitorFn) => void;
+  };
+}
+// @ts-ignore
+export const DFormContext = React.createContext<DFormContextProps>({});
+
+export const formSubmit = async (
+  form: {
+    submit: (
+      arg0: (value: unknown) => void,
+      arg1: (reason?: any) => void,
+      arg2: any,
+    ) => void;
+  },
+  isFormList: boolean,
+) =>
+  new Promise((resolve, reject) => {
+    form.submit(resolve, reject, isFormList);
+  });
+export const formGetFieldsValue = async (
+  form: {
+    getFieldsValue: (
+      arg0: (value: unknown) => void,
+      arg1: (reason?: any) => void,
+      arg2: any,
+    ) => void;
+  },
+  isFormList: boolean,
+) =>
+  new Promise((resolve, reject) => {
+    form.getFieldsValue(resolve, reject, isFormList);
+  });
+
+export const getListAllForms = (refs: Record<string, any>) => {
+  const forms: any[] = [];
+  Object.keys(refs).forEach((key) => {
+    const compImperativeMethods = refs[key];
+    if (
+      compImperativeMethods?.name === 'DForm' &&
+      typeof compImperativeMethods.submit === 'function'
+    ) {
+      forms.push(compImperativeMethods);
+    }
+  });
+  return forms;
+};
+
+/**
+ * 获取所有表单的数组
+ * @param {*} callback (formValues: Array) => void;
+ * @param {*} refs
+ */
+export const validateAndSubmitFormList = async (refs = {}) => {
+  const forms = getListAllForms(refs);
+  const actions = forms.map((form) => formSubmit(form, true));
+  return Promise.all(actions);
+};
+
+export const validateAndGetFieldsValueFormList = async (refs = {}) => {
+  const forms = getListAllForms(refs);
+  const actions = forms.map((form) => formGetFieldsValue(form, true));
+  return Promise.all(actions);
+};
+
+export const dformTypes = [
+  {
+    title: '单行输入',
+    value: 'DformInput',
+  },
+  {
+    title: '复选框',
+    value: 'DCheckbox',
+  },
+  {
+    title: '单选框',
+    value: 'DformRadio',
+  },
+  {
+    title: '多行输入',
+    value: 'DformTextArea',
+  },
+  {
+    title: '滑动开关',
+    value: 'DformSwitch',
+  },
+  {
+    title: '地址',
+    value: 'DAddressPicker',
+  },
+  {
+    title: '多列选择',
+    value: 'DformSelect',
+  },
+  {
+    title: '单项选择',
+    value: 'DformPicker',
+  },
+  {
+    title: '多项选择',
+    value: 'DMultiplePicker',
+  },
+  {
+    title: '上传图片',
+    value: 'DformImagePicker',
+  },
+  {
+    title: '上传附件',
+    value: 'DformFile',
+  },
+  {
+    title: '时间选择',
+    value: 'DformDate',
+  },
+  {
+    title: '数字输入',
+    value: 'DformInputNumber',
+  },
+  {
+    title: '评分',
+    value: 'Star',
+  },
+];

package/lib/h5public/src/components/factory/src/utils/getExportDefaultObj.ts

@@ -0,0 +1,11 @@
+export const getExportDefaultObj = (obj: any) => {
+  if (typeof obj === 'object') {
+    if (
+      obj.__esModule === true &&
+      Object.prototype.hasOwnProperty.call(obj, 'default')
+    ) {
+      return obj.default;
+    }
+  }
+  return obj;
+};

package/lib/h5public/src/components/factory/src/utils/getImageSize.ts

@@ -0,0 +1,19 @@
+const getImageSize = async (
+  url: string,
+): Promise<{ width: number; height: number }> => {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.src = url;
+    image.onload = () => {
+      resolve({
+        width: image.width,
+        height: image.height,
+      });
+    };
+    image.onerror = (err) => {
+      reject(err);
+    };
+  });
+};
+
+export { getImageSize };

package/lib/h5public/src/components/factory/src/utils/hooks/useAsyncState.ts

@@ -0,0 +1,33 @@
+import { isEqual } from 'lodash';
+import { useEffect, useMemo, useRef } from 'react';
+import { SetState, useSetState } from '../ahooks';
+
+const useAsyncState = <S extends Record<string, any>>(
+  depth: S,
+): [S, SetState<S>] => {
+  const [state, setState] = useSetState(depth);
+
+  const preDepthRef = useRef<any[]>([]);
+
+  const depthList = useMemo(() => {
+    const values: any[] = [];
+    Object.keys(depth).forEach((key) => {
+      values.push(key);
+    });
+
+    if (isEqual(preDepthRef.current, values)) {
+      return preDepthRef.current;
+    }
+
+    preDepthRef.current = values;
+    return values;
+  }, [depth]);
+
+  useEffect(() => {
+    setState(depth);
+  }, depthList);
+
+  return [state, setState];
+};
+
+export default useAsyncState;

package/lib/h5public/src/components/factory/src/utils/hooks/useCompState.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+
+const renderHTML = (des: string) => {
+  if (des) {
+    // eslint-disable-next-line react/no-danger
+    return (
+      <span
+        dangerouslySetInnerHTML={{ __html: des }}
+        style={{ display: 'flex', justifyContent: 'center' }}
+      />
+    );
+  }
+  return null;
+};
+
+interface CompStateProps {
+  dataState: any;
+  type: 'loading' | 'empty';
+  tip?: string;
+}
+
+const useCompState = (props: CompStateProps) => {
+  const { dataState, type } = props;
+  const state = useMemo(() => dataState?.[type], [dataState?.[type]]);
+
+  const stateTip = useMemo(() => renderHTML(state?.tip), [state?.tip]);
+
+  const stateIcon = useMemo(() => {
+    if (state?.iconIsCustom && state?.icon) {
+      return renderHTML(state.icon);
+    }
+    return null;
+  }, [state?.iconIsCustom, state?.icon]);
+
+  return {
+    stateIcon,
+    stateTip,
+  };
+};
+
+export default useCompState;

package/lib/h5public/src/components/factory/src/utils/hooks/useDefaultValue.ts

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+
+/**
+ * 适用于[{label:"xxx", value: "xxx"}] 数据类型的控件，比如多项选择，复选框, 多列选择, 地址选择
+ * @param defaultValue
+ * @param max 最大数
+ * @returns
+ */
+const useDefaultValue = (temDefaultValue: any, max?: number) => {
+  const finalDefaultValue = useMemo(() => {
+    let defaultValue = temDefaultValue;
+    try {
+      // 如果是json字符串
+      defaultValue = JSON.parse(temDefaultValue);
+      // 不属于对象并且数组的时候，使用原来字符串的值
+      if (typeof defaultValue !== 'object') {
+        defaultValue = temDefaultValue;
+      }
+    } catch {
+      defaultValue = temDefaultValue;
+    }
+    // 对应数据格式时1,2 逗号分隔字符串
+    if (typeof defaultValue === 'string' && defaultValue.length > 0) {
+      // eslint-disable-next-line camelcase
+      const new_val = `${defaultValue}`
+        ?.replace(/(^\[)|(\]$)/g, '')
+        ?.split(',');
+      // eslint-disable-next-line camelcase
+      return Array.isArray(new_val) && max ? new_val.slice(0, max) : new_val;
+    }
+    if (Array.isArray(defaultValue)) {
+      const tem = max ? defaultValue.slice(0, max) : defaultValue;
+      // @ts-ignore
+      return tem.map((item) => item?.value || item);
+    }
+    if (Object.prototype.toString.call(defaultValue) === '[object Object]') {
+      return [defaultValue].map((item) => item?.value || item);
+    }
+    return [];
+  }, [temDefaultValue, max]);
+  return finalDefaultValue;
+};
+
+export default useDefaultValue;