@lingxiteam/ebe-utils 0.0.1

package/lib/public/src/utils/functors/index.ts

@@ -0,0 +1,32 @@
+export { ABS } from './ABS';
+export { AES_DECRYPT } from './AESDECRYPT';
+export { AES_ENCRYPT } from './AESENCRYPT';
+export { ARRAYINDEX } from './ARRAYINDEX';
+export { ARRAYTOSTR } from './ARRAYTOSTR';
+export { AVERAGE } from './AVERAGE';
+export { CONCAT } from './CONCAT';
+export { COUNTA } from './COUNTA';
+export { COUNTARRAY } from './COUNTARRAY';
+export { COUNTBLANK } from './COUNTBLANK';
+export { COUNTCHAR } from './COUNTCHAR';
+export { DATAMASK } from './DATAMASK';
+export { DATEADD } from './DATEADD';
+export { DATENOW } from './DATENOW';
+export { DATETIME } from './DATETIME';
+export { IF } from './IF';
+export { INT } from './INT';
+export { LOG } from './LOG';
+export { MAX } from './MAX';
+export { MIN } from './MIN';
+export { MOD } from './MOD';
+export { NUMBER } from './NUMBER';
+export { OBJECTVALUE } from './OBJECTVALUE';
+export { POWER } from './POWER';
+export { PRODUCT } from './PRODUCT';
+export { RANDBETWEEN } from './RANDBETWEEN';
+export { RANDOMNUM } from './RANDOMNUM';
+export { ROUND } from './ROUND';
+export { ROUNDDOWN } from './ROUNDDOWN';
+export { ROUNDUP } from './ROUNDUP';
+export { STRTOARRAY } from './STRTOARRAY';
+export { SUM } from './SUM';

package/lib/public/src/utils/functors/types.ts

@@ -0,0 +1,32 @@
+/**
+ * 函数库部分类型定义
+ */
+export interface FunctorDefineParams {
+  label: string;
+  type: string;
+  functor: (...e: any) => any;
+  define: string[];
+  value: string;
+  description: {
+    title: string;
+    tips: string[];
+  };
+  example: {
+    title: string;
+    tips: string[];
+  };
+  groupsName: string | string[];
+}
+
+export type FunctorDefineReturn = Omit<FunctorDefineParams, 'functor'> &
+  FunctorDefineParams['functor'];
+
+export type FunctorDefineFn = (
+  params: FunctorDefineParams,
+) => FunctorDefineReturn;
+
+export const FunctorDefine: FunctorDefineFn = ({ functor, ...restProps }) => {
+  const fn = functor as unknown as FunctorDefineReturn;
+  Object.assign(fn, restProps);
+  return fn;
+};

package/lib/public/src/utils/functors/utils/tools.ts

@@ -0,0 +1,15 @@
+export const getGreenText = (text: string) =>
+  `<font color="rgb(76, 175, 80)">${text}</font>`;
+
+/**
+ * 目标数组是否包含某个数组中的某一项
+ * @param targetArr 目标数组
+ * @param contained 被包含内容
+ * @returns
+ */
+export const includes = (targetArr: (string | number)[], contained: any) => {
+  if (!Array.isArray(contained)) {
+    return targetArr.includes(contained);
+  }
+  return targetArr.findIndex((target) => contained.includes(target)) > -1;
+};

package/lib/public/src/utils/historytool.ts

