@lingxiteam/ebe-utils 0.0.8 → 0.0.10

package/lib/h5public/src/components/factory/src/utils/ChannelContainer.tsx

@@ -0,0 +1,145 @@
+import React, {
+  FC,
+  forwardRef,
+  ForwardRefExoticComponent,
+  FunctionComponent,
+  useCallback,
+  useRef,
+  useState,
+} from 'react';
+// TODO: 替换成自定义hooks 待处理
+import { useDeepCompareEffect } from 'ahooks';
+import { get, isEqual, set } from 'lodash';
+
+// 通道容器，解决父子组件之间值的传递和获取。
+
+export interface PanelContentProps {
+  children: React.ReactElement;
+  extendProps: Record<string, any>;
+  uploadChannelProps: (props: Record<string, any>, key: string) => void;
+}
+
+export interface ChannelContainerOptions {
+  uploadChannelProps: (props: Record<string, any>, key: string) => void;
+  getProps: (c: React.ReactElement) => any;
+}
+
+export interface ChannelContainerProps {
+  children: (options: ChannelContainerOptions) => React.ReactElement;
+}
+
+/**
+ * 容器组件 收集子组件的值
+ * @param props
+ * @returns
+ */
+const Container: FC<ChannelContainerProps> = (props) => {
+  const { children } = props;
+  const childrenProps = useRef({}).current;
+  const [, forceUpdate] = useState({});
+  const uploadChannelProps = useCallback(
+    (props: Record<string, any>, key: string) => {
+      // @ts-ignore
+      if (!isEqual(props, childrenProps[key])) {
+        // @ts-ignore
+        childrenProps[key] = props;
+        forceUpdate({});
+      }
+    },
+    [],
+  );
+  // @ts-ignore
+  const getProps = useCallback((c) => childrenProps[c.key] || {}, []);
+
+  return children({ uploadChannelProps, getProps });
+};
+
+Container.displayName = 'ChannelContainer';
+
+/**
+ * 包裹子组件，可以给子组件传递额外的数据，也可以监听属性值变化
+ * @param props
+ * @returns
+ */
+const Item: FC<PanelContentProps> = (props) => {
+  const { children, extendProps, uploadChannelProps } = props;
+  return React.cloneElement(children, {
+    extendProps: {
+      ...extendProps,
+      uploadChannelProps: (childProps: Record<string, any>) => {
+        uploadChannelProps(childProps, `${children.key}`);
+      },
+    },
+  });
+};
+
+Item.defaultProps = {
+  extendProps: {},
+};
+
+Item.displayName = 'ChannelContainerItem';
+
+export interface useRuntimePropsType {
+  (
+    props: Record<string, any>,
+    keyPath: string[],
+    uploadChannelProps: (props: Record<string, any>) => void,
+  ): void;
+}
+
+/**
+ * 实时上报数据给父节点 配合RuntimeContainer使用
+ * 可自定义配置属性，可自定义props内容。
+ * 自动根据keyPath取props的值，并上报keyPath到RuntimeContainer，
+ * 不可与withRuntimeItem同时使用
+ * @param props 字段对应的数据值
+ * @param depthKey 需要上报的字段
+ */
+const useChannelProps: useRuntimePropsType = (
+  props,
+  depthKey = [],
+  uploadChannelProps,
+) => {
+  const target = {};
+  depthKey.forEach((key) =>
+    set(target, key.split('.'), get(props, key.split('.'))),
+  );
+  useDeepCompareEffect(() => {
+    if (uploadChannelProps) {
+      uploadChannelProps(target);
+    }
+  }, [target]);
+};
+
+/**
+ * 实时上报数据给父节点 配合RuntimeContainer使用
+ * 针对上报静态属性，可以通过高阶函数的方式包裹子组件，并配置需要上报的属性
+ * 自动根据keyPath取props的值，并上报keyPath到RuntimeContainer
+ * 不可与withRuntimeItem同时使用
+ * @param Component 子组件
+ * @param options
+ * @returns
+ */
+function withChannelItem<T extends Record<string, any>>(
+  Component: FunctionComponent<any> | ForwardRefExoticComponent<any>,
+  options: { keyPath: string[] },
+) {
+  const { keyPath } = options;
+  return forwardRef((props: T, ref) => {
+    const { uploadChannelProps, ...restProps } = props;
+    useChannelProps(props, keyPath, uploadChannelProps);
+    return <Component {...restProps} ref={ref} />;
+  });
+}
+
+(Container as any).Item = React.memo(Item);
+(Container as any).useChannelProps = useChannelProps;
+(Container as any).withChannelItem = withChannelItem;
+
+const ChannelContainer = Container as typeof Container & {
+  Item: typeof Item;
+  useChannelProps: typeof useChannelProps;
+  withChannelItem: typeof withChannelItem;
+};
+
+export default ChannelContainer;

