@lingxiteam/ebe-utils 0.5.10 → 0.6.1

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

@@ -1,8 +1,8 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
+import React, { useState, useEffect, useImperativeHandle } from 'react';
+import { getAfterString } from '../utils/common';
 import classnames from 'classnames';
-import React, { useEffect, useImperativeHandle, useState } from 'react';
 import { useListenProps } from '../utils';
-import { getAfterString } from '../utils/common';
+import { LingxiForwardRef } from '@lingxiteam/types';
 
 export interface MyLinkProps {
   visible?: boolean;
@@ -18,7 +18,19 @@ export interface MyLinkProps {
 }
 
 const Link = LingxiForwardRef<any, MyLinkProps>((props, ref) => {
-  const { visible = true, linkValue, download, href, style, onClick, className, getEngineApis, $$componentItem, clickType, ...restProps } = props;
+  const {
+    visible = true,
+    linkValue,
+    download,
+    href,
+    style,
+    onClick,
+    className,
+    getEngineApis,
+    $$componentItem,
+    clickType,
+    ...restProps
+  } = props;
 
   const [compFileId, setCompFileId] = useListenProps(props.compFileId);
 
@@ -67,7 +79,7 @@ const Link = LingxiForwardRef<any, MyLinkProps>((props, ref) => {
       // 添加自定义头部(在info.js写入)
       const { lxRequestHeaders } = window as any;
       if (lxRequestHeaders) {
-        Object.keys(lxRequestHeaders).forEach(header => {
+        Object.keys(lxRequestHeaders).forEach((header) => {
           xhr.setRequestHeader(header, lxRequestHeaders[header]); // 设置请求头参数
         });
       }
@@ -90,7 +102,7 @@ const Link = LingxiForwardRef<any, MyLinkProps>((props, ref) => {
       className={classnames('ued-link', className)}
       {...restProps}
       {...specialProps}
-      onClick={e => {
+      onClick={(e) => {
         if (isBindOnClick) {
           onClick(e);
         } else if (specialProps.download) {

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import LXPieChartPorps from './PropsType';
+import { LiquidfillChart } from '@lingxiteam/charts-common';
+import { LingXiFC } from '@lingxiteam/types';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import { useHiddenStyle } from '../utils';
+import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
+import { useLocale } from '../utils/hooks/useLocale';
+
+const LXPieChart: LingXiFC<LXPieChartPorps> = (props, ref) => {
+  const { style, visible = true, className, backgroundType, getEngineApis, $$componentItem, ...restProps } = props;
+  const finalStyle = useHiddenStyle(visible, style);
+  const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis: getEngineApis?.(), appId: $$componentItem?.appId, mode: 'engine' });
+  const engineApis = getEngineApis?.();
+
+  const { getLocale } = useLocale(engineApis);
+  const {
+    sandBoxSafeRun,
+  } = engineApis || {};
+
+  const funcExpExecute = useFuncExpExecute(sandBoxSafeRun as any, getLocale);
+
+  return (
+    <LiquidfillChart
+      style={{ ...backgroundStyle, ...(finalStyle || {}) }}
+      className={className}
+      configProps={{
+        ...restProps,
+        backgroundType,
+      }}
+      isEditMode={false}
+      isMobile={false}
+      funcExpExecute={funcExpExecute}
+      sandBoxSafeRun={sandBoxSafeRun}
+      chartType="Liquidfill"
+    />
+  );
+};
+
+export default LXPieChart;

package/lib/pcpublic/src/components/pcfactory/src/Liquidfill/PropsType.ts

@@ -0,0 +1,12 @@
+/* eslint-disable semi */
+import type { EngineApisType } from '@lingxiteam/types';
+import { LiquidfillProps } from '@lingxiteam/charts-common';
+
+export default interface LXLiquidfillProps extends LiquidfillProps {
+  visible?: boolean;
+  className?: string;
+  style?: React.CSSProperties; // 样式
+  getEngineApis?: () => EngineApisType;
+  backgroundType?: any;
+// eslint-disable-next-line no-extra-semi
+};

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

@@ -0,0 +1,12 @@
+import React, { useImperativeHandle } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import LiquidfillLoader from './loader';
+import LiquidfillProps from './PropsType';
+
+const Liquidfill = LingxiForwardRef<unknown, LiquidfillProps>((props, ref) => {
+  useImperativeHandle(ref, () => ({ }));
+
+  return <LiquidfillLoader {...props} />;
+});
+
+export default Liquidfill;

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

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

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

@@ -1,11 +1,18 @@
-import { Col, Row } from 'antd';
+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  forwardRef,
+  useMemo,
+} from 'react';
 import classNames from 'classnames';
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
+import { Row, Col } from 'antd';
 import { IconCheckSvg, IconNormalCheckSvg } from '../utils/common';
 import useBackgroundStyle from '../View/useBackgroundStyle';
-import IdleView from './IdleView';
+import IdleContainer from '../utils/IdleContainer';
 
-const basicStyle = { backgroundColor: '#fff' };
+
+const basicStyle = { };
 export interface WrapperProps {
   children: React.ReactElement;
 }
@@ -112,10 +119,29 @@ const CheckBox = (item: {
   getAppFileUrlByFileCode?: (name: string) => string;
   isFormCompat: boolean;
 }) => {
-  const { children, selectImg, normalImg, checked, itemStyle, onChange, onClick, getAppFileUrlByFileCode, isFormCompat } = item;
+  const {
+    children,
+    selectImg,
+    normalImg,
+    checked,
+    itemStyle,
+    onChange,
+    onClick,
+    getAppFileUrlByFileCode,
+    isFormCompat,
+  } = item;
 
   return (
-    <div style={itemStyle} className={classNames(`${loopListCls}-blockSelect`, `${loopListCls}-showIcon`)} onClick={onClick}>
+    <div
+      style={itemStyle}
+      className={classNames(
+        `${loopListCls}-blockSelect`,
+        `${loopListCls}-showIcon`,
+        {
+          [`${loopListCls}-checked`]: checked,
+        })}
+      onClick={onClick}
+    >
       <div onClick={() => onChange(item)}>{renderIcon({ checked, selectImg, normalImg, getAppFileUrlByFileCode })}</div>
       <div
         onClick={() => onChange(item)}
@@ -199,9 +225,7 @@ const EditorComp = (props: {
     <Col {...colProps} className={className}>
       {render}
     </Col>
-  ) : (
-    render
-  );
+  ) : render;
 };
 
 const DisabledComps = (props: {
@@ -214,10 +238,25 @@ const DisabledComps = (props: {
   gridMode: boolean;
   isFormCompat: boolean;
 }) => {
-  const { children, index, itemStyle, colProps, className, gridMode, isFormCompat } = props || {};
+  const {
+    children,
+    index,
+    itemStyle,
+    colProps,
+    className,
+    gridMode,
+    isFormCompat,
+  } = props || {};
   const item = children?.props?.$props;
   const render = (
-    <NoCheckBox index={index} {...item} itemStyle={itemStyle} disabled onClick={props.onClick} isFormCompat={isFormCompat}>
+    <NoCheckBox
+      index={index}
+      {...item}
+      itemStyle={itemStyle}
+      disabled
+      onClick={props.onClick}
+      isFormCompat={isFormCompat}
+    >
       {children}
     </NoCheckBox>
   );
@@ -226,9 +265,7 @@ const DisabledComps = (props: {
     <Col {...colProps} className={className}>
       {render}
     </Col>
-  ) : (
-    render
-  );
+  ) : render;
 };
 
 const MyGrid = (props: MyLoopList) => {
@@ -245,7 +282,7 @@ const MyGrid = (props: MyLoopList) => {
     hspace = 0,
     style,
     mediaLayout,
-    onChange: uOnChange = (e: any, datas: any[]) => {},
+    onChange: uOnChange = (e: any, datas: any[]) => { },
     fixedWidth = false,
     span,
     isEditor = true,
@@ -267,21 +304,13 @@ const MyGrid = (props: MyLoopList) => {
 
   const engineApis = getEngineApis?.() || {};
 
-  const {
-    service: { getAppFileUrlByFileCode },
-    compatConfig,
-  } = engineApis;
+  const { service: { getAppFileUrlByFileCode }, compatConfig } = engineApis;
 
   const isChecked: boolean = mode !== 1;
   const isMultiple: boolean = mode === 3;
 
   // const [values, setValues] = useState(defaultValue);
-  const { backgroundStyle } = useBackgroundStyle({
-    engineApis,
-    backgroundType,
-    appId,
-    mode: 'engine',
-  });
+  const { backgroundStyle } = useBackgroundStyle({ engineApis, backgroundType, appId, mode: 'engine' });
   // useEffect(() => {
   //   if (value !== undefined) {
   //     if (form && form.setFieldsValue) {
@@ -291,12 +320,11 @@ const MyGrid = (props: MyLoopList) => {
   //   }
   // }, [value]);
 
+
   const getLoopDataByKeys = (keys: any[]) => {
-    return Array.isArray(keys)
-      ? keys.map(id => {
-        return props?.gridData?.find(data => data[valueKey] === id);
-      })
-      : [];
+    return Array.isArray(keys) ? keys.map((id) => {
+      return props?.gridData?.find(data => data[valueKey] === id);
+    }) : [];
   };
 
   const onChange = (restItem: Record<string, any>, index: any) => {
@@ -350,7 +378,7 @@ const MyGrid = (props: MyLoopList) => {
       }
       return p;
     },
-    [mediaLayout, span, fixedWidth]
+    [mediaLayout, span, fixedWidth],
   );
 
   // 循环列表配置key
@@ -362,76 +390,75 @@ const MyGrid = (props: MyLoopList) => {
   const { MemoLoopItem, renderer, getLoopItemExtraProps } = MemoRenderer;
 
   return (
-    <Row gutter={[vspace, hspace]} style={{ ...backgroundStyle, ...style }} className={className}>
-      {Array.isArray(gridData) &&
-        gridData.map((item, index) => {
-          const restItem = item || {};
-          const checked = getChecked(restItem, index);
-          const itemStyle = !isEditor ? basicStyle : getItemStyle(checked);
-          const gridViewIndex = restItem[valueKey] || `${props.compId}_${index}`;
-          const onClick = () => onClickLoopItem?.(restItem[valueKey], restItem, index);
-
-          const renderProps = {
-            itemKey,
-            indexKey,
+    <Row gutter={[vspace, hspace]} style={{ ...backgroundStyle, ...style }} className={classNames(className, `${loopListCls}-row`)}>
+      {Array.isArray(gridData) && gridData.map((item, index) => {
+        const restItem = item || {};
+        const checked = getChecked(restItem, index);
+        const itemStyle = !isEditor ? basicStyle : getItemStyle(checked);
+        const gridViewIndex = restItem[valueKey] || `${props.compId}_${index}`;
+        const onClick = () => onClickLoopItem?.(restItem[valueKey], restItem, index);
+
+        const renderProps = {
+          itemKey,
+          indexKey,
+          item,
+          i: index,
+          __render__: props.__render__,
+          renderer,
+          itemId: gridViewIndex,
+          compId: $$componentItem.uid,
+          context: {
             item,
             i: index,
-            __render__: props.__render__,
-            renderer,
-            itemId: gridViewIndex,
-            compId: $$componentItem.uid,
-            context: {
-              item,
-              i: index,
-            },
-            ...getLoopItemExtraProps?.(item, index),
-          };
-          return (
-            <React.Fragment key={gridViewIndex}>
-              {!props.disabled ? (
-                <WrapperEditorComp>
-                  <EditorComp
-                    colProps={getColProps(restItem, index)}
-                    itemStyle={itemStyle}
-                    valueKey={valueKey}
-                    key={restItem[valueKey]}
-                    selectImg={selectImg}
-                    normalImg={normalImg}
-                    getAppFileUrlByFileCode={getAppFileUrlByFileCode}
-                    item={restItem}
-                    index={index}
-                    onChange={onChange}
-                    isChecked={isChecked}
-                    checked={checked}
-                    onClick={onClick}
-                    gridMode={gridMode}
-                    isFormCompat={compatConfig.isFormCompat}
-                  >
-                    <MemoLoopItem {...renderProps} />
-                    {/* {renderChildren(item, index)} */}
-                  </EditorComp>
-                </WrapperEditorComp>
-              ) : (
-                <WrapperDisableComps>
-                  <DisabledComps
-                    colProps={getColProps(restItem, index)}
-                    itemStyle={itemStyle}
-                    key={restItem[valueKey]}
-                    {...({ valueKey } as any)}
-                    item={restItem}
-                    index={index}
-                    checked={checked}
-                    onClick={onClick}
-                    gridMode={gridMode}
-                    isFormCompat={compatConfig.isFormCompat}
-                  >
-                    <MemoLoopItem {...renderProps} />
-                  </DisabledComps>
-                </WrapperDisableComps>
-              )}
-            </React.Fragment>
-          );
-        })}
+          },
+          ...getLoopItemExtraProps?.(item, index),
+        };
+        return (
+          <React.Fragment key={gridViewIndex}>
+            {!props.disabled ? (
+              <WrapperEditorComp>
+                <EditorComp
+                  colProps={getColProps(restItem, index)}
+                  itemStyle={itemStyle}
+                  valueKey={valueKey}
+                  key={restItem[valueKey]}
+                  selectImg={selectImg}
+                  normalImg={normalImg}
+                  getAppFileUrlByFileCode={getAppFileUrlByFileCode}
+                  item={restItem}
+                  index={index}
+                  onChange={onChange}
+                  isChecked={isChecked}
+                  checked={checked}
+                  onClick={onClick}
+                  gridMode={gridMode}
+                  isFormCompat={compatConfig.isFormCompat}
+                >
+                  <MemoLoopItem {...renderProps} />
+                  {/* {renderChildren(item, index)} */}
+                </EditorComp>
+              </WrapperEditorComp>
+            ) : (
+              <WrapperDisableComps>
+                <DisabledComps
+                  colProps={getColProps(restItem, index)}
+                  itemStyle={itemStyle}
+                  key={restItem[valueKey]}
+                  {...{ valueKey } as any}
+                  item={restItem}
+                  index={index}
+                  checked={checked}
+                  onClick={onClick}
+                  gridMode={gridMode}
+                  isFormCompat={compatConfig.isFormCompat}
+                >
+                  <MemoLoopItem {...renderProps} />
+                </DisabledComps>
+              </WrapperDisableComps>
+            )}
+          </React.Fragment>
+        );
+      })}
     </Row>
   );
 };
@@ -451,7 +478,7 @@ const SyncLoopList = forwardRef((props: any, ref) => {
     const list: any = [];
     const idx: number[] = [];
     if (Array.isArray(value)) {
-      value.forEach(key => {
+      value.forEach((key) => {
         props.gridData?.forEach((d: Record<string, any>, i: any) => {
           if (typeof d === 'object' ? d[valueKey] === key : i === key) {
             list.push(d);
@@ -463,15 +490,18 @@ const SyncLoopList = forwardRef((props: any, ref) => {
     return [list, idx];
   };
 
-  useImperativeHandle(ref, () => ({
-    getValues: () => {
-      const [list, idx] = getDataAndIndex();
-      return [value, list, idx];
-    },
-  }));
+  useImperativeHandle(
+    ref,
+    () => ({
+      getValues: () => {
+        const [list, idx] = getDataAndIndex();
+        return [value, list, idx];
+      },
+    })
+  );
 
   return (
-    <IdleView>
+    <IdleContainer>
       <MyGrid
         {...props}
         value={(value ?? defaultValue) || []}
@@ -482,7 +512,7 @@ const SyncLoopList = forwardRef((props: any, ref) => {
           }
         }}
       />
-    </IdleView>
+    </IdleContainer>
   );
 });