@@ -0,0 +1,154 @@
+import Qs from 'qs';
+
+export const HISTORYTYPES = {
+  replace: 'replace',
+  push: 'push',
+  window: 'window',
+  portal: 'portal',
+} as const;
+export interface HistoryReplaceProps {
+  history: any;
+  pathname: string;
+  search: string | {};
+  state: {};
+}
+
+/**
+ * 生成唯一id
+ * @param prefix
+ * @param id
+ * @param slength
+ * @returns
+ */
+const createId = (
+  prefix?: string,
+  separator: string = '##',
+  id?: string,
+  slength: number = 12,
+) => {
+  let uid = id;
+  if (!uid) {
+    uid = Math.random().toString().slice(slength);
+  }
+  return prefix ? prefix + separator + uid : uid;
+};
+
+const historyFunc =
+  (type: 'replace' | 'push' | 'window' | 'portal' | string) =>
+  (params: HistoryReplaceProps) => {
+    const { history, pathname, search, state } = params;
+    if (type === 'window') {
+      window.open(createUrl(false, params), '_blank');
+      return;
+    } else if (type === 'portal') {
+      if ((window.parent as any)?.portal) {
+        (window.parent as any).portal?.openMenu({
+          menuUrl: createUrl(true, params),
+          params: params.search,
+        });
+      }
+      return;
+    }
+
+    if (
+      pathname.startsWith('http://', 0) ||
+      pathname.startsWith('https://', 0)
+    ) {
+      window.location.replace(pathname);
+    } else if (type) {
+      let urlParamsStr = '';
+      let mPathName = pathname;
+      if (pathname.indexOf('?') > -1) {
+        const urlArr = pathname.split('?');
+        if (urlArr[0]) {
+          mPathName = urlArr[0];
+        }
+        if (urlArr[1]) {
+          urlParamsStr = urlArr[1];
+        }
+      }
+
+      let realSearch = '';
+      if (typeof search === 'object' && !Array.isArray(search)) {
+        realSearch = Qs.stringify(search);
+      } else if (typeof search === 'string') {
+        realSearch = search;
+      }
+      const tmpQuery: any = Qs.parse(realSearch || '');
+      if (urlParamsStr) {
+        Object.assign(tmpQuery, Qs.parse(urlParamsStr));
+      }
+      history[type]({
+        pathname: mPathName,
+        search: Qs.stringify(tmpQuery),
+        state,
+      });
+    }
+  };
+const createUrl = (isPortal: boolean, params: HistoryReplaceProps) => {
+  const { pathname, search } = params;
+  let url = '';
+  if (
+    pathname.startsWith('http://', 0) ||
+    pathname.startsWith('https://', 0) ||
+    isPortal
+  ) {
+    url = pathname;
+  } else {
+    const urlArr = window.location?.hash?.split('?');
+    if (urlArr[1]) {
+      url = urlArr[1];
+    }
+    url =
+      window.location.origin +
+      window.location.pathname +
+      '#' +
+      pathname +
+      '?' +
+      url;
+    let realSearch = '';
+    if (typeof search === 'object' && !Array.isArray(search)) {
+      realSearch = Qs.stringify({ ...search });
+    } else if (typeof search === 'string') {
+      realSearch = search;
+    }
+    if (realSearch?.length > 0) {
+      url = url + '&' + realSearch;
+    }
+  }
+  return url;
+};
+const historyPush = historyFunc('push');
+const historyReplace = historyFunc('replace');
+const historytool = (
+  type: 'replace' | 'push' | 'window' | 'portal' | string,
+  historyParmas: HistoryReplaceProps,
+) => {
+  if (historyParmas.state) {
+    const _k = createId();
+    window.sessionStorage.setItem(_k, JSON.stringify(historyParmas.state));
+  }
+  switch (type) {
+    case 'replace':
+      historyReplace(historyParmas);
+      break;
+    case 'push':
+      historyPush(historyParmas);
+      break;
+    case 'window':
+      window.open(createUrl(false, historyParmas), '_blank');
+      break;
+    case 'portal':
+      if ((window.parent as any)?.portal) {
+        (window.parent as any).portal?.openMenu({
+          menuUrl: createUrl(true, historyParmas),
+          params: historyParmas.search,
+        });
+      }
+      break;
+    default:
+      historyPush(historyParmas);
+      break;
+  }
+};
+export { createId, historytool };

package/lib/public/src/utils/hooks/index.ts

@@ -0,0 +1,22 @@
+import useCreation from './useCreation';
+import useHiddenStyle from './useHiddenStyle';
+import useMovable from './useMovable';
+import usePersistFn from './usePersistFn';
+import useRefState from './useRefState';
+import useSetState from './useSetState';
+import useStyle from './useStyle';
+import useTrackedEffect from './useTrackedEffect';
+import useWhyDidYouUpdate from './useWhyDidYouUpdate';
+
+export * from './useUpdateEffect';
+export {
+  usePersistFn,
+  useSetState,
+  useMovable,
+  useCreation,
+  useWhyDidYouUpdate,
+  useTrackedEffect,
+  useRefState,
+  useHiddenStyle,
+  useStyle,
+};

package/lib/public/src/utils/hooks/useCreation.ts

