@lingxiteam/ebe-utils 0.0.9 → 0.0.10

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

@@ -0,0 +1,162 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+@prefixCls: lcdp-stepprocess;
+
+.@{prefixCls}-stepProcess {
+  display: block;
+  width: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+
+  .@{prefixCls}-item {
+    position: relative;
+    display: inline-block;
+    padding: 0 16 * @hd;
+
+    .@{prefixCls}-dot {
+      height: 16px;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        z-index: 2;
+        width: 8 * @hd;
+        height: 8 * @hd;
+        overflow: hidden;
+        background-color: currentColor;
+        border-radius: 4 * @hd;
+        transform: translateX(-50%);
+        content: '';
+      }
+    }
+
+    .@{prefixCls}-line {
+      &::after {
+        position: absolute;
+        top: 4 * @hd;
+        right: 0;
+        left: 50%;
+        height: 1px;
+        background-color: currentColor;
+        transform: translateY(-50%);
+        content: '';
+      }
+
+      &::before {
+        position: absolute;
+        top: 4 * @hd;
+        right: 50%;
+        left: 0;
+        height: 1px;
+        background-color: currentColor;
+        transform: translateY(-50%);
+        content: '';
+      }
+    }
+
+    &:first-child .@{prefixCls}-line {
+      &::before {
+        left: 100%;
+      }
+    }
+
+    &:last-child .@{prefixCls}-line {
+      &::after {
+        right: 100%;
+      }
+    }
+
+    .@{prefixCls}-label {
+      margin-top: 8 * @hd;
+      color: #333;
+      font-size: 12 * @hd;
+      height: 28 * @hd;
+      line-height: 28 * @hd;
+      max-width: 76 * @hd;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .@{prefixCls}-noneRight {
+    &::after {
+      color: #e5e5e5;
+    }
+  }
+}
+
+.@{prefixCls}-vertical {
+  width: 100%;
+  height: auto;
+
+  &-item {
+    display: flex;
+    align-items: stretch;
+
+    &-indicator {
+      flex: none;
+      width: 24* @hd;
+      margin-right: 0;
+      position: relative;
+
+      &::after {
+        width: 1px;
+        transform: translateX(-50%);
+        top: 9* @hd;
+        left: 50%;
+        height: 100%;
+        content: "";
+        position: absolute;
+        background-color: currentColor;
+      }
+    }
+
+    &:last-child {
+      .@{prefixCls}-vertical-item-content {
+        padding-bottom: 0;
+      }
+
+      .@{prefixCls}-vertical-item-indicator {
+        &::after {
+          width: 0;
+        }
+      }
+
+    }
+
+    &-content {
+      flex: auto;
+      padding-bottom: 24* @hd;
+
+      &-title {
+        font-size: 12* @hd;
+        line-height: 1.5;
+      }
+    }
+
+    &-icon-container {
+      font-size: 12* @hd;
+      top: 9* @hd;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+      z-index: 1;
+    }
+
+    &-icon-dot {
+      display: block;
+      width: 8* @hd;
+      height: 8* @hd;
+      background: currentColor;
+      border-radius: 4* @hd;
+    }
+  }
+
+}

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

@@ -0,0 +1,42 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useImperativeHandle, useRef, useState } from 'react';
+import StepProcessLoader from './loader';
+import type { MyStepProcessProps } from './StepProcess';
+
+const StepProcess = LingxiForwardRef<unknown, MyStepProcessProps>(
+  (props, ref) => {
+    const progressRef = useRef<MyStepProcessProps>(null);
+    const [refData, setData] = useState<any[]>();
+    const [refDisabled, setDisabled] = useState(false);
+
+    useImperativeHandle(ref, () => ({
+      setValue: (options: any[]) => {
+        if (Array.isArray(options)) {
+          setData(options);
+        }
+      },
+      setDisabled: (v: boolean) => {
+        setDisabled(v);
+      },
+      get disabled() {
+        return progressRef.current?.disabled;
+      },
+      setStatus: (status: string) => {
+        setDisabled(`${status}` !== '1');
+      },
+      setEditor: (e: boolean) => {
+        setDisabled(false);
+      },
+    }));
+    return (
+      <StepProcessLoader
+        {...props}
+        refData={refData}
+        refDisabled={refDisabled}
+        ref={progressRef}
+      />
+    );
+  },
+);
+
+export default StepProcess;

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

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

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

