@lingxiteam/ebe-utils 0.6.1 → 0.6.3

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

@@ -1,84 +0,0 @@
-@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

@@ -1,9 +0,0 @@
-// 颜色色板相关
-@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

@@ -1,35 +0,0 @@
-@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

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

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

@@ -1,150 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

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