@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/h5public/src/components/factory/src/FloatingButton/PopoverWrapper.tsx

@@ -0,0 +1,117 @@
+import { EngineBaseProps } from '@lingxiteam/types';
+import { Popover } from 'antd-mobile-5';
+import React from 'react';
+
+const prefixCls = 'lcdp-FloatingButton';
+export type PopoverValueType =
+  | {
+      options?: {
+        title?: string;
+        placement?: string;
+        trigger?: 'click' | 'hover';
+        content: string;
+        contentFn: () => string;
+        rule?: string;
+        maxWidth?: number;
+      };
+    }
+  | {
+      page: {
+        pageId: string;
+        pagePath: string;
+        pageName: string;
+        placement?: string;
+        rule?: string;
+        trigger?: 'click' | 'hover';
+        options?: any[];
+        maxWidth?: number;
+      };
+    };
+const PopoverWrapper: React.FC<{
+  popoverSetting?: PopoverValueType;
+  engineApis: ReturnType<EngineBaseProps['getEngineApis']>;
+  $$componentItem?: any;
+}> = (props) => {
+  const { children, popoverSetting, engineApis } = props;
+  const { page, options } = (popoverSetting as any) || {};
+  const { renderPopover, sandBoxSafeRun } = engineApis;
+  const sandBoxSafeRunFun = (content: any, isBoolean: boolean = false) => {
+    let finalContent = content;
+    try {
+      if (finalContent) {
+        if (typeof finalContent === 'string') {
+          if (isBoolean && finalContent === 'false') {
+            return false;
+          }
+          finalContent = sandBoxSafeRun(finalContent, {});
+        }
+        if (finalContent === undefined && content) {
+          finalContent = content;
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return finalContent;
+  };
+  if (!popoverSetting || !renderPopover) {
+    return children;
+  }
+  if (page && page.pageId && renderPopover) {
+    if (sandBoxSafeRunFun(page.rule, true)) {
+      return children;
+    }
+    if (page.options) {
+      page.options.forEach((_c: any) => {
+        _c.stateParam = sandBoxSafeRunFun(_c?.stateParam);
+      });
+
+      return renderPopover({
+        childElement: children,
+        props,
+        popoverSetting: {
+          page,
+          options: page.options,
+        },
+        uid: props?.$$componentItem?.uid,
+      });
+    }
+  } else if (options) {
+    // 自定义
+    const {
+      maxWidth,
+      content: popContent,
+      placement,
+      title: popTitle,
+    } = options;
+
+    // 隐藏规则
+    if (sandBoxSafeRunFun(options.rule, true)) {
+      return children;
+    }
+    const newPopContent = sandBoxSafeRunFun(popContent);
+    const newPopTitle = sandBoxSafeRunFun(popTitle);
+
+    return (
+      <Popover
+        content={
+          <div style={{ maxWidth: maxWidth || 'none' }}>
+            {newPopTitle && (
+              <div className={`${prefixCls}-popover-title`}>{newPopTitle}</div>
+            )}
+            {newPopContent}
+          </div>
+        }
+        trigger="click"
+        placement={placement}
+      >
+        <>{children}</>
+      </Popover>
+    );
+  } else {
+    return children;
+  }
+  return children;
+};
+
+export default PopoverWrapper;

package/lib/h5public/src/components/factory/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/h5public/src/components/factory/src/FloatingButton/index.less

@@ -0,0 +1,57 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+@prefixCls: lcdp-floating-button;
+
+.@{prefixCls}-wrapper {
+    position: fixed;
+    cursor: pointer;
+    width: fit-content;
+    z-index: 999;
+  
+    .@{prefixCls} {
+  
+      &-btn-text {
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+  
+      &-floatgroup-square {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background-color: #fff;
+        border-radius: 12px;
+        padding: 2px 0;
+  
+        &-item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-bottom: 1px solid #F2F3F5;
+  
+          &:last-child {
+            border-bottom: none;
+          }
+        }
+      }
+    }
+   
+  }
+
+  .@{prefixCls}-popover{
+
+    .adm-popover-arrow {
+      display: none;
+    }
+
+    .adm-popover-inner{
+      background-color: transparent;
+      box-shadow: none;
+      overflow-y: inherit;
+    }
+    .adm-popover-inner-content{
+      padding: 0;
+    }
+  }

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

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

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

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

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

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react';
+import Grid from '@lingxiteam/antd-mobile-plus/es/Grid';
+import { GridProps } from '@lingxiteam/antd-mobile-plus/es/Grid/PropsType';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useDeepCompareEffect } from '../utils/ahooks';
+
+export interface MyGridProps extends GridProps {
+  maxRow?: number | string;
+  aliasIcon: string;
+  aliasText: string;
+  moreIcon?: string;
+  gridData?: any[];
+}
+
+const MyGrid = LingxiForwardRef<any, MyGridProps>((props, ref) => {
+  const {
+    isCarousel = false,
+    carouselMaxRow,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    maxRow = 0,
+    aliasIcon = 'icon',
+    aliasText = 'text',
+    data = [],
+    gridData = [],
+    columnNum = 4,
+    moreIcon,
+    appId,
+    style,
+    visible,
+    className,
+    lineColor,
+    dataSource,
+    configCarouselDataIcon,
+    ...restProps
+  } = props;
+
+
+  const carouselData = useMemo(() => {
+    let newData = data;
+    if (gridData && gridData.length > 0 && Array.isArray(gridData)) {
+      newData = gridData;
+    }
+    return newData.map((item: any) => ({ icon: item[aliasIcon], text: item[aliasText], ...item }));
+  }, [data, aliasIcon, aliasText, gridData]);
+
+ 
+  useDeepCompareEffect(() => {
+    configCarouselDataIcon(carouselData);
+  }, [JSON.stringify(carouselData)]);
+
+  if (!visible) {
+    return <></>;
+  }
+  return (
+    <div className={`use-app-grid ${className}`}>
+      <Grid
+        isCarousel={isCarousel}
+        columnNum={columnNum}
+        data={dataSource}
+        carouselMaxRow={carouselMaxRow}
+        srcStyle={style.srcStyle}
+        style={{ ...style, '--adm-border-color': lineColor }}
+        {...restProps}
+      />
+    </div>
+  );
+});
+
+export default MyGrid;

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

@@ -1,91 +1,42 @@
-import { DataItem, Grid, GridProps } from '@lingxiteam/antd-mobile-plus';
+import React, { useImperativeHandle, useState } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import React, { useImperativeHandle, useMemo, useState } from 'react';
-import { useDeepCompareEffect } from '../utils/ahooks';
-
-export interface MyGridProps extends GridProps {
-  maxRow?: number | string;
-  aliasIcon: string;
-  aliasText: string;
-  moreIcon?: string;
-  gridData?: any[];
-}
-
-const MyGrid = LingxiForwardRef<any, MyGridProps>((props, ref) => {
-  const {
-    isCarousel = false,
-    carouselMaxRow,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    maxRow = 0,
-    aliasIcon = 'icon',
-    aliasText = 'text',
-    data = [],
-    gridData = [],
-    columnNum = 4,
-    moreIcon,
-    appId,
-    style,
-    visible,
-    getEngineApis,
-    className,
-    lineColor,
-    ...restProps
-  } = props;
+import GridLoader from './loader';
+import { DataItem } from '@lingxiteam/antd-mobile-plus/es/Grid/PropsType';
 
+const Grid = LingxiForwardRef<unknown, any>((props, ref) => {
+  const { getEngineApis, ...restProps } = props;
   const [dataSource, setDataSource] = useState<any[]>([]);
-  const carouselData = useMemo(() => {
-    let newData = data;
-    if (gridData && gridData.length > 0 && Array.isArray(gridData)) {
-      newData = gridData;
-    }
-    return newData.map((item: any) => ({
-      icon: item[aliasIcon],
-      text: item[aliasText],
-      ...item,
-    }));
-  }, [data, aliasIcon, aliasText, gridData]);
 
-  const configCarouselDataIcon = (data: DataItem[], labelKey = aliasText, labelValue = aliasIcon) => {
+  const configCarouselDataIcon = (data: DataItem[], labelKey = props?.aliasText, labelValue = props?.aliasIcon) => {
     if (Array.isArray(data)) {
       const { getAppFileUrlByFileCode } = getEngineApis();
-      setDataSource(
-        data.map(it => ({
-          ...it,
-          icon: (it[labelValue] || '').startsWith('http') ? it[labelValue] : getAppFileUrlByFileCode(it.icon),
-          text: it[labelKey],
-        }))
-      );
+      setDataSource(data.map(it => ({
+        ...it,
+        icon: (it[labelValue] || '').startsWith('http') ? it[labelValue] : getAppFileUrlByFileCode(it.icon),
+        text: it[labelKey],
+      })));
     }
   };
 
   useImperativeHandle(ref, () => ({
+    // 这里暴漏部分指令方法
     setData: (data: any[]) => {
       configCarouselDataIcon(data);
     },
-    setDataWithLabelAndValue: (params: { dataSource: any[]; labelKey: string; valueKey: string }) => {
+    setDataWithLabelAndValue: (params: {
+      dataSource: any[];
+      labelKey: string;
+      valueKey: string;
+    }) => {
       configCarouselDataIcon(params.dataSource, params.labelKey, params.valueKey);
     },
   }));
-  useDeepCompareEffect(() => {
-    configCarouselDataIcon(carouselData);
-  }, [JSON.stringify(carouselData)]);
-
-  if (!visible) {
-    return <></>;
-  }
-  return (
-    <div className={`use-app-grid ${className}`}>
-      <Grid
-        isCarousel={isCarousel}
-        columnNum={columnNum}
-        data={dataSource}
-        carouselMaxRow={carouselMaxRow}
-        srcStyle={style.srcStyle}
-        style={{ ...style, '--adm-border-color': lineColor }}
-        {...restProps}
-      />
-    </div>
-  );
+  
+  return <GridLoader
+    {...restProps}
+    dataSource={dataSource}
+    configCarouselDataIcon={configCarouselDataIcon}
+  />;
 });
 
-export default MyGrid;
+export default Grid;

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

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

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

@@ -1,10 +1,10 @@
+import React, { useMemo, useEffect } from 'react';
 import GroupColumn from '@lingxiteam/charts/es/GroupColumn';
-import { LingXiFC } from '@lingxiteam/types';
-import React, { useEffect, useMemo } from 'react';
+import { useJsonToParse } from '../utils/hooks/useJsonToParse';
 import useAsyncState from '../utils/hooks/useAsyncState';
 import useHiddenStyle from '../utils/hooks/useHiddenStyle';
-import { useJsonToParse } from '../utils/hooks/useJsonToParse';
 import { MyGroupColumnProps } from './PropsType';
+import { LingXiFC } from '@lingxiteam/types';
 
 const MyGroupColumn: LingXiFC<MyGroupColumnProps> = (props, ref) => {
   const { colors: iColors = '', visible = true, $$componentItem, getEngineApis, style, refData, ...restProps } = props;
@@ -19,23 +19,19 @@ const MyGroupColumn: LingXiFC<MyGroupColumnProps> = (props, ref) => {
   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;
+  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 i;
-      }),
-    [JSON.stringify(data)]
-  );
+      });
+      return newObj;
+    }
+    return i;
+  }), [JSON.stringify(data)]);
   // 通过字符串截取 获得真正的Color
   const colors = useMemo(() => {
     if (iColors) {
@@ -62,19 +58,17 @@ const MyGroupColumn: LingXiFC<MyGroupColumnProps> = (props, ref) => {
     }
   }, [refData]);
 
-  return (
-    <GroupColumn
-      {...restProps}
-      style={finalStyle}
-      color={colors}
-      xStyle={xStyle}
-      yStyle={yStyle}
-      guideTextStyle={guideTextStyle}
-      legendParams={legendParams}
-      data={dataSource}
-      x={x}
-    />
-  );
+  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

@@ -5,5 +5,5 @@ export interface MyGroupColumnProps {
   legendParams: Array<any>;
   data: Array<any>;
   x: string;
-  refData?: { data?: any[]; legendParams?: any[]; x?: string };
+  refData?: { data?: any[], legendParams?: any[], x?: string};
 }

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

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

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

@@ -3,7 +3,7 @@ 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>,
+  loader: async () => (await import /* webpackChunkName: 'factory-GroupColumn' */ ('./GroupColumn')) as unknown as React.ComponentType<any>,
   loading: LoadingComponennt,
 });