@lingxiteam/ebe-utils 0.5.10 → 0.6.1

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

@@ -1,12 +1,20 @@
-import { Icon } from '@lingxiteam/icons';
+import React, { useImperativeHandle, useState, useEffect } from 'react';
 import { EngineBaseProps, LingxiForwardRef } from '@lingxiteam/types';
 import { Steps } from 'antd-mobile-5';
-import classNames from 'classnames';
-import React, { useEffect, useImperativeHandle, useState } from 'react';
-import FactoryIcon from '../Icon';
 import { useListenToggleBoolean } from '../utils/hooks/useToggleBoolean';
-import { CheckCircle, Vector } from './constant';
+import { Vector, CheckCircle } from './constant';
+import Loadable from 'react-loadable';
+import FactoryIcon from '../Icon';
 import './index.less';
+import classNames from 'classnames';
+
+const Icon = Loadable({
+  loader: async () => {
+    const { Icon } = await import('@lingxiteam/icons');
+    return Icon;
+  },
+  loading: () => <></>,
+});
 
 const getDefaultIconSetting = (getEngineApis: EngineBaseProps['getEngineApis']) => {
   const { getLocale } = getEngineApis();
@@ -32,34 +40,34 @@ const getDefaultIconSetting = (getEngineApis: EngineBaseProps['getEngineApis'])
 
 const { Step } = Steps;
 interface IconSettingItem {
-  label: string;
-  value: 'wait' | 'process' | 'finish' | 'error';
-  isUsePrimary?: boolean; // 是否应用主题
-  icon?: any; // 图标信息
-  color?: string; // 颜色
+  label: string,
+  value: 'wait' | 'process' | 'finish' | 'error',
+  isUsePrimary?: boolean, // 是否应用主题
+  icon?: any, // 图标信息
+  color?: string, // 颜色
 }
 export interface MyStepProcessProps {
   active: number;
   visible: boolean;
   stepType?: 'normal' | 'navigation'; // 步骤类型
-  dataSource: any[]; // 来自关联数据源的数据 FIXME：可以通过预处理统一为一个变量，后续处理
-  iconItems?: any[]; // 来自步骤设置的数据 FIXME：可以通过预处理统一为一个变量，后续处理
+  dataSource: any[];// 来自关联数据源的数据 FIXME：可以通过预处理统一为一个变量，后续处理
+  iconItems?: any[], // 来自步骤设置的数据 FIXME：可以通过预处理统一为一个变量，后续处理
   style?: React.CSSProperties;
   name?: string;
   disabled?: boolean;
-  stepStyle: 'number' | 'icon' | 'dot'; // 图表样式
-  size: 'small' | 'normal'; // 步骤条尺寸
+  stepStyle: 'number' | 'icon' | 'dot';// 图表样式
+  size: 'small' | 'normal';// 步骤条尺寸
   direction: 'horizontal' | 'vertical'; // 新增属性:方向
   onChange?: (index: number, step: any) => void;
-  oldDataSource?: any[]; // 存量旧的数据
-  iconSetting?: IconSettingItem[]; // 默认图标设置
+  oldDataSource?: any[];// 存量旧的数据
+  iconSetting?: IconSettingItem[];// 默认图标设置
   alias?: {
-    title: string;
-    id: string;
-    description?: string;
-    disabled?: string;
-    status?: string;
-    subTitle?: string;
+    title: string,
+    id: string,
+    description?: string,
+    disabled?: string,
+    status?: string,
+    subTitle?: string,
     icon?: string;
   };
 }
@@ -130,14 +138,9 @@ const StepProcess = LingxiForwardRef<any, MyStepProcessProps>((props, ref) => {
     setCurrent(_current: any) {
       onCurrentChange(+_current);
     },
-    setStepByOptions(
-      options: {
-        step: string;
-        status: 'wait' | 'process' | 'finish' | 'error';
-      }[]
-    ) {
+    setStepByOptions(options: { step: string; status: 'wait' | 'process' | 'finish' | 'error'; }[]) {
       const newData = data.map((i, index) => {
-        const item = options.find(j => j.step === i[idAlias] || +j.step === index);
+        const item = options.find((j) => j.step === i[idAlias] || +j.step === index);
         if (item && item.status) {
           i[statusAlias] = item.status;
         }
@@ -163,7 +166,7 @@ const StepProcess = LingxiForwardRef<any, MyStepProcessProps>((props, ref) => {
         // @ts-ignore
         <FactoryIcon
           mode="custom"
-          iconItems={[{ ...iconItem, ...style }]} // 图标优先展示iconItems的颜色，但是这里需要将用户设置的颜色优先级提高
+          iconItems={[{ ...iconItem, ...style }]}// 图标优先展示iconItems的颜色，但是这里需要将用户设置的颜色优先级提高
           getEngineApis={getEngineApis}
           $$componentItem={$$componentItem}
           name="图标"
@@ -214,19 +217,17 @@ const StepProcess = LingxiForwardRef<any, MyStepProcessProps>((props, ref) => {
         const style = {
           fontSize: size === 'normal' ? '18px' : '16px',
         };
-        // 字符串代表使用fileID或者url展示图标
+          // 字符串代表使用fileID或者url展示图标
         if (typeof iconValue === 'string') {
           // 判断数字字符串
           item[iconAlias] = {
-            iconFile: iconValue.startsWith('http')
-              ? {
-                fileHttp: iconValue,
-                fileSubType: 'ICON_IMAGE',
-              }
-              : {
-                fileCode: iconValue,
-                fileSubType: 'ICON_IMAGE',
-              },
+            iconFile: iconValue.startsWith('http') ? {
+              fileHttp: iconValue,
+              fileSubType: 'ICON_IMAGE',
+            } : {
+              fileCode: iconValue,
+              fileSubType: 'ICON_IMAGE',
+            },
           };
         }
         // 否则为自定义配置的
@@ -241,18 +242,16 @@ const StepProcess = LingxiForwardRef<any, MyStepProcessProps>((props, ref) => {
             name="图标"
           />
         );
-
+        
       case 'dot':
-        return (
-          <div
-            className={classNames({
-              [`${prefixCls}-dot`]: true,
-              [`${prefixCls}-dot-${size}`]: true,
-              [`${prefixCls}-dot-${item[statusAlias]}`]: true,
-            })}
-            style={{ background: currentColor }}
-          />
-        );
+        return <div
+          className={classNames({
+            [`${prefixCls}-dot`]: true,
+            [`${prefixCls}-dot-${size}`]: true,
+            [`${prefixCls}-dot-${item[statusAlias]}`]: true,
+          })}
+          style={{ background: currentColor }}
+        />;
 
       default:
         return null;
@@ -260,10 +259,10 @@ const StepProcess = LingxiForwardRef<any, MyStepProcessProps>((props, ref) => {
   };
 
   /**
-   * 步骤条标题与副标题的渲染
-   * @param item
-   * @returns
-   */
+  * 步骤条标题与副标题的渲染
+  * @param item
+  * @returns
+  */
   const renderTitle = (item: any) => {
     return (
       <div className={`${prefixCls}-title`}>
@@ -314,33 +313,28 @@ const StepProcess = LingxiForwardRef<any, MyStepProcessProps>((props, ref) => {
 
   const renderSteps = () => {
     return data.reduce((acc, cur, curIndex: number) => {
-      acc.push(
-        <Step
-          status={cur[statusAlias]}
-          title={renderTitle(cur)}
-          description={renderDirection(cur)}
-          icon={
-            <div
-              onClick={() => {
-                // 设置了点击事件就暴露切换事件，antd没有提供对用的切换事件，需要自己在节点增加
-                if (onChange && !disabled && !cur[disabledAlias]) {
-                  onChange(curIndex, cur);
-                  onCurrentChange(curIndex);
-                }
-              }}
-            >
-              {renderStepIcon(cur, curIndex)}
-            </div>
-          }
-        />
-      );
-      // 点状且设置导航型要加入 ‘>’ 图标
-      if (props.stepType === 'navigation' && stepStyle !== 'dot' && curIndex !== data.length - 1) {
-        acc.push(
-          <div className={`${prefixCls}-arrow`}>
-            <Icon type="right" />
+      acc.push(<Step
+        status={cur[statusAlias]}
+        title={renderTitle(cur)}
+        description={renderDirection(cur)}
+        icon={
+          <div onClick={() => {
+            // 设置了点击事件就暴露切换事件，antd没有提供对用的切换事件，需要自己在节点增加
+            if (onChange && !disabled && !cur[disabledAlias]) {
+              onChange(curIndex, cur);
+              onCurrentChange(curIndex);
+            }
+          }}
+          >
+            {renderStepIcon(cur, curIndex)}
           </div>
-        );
+        }
+      />);
+      // 点状且设置导航型要加入 ‘>’ 图标
+      if (props.stepType === 'navigation' &&
+        stepStyle !== 'dot' &&
+        curIndex !== data.length - 1) {
+        acc.push(<div className={`${prefixCls}-arrow`}><Icon type="right" /></div>);
       }
       return acc;
     }, []);
@@ -352,13 +346,13 @@ const StepProcess = LingxiForwardRef<any, MyStepProcessProps>((props, ref) => {
 
   return (
     <div style={{ ...style, overflowY: 'auto' }}>
-      <div
-        className={classNames({
-          [`${prefixCls}-stepProcess`]: true,
-          [`${prefixCls}-stepProcess-vertical`]: direction === 'vertical' && props.stepType !== 'navigation', // 垂直样式
-          [`${prefixCls}-stepProcess-navigate`]: props.stepType === 'navigation' && stepStyle !== 'dot', // 导航样式
-        })}
+      <div className={classNames({
+        [`${prefixCls}-stepProcess`]: true,
+        [`${prefixCls}-stepProcess-vertical`]: direction === 'vertical' && props.stepType !== 'navigation', // 垂直样式
+        [`${prefixCls}-stepProcess-navigate`]: props.stepType === 'navigation' && stepStyle !== 'dot', // 导航样式
+      })}
       >
+
         <Steps current={current} direction={props.stepType === 'navigation' ? 'horizontal' : direction} className={`${prefixCls}-start-content`}>
           {renderSteps()}
         </Steps>

package/lib/h5public/src/components/factory/src/StepProcess/StepItem.tsx

@@ -1,5 +1,5 @@
-import classnames from 'classnames';
 import React, { useMemo } from 'react';
+import classnames from 'classnames';
 import './index.less';
 
 export interface MyStepItemProps {
@@ -11,7 +11,7 @@ export interface MyStepItemProps {
 }
 
 const prefixCls = 'lcdp-stepprocess';
-const StepItem: React.FC<MyStepItemProps> = props => {
+const StepItem: React.FC<MyStepItemProps> = (props) => {
   const { index, label, color } = props;
   const active = useMemo(() => {
     const i = props.active ? Number(props.active) : 0;
@@ -21,7 +21,11 @@ const StepItem: React.FC<MyStepItemProps> = props => {
   return (
     <div className={classnames(`${prefixCls}-item`)}>
       <div>
-        <div className={`${prefixCls}-dot`} style={index <= active ? { color } : { color: '#E5E5E5' }} onClick={props.onClick} />
+        <div
+          className={`${prefixCls}-dot`}
+          style={index <= active ? { color } : { color: '#E5E5E5' }}
+          onClick={props.onClick}
+        />
         <div
           className={classnames(`${prefixCls}-line`, {
             [`${prefixCls}-noneRight`]: index === active,
@@ -29,9 +33,7 @@ const StepItem: React.FC<MyStepItemProps> = props => {
           style={index <= active ? { color } : { color: '#E5E5E5' }}
         />
       </div>
-      <div className={`${prefixCls}-label`} onClick={props.onClick}>
-        {label}
-      </div>
+      <div className={`${prefixCls}-label`} onClick={props.onClick}>{label}</div>
     </div>
   );
 };

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

@@ -1,9 +1,9 @@
+import React, { useImperativeHandle, useState, useEffect } from 'react';
+import StepItem from './StepItem';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import React, { useEffect, useImperativeHandle, useState } from 'react';
 import { useListenToggleBoolean } from '../utils/hooks/useToggleBoolean';
-import './index.less';
-import StepItem from './StepItem';
 import VStepItem from './VStepItem';
+import './index.less';
 
 export interface MyStepProcessProps {
   active: number;
@@ -58,6 +58,7 @@ const StepProcess = LingxiForwardRef<any, MyStepProcessProps>((props, ref) => {
     }
   }, [refDisabled]);
 
+
   useImperativeHandle(ref, () => ({
     // setValue: (options: any[]) => {
     //   if (Array.isArray(options)) {
@@ -79,8 +80,7 @@ const StepProcess = LingxiForwardRef<any, MyStepProcessProps>((props, ref) => {
     return data?.map((item, index) => {
       if (!item?.label) {
         return null;
-      }
-      if (direction && direction === 'vertical') {
+      } if (direction && direction === 'vertical') {
         return (
           <VStepItem
             {...restProps}
@@ -125,7 +125,15 @@ const StepProcess = LingxiForwardRef<any, MyStepProcessProps>((props, ref) => {
   }
   return (
     <div style={{ ...style, overflowY: 'auto' }}>
-      <div className={direction && direction === 'vertical' ? `${prefixCls}-vertical` : `${prefixCls}-stepProcess`}>{renderStep()}</div>
+      <div
+        className={
+          direction && direction === 'vertical'
+            ? `${prefixCls}-vertical`
+            : `${prefixCls}-stepProcess`
+        }
+      >
+        {renderStep()}
+      </div>
     </div>
   );
 });

package/lib/h5public/src/components/factory/src/StepProcess/VStepItem.tsx

@@ -10,7 +10,7 @@ export interface VStepItemProps {
 }
 
 const prefixCls = 'lcdp-stepprocess-vertical-item';
-const VStepItem: React.FC<VStepItemProps> = props => {
+const VStepItem: React.FC<VStepItemProps> = (props) => {
   const { index = 0, label, color, onClick } = props;
   const active = useMemo(() => {
     const i = props.active ? Number(props.active) : 0;
@@ -19,9 +19,16 @@ const VStepItem: React.FC<VStepItemProps> = props => {
 
   return (
     <div className={`${prefixCls}`}>
-      <div className={`${prefixCls}-indicator`} style={index < active ? { color } : { color: '#E5E5E5' }}>
+      <div
+        className={`${prefixCls}-indicator`}
+        style={index < active ? { color } : { color: '#E5E5E5' }}
+      >
         <div className={`${prefixCls}-icon-container`}>
-          <span className={`${prefixCls}-icon-dot`} style={index <= active ? { color } : { color: '#E5E5E5' }} onClick={onClick} />
+          <span
+            className={`${prefixCls}-icon-dot`}
+            style={index <= active ? { color } : { color: '#E5E5E5' }}
+            onClick={onClick}
+          />
         </div>
       </div>
       <div className={`${prefixCls}-content`}>

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

@@ -1,5 +1,5 @@
+import React, { useRef, useImperativeHandle, useState } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import React, { useImperativeHandle, useRef, useState } from 'react';
 import StepProcessLoader from './loader';
 import type { MyStepProcessProps } from './StepProcess';
 

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

@@ -0,0 +1,108 @@
+import Badge from '@lingxiteam/antd-mobile-plus/es/Badge';
+import TabBar from '@lingxiteam/antd-mobile-plus/es/TabBar';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import './index.less';
+import TabImage from './TabImage';
+import TabPage from './TabPage';
+import { LingXiFC } from '@lingxiteam/types';
+
+export interface MyTabBarEDProps {
+  tabsData: any[];
+  style: any;
+  onChange?: any;
+  lcdpParentRenderId: string;
+}
+
+const prefixCls = 'appTabBar';
+const MyTabBar: LingXiFC<MyTabBarEDProps> = (props) => {
+  const { tabsData, style, onChange, $$componentItem, getEngineApis, lcdpParentRenderId } = props;
+  const {
+    titleColor = '#999999',
+    selectedTitleColor = '#1677ff',
+    titleFontSize = '10',
+    tabBarBackground = '#ffffff',
+  } = style;
+  const [pathName, setPathName] = useState<string>();
+  const [tabs, setTabs] = useState<any>([]);
+  const tabsValue = useRef(tabs);
+  const { getAppFileUrlByFileCode } = getEngineApis();
+
+  useEffect(() => {
+    const tabsDataCopy = [...tabsData];
+    tabsDataCopy.forEach((e: any, index: number) => {
+      const item = e;
+      if (item.defaultSelected && !pathName) {
+        setPathName(item.key);
+      }
+      item.icon = (active: boolean) => {
+        return (
+          <TabImage
+            getAppFileUrlByFileCode={getAppFileUrlByFileCode}
+            titleColor={titleColor}
+            selectedTitleColor={selectedTitleColor}
+            defaultIcon={item.defaultIcon}
+            selectedIcon={item.selectedIcon}
+            isSelected={active}
+            className="icon"
+          />
+        );
+      };
+      item.title = (active: boolean) => {
+        if (active) {
+          return (
+            <span style={{ color: selectedTitleColor, fontSize: `${titleFontSize}px` }}>
+              {item.titleText}
+            </span>
+          );
+        }
+        return (
+          <span style={{ color: titleColor, fontSize: `${titleFontSize}px` }}>
+            {item.titleText}
+          </span>
+        );
+      };
+      if (item.badgeData === 'point') {
+        item.badge = { content: Badge.dot, style: { '--top': '15%' } };
+      } else if (item.badgeData && item.badgeData.length > 0) {
+        item.badge = { content: item.badgeData, style: { '--top': '25%' } };
+      }
+    });
+    tabsValue.current = tabsDataCopy;
+    setTabs([...tabsDataCopy]);
+  }, [tabsData]);
+
+  const tabComs = useMemo(() => {
+    return tabs.map((item: any) => (
+      <TabBar.Item key={item.key} icon={item.icon} title={item.title} badge={item.badge} />
+    ));
+  }, [tabs]);
+
+  return (
+    <div className={`${prefixCls}-app`}>
+      <div className="my-apptabbar-body"><TabPage paths={tabs} selectedPath={pathName} getEngineApis={getEngineApis} $$componentItem={$$componentItem} lcdpParentRenderId={lcdpParentRenderId} /></div>
+      <div className="my-apptabbar-bottom" style={{ background: tabBarBackground }}>
+        <TabBar
+          safeArea
+          activeKey={pathName}
+          onChange={(value: any) => {
+            if (pathName === value) return;
+            setPathName(value);
+            let seletcedIndex = 0;
+            tabs.forEach((item: any, index: number) => {
+              if (item.key === value) {
+                seletcedIndex = index;
+              }
+            });
+            if (onChange) {
+              onChange(seletcedIndex + 1);
+            }
+          }}
+        >
+          {tabComs}
+        </TabBar>
+      </div>
+    </div>
+  );
+};
+
+export default MyTabBar;

package/lib/h5public/src/components/factory/src/TabBar/TabImage/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
 const TabImage = (props: any) => {
   const { defaultIcon, selectedIcon, isSelected, titleColor, selectedTitleColor, getAppFileUrlByFileCode, ...restProps } = props;
@@ -9,13 +9,13 @@ const TabImage = (props: any) => {
     if (fileCode.length > 0) {
       (async () => {
         try {
-          const url = getAppFileUrlByFileCode(fileCode);
+          const url = getAppFileUrlByFileCode(fileCode, { isIgnoreSecurity: true });
           const xhr = new XMLHttpRequest();
           xhr.open('GET', url, true);
           // 添加自定义头部(在info.js写入)
           const { lxRequestHeaders } = window as any;
           if (lxRequestHeaders) {
-            Object.keys(lxRequestHeaders).forEach(header => {
+            Object.keys(lxRequestHeaders).forEach((header) => {
               xhr.setRequestHeader(header, lxRequestHeaders[header]); // 设置请求头参数
             });
           }
@@ -92,10 +92,8 @@ const TabImage = (props: any) => {
   return (
     <>
       {src?.type === 'img' && <img {...restProps} src={src.data} alt="" />}
-      {/* eslint-disable-next-line react/no-danger */}
-      {src?.type === 'svg' && (
-        <div {...restProps} dangerouslySetInnerHTML={{ __html: src.data }} style={{ fill: `${isSelected ? selectedTitleColor : titleColor}` }} />
-      )}
+      {/* eslint-disable-next-line react/no-danger */ }
+      {src?.type === 'svg' && <div {...restProps} dangerouslySetInnerHTML={{ __html: src.data }} style={{ fill: `${isSelected ? selectedTitleColor : titleColor}` }} />}
     </>
   );
 };

package/lib/h5public/src/components/factory/src/TabBar/TabPage/index.tsx

@@ -1,16 +1,16 @@
-import { EngineBaseProps } from '@lingxiteam/types';
 import React, { FC } from 'react';
 import '../index.less';
+import { EngineBaseProps } from '@lingxiteam/types';
 
 interface TabPageProps {
-  paths: any[];
+  paths: any[],
   selectedPath?: string;
   getEngineApis: EngineBaseProps['getEngineApis'];
   $$componentItem: EngineBaseProps['$$componentItem'];
   lcdpParentRenderId: string;
 }
 
-const TabPage: FC<TabPageProps> = props => {
+const TabPage: FC<TabPageProps> = (props) => {
   const { paths, selectedPath, getEngineApis, lcdpParentRenderId } = props;
   const { PageView } = getEngineApis();
 
@@ -21,12 +21,7 @@ const TabPage: FC<TabPageProps> = props => {
           <div
             style={
               item.key === selectedPath
-                ? {
-                  display: 'block',
-                  width: '100%',
-                  height: '100%',
-                  background: '#e9ecf5',
-                }
+                ? { display: 'block', width: '100%', height: '100%', background: '#e9ecf5' }
                 : { display: 'none' }
             }
           >
@@ -42,7 +37,9 @@ const TabPage: FC<TabPageProps> = props => {
           appId={item.appId}
           pageViewCompState={{}}
           visible
-          style={item.key === selectedPath ? { display: 'block', width: '100%', height: '100%' } : { display: 'none' }}
+          style={item.key === selectedPath
+            ? { display: 'block', width: '100%', height: '100%' }
+            : { display: 'none' }}
           platform="h5"
           $$componentItem={{
             ...props.$$componentItem,