@lingxiteam/ebe-utils 0.0.8 → 0.0.10

package/lib/h5public/src/components/factory/src/GroupColumn/GroupColumn.tsx

@@ -0,0 +1,98 @@
+import GroupColumn from '@lingxiteam/charts/es/GroupColumn';
+import { LingXiFC } from '@lingxiteam/types';
+import { useEffect, useMemo } from 'react';
+import useAsyncState from '../utils/hooks/useAsyncState';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+import { useJsonToParse } from '../utils/hooks/useJsonToParse';
+import { MyGroupColumnProps } from './PropsType';
+
+const MyGroupColumn: LingXiFC<MyGroupColumnProps> = (props, ref) => {
+  const {
+    colors: iColors = '',
+    visible = true,
+    $$componentItem,
+    getEngineApis,
+    style,
+    refData,
+    ...restProps
+  } = props;
+  const {
+    xFontSize,
+    xColor,
+    guideTextFontSize,
+    guideTextColor,
+    yFontSize,
+    yColor,
+  } = props?.style;
+  const finalStyle = useHiddenStyle(visible, style);
+  const [
+    { data: myData = [], legendParams: myLegendParams = [], x },
+    setState,
+  ] = useAsyncState({
+    data: props.data,
+    legendParams: props.legendParams,
+    x: props.x,
+  });
+
+  const legendParams = useJsonToParse(myLegendParams);
+  const data = useJsonToParse(myData);
+
+  const dataSource = useMemo(
+    () =>
+      data.map((i: any) => {
+        if (i.constructor === Object) {
+          const newObj = {} as any;
+          Object.keys(i).forEach((key) => {
+            newObj[key] = i[key];
+            if (!isNaN(parseInt(i[key], 10))) {
+              newObj[key] = parseInt(i[key], 10);
+            }
+          });
+          return newObj;
+        }
+        return i;
+      }),
+    [JSON.stringify(data)],
+  );
+  // 通过字符串截取 获得真正的Color
+  const colors = useMemo(() => {
+    if (iColors) {
+      return iColors.split(',');
+    }
+    return undefined;
+  }, [iColors]);
+  const xStyle = useMemo(() => {
+    return { fontSize: xFontSize, fill: xColor };
+  }, [xFontSize, xColor]);
+  const yStyle = useMemo(() => {
+    return { fontSize: yFontSize, fill: yColor };
+  }, [yFontSize, yColor]);
+  const guideTextStyle = useMemo(() => {
+    return { fontSize: guideTextFontSize, fill: guideTextColor };
+  }, [guideTextFontSize, guideTextColor]);
+
+  // useImperativeHandle(ref, () => ({
+  //   setData: setState
+  // }))
+  useEffect(() => {
+    if (refData) {
+      setState(refData as any);
+    }
+  }, [refData]);
+
+  return (
+    <GroupColumn
+      {...restProps}
+      style={finalStyle}
+      color={colors}
+      xStyle={xStyle}
+      yStyle={yStyle}
+      guideTextStyle={guideTextStyle}
+      legendParams={legendParams}
+      data={dataSource}
+      x={x}
+    />
+  );
+};
+
+export default MyGroupColumn;

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

@@ -0,0 +1,9 @@
+export interface MyGroupColumnProps {
+  colors?: string;
+  visible: boolean;
+  style?: any;
+  legendParams: Array<any>;
+  data: Array<any>;
+  x: string;
+  refData?: { data?: any[]; legendParams?: any[]; x?: string };
+}

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

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

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

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

package/lib/h5public/src/components/factory/src/Icon/IconED/index.less