@@ -0,0 +1,108 @@
+import { useEffect, useRef, useState } from 'react';
+
+const TabImage = (props: any) => {
+  const {
+    defaultIcon,
+    selectedIcon,
+    isSelected,
+    titleColor,
+    selectedTitleColor,
+    getAppFileUrlByFileCode,
+    ...restProps
+  } = props;
+  const [src, setSrc] = useState<any>();
+  const myImage = useRef<any>({});
+
+  const downloadImage = (fileCode: string, activityIcon: boolean) => {
+    if (fileCode.length > 0) {
+      (async () => {
+        try {
+          const url = getAppFileUrlByFileCode(fileCode);
+          const xhr = new XMLHttpRequest();
+          xhr.open('GET', url, true);
+          xhr.responseType = 'blob'; // 设置接受类型
+          xhr.timeout = 10000;
+          xhr.onload = () => {
+            // @ts-ignore
+            let data = xhr?.response; // 获取响应体数据
+            const type = xhr?.response?.type || '';
+            // 只有图片格式才进行处理
+            if (type.includes('image/')) {
+              // svg格式
+              if (type.includes('svg')) {
+                const reader = new FileReader();
+                reader.readAsText(data);
+                reader.onload = () => {
+                  // 转换成svg domstring
+                  data = reader.result;
+                  if (activityIcon) {
+                    myImage.current.selected = { type: 'svg', data };
+                  } else {
+                    // 只设置了默认图标，且图片格式为svg, 此时选中图标也改为该图标，填充颜色跟随系统
+                    if (!selectedIcon || selectedIcon.length === 0) {
+                      myImage.current.selected = { type: 'svg', data };
+                    }
+                    myImage.current.normal = { type: 'svg', data };
+                  }
+                  reloadIcon();
+                };
+              } else {
+                // 其他图片格式
+                data = URL.createObjectURL(data);
+                if (activityIcon) {
+                  myImage.current.selected = { type: 'img', data };
+                } else {
+                  myImage.current.normal = { type: 'img', data };
+                }
+                reloadIcon();
+              }
+            }
+          };
+          xhr.ontimeout = () => {
+            xhr.abort(); // 取消请求
+          };
+          xhr.send();
+        } catch (e) {
+          console.log(e);
+        }
+      })();
+    } else if (activityIcon) {
+      myImage.current.selected = null;
+    } else {
+      myImage.current.normal = null;
+    }
+  };
+
+  const reloadIcon = () => {
+    if (isSelected) {
+      setSrc(myImage.current?.selected);
+    } else {
+      setSrc(myImage.current?.normal);
+    }
+  };
+
+  useEffect(() => {
+    downloadImage(defaultIcon, false);
+    downloadImage(selectedIcon, true);
+  }, [defaultIcon, selectedIcon]);
+
+  useEffect(() => {
+    reloadIcon();
+  }, [isSelected]);
+
+  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}` }}
+        />
+      )}
+    </>
+  );
+};
+
+export default TabImage;

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

@@ -0,0 +1,66 @@
+import { EngineBaseProps } from '@lingxiteam/types';
+import { FC } from 'react';
+import '../index.less';
+
+interface TabPageProps {
+  paths: any[];
+  selectedPath?: string;
+  getEngineApis: EngineBaseProps['getEngineApis'];
+  $$componentItem: EngineBaseProps['$$componentItem'];
+  lcdpParentRenderId: string;
+}
+
+const TabPage: FC<TabPageProps> = (props) => {
+  const { paths, selectedPath, getEngineApis, lcdpParentRenderId } = props;
+  const { PageView } = getEngineApis();
+
+  const renderView = () => {
+    return paths.map((item: any) => {
+      if (item.key.length === 0 || item.key.includes('&=&=!')) {
+        return (
+          <div
+            style={
+              item.key === selectedPath
+                ? {
+                    display: 'block',
+                    width: '100%',
+                    height: '100%',
+                    background: '#e9ecf5',
+                  }
+                : { display: 'none' }
+            }
+          >
+            {item.key}
+          </div>
+        );
+      }
+      return (
+        // @ts-ignore
+        <PageView
+          key={item.id}
+          pageSrc={item.key}
+          appId={item.appId}
+          pageViewCompState={{}}
+          visible
+          style={
+            item.key === selectedPath
+              ? { display: 'block', width: '100%', height: '100%' }
+              : { display: 'none' }
+          }
+          platform="h5"
+          $$componentItem={{
+            ...props.$$componentItem,
+            appId: item.appId,
+            uid: `${props.$$componentItem.uid}_${item.id}`,
+          }}
+          lcdpParentRenderId={lcdpParentRenderId}
+          // @ts-ignore
+          getEngineApis={getEngineApis}
+        />
+      );
+    });
+  };
+
+  return <>{renderView()}</>;
+};
+export default TabPage;

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

@@ -0,0 +1,42 @@
+@prefixCls: appTabBar;
+
+.@{prefixCls}-app {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  
+  .my-apptabbar-body {
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    overflow: scroll;
+
+    .notice {
+      color: #333;
+      font-weight: 600;
+    }
+  }
+
+  .my-apptabbar-bottom {
+    flex-shrink: 0;
+    background-color: #fff;
+    border-top: solid 1px #f8f7fa;
+
+    .icon {
+      width: 100%;
+      height: 100%;
+      margin-bottom: 3px;
+    }
+    .alita-tab-bar-plus-item-icon {
+      width: 0.48rem;
+    }
+    .alita-tab-bar-plus-item-active svg{
+      fill: unset;
+    }
+    .alita-tab-bar-plus {
+      margin-top: 0;
+      background-image: none !important;
+    }
+  }
+}

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

@@ -0,0 +1,135 @@
+import { Badge, TabBar } from '@lingxiteam/antd-mobile-plus';
+import { LingXiFC } from '@lingxiteam/types';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import './index.less';
+import TabImage from './TabImage';
+import TabPage from './TabPage';
+
+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/Table/index.tsx

@@ -0,0 +1,136 @@
+import { Table, TableType } from '@lingxiteam/antd-mobile-plus';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useEffect, useImperativeHandle, useState } from 'react';
+import useAsyncState from '../utils/hooks/useAsyncState';
+
+export interface MyTableProps extends Omit<TableType, 'dataSource'> {
+  data?: TableType['columns'];
+  dataSource?: TableType['dataSource'];
+  dataMap: any;
+  style?: any;
+  isBindData?: boolean;
+  getValueAction?: any;
+}
+
+const MyTable = LingxiForwardRef<any, MyTableProps>((props, ref) => {
+  const {
+    style,
+    getValueAction,
+    $$componentItem,
+    getEngineApis,
+    ...restProps
+  } = props;
+
+  const {
+    service: { commonFetch },
+  } = getEngineApis();
+
+  const [{ data, dataMap, dataSource, isBindData }, setState] = useAsyncState({
+    data: props.data,
+    dataMap: props.dataMap,
+    dataSource: props.dataSource,
+    isBindData: props.isBindData ?? false,
+  });
+  const {
+    titleBackground,
+    titleColor,
+    leftTitleColor,
+    leftBackground,
+    ...restStyle
+  } = style;
+  const firstLeftStyle: any = {};
+  const [remotedataColumns, setRemoteDataColumns] = useState<any>([]);
+  const [remoteDataSource, setRemoteDataSource] = useState<any>([]);
+
+  if (leftTitleColor) {
+    firstLeftStyle.color = leftTitleColor;
+  }
+  if (leftBackground) {
+    firstLeftStyle.background = leftBackground;
+  }
+  if (dataMap.type === 'custom' && Array.isArray(data)) {
+    useEffect(() => {
+      setRemoteDataColumns(dataMap.data);
+      setRemoteDataSource(dataMap.dataSource);
+    }, [dataMap]);
+  } else if (dataMap.type === 'service') {
+    const { service } = dataMap;
+    const { requestParam, selectedService } = service;
+    const dataColumnsKey = service.data;
+    const dataSourceKey = service.dataSource;
+
+    const getTableData = async (method: string, api: string, params: any) => {
+      // @ts-ignore
+      return commonFetch(method || 'post', api || '', params);
+    };
+
+    useEffect(() => {
+      const params: any = {};
+      if (typeof requestParam === 'string') {
+        params.parameters = JSON.parse(requestParam);
+      }
+      params.serviceCode = selectedService.serviceCode || '';
+      params.appId = selectedService.appId || '';
+      params.serviceVersionId = selectedService.serviceVersionId || '';
+      params.version = selectedService.versionCode || '1.0';
+
+      getTableData(
+        selectedService.serviceMethod,
+        selectedService.api,
+        params,
+      ).then((res: any) => {
+        if (typeof res === 'object') {
+          const columnData = res[dataColumnsKey] || [];
+          const columnDataCopy: any[] = [];
+          if (Array.isArray(columnData)) {
+            columnData.forEach((item: any) => {
+              const itemCopy = { ...item } || {};
+              if (!itemCopy.width) {
+                itemCopy.width = 100;
+              } else if (typeof itemCopy.width === 'string') {
+                itemCopy.width = parseFloat(itemCopy.width);
+              }
+              columnDataCopy.push(itemCopy);
+            });
+          }
+          setRemoteDataColumns(columnDataCopy);
+          setRemoteDataSource(res[dataSourceKey] || []);
+        }
+      });
+    }, []);
+  }
+
+  useEffect(() => {
+    // 绑定数据
+    if (isBindData) {
+      setRemoteDataColumns(data);
+      setRemoteDataSource(dataSource);
+    }
+  }, [data, dataSource]);
+
+  useEffect(() => {
+    if (getValueAction) {
+      getValueAction({ data: remotedataColumns, dataSource: remoteDataSource });
+    }
+  }, [getValueAction]);
+
+  useImperativeHandle(ref, () => ({
+    reloadAppTableData: setState,
+    dataSource: remoteDataSource,
+    data: remotedataColumns,
+  }));
+
+  return (
+    <Table
+      {...restProps}
+      columns={remotedataColumns}
+      dataSource={remoteDataSource}
+      titleBackground={titleBackground}
+      titleColor={titleColor}
+      firstLeftStyle={firstLeftStyle}
+      style={restStyle}
+    />
+  );
+});
+
+export default MyTable;