@lingxiteam/ebe-utils 0.2.22 → 0.2.23

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

@@ -1,14 +1,29 @@
+import React, {
+  useImperativeHandle,
+  Children,
+  cloneElement,
+  useRef,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { Form as AntdForm, Row, Col } from 'antd';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import { Col, Form as AntdForm, Row } from 'antd';
+import {
+  FormProvider,
+  FormContextProps,
+  getFormItemClassName,
+  usePrintMode,
+  PrintContainer,
+  useDynamicData,
+} from '../utils';
 import type { FormLayout } from 'antd/lib/form/Form';
-import classNames from 'classnames';
-import { isEqual } from 'lodash';
-import React, { Children, cloneElement, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { FormContextProps, FormProvider, getFormItemClassName, PrintContainer, useDynamicData, usePrintMode } from '../utils';
-import { useCreation } from '../utils/ahooks';
+import WrapperForm from './WrapperForm';
 import useBackgroundStyle from '../View/useBackgroundStyle';
 import { useFormStatus } from './useFormStatus';
-import WrapperForm from './WrapperForm';
+import { isEqual } from 'lodash';
+import { useCreation } from '../utils/ahooks';
+import classNames from 'classnames';
 
 const EMPTY_COL = { span: 'none' }; // 避免每次都创建对象造成无用渲染
 const FULL_COL = { span: 24 };
@@ -37,29 +52,42 @@ export interface FormProps {
    * 是否一直展示标题（零代码使用，表单内包裹view然后再包裹表单控件，需要展示标题）
    */
   isShowTitle?: boolean;
+
+  /**
+   * label是否换行
+   */
+  labelWrap?: boolean;
 }
 
 const useInit = (cb: () => () => void) => {
   const initialRef = useRef(true);
-  const unmountRef = useRef(() => {});
+  const unmountRef = useRef(() => { });
 
   if (initialRef.current) {
     initialRef.current = false;
     unmountRef.current = cb();
   }
 
-  useEffect(
-    () => () => {
-      if (typeof unmountRef.current === 'function') {
-        unmountRef.current();
-      }
-    },
-    [unmountRef.current]
-  );
+  useEffect(() => () => {
+    if (typeof unmountRef.current === 'function') {
+      unmountRef.current();
+    }
+  }, [unmountRef.current]);
 };
 
 export const ViewFormItem = (props: any) => {
-  const { schemaProps, selfSpan, colSpan, getVisible, style, stateListener, isBlank, i, uid, child } = props;
+  const {
+    schemaProps,
+    selfSpan,
+    colSpan,
+    getVisible,
+    style,
+    stateListener,
+    isBlank,
+    i,
+    uid,
+    child,
+  } = props;
 
   const [, setUpdate] = useState(0);
 
@@ -106,7 +134,7 @@ type FormChildrenType = Pick<FormProps, 'colSpan' | 'rowSpace' | 'layout' | 'col
   children?: React.ReactNode;
   formRef?: any;
   engineApis?: any;
-};
+}
 export const FormChildren = (props: FormChildrenType) => {
   const { children, colSpan, formRef, rowSpace, layout, colSpace, engineApis } = props;
 
@@ -138,54 +166,53 @@ export const FormChildren = (props: FormChildrenType) => {
         return 0;
       }
       const item = comps[curIndex - 1];
-      return item.props?.schema?.props?.formItemIndex || curIndex;
+      return item.props?.schema?.props?.formItemIndex ?? curIndex;
     };
     Children.forEach(comps, (child, index) => {
       if (!React.isValidElement<any>(child)) {
         components.push(child);
         return;
       }
-
+  
       const { schema } = child.props;
       const { compType, props: schemaProps } = schema || {};
-
+  
       if (compType !== undefined && compType !== 2) {
         const { formItemIndex, hidden, style: childStyle, selfSpan } = schemaProps;
         const { display: customDisplay, visibility: customVisibility } = childStyle || {};
-
+  
         const changeColStyle = () => {
           const colStyle: React.CSSProperties = {};
-
+  
           if (hidden || (customDisplay && customDisplay === 'none')) {
             colStyle.display = 'none';
           }
-
+  
           if (customVisibility) {
             colStyle.visibility = customVisibility;
           }
-
+  
           return colStyle;
         };
         const lastFormIndex = getLastFormIndex(index);
         // 中间间隔组件的个数
-        const gap = formItemIndex - lastFormIndex - 1 || 0;
-        gap > 0 &&
-          new Array(gap).fill(0).forEach((_, i) => {
-            components.push(
-              <ViewFormItem
-                i={i}
-                key={`blank-${i}`}
-                style={changeColStyle()}
-                colSpan={colSpan}
-                getVisible={getVisible}
-                stateListener={stateListener}
-                isBlank
-                // child.props.$$componentItem.uid 兼容高代码模式下
-                uid={child.props.uid || child.props.$$componentItem.uid}
-              />
-            );
-          });
-
+        const gap = index === 0 ? formItemIndex : (formItemIndex - lastFormIndex - 1) || 0;
+        gap > 0 && new Array(gap).fill(0).forEach((_, i) => {
+          components.push(
+            <ViewFormItem
+              i={i}
+              key={`blank-${i}`}
+              style={changeColStyle()}
+              colSpan={colSpan}
+              getVisible={getVisible}
+              stateListener={stateListener}
+              isBlank
+              // child.props.$$componentItem.uid 兼容高代码模式下
+              uid={child.props.uid || child.props.$$componentItem.uid}
+            />,
+          );
+        });
+  
         components.push(
           <ViewFormItem
             style={changeColStyle()}
@@ -198,14 +225,14 @@ export const FormChildren = (props: FormChildrenType) => {
             uid={child.props.uid || child.props.$$componentItem.uid}
             child={child}
             key={child.key}
-          />
+          />,
         );
         return;
       }
-
+  
       components.push(cloneElement(child, { extendProps: { isFormRootChild: true } } as any));
     });
-
+  
     return components;
   };
 
@@ -255,17 +282,14 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
   // 保存值变化回调，
   const valueChangeFnRef = useRef<(changedValues: any, values: any) => void>();
 
-  const { backgroundStyle } = useBackgroundStyle({
-    engineApis,
-    backgroundType,
-    mode: 'engine',
-  });
+  const { backgroundStyle } = useBackgroundStyle({ engineApis, backgroundType, mode: 'engine' });
 
   const { run, addListener, removeListener, status } = useFormStatus({
     disabled: props.disabled,
     readonly: props.readOnly,
   });
 
+
   // 由于需要考虑loop等组件，可能存在多个相同的字段名，自行研发
   const scrollToError = (errorInfo: any) => {
     try {
@@ -303,90 +327,87 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
    * 需要上传给动态数据容器的表单方法
    */
 
-  const formRefHandler = useCreation(
-    () => ({
+  const formRefHandler = useCreation(() => ({
 
-      /**
-       * 校验并滚动到某字段
-       */
-      validateFormAndScroll: (errScroll: boolean = true) => {
-        return form.validateFields().catch(errorInfo => {
-          if (errScroll) {
-            scrollToError(errorInfo);
-          }
-          throw errorInfo;
-        });
-      },
+    /**
+     * 校验并滚动到某字段
+     */
+    validateFormAndScroll: (errScroll: boolean = true) => {
+      return form.validateFields().catch(errorInfo => {
+        if (errScroll) {
+          scrollToError(errorInfo);
+        }
+        throw errorInfo;
+      });
+    },
 
-      /**
-       * 滚动到错误的位置
-       */
-      scrollToErrorField: (errorInfo: any) => {
-        scrollToError(errorInfo);
-      },
+    /**
+     * 滚动到错误的位置
+     */
+    scrollToErrorField: (errorInfo: any) => {
+      scrollToError(errorInfo);
+    },
 
-      /**
-       * 获取表单值
-       */
-      getFieldsValue: () => {
-        return form.getFieldsValue();
-      },
+    /**
+     * 获取表单值
+     */
+    getFieldsValue: () => {
+      return form.getFieldsValue();
+    },
 
-      /**
-       * 设置表单值
-       * @param values
-       * @param refs 低代码平台引擎内所有的refs，其他平台不要使用
-       */
-      setFieldsValue(values: any, refs: Record<string, any>) {
-        const target: any = {};
-        const relation: any = formChildRelation.current;
-        if (values) {
-          Object.keys(values).forEach(key => {
-            target[key] = values[key];
-            if (typeof patchSetFormsValueFn[key] === 'function') {
-              target[key] = patchSetFormsValueFn[key](target[key]);
-            }
-            if (refs && relation) {
-              const relation = formChildRelation.current;
-              // @ts-ignore
-              const comId = relation?.[key];
-              if (comId) {
-                refs?.[comId]?.onlySyncValue(target[key]);
-              }
+    /**
+     * 设置表单值
+     * @param values
+     * @param refs 低代码平台引擎内所有的refs，其他平台不要使用
+     */
+    setFieldsValue(values: any, refs: Record<string, any>) {
+      const target: any = {};
+      const relation: any = formChildRelation.current;
+      if (values) {
+        Object.keys(values).forEach(key => {
+          target[key] = values[key];
+          if (typeof patchSetFormsValueFn[key] === 'function') {
+            target[key] = patchSetFormsValueFn[key](target[key]);
+          }
+          if (refs && relation) {
+            const relation = formChildRelation.current;
+            // @ts-ignore
+            const comId = relation?.[key];
+            if (comId) {
+              refs?.[comId]?.onlySyncValue(target[key]);
             }
-            if (!isEqual(form.getFieldValue(key), target[key]) && typeof onValuesChange === 'function') {
-              if (engineApis?.compatConfig?.cmd?.setFieldsValueToOnValuesChange === true) {
-                onValuesChange(key, target[key]);
-              }
+          }
+          if (!isEqual(form.getFieldValue(key), target[key]) && typeof onValuesChange === 'function') {
+            if (engineApis?.compatConfig?.cmd?.setFieldsValueToOnValuesChange === true) {
+              onValuesChange(key, target[key]);
             }
-          });
-        }
-
-        form.setFieldsValue(target);
-      },
+          }
+        });
+      }
+      
+      form.setFieldsValue(target);
+    },
 
-      /**
-       * 重置表单值
-       */
-      resetFields() {
-        form.resetFields();
-      },
+    /**
+     * 重置表单值
+     */
+    resetFields() {
+      form.resetFields();
+    },
 
-      // 设置禁用状态
-      setDisabled: (v: boolean | 'toggle') => {
-        run('disabled', v === 'toggle' ? !status.disabled : v);
-      },
-      // 设置只读状态
-      setReadOnly: (v: boolean | 'toggle') => {
-        run('readonly', v === 'toggle' ? !status.readonly : v);
-      },
-      scrollToError,
-      // 作为ref标志，表示form已经被渲染了
-      has: true,
-      form,
-    }),
-    [status]
-  );
+    // 设置禁用状态
+    setDisabled: (v: boolean | 'toggle') => {
+      run('disabled', v === 'toggle' ? !status.disabled : v);
+    },
+    // 设置只读状态
+    setReadOnly: (v: boolean | 'toggle') => {
+      run('readonly', v === 'toggle' ? !status.readonly : v);
+    },
+    scrollToError,
+    // 作为ref标志，表示form已经被渲染了
+    has: true,
+    form,
+  }), [status]);
 
   /**
    * 动态数据容器ref上报
@@ -415,7 +436,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
      * @returns
      */
     getChildRelation: () => formChildRelation.current,
-
+    
     /**
      * 打印模式钩子
      */
@@ -453,8 +474,9 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
       colSpace,
       isShowTitle,
       formCode: formCode || $$componentItem?.id,
+      labelWrap: props.labelWrap,
     }),
-    [form, layout, colSpan, labelCol, wrapperCol, colon, labelAlign, addListener, removeListener]
+    [form, layout, colSpan, labelCol, wrapperCol, colon, labelAlign, addListener, removeListener],
   );
 
   const formStyle: React.CSSProperties = {
@@ -476,6 +498,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
             layout={layout}
             labelCol={layout === 'horizontal' ? labelCol : EMPTY_COL}
             wrapperCol={layout === 'horizontal' ? wrapperCol : EMPTY_COL}
+            labelWrap={props.labelWrap}
             style={formStyle}
             onValuesChange={(changedValues, values) => {
               const keys = Object.keys(changedValues || {});
@@ -530,6 +553,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
                 layout={layout}
                 labelCol={layout === 'horizontal' ? labelCol : EMPTY_COL}
                 wrapperCol={layout === 'horizontal' ? wrapperCol : EMPTY_COL}
+                labelWrap={props.labelWrap}
                 style={formStyle}
                 {...extendProps}
               >

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

@@ -1,5 +1,5 @@
-import { FormFields as Item, useForm } from '../utils';
 import Form from './Form';
+import { FormFields as Item, useForm } from '../utils';
 
 type FormType = typeof Form;
 
@@ -7,9 +7,6 @@ type FormType = typeof Form;
 
 (Form as any).useForm = useForm;
 
-const formInstance = Form as FormType & {
-  Item: typeof Item;
-  useForm: typeof useForm;
-};
+const formInstance = Form as FormType & { Item: typeof Item, useForm: typeof useForm };
 
 export default formInstance;

package/lib/pcpublic/src/components/pcfactory/src/Form/useFormStatus.ts

@@ -1,14 +1,18 @@
-import { isUndefined } from 'lodash';
 import { useRef } from 'react';
-import { useUpdateEffect } from '../utils/ahooks';
-import { StatusType } from '../utils/formUtils/FormContext';
 import useMonitor from './useMonitor';
+import { StatusType } from '../utils/formUtils/FormContext';
+import { isUndefined } from 'lodash';
+import { useUpdateEffect } from '../utils/ahooks';
 
 export type FormStatusType = {
   [key in StatusType]?: unknown;
 };
 
-const useSubscriptionStatus = (options: { run: (type: StatusType, v: unknown) => void; type: StatusType; listened: unknown }) => {
+const useSubscriptionStatus = (options: {
+  run: (type: StatusType, v: unknown) => void;
+  type: StatusType;
+  listened: unknown;
+}) => {
   const { run, type, listened } = options;
   useUpdateEffect(() => {
     if (!isUndefined(listened)) {

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

@@ -1,14 +1,26 @@
+import React from 'react';
+import LXPieChartPorps from './PropsType';
 import { LXChart } from '@lingxiteam/charts-common';
 import { LingXiFC } from '@lingxiteam/types';
+import useBackgroundStyle from '../View/useBackgroundStyle';
 import { useHiddenStyle } from '../utils';
 import './index.less';
-import LXPieChartPorps from './PropsType';
 
 const LXPieChart: LingXiFC<LXPieChartPorps> = (props, ref) => {
-  const { style, visible = true, className } = props;
+  const { style, visible = true, className, backgroundType, getEngineApis, $$componentItem } = props;
   const finalStyle = useHiddenStyle(visible, style);
+  const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis: getEngineApis?.(), appId: $$componentItem?.appId, mode: 'engine' });
 
-  return <LXChart style={finalStyle} className={className} configProps={props} isEditMode={false} isMobile={false} chartType="Pie" />;
+  return (
+    <LXChart
+      style={{ ...backgroundStyle, ...(finalStyle || {}) }}
+      className={className}
+      configProps={props}
+      isEditMode={false}
+      isMobile={false}
+      chartType="Pie"
+    />
+  );
 };
 
 export default LXPieChart;

package/lib/pcpublic/src/components/pcfactory/src/LXPieChart/PropsType.ts

@@ -1,11 +1,12 @@
 /* eslint-disable semi */
-import { PieChartPorps } from '@lingxiteam/charts-common';
 import type { EngineApisType } from '@lingxiteam/types';
+import { PieChartPorps } from '@lingxiteam/charts-common';
 
 export default interface LXPieChartPorps extends PieChartPorps {
   visible?: boolean;
   className?: string;
   style?: React.CSSProperties; // 样式
   getEngineApis?: () => EngineApisType;
-  // eslint-disable-next-line no-extra-semi
-}
+  backgroundType?: any;
+// eslint-disable-next-line no-extra-semi
+};

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

@@ -1,5 +1,5 @@
+import React, { useImperativeHandle } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import { useImperativeHandle } from 'react';
 import LXPieChartLoader from './loader';
 import LXPieChartProps from './PropsType';
 

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

@@ -2,7 +2,7 @@ import Loadable from 'react-loadable';
 import { LoadingComponennt } from '../utils/LoaderHelper';
 
 const LoadableLXRadarChart = Loadable({
-  loader: async () => (await import(/* webpackChunkName: 'pcFactory-LXPieChart' */ './LXPieChart')) as unknown as React.ComponentType<any>,
+  loader: async () => (await import/* webpackChunkName: 'pcFactory-LXPieChart' */('./LXPieChart')) as unknown as React.ComponentType<any>,
   loading: LoadingComponennt,
 });
 

package/lib/pcpublic/src/components/pcfactory/src/LXRadarChart/LXRadarChat.tsx

@@ -1,16 +1,30 @@
+import React from 'react';
+import LXRadarChartPorps from './PropsType';
+import { useHiddenStyle } from '../utils';
 import { LXChart } from '@lingxiteam/charts-common';
 import { LingXiFC } from '@lingxiteam/types';
-import { useHiddenStyle } from '../utils';
 import './index.less';
-import LXRadarChartPorps from './PropsType';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import classNames from 'classnames';
+
 
 // const prefixCls = 'lXRadarChart';
 
 const LXRadarChart: LingXiFC<LXRadarChartPorps> = (props, ref) => {
-  const { style, visible = true, className } = props;
+  const { style, visible = true, className, backgroundType, getEngineApis, $$componentItem } = props;
   const finalStyle = useHiddenStyle(visible, style);
+  const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis: getEngineApis?.(), appId: $$componentItem?.appId, mode: 'engine' });
 
-  return <LXChart style={finalStyle} className={className} configProps={props} isEditMode={false} isMobile={false} chartType="Radar" />;
+  return (
+    <LXChart
+      style={{ ...backgroundStyle, ...finalStyle }}
+      className={classNames(className, 'ued-radarChart')}
+      configProps={props}
+      isEditMode={false}
+      isMobile={false}
+      chartType="Radar"
+    />
+  );
 };
 
 export default LXRadarChart;

package/lib/pcpublic/src/components/pcfactory/src/LXRadarChart/PropsType.ts

@@ -6,4 +6,5 @@ export default interface LXRadarChartPorps extends RadarChartPorps {
   visible?: boolean;
   className?: string;
   style?: React.CSSProperties; // 样式
-}
+  backgroundType?: any;
+};

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

@@ -1,5 +1,5 @@
+import React, { useImperativeHandle } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import { useImperativeHandle } from 'react';
 import LXRadarChartLoader from './loader';
 import LXRadarChartProps from './PropsType';
 

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

@@ -2,7 +2,7 @@ import Loadable from 'react-loadable';
 import { LoadingComponennt } from '../utils/LoaderHelper';
 
 const LoadableLXRadarChart = Loadable({
-  loader: async () => (await import(/* webpackChunkName: 'pcFactory-LXRadarChart' */ './LXRadarChat')) as unknown as React.ComponentType<any>,
+  loader: async () => (await import/* webpackChunkName: 'pcFactory-LXRadarChart' */('./LXRadarChat')) as unknown as React.ComponentType<any>,
   loading: LoadingComponennt,
 });
 

package/lib/pcpublic/src/components/pcfactory/src/ModalSelect/BaseModalSelect.tsx

@@ -1,5 +1,6 @@
-import { Select } from 'antd';
+import React from 'react';
 import classnames from 'classnames';
+import { Select } from 'antd';
 
 const BaseModalSelect = (props: any) => {
   const {
@@ -26,8 +27,12 @@ const BaseModalSelect = (props: any) => {
     <span
       className={classnames(className, {
         'pcfactory-input-group-wrapper': true,
-        [`pcfactory-input-affix-wrapper-${restProps?.size === 'large' ? 'lg' : 'sm'}`]: ['large', 'small'].includes(restProps?.size),
+        [`pcfactory-input-affix-wrapper-${restProps?.size === 'large' ? 'lg' : 'sm'}`]: [
+          'large',
+          'small',
+        ].includes(restProps?.size),
         [`${postfixStyleClsName}`]: postfixStyleClsName,
+        'pcfactory-input-after-border-right-width': !!postfixStyleClsName,
       })}
       style={restProps?.style}
       onChange={val => {