@lingxiteam/ebe-utils 0.0.9 → 0.0.10

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

@@ -0,0 +1,312 @@
+@import "../styles/theme.less";
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+@prefixCls: appDynamicTable;
+
+.@{prefixCls} {
+  display: flex;
+  flex-direction: column;
+  background-color: #FFFFFF;
+  overflow: hidden;
+
+  .table-header {
+    padding: 8 * @hd 0;
+    font-size: @font-size-base;
+    font-weight: 600;
+    color: #1C242E;
+    flex-shrink: 0;
+  }
+
+  .table-body {
+    // flex: 1 1 auto;
+    overflow: hidden;
+  }
+
+  .table-footer {
+    height: 44 * @hd;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    justify-items: center;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+
+    .button {
+      width: 20 * @hd;
+      height: 20 * @hd;
+      padding: 0 5 * @hd;
+      color: rgba(28, 36, 46, 0.55);
+      background-color: #F6F8FA;
+      svg {
+        margin-top: 5 * @hd;
+      }
+    }
+
+    .text {
+      height: 20 * @hd;
+      margin: 0 4 * @hd;
+      padding: 0 8 * @hd;
+      font-size: 12 * @hd;
+      line-height: 20 * @hd;
+      color: rgba(28, 36, 46, 0.25);
+      background-color: #F6F8FA;
+
+      .current-page {
+        color: var(--adm-color-primary);
+      }
+    }
+  }
+
+  .more-cell {
+    font-size: @font-size-caption-sm;
+    height: 40 * @hd;
+    line-height: 40 * @hd;
+    text-align: center;
+    color: rgba(28, 36, 46, 0.45);
+  }
+
+  .table-empty {
+    width: 100%;
+    height: 100 * @hd;
+    span {
+      color: #EFEFEF;
+      font-size: 70 * @hd;
+    }
+    .empty-tip {
+      color: rgba(28, 36, 46, 0.45);
+    }
+  }
+
+  .customer-cell-common {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .customer-cell-pure {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    .customer-cell-common;
+  }
+
+  .customer-cell-point-tag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .point {
+      flex-shrink: 0;
+      width: 4 * @hd;
+      height: 4 * @hd;
+      border-radius: 50%;
+      margin-right: 4 * @hd;
+    }
+  }
+
+
+  .customer-cell-gost-tag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    .span-cell {
+      .customer-cell-common;
+      height: 20 * @hd;
+      line-height: 18 * @hd;
+      padding: 0 5 * @hd;
+      border: 1 * @hd solid transparent;
+      border-radius: 1000 * @hd;
+    }
+  }
+
+  .customer-cell-color-tag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    .span-cell {
+      .customer-cell-common;
+      height: 20 * @hd;
+      line-height: 20 * @hd;
+      border-radius: 2 * @hd;
+      padding: 0 5 * @hd;
+    }
+  }
+
+  .customer-cell-hyperlink {
+    .customer-cell-common;
+    color: var(--adm-color-primary);
+    text-decoration: underline;
+  }
+
+  .customer-cell-progress-bar {
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    .progressBar {
+      width: 100%;
+      height: 8 * @hd;
+      border-radius: 4 * @hd;
+      overflow: hidden;
+
+      .current {
+        height: 8 * @hd;
+        border-radius: 4 * @hd;
+      }
+    }
+  }
+
+
+  // loading 样式
+  .ag-overlay {
+    margin-top: 40 * @hd;
+    height: calc(100% - 40 * @hd);
+    --ag-modal-overlay-background-color: #ffffff;
+    .ag-react-container {
+      width: 100%;
+      height: 100%;
+    }
+    .ag-overlay-no-rows-wrapper {
+      padding-top: 0;
+    }
+    .no-record {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .ag-body-viewport {
+    min-height: 100 * @hd;
+    .ag-center-cols-clipper {
+       min-height: 0;
+       .ag-center-cols-viewport {
+        &::-webkit-scrollbar{
+          display: none;
+        }
+      }
+    }
+  }
+
+  .ag-body-horizontal-scroll {
+    height: 0 !important;
+    min-height: 0 !important;
+    .ag-body-horizontal-scroll-viewport {
+      height: 0 !important;
+      min-height: 0 !important;
+    }
+  }
+  .ag-body-vertical-scroll {
+    height: 0 !important;
+    min-height: 0 !important;
+  }
+
+  .theme-common-style {
+    --ag-font-size: 12 * @hd;
+    --ag-header-height: 40 * @hd;
+    --ag-row-height: 40 * @hd;
+    // 标题背景颜色
+    --ag-header-background-color: var(--dynamic-table-header-bg-color);
+    // // 标题字体颜色
+    --ag-header-foreground-color: var(--dynamic-table-header-color);
+    // 选中项边框样式
+    --ag-range-selection-border-color: transparent;
+    --ag-selected-row-background-color: var(--adm-color-primary);
+    // --ag-cell-horizontal-padding: 0;
+
+    .ag-header-cell-label {
+      justify-content: center;
+    }
+
+    .ag-ltr .ag-cell {
+      text-align: center;
+    }
+
+    .ag-header .ag-pinned-left-header,
+    .ag-body-viewport .ag-pinned-left-cols-container {
+      position: relative;
+      z-index: 1;
+      -webkit-box-shadow: 2 * @hd 0 8 * @hd 0 rgba(103,109,126,0.12);
+      box-shadow: 2 * @hd 0 8 * @hd 0 rgba(103,109,126,0.12);
+    }
+
+    .ag-header .ag-pinned-right-header,
+    .ag-body-viewport .ag-pinned-right-cols-container {
+      position: relative;
+      z-index: 1;
+      -webkit-box-shadow: -2 * @hd 0 8 * @hd 0 rgba(103,109,126,0.12);
+      box-shadow: -2 * @hd 0 8 * @hd 0 rgba(103,109,126,0.12);
+    }
+
+  }
+
+  .common-span-cell {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #FFFFFF;
+  }
+
+
+  .ag-theme-segmentation {
+    .theme-common-style;
+    --ag-borders-critical: #EFEFEF;
+    --ag-row-border-color: #EFEFEF;
+    --ag-header-border-color: #EFEFEF;
+
+    .ag-header {
+      border-bottom-color: #EFEFEF;
+    }
+
+    .ag-root-wrapper {
+      border: none;
+    }
+  }
+
+  .segmentation-span-cell {
+    .common-span-cell;
+    // border-bottom: 1px solid #efefef;
+    // // border-right: 1px solid #efefef;
+    // --ag-cell-horizontal-border: 1px solid #efefef;
+    background: #F7F7F7;//rgba(43, 45, 48, 0.25);
+  }
+
+  .ag-theme-zebra {
+    .theme-common-style;
+    // 斑马纹颜色
+    --ag-odd-row-background-color: #FAFAFA;
+    --ag-borders: none;
+    --ag-row-border-color: none;
+  }
+
+  .zebra-span-cell {
+    .common-span-cell;
+    background: #F2F3F5;
+  }
+
+  .ag-theme-border {
+    .theme-common-style;
+    --ag-border-color: #EFEFEF;
+    // columns隔条颜色
+    --ag-cell-horizontal-border: solid #EFEFEF;
+    // 表头隔条颜色
+    .ag-header-cell {
+      border-right: 1 * @hd solid #EFEFEF;
+    }
+  }
+
+  .border-span-cell {
+    .common-span-cell;
+    border-bottom: 1 * @hd solid #EFEFEF;
+  }
+
+}

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

@@ -0,0 +1,79 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React, { useEffect, useImperativeHandle, useState } from 'react';
+import DynamicTableLoader from './loader';
+import { MyDynamicTableProps } from './Table';
+
+function useSync<S>(
+  initialValue: S,
+): [S, React.Dispatch<React.SetStateAction<S>>] {
+  const [state, setState] = useState(initialValue);
+  useEffect(() => {
+    setState(initialValue);
+  }, [initialValue]);
+
+  return [state, setState];
+}
+
+interface DynamicTableProps extends Omit<MyDynamicTableProps, 'currentData'> {}
+
+const DynamicTable = LingxiForwardRef<any, DynamicTableProps>((props, ref) => {
+  const [dataSource, setDataSource] = useSync(props.dataSource);
+  const [currentData, setCurrentData] = useState<any[]>([]);
+  const [total, setTotal] = useSync<number | string>(props.total ?? 0);
+  const [pageNum, setPageNum] = useSync<any>(props.pageNum || 1);
+  const [pageSize, setPageSize] = useSync<any>(props.pageSize || 1);
+  const [dataLoading, setDataLoading] = useState<boolean>(true);
+
+  useImperativeHandle(ref, () => ({
+    setTableData: setDataSource,
+    setTotal: (total: any) => {
+      if (typeof total !== 'undefined') {
+        setTotal(Number(total));
+      }
+    },
+    setPageNum: (page: any) => {
+      if (typeof page !== 'undefined') {
+        setPageNum(Number(page));
+      }
+    },
+    setPageSize: (pageSize: any) => {
+      if (typeof pageSize !== 'undefined') {
+        setPageSize(Number(pageSize));
+      }
+    },
+    setLoading: (loading: boolean, reloadDataSource?: string) => {
+      if (reloadDataSource && reloadDataSource === 'reloadDataSource') {
+        if (props.dataSourceLoading) {
+          setDataLoading(loading);
+        }
+      } else {
+        setDataLoading(loading);
+      }
+    },
+    clearData: () => {
+      setDataSource([]);
+      setCurrentData([]);
+    },
+    getCurrentPage: () => {
+      return pageNum;
+    },
+    getcurrentData: () => {
+      return currentData;
+    },
+  }));
+  return (
+    <DynamicTableLoader
+      {...props}
+      setDataLoading={setDataLoading}
+      dataLoading={dataLoading}
+      dataSource={dataSource}
+      total={total}
+      currentData={currentData}
+      setCurrentData={setCurrentData}
+      pageNum={pageNum}
+      setPageNum={setPageNum}
+      pageSize={pageSize}
+    />
+  );
+});
+export default DynamicTable as any;

package/lib/h5public/src/components/factory/src/DynamicTable/loader.ts

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

package/lib/h5public/src/components/factory/src/DynamicTable/types/contentStyle.d.ts

@@ -0,0 +1,41 @@
+interface Page {
+  pageId: string;
+  pagePath: string;
+  currentPageVersionId: string;
+  searchParams?: any;
+}
+interface Modal {
+  pageId: string;
+  pagePath: string;
+  currentPageVersionId: string;
+  compStates?: any;
+}
+
+export interface FuncCode {
+  code: string;
+  originCode: string;
+}
+
+type DataBindType = FuncCode | string | undefined;
+
+export interface ContentClick {
+  content?: DataBindType;
+  clickType?: string;
+  page?: Page;
+  modal?: Modal;
+  openType?: string;
+  fileIds?: DataBindType;
+  filename?: DataBindType;
+  previewType?: string;
+  downloadUrl?: DataBindType;
+}
+
+export interface ContentStyle extends ContentClick {
+  formatStyle: number;
+  contentType: string;
+  fontColor: string;
+  borderColor: string;
+  backgroundColor: string;
+  modalWidth?: number;
+  modalHeight?: number;
+}

package/lib/h5public/src/components/factory/src/DynamicTable/utils/constant.ts

@@ -0,0 +1,74 @@
+export const SET_ROW_ALL_CELL_BACKGROUND_COLOR = 1; // 设置整行单元格颜色(背景+字体)
+export const SET_ROW_SPECIAL_CELL_BACKGROUND_COLOR = 2; // 设置符合条件行的指定单元格颜色(背景+字体)
+export const SET_ROW_ALL_CELL_CONTENT_STYLE = 3; // 设置整行单元格内容样式
+export const SET_ROW_SPECIAL_CELL_CONTENT_STYLE = 4; // 设置符合条件行的指定单元格内容样式
+
+export const ROW_CELL_FORMAT_STYLE_MAP = {
+  [SET_ROW_ALL_CELL_BACKGROUND_COLOR]: '设置整行单元格颜色',
+  [SET_ROW_SPECIAL_CELL_BACKGROUND_COLOR]: '设置符合条件行的指定单元格颜色',
+  [SET_ROW_ALL_CELL_CONTENT_STYLE]: '设置整行单元格内容样式',
+  [SET_ROW_SPECIAL_CELL_CONTENT_STYLE]: '设置符合条件行的指定单元格内容样式',
+};
+
+export const PURE_COLOUR_FILL = 'pureColourFill';
+export const POINT_TAG = 'pointTag';
+export const GHOST_TAG = 'ghostTag';
+export const FADE_COLOUR_TAG = 'fadeColourTag';
+export const PURE_COLOUR_TAG = 'pureColourTag';
+export const HYPER_LINK = 'hyperlink';
+export const PROGRESS_BAR = 'progressBar';
+
+export const ROW_CELL_CONTENT_STYLE_MAP = {
+  [PURE_COLOUR_FILL]: '纯色填充',
+  [POINT_TAG]: '圆点样式',
+  [GHOST_TAG]: '描边标签',
+  [FADE_COLOUR_TAG]: '方角标签',
+  [PURE_COLOUR_TAG]: '纯色标签',
+  [HYPER_LINK]: '超链接',
+};
+
+export const RELATION_OR = 'or';
+export const RELATION_AND = 'add'; // 历史因素，存量数据里都是 add，估计输错了
+export const OPERATOR_EQUAL = '=';
+export const OPERATOR_NOT_EQUAL = '!=';
+export const OPERATOR_GREATER_THAN = '>';
+export const OPERATOR_LESS_THAN = '<';
+export const OPERATOR_INCLUDE = 'include';
+export const OPERATOR_NOT_INCLUDE = 'notInclude';
+export const OPERATOR_STARTS_WITH = 'startsWith';
+export const OPERATOR_ENDS_WITH = 'endsWith';
+export const OPERATOR_NULL = 'null';
+export const OPERATOR_NOT_NULL = 'notNull';
+
+export const RELATION_MAP = {
+  [RELATION_OR]: '或',
+  [RELATION_AND]: '且',
+};
+
+export const OPERATOR_MAP = {
+  [OPERATOR_EQUAL]: '等于',
+  [OPERATOR_NOT_EQUAL]: '不等于',
+  [OPERATOR_GREATER_THAN]: '大于',
+  [OPERATOR_LESS_THAN]: '小于',
+  [OPERATOR_INCLUDE]: '包含',
+  [OPERATOR_NOT_INCLUDE]: '不包含',
+  [OPERATOR_STARTS_WITH]: '开头为',
+  [OPERATOR_ENDS_WITH]: '结尾为',
+  [OPERATOR_NULL]: '为空',
+  [OPERATOR_NOT_NULL]: '非空',
+};
+
+export const BODY_CELL_MODE_ED = 'editor';
+
+export const PAGE_JUMP = 'pageJump';
+export const OPEN_MODAL = 'openModal';
+export const DOWNLOAD_FILE = 'downloadFile';
+export const PREVIEW_FILE = 'previewFile';
+export const CUSTOM = 'custom';
+export const PREVIEW_POP_UP = 'popUp';
+export const PREVIEW_NEW_TAB = 'newTab';
+export const ROUTE_PUSH = 'push';
+export const ROUTE_REPLACE = 'replace';
+
+export const EDIT_COMPONENT_STOP_PROPAGATION_CLS =
+  'table-edit-component-stop-propagation';

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

@@ -0,0 +1,16 @@
+import { FilterItems, FilterProps } from '@lingxiteam/antd-mobile-plus';
+import { AppForwardRef } from '../BasicComponents';
+
+interface FilterItemsProps extends FilterProps {
+  className?: string;
+}
+
+const MyFilterItems = AppForwardRef<FilterItemsProps>((props, ref) => {
+  return (
+    <div className={`use-app-filteritems ${props.className}`}>
+      <FilterItems {...props} />
+    </div>
+  );
+});
+
+export default MyFilterItems as any;

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

@@ -0,0 +1,11 @@
+import { Flex } from '@lingxiteam/antd-mobile-plus';
+import { AppForwardRef } from '../BasicComponents';
+
+export interface MyFlexProps {}
+
+const MyFlex = AppForwardRef<MyFlexProps>((props, ref) => {
+  const { ...restProps } = props;
+  return <Flex {...restProps} />;
+});
+
+export default MyFlex;

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

@@ -0,0 +1,105 @@
+import { DataItem, Grid, GridProps } from '@lingxiteam/antd-mobile-plus';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { 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;
+
+  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,
+  ) => {
+    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],
+        })),
+      );
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    setData: (data: any[]) => {
+      configCarouselDataIcon(data);
+    },
+    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>
+  );
+});
+
+export default MyGrid;