@@ -0,0 +1,23 @@
+import { useRef } from 'react';
+
+export default function useCreation<T>(factory: () => T, deps: any[]) {
+  const { current } = useRef({
+    deps,
+    obj: undefined as undefined | T,
+    initialized: false,
+  });
+  if (current.initialized === false || !depsAreSame(current.deps, deps)) {
+    current.deps = deps;
+    current.obj = factory();
+    current.initialized = true;
+  }
+  return current.obj as T;
+}
+
+function depsAreSame(oldDeps: any[], deps: any[]): boolean {
+  if (oldDeps === deps) return true;
+  for (let i = 0; i < oldDeps.length; i += 1) {
+    if (oldDeps[i] !== deps[i]) return false;
+  }
+  return true;
+}

package/lib/public/src/utils/hooks/useHiddenStyle.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, useMemo } from 'react';
+
+const useHiddenStyle = (visible: boolean, style?: CSSProperties) => {
+  const finalStyle = useMemo<CSSProperties>(() => {
+    if (!visible) {
+      if (style) {
+        const _style = { ...style };
+        _style.display = 'none';
+        return _style;
+      }
+      return { display: 'none' };
+    }
+    return style || {};
+  }, [visible]);
+
+  return finalStyle;
+};
+
+export default useHiddenStyle;

package/lib/public/src/utils/hooks/useMovable.ts