package/lib/h5public/src/components/factory/src/utils/CustomModule.tsx

@@ -0,0 +1,137 @@
+import { EngineApisType } from '@lingxiteam/types';
+import React, { FC, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import { getExportDefaultObj } from './getExportDefaultObj';
+
+export function isAtLeastReact17(version: string): boolean {
+  const major = version.match(/^([^.]+)/);
+  return major !== null && parseInt(major[0], 10) >= 17;
+}
+
+const withErrorBoundary = (
+  Component: React.ComponentType,
+  options: {
+    id: string;
+    render?: (error: Error, componentStack: string | null) => React.ReactNode;
+  },
+) =>
+  class CustomErrorModule extends React.Component {
+    state: Readonly<{
+      error: Error | null;
+      componentStack: string | null;
+    }> = {
+      error: null,
+      componentStack: null,
+    };
+
+    componentDidCatch(
+      error: Error & { cause?: Error },
+      { componentStack }: React.ErrorInfo,
+    ) {
+      if (isAtLeastReact17(React.version)) {
+        const errorBoundaryError = new Error(error.message);
+        errorBoundaryError.name = `React ErrorBoundary ${errorBoundaryError.name}`;
+        errorBoundaryError.stack = componentStack;
+        error.cause = errorBoundaryError;
+      }
+
+      this.setState({ error, componentStack });
+    }
+
+    render(): React.ReactNode {
+      const { error, componentStack } = this.state;
+      if (error) {
+        if (typeof options.render === 'function') {
+          return options.render(error, componentStack);
+        }
+
+        console.error(`组件${options.id}自定义渲染时出错：`, error);
+        console.error(`组件${options.id}自定义渲染时出错：`, componentStack);
+        return null;
+      }
+
+      return <Component {...this.props} />;
+    }
+  };
+
+interface CustomModuleProps {
+  /**
+   * 代码
+   */
+  code: string;
+
+  /**
+   * 组件属性
+   */
+  compProps: Record<string, any>;
+
+  /**
+   * 引擎能力
+   */
+  sandBoxLoadModule: EngineApisType['sandBoxLoadModule'];
+
+  /**
+   * 错误组件提供的信息
+   */
+  errorInfo: {
+    // 组件id
+    id: string;
+
+    /**
+     * 自定义错误渲染信息  默认只打印错误日志，不做错误展示
+     * @param error
+     * @param componentStack
+     * @returns
+     */
+    render?: (error: Error, componentStack: string | null) => React.ReactNode;
+  };
+
+  /**
+   * any
+   */
+  allowMap?: Record<string, any>;
+}
+
+const CustomModule: FC<CustomModuleProps> = ({
+  sandBoxLoadModule,
+  code,
+  compProps,
+  errorInfo,
+  allowMap,
+}) => {
+  // 加载到组件模块
+  const Component = useMemo(() => {
+    if (!code) {
+      return null;
+    }
+    const module = sandBoxLoadModule(
+      code.replace(/^\$/, '').replace(/\$$/, ''),
+      { allowMap },
+    );
+    return withErrorBoundary(getExportDefaultObj(module), errorInfo);
+  }, [code]);
+
+  return Component ? <Component {...compProps} /> : null;
+};
+
+export const getJSXHtml = (
+  reactNode: React.ReactElement,
+  cb?: (html: string) => void,
+  options: { id?: string } = {},
+) => {
+  const { id = `__JSX_id__${Math.random()}` } = options || {};
+  let tempDOM = document.getElementById(id);
+  if (!tempDOM) {
+    tempDOM = document.createElement('jsx');
+    tempDOM.style.display = 'none';
+    tempDOM.id = id;
+    document.head.appendChild(tempDOM);
+  }
+
+  ReactDOM.render(reactNode, tempDOM, () => {
+    cb?.(tempDOM?.innerHTML || '');
+    tempDOM?.remove();
+  });
+};
+
+export default CustomModule;

package/lib/h5public/src/components/factory/src/utils/LoaderHelper.tsx

@@ -0,0 +1,24 @@
+import Loadable from 'react-loadable';
+
+/**
+ * 通用的加载中组件
+ * @param {Object} props
+ */
+export const LoadingComponennt = (props: any) => {
+  // console.log("加载中组件", props);
+  return <></>;
+};
+
+const loaderHelper = (loaderRet: any, loading = LoadingComponennt) => {
+  // console.log("loaderHelper", arguments);
+  if (loaderRet === undefined) {
+    // eslint-disable-next-line no-throw-literal
+    throw '请传入参数，格式： import("xxx")';
+  }
+  return Loadable({
+    loader: () => loaderRet,
+    loading,
+  });
+};
+
+export default loaderHelper;

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

@@ -0,0 +1,28 @@
+import type React from 'react';
+
+// 提取FC组件中的组件泛型
+export type InferFunctionComponents<T> = T extends React.FC<infer P> ? P : any;
+
+export interface FilterWhiteSpaceParamaters extends Record<string, unknown> {
+  required?: boolean;
+  message?: string;
+}
+
+type RecordKeys<T extends Record<string, any>> = keyof T;
+
+// 值为undefined的key值移除
+export type FilterWhiteSpace<T extends Record<string, any>> = {
+  [Key in RecordKeys<T>]: T[Key] extends undefined ? never : T[Key];
+};
+
+export type FilterWhiteSpaceFunction<T extends FilterWhiteSpaceParamaters> = (
+  params: T,
+) => FilterWhiteSpaceParamaters;
+
+export interface GetRulesParamaters {
+  required?: boolean;
+  regexp?: any[];
+  message?: string;
+}
+
+export type GetRulesFunction<P> = (params: P) => FilterWhiteSpaceParamaters[];

package/lib/h5public/src/components/factory/src/utils/ahooks/index.ts

@@ -0,0 +1,18 @@
+import useCreation from './useCreation';
+import { useDeepCompareEffect } from './useDeepCompareEffect';
+import useMemoizedFn from './useMemoizedFn';
+import usePrevious from './usePrevious';
+import useSafeState from './useSafeState';
+import useSetState, { SetState } from './useSetState';
+import useUpdateEffect from './useUpdateEffect';
+
+export type { SetState };
+export {
+  usePrevious,
+  useSafeState,
+  useMemoizedFn,
+  useUpdateEffect,
+  useDeepCompareEffect,
+  useSetState,
+  useCreation,
+};

package/lib/h5public/src/components/factory/src/utils/ahooks/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/h5public/src/components/factory/src/utils/ahooks/useDeepCompareEffect.ts

@@ -0,0 +1,27 @@
+import { isEqual } from 'lodash';
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
+
+const depsEqual = function depsEqual(
+  aDeps: DependencyList,
+  bDeps?: DependencyList,
+) {
+  if (bDeps === undefined) {
+    // eslint-disable-next-line no-param-reassign
+    bDeps = [];
+  }
+
+  return isEqual(aDeps, bDeps);
+};
+
+export const useDeepCompareEffect = (
+  effect: EffectCallback,
+  deps: DependencyList,
+) => {
+  const ref = useRef<DependencyList>();
+  const signalRef = useRef(0);
+  if (!depsEqual(deps, ref.current)) {
+    ref.current = deps;
+    signalRef.current += 1;
+  }
+  useEffect(effect, [signalRef.current]);
+};

package/lib/h5public/src/components/factory/src/utils/ahooks/useMemoizedFn.ts

@@ -0,0 +1,27 @@
+import { useMemo, useRef } from 'react';
+
+type noop = (this: any, ...args: any[]) => any;
+
+type PickFunction<T extends noop> = (
+  this: ThisParameterType<T>,
+  ...args: Parameters<T>
+) => ReturnType<T>;
+
+function useMemoizedFn<T extends noop>(fn: T) {
+  const fnRef = useRef<T>(fn);
+
+  // why not write `fnRef.current = fn`?
+  // https://github.com/alibaba/hooks/issues/728
+  fnRef.current = useMemo(() => fn, [fn]);
+
+  const memoizedFn = useRef<PickFunction<T>>();
+  if (!memoizedFn.current) {
+    memoizedFn.current = function (this, ...args) {
+      return fnRef.current.apply(this, args);
+    };
+  }
+
+  return memoizedFn.current as T;
+}
+
+export default useMemoizedFn;

package/lib/h5public/src/components/factory/src/utils/ahooks/usePrevious.ts

@@ -0,0 +1,19 @@
+import { useRef } from 'react';
+
+export type compareFunction<T> = (prev: T | undefined, next: T) => boolean;
+
+function usePrevious<T>(state: T, compare?: compareFunction<T>): T | undefined {
+  const prevRef = useRef<T>();
+  const curRef = useRef<T>();
+
+  const needUpdate =
+    typeof compare === 'function' ? compare(curRef.current, state) : true;
+  if (needUpdate) {
+    prevRef.current = curRef.current;
+    curRef.current = state;
+  }
+
+  return prevRef.current;
+}
+
+export default usePrevious;

package/lib/h5public/src/components/factory/src/utils/ahooks/useSafeState.ts

@@ -0,0 +1,26 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useCallback, useState } from 'react';
+import useUnmountedRef from './useUnmountedRef';
+
+function useSafeState<S>(
+  initialState: S | (() => S),
+): [S, Dispatch<SetStateAction<S>>];
+
+function useSafeState<S = undefined>(): [
+  S | undefined,
+  Dispatch<SetStateAction<S | undefined>>,
+];
+
+function useSafeState<S>(initialState?: S | (() => S)) {
+  const unmountedRef = useUnmountedRef();
+  const [state, setState] = useState(initialState);
+  const setCurrentState = useCallback((currentState) => {
+    /** if component is unmounted, stop update */
+    if (unmountedRef.current) return;
+    setState(currentState);
+  }, []);
+
+  return [state, setCurrentState] as const;
+}
+
+export default useSafeState;

