@lingxiteam/ebe-utils 0.0.9 → 0.0.10

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

@@ -0,0 +1,66 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React, { useMemo, useRef } from 'react';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+import useStyle from '../View/useStyle';
+import useLayout from './useLayout';
+
+export interface LayoutProps {
+  layoutOptions: any;
+  style?: React.CSSProperties;
+  src?: string;
+  visible: boolean;
+  fileCode?: string;
+  backgroundType: any;
+  onClick?: (e: any) => void;
+}
+
+const prefixCls = 'lcdp-factory-Layout';
+const Layout = LingxiForwardRef<unknown, LayoutProps>((props) => {
+  const {
+    backgroundType = {},
+    fileCode,
+    src,
+    $$componentItem,
+    visible,
+    getEngineApis,
+  } = props;
+
+  const { getAppFileUrlByFileCode } = getEngineApis();
+
+  const finalStyle = useHiddenStyle(visible);
+
+  const children = useLayout({
+    children: props.children,
+    layoutOptions: props.layoutOptions,
+  });
+
+  const imgSrc = useMemo(() => {
+    if (backgroundType?.image || fileCode) {
+      return getAppFileUrlByFileCode(backgroundType?.image || fileCode, {
+        appId: $$componentItem.appId,
+      });
+    }
+    return undefined;
+  }, [backgroundType, src, fileCode]);
+
+  const viewRef = useRef<HTMLDivElement>(null);
+  const style = useStyle(
+    {
+      ...props,
+      src: imgSrc,
+    },
+    viewRef,
+  );
+
+  return (
+    <div
+      ref={viewRef}
+      className={prefixCls}
+      style={{ ...style, ...finalStyle }}
+    >
+      {children}
+    </div>
+  );
+});
+
+export default Layout;

package/lib/h5public/src/components/factory/src/Layout/useLayout.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo } from 'react';
+import Row from './Row';
+
+interface LayoutOptions {
+  children: React.ReactNode;
+  layoutOptions: {
+    grid: number;
+    colSpan: string;
+    colSpace: string;
+    rowSpace: string;
+  };
+}
+
+const useLayout = (props: LayoutOptions) => {
+  const items = React.Children.toArray(props.children);
+  if (items.length === 0) {
+    return props.children;
+  }
+  const { layoutOptions } = props;
+  const { grid = 12, colSpan = '', colSpace, rowSpace } = layoutOptions || {};
+
+  /**
+   *
+   * 一段javascript算法。
+   * 以下有个目标数组。帮助目标数组划分二维数组，每个小数组之和不大于基数。
+   * 示例1：
+   * 输入：[12, 10, 1, 10, 9] 基数：12;
+   * 输出：[[12], [10, 1], [10], [9]];
+   *
+   * 示例2：
+   * 输入：[6, 6] 基数：12
+   * 输出：[[6, 6]]
+   */
+  const rowData = useMemo(() => {
+    const colSpanArr = colSpan.split(':').map((it) => Number(it ?? 0));
+
+    const base = Number(grid);
+    const rows: { span: number; index: number }[][] = [];
+    let cols: { span: number; index: number }[] = [];
+    let currentSum = 0;
+    for (let i = 0; i < colSpanArr.length; i += 1) {
+      const element = colSpanArr[i];
+
+      if (currentSum + element <= base) {
+        cols.push({ span: element, index: i });
+        currentSum += element;
+      } else {
+        rows.push(cols);
+        cols = [{ span: element, index: i }];
+        currentSum = element;
+      }
+    }
+
+    if (cols.length > 0) {
+      rows.push(cols);
+    }
+
+    return rows;
+  }, [grid, colSpan]);
+
+  return useMemo(() => {
+    return rowData.map((cols, index) => {
+      return (
+        <Row
+          key={`${index}`}
+          index={index}
+          gutter={[rowSpace, colSpace]}
+          cols={cols}
+          render={(item) => {
+            const { index } = item;
+            return items[index];
+          }}
+          base={grid}
+        />
+      );
+    });
+  }, [items, rowData]);
+};
+
+export default useLayout;