@@ -0,0 +1,227 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+export type MoveDirection = 'prev' | 'bottom';
+
+interface MovableProps {
+  targetRef?: any;
+  splitterRef?: any;
+  direction?: MoveDirection;
+  movableLayoutRef?: any;
+  nextRef?: any;
+  type?: string;
+  min?: number | string; // 最小宽度
+  max?: number | string; // 最大宽度
+  clickWidth?: number | string; // 点击展开宽度，默认为最大宽度
+}
+
+const useMovable = (props: MovableProps) => {
+  const {
+    targetRef,
+    splitterRef,
+    direction = 'prev',
+    nextRef,
+    type,
+    min = 0,
+    max = 0,
+    clickWidth,
+    movableLayoutRef,
+  } = props;
+  const [mouseData, setMouseData] = useState<any>({});
+  const [mouseDownPosition, setMouseDownPosition] = useState<any>({});
+  const [width, setWidth] = useState<any>(min);
+  const prevLength = useRef<number>();
+  const [moving, setMoving] = useState<boolean>(false);
+
+  const getPrevSize = (size: any, baseSize?: any) => {
+    let preSize = min;
+    const temp: any = `${size}`.substring(0, size.length - 1);
+    if (
+      typeof size === 'string' &&
+      size.charAt(size.length - 1) === '%' &&
+      !!(temp * 1)
+    ) {
+      // 百分比
+      preSize = (baseSize * temp) / 100;
+    } else if (
+      (typeof size === 'string' && !!((size as any) * 1)) ||
+      typeof size === 'number'
+    ) {
+      // 数字字符串 或 纯数字
+      preSize = (size as any) * 1;
+    }
+
+    return preSize;
+  };
+  const hideRef = () => {
+    if (!targetRef?.current || !splitterRef?.current) return;
+    if (type === 'horizontal') {
+      // 水平布局
+      prevLength.current = targetRef.current.style.width;
+      targetRef.current.style.width = '0px';
+      splitterRef.current.style[direction === 'prev' ? 'left' : 'right'] =
+        '0px';
+    } else if (type === 'vertical') {
+      // 垂直布局
+      prevLength.current = targetRef.current.style.height;
+      targetRef.current.style.height = '0px';
+      splitterRef.current.style[direction === 'prev' ? 'top' : 'bottom'] =
+        '0px';
+    }
+  };
+
+  const resetRef = (newPrevNum: string) => {
+    if (!targetRef?.current || !splitterRef?.current) return;
+    const prevNum = prevLength.current;
+    if (type === 'horizontal') {
+      // 水平布局
+      targetRef.current.style.width = newPrevNum || prevNum;
+      splitterRef.current.style[direction === 'prev' ? 'left' : 'right'] =
+        newPrevNum || prevNum;
+    } else if (type === 'vertical') {
+      // 垂直布局
+      targetRef.current.style.height = newPrevNum || prevNum;
+      splitterRef.current.style[direction === 'prev' ? 'top' : 'bottom'] =
+        newPrevNum || prevNum;
+    }
+  };
+
+  const resetData = () => {
+    setMouseData({});
+  };
+
+  const resetWidth = (kind: any) => {
+    if (!targetRef?.current || !splitterRef?.current) return;
+    const target = targetRef.current; // 获取调整对象
+    const splitter = splitterRef.current; // 获取分割线
+    if (
+      kind === 'splitterClicked' &&
+      ((clickWidth && target.style.width >= `${clickWidth}px`) ||
+        target.style.width === `${max}px`)
+    ) {
+      target.style.width = `${min}px`;
+      splitter.style[direction === 'prev' ? 'left' : 'right'] = `${min}px`;
+      setWidth(min);
+      return;
+    }
+    target.style.width = `${clickWidth ?? max}px`;
+    splitter.style[direction === 'prev' ? 'left' : 'right'] = `${
+      clickWidth ?? max
+    }px`;
+    setWidth(clickWidth ?? max);
+  };
+
+  const onClickSplitter = (e: any) => {
+    if (
+      mouseDownPosition.clientX === e.clientX &&
+      mouseDownPosition.clientY === e.clientY
+    ) {
+      resetWidth('splitterClicked');
+    }
+  };
+
+  useEffect(() => {
+    const onMouseUp = (e: any) => {
+      setMoving(false);
+      resetData();
+    };
+    window.addEventListener('mouseup', onMouseUp);
+    return () => {
+      document.body.onmousemove = null;
+      window.removeEventListener('mouseup', onMouseUp);
+    };
+  }, []);
+
+  const onMouseDown = (e: { clientX: any; clientY: any }) => {
+    const { clientX, clientY } = e;
+    setMoving(true);
+    const target = type === 'vertical' ? nextRef.current : targetRef.current; // 获取初始数据需要参考的对象
+    setMouseData({
+      ...mouseData,
+      coordinate:
+        type === 'vertical' ? target.offsetHeight : target.offsetWidth, // 记录初始宽或初始高
+      clientX, // 记录鼠标初始x坐标
+      clientY, // 记录鼠标初始y坐标
+    });
+    setMouseDownPosition({
+      clientX, // 记录鼠标初始x坐标
+      clientY, // 记录鼠标初始y坐标
+    });
+  };
+
+  // 当鼠标坐标改变时，需要实时刷新dom尺寸
+  useEffect(() => {
+    const onMouseMove = (e: {
+      stopPropagation?: any;
+      clientX?: any;
+      clientY?: any;
+    }) => {
+      e.stopPropagation();
+      if (
+        !targetRef?.current ||
+        !splitterRef?.current ||
+        !movableLayoutRef?.current
+      )
+        return;
+      const { clientX, clientY } = e;
+      const target = targetRef.current; // 获取调整对象
+      const splitter = splitterRef.current; // 获取分割线
+      const baseSize =
+        movableLayoutRef.current[
+          type === 'vertical' ? 'clientHeight' : 'clientWidth'
+        ];
+      const pprevMin = getPrevSize(min, baseSize);
+      const pprevMax = getPrevSize(max, baseSize);
+
+      if (type === 'horizontal') {
+        // 水平布局
+        const x =
+          direction === 'prev'
+            ? mouseData.coordinate + clientX - mouseData.clientX
+            : mouseData.coordinate + (mouseData.clientX - clientX);
+        if (x < pprevMin || x > pprevMax) {
+          return;
+        }
+        target.style.transition = 'node';
+        splitter.style.transition = 'node';
+        target.style.width = `${x}px`;
+        splitter.style[direction === 'prev' ? 'left' : 'right'] = `${x}px`;
+        setWidth(x);
+      } else if (type === 'vertical') {
+        // 垂直布局
+        const y =
+          direction === 'prev'
+            ? mouseData.coordinate + clientY - mouseData.clientY
+            : mouseData.coordinate + (mouseData.clientY - clientY);
+        if (y < pprevMin || y > pprevMax) {
+          return;
+        }
+        target.style.transition = 'node';
+        splitter.style.transition = 'node';
+        target.style.height = `${y}px`;
+        splitter.style[direction === 'prev' ? 'top' : 'bottom'] = `${y}px`;
+      }
+    };
+    if (mouseData.coordinate) {
+      document.body.addEventListener('mousemove', onMouseMove);
+    } else {
+      document.body.removeEventListener('mousemove', onMouseMove);
+    }
+    return () => {
+      document.body.removeEventListener('mousemove', onMouseMove);
+    };
+  }, [JSON.stringify(mouseData)]);
+
+  const size = useMemo(() => getPrevSize(min), [min]);
+
+  return {
+    resetRef,
+    hideRef,
+    onMouseDown,
+    onClickSplitter,
+    moving,
+    width,
+    size,
+  };
+};
+
+export default useMovable;

