@lingxiteam/ebe-utils 0.3.20 → 0.3.22

package/lib/public/src/components/pcfactory/src/LXPieChart/index.less

@@ -0,0 +1,6 @@
+
+@prefixCls: lXPieChart;
+
+.@{prefixCls} {
+
+}

package/lib/public/src/components/pcfactory/src/LXPieChart/index.tsx

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

package/lib/public/src/components/pcfactory/src/LXPieChart/loader.tsx

@@ -0,0 +1,12 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const LoadableLXRadarChart = Loadable({
+  loader: async () =>
+    (await import(
+      /* webpackChunkName: 'pcFactory-LXPieChart' */ './LXPieChart'
+    )) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default LoadableLXRadarChart;

package/lib/public/src/components/pcfactory/src/LXRadarChart/LXRadarChat.tsx

@@ -0,0 +1,25 @@
+import { LXChart } from '@lingxiteam/charts-common';
+import { LingXiFC } from '@lingxiteam/types';
+import { useHiddenStyle } from '../utils';
+import './index.less';
+import LXRadarChartPorps from './PropsType';
+
+// const prefixCls = 'lXRadarChart';
+
+const LXRadarChart: LingXiFC<LXRadarChartPorps> = (props, ref) => {
+  const { style, visible = true, className } = props;
+  const finalStyle = useHiddenStyle(visible, style);
+
+  return (
+    <LXChart
+      style={finalStyle}
+      className={className}
+      configProps={props}
+      isEditMode={false}
+      isMobile={false}
+      chartType="Radar"
+    />
+  );
+};
+
+export default LXRadarChart;

package/lib/public/src/components/pcfactory/src/LXRadarChart/PropsType.ts

@@ -0,0 +1,9 @@
+/* eslint-disable semi */
+/* eslint-disable no-extra-semi */
+import { RadarChartPorps } from '@lingxiteam/charts-common';
+
+export default interface LXRadarChartPorps extends RadarChartPorps {
+  visible?: boolean;
+  className?: string;
+  style?: React.CSSProperties; // 样式
+}

package/lib/public/src/components/pcfactory/src/LXRadarChart/index.less

@@ -0,0 +1,7 @@
+
+@prefixCls: lXRadarChart;
+
+.@{prefixCls} {
+  width: 100%;
+  height: 500px;
+}

package/lib/public/src/components/pcfactory/src/LXRadarChart/index.tsx

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

package/lib/public/src/components/pcfactory/src/LXRadarChart/loader.tsx

@@ -0,0 +1,12 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const LoadableLXRadarChart = Loadable({
+  loader: async () =>
+    (await import(
+      /* webpackChunkName: 'pcFactory-LXRadarChart' */ './LXRadarChat'
+    )) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default LoadableLXRadarChart;

package/lib/public/src/components/pcfactory/src/Layout/index.tsx

@@ -0,0 +1,130 @@
+import { LingXiFC } from '@lingxiteam/types';
+import React, { useMemo } from 'react';
+import { useHiddenStyle } from '../utils';
+import { findItemsSumThanNum, pxToNum } from './utils';
+
+export interface LayoutProps {
+  children: any;
+  style: React.CSSProperties;
+  layoutOptions?: any;
+  visible: boolean;
+}
+
+const Layout: LingXiFC<LayoutProps> = (props) => {
+  const {
+    children,
+    style,
+    layoutOptions,
+    visible = true,
+    ...restProps
+  } = props;
+
+  const hiddenStyle = useHiddenStyle(visible);
+  const myStyle: React.CSSProperties = useMemo(() => {
+    const oldDataFlag = style.display === 'grid'; // 旧数据
+    const oldGridAutoRows = style?.gridAutoRows === 'column' ? 'column' : 'row'; // grid其他属性在 flex布局下不支持，兼容旧数据
+    if (oldDataFlag) {
+      return {
+        ...style,
+        display: 'flex', // 旧数据都改为flex展示
+        flexWrap: 'wrap',
+        flexDirection: oldGridAutoRows,
+        gap: '0px', // 旧数据当中的列间距需要清除，flex布局改到每个item内边距
+        ...hiddenStyle,
+      };
+    }
+    return { ...style, flexWrap: 'wrap', gap: '0px', ...hiddenStyle }; // IE不支持gap属性，所以通过margin、padding来实现列、行间距
+  }, [style, hiddenStyle]);
+  const myChildren = useMemo(() => {
+    const { colSpace, grid, colSpan, rowSpace } = layoutOptions || {};
+    if (Array.isArray(children) && children.length > 0) {
+      const curColSpace = pxToNum(colSpace) / 2;
+      if (colSpan) {
+        const targetList = colSpan.split(':');
+        const curGrid = parseInt(grid, 10);
+        const rowList = findItemsSumThanNum(targetList, curGrid);
+        let curChildren = 0;
+        return rowList.map((item, rowIndex) => {
+          curChildren += item.length;
+          return (
+            <>
+              {item.map((col, colIndex) => {
+                const span = parseInt(col, 10);
+                const itemCol = span > curGrid ? curGrid : span;
+                // 目前布局容器提供的是12、20栅格
+                const targetCol = (itemCol / curGrid) * 100;
+                const childIndex = curChildren - item.length + colIndex;
+                const targetChild = children[childIndex];
+                if (targetChild) {
+                  const renderChildren = {
+                    ...targetChild,
+                    props: {
+                      ...targetChild?.props,
+                      canDrag: false,
+                      style: {
+                        ...targetChild?.props?.style,
+                        maxWidth: '100%', // // 一级的普通容器用户会自定义，超过最大的会影响栅格布局，和UI确定最大宽度就为100%
+                      },
+                    },
+                  };
+                  return (
+                    <div
+                      style={{
+                        width: `${targetCol}%`,
+                        paddingLeft: colIndex === 0 ? 0 : `${curColSpace}px`,
+                        paddingRight:
+                          colIndex === item.length - 1 ? 0 : `${curColSpace}px`,
+                        marginTop: rowIndex === 0 ? 0 : rowSpace,
+                      }}
+                    >
+                      {renderChildren}
+                    </div>
+                  );
+                }
+                return null;
+              })}
+            </>
+          );
+        });
+      }
+      const targetChild = children[0]; // 列比例删除为空时，默认是第一个容器
+      const renderChildren = {
+        ...targetChild,
+        props: {
+          ...targetChild?.props,
+          canDrag: false,
+          style: {
+            ...targetChild?.props?.style,
+            maxWidth: '100%', // 一级的普通容器用户会自定义，超过最大的会影响栅格布局，和UI确定最大宽度就为100%
+          },
+        },
+      };
+      return (
+        <div
+          style={{
+            width: '20%',
+            paddingLeft: 0,
+            paddingRight: `${curColSpace}px`,
+          }}
+        >
+          {renderChildren}
+        </div>
+      );
+    }
+    return null;
+  }, [children, layoutOptions]);
+
+  return (
+    <>
+      {children ? (
+        <div {...restProps} style={myStyle}>
+          {myChildren}
+        </div>
+      ) : (
+        <div {...restProps} style={myStyle} />
+      )}
+    </>
+  );
+};
+
+export default Layout;

package/lib/public/src/components/pcfactory/src/Layout/utils.ts

@@ -0,0 +1,48 @@
+export const findItemsSumThanNum = (
+  array: string[] | any[],
+  targetSum: number,
+) => {
+  let next = 0;
+  const result: any[][] = [];
+  if (array && Array.isArray(array)) {
+    const newArray = array
+      .filter((item) => item)
+      .map((num) => parseInt(num, 10));
+    newArray.forEach((item) => {
+      if (next <= newArray.length && item) {
+        let sum = newArray[next];
+        let endIndex = next + 1;
+        if (sum >= targetSum) {
+          // 当前这个值超过最大值
+          result.push(newArray.slice(next, endIndex));
+          next = endIndex;
+        } else {
+          while (endIndex < newArray.length && sum < targetSum) {
+            sum += newArray[endIndex];
+            endIndex += 1;
+          }
+          if (sum === targetSum) {
+            // 刚好等于的情况，则要包含下一个位置
+            result.push(newArray.slice(next, endIndex));
+            next = endIndex;
+          } else if (sum > targetSum) {
+            // 超过最大值，则只要取前面的位置值
+            result.push(newArray.slice(next, endIndex - 1));
+            next = endIndex - 1;
+          } else if (endIndex === newArray.length) {
+            // 最后一个值如果是小于最大值，则自动分成一个数组
+            result.push(newArray.slice(next, endIndex));
+            next = endIndex;
+          }
+        }
+      }
+    });
+  }
+  return result;
+};
+export const pxToNum = (span: string) => {
+  if (span && span.indexOf('px')) {
+    return parseInt(span.split('px')[0], 10);
+  }
+  return 16;
+};

package/lib/public/src/components/pcfactory/src/LineChart/index.tsx

@@ -0,0 +1,3 @@
+import c from '../ReactECharts';
+
+export default c;

package/lib/public/src/components/pcfactory/src/Link/index.tsx

@@ -0,0 +1,117 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import classnames from 'classnames';
+import React, { useEffect, useImperativeHandle, useState } from 'react';
+import { useListenProps } from '../utils';
+import { getAfterString } from '../utils/common';
+
+export interface MyLinkProps {
+  visible?: boolean;
+  linkValue: string;
+  download?: string;
+  href: string;
+  compFileId?: string;
+  style: React.CSSProperties;
+  onClick: any;
+  className?: string;
+  getEngineApis?: any;
+  clickType?: 'open' | 'download';
+}
+
+const Link = LingxiForwardRef<any, MyLinkProps>((props, ref) => {
+  const {
+    visible = true,
+    linkValue,
+    download,
+    href,
+    style,
+    onClick,
+    className,
+    getEngineApis,
+    $$componentItem,
+    clickType,
+    ...restProps
+  } = props;
+
+  const [compFileId, setCompFileId] = useListenProps(props.compFileId);
+
+  const engineApis = getEngineApis?.() || {};
+
+  const [aHref, setAHref] = useState(href);
+  const isBindOnClick = typeof onClick === 'function';
+  // 配置了下载文件名download的走Blob形式，修复设置文件名download属性不生效
+  let isBlobDownload = false;
+  const specialProps: any = {
+    href: aHref,
+  };
+
+  if ((download && !clickType) || clickType === 'download') {
+    specialProps.download =
+      download || clickType === 'download' ? true : compFileId;
+    isBlobDownload = Boolean(aHref && download);
+  }
+
+  if (isBindOnClick || isBlobDownload) {
+    delete specialProps.href;
+  }
+
+  useImperativeHandle(ref, () => ({
+    setCompFileId(id: any) {
+      setCompFileId(id);
+    },
+  }));
+
+  useEffect(() => {
+    if (compFileId) {
+      setAHref(engineApis?.service?.getAppFileUrlById(compFileId));
+    } else {
+      setAHref(href);
+    }
+  }, [compFileId, href]);
+
+  const downloadFile = () => {
+    if (isBlobDownload) {
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', aHref, true);
+      xhr.responseType = 'blob';
+      xhr.setRequestHeader('Content-Type', 'application/json');
+      xhr.setRequestHeader('X-B-TARGET-ID', $$componentItem.pageId);
+      xhr.setRequestHeader('X-B-AUTH', '1');
+      xhr.setRequestHeader('APP-ID', $$componentItem.appId);
+      xhr.onload = () => {
+        const url = window.URL.createObjectURL(xhr.response);
+        const a = document.createElement('a');
+        const suffix = getAfterString(
+          xhr.getResponseHeader('Content-Disposition'),
+          '.',
+        );
+        a.href = url;
+        // @ts-ignore
+        a.download =
+          download?.indexOf('.') > -1 ? download : `${download}.${suffix}`;
+        a.click();
+      };
+      xhr.send();
+    }
+  };
+
+  // style为了兼容放在form下时lineHeight继承为0，导致无法正常显示
+  return visible ? (
+    <a
+      className={classnames('ued-link', className)}
+      {...restProps}
+      {...specialProps}
+      onClick={(e) => {
+        if (isBindOnClick) {
+          onClick(e);
+        } else if (specialProps.download) {
+          downloadFile();
+        }
+      }}
+      style={{ ...style, lineHeight: style.lineHeight || 'normal' }}
+    >
+      {linkValue}
+    </a>
+  ) : null;
+});
+
+export default Link;