package/lib/h5public/src/components/factory/src/Layout/utils/index.ts

@@ -0,0 +1,18 @@
+// 求和
+export const sum = (numbers: { span: number }[] = []) =>
+  numbers.reduce((pre, current) => pre + current.span, 0);
+
+export const PRIVATE_SYMBOL = Symbol('privateSymbol');
+
+// 数据重组
+export const regroupNum = (
+  base: number,
+  numbers: { span: number; [key: symbol | string]: any }[] = [],
+) => {
+  const sumNumber = sum(numbers);
+  const target = numbers;
+  if (base > sumNumber) {
+    target.push({ span: base - sumNumber, [PRIVATE_SYMBOL]: true });
+  }
+  return target;
+};

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

@@ -0,0 +1,49 @@
+import { LevelView, LevelViewType } from '@lingxiteam/antd-mobile-plus';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React, { useMemo } from 'react';
+
+interface LevelViewStyle extends React.CSSProperties {
+  _component: any;
+}
+export interface MyLevelViewProps extends LevelViewType {
+  style: LevelViewStyle;
+  visible: boolean;
+}
+// 枚举定义， ’-‘ 前为dsl所配置样式名称，‘-’后面为组件内部实际所需的样式名称
+const enmu = {
+  titleStyle: ['titleColor-color', 'titleStyle-style', 'titleSize-fontSize'],
+  contentStyle: [
+    'selectBackgroundColor-selectBackground',
+    'selectColor-selectColor',
+    'fontSize-fontSize',
+    'selectStyle-style',
+  ],
+  btnStyle: ['btnStyle-style'],
+};
+const MyLevelView = LingxiForwardRef<any, MyLevelViewProps>((props, ref) => {
+  const { visible, style } = props;
+  const styleProps = useMemo(() => {
+    const myStyle = {} as any;
+    Object.keys(enmu).forEach((key) => {
+      let obj: any = {};
+      // @ts-ignore
+      enmu[key].forEach((i: string) => {
+        const objMap = i.split('-');
+        // @ts-ignore
+        const objValue = style[objMap[0]];
+        const objKey = objMap[1];
+        if (!objValue) return;
+        objKey === 'style'
+          ? (obj = { ...obj, ...objValue })
+          : (obj[objKey] = objValue);
+      });
+      myStyle[key] = obj;
+    });
+    return myStyle;
+  }, [style]);
+  return visible ? <LevelView {...props} {...styleProps} /> : <></>;
+});
+
+MyLevelView.displayName = 'LevelView';
+
+export default MyLevelView;

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

@@ -0,0 +1,83 @@
+import Line from '@lingxiteam/charts/es/Line';
+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 { MyLineProps } from './PropsType';
+
+const MyLine: LingXiFC<MyLineProps> = (props, ref) => {
+  const {
+    visible = true,
+    getEngineApis,
+    $$componentItem,
+    className,
+    style,
+    refData,
+    ...restProps
+  } = props;
+  const finalStyle = useHiddenStyle(visible, style);
+  // if (!visible) {
+  //   return null;
+  // }
+
+  const [state, setState] = useAsyncState({
+    data: props.data,
+    y: props.y,
+    x: props.x,
+  });
+
+  const { data: myData } = state;
+
+  const data = useJsonToParse(myData);
+  const { xFontSize, xColor, yFontSize, yColor } = props?.style;
+  const dataSource = useMemo(
+    () =>
+      data.map((i: any) => {
+        let y = i[state.y];
+        // eslint-disable-next-line radix
+        if (!isNaN(parseInt(y))) {
+          // eslint-disable-next-line radix
+          y = parseInt(y);
+        }
+        return {
+          ...i,
+          [state.y]: y,
+        };
+      }),
+    [JSON.stringify(data)],
+  );
+
+  const xStyle = useMemo(() => {
+    return { fontSize: xFontSize, fill: xColor };
+  }, [xFontSize, xColor]);
+  const yStyle = useMemo(() => {
+    return { fontSize: yFontSize, fill: yColor };
+  }, [yFontSize, yColor]);
+
+  const { width = '100%', height = '4.8rem' } = props.style;
+
+  useEffect(() => {
+    if (refData) {
+      setState(refData);
+    }
+  }, [refData]);
+
+  return (
+    <div style={finalStyle} className={className}>
+      <Line
+        {...restProps}
+        x={state.x}
+        y={state.y}
+        canvasSize={{ width, height }}
+        data={dataSource}
+        xStyle={xStyle}
+        yStyle={yStyle}
+      />
+    </div>
+  );
+};
+
+MyLine.displayName = 'Line';
+
+export default MyLine;

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

