@lingxiteam/ebe-utils 0.0.9 → 0.0.11

package/lib/pcpublic/src/components/pcfactory/src/utils/hooks/useCommonImperativeHandle.ts

@@ -0,0 +1,140 @@
+import React, { useEffect, useImperativeHandle } from 'react';
+import { MonitorFn, useForm } from '../formUtils/FormContext';
+import { FormFieldsHooks } from '../formUtils/FormFields';
+import { useListenProps } from './useListenState';
+import { useLocale } from './useLocale';
+import useRules, { RuleInterface } from './useRules';
+
+/**
+ *
+ * @param ref ref
+ * @param handle 额外的方法
+ * @param depends 依赖监听
+ */
+export const useCommonImperativeHandle = (
+  ref: any,
+  props: any,
+  handle: any = {},
+) => {
+  const {
+    disabled: propsDisabled,
+    required: propsRequired,
+    readOnly: propsReadOnly,
+    getEngineApis,
+  } = props;
+
+  const engineApis = getEngineApis();
+
+  const formContext = useForm();
+
+  const formFieldsRef = React.createRef<FormFieldsHooks>();
+
+  // 控件禁用状态
+  const [disabled, setDisabled] = useListenProps<boolean>(propsDisabled);
+
+  // 设置必填
+  const [required, setRequired] = useListenProps<boolean>(propsRequired);
+
+  const [readOnly, setReadOnly] = useListenProps<boolean>(propsReadOnly);
+
+  const { getLocale, lang } = useLocale(engineApis);
+
+  // 通用规则生成
+  const [finalRules, setExtendRules] = useRules(
+    {
+      required,
+      regexp: props.regexp,
+      rules: props.rules,
+      message: props.message,
+      name: props.name,
+    },
+    getLocale,
+    lang,
+  );
+
+  const clearValue = () => {
+    let initValue: any = '';
+    if (handle && handle.hasOwnProperty('clearValue')) {
+      // 如果存在clearValue 并且clearValue 是方法的时候执行, 否则就是值
+      if (typeof handle.clearValue === 'function') {
+        handle.clearValue();
+        return;
+      }
+      // 说明是值的情况
+      initValue = handle.clearValue;
+    }
+    // 默认清空成空字符串
+    if (typeof engineApis?.onlySyncValue === 'function') {
+      engineApis?.onlySyncValue(initValue);
+    } else {
+      props?.onChange(initValue);
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    disabled,
+    setDisabled: (val: boolean | 'toggle') => {
+      setDisabled(val === 'toggle' ? !disabled : val);
+    },
+    required,
+    setRequired: (val: boolean | 'toggle') => {
+      setRequired(val === 'toggle' ? !required : val);
+    },
+    readOnly,
+    setReadOnly: (val: boolean | 'toggle') => {
+      setReadOnly(val === 'toggle' ? !readOnly : val);
+    },
+    changeValidateStatus: formFieldsRef.current?.changeValidateStatus,
+    ...handle,
+    clearValue,
+    // 同步hoc vlaue使用，目前在设置表单数据的时候需要同步使用
+    onlySyncValue: (initValue: any) => {
+      if (typeof engineApis?.onlySyncValue === 'function') {
+        engineApis?.onlySyncValue(initValue);
+      }
+    },
+
+    /**
+     *  追加rules，目前只有在零代码使用
+     * @param newRules
+     * @param isAppendLastTime 是否累计上一次的
+     */
+    appendRules: (
+      newRules: RuleInterface[],
+      isAppendLastTime: boolean = true,
+    ) => {
+      setExtendRules(newRules, isAppendLastTime);
+    },
+  }));
+
+  /**
+   * 表单被设置禁用 只读时同步更新子组件状态
+   */
+  useEffect(() => {
+    const fn: MonitorFn = (value, type) => {
+      if (type === 'disabled') {
+        setDisabled(!!value);
+      } else if (type === 'readonly') {
+        setReadOnly(!!value);
+      }
+    };
+    if (formContext.inForm && formContext.statusMonitor) {
+      formContext.statusMonitor.addListener(fn);
+      return () => {
+        formContext.statusMonitor.removeListener(fn);
+      };
+    }
+    return () => {};
+  }, []);
+
+  return {
+    disabled,
+    required,
+    formFieldsRef,
+    finalRules,
+    setExtendRules,
+    readOnly: formContext.inForm && formContext.printMode ? true : readOnly,
+  };
+};
+
+export default useCommonImperativeHandle;

package/lib/pcpublic/src/components/pcfactory/src/utils/hooks/useCompState.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+
+export 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, tip } = props;
+  const state = useMemo(() => dataState?.[type], [dataState?.[type]]);
+
+  const stateTip = useMemo(
+    () => renderHTML(tip || state?.tip),
+    [state?.tip, 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/pcpublic/src/components/pcfactory/src/utils/hooks/useDataMask.ts

@@ -0,0 +1,83 @@
+import { useMemo } from 'react';
+import { useCreation } from '../ahooks';
+
+export const useDataMask = ({
+  getEngineApis,
+  dataMask,
+  defaultValue,
+  value,
+}: {
+  getEngineApis: any;
+  dataMask: any;
+  defaultValue: any;
+  value: any;
+}) => {
+  /**
+   * isMask 是否配置了脱敏规则
+   * maskValue 脱敏数据
+   * maskStatus 脱敏状态开启
+   * getMaskData 将数据脱敏
+   */
+  const maskData = useCreation<{
+    isMask: boolean;
+    defaultMaskValue: any;
+    maskValue: any;
+    getMaskData(value: any): any;
+    init: boolean;
+  }>(() => {
+    const { functorsMap } = getEngineApis() || {};
+    if (!functorsMap?.DATAMASK || !dataMask) {
+      return {
+        isMask: false,
+        defaultMaskValue: defaultValue,
+        maskValue: value,
+        getMaskData: (val) => val,
+        init: false,
+      };
+    }
+
+    const defaultMaskValue =
+      defaultValue !== undefined
+        ? functorsMap.DATAMASK(defaultValue || '', dataMask)
+        : defaultValue;
+    return {
+      isMask: true,
+      defaultMaskValue,
+      maskValue:
+        value !== undefined
+          ? functorsMap.DATAMASK(value || '', dataMask)
+          : defaultMaskValue,
+      getMaskData(value) {
+        return functorsMap.DATAMASK(value, dataMask);
+      },
+      init: false,
+    };
+  }, []);
+
+  const maskValue = useMemo(() => {
+    if (maskData.isMask) {
+      if (!maskData.init) {
+        maskData.init = true;
+        return value;
+      }
+      if (maskData.maskValue !== value) {
+        maskData.maskValue = maskData.getMaskData(value);
+      }
+      return maskData.maskValue;
+    }
+    return value;
+  }, [value]);
+
+  return {
+    maskData,
+    disableMastStatus: () => {
+      maskData.isMask = false;
+    },
+    maskValue: !maskData.isMask ? value : maskValue,
+    defaultMaskValue: !maskData.isMask
+      ? defaultValue
+      : maskData.defaultMaskValue,
+  };
+};
+
+export default useDataMask;

package/lib/pcpublic/src/components/pcfactory/src/utils/hooks/useDoubleClick.ts

@@ -0,0 +1,63 @@
+import { MouseEventHandler, useEffect, useRef } from 'react';
+
+export interface DoubleClickProps {
+  events: Record<string, MouseEventHandler<HTMLElement> | undefined>;
+  clickName: string;
+  doubleClickName: string;
+}
+
+/**
+ * 双击事件处理逻辑
+ */
+const useDoubleClick = ({
+  events = {},
+  clickName = 'onClick',
+  doubleClickName = 'onDoubleClick',
+}: DoubleClickProps) => {
+  const clickTimerRef = useRef<any>(null);
+  const recordClickTimesRef = useRef(0);
+
+  // 不存在双击事件时，单击事件不做任何处理
+  if (!events[doubleClickName]) {
+    return {
+      [clickName]: events[clickName],
+      [doubleClickName]: events[doubleClickName],
+    };
+  }
+
+  // 重置点击参数
+  const resetClickParams = () => {
+    if (clickTimerRef.current) {
+      clearTimeout(clickTimerRef.current);
+      clickTimerRef.current = null;
+      recordClickTimesRef.current = 0;
+    }
+  };
+
+  useEffect(() => resetClickParams, []);
+
+  // 存在双击事件
+  const target: DoubleClickProps['events'] = {
+    [clickName]: (...args) => {
+      recordClickTimesRef.current += 1;
+
+      if (!clickTimerRef.current && recordClickTimesRef.current === 1) {
+        clickTimerRef.current = setTimeout(() => {
+          if (recordClickTimesRef.current === 1) {
+            // 如果在一定时间内只点击了一次，则认为是单击事件
+            events[clickName]?.(...args);
+            resetClickParams();
+          }
+        }, 300); // 延迟时间
+      }
+
+      if (recordClickTimesRef.current === 2) {
+        events[doubleClickName]?.(...args);
+      }
+    },
+  };
+
+  return target;
+};
+
+export default useDoubleClick;

package/lib/pcpublic/src/components/pcfactory/src/utils/hooks/useFuncExpExecute.ts

@@ -0,0 +1,86 @@
+import { useCallback } from 'react';
+
+export type FuncExpExeCuteType = (
+  str: string,
+  params: { key: string; value: any }[],
+  execute?: Function,
+  getLocale?: Function,
+) => any;
+
+const funcExpExeCute: FuncExpExeCuteType = (
+  str,
+  params,
+  execute,
+  getLocale?: Function,
+) => {
+  if (!str) return '';
+
+  let codeStr = str;
+
+  try {
+    if (params && Array.isArray(params)) {
+      const isArrowFunc = codeStr.indexOf('=>') !== -1;
+
+      if (isArrowFunc) {
+        const [funcDefine, funcBody] = codeStr.split('=>');
+        codeStr = `function ${funcDefine} ${funcBody}`;
+      }
+
+      const codeFunc = execute?.(codeStr);
+
+      if (typeof codeFunc !== 'function') {
+        throw new Error(
+          getLocale?.('functionWarning') || '必须为函数声明的表达式',
+        );
+      }
+
+      let funcParams: any = [];
+
+      /**
+       * TODO: 目前已知的，表格/描述列表/树形控件自定义渲染存在参数格式：
+       * 1、存量数据：(text, row/item, index)   注：表格为 row，描述列表/树形控件为 item
+       * 2、新数据：(renderParams)
+       * 所以，需要兼容两种参数格式解析，在这边临时处理强行弥补
+       */
+      if (!str.match(/function.*\(renderParams\)/g)) {
+        funcParams = params.map((param) => param.value);
+      } else {
+        const objParam: any = {};
+
+        params.forEach((param) => {
+          objParam[param.key] = param.value;
+        });
+
+        funcParams = objParam;
+      }
+
+      if (funcParams && Array.isArray(funcParams)) {
+        return codeFunc(...funcParams);
+      }
+
+      return codeFunc(funcParams);
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log('funcExpExeCute error:', error, str);
+    return '';
+  }
+
+  return '';
+};
+
+export const useFuncExpExecute = (executor: Function, getLocale?: any) => {
+  /**
+   * 执行表达式
+   * @param {string} str 函数表达式 字符串
+   * @param {array} params [{ key: '参数名', value: '参数实际值'}]
+   * @param {function} execute
+   * @returns
+   */
+  return useCallback(
+    (str, params) => {
+      return funcExpExeCute(str, params, executor, getLocale);
+    },
+    [executor],
+  );
+};

package/lib/pcpublic/src/components/pcfactory/src/utils/hooks/useGetStaticAttrData.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+
+// 静态页面查询静态数据
+const useGetStaticAttrData = ({
+  attrNbrs = [],
+  engineApis,
+}: {
+  attrNbrs: any;
+  engineApis?: any;
+}) => {
+  const [attrDataMap, setAttrDataMap] = useState<any>([]);
+
+  const getAttrData = async () => {
+    const attrCodes =
+      attrNbrs && attrNbrs.length ? attrNbrs?.filter((a: any) => a) : null;
+    if (!attrCodes || !attrCodes.length) {
+      return;
+    }
+    const attrMap: any = {};
+
+    const res = await engineApis?.service?.batchGetAppStaticAttr({
+      attrCodes,
+    });
+    Object.keys(res).forEach((key) => {
+      attrMap[key] = (res[key] || []).map((item: any) => ({
+        label: item.attrValueName,
+        value: item.attrValue,
+        relatedAttrSpecList: item.relatedAttrSpecList,
+      }));
+    });
+    setAttrDataMap(attrMap);
+  };
+
+  useEffect(() => {
+    getAttrData();
+  }, []);
+
+  return [attrDataMap];
+};
+
+export default useGetStaticAttrData;

package/lib/pcpublic/src/components/pcfactory/src/utils/hooks/useHiddenStyle.ts

@@ -0,0 +1,43 @@
+import { CSSProperties, useMemo } from 'react';
+
+/**
+ *
+ * @param visible 是否显示
+ * @param style 样式
+ * @param visibility 是否隐藏占位
+ * @returns
+ */
+const useHiddenStyle = (
+  visible: boolean,
+  style?: CSSProperties,
+  visibility?: boolean,
+) => {
+  const finalStyle = useMemo<CSSProperties>(() => {
+    if (!visible) {
+      if (style) {
+        const _style = { ...style };
+        if (visibility) {
+          _style.visibility = 'hidden';
+          _style.transform = 'opacity 0.3s ease';
+          _style.opacity = 0;
+        } else {
+          _style.display = 'none';
+        }
+        return _style;
+      }
+      if (visibility) {
+        return {
+          visibility: 'hidden',
+          transform: 'opacity 0.3s ease',
+          opacity: 0,
+        };
+      }
+      return { display: 'none' };
+    }
+    return style || {};
+  }, [visible, visibility]);
+
+  return finalStyle;
+};
+
+export default useHiddenStyle;

package/lib/pcpublic/src/components/pcfactory/src/utils/hooks/useInitReactQuill.ts

@@ -0,0 +1,90 @@
+import { message } from 'antd';
+import { useRef, useState } from 'react';
+import { useLocale } from './useLocale';
+
+const useInitReactQuill = (props: any) => {
+  const { engineApis } = props;
+
+  const quillRef: any = useRef(null);
+
+  const { getLocale } = useLocale(engineApis);
+
+  const imageHandler = () => {
+    const quillEditor = quillRef.current.getEditor();
+    const input: HTMLInputElement = document.createElement('input');
+    input.style.display = 'none';
+    input.setAttribute('type', 'file');
+    input.setAttribute('accept', '.jpg,.gif,.png');
+    input.click();
+    input.onchange = async () => {
+      const file: any = input.files && input.files[0];
+
+      // 文件名转成小写，防止.JPG 无法通过校验
+      if (!/\.(jpg|gif|png)$/.test(file.name.toLowerCase())) {
+        message.warn(getLocale('Quill.uploadImages'));
+        return;
+      }
+      if (file.size > 1000 * 3000) {
+        message.warn(getLocale('Quill.imageSizeLimit'));
+        return;
+      }
+      const formData = new FormData();
+      formData.append('attach', file, file.name);
+      if (engineApis?.service?.uploadFileByFetch) {
+        const res = await engineApis.service.uploadFileByFetch(formData);
+        if (res?.fileId) {
+          const range = quillEditor.getSelection();
+          const link = engineApis?.getAppFileUrlById(res?.fileId);
+          quillEditor.insertEmbed(range.index, 'image', link);
+        }
+      }
+    };
+  };
+
+  /**
+   * 用户给文字添加链接时，需选中文字，之前无提醒，操作比较隐蔽，故增加选中文字提醒
+   */
+  const linkHandler = (value: boolean) => {
+    const quillEditor = quillRef?.current?.getEditor();
+    if (value) {
+      const range = quillEditor?.getSelection();
+      let preview = quillEditor?.getText(range);
+      if (range == null || range.length === 0 || !preview) {
+        message.info(getLocale('Quill.selectZh'));
+      } else if (preview) {
+        if (
+          /^\S+@\S+\.\S+$/.test(preview) &&
+          preview.indexOf('mailto:') !== 0
+        ) {
+          preview = `mailto:${preview}`; // 电子邮件
+        }
+        const { tooltip } = quillEditor.theme;
+        tooltip.edit('link', preview);
+      }
+    } else {
+      quillEditor?.format('link', false);
+    }
+  };
+  // 当react-quill同时设置了modules-toolbar-handlers(而且是使用const定义modules的情况下)和onChange， 并且onChange中包含修改状态的行为， 就会触发输入时会自动失去焦点的bug
+  // react-quill issue：https://github.com/zenoamaro/react-quill/issues/556
+  // 目前解决办法： 把modules用state来存储， 在组件加载完成后再修改状态能够避免
+  const [modules] = useState({
+    toolbar: {
+      container: [
+        [{ header: [1, 2, false] }],
+        ['bold', 'italic', 'underline'],
+        [{ color: [] }],
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        ['link', 'image'],
+      ],
+      handlers: {
+        image: imageHandler,
+        link: linkHandler,
+      },
+    },
+  });
+
+  return [quillRef, modules];
+};
+
+export default useInitReactQuill;

package/lib/pcpublic/src/components/pcfactory/src/utils/hooks/useListenState.ts

@@ -0,0 +1,26 @@
+import { usePrevious, useSafeState, useUpdateEffect } from '../ahooks';
+
+/**
+ * 属性值变化调用方法更新
+ * @param value
+ * @param setValue
+ */
+export function useListenState<T>(propsValue: T): [T, (data: T) => void] {
+  const [value, setValue] = useSafeState(propsValue);
+
+  const preValue = usePrevious(propsValue);
+
+  return [preValue !== propsValue ? propsValue : value, setValue];
+}
+
+export default useListenState;
+
+export function useListenProps<T>(propsValue: T): [T, (data: T) => void] {
+  const [value, setValue] = useSafeState(propsValue);
+
+  useUpdateEffect(() => {
+    setValue(propsValue);
+  }, [JSON.stringify(propsValue)]);
+
+  return [value, setValue];
+}