@lingxiteam/ebe-utils 0.5.0 → 0.5.2

package/lib/public/src/components/pcfactory/src/styles/theme/variables/antdVariables.less

@@ -0,0 +1,84 @@
+@import (reference) '~antd/lib/style/themes/default.less';
+@import './common.less';
+/**
+ * 此文件定义 antd 原生变量
+ */
+
+// 通用变量
+@ant-prefix: pcfactory;
+@primary-color: #4477ee;
+@success-color: #41e19b;
+@error-color: #ff7474;
+@info-color: @primary-color;
+@warning-color: #ff9d49;
+@text-color: @custom-black-10;
+@border-color-base: #e5e5e5;
+@border-radius-base: 2px;
+@border-color-split: @border-color-base;
+@heading-color: @text-color;
+@item-hover-bg: fade(@text-color, 4%);
+@item-active-bg: fade(@primary-color, 6%);
+@disabled-bg: #f7f8fa;
+@disabled-color: @custom-black-2;
+// vertical padding for all form controls
+@control-padding-horizontal: 8px;
+@control-padding-horizontal-sm: @control-padding-horizontal;
+
+// 表格
+@table-header-bg: #fafafa;
+@table-header-bg-sm: @table-header-bg;
+@table-padding-horizontal: 8px;
+@table-padding-horizontal-md: @table-padding-horizontal;
+@table-padding-horizontal-sm: @table-padding-horizontal-md;
+@table-padding-vertical: 10px;
+@table-padding-vertical-md: @table-padding-vertical - 2px;
+@table-padding-vertical-sm: @table-padding-vertical-md - 2px;
+@table-row-hover-bg: rgb(251, 251, 251);
+@table-selected-row-bg: #f0f6ff;
+
+// 表单
+@form-explain-font-size: 12px;
+@form-explain-height: 16px;
+
+// 卡片
+@card-head-color: @heading-color;
+
+// 按钮
+@btn-default-color: @text-color;
+
+// 输入框
+@input-hover-border-color: @primary-color;
+@input-height-sm: 28px;
+@input-height-base: 32px;
+@input-height-lg: 36px;
+@input-padding-horizontal-base: @control-padding-horizontal;
+@input-padding-horizontal-sm: @input-padding-horizontal-base;
+@input-padding-horizontal-lg: @input-padding-horizontal-base;
+@input-padding-vertical-sm: 4px;
+@input-padding-vertical-base: 4px;
+@input-padding-vertical-lg: 6px;
+
+// 下拉框
+@select-item-selected-font-weight: 500;
+@select-item-selected-bg: #fff;
+@select-item-active-bg: @select-item-selected-bg;
+
+// 警告提示
+@alert-message-color: @custom-black-8;
+@alert-success-border-color: fade(@success-color, 80%);
+@alert-success-bg-color: fade(@success-color, 10%);
+@alert-success-icon-color: @success-color;
+@alert-info-border-color: fade(@info-color, 80%);
+@alert-info-bg-color: fade(@info-color, 10%);
+@alert-info-icon-color: @info-color;
+@alert-warning-border-color: fade(@warning-color, 80%);
+@alert-warning-bg-color: fade(@warning-color, 10%);
+@alert-warning-icon-color: @warning-color;
+@alert-error-border-color: fade(@error-color, 80%);
+@alert-error-bg-color: fade(@error-color, 10%);
+@alert-error-icon-color: @error-color;
+
+// 折叠面板
+@collapse-background-color: @component-background;
+@collapse-background-gray-color: fade(@text-color, 4%);
+@collapse-header-line-height: 24px;

package/lib/public/src/components/pcfactory/src/styles/theme/variables/common.less

@@ -0,0 +1,9 @@
+// 颜色色板相关
+@custom-black-10: #1c242e;
+@custom-black-8: fade(@custom-black-10, 85%);
+@custom-black-7: fade(@custom-black-10, 75%);
+@custom-black-6: fade(@custom-black-10, 65%);
+@custom-black-5: fade(@custom-black-10, 55%);
+@custom-black-4: fade(@custom-black-10, 45%);
+@custom-black-3: fade(@custom-black-10, 35%);
+@custom-black-2: fade(@custom-black-10, 25%);

package/lib/public/src/components/pcfactory/src/styles/theme/variables/customVariables.less

