@lingxiteam/ebe-utils 0.5.11 → 0.6.2

package/lib/pcpublic/src/components/pcfactory/src/QuickEntry/QuickEntryComponent.tsx

@@ -0,0 +1,191 @@
+import React, { CSSProperties, useEffect, useRef, useState } from 'react';
+import { MoreOutlined } from '@lingxiteam/icons';
+import FactoryIconED from '../Icon/IconED';
+import FactoryIcon from '../Icon';
+import { QuickEntryProps } from './QuickEntry';
+import classNames from 'classnames';
+import { MIN_WIDTH, useOverflowItems } from './hooks/useOverflowItems';
+import MoreModal from './MoreModal';
+
+export const prefixCls = 'ued-quickEntry';
+
+export const ItemComponent: React.FC<{
+  item: Required<QuickEntryProps>['entryOptions'][number];
+  isED?: boolean;
+  getEdEngineApi?: () => any;
+  $$componentItem?: any;
+  getEngineApis?: () => any;
+  onClick?: Function;
+  style?: CSSProperties;
+}> = (props) => {
+  const {
+    isED,
+    getEdEngineApi,
+    $$componentItem,
+    getEngineApis,
+    onClick,
+    item,
+    style,
+  } = props;
+
+  const renderFactoryIcon = (c: any) => {
+    if (isED) {
+      return <FactoryIconED
+        {...c}
+        getEdEngineApi={getEdEngineApi}
+        $$componentItem={$$componentItem}
+      />;
+    }
+    return <FactoryIcon
+      {...c}
+      getEngineApis={getEngineApis}
+      engineApis={{ service: getEngineApis?.() }}
+      $$componentItem={$$componentItem}
+    />;
+  };
+
+  return (
+    <div
+      className={`${prefixCls}-item`}
+      key={item.key}
+      onClick={() => {
+        if (onClick instanceof Function) {
+          onClick(item.key, item.url, item);
+        }
+      }}
+      style={style}
+    >
+      <div
+        className={`${prefixCls}-item-icon`}
+        style={{
+          backgroundColor: item.color,
+        }}
+      >
+        {renderFactoryIcon(item)}
+      </div>
+      <div className={`${prefixCls}-item-title`}>{item.title}</div>
+    </div>);
+};
+
+const QuickEntryComponent: React.FC<QuickEntryProps & {
+  isED?: boolean;
+  getEdEngineApi?: () => any;
+  $$componentItem?: any;
+  getEngineApis?: () => any;
+  className?: string;
+  outWraper?: React.RefObject<HTMLElement>;
+}> = (props) => {
+  const {
+    isED,
+    getEdEngineApi,
+    $$componentItem,
+    getEngineApis,
+    className,
+    style,
+    entryOptions,
+    title,
+    type,
+    onClick,
+    outWraper,
+  } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLDivElement>(null);
+  const [moreModalVisible, setMoreModalVisible] = useState<boolean>(false);
+
+  const { width, finalItems } = useOverflowItems({
+    containerRef,
+    // 如果是配置态，则使用外部传入的outWraper，因为画布中的节点需要挂在外面，否则使用wrapRef
+    wrapRef: isED ? outWraper! : wrapRef,
+    headerRef,
+    list: entryOptions || [],
+  });
+
+  const { padding, paddingTop, paddingBottom, paddingLeft, paddingRight } = style || {};
+
+  const innerStyle = {
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+  };
+
+  const showModal = !isED && finalItems.length < (entryOptions || []).length;
+
+  useEffect(() => {
+    setMoreModalVisible(pre => {
+      if (!showModal && pre) {
+        // 需要隐藏查看更多时，如果为显式状态，则设置成隐藏
+        return false;
+      }
+      return pre;
+    });
+  }, [showModal]);
+
+  return (
+    <>
+      <div className={classNames(className, `${prefixCls}-${type}`)} style={style} ref={wrapRef}>
+        <div className={`${prefixCls}-title`} ref={headerRef}>{title}</div>
+        <div className={`${prefixCls}-content`} style={innerStyle} ref={containerRef}>
+          {(finalItems || []).map((item: any) => (
+            <ItemComponent
+              key={item.key}
+              item={item}
+              isED={isED}
+              getEdEngineApi={getEdEngineApi}
+              $$componentItem={$$componentItem}
+              getEngineApis={getEngineApis}
+              style={{
+                minWidth: MIN_WIDTH,
+                width,
+              }}
+              onClick={() => {
+                if (onClick instanceof Function) {
+                  onClick(item.url?.pagePath, item);
+                }
+              }}
+            />
+          ))}
+          {finalItems.length < (entryOptions || []).length ? (
+            <div
+              className={`${prefixCls}-item`}
+              key="moreIcon"
+              onClick={() => {
+                setMoreModalVisible(true);
+              }}
+              style={{
+                width,
+              }}
+            >
+              <div
+                className={classNames(`${prefixCls}-item-icon`, `${prefixCls}-item-icon-more`)}
+              >
+                <MoreOutlined rotate={90} />
+              </div>
+              <div
+                className={`${prefixCls}-item-title`}
+                
+              >查看更多
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+      {/* 如果配置态，则不显示更多弹窗 */}
+      {showModal ? (
+        <MoreModal
+          open={moreModalVisible}
+          title={title}
+          onCancel={() => setMoreModalVisible(false)}
+          items={(entryOptions || []).slice(finalItems.length, (entryOptions || []).length)}
+          getEngineApis={getEngineApis}
+          $$componentItem={$$componentItem}
+          onClick={onClick}
+        />) : null}
+    </>
+    
+  );
+};
+
+export default QuickEntryComponent;

package/lib/pcpublic/src/components/pcfactory/src/QuickEntry/hooks/useOverflowItems.ts

@@ -0,0 +1,190 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+interface UseOverflowItemsOptions {
+  containerRef: React.RefObject<HTMLElement>;
+  wrapRef: React.RefObject<HTMLElement>;
+  headerRef?: React.RefObject<HTMLElement>;
+  list: any[];
+}
+
+// 获取兼容的 requestAnimationFrame
+const getRequestAnimationFrame = () => {
+  return (
+    window.requestAnimationFrame ||
+    (window as any).msRequestAnimationFrame ||
+    (window as any).webkitRequestAnimationFrame ||
+    (window as any).mozRequestAnimationFrame ||
+    (window as any).oRequestAnimationFrame ||
+    function(callback: FrameRequestCallback) {
+      return window.setTimeout(callback, 1000 / 60);
+    }
+  );
+};
+
+// 获取兼容的 cancelAnimationFrame
+const getCancelAnimationFrame = () => {
+  return (
+    window.cancelAnimationFrame ||
+    (window as any).msCancelAnimationFrame ||
+    (window as any).webkitCancelAnimationFrame ||
+    (window as any).mozCancelAnimationFrame ||
+    (window as any).oCancelAnimationFrame ||
+    function(id: number) {
+      window.clearTimeout(id);
+    }
+  );
+};
+
+// 简单的 ResizeObserver polyfill
+const createResizeObserverPolyfill = (callback: () => void, element: HTMLElement) => {
+  let frameId: number;
+  let lastWidth: number;
+  let lastHeight: number;
+  const raf = getRequestAnimationFrame();
+  const caf = getCancelAnimationFrame();
+
+  const checkSize = () => {
+    if (!element) return;
+
+    const { width, height } = element.getBoundingClientRect();
+    if (width !== lastWidth || height !== lastHeight) {
+      lastWidth = width;
+      lastHeight = height;
+      callback();
+    }
+    frameId = raf(checkSize);
+  };
+
+  return {
+    observe: () => {
+      frameId = raf(checkSize);
+    },
+    disconnect: () => {
+      if (frameId) {
+        caf(frameId);
+      }
+    },
+  };
+};
+
+export const MIN_WIDTH = 160;
+
+/**
+ * 计算最小宽度是可以容纳的item数量
+ * @param width 容器内容宽度
+ * @param space 间隔
+ * @returns
+ */
+const computeRealWidth = (width: number, space: number) => {
+  // 从最大可能的number开始尝试
+  const maxNumber = Math.floor(width / MIN_WIDTH);
+  // 每行个数，最少一个
+  let finalNumber = 1;
+  let finalItemWidth = width;
+
+  // 遍历所有可能的number值
+  for (let number = maxNumber; number >= 1; number -= 1) {
+    // 根据方程求出itemWidth
+    const itemWidth = (width - space * (number - 1)) / number;
+    // 如果itemWidth在合理范围内,则找到解
+    if (itemWidth >= MIN_WIDTH) {
+      finalNumber = number;
+      finalItemWidth = Math.floor(itemWidth);
+      break;
+    }
+  }
+  return {
+    finalNumber,
+    finalItemWidth,
+  };
+};
+
+export const useOverflowItems = ({
+  containerRef,
+  wrapRef,
+  headerRef,
+  list,
+}: UseOverflowItemsOptions) => {
+  const observerRef = useRef<any>(null);
+  const [width, setWidth] = useState<number>();
+  // 可以展示的最大数量
+  const [maxNumber, setMaxNumber] = useState<number>(-1);
+
+  const checkWidthAndRowNumber = () => {
+    if (!containerRef.current) return;
+    const { width } = containerRef.current.getBoundingClientRect();
+    const { paddingLeft, paddingRight, columnGap, rowGap } = window.getComputedStyle(containerRef.current);
+    const paddingWidth = parseInt(paddingLeft, 10) + parseInt(paddingRight, 10);
+    const realWidth = (width - paddingWidth);
+    // 计算每一项实际宽度和每行展示数量
+    const { finalItemWidth, finalNumber } = computeRealWidth(realWidth, parseInt(columnGap, 10));
+    setWidth(finalItemWidth);
+    if (wrapRef?.current) {
+      const { height } = wrapRef.current.getBoundingClientRect();
+      const { height: headerHeight } = headerRef?.current?.getBoundingClientRect() || { height: 0 };
+      const { paddingTop, paddingBottom } = window.getComputedStyle(wrapRef.current);
+      // 获取item高度
+      const itemHeight = containerRef.current.firstElementChild?.getBoundingClientRect().height || 0;
+      const paddingHeight = parseInt(paddingTop, 10) + parseInt(paddingBottom, 10);
+      // 内容部分实际高度
+      const realHeight = height - headerHeight - paddingHeight;
+      // 行间距
+      const gapHeight = parseInt(rowGap, 10);
+
+      // 固定高度时最大行数
+      const maxLineValue = (realHeight + gapHeight) / (itemHeight + gapHeight);
+      const maxLineCeil = Math.ceil(maxLineValue);
+      const difference = (maxLineCeil - maxLineValue) * (itemHeight + gapHeight);
+      // 当高度差距小于0.3时，允许向上取整，否则需要向下取整
+      const maxLine = difference < 0.3 ? maxLineCeil : Math.floor(maxLineValue);
+      // 可以展示的最大数量，超出时在查看更多展示，最少展示一行
+      setMaxNumber(Math.max(1, maxLine) * finalNumber);
+    }
+  };
+
+  useEffect(() => {
+    if (!containerRef.current) return () => {};
+
+    const checkOverflow = () => {
+      const container = containerRef.current;
+      if (!container) return;
+      checkWidthAndRowNumber();
+    };
+
+    // 使用 ResizeObserver 或回退方案
+    if (typeof ResizeObserver !== 'undefined') {
+      observerRef.current = new ResizeObserver(checkOverflow);
+      observerRef.current.observe(wrapRef.current);
+    } else {
+      // IE11 回退方案
+      observerRef.current = createResizeObserverPolyfill(checkOverflow, wrapRef.current!);
+      observerRef.current.observe();
+    }
+
+    // 初始检查
+    checkOverflow();
+
+    // 清理函数
+    const cleanup = () => {
+      if (observerRef.current) {
+        if (typeof ResizeObserver !== 'undefined') {
+          observerRef.current.disconnect();
+        } else {
+          observerRef.current.disconnect();
+        }
+      }
+    };
+
+    return cleanup;
+  }, [wrapRef]);
+
+  // 如果最大数量大于列表长度，则返回全部列表，否则返回最大数量-1的列表，因为最后一个item是更多按钮
+  const finalItems = useMemo(() => {
+    return maxNumber >= list.length ? list : (list || []).slice(0, (maxNumber - 1));
+  }, [list, maxNumber]);
+
+  return {
+    width,
+    finalItems,
+  };
+};

package/lib/pcpublic/src/components/pcfactory/src/QuickEntry/index.tsx

@@ -0,0 +1,16 @@
+import React, { useImperativeHandle } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import QuickEntryComp, { QuickEntryProps } from './QuickEntry';
+
+
+const QuickEntry = LingxiForwardRef<any, QuickEntryProps>((props, ref) => {
+  useImperativeHandle(ref, () => ({}));
+  return (
+    <QuickEntryComp
+      {...props}
+    />
+  );
+});
+
+
+export default QuickEntry;

package/lib/pcpublic/src/components/pcfactory/src/QuillEditor/QuillEditor.tsx

@@ -1,10 +1,10 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
-import type { FormItemProps } from 'antd/lib/form';
-import classnames from 'classnames';
 import React, { useEffect, useMemo, useRef } from 'react';
+import type { FormItemProps } from 'antd/lib/form';
 import ReactQuill from 'react-quill';
-import 'react-quill/dist/quill.snow.css';
+import classnames from 'classnames';
 import useInitReactQuill from '../utils/hooks/useInitReactQuill';
+import 'react-quill/dist/quill.snow.css';
+import { LingxiForwardRef } from '@lingxiteam/types';
 
 export interface MyQuillEditorProps extends FormItemProps {
   visible?: boolean;
@@ -92,9 +92,7 @@ const BaseQuillEditor = React.forwardRef((props: BaseQuillEditorPropsType, ref)
     ia.forEach((i, index) => {
       ia[index] = bytes.charCodeAt(index);
     });
-    return new Blob([ia], {
-      type: imgData.split(',')[0].split(':')[1].split(';')[0],
-    });
+    return new Blob([ia], { type: imgData.split(',')[0].split(':')[1].split(';')[0] });
   };
 
   useEffect(() => {

package/lib/pcpublic/src/components/pcfactory/src/QuillEditor/index.tsx

@@ -1,12 +1,13 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
 import React, { useRef } from 'react';
-import { filterHtmlNode, FormFields, getFieldsProps, useCommonImperativeHandle } from '../utils';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import QuillEditorLoad from './loader';
+import { FormFields, filterHtmlNode, getFieldsProps, useCommonImperativeHandle } from '../utils';
 
 const QuillEditor = LingxiForwardRef<unknown, any>((props, ref) => {
   const gridViewRef = useRef<any>(null);
   const { disabled, required, readOnly, formFieldsRef, finalRules } = useCommonImperativeHandle(ref, props);
 
+
   return (
     <FormFields
       {...getFieldsProps(props)}

package/lib/pcpublic/src/components/pcfactory/src/QuillEditor/loader.ts

@@ -2,7 +2,7 @@ import Loadable from 'react-loadable';
 import { LoadingComponennt } from '../utils/LoaderHelper';
 
 const GanttLoader = Loadable({
-  loader: async () => (await import(/* webpackChunkName: 'pcFactory-QuillEditor' */ './QuillEditor')) as unknown as React.ComponentType<any>,
+  loader: async () => (await import/* webpackChunkName: 'pcFactory-QuillEditor' */('./QuillEditor')) as unknown as React.ComponentType<any>,
   loading: LoadingComponennt,
 });
 

package/lib/pcpublic/src/components/pcfactory/src/RadarChart/RadarChartHook.ts

@@ -4,9 +4,14 @@
 /* eslint-disable @typescript-eslint/no-for-in-array */
 /* eslint-disable no-underscore-dangle */
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { useLocale } from '../utils/hooks/useLocale';
 import type { ReactChartHookType } from './RadarChartType';
-import { defaultDataSource, defaultHint, defaultIndicatorDataSource, defaultRadarLevelHint } from './radarDefaultConfig';
+import {
+  defaultDataSource,
+  defaultHint,
+  defaultIndicatorDataSource,
+  defaultRadarLevelHint,
+} from './radarDefaultConfig';
+import { useLocale } from '../utils/hooks/useLocale';
 
 export const useRadarChartHook = (props: ReactChartHookType) => {
   const chartNode = useRef();
@@ -32,7 +37,8 @@ export const useRadarChartHook = (props: ReactChartHookType) => {
 
   const { getLocale } = useLocale(getEngineApis?.());
 
-  const isDynamicData = typeof indicatorDataSource === 'string' || typeof radarDataSource === 'string';
+  const isDynamicData =
+    typeof indicatorDataSource === 'string' || typeof radarDataSource === 'string';
   const getCurString = (propsString: string, defaultString: string) => {
     if (isDynamicData) {
       return defaultString;
@@ -123,7 +129,7 @@ export const useRadarChartHook = (props: ReactChartHookType) => {
   const radarData = useMemo(() => {
     return data.map((item: any) => {
       return {
-        value: _indicatorData.map(ind => {
+        value: _indicatorData.map((ind) => {
           const value = ind[indicatorKey] && item[ind[indicatorKey]];
           return value ?? 0;
         }),
@@ -152,7 +158,7 @@ export const useRadarChartHook = (props: ReactChartHookType) => {
   const chartOption = useMemo(() => {
     const radarGetLevelFunc = (val: number, hintArr: ReactChartHookType['radarLevelHint']) => {
       let _hintStr = '';
-      hintArr.forEach(item => {
+      hintArr.forEach((item) => {
         const max = item[radarMax];
         const min = item[radarMin];
         const description = item[radarDescription];
@@ -163,14 +169,16 @@ export const useRadarChartHook = (props: ReactChartHookType) => {
       return _hintStr;
     };
 
-    const indicator = _indicatorData.map(item => ({
+    const indicator = _indicatorData.map((item) => ({
       name: item[indicatorName],
       max: item[indicatorMax],
       min: item[indicatorMin],
     }));
     const level = radarGetLevelFunc(total, _radarLevelData);
     const hintText = `${hintNameValue}${level ?? ''}`;
-    const levelArr = _radarLevelData.map(item => `${item[radarDescription]}：${item[radarMin]} < x < ${item[radarMax]}`);
+    const levelArr = _radarLevelData.map(
+      (item) => `${item[radarDescription]}：${item[radarMin]} < x < ${item[radarMax]}`,
+    );
     if (indicator.length === 0) {
       return null;
     }

package/lib/pcpublic/src/components/pcfactory/src/RadarChart/RadarChartType.ts

@@ -30,6 +30,7 @@ export interface MyRadarEChartsEDProps {
   radarMax: string;
   radarMin: string;
   radarDescription: string;
+  backgroundType?: any;
 }
 
 export type ReactChartHookType = MyRadarEChartsEDProps & {

package/lib/pcpublic/src/components/pcfactory/src/RadarChart/RadarECharts.tsx

@@ -1,23 +1,29 @@
-import { LingXiFC } from '@lingxiteam/types';
-import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import React, { useImperativeHandle, useEffect, useLayoutEffect, useRef } from 'react';
+import * as echarts from 'echarts/core';
+import { bind, clear } from 'size-sensor';
+import {
+  LineChart,
+  BarChart,
+  PieChart,
+  RadarChart,
+} from 'echarts/charts';
 import {
-  // 数据集组件
-  DatasetComponent,
-  GridComponent,
-  LegendComponent,
   TitleComponent,
   TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  // 数据集组件
+  DatasetComponent,
   // 内置数据转换器组件 (filter, sort)
   TransformComponent,
 } from 'echarts/components';
-import * as echarts from 'echarts/core';
 import { LabelLayout, UniversalTransition } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
-import React, { useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
-import { bind, clear } from 'size-sensor';
-import { useHiddenStyle } from '../utils';
 import { useRadarChartHook } from './RadarChartHook';
 import type { MyRadarEChartsEDProps } from './RadarChartType';
+import { useHiddenStyle } from '../utils';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import { LingXiFC } from '@lingxiteam/types';
 
 // 注册必须的组件
 echarts.use([
@@ -36,11 +42,13 @@ echarts.use([
   RadarChart,
 ]);
 
-const RadarEChartsED: LingXiFC<MyRadarEChartsEDProps> = props => {
-  const { style = {}, visible = true, className = '' } = props;
+const RadarEChartsED: LingXiFC<MyRadarEChartsEDProps> = (props) => {
+  const { style = {}, visible = true, className = '', backgroundType, getEngineApis, $$componentItem } = props;
   const runningProps = { ...props, isRunningState: true };
   const { chartOption, chartNode, configMessage } = useRadarChartHook(runningProps);
   const finalStyle = useHiddenStyle(visible, style);
+  const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis: getEngineApis?.(), appId: $$componentItem?.appId, mode: 'engine' });
+  
   const chartRef = useRef<HTMLDivElement>(null);
   const chartNodeRef = useRef<echarts.EChartsType>();
   useImperativeHandle<any, any>(chartNode, () => ({
@@ -55,6 +63,7 @@ const RadarEChartsED: LingXiFC<MyRadarEChartsEDProps> = props => {
     }
   }, [chartOption]);
 
+  
   useLayoutEffect(() => {
     if (chartRef && chartRef.current) {
       chartNodeRef.current = echarts.init(chartRef.current);
@@ -72,7 +81,9 @@ const RadarEChartsED: LingXiFC<MyRadarEChartsEDProps> = props => {
   if (configMessage) {
     return <div>{configMessage}</div>;
   }
-  return <div data-compid={(props as any)?.['data-compid']} style={finalStyle} className={className} ref={chartRef} />;
+  return (
+    <div data-compid={(props as any)?.['data-compid']} style={{ ...backgroundStyle, ...(finalStyle || {}) }} className={className} ref={chartRef} />
+  );
 };
 
 export default RadarEChartsED;

package/lib/pcpublic/src/components/pcfactory/src/RadarChart/index.tsx

@@ -1,5 +1,5 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
 import React, { useImperativeHandle } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import RaderChartLoader from './loader';
 import type { MyRadarEChartsEDProps } from './RadarChartType';
 
@@ -7,6 +7,7 @@ const RaderChart = LingxiForwardRef<unknown, MyRadarEChartsEDProps>((props, ref)
   useImperativeHandle(ref, () => ({
     // 这里暴漏部分指令方法
     // 由于组件采用懒加载延迟执行组件，导致组件在未加载完成的时候已经执行了页面加载完成的生命周期，所以未来的指令方法不应放入懒加载中，避免页面加载完成时机无法调用指令。
+    
   }));
   return <RaderChartLoader {...props} />;
 });

package/lib/pcpublic/src/components/pcfactory/src/RadarChart/loader.tsx

@@ -2,7 +2,7 @@ import Loadable from 'react-loadable';
 import { LoadingComponennt } from '../utils/LoaderHelper';
 
 const RadarChartLoader = Loadable({
-  loader: async () => (await import(/* webpackChunkName: 'pcFactory-RadarECharts' */ './RadarECharts')) as unknown as React.ComponentType<any>,
+  loader: async () => (await import/* webpackChunkName: 'pcFactory-RadarECharts' */('./RadarECharts')) as unknown as React.ComponentType<any>,
   loading: LoadingComponennt,
 });