package/lib/h5public/src/components/factory/src/utils/ahooks/useSetState.ts

@@ -0,0 +1,26 @@
+import isFunction from 'lodash/isFunction';
+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 = useCallback((patch) => {
+    setState((prevState) => {
+      const newState = isFunction(patch) ? patch(prevState) : patch;
+      return newState ? { ...prevState, ...newState } : prevState;
+    });
+  }, []);
+
+  return [state, setMergeState];
+};
+
+export default useSetState;

package/lib/h5public/src/components/factory/src/utils/ahooks/useUnmountedRef.ts

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+
+const useUnmountedRef = () => {
+  const unmountedRef = useRef(false);
+  useEffect(() => {
+    unmountedRef.current = false;
+    return () => {
+      unmountedRef.current = true;
+    };
+  }, []);
+  return unmountedRef;
+};
+
+export default useUnmountedRef;

package/lib/h5public/src/components/factory/src/utils/ahooks/useUpdateEffect.ts

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from 'react';
+
+const useUpdateEffect: typeof useEffect = (effect, deps) => {
+  const isMounted = useRef(false);
+
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+    } else {
+      return effect();
+    }
+  }, deps);
+};
+
+export default useUpdateEffect;

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

@@ -0,0 +1,32 @@
+// 把数字状态转换成对应的实际props
+const basicStatusTransfer = (basicStatusValue: number | string) => {
+  switch (+basicStatusValue) {
+    case 2: // 隐藏
+      return {
+        disabled: false,
+        visible: false,
+        readOnly: false,
+      };
+    case 3: // 禁用
+      return {
+        disabled: true,
+        visible: true,
+        readOnly: false,
+      };
+    case 4: // 只读
+      return {
+        disabled: false,
+        visible: true,
+        readOnly: true,
+      };
+    case 1: // 默认情况
+    default:
+      return {
+        disabled: false,
+        visible: true,
+        readOnly: false,
+      };
+  }
+};
+
+export default basicStatusTransfer;