@lingxiteam/ebe-utils 0.5.11 → 0.6.2

package/lib/pcpublic/src/components/pcfactory/src/utils/ExtraButtonComp/index.tsx

@@ -0,0 +1,213 @@
+import React, { useMemo } from 'react';
+import { Button, Tooltip } from 'antd';
+import CommIconEg from '../../Icon';
+import CommIconEd from '../../Icon/IconED';
+import { usePersistFn } from '../ahooks';
+import { WrapperButton } from '../../Button';
+
+export type ExtraButtonCompType = {
+
+    /**
+     * 来源
+     */
+    source: 'editor' | 'engine';
+
+    /**
+     * 点击按钮
+     * @param e 事件对象
+     * @returns
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+
+    buttonConfig: {
+
+        /**
+         * 按钮名称
+         */
+        title: string;
+
+        /**
+         * 图标位置
+         */
+        iconPos: 'left' | 'right';
+
+        /**
+         * 默认按钮类型标识
+         */
+        type?: string;
+
+        /**
+         * id
+         */
+        id: string;
+
+        /**
+         * 一般为调用方法名称
+         */
+        value: string;
+
+        /**
+         * 是否显示纯图标
+         */
+        isIcon?: boolean;
+
+        /**
+         * 图标配置信息
+         */
+        icon?: any;
+
+        /**
+         * 是否显示
+         */
+        checked: boolean;
+
+        /**
+         * 图标显隐规则
+         */
+        rule?: string | boolean;
+
+        /**
+         * 是否禁用
+         */
+        disabled?: boolean | string;
+
+        /**
+         * 提示浮窗配置
+         */
+        popoverSetting?: any;
+
+        /**
+         * 按钮主题
+         */
+        btnType?: 'primary' | 'link' | 'text' | 'ghost' | 'default' | 'dashed';
+
+        /**
+         * 按钮尺寸
+         */
+        btnSize: 'default' | 'small';
+    };
+
+    compProps: {
+
+       /**
+       * 图标控件所需能力
+       */
+      $$componentItem: any;
+      getEngineApis: any;
+      engineApis: any;
+      getEdEngineApi: any;
+      sandBoxSafeRun: any;
+      [key: string]: any;
+    };
+
+    /**
+     * 按钮样式
+     */
+    style?: React.CSSProperties;
+    
+    /**
+     * 按钮类
+     */
+    className?: string;
+}
+
+const ExtraButtonComp: React.FC<ExtraButtonCompType> = (props) => {
+  const { buttonConfig, source, compProps, style, className, ...restProps } = props;
+
+  const { id, title, isIcon = false, btnType = 'default', icon = null, iconPos = 'left', rule, disabled, btnSize = 'default' } = buttonConfig || {};
+
+  // 图标控件
+  const CommIcon = source === 'editor' ? CommIconEd : CommIconEg;
+
+  const pureIcon = useMemo(() => {
+    return isIcon && icon;
+  }, [isIcon, icon]);
+
+  /**
+   * 禁用按钮
+   */
+  const disabledButton = useMemo(() => {
+    if (source === 'engine') {
+      if (disabled === true || (typeof disabled === 'string' && compProps?.sandBoxSafeRun?.(disabled))) {
+        return true;
+      }
+      return false;
+    }
+    return false;
+  }, [disabled]);
+
+  /**
+     * 获取按钮内容
+     */
+  const getButtonContent = usePersistFn(() => {
+    const Icon = icon ? <CommIcon
+      icon={icon}
+      className=""
+      $$componentItem={compProps.$$componentItem}
+      getEngineApis={compProps.getEngineApis}
+      engineApis={compProps.engineApis}
+      getEdEngineApi={compProps.getEdEngineApi}
+    /> : null;
+
+    // 纯图标
+    if (pureIcon) {
+      return Icon;
+    }
+    
+    const res: any[] = [title];
+    if (Icon) {
+      res[iconPos === 'left' ? 'unshift' : 'push'](Icon);
+    }
+
+    return <>{res}</>;
+  });
+
+  /**
+   * 仅显示图标hover需要展示标题
+   */
+  const wrapperTitle = usePersistFn((child: any) => {
+    return <Tooltip title={title}>{child}</Tooltip>;
+  });
+
+  const render = (
+    <WrapperButton>
+      <Button
+        key={id}
+        type={btnType}
+        onClick={props.onClick}
+        style={style}
+        className={className}
+        {...restProps}
+        disabled={disabledButton}
+        size={btnSize as any}
+      >
+        {getButtonContent()}
+      </Button>
+    </WrapperButton>
+  );
+
+  // 配置了隐藏规则
+  if (source === 'engine') {
+    try {
+      if (rule === true || (typeof rule === 'string' && compProps?.sandBoxSafeRun?.(rule))) {
+        return null;
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+  }
+
+
+  if (!buttonConfig.checked) {
+    return <></>;
+  }
+
+  if (pureIcon) {
+    return wrapperTitle(render);
+  }
+
+  return render;
+};
+
+export default ExtraButtonComp;

package/lib/pcpublic/src/components/pcfactory/src/utils/constant.ts

@@ -46,8 +46,8 @@ const LABEL_SPAN_DATA = [
   { title: '1/2', value: 12 },
 ];
 
-const getDefaultTableColumns = () => [
-  { title: '第一列', dataIndex: 'column1', key: 'column1', lineNum: 1, titleLineNum: 1 },
+const getDefaultTableColumns = (compName?: string) => [
+  { title: '第一列', dataIndex: 'column1', key: 'column1', lineNum: 1, titleLineNum: 1, width: compName === 'TreeTable' ? 240 : undefined },
   { title: '第二列', dataIndex: 'column2', key: 'column2', lineNum: 1, titleLineNum: 1 },
   { title: '第三列', dataIndex: 'column3', key: 'column3', lineNum: 1, titleLineNum: 1 },
   { title: '第四列', dataIndex: 'column4', key: 'column4', lineNum: 1, titleLineNum: 1 },
@@ -572,6 +572,50 @@ const CardIconTypePaddingMap = {
   left: '0px',
 } as any;
 
+/**
+ * 子表单类型
+ */
+export const FormDisplayTypeOptions = [
+  { value: 'standardForm', title: '表单' },
+  { value: 'standardTable', title: '表格' },
+] as const;
+
+export type FormDisplayType = typeof FormDisplayTypeOptions[number]['value'];
+
+/**
+ * 标题前缀样式
+ */
+export const SampleTitlePrefixStyleOption = [
+  { title: '无样式', value: 'none' },
+  {
+    title: '竖线装饰',
+    value: 'line',
+    prefixStyle: {
+      width: '3px',
+      height: '9px',
+      background: '#4477EE',
+      borderRadius: '2px',
+    },
+  },
+  {
+    title: '半圆装饰',
+    value: 'circle',
+    prefixStyle: {
+      width: '9px',
+      height: '9px',
+      borderRadius: '0 6px 6px 0',
+      background: '#4477EE',
+    },
+  },
+  { title: '自定义', value: 'auto' },
+];
+
+const getDefaultQuickEntryOptions = () => [...new Array(2).keys()].map(key => ({
+  key: key + 1,
+  title: `快捷入口名称${key + 1}`,
+  color: '#4477EE',
+}));
+
 export {
   COL_SPAN_DATA,
   WRAPPER_SPAN_DATA,
@@ -603,4 +647,5 @@ export {
   DatePickerOptions,
   SizePaddingMap,
   CardIconTypePaddingMap,
+  getDefaultQuickEntryOptions,
 };

package/lib/pcpublic/src/components/pcfactory/src/utils/formUtils/FormContext.tsx

@@ -102,6 +102,11 @@ export interface FormContextProps {
    * label是否换行
    */
   labelWrap?: boolean;
+
+  /**
+   * 折叠字段折叠需要隐藏
+   */
+  foldFields?: string[];
 }
 
 export interface NoopInFormProps {

package/lib/pcpublic/src/components/pcfactory/src/utils/formUtils/FormFields.tsx

@@ -19,6 +19,7 @@ import classNames from 'classnames';
 import { EngineBaseProps } from '@lingxiteam/types';
 import { antPrefix } from '../../variables';
 import useInit from '../hooks/useInit';
+import { useFormListContext } from '../../FormList/FormListProvider';
 
 const FULL_COL = 24;
 
@@ -190,6 +191,21 @@ export interface FormFieldsProps extends BaseFormFieldsProps {
 
   // 组件尺寸
   size?: string;
+  
+  /**
+   * 数组属性名
+   */
+  namePath?: (string | number)[];
+
+  /**
+   * 隐藏FormItem标题
+   */
+  hiddenLabel?: boolean;
+
+  /**
+   * 移除错误样式标志
+   */
+  removeErrorCls?: boolean;
 }
 
 export const getFieldsProps = (props: any): FormFieldsProps => {
@@ -223,6 +239,7 @@ export const getFieldsProps = (props: any): FormFieldsProps => {
     className: props.className,
     visibility: props.visibility,
     size: props.size,
+    namePath: props.namePath,
   };
 };
 
@@ -341,6 +358,9 @@ export const FormFields = React.forwardRef<FormFieldsHooks, FormFieldsProps>((pr
     className,
     visibility = false,
     size = 'default',
+    namePath,
+    hiddenLabel = false,
+    removeErrorCls = false,
   } = props;
   const { useTopContainerHidden } = getEngineApis?.() || {};
   // 获取上层容器是否被隐藏
@@ -354,6 +374,8 @@ export const FormFields = React.forwardRef<FormFieldsHooks, FormFieldsProps>((pr
   // 表单上下文
   const formContext = useForm();
 
+  const formListContext = useFormListContext();
+
   // 控件样式上如果被隐藏需要同步设置给Col 保证表单项隐藏
   const { display: customDisplay, visibility: customVisibility } = style;
 
@@ -366,6 +388,16 @@ export const FormFields = React.forwardRef<FormFieldsHooks, FormFieldsProps>((pr
     return temIsFormRootChild;
   }, []);
 
+  const finalNamePath = useMemo(() => {
+    if (namePath?.length) {
+      return namePath;
+    }
+    if (formListContext.prefixNamePaths.length) {
+      return [...formListContext.prefixNamePaths, fieldName];
+    }
+    return fieldName.split('.');
+  }, [fieldName, namePath]);
+
   useEffect(() => {
     if (!inForm || !uid || !fieldName || typeof formContext.uploadChildRelation !== 'function') {
       return;
@@ -418,11 +450,21 @@ export const FormFields = React.forwardRef<FormFieldsHooks, FormFieldsProps>((pr
         colSpan: selfSpan || formContext.colSpan,
         // flex子元素默认 flex: 0 1 auto, 需要手动 将 flex-shrink设置为0，避免宽度不生效；
         // flex子元素默认 min-width为auto (width 和 min-width均为auto)导致shrink-to-fit计算容器宽度内容溢出，设置overflow 或者 width: 0 或 min-width: 0;
-        wrapperStyle: wrapperCol !== 'auto' ? { width: wrapperCol, flexShrink: 0 } : { flex: 1, minWidth: 0 },
+        // label隐藏，content部分默认填满
+        wrapperStyle: wrapperCol !== 'auto' && !hiddenLabel ? { width: wrapperCol, flexShrink: 0 } : { flex: 1, minWidth: 0 },
       };
     }
     return {} as any;
-  }, []);
+    // @ts-ignore
+  }, [formContext?.layout]);
+
+  // 字段是否被收起 收起需要隐藏
+  const fieldIsFold = useMemo(() => {
+    if (formContext.inForm) {
+      return formContext.foldFields?.includes(uid);
+    }
+    return false;
+  }, [formContext.inForm ? formContext.foldFields : '']);
 
   const [changeColStyle, hiddenClassName] = useMemo(() => {
     const colStyle: React.CSSProperties = {};
@@ -443,8 +485,11 @@ export const FormFields = React.forwardRef<FormFieldsHooks, FormFieldsProps>((pr
         hiddenClassName = 'pcfactory-form-item-hidden';
       }
     }
+    if (fieldIsFold) {
+      colStyle.display = 'none';
+    }
     return [colStyle, hiddenClassName];
-  }, [props.visible, customDisplay, customVisibility, visibility]);
+  }, [props.visible, customDisplay, customVisibility, visibility, fieldIsFold]);
 
 
   const initialValue = useMemo(() => {
@@ -562,10 +607,10 @@ export const FormFields = React.forwardRef<FormFieldsHooks, FormFieldsProps>((pr
   }
 
   // 表单项错误滚动使用的className
-  const colClassName = getFormItemClassName(fieldName);
+  const colClassName = removeErrorCls ? '' : getFormItemClassName(fieldName);
 
   // Form.Item 不同布局下差异属性
-  const formItemProps: FormItemProps = childProps.showWrapperContainer
+  const formItemProps: FormItemProps = childProps.showWrapperContainer || hiddenLabel === true
     ? {
       // 自定义label模式
       wrapperCol: { span: FULL_COL },
@@ -599,9 +644,10 @@ export const FormFields = React.forwardRef<FormFieldsHooks, FormFieldsProps>((pr
       disabled={props.disabled}
       labelWrap={formContext.labelWrap}
       lineHeight={childProps.lineHeight}
+      hiddenLabel={hiddenLabel}
     >
       <Form.Item
-        name={fieldName}
+        name={finalNamePath}
         onReset={() => {
           const { onlySyncValue, compatConfig } = getEngineApis?.() || {};
           if (compatConfig?.resetFormToDefaultValue) {
@@ -614,7 +660,7 @@ export const FormFields = React.forwardRef<FormFieldsHooks, FormFieldsProps>((pr
           }
         }}
         // 如果顶层容器隐藏，不进行校验
-        rules={topHidden === true ? [] : rules}
+        rules={topHidden === true || fieldIsFold ? [] : rules}
         trigger={trigger}
         className={classNames('pcFactory-from-component', `${className}`, {
           // 用于当表单内是布局容器，布局容器内表单控件的隐藏

package/lib/pcpublic/src/components/pcfactory/src/utils/formUtils/WrapperContainer.tsx

@@ -18,6 +18,7 @@ export interface WrapperContainerProps {
   disabled: boolean;
   labelWrap?: boolean;
   lineHeight: string;
+  hiddenLabel: boolean;
 }
 
 const WrapperContainer: FC<WrapperContainerProps> = props => {
@@ -34,6 +35,7 @@ const WrapperContainer: FC<WrapperContainerProps> = props => {
     disabled,
     labelWrap,
     lineHeight,
+    hiddenLabel,
   } = props;
 
   // 配合测试的属性
@@ -48,7 +50,7 @@ const WrapperContainer: FC<WrapperContainerProps> = props => {
     return <Col {...testProps} {...props.colProps}>{children}</Col>;
   }
 
-  const content = (
+  const labelContent = hiddenLabel ? null : (
     <div
       style={{
         width: labelCol,
@@ -95,7 +97,7 @@ const WrapperContainer: FC<WrapperContainerProps> = props => {
             alignItems: 'center',
           }}
         >
-          {content}
+          {labelContent}
           <div style={wrapperStyle}>{children}</div>
         </div>
       </Col>
@@ -112,7 +114,7 @@ const WrapperContainer: FC<WrapperContainerProps> = props => {
       }}
       {...testProps}
     >
-      {content}
+      {labelContent}
       <div style={wrapperStyle}>{children}</div>
     </div>
   );

package/lib/pcpublic/src/components/pcfactory/src/utils/formUtils/formTools.ts

@@ -0,0 +1,17 @@
+import { set } from 'lodash';
+
+
+/**
+ * 将表单中key为 xxx.xxx 层级结构的转成对象
+ * @param sourceData 源数据
+ */
+export const formatSetFormFieldsValues = (sourceData: Record<string, any> = {}): Record<string, any> => {
+  const finalValue: any = {};
+  // 兼容表单项为属性路径 xxx.xxx
+  Object.keys(sourceData).forEach(key => {
+    const value = sourceData[key];
+    set(finalValue, key, value);
+  });
+
+  return finalValue;
+};

package/lib/pcpublic/src/components/pcfactory/src/utils/hooks/useCommonImperativeHandle.ts

@@ -11,7 +11,7 @@ import { useLocale } from './useLocale';
  * @param handle 额外的方法
  * @param depends 依赖监听
  */
-export const useCommonImperativeHandle = (ref: any, props: any, handle: any = {}) => {
+export const useCommonImperativeHandle = (ref: any, props: any, handle: any = {}, tools?: {listenStatus?: MonitorFn}) => {
   const {
     disabled: propsDisabled,
     required: propsRequired,
@@ -119,6 +119,7 @@ export const useCommonImperativeHandle = (ref: any, props: any, handle: any = {}
       } else if (type === 'readonly') {
         setReadOnly(!!value);
       }
+      tools?.listenStatus?.(value, type);
     };
     if (formContext.inForm && formContext.statusMonitor) {
       formContext.statusMonitor.addListener(fn);

package/lib/pcpublic/src/components/pcfactory/src/utils/hooks/useCompState.tsx

@@ -1,9 +1,10 @@
 import React, { useMemo } from 'react';
+import { filterHtmlNode } from '../index';
 
 export const renderHTML = (des: string) => {
   if (des) {
     // eslint-disable-next-line react/no-danger
-    return <span dangerouslySetInnerHTML={{ __html: des }} style={{ display: 'flex', justifyContent: 'center' }} />;
+    return <span dangerouslySetInnerHTML={{ __html: filterHtmlNode(des) }} style={{ display: 'flex', justifyContent: 'center' }} />;
   }
   return null;
 };

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

@@ -104,7 +104,7 @@ export const useLocale = (
 ) => {
   const getLocale = (t: string, params?: any) => {
     if (localeApis?.getLocale) {
-      return localeApis?.getLocale(t, '', params) || lang(t, params);
+      return localeApis?.getLocale(t, '', params);
     }
     return lang(t, params);
   };

package/lib/pcpublic/src/components/pcfactory/src/utils/index.ts

@@ -14,3 +14,4 @@ export * from './hooks/usePrintMode';
 export { default as basicStatusTransfer } from './basicStatusTransfer';
 export { DynamicDataProvider, useDynamicData } from './dynamicUtils/DynamicContext';
 export type { DynamicDataContext } from './dynamicUtils/DynamicContext';
+export { useLocale, lang } from './hooks/useLocale';

package/lib/pcpublic/src/components/pcfactory/src/utils/jsx.editor.ts

@@ -0,0 +1,111 @@
+import _ from 'lodash';
+import moment from 'moment';
+import { createElement, Fragment } from 'react';
+
+// 注意：该文件仅支持配置态，写了部分不兼容IE的语法，禁止在运行态使用!!!!!!!!!
+const createRecursionProxy = (type: string) => {
+  const proxy: any = new Proxy(
+    {},
+    {
+      get(target, p) {
+        if (p === 'toString') {
+          return () => 'type';
+        }
+        return null;
+      },
+    }
+  );
+  proxy.toString = () => {
+    return type;
+  };
+  return proxy;
+};
+
+export const moduleContext = {
+  data: createRecursionProxy('data'),
+  globalData: createRecursionProxy('globalData'),
+  urlParam: createRecursionProxy('urlParam'),
+  routerData: createRecursionProxy('routerData'),
+  state: createRecursionProxy('state'),
+  lcdpApi: {},
+  appId: '',
+  pageId: '',
+  attrDataMap: new Proxy(
+    {},
+    {
+      get() {
+        return [];
+      },
+    }
+  ),
+  moment,
+  _,
+  messageApi: new Proxy(
+    {},
+    {
+      get() {
+        return () => {};
+      },
+    }
+  ),
+  api: new Proxy(
+    {},
+    {
+      get() {
+        return () => {};
+      },
+    }
+  ),
+  customActionMap: {},
+  LcdpTerminalType: {},
+  appInfo: {},
+  utils: {
+    getLocaleEnv: () => {},
+    getLocaleLanguage: () => {},
+  },
+  functorsMap: new Proxy(
+    {},
+    {
+      get() {
+        return () => {};
+      },
+    }
+  ),
+  getValue: (id: string) => `$getValue(${id})$`,
+};
+
+
+export const sandBoxLoadModule = (code: string, options?: { allowMap?: Record<string, any>, dependencies?: Record<string, any> }) => {
+  const { allowMap } = options || {};
+  const exports = {} as any;
+  const module = { exports };
+  const mockRequire = () => {
+    throw new Error(`Module ${name} cannot be found.`);
+  };
+
+  const codeStr = code.replace(/^\$/, '').replace(/\$$/, '');
+
+  // 模拟commonjs环境
+  const context = {
+    ...moduleContext,
+    require: mockRequire,
+    exports,
+    module,
+    Lingxi: {
+      createVNode: createElement,
+      Fragment,
+    },
+    ...allowMap,
+  };
+
+      
+  // eslint-disable-next-line no-new-func
+  const func = new Function('context', `with(context){
+    ${codeStr}
+  }`);
+
+  func(context);
+
+  // 取出返回值
+  return module.exports;
+};