@lingxiteam/ebe-utils 0.0.9 → 0.0.10

package/lib/h5public/src/components/factory/src/Donut/Dount.tsx

@@ -0,0 +1,294 @@
+import { px2hd } from '@alitajs/f2';
+import Donut from '@lingxiteam/charts/es/Donut';
+import { LingXiFC } from '@lingxiteam/types';
+import classNames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import { setRgbTo16 } from '../utils';
+import CustomModule, { getJSXHtml } from '../utils/CustomModule';
+import useAsyncState from '../utils/hooks/useAsyncState';
+import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
+import './index.less';
+import { MyDonutProps } from './PropsType';
+
+const prefixCls = 'lcdp-donut';
+const MyDonut: LingXiFC<MyDonutProps> = (props, ref) => {
+  const {
+    colors,
+    tableHeader: otherHeader,
+    proColor = {},
+    strokeColor = {},
+    customRenderCode,
+    customProgressCode,
+    proSize,
+    visible,
+    $$componentItem,
+    className,
+    refData,
+    ...restProps
+  } = props;
+  const { MemoRenderer, sandBoxSafeRun, sandBoxLoadModule } =
+    props.getEngineApis();
+  const { MemoLoopItem, renderer } = MemoRenderer;
+  const { components } = renderer;
+  const funcExpExecute = useFuncExpExecute(sandBoxSafeRun);
+  const [probackColor, setprobackColor] = useState('');
+  const [mHtmlStr, setMHtmlStr] = useState('');
+  const [strokebackColor, setstrokebackColor] = useState('#eee');
+  const [{ x, y, data: originData, sumText = '' }, setState] = useAsyncState({
+    x: props.x,
+    y: props.y,
+    data: props.data,
+    sumText: props.sumText,
+  });
+
+  useEffect(() => {
+    if (
+      Object.prototype.toString.call(proColor) === '[object Object]' &&
+      Object.keys(proColor).length
+    ) {
+      const { endColor, startColor, color: cleanColor } = proColor;
+      if (proColor.type === 'hGradient') {
+        setprobackColor(
+          `l(0) 0:${setRgbTo16(startColor)} 1:${setRgbTo16(endColor)}`,
+        );
+      } else if (proColor.type === 'vGradient') {
+        setprobackColor(
+          `l(90) 0:${setRgbTo16(startColor)} 1:${setRgbTo16(endColor)}`,
+        );
+      } else {
+        setprobackColor(setRgbTo16(cleanColor));
+      }
+    }
+  }, [proColor]);
+
+  useEffect(() => {
+    if (
+      Object.prototype.toString.call(strokeColor) === '[object Object]' &&
+      Object.keys(strokeColor).length
+    ) {
+      const { endColor, startColor, color: cleanColor } = strokeColor;
+      if (strokeColor.type === 'hGradient') {
+        setstrokebackColor(
+          `l(0) 0:${setRgbTo16(startColor)} 1:${setRgbTo16(endColor)}`,
+        );
+      } else if (strokeColor.type === 'vGradient') {
+        setstrokebackColor(
+          `l(90) 0:${setRgbTo16(startColor)} 1:${setRgbTo16(endColor)}`,
+        );
+      } else {
+        setstrokebackColor(setRgbTo16(cleanColor));
+      }
+    }
+  }, [strokeColor]);
+
+  const tableHeader = useMemo(() => {
+    if (Array.isArray(props.tableHeader)) {
+      return props.tableHeader;
+    }
+    if (typeof props.tableHeader === 'string') {
+      return props.tableHeader.split(',');
+    }
+    return undefined;
+  }, [props.tableHeader]) as string[];
+
+  const data = useMemo(
+    () =>
+      originData?.map((it: any) => ({
+        ...it,
+        [y]: +it[y],
+      })),
+    [originData, y],
+  );
+
+  const style = useMemo(() => {
+    if (Array.isArray(components) && components.length > 0) {
+      const firstStyle = JSON.parse(JSON.stringify(components[0]?.style || {}));
+      components[0].style.width = 'auto';
+      return firstStyle || {};
+    }
+    return {};
+  }, [components]);
+
+  const mDountProps: any = {};
+  // let mHtmlStr = '';
+  // 自定义渲染函数-新数据格式
+  // if (customProgressCode && typeof customProgressCode === 'object' && customProgressCode.jsx) {
+  //   // JSX语法渲染组件
+  //   mHtmlStr = getJSXHtml(<CustomModule
+  //     code={customProgressCode.targetVal}
+  //     compProps={{
+  //       centerText: 'askdjfh',
+  //       title: props.sumTitle,
+  //       px2hd,
+  //     }}
+  //     sandBoxLoadModule={sandBoxLoadModule}
+  //     errorInfo={{
+  //       id: $$componentItem.id,
+  //     }}
+  //   />);
+  // } else if (customProgressCode) {
+  //   mHtmlStr = funcExpExecute(customProgressCode, [
+  //     {
+  //       key: 'sumText',
+  //       value: sumText,
+  //     },
+  //     {
+  //       key: 'sumTitle',
+  //       value: props.sumTitle,
+  //     },
+  //     {
+  //       key: 'px2hd',
+  //       value: px2hd,
+  //     },
+  //   ]);
+  // } else if (customRenderCode?.code) {
+  //   // 自定义渲染函数-旧数据格式兼容
+  //   mHtmlStr = funcExpExecute(customRenderCode.code, [
+  //     {
+  //       key: 'sumText',
+  //       value: sumText,
+  //     },
+  //     {
+  //       key: 'sumTitle',
+  //       value: props.sumTitle,
+  //     },
+  //     {
+  //       key: 'px2hd',
+  //       value: px2hd,
+  //     },
+  //   ]);
+  // }
+
+  useEffect(() => {
+    if (
+      customProgressCode &&
+      typeof customProgressCode === 'object' &&
+      customProgressCode.jsx
+    ) {
+      // JSX语法渲染组件
+      getJSXHtml(
+        <CustomModule
+          code={customProgressCode.targetVal}
+          compProps={{
+            sumText: props.sumText,
+            sumTitle: props.sumTitle,
+            px2hd,
+          }}
+          sandBoxLoadModule={sandBoxLoadModule}
+          errorInfo={{
+            id: $$componentItem.id,
+          }}
+        />,
+        setMHtmlStr,
+      );
+    } else if (customProgressCode) {
+      setMHtmlStr(
+        funcExpExecute(customProgressCode, [
+          {
+            key: 'sumText',
+            value: sumText,
+          },
+          {
+            key: 'sumTitle',
+            value: props.sumTitle,
+          },
+          {
+            key: 'px2hd',
+            value: px2hd,
+          },
+        ]),
+      );
+    } else if (customRenderCode?.code) {
+      // 自定义渲染函数-旧数据格式兼容
+      setMHtmlStr(
+        funcExpExecute(customRenderCode.code, [
+          {
+            key: 'sumText',
+            value: sumText,
+          },
+          {
+            key: 'sumTitle',
+            value: props.sumTitle,
+          },
+          {
+            key: 'px2hd',
+            value: px2hd,
+          },
+        ]),
+      );
+    }
+  }, [customRenderCode, sumText, props.sumTitle]);
+
+  if (mHtmlStr.length) mDountProps.htmlStr = mHtmlStr;
+
+  if (props.type === 'progress') {
+    mDountProps.xTakeY = true;
+    mDountProps.colDefs = {
+      [`${y}`]: {
+        max: 100,
+        min: 0,
+      },
+    };
+    mDountProps.strokeColor = strokebackColor;
+    mDountProps.geometryProps = {
+      color: probackColor,
+    };
+    mDountProps.size = proSize;
+  }
+
+  // useImperativeHandle(ref, () => ({
+  //   setData: setState
+  // }));
+
+  useEffect(() => {
+    if (refData) {
+      setState(refData as any);
+    }
+  }, [refData]);
+
+  return visible ? (
+    <div className={classNames(`${prefixCls}-legend`, className)}>
+      <Donut
+        color={colors ? [x, colors.split(',')] : colors}
+        tableHeader={tableHeader}
+        {...restProps}
+        {...mDountProps}
+        x={x}
+        data={data}
+        renderLegend={(
+          { item, index, ...legend }: any,
+          showSelectShapeCallback: () => void,
+        ) => {
+          const renderProps = {
+            item,
+            i: index,
+            __render__: props.__render__,
+            renderer,
+            compId: $$componentItem.uid,
+            itemId: index,
+          };
+          return (
+            <span
+              key={item[x]}
+              className={`${prefixCls}-legendItem`}
+              style={{ width: style.width || '100%' }}
+              onClick={showSelectShapeCallback}
+            >
+              <span
+                className={`${prefixCls}-legendDot`}
+                style={{ color: legend.color }}
+              />
+              <MemoLoopItem {...renderProps} />
+            </span>
+          );
+        }}
+      />
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+MyDonut.displayName = 'Donut';
+
+export default MyDonut;

package/lib/h5public/src/components/factory/src/Donut/PropsType.ts

@@ -0,0 +1,24 @@
+import { DountProps } from '@lingxiteam/charts/es/Donut';
+import { $$componentItem } from '../interfaces/types';
+
+export interface DountDataProps {
+  x?: string;
+  y?: string;
+  data?: any;
+  sumText?: string;
+}
+
+export interface MyDonutProps extends Omit<DountProps, 'tableHeader'> {
+  colors: string;
+  tableHeader: string;
+  proColor?: any;
+  strokeColor?: any;
+  customRenderCode?: any;
+  proSize?: number;
+  visible?: boolean;
+  $$componentItem: $$componentItem;
+  customProgressCode?: any;
+  className: string;
+  refData?: DountDataProps;
+  style: any;
+}

package/lib/h5public/src/components/factory/src/Donut/index.less

@@ -0,0 +1,17 @@
+@prefixCls: lcdp-donut;
+
+.@{prefixCls}-legendItem {
+  display: inline-block;
+  padding-left: 30px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.@{prefixCls}-legendDot {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+  background-color: currentColor;
+  border-radius: 10px;
+}

package/lib/h5public/src/components/factory/src/Donut/index.tsx

@@ -0,0 +1,18 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useImperativeHandle, useState } from 'react';
+import DountLoader from './loader';
+import { DountDataProps, MyDonutProps } from './PropsType';
+
+const Dount = LingxiForwardRef<unknown, MyDonutProps>((props, ref) => {
+  const [refData, setRefData] = useState<DountDataProps>();
+
+  useImperativeHandle(ref, () => ({
+    // 这里暴漏部分指令方法
+    // 由于组件采用懒加载延迟执行组件，导致组件在未加载完成的时候已经执行了页面加载完成的生命周期，所以未来的指令方法不应放入懒加载中，避免页面加载完成时机无法调用指令。
+    setData: setRefData,
+  }));
+
+  return <DountLoader {...props} refData={refData} />;
+});
+
+export default Dount;

package/lib/h5public/src/components/factory/src/Donut/loader.tsx

@@ -0,0 +1,13 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const DountLoader = Loadable({
+  // eslint-disable-next-line func-call-spacing
+  loader: async () =>
+    (await import(
+      /* webpackChunkName: 'factory-Dount' */ './Dount'
+    )) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default DountLoader;

package/lib/h5public/src/components/factory/src/DynamicDataContainer/index.less

@@ -0,0 +1,10 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+.ued-dynamic-data-card {
+  border: 1px solid fade(@brand-primary, 20%);
+  border-radius: 8px;
+  overflow: hidden;
+  & > .lingxiteam-dform-card-extends {
+    padding: 16px 16px 0;
+  }
+}

package/lib/h5public/src/components/factory/src/DynamicDataContainer/index.tsx

@@ -0,0 +1,290 @@
+import Form, { type FormInstance } from '@lingxiteam/dform';
+import { DynamicDataType, LingxiForwardRef } from '@lingxiteam/types';
+import { SpinLoading } from 'antd-mobile-5';
+import {
+  CSSProperties,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  DynamicDataContext,
+  DynamicDataProvider,
+} from '../utils/dynamicUtils/DynamicContext';
+import './index.less';
+import { useDynamicDataContainer } from './useDynamicDataContainer';
+
+type RuleParameter = {
+  paramId: string;
+  valueCode?: string;
+  originValueCode?: string;
+  paramCode?: string;
+};
+export interface DynamicDataContainerProps {
+  className: string;
+  style: CSSProperties;
+  engineRule?: Array<Array<RuleParameter>>;
+  name: string;
+  onValuesChange?: (
+    formCode: string,
+    changedFieldName: string,
+    changedFieldValue: any,
+    allValues: Record<string, Record<string, any>>,
+  ) => void;
+  dynamicCode: string;
+  visible?: boolean;
+  scene?: 'edit' | 'readonly';
+}
+
+const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>(
+  (props, ref) => {
+    const {
+      className,
+      getEngineApis,
+      style = {},
+      engineRule,
+      $$componentItem,
+      name,
+      onValuesChange,
+      dynamicCode,
+    } = props || {};
+    const engineApis = getEngineApis?.() || {};
+    const [loading, setLoading] = useState<boolean>(false);
+    const { service, dynamicDataUtils, renderDynamicPage } = engineApis;
+    const { dynamicData2DSL, diffChange } = dynamicDataUtils || {};
+    const dynamicHelperRef = useRef<ReturnType<typeof dynamicData2DSL>>();
+    const [pageData, setPageData] = useState<any>();
+    const formsRef = useRef<
+      Record<
+        string,
+        {
+          form: FormInstance<any>;
+          validateFormAndScroll?: () => Promise<any>;
+          getFieldsValue?: FormInstance['getFieldsValue'];
+          setFieldsValue?: (values: any, refs: Record<string, any>) => void;
+          resetFields?: FormInstance['resetFields'];
+          setDisabled?: (v: boolean) => void;
+          setReadOnly?: (v: boolean) => void;
+        }
+      >
+    >({});
+
+    const { dynamicPageRef, staticAttrKeys } = useDynamicDataContainer({
+      dynamicHelper: dynamicHelperRef.current,
+    });
+
+    const getDynamicData = async (
+      rules: DynamicDataContainerProps['engineRule'],
+    ) => {
+      try {
+        setLoading(true);
+        if (rules && rules?.length) {
+          const res = await service.batchMatchDynamicData({
+            terminalType: 'h5',
+            findDataDetail: true,
+            paramGroupList: rules,
+          });
+          if (res) {
+            if (res && typeof dynamicData2DSL === 'function') {
+              const dataHelper = dynamicData2DSL(res as DynamicDataType[], {
+                uid: $$componentItem.uid,
+                name,
+              });
+              setPageData(dataHelper.pageDSL);
+              dynamicHelperRef.current = dataHelper;
+            }
+          }
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    const getDynamicFormValue = async () => {
+      const allValues: Record<string, any> = {};
+      if (formsRef.current) {
+        const promise = Object.keys(formsRef.current).map((formCode) => {
+          const form = formsRef.current[formCode] || {};
+          return form?.getFieldsValue?.().then((res: any) => {
+            allValues[formCode] = res;
+          });
+        });
+        await Promise.all(promise);
+      }
+      return allValues;
+    };
+
+    useEffect(() => {
+      if (formsRef.current) {
+        Object.keys(formsRef.current).forEach((key) => {
+          const form = formsRef.current[key];
+          if (form?.setReadOnly) {
+            form.setReadOnly(props.scene === 'readonly');
+          }
+        });
+      }
+    }, [props.scene]);
+
+    const resetFields = async () => {
+      const beforeData = await getDynamicFormValue();
+      if (formsRef.current) {
+        for (
+          let index = 0;
+          index < Object.keys(formsRef.current).length;
+          index += 1
+        ) {
+          const formCode = Object.keys(formsRef.current)[index];
+          const form = formsRef.current[formCode] || {};
+          const values = await form?.getFieldsValue?.();
+          const obj: any = {};
+          Object.keys(values).forEach((key) => {
+            obj[key] = undefined;
+          });
+          form?.setFieldsValue?.(
+            obj,
+            dynamicPageRef?.current?.sandboxContext?.refs,
+          );
+        }
+      }
+      const updateData = await getDynamicFormValue();
+      const { event } = dynamicHelperRef.current || {};
+      diffChange(beforeData, updateData, (diff) => {
+        // 执行事件处理变更联动
+        event?.eval(diff.formCode, diff.changeFieldName);
+      });
+    };
+
+    const setFieldsValue = async (
+      assignData: Record<string, unknown>,
+      format: boolean = true,
+    ) => {
+      let formalFormData = assignData;
+      const { assign2FormData, event } = dynamicHelperRef.current || {};
+      if (format) {
+        // 解析赋值数据
+        formalFormData = assign2FormData?.(assignData) || {};
+      }
+      const beforeData = await getDynamicFormValue();
+      if (formsRef.current) {
+        Object.keys(formsRef.current).forEach((formCode) => {
+          const form = formsRef.current[formCode] || {};
+          form?.setFieldsValue?.(
+            formalFormData[formCode] || {},
+            dynamicPageRef?.current?.sandboxContext?.refs,
+          );
+        });
+      }
+      const updateData = await getDynamicFormValue();
+      diffChange(beforeData, updateData, (diff) => {
+        // 执行事件处理变更联动
+        event?.eval(diff.formCode, diff.changeFieldName);
+      });
+    };
+
+    const providerValue: DynamicDataContext = useMemo(() => {
+      return {
+        onFormChange: async (formName, changedFieldName, changedFieldValue) => {
+          const { formData2Retrieve, event } = dynamicHelperRef.current || {};
+          const allValues = await getDynamicFormValue();
+          event?.eval(formName, changedFieldName);
+          if (typeof onValuesChange === 'function') {
+            onValuesChange(
+              formName,
+              changedFieldName,
+              changedFieldValue,
+              formData2Retrieve?.(allValues) || allValues,
+            );
+          }
+        },
+        _innerDynamicDataContainer: true,
+        get formsRefMap() {
+          return formsRef.current;
+        },
+        updateFormChildRef: (formCode, formRef) => {
+          // 只读时每次上报设置表单控件为只读状态
+          if (props?.scene === 'readonly') {
+            formRef?.setReadOnly(props?.scene === 'readonly');
+          }
+          formsRef.current[formCode] = formRef;
+        },
+        form: {
+          getFieldsValue: () => getDynamicFormValue(),
+          resetFields,
+          setFieldsValue: (assignData: Record<string, unknown>) => {
+            return setFieldsValue(assignData, false);
+          },
+
+          useWatch: (formCode: string, fieldCode: string) => {
+            return Form.useWatch(fieldCode, formsRef.current[formCode]?.form);
+          },
+        },
+      };
+    }, [props?.scene]);
+
+    useEffect(() => {
+      getDynamicData(engineRule);
+    }, [engineRule]);
+
+    useImperativeHandle(ref, () => ({
+      dynamicCode,
+      // 更新动态数据
+      setRules: (newRules: DynamicDataContainerProps['engineRule']) => {
+        return getDynamicData(newRules);
+      },
+      // 获取动态数据表单转换协议后的值
+      getFieldsValue: async () => {
+        const allValues = await getDynamicFormValue();
+        const { formData2Retrieve } = dynamicHelperRef.current || {};
+        return formData2Retrieve?.(allValues) || allValues;
+      },
+      // 获取动态数据表单原始值
+      getOriginValue: () => {
+        return getDynamicFormValue();
+      },
+      // 校验表单并取值
+      validateFormAndScroll: async () => {
+        const allValues: Record<string, any> = {};
+        if (formsRef.current) {
+          const validatePromiseList = Object.keys(formsRef.current).map(
+            (formCode) => {
+              const form = formsRef.current[formCode] || {};
+              return form?.validateFormAndScroll?.().then((res) => {
+                allValues[formCode] = res;
+              });
+            },
+          );
+          await Promise.all(validatePromiseList);
+          const { formData2Retrieve } = dynamicHelperRef.current || {};
+          return formData2Retrieve?.(allValues) || allValues;
+        }
+        return undefined;
+      },
+      resetFields,
+      setFieldsValue: (assignData: Record<string, unknown>) => {
+        return setFieldsValue(assignData, true);
+      },
+    }));
+
+    const dynamicStyle = {
+      ...(style || {}),
+      display: props?.visible ? undefined : 'none',
+    };
+    return (
+      <div className={className} style={dynamicStyle}>
+        <DynamicDataProvider value={providerValue}>
+          {pageData &&
+            renderDynamicPage(
+              pageData,
+              { uid: $$componentItem.uid },
+              { ref: dynamicPageRef, staticAttrKeys },
+            )}
+        </DynamicDataProvider>
+        {loading && <SpinLoading />}
+      </div>
+    );
+  },
+);
+
+export default DynamicDataContainer;

package/lib/h5public/src/components/factory/src/DynamicDataContainer/useDynamicDataContainer.ts

@@ -0,0 +1,27 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+export const useDynamicDataContainer = ({
+  dynamicHelper,
+}: {
+  dynamicHelper?: any;
+}) => {
+  const dynamicPageRef = useRef<any>(null);
+
+  useEffect(() => {
+    dynamicHelper?.updateSandboxContext(
+      () => dynamicPageRef.current?.sandboxContext,
+    );
+  }, [dynamicHelper, dynamicPageRef.current]);
+
+  const staticAttrKeys = useMemo(() => {
+    if (dynamicHelper?.event) {
+      return dynamicHelper?.event?.staticAttrKeys || [];
+    }
+    return [];
+  }, [dynamicHelper]);
+
+  return {
+    dynamicPageRef,
+    staticAttrKeys,
+  };
+};