@@ -0,0 +1,10 @@
+import type { LineProps } from '@lingxiteam/charts/es/Line/PropsType';
+
+export interface MyLineProps extends LineProps {
+  visible: boolean;
+  data: any;
+  y: any;
+  style?: any;
+  className: string;
+  refData?: { data: any; x: any; y: any };
+}

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

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

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

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

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

@@ -0,0 +1,182 @@
+import { useEffect, useRef, useState } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Chart, Geometry, Legend, px2hd } from '@alitajs/f2';
+import Axis from '@lingxiteam/charts/es/components/Axis';
+import { LingXiFC } from '@lingxiteam/types';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+import { useJsonToParse } from '../utils/hooks/useJsonToParse';
+import { ColumnProps } from './PropsType';
+
+const LineColumn: LingXiFC<ColumnProps> = (props, ref) => {
+  const {
+    style,
+    data: myData = [],
+    x,
+    lineY,
+    columnY,
+    nameColumnY,
+    nameLineY,
+    areaColor = '',
+    colors = '',
+    className,
+    visible = true,
+    getEngineApis,
+    $$componentItem,
+    refData,
+    ...restProps
+  } = props;
+  const { getLocale } = getEngineApis?.() || {};
+  const { xColor, xFontSize, yColor, yFontSize } = style as any;
+  const colorsArray = colors.split(',');
+  const parseData = useJsonToParse(myData);
+  const finalStyle = useHiddenStyle(visible, style);
+  const dataSource = parseData.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;
+  });
+  const [data, setData] = useState(dataSource);
+
+  // useImperativeHandle(ref, () => ({
+  //   setChartData: (obj: any) => {
+  //     const { data } = obj;
+  //     data && setData(data);
+  //   },
+  // }));
+  useEffect(() => {
+    if (refData) {
+      setData(refData);
+    }
+  }, [refData]);
+
+  const chartRef = useRef<any>();
+  // 柱状配置
+  const mGeometryPropsInterval: any = {
+    type: 'interval',
+    position: `${x}*${columnY}`,
+    color: colorsArray[1] || '#FACC14',
+    size: px2hd(44),
+  };
+  // 点配置
+  const mGeometryPropsPoint: any = {
+    type: 'point',
+    position: `${x}*${lineY}`,
+    size: px2hd(6),
+    style: {
+      fill: colorsArray[0] || '#5687FB',
+      stroke: '#fff',
+      lineWidth: px2hd(4),
+      shadowColor: 'rgba(59,105,212,0.44)',
+      shadowBlur: 5,
+    },
+  };
+  // 面配置
+  const mGeometryPropsArea: any = {
+    type: 'area',
+    color: areaColor,
+    position: `${x}*${lineY}`,
+  };
+
+  const YAxisConfig = {
+    position: 'right',
+    label: {
+      fontSize: px2hd(yFontSize * 2),
+      fill: yColor,
+    },
+    labelOffset: px2hd(30),
+  };
+  const XAxisConfig = {
+    position: 'bottom',
+    label: {
+      fontSize: px2hd(xFontSize * 2),
+      fill: xColor,
+    },
+    labelOffset: px2hd(30),
+  };
+
+  const legendItems = [
+    {
+      name: nameLineY,
+      marker: {
+        symbol: 'square',
+        fill: colorsArray[1] || '#FACC14',
+        radius: px2hd(8),
+      },
+    },
+    {
+      name: nameColumnY,
+      marker: {
+        symbol: 'circle',
+        fill: colorsArray[0] || '#5687FB',
+        radius: px2hd(8),
+      },
+    },
+  ];
+
+  const LegendProps = {
+    custom: true,
+    align: 'right',
+    items: legendItems,
+  };
+  if (!data) {
+    return (
+      <p style={finalStyle}>{getLocale('Chart.configData', '请配置数据源')}</p>
+    );
+  }
+  return (
+    <div className={className}>
+      <Chart
+        height={500}
+        pixelRatio={window.devicePixelRatio}
+        ref={chartRef}
+        style={finalStyle}
+        data={data}
+        padding={[px2hd(120), px2hd(74), px2hd(60), px2hd(50)]}
+        // @ts-ignore
+        margin={[px2hd(120), px2hd(120), px2hd(60), px2hd(50)]}
+        {...restProps}
+      >
+        {/** @ts-ignore */}
+        <Legend
+          wordSpace={px2hd(10)}
+          nameStyle={{
+            fill: '#999999', // 文本的颜色
+            fontSize: px2hd(22), // 文本大小
+            textBaseline: 'middle', // 文本基准线，可取 top middle bottom，默认为middle
+            lineHeight: px2hd(34),
+          }}
+          valueStyle={{
+            fill: '#fff', // 文本的颜色
+            fontSize: px2hd(22), // 文本大小
+            textBaseline: 'middle', // 文本基准线，可取 top middle bottom，默认为middle
+            lineHeight: px2hd(34),
+          }}
+          itemWidth={px2hd(160)}
+          offsetX={px2hd(-20)}
+          offsetY={px2hd(20)}
+          {...LegendProps}
+        />
+        {/** @ts-ignore */}
+        <Axis field={lineY} {...YAxisConfig} />
+        {/** @ts-ignore */}
+        <Axis field={columnY} {...YAxisConfig} />
+        {/** @ts-ignore */}
+        <Axis field={x} {...XAxisConfig} />
+
+        <Geometry {...mGeometryPropsInterval} />
+        <Geometry {...mGeometryPropsPoint} />
+        <Geometry {...mGeometryPropsArea} />
+      </Chart>
+    </div>
+  );
+};
+
+export default LineColumn;

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

@@ -0,0 +1,57 @@
+import { ChartProps } from '@alitajs/f2/dist/Chart';
+import { CSSProperties } from 'react';
+
+export interface ColumnProps {
+  /**
+   * 图表展示数据
+   */
+  data: ChartProps['data'];
+
+  /**
+   * 对数据进行单属性过滤，比如展示数值加上单位
+   */
+  colDefs?: ChartProps['colDefs'];
+
+  /**
+   * 横坐标替代属性名称
+   */
+  x?: string;
+
+  /**
+   * 纵坐标 线 替代属性名称
+   */
+  lineY?: string;
+
+  /**
+   * 纵坐标 柱 替代属性名称
+   */
+  columnY?: string;
+
+  /**
+   * 自定义图表颜色
+   */
+  colors?: string;
+
+  /*
+   * style
+   */
+  style?: CSSProperties;
+  className: string;
+
+  /*
+   * Y轴标识名称
+   */
+  nameColumnY?: string;
+  nameLineY?: string;
+
+  /**
+   * 覆盖面颜色
+   */
+  areaColor?: string;
+
+  /**
+   * 是否展示
+   */
+  visible?: boolean;
+  refData?: any[];
+}

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

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

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

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

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

@@ -0,0 +1,24 @@
+@prefixCls: lcdp-loadmore;
+.@{prefixCls}-loadMore {
+  .adm-list-body {
+    border: none;
+    background-color: transparent;
+    &::before,
+    &::after {
+      display: none !important;
+    }
+  }
+  .@{prefixCls}-row {
+    display: flex;
+    flex-direction: row;
+    .@{prefixCls}-column {
+      flex: 1;
+      word-break: break-all;
+    }
+    .@{prefixCls}-columnPlaceholder {
+      flex: 1;
+      word-break: break-all;
+      opacity: 0;
+    }
+  }
+}