@@ -0,0 +1,35 @@
+@import './common.less';
+/**
+ * 此文件定义 自定义变量
+ */
+
+// 来自于涛哥自定义的变量，边距字号相关
+@padding-xxxs: 2px;
+@padding-xxs: 4px;
+@padding-20: 20px;
+@font-weight-default: 400;
+@font-weight-bold: 500;
+@font-weight-bolder: 600;
+
+// 表格相关
+@table-border-color: #f0f0f0;
+@table-zebra-stripe-bg: @table-row-hover-bg;
+@table-td-height: 48px;
+@table-middle-td-height: 40px;
+@table-small-td-height: 32px;
+@table-data-input-height: @table-td-height - @table-padding-vertical * 2;
+@middle-table-data-input-height: @table-middle-td-height - @table-padding-vertical-md * 2;
+@small-table-data-input-height: 20px;
+@small-table-data-input-line-height: @table-small-td-height - @table-padding-vertical-sm * 2;
+
+// 滚动条颜色相关
+@scrollbar-thumb-color: #d8d8d8;
+
+// 输入框相关
+@input-affix-padding: @input-padding-horizontal-base * 2 + 14px;
+
+// 来自于涛哥自定义的变量，暂时只发现在树选择中使用到，之后根据使用场景，再进行划分
+@icon-btn-light-color: @custom-black-2;
+@icon-btn-default-color: @custom-black-4;
+@icon-btn-hover-color: @custom-black-7;
+@select-tree-tag-background-color: #f5f5f5;

package/lib/public/src/components/pcfactory/src/styles/theme/variables/index.less

@@ -0,0 +1,2 @@
+@import './antdVariables.less'; // 覆写 antd 原生变量
+@import './customVariables.less'; // 自定义变量

package/lib/public/src/components/pcfactory/src/utils/ChannelContainer.tsx

@@ -0,0 +1,150 @@
+import React, {
+  FC,
+  forwardRef,
+  ForwardRefExoticComponent,
+  FunctionComponent,
+  useCallback,
+  useRef,
+  useState,
+} from 'react';
+// TODO: 替换成自定义hooks 待处理
+import { useDeepCompareEffect } from 'ahooks';
+import { get, isEqualWith, 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<Record<string, any>>({}).current;
+  const [, forceUpdate] = useState({});
+  const uploadChannelProps = useCallback(
+    (props: Record<string, any>, key: string) => {
+      childrenProps[key] = props;
+      if (
+        !isEqualWith(props, childrenProps[key], (v1, v2) => {
+          if (typeof v1 === 'function' && typeof v2 === 'function') {
+            return true;
+          }
+          return undefined;
+        })
+      ) {
+        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/public/src/components/pcfactory/src/utils/ChildRender.ts

@@ -0,0 +1,103 @@
+import { createContext, useContext, useRef, useState } from 'react';
+import { useUpdate } from './ahooks';
+
+export interface ChildRenderContextProps {
+  collectChildData?: (id: string, data: any) => void;
+  collectChildren?: (id: string, children: any) => void;
+  update?: () => void;
+  getCurrentData?: (id: string) => { currentIndex: number; props: any };
+  parentProps?: any;
+}
+
+const childRenderContext = createContext<ChildRenderContextProps>({});
+
+export const ChildRenderProvider = childRenderContext.Provider;
+
+export const useChildRenderContext = () => {
+  return useContext(childRenderContext);
+};
+
+// 给上下文提供通用方法
+export const useChildRender = () => {
+  // 完成收集子元素
+  const [collectComplete, setColletComplete] = useState<boolean>(false);
+  const update = useUpdate();
+
+  const childRef = useRef<{
+    list: string[];
+    data: Map<string, any>;
+    renderChild: Map<string, { current: any }>;
+    props: Map<string, any>;
+    parentProps: any;
+  }>({
+    list: [],
+    data: new Map(),
+    renderChild: new Map(),
+    props: new Map(),
+    parentProps: {},
+  });
+
+  const getIndex = (_id: string) => {
+    return childRef.current.list
+      .filter((id) => {
+        return childRef.current.data.get(id)?.visible ?? true;
+      })
+      .findIndex((id) => id === _id);
+  };
+
+  // 渲染子组件
+  const renderChildren = () => {
+    const { renderChild: childData, list } = childRef.current;
+    if (collectComplete) {
+      return list.map((key) => {
+        return childData.get(key)?.current ?? null;
+      });
+    }
+    return null;
+  };
+
+  return {
+    childRef,
+    collectComplete,
+    // 更新子控件列表
+    resetList: (list: string[]) => {
+      childRef.current.list = list;
+    },
+    // 渲染子组件
+    renderChildren,
+    addChildProps: (id: string, data: any) => {
+      childRef.current.props.set(id, data);
+    },
+    addParentProps: (_props: any) => {
+      childRef.current.parentProps = _props;
+    },
+    // 提供给childRenderContext上下文使用
+    context: {
+      collectChildData: (id: string, data: any) => {
+        childRef.current.data.set(id, data);
+      },
+      // 根据id获取当前数据
+      getCurrentData: (id: string) => {
+        const result = {
+          currentIndex: getIndex(id),
+          props: childRef.current.props.get(id) || {},
+        };
+        return result;
+      },
+      collectChildren: (id: string, child: { current: any }) => {
+        childRef.current.renderChild.set(id, child);
+        if (
+          childRef.current.renderChild.size === childRef.current.list.length
+        ) {
+          setColletComplete(true);
+        }
+      },
+      update() {
+        update();
+      },
+      get parentProps() {
+        return childRef.current.parentProps;
+      },
+    },
+  };
+};

package/lib/public/src/components/pcfactory/src/utils/CustomModule.tsx

@@ -0,0 +1,134 @@
+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, { 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/public/src/components/pcfactory/src/utils/DummyFormContext.ts

@@ -0,0 +1,136 @@
+import React from 'react';
+
+const DummyFormContext = React.createContext<any>(null);
+
+const useDummyFormContext = () => {
+  return React.useContext(DummyFormContext) || {};
+};
+
+// 以下是用于嵌套fieldName写法的东西
+const CHECK_ARR = ['[', ']', '.'];
+// 判断当前索引是否在引号的字符串引用范围内
+const inRange = (ind: number, rangearr: any[]) => {
+  let result = false;
+  rangearr.find((r) => {
+    if (ind > r.end || ind < r.start) {
+      // 如果索引已经超过了区间的范围，那么根本不用考虑
+      return false;
+    }
+    if (r.end >= ind && r.start <= ind) {
+      result = true;
+      return true;
+    }
+    return false;
+  });
+
+  return result;
+};
+// 检查路径。这个方法返回被切分好的标识符数组，空数组代表这个路径是不合法的
+const pathSplit = (str: string) => {
+  const result = [];
+
+  let lastchar: string;
+  let rangestartind: number;
+  let quotechar: string;
+  const quoterange: any[] = [];
+  const strarr = [...str];
+  // 第一次遍历，进行简易的词法分析，本次仅额外处理形如[""]的完整字符串强调形式
+  strarr.forEach((c, ind) => {
+    if (['"', "'"].includes(c) && lastchar === '[') {
+      // 发现下标字符串的起始范围，启用记录
+      rangestartind = ind;
+      quotechar = c;
+    } else if (quotechar && lastchar === quotechar && c === ']') {
+      // 到达结束标记
+      quoterange.push({
+        start: rangestartind,
+        end: ind - 1,
+      });
+      quotechar = '';
+    }
+
+    lastchar = c;
+  });
+
+  let id = '';
+  // 贪心法拆分标识符
+  strarr.forEach((c, ind) => {
+    if (inRange(ind, quoterange)) {
+      if (!['"', "'"].includes(c)) {
+        id += c;
+      }
+    } else if (!CHECK_ARR.includes(c)) {
+      id += c;
+    } else if (id) {
+      result.push(id);
+      id = '';
+    }
+  });
+  if (id) {
+    result.push(id);
+  }
+  // TODO 检查标识符序列是否合法，如果不合法的话抛出空数组？
+  // 这个事情暂时在我这边不还原得很清楚
+
+  return result;
+};
+
+const getObjByPath = (obj: any, path: string) => {
+  if (!obj) return undefined;
+  const sp = pathSplit(path);
+  // chained: 表示这个值取自一个链式写法 notcompletechain:表示途径属性链不完整，比如一个对象里的a字段对象里没有b字段，但取它的a.b，虽然不会报错（得到undefined），但这属性链条不完整
+  const finalresult = {
+    chained: false,
+    notcompletechain: false,
+    value: undefined,
+  };
+
+  let temp = obj;
+  if (sp.length > 0) {
+    finalresult.chained = true;
+    sp.forEach((k) => {
+      if (!temp || !(k in temp)) {
+        finalresult.notcompletechain = true;
+      }
+      temp = temp?.[k];
+    });
+    finalresult.value = temp;
+  } else {
+    finalresult.value = obj[path];
+  }
+
+  return finalresult;
+};
+
+const setObjByPath = (obj: any, path: string, val: any) => {
+  if (!obj) return;
+
+  const sp = pathSplit(path);
+  let result = obj;
+  const lastResult = obj;
+  let lastkey = '';
+  if (sp.length > 0) {
+    sp.forEach((k, ind) => {
+      if (ind < sp.length - 1) {
+        if (lastkey && /^\d+$/g.test(k)) {
+          // 如果有全数字，只要不是第一层，优先尝试给它处理成数组
+          lastResult[lastkey] = Array.isArray(lastResult[lastkey])
+            ? lastResult[lastkey]
+            : [];
+          result = lastResult[lastkey]; // 把上一层改为数组
+          result[k] = result[k] || {};
+          result = result[k];
+        } else {
+          result[k] = result[k] || {};
+          result = result[k];
+        }
+      }
+      lastkey = k;
+    });
+    result[lastkey] = val;
+  } else {
+    obj[path] = val;
+  }
+};
+
+export { DummyFormContext, useDummyFormContext, getObjByPath, setObjByPath };

package/lib/public/src/components/pcfactory/src/utils/Empty/customLocale.tsx

@@ -0,0 +1,6 @@
+import { Empty } from 'antd';
+import EmptySvg from './empty';
+
+export const customLocale = {
+  emptyText: <Empty className="pcfactory-empty-normal" image={<EmptySvg />} />,
+};