@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/FloatingButton/PopoverWrapper.tsx

@@ -0,0 +1,218 @@
+import { isDynamicProperty } from '../utils/common';
+import { EngineBaseProps } from '@lingxiteam/types';
+import { Popover, PopoverProps } from 'antd';
+import React from 'react';
+
+export type PopoverValueType =
+  | {
+      options?: {
+        title?: string;
+        placement?: PopoverProps['placement'];
+        trigger?: 'click' | 'hover';
+        content: string;
+        contentFn: () => string;
+        rule?: string;
+        maxWidth?: number;
+      };
+    }
+  | {
+      page: {
+        pageId: string;
+        pagePath: string;
+        pageName: string;
+        placement?: PopoverProps['placement'];
+        rule?: string;
+        trigger?: 'click' | 'hover';
+        options?: any[];
+        maxWidth?: number;
+      };
+    };
+const PopoverWrapper: React.FC<{
+  popoverSetting?: PopoverValueType;
+  engineApis: ReturnType<EngineBaseProps['getEngineApis']>;
+  compId: string;
+  row: any;
+  rowId: string;
+  index: number;
+}> = (props) => {
+  const { children, popoverSetting, engineApis, compId, row, rowId, index } =
+    props;
+  const { renderPopover, sandBoxSafeRun } = engineApis || {};
+  if (!popoverSetting || !renderPopover) {
+    return children;
+  }
+
+  const renderChildren = () => {
+    let trigger = 'page' in popoverSetting && popoverSetting.page ? popoverSetting?.page?.trigger : undefined;
+    if ('options' in popoverSetting && popoverSetting?.options) {
+      trigger = popoverSetting?.options.trigger;
+    }
+    if (trigger === 'click') {
+      // 阻止点击冒泡行为
+      return (
+        <span
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          style={{
+            lineHeight: 0,
+          }}
+        >
+          {children}
+        </span>);
+    }
+    return children;
+  };
+  // 页面
+  if ('page' in popoverSetting && popoverSetting.page) {
+    const { page } = popoverSetting;
+    try {
+      const pageRule = page.rule;
+      if (pageRule) {
+        const hiddenRuleFn = (row: any, rowId: string, index: number) =>
+          sandBoxSafeRun(pageRule, {
+            row,
+            rowId,
+            index,
+          });
+
+        if (hiddenRuleFn(row, rowId, index)) {
+          return renderChildren();
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    }
+
+    const params: any = {};
+    let popoverOptions = page.options;
+    if (page.options) {
+      popoverOptions = page.options.map((_c: any) => {
+        const c = {
+          ..._c,
+        };
+        try {
+          const stateParamRule = c?.stateParam;
+          if (stateParamRule && typeof stateParamRule === 'string') {
+            const paramFunc = (row: any, rowId: string, index: number) =>
+              sandBoxSafeRun(stateParamRule, {
+                row,
+                rowId,
+                index,
+              });
+
+            params[_c.code] = paramFunc(row, rowId, index);
+            c.stateParam = params[_c.code];
+          }
+        } catch (e) {
+          console.error(e);
+        }
+        return c;
+      });
+    }
+
+    const comp = (
+      <span
+        onClick={(e) => {
+          if (page.trigger === 'click') {
+            e.stopPropagation();
+          }
+        }}
+        style={{
+          lineHeight: 0,
+        }}
+      >
+        { renderPopover({
+          childElement: <>{children}</>,
+          props,
+          popoverSetting: {
+            page: {
+              ...page,
+              options: popoverOptions,
+            },
+            options: popoverOptions,
+            state: params,
+          },
+          uid: compId,
+        })}
+      </span>);
+    return comp as any;
+  }
+  // 自定义
+  if ('options' in popoverSetting) {
+    const { options } = popoverSetting;
+    const {
+      maxWidth,
+      content,
+      rule: popRule,
+      ...resOptions
+    } = options as any;
+    // 隐藏规则
+    try {
+      if (popRule) {
+        const hiddenRule = (row: any, rowId: string, index: number) =>
+          sandBoxSafeRun(popRule, {
+            row,
+            rowId,
+            index,
+          });
+        if (hiddenRule(row, rowId, index)) {
+          return renderChildren();
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    }
+
+    const popContent = content;
+
+    let newPopContent: string = popContent;
+    try {
+      if (popContent) {
+        const popoverContent = (row: any, rowId: string, index: number) =>
+          sandBoxSafeRun(popContent, {
+            row,
+            rowId,
+            index,
+          });
+
+        newPopContent = popoverContent(row, rowId, index) as string;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    if (
+      newPopContent === undefined &&
+      typeof popContent === 'string' &&
+      !isDynamicProperty(popContent)
+    ) {
+      // 当表达式返回空，且不被$$包裹时，内容当成普通文本处理
+      newPopContent = popContent;
+    }
+
+    return (
+      <span
+        onClick={(e) => {
+          if (options?.trigger === 'click') {
+            e.stopPropagation();
+          }
+        }}
+        style={{
+          lineHeight: 0,
+        }}
+      >
+        <Popover
+          overlayStyle={{ maxWidth: maxWidth || 'none', wordBreak: 'break-word', overflow: 'auto' }}
+          content={newPopContent}
+          {...resOptions}
+          arrowPointAtCenter
+        >
+          <>{children}</>
+        </Popover>
+      </span>
+    );
+  }
+  return children;
+};
+
+export default PopoverWrapper;

package/lib/pcpublic/src/components/pcfactory/src/FloatingButton/const.ts

@@ -0,0 +1,79 @@
+const COMMON_BTN_SIZE = {
+  padding: '0',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: 'none',
+};
+export const FLOATING_BUTTON_SIZE = {
+  large: {
+    btnStyle: {
+      width: '48px',
+      height: '48px',
+      ...COMMON_BTN_SIZE,
+    },
+    iconStyle: {
+      fontSize: '24px',
+    },
+    btnTextStyle: {
+      fontSize: '14px',
+    },
+    floatgroupItemStyle: {
+      width: '48px',
+      height: '48px',
+    },
+    floatgroupSquareItemStyle: {
+      width: '24px',
+      minHeight: '24px',
+      fontSize: '12px',
+      ...COMMON_BTN_SIZE,
+    },
+  },
+  middle: {
+    btnStyle: {
+      width: '40px',
+      height: '40px',
+      ...COMMON_BTN_SIZE,
+    },
+    iconStyle: {
+      fontSize: '20px',
+    },
+    btnTextStyle: {
+      fontSize: '12px',
+    },
+    floatgroupItemStyle: {
+      width: '40px',
+      height: '40px',
+    },
+    floatgroupSquareItemStyle: {
+      width: '20px',
+      minHeight: '20px',
+      fontSize: '10px',
+      ...COMMON_BTN_SIZE,
+    },
+  },
+  small: {
+    btnStyle: {
+      width: '32px',
+      height: '32px',
+      ...COMMON_BTN_SIZE,
+    },
+    iconStyle: {
+      fontSize: '16px',
+    },
+    btnTextStyle: {
+      fontSize: '10px',
+    },
+    floatgroupItemStyle: {
+      width: '32px',
+      height: '32px',
+    },
+    floatgroupSquareItemStyle: {
+      width: '16px',
+      minHeight: '16px',
+      fontSize: '8px',
+      ...COMMON_BTN_SIZE,
+    },
+  },
+};

package/lib/pcpublic/src/components/pcfactory/src/FloatingButton/index.tsx

@@ -0,0 +1,12 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React from 'react';
+import FloatingButtonLoader from './loader';
+
+const FloatingButton = LingxiForwardRef<unknown, any>((props, ref) => {
+  // 暴露方法
+  React.useImperativeHandle(ref, () => ({}));
+
+  return <FloatingButtonLoader {...props} />;
+});
+
+export default FloatingButton;

package/lib/pcpublic/src/components/pcfactory/src/FloatingButton/loader.tsx

@@ -0,0 +1,12 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const FloatingButtonLoader = Loadable({
+  loader: async () =>
+    (await import(
+      /* webpackChunkName: 'pcFactory-FloatingButton' */ './FloatingButton'
+    )) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default FloatingButtonLoader;

package/lib/pcpublic/src/components/pcfactory/src/Form/Form.tsx

@@ -24,6 +24,7 @@ import { useFormStatus } from './useFormStatus';
 import { isEqual } from 'lodash';
 import { useCreation } from '../utils/ahooks';
 import classNames from 'classnames';
+import { formatSetFormFieldsValues } from '../utils/formUtils/formTools';
 
 const EMPTY_COL = { span: 'none' }; // 避免每次都创建对象造成无用渲染
 const FULL_COL = { span: 24 };
@@ -57,6 +58,21 @@ export interface FormProps {
    * label是否换行
    */
   labelWrap?: boolean;
+
+  /**
+   * 查询表单按钮容器
+   */
+  QueryFormView?: JSX.Element;
+
+  /**
+   * 折叠字段
+   */
+  foldFields?: string[];
+
+  /**
+   * 表单项尺寸
+   */
+  size?: 'small' | 'middle' | 'large';
 }
 
 const useInit = (cb: () => () => void) => {
@@ -130,7 +146,7 @@ export const ViewFormItem = (props: any) => {
   );
 };
 
-type FormChildrenType = Pick<FormProps, 'colSpan' | 'rowSpace' | 'layout' | 'colSpace'> & {
+type FormChildrenType = Pick<FormProps, 'colSpan' | 'rowSpace' | 'layout' | 'colSpace' | 'QueryFormView'> & {
   children?: React.ReactNode;
   formRef?: any;
   engineApis?: any;
@@ -232,6 +248,10 @@ export const FormChildren = (props: FormChildrenType) => {
   
       components.push(cloneElement(child, { extendProps: { isFormRootChild: true } } as any));
     });
+
+    if (props.QueryFormView) {
+      components.push(props.QueryFormView);
+    }
   
     return components;
   };
@@ -254,7 +274,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
   const {
     layout,
     colSpan,
-    colon,
+    colon = true,
     labelAlign,
     extendProps,
     backgroundType,
@@ -267,12 +287,27 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
     visible = true,
     className,
     isShowTitle = false,
+    foldFields,
   } = props;
 
   const formChildRelation = useRef({});
   const patchSetFormsValueFn = useRef<Record<string, any>>({}).current;
 
   const [form] = AntdForm.useForm();
+
+  useMemo(() => {
+    // 获取原始的 setFieldsValue 方法
+    const originalSetFieldsValue = form.setFieldsValue;
+    Object.defineProperty(form, 'setFieldsValue', {
+      value: (values: any) => {
+        // 调用原始的 setFieldsValue 方法
+        originalSetFieldsValue.call(form, formatSetFormFieldsValues(values));
+      },
+      writable: true,
+      configurable: true,
+    });
+  }, [form]);
+
   const engineApis = getEngineApis();
   const formRef = useRef<HTMLDivElement>(null);
   const dynamicContext = useDynamicData() || {};
@@ -384,8 +419,8 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
           }
         });
       }
-      
-      form.setFieldsValue(target);
+
+      form.setFieldsValue(formatSetFormFieldsValues(target));
     },
 
     /**
@@ -407,6 +442,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
     // 作为ref标志，表示form已经被渲染了
     has: true,
     form,
+    patchSetFormsValueFn,
   }), [status]);
 
   /**
@@ -475,8 +511,9 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
       isShowTitle,
       formCode: formCode || $$componentItem?.id,
       labelWrap: props.labelWrap,
+      foldFields,
     }),
-    [form, layout, colSpan, labelCol, wrapperCol, colon, labelAlign, addListener, removeListener],
+    [form, layout, colSpan, labelCol, wrapperCol, colon, labelAlign, addListener, removeListener, foldFields],
   );
 
   const formStyle: React.CSSProperties = {
@@ -500,6 +537,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
             wrapperCol={layout === 'horizontal' ? wrapperCol : EMPTY_COL}
             labelWrap={props.labelWrap}
             style={formStyle}
+            size={props.size}
             onValuesChange={(changedValues, values) => {
               const keys = Object.keys(changedValues || {});
               if (typeof onValuesChange === 'function') {
@@ -555,6 +593,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
                 wrapperCol={layout === 'horizontal' ? wrapperCol : EMPTY_COL}
                 labelWrap={props.labelWrap}
                 style={formStyle}
+                size={props.size}
                 {...extendProps}
               >
                 <FormChildren formRef={formRef} {...props} engineApis={engineApis}>

package/lib/pcpublic/src/components/pcfactory/src/FormGroup/FormGroup.tsx

@@ -0,0 +1,128 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import classNames from 'classnames';
+import { CaretDownOutlined } from '@lingxiteam/icons';
+import React, { CSSProperties, useMemo, useState } from 'react';
+import { MyCardProps } from '../Card';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import { FormContextProps, useForm } from '../utils';
+import { Collapse } from 'antd';
+import { FormChildren } from '../Form/Form';
+import TitleComp from './TitleComp';
+import useExtendBtn from '../Card/useExtendBtn';
+
+type CardProps = Pick<MyCardProps, 'title'| 'name'| 'prefixIcon' | 'visible' | 'extendNum' | 'extend' | 'className' | 'backgroundType'| 'hasIcon'>
+export interface FormGroupProps extends CardProps {
+  appId?: string;
+  getEngineApis?: any;
+  required?: boolean;
+  fold?: boolean;
+  onFoldChange?: (fold: boolean) => void;
+  iconType?: 'none' | 'line' | 'circle' | 'auto' | 'divider';
+  style: CSSProperties & { titleColor?: string; titleFontSize?: number; titleLineHeight?: number; titleFontWeight?: number }
+  titleStyle?: 'none' | 'divider';
+  'data-compid'?: string;
+}
+
+const FORM_GROUP_KEY = 'formGroup';
+const prefixCls = 'ued-form-group';
+export const formGroupPrefixCls = prefixCls;
+const { Panel } = Collapse;
+const FormGroup = LingxiForwardRef<any, FormGroupProps>((props) => {
+  const { style = {}, title, className, backgroundType, getEngineApis, appId, fold, onFoldChange, children, titleStyle, ...restProps } = props;
+  const engineApis = getEngineApis?.() || {};
+  const [foldKey, setFoldKey] = useState([FORM_GROUP_KEY]);
+  const { backgroundStyle } = useBackgroundStyle({
+    engineApis,
+    backgroundType,
+    appId,
+    mode: 'engine',
+  });
+  const { colSpan, rowSpace, layout, colSpace } = useForm() as FormContextProps;
+  
+  const { containerStyle, headStyle, bodyStyle } = useMemo(() => {
+    const { titleColor, titleFontSize, titleFontWeight, titleLineHeight, ...restStyle } = style;
+    const container: CSSProperties = {
+      ...(backgroundStyle || {}),
+    };
+    const head: CSSProperties = {
+      color: titleColor, fontSize: titleFontSize, fontWeight: titleFontWeight, lineHeight: titleLineHeight,
+    };
+    const body: CSSProperties = {
+      ...restStyle,
+    };
+    const containerKeys = ['margin', 'border'];
+    Object.keys(body).forEach((k) => {
+      const key = k.toLocaleLowerCase() || '';
+      const hasKey = containerKeys.find((innerKey) => key && key.indexOf(innerKey) === 0);
+      if (hasKey) {
+        (container as any)[k] = body[k as keyof CSSProperties];
+        delete body[k as keyof CSSProperties];
+      }
+    });
+    return {
+      containerStyle: container,
+      headStyle: head,
+      bodyStyle: body,
+    };
+  }, [backgroundStyle, style]);
+
+  const { renderExtendBtn } = useExtendBtn({ ...props, prefixCls });
+
+  return (
+    <div
+      data-compid={props?.['data-compid']}
+      className={classNames(prefixCls, className)}
+      style={containerStyle}
+    >
+      <Collapse
+        {...restProps}
+        expandIconPosition="end"
+        activeKey={fold ? foldKey : [FORM_GROUP_KEY]}
+        expandIcon={({ isActive }) => {
+          return fold && (
+          <div
+            className={`${prefixCls}-fold`}
+            onClick={() => {
+              if (fold) {
+                onFoldChange?.(!(foldKey?.length > 0));
+                setFoldKey(foldKey?.length ? [] : [FORM_GROUP_KEY]);
+              }
+            }}
+          >
+            <CaretDownOutlined rotate={isActive ? 0 : -90} />
+          </div>);
+        }}
+      >
+        <Panel
+          key="formGroup"
+          className={classNames(`${prefixCls}-body-wrap`, `${prefixCls}-body-wrap-${titleStyle}`)}
+          header={(
+            <div className={classNames(`${prefixCls}-head-wrap`, className)} style={headStyle}>
+              <div className={`${prefixCls}-title-box`}>
+                <TitleComp
+                  title={title}
+                  getEngineApis={getEngineApis}
+                  $$componentItem={props?.$$componentItem}
+                  prefixCls={prefixCls}
+                  iconType={props.iconType}
+                  hasIcon={props.hasIcon}
+                  prefixIcon={props.prefixIcon}
+                />
+              </div>
+              {renderExtendBtn()}
+            </div>
+        )}
+        >
+          <div className={`${prefixCls}-body`} style={bodyStyle}>
+            <FormChildren rowSpace={rowSpace} layout={layout} colSpace={colSpace} colSpan={colSpan} engineApis={engineApis}>
+              {children}
+            </FormChildren>
+          </div>
+        </Panel>
+      </Collapse>
+    </div>
+  );
+});
+
+
+export default FormGroup;