@@ -0,0 +1,43 @@
+.cust-icon-ed {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+}
+.cust-icon-theme {
+  fill: var(--adm-color-primary);
+  color: var(--adm-color-primary);
+}
+
+.cust-icon-ed-xxs {
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+}
+
+.cust-icon-ed-xs {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+
+.cust-icon-ed-sm {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+}
+
+.cust-icon-ed-md {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+
+.cust-icon-ed-lg {
+  width: 36px;
+  height: 36px;
+  font-size: 36px;
+}

package/lib/h5public/src/components/factory/src/Icon/IconED/index.tsx

@@ -0,0 +1,290 @@
+import { createFromIconfontCN } from '@ant-design/icons';
+import { Icon as LegacyIcon } from '@lingxiteam/icons';
+import { LingXiEdFC } from '@lingxiteam/types';
+import classnames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import './index.less';
+
+export interface IconFileEDProps {
+  fileId: string;
+  fileCode: string;
+  fileSubType: 'ICON_IMAGE' | 'ICONFONT';
+}
+
+export interface MyIconEDProps {
+  type?: string;
+  isIconFont?: boolean;
+  fontAddress?: string;
+  svgContent?: string;
+  theme?: string;
+  iconFileInfo?: any;
+  iconFile?: IconFileEDProps;
+}
+
+export interface IconEDProps {
+  icon?: MyIconEDProps;
+  type?: string;
+  isIconFont?: boolean;
+  fontAddress?: string;
+  svgContent?: string;
+  theme?: string;
+  style?: any;
+  className?: any;
+  rotate?: any;
+  iconFileInfo?: any;
+  iconFile?: IconFileEDProps;
+  size?: any;
+  color?: any;
+  mode?: string;
+  iconItems?: any;
+  isUsePrimary?: boolean;
+}
+
+const IconED: LingXiEdFC<IconEDProps> = (props) => {
+  const {
+    icon = {},
+    type,
+    rotate,
+    size,
+    style,
+    mode,
+    iconItems,
+    isUsePrimary: curIsUsePrimary,
+    theme: curTheme,
+    isIconFont: curIsIconFont,
+    fontAddress: curFontAddress,
+    svgContent: curSvgContent,
+    iconFileInfo: curIconFileInfo,
+    iconFile: curIconFile,
+    getEdEngineApi,
+    $$componentItem,
+    ...restProps
+  } = props;
+  const [scriptUrl, setScripUrl] = useState<any>();
+
+  const {
+    curType,
+    iconFile,
+    iconFileInfo,
+    fontAddress,
+    isIconFont,
+    theme,
+    svgContent,
+    isUsePrimary,
+    color,
+  } = useMemo(() => {
+    const iconInfo = Array.isArray(iconItems) && iconItems[0];
+    if (mode === 'custom' && iconInfo) {
+      return {
+        curType: iconInfo?.icon?.type,
+        theme: iconInfo?.icon?.theme,
+        isIconFont: iconInfo?.icon?.isIconFont,
+        fontAddress: iconInfo?.icon?.fontAddress,
+        svgContent: iconInfo?.icon?.svgContent,
+        iconFileInfo: iconInfo?.icon?.iconFileInfo,
+        iconFile: iconInfo?.icon?.iconFile,
+        isUsePrimary: iconInfo?.isUsePrimary,
+        color: iconInfo?.color,
+      };
+    }
+    return {
+      curType: icon?.type || type,
+      iconFile: icon?.iconFile || curIconFile,
+      iconFileInfo: icon?.iconFileInfo || curIconFileInfo,
+      fontAddress: icon?.fontAddress || curFontAddress,
+      isIconFont: icon?.isIconFont || curIsIconFont,
+      theme: icon?.theme || curTheme,
+      svgContent: icon?.svgContent || curSvgContent,
+    };
+  }, [
+    JSON.stringify(icon),
+    type,
+    curIconFile,
+    curIconFileInfo,
+    curFontAddress,
+    curIsIconFont,
+    curTheme,
+    curSvgContent,
+    mode,
+    iconItems,
+  ]);
+
+  useEffect(() => {
+    if (iconFile) {
+      const { fileId, fileCode, fileHttp } = iconFile;
+      (async () => {
+        const { getAppFileUrlById, getAppFileUrlByFileCode } =
+          getEdEngineApi?.() || {};
+        if (fileId && getAppFileUrlById) {
+          setScripUrl(getAppFileUrlById(fileId));
+        } else if (fileCode && getAppFileUrlByFileCode) {
+          setScripUrl(
+            getAppFileUrlByFileCode({
+              appId: $$componentItem?.appId || window.appId,
+              fileCode,
+            }),
+          );
+        } else if (fileHttp) {
+          setScripUrl(fileHttp);
+        }
+      })();
+    } else if (fontAddress) {
+      setScripUrl(fontAddress);
+    } else if (iconFileInfo && !iconFileInfo.svgContent) {
+      const { getMaterialFile } = getEdEngineApi?.() || {};
+      (async () => {
+        if (iconFileInfo.materialId && iconFileInfo.fileName) {
+          setScripUrl(
+            getMaterialFile({
+              materialId: iconFileInfo.materialId,
+              fileName: iconFileInfo.fileName,
+            }),
+          );
+        }
+      })();
+    } else {
+      setScripUrl('');
+    }
+  }, [iconFile, fontAddress, iconFileInfo]);
+
+  const curClassName = classnames({
+    [restProps?.className]: restProps?.className,
+    'cust-icon-ed': true,
+    'cust-icon-theme': isUsePrimary,
+    [`cust-icon-ed-${size}`]: size,
+  });
+  const curStyle = useMemo(
+    () => ({
+      width: style?.fontSize || style?.width,
+      height: style?.fontSize || style?.height,
+      fontSize: style?.fontSize || style?.width, // 兼容存量数据
+      ...(style || {}),
+      color: isUsePrimary
+        ? undefined
+        : color || style?.color || restProps?.color,
+      fill: isUsePrimary
+        ? undefined
+        : color || style?.color || restProps?.color,
+    }),
+    [isUsePrimary, style, color],
+  );
+
+  if (svgContent) {
+    return (
+      <div
+        className={curClassName}
+        style={{
+          ...curStyle,
+          transform: `rotate(${rotate}deg)`,
+        }}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: svgContent,
+        }}
+      />
+    );
+  }
+
+  if (curType) {
+    if (fontAddress || iconFile?.fileSubType === 'ICONFONT' || isIconFont) {
+      if (scriptUrl) {
+        const IconFont = createFromIconfontCN({
+          scriptUrl,
+        });
+        return (
+          <IconFont
+            type={curType}
+            rotate={rotate}
+            {...restProps}
+            style={curStyle}
+            className={curClassName}
+          />
+        );
+      }
+      if (!fontAddress) {
+        // 采用项目本地的iconfont文件
+        return (
+          <svg
+            style={{
+              ...curStyle,
+              transform: `rotate(${rotate}deg)`,
+            }}
+            aria-hidden="true"
+            className={curClassName}
+          >
+            <use xlinkHref={`#${curType}`} />
+          </svg>
+        );
+      }
+    } else if (
+      theme &&
+      !['cross-circle', 'cross-circle-o'].includes(curType) &&
+      Object.keys(iconFileInfo || {})?.length < 1
+    ) {
+      // 兼容原来的antd-mobile的图标
+      return (
+        <LegacyIcon
+          type={curType}
+          rotate={rotate}
+          theme={theme}
+          {...restProps}
+          style={curStyle}
+          className={curClassName}
+        />
+      );
+    } else if (iconFileInfo && Object.keys(iconFileInfo)?.length > 0) {
+      if (iconFileInfo.svgContent) {
+        return (
+          <div
+            className={curClassName}
+            style={{
+              ...curStyle,
+              transform: `rotate(${rotate}deg)`,
+            }}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: iconFileInfo.svgContent }}
+          />
+        );
+      }
+      return (
+        <img
+          className={curClassName}
+          style={{
+            ...curStyle,
+            transform: `rotate(${rotate}deg)`,
+          }}
+          src={scriptUrl}
+          alt=""
+        />
+      );
+    } else if (curType) {
+      return (
+        <LegacyIcon
+          type={curType}
+          rotate={rotate}
+          theme={theme}
+          {...restProps}
+          style={curStyle}
+          className={curClassName}
+        />
+      );
+    }
+  }
+  if (iconFile?.fileSubType === 'ICON_IMAGE' && scriptUrl) {
+    return (
+      <img
+        alt="图片格式错误"
+        src={scriptUrl}
+        {...restProps}
+        style={{
+          ...curStyle,
+          transform: `rotate(${rotate}deg)`,
+        }}
+        className={curClassName}
+      />
+    );
+  }
+  return null;
+};
+
+export default IconED;

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

@@ -0,0 +1,46 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+.cust-icon {
+  width: 16 * @hd;
+  height: 16 * @hd;
+  font-size: 16 * @hd;
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+}
+
+.cust-icon-xxs {
+  width: 12 * @hd;
+  height: 12 * @hd;
+  font-size: 12 * @hd;
+}
+
+.cust-icon-xs {
+  width: 16 * @hd;
+  height: 16 * @hd;
+  font-size: 16 * @hd;
+}
+
+.cust-icon-sm {
+  width: 20 * @hd;
+  height: 20 * @hd;
+  font-size: 20 * @hd;
+}
+
+.cust-icon-md {
+  width: 24 * @hd;
+  height: 24 * @hd;
+  font-size: 24 * @hd;
+}
+
+.cust-icon-lg {
+  width: 36 * @hd;
+  height: 36 * @hd;
+  font-size: 36 * @hd;
+}
+
+.cust-icon-theme {
+  fill: var(--adm-color-primary);
+  color: var(--adm-color-primary);
+}