package/lib/public/src/utils/hooks/usePersistFn.ts

@@ -0,0 +1,17 @@
+import { useCallback, useRef } from 'react';
+
+const usePersistFn = (fn: any) => {
+  const ref = useRef(fn);
+  ref.current = fn;
+
+  const persistFn = useCallback((...args) => {
+    if (ref.current) {
+      return ref.current.apply(this, args);
+    }
+    return undefined;
+  }, []);
+
+  return persistFn;
+};
+
+export default usePersistFn;

package/lib/public/src/utils/hooks/useReactive.ts

@@ -0,0 +1,73 @@
+import isPlainObject from 'lodash/isPlainObject';
+import { useRef } from 'react';
+import useCreation from './useCreation';
+import useUpdate from './useUpdate';
+
+// k:v 原对象:代理过的对象
+const proxyMap = new WeakMap();
+// k:v 代理过的对象:原对象
+const rawMap = new WeakMap();
+
+function observer<T extends Record<string, any>>(
+  initialVal: T,
+  cb: () => void,
+): T {
+  const existingProxy = proxyMap.get(initialVal);
+
+  // 添加缓存 防止重新构建proxy
+  if (existingProxy) {
+    return existingProxy;
+  }
+
+  // 防止代理已经代理过的对象
+  // https://github.com/alibaba/hooks/issues/839
+  if (rawMap.has(initialVal)) {
+    return initialVal;
+  }
+
+  const proxy = new Proxy<T>(initialVal, {
+    get(target, key, receiver) {
+      const res = Reflect.get(target, key, receiver);
+
+      // https://github.com/alibaba/hooks/issues/1317
+      const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
+      if (!descriptor?.configurable && !descriptor?.writable) {
+        return res;
+      }
+
+      // Only proxy plain object or array,
+      // otherwise it will cause: https://github.com/alibaba/hooks/issues/2080
+      return isPlainObject(res) || Array.isArray(res) ? observer(res, cb) : res;
+    },
+    set(target, key, val) {
+      const ret = Reflect.set(target, key, val);
+      cb();
+      return ret;
+    },
+    deleteProperty(target, key) {
+      const ret = Reflect.deleteProperty(target, key);
+      cb();
+      return ret;
+    },
+  });
+
+  proxyMap.set(initialVal, proxy);
+  rawMap.set(proxy, initialVal);
+
+  return proxy;
+}
+
+function useReactive<S extends Record<string, any>>(initialState: S): S {
+  const update = useUpdate();
+  const stateRef = useRef<S>(initialState);
+
+  const state = useCreation(() => {
+    return observer(stateRef.current, () => {
+      update();
+    });
+  }, []);
+
+  return state;
+}
+
+export default useReactive;

package/lib/public/src/utils/hooks/useRefState.ts

@@ -0,0 +1,25 @@
+import { useCallback, useRef } from 'react';
+import useUpdate from './useUpdate';
+
+/**
+ * 通过ref的引用值更新组件，一般用于性能优化。
+ */
+export type SetRefState<S extends Record<string, any>> = <K extends keyof S>(
+  state: Pick<S, K> | null | undefined,
+) => void;
+
+const useRefState = <S extends Record<string, any>>(
+  initialState: S,
+): [S, SetRefState<S>] => {
+  const stateRef = useRef<S>(initialState);
+  const update = useUpdate();
+
+  const setState = useCallback((patch) => {
+    stateRef.current = patch;
+    update();
+  }, []);
+
+  return [stateRef.current, setState];
+};
+
+export default useRefState;

package/lib/public/src/utils/hooks/useSetState.ts

@@ -0,0 +1,25 @@
+import { useCallback, useState } from 'react';
+
+export type SetState<S extends Record<string, any>> = <K extends keyof S>(
+  state:
+    | Pick<S, K>
+    | null
+    | ((prevState: Readonly<S>) => Pick<S, K> | S | null),
+) => void;
+
+const useSetState = <S extends Record<string, any>>(
+  initialState: S | (() => S),
+): [S, SetState<S>] => {
+  const [state, setState] = useState<S>(initialState);
+
+  const setMergeState: SetState<S> = useCallback((patch) => {
+    setState((prevState) => {
+      const newState = typeof patch === 'function' ? patch(prevState) : patch;
+      return newState ? { ...prevState, ...newState } : prevState;
+    });
+  }, []);
+
+  return [state, setMergeState];
+};
+
+export default useSetState;