@lingxiteam/ebe-utils 0.3.20 → 0.3.22

package/lib/public/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/public/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/public/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/public/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/public/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/public/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/public/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];
+}

package/lib/public/src/components/pcfactory/src/utils/hooks/useLocale.ts

@@ -0,0 +1,129 @@
+import { EngineApisType } from '@lingxiteam/types';
+
+const langOptions = {
+  loadingText: '加载中',
+  more: '更多',
+  all: '全选',
+  notEmpty: (params: any) => `${params.name}不能为空!`,
+  add: '添加',
+  delete: '删除',
+  edit: '编辑',
+  deleteConfirm: '确认删除吗？',
+  title: '标题',
+  nodeRule: '节点规则不正确，请使用node.字段名进行配置',
+  reset: '重置',
+  warnFormat: '格式不正确',
+  confirm: '确定',
+  detail: '详情',
+  save: '保存',
+  ctrl: '操作',
+  createNew: '新增',
+  selectPlaceholder: '请选择',
+  'Quill.uploadImages': '只能上传格式为.jpg,.gif,.png的图片',
+  'Quill.imageSizeLimit': '每张图片不能大于3000KB',
+  'Quill.selectZh': '请先选中文字，再点击链接',
+  'Tree.editingWarn': '没有正在操作的树节点',
+  'Audio.cannotPlay': '音频节点被移除,无法播放',
+  'Audio.cannotStop': '音频节点被移除,无法暂停',
+  'Audio.cannotSwitch': '音频节点被移除,无法切换',
+  'Audio.warning': '音频文件获取出错',
+  'checkboxGroup.minRule': (params: any) =>
+    `低于最小选项限制[最少选${params?.min}个]`,
+  'checkboxGroup.maxRule': (params: any) =>
+    `超过最大选项限制[最多选${params?.max}个]`,
+  'Icon.imgFormatWarning': '图片格式错误',
+  'Input.lenRule': (params: any) =>
+    `内容长度须大于等于${params?.minLength}且小于等于${params?.maxLength}`,
+  'Input.maxRule': (params: any) => `内容长度须小于等于${params?.maxLength}`,
+  'Input.minRule': (params: any) => `内容长度须大于等于${params?.minLength}`,
+  'Upload.download': '该文件正在下载，请耐心等待',
+  'Upload.readonly': '当前为只读状态，不允许上传或移除文件!',
+  'Upload.maxSize': (params: any) =>
+    `当前文件最大上传大小为${params?.singleFileMaxSize}，请重新上传`,
+  'Upload.minSize': (params: any) =>
+    `当前文件最小上传大小为${params?.singleFileMinSize}，请重新上传`,
+  'Upload.maxNum': (params: any) =>
+    `当前文件最大上传个数为${params?.numberLimit}，不允许继续上传`,
+  'Upload.format': (params: any) =>
+    `文件格式不正确，请上传${params?.acceptType}格式的文件`,
+  'Upload.limit': (params: any) =>
+    `当前文件最大上传个数为${params?.numberLimit}，请重新选择`,
+  'Upload.text': '点击或者拖动文件到虚线框内上传',
+  'Upload.uploadText': '点击上传',
+  'Upload.downloadText': '下载',
+  'Upload.origin': '源文件下载',
+  'Upload.waterMark': '加水印下载',
+  'Upload.downloadType': '文件下载方式',
+  'InputNumber.hundred': '百',
+  'InputNumber.k': '千',
+  'InputNumber.w': '万',
+  'InputNumber.10w': '十万',
+  'InputNumber.100w': '百万',
+  'InputNumber.1000w': '千万',
+  'InputNumber.100m': '亿',
+  'InputNumber.b': '十亿',
+  'InputNumber.10b': '百亿',
+  'InputNumber.100b': '千亿',
+  'InputNumber.t': '万亿',
+  'InputNumber.10t': '十万亿',
+  'Pagination.showTotal': (params: any) => `共 ${params?.tol} 条`,
+  'RadarChart.warning': '维度数据配置有误',
+  'RemoteComponent.fail': '自定义组件加载失败',
+  'Steps.wait': '等待状态',
+  'Steps.process': '处理中状态',
+  'Steps.finish': '完成状态',
+  'Steps.error': '错误状态',
+  'Table.dateTypeWarning': '数据类型不一致',
+  'Table.headTips': '通过左侧图标拖拽可调整列顺序',
+  'Table.headCol': '列设置',
+  'VerificationCode.text': '发送验证码',
+  'VerificationCode.refresh': '重新获取',
+  'Transfer.unit': (params: any) => `${params?.num}项`,
+  'Transfer.min': (params: any) =>
+    `${params.name}最少需要选${params.min}条数据`,
+  'Transfer.max': (params: any) =>
+    `${params?.name}最多可选${params?.max}条数据`,
+  'Table.filter.empty': '空白',
+  'Table.expand.component': '已关联业务组件：',
+  'Table.data.typeError': (params: any) =>
+    `表格数据类型错误，当前类型为${params.type}，请检查配置`,
+  'SuperSelect.load': '仅加载50条数据，更多数据请搜索',
+  'DatePicker.afterToday': (params: any) =>
+    `${params.name}必须在今天之后（含今天）`,
+  'DatePicker.beforeToday': (params: any) =>
+    `${params.name}必须在今天之前（含今天）`,
+  'DatePicker.period': (params: any) =>
+    `${params.name}必须在${params.startTime}到${params.endTime}的范围内`,
+  'DatePicker.after': (params: any) =>
+    `${params.name}不能小于${params.startTime}`,
+  'DatePicker.before': (params: any) =>
+    `${params.name}不能大于${params.endTime}`,
+  'Upload.uploadPlaceholder': '点击或拖拽文件到此处上传',
+  'Upload.singleStrict': '单文件模式不允许上传多个文件',
+  'Upload.actionStrict': '上传接口未配置，请返回修改！',
+  'Upload.fileLimit': (params: any) => `超出文件数量限制，当前为${params.num}`,
+  cancelConfirm: '取消后修改内容将不保存，确认取消吗？',
+};
+
+export const lang = (t: string, tip?: unknown) => {
+  // @ts-ignore
+  const l =
+    typeof langOptions[t] === 'function' ? langOptions[t](tip) : langOptions[t];
+  return l;
+};
+
+export const useLocale = (localeApis?: EngineApisType) => {
+  const getLocale = (t: string, params?: any) => {
+    if (localeApis?.getLocale) {
+      return localeApis?.getLocale(t, '', params);
+    }
+    return lang(t, params);
+  };
+
+  const language = localeApis?.getLocaleEnv?.() || 'zh-CN';
+
+  return {
+    lang: language,
+    getLocale,
+  };
+};

package/lib/public/src/components/pcfactory/src/utils/hooks/usePrintMode.tsx

@@ -0,0 +1,80 @@
+import { useMemo, useRef, useState } from 'react';
+import { useCreation, useMemoizedFn, useUpdateEffect } from '../ahooks';
+
+const CSS_SELECTOR_KEY = 'data-print-compid';
+
+export const PrintContainer = (props: {
+  children: any;
+  containerProps: any;
+}) => {
+  const { children, containerProps } = props;
+
+  return (
+    <div className="ued-print-container">
+      <div {...containerProps}>{children}</div>
+    </div>
+  );
+};
+
+export const usePrintMode = (id: string) => {
+  const selector = useMemo(() => {
+    return `[${CSS_SELECTOR_KEY}=${CSS.escape(id)}]`;
+  }, [id]);
+  const [showPrintContainer, setShowPrintContainer] = useState(false);
+
+  const [update, setUpdate] = useState(Date.now());
+
+  const printData = useCreation<{ dataSource: any[] }>(() => {
+    return {
+      dataSource: [],
+    };
+  }, []);
+
+  const resolveFunc = useRef<{ resolve?: Function; reject?: Function }>();
+
+  const afterPrint = useMemoizedFn(() => {
+    setShowPrintContainer(false);
+  });
+
+  const loadPrint = (_data?: { dataSource?: any[] }) => {
+    if (_data && Array.isArray(_data?.dataSource)) {
+      printData.dataSource = _data.dataSource;
+    }
+    setShowPrintContainer(true);
+    setUpdate(Date.now());
+    return new Promise((resolve, reject) => {
+      resolveFunc.current = {
+        resolve,
+        reject,
+      };
+    });
+  };
+
+  useUpdateEffect(() => {
+    if (
+      showPrintContainer &&
+      resolveFunc.current?.resolve &&
+      typeof resolveFunc.current.resolve === 'function'
+    ) {
+      const { resolve } = resolveFunc.current;
+      // 返回当前打印控件对应选择器
+      resolve({
+        selector,
+        callback: () => {
+          afterPrint();
+        },
+      });
+      resolveFunc.current = {};
+    }
+  }, [update]);
+
+  return {
+    showPrintContainer,
+    setShowPrintContainer,
+    loadPrint,
+    printData,
+    selectorKey: {
+      [CSS_SELECTOR_KEY]: id,
+    },
+  };
+};