@lingxiteam/ebe-utils 0.5.11 → 0.6.1

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

@@ -1,12 +1,22 @@
-import { Icon } from '@lingxiteam/icons';
+import React, { useState, useEffect, useImperativeHandle, CSSProperties } from 'react';
+import { StepsProps } from 'antd';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import { Steps } from 'antd';
-import classNames from 'classnames';
-import React, { useEffect, useImperativeHandle, useState } from 'react';
-import FactoryIcon from '../Icon';
 import { useListenProps } from '../utils';
+import useBackgroundStyle from '../View/useBackgroundStyle';
 import { useLocale } from '../utils/hooks/useLocale';
-import { CheckCircle, Vector } from './constant';
+import useCommonProps from './useCommonProps';
+import StepComponent, {
+  StepStyle,
+  StepSize,
+  StepLabelPlacement,
+  StepTemplate,
+  StepStatus,
+  IconSettingItem,
+  StepAlias,
+  prefixCls,
+} from './StepComponent';
+import { ArrowStepItemProps } from './ArrowStepItem';
+import classNames from 'classnames';
 
 export interface MyStepsProps {
   visible: boolean;
@@ -19,52 +29,45 @@ export interface MyStepsProps {
   current?: any;
   onValueRelease?: any;
   onChange?: any;
-  alias: any;
-  labelPlacement: 'horizontal' | 'vertical';
-  stepStyle: 'number' | 'icon' | 'dot';
-  size: 'small' | 'default';
+  alias: Partial<StepAlias>;
+  labelPlacement: StepLabelPlacement;
+  stepStyle: StepStyle;
+  size: StepSize;
   iconSetting: IconSettingItem[];
   onClick?: (value: number, obj: any) => void;
+  backgroundType?: any;
+  style: CSSProperties;
+  stepSpace?: number | string;
+  direction?: StepsProps['direction'];
+  template?: StepTemplate;
 }
 
-interface IconSettingItem {
-  label: string;
-  value: 'wait' | 'process' | 'finish' | 'error';
-  isUsePrimary?: boolean; // 是否应用主题
-  icon?: any; // 图标信息
-  color?: string; // 颜色
-}
-const getDefaultIconSetting = (getLocale: any) =>
-  [
-    {
-      label: getLocale?.('Steps.wait'),
-      value: 'wait',
-    },
-    {
-      label: getLocale?.('Steps.process'),
-      value: 'process',
-    },
-    {
-      label: getLocale?.('Steps.finish'),
-      value: 'finish',
-    },
-    {
-      label: getLocale?.('Steps.error'),
-      value: 'error',
-    },
-  ] as IconSettingItem[];
-const prefixCls = 'ued-step-wrap';
-const MySteps = LingxiForwardRef<any, MyStepsProps>((props, ref) => {
+const getDefaultIconSetting = (getLocale: any) => [
+  {
+    label: getLocale?.('Steps.wait'),
+    value: 'wait' as StepStatus,
+  },
+  {
+    label: getLocale?.('Steps.process'),
+    value: 'process' as StepStatus,
+  },
+  {
+    label: getLocale?.('Steps.finish'),
+    value: 'finish' as StepStatus,
+  },
+  {
+    label: getLocale?.('Steps.error'),
+    value: 'error' as StepStatus,
+  },
+] as IconSettingItem[];
+
+const MySteps = LingxiForwardRef<any, MyStepsProps & Pick<ArrowStepItemProps, 'arrowStyle' | 'stepStyle'>>((props, ref) => {
   const engineApis = props?.getEngineApis?.();
   const { getLocale } = useLocale(engineApis);
 
   const {
-    defaultStepsOptions,
-    staticService,
     visible = true,
     dataSource,
-    options,
-    onValueRelease,
     onChange,
     $$componentItem,
     getEngineApis,
@@ -75,18 +78,24 @@ const MySteps = LingxiForwardRef<any, MyStepsProps>((props, ref) => {
     iconSetting = getDefaultIconSetting(getLocale),
     alias = {},
     onClick,
+    backgroundType,
+    style,
+    arrowStyle,
+    stepSpace,
+    className,
+    template = 'default',
     ...restProps
   } = props;
+
   const {
-    icon: iconAlias = 'icon', // 图标别名
-    description: descriptionAlias = 'description', // 描述别名
-    disabled: disabledAlias = 'disabled', // 禁用别名
-    status: statusAlias = 'status', // 状态别名
-    subTitle: subTitleAlias = 'subTitle', // 副标题别名
-    title: titleAlias = 'title', // 标题别名
-    id: idAlias = 'id', // 唯一ID别名
-  } = alias || {};
+    disabled: disabledAlias = 'disabled',
+    status: statusAlias = 'status',
+    id: idAlias = 'id',
+  } = alias;
 
+  const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis: getEngineApis?.(), appId: $$componentItem?.appId, mode: 'engine' });
+  const { getCurrentColor, finalDirection } = useCommonProps(props);
+  
   const [current, setCurrent] = useListenProps(props.current);
   const [innerDataSource, setInnerDataSource] = useState<any[]>([]);
 
@@ -103,130 +112,6 @@ const MySteps = LingxiForwardRef<any, MyStepsProps>((props, ref) => {
     }
   }, [JSON.stringify(stepsOptions), JSON.stringify(dataSource)]);
 
-  // useEffect(() => {
-  //   if (current === undefined) {
-  //     // 设置初始步骤值
-  //     if (onValueRelease) {
-  //       onValueRelease(0);
-  //     }
-  //   }
-  // }, [current]);
-  /**
-   * 默认图标的渲染，当用户未设置图标时，使用默认图标，当用户设置了图标设置后，默认图标更改为用户的图标设置
-   * @param item
-   */
-  const renderDefaultIcon = (item: any) => {
-    const iconItem = iconSetting.find((i: any) => i.value === item[statusAlias]);
-    const currentColor = iconItem?.isUsePrimary ? undefined : item.color || iconItem?.color;
-    const style = {
-      fontSize: size === 'default' ? '18px' : '16px',
-      color: currentColor,
-    };
-    if (iconItem?.icon) {
-      return (
-        <FactoryIcon
-          mode="custom"
-          style={style}
-          iconItems={[{ ...iconItem }]} // 图标优先展示iconItems的颜色，但是这里需要将用户设置的颜色优先级提高
-          getEngineApis={getEngineApis}
-          engineApis={{ service: getEngineApis?.() }}
-          $$componentItem={$$componentItem}
-          className=""
-        />
-      );
-    }
-    return (
-      <>
-        <Icon style={style} component={item[statusAlias] === 'finish' ? CheckCircle : Vector} />
-      </>
-    );
-  };
-
-  /**
-   * 步骤条图标渲染
-   * @param item
-   * @param index
-   * @returns
-   */
-  const renderStepIcon = (item: any, index: number) => {
-    const iconValue = item[iconAlias];
-    const iconItem = iconSetting.find((i: any) => i.value === item[statusAlias]);
-    const currentColor = iconItem?.isUsePrimary ? undefined : item.color || iconItem?.color;
-    // 存量无状态的默认状态
-    const status = item[statusAlias] || (index === 0 ? 'process' : 'wait');
-    switch (stepStyle) {
-      case 'number':
-        return (
-          <div
-            className={classNames({
-              [`${prefixCls}-numberBox`]: true,
-              [`${prefixCls}-numberBox-${size}`]: true,
-              [`${prefixCls}-${status}`]: true,
-            })}
-            style={{
-              borderColor: currentColor,
-              color: status === 'process' ? '' : currentColor,
-              background: status === 'process' ? currentColor : '',
-            }}
-          >
-            {index + 1}
-          </div>
-        );
-      case 'icon': {
-        const style = {
-          fontSize: size === 'default' ? '18px' : '16px',
-          color: item.color,
-        };
-        // 如果数据没有图标内容，返回默认的图标配置
-        if (!iconValue || iconValue.isIconFont === false || Object.keys(iconValue || {}).length === 0) {
-          return renderDefaultIcon(item);
-        }
-        // 字符串代表使用fileID或者url展示图标
-        if (typeof iconValue === 'string') {
-          // 判断数字字符串
-          item[iconAlias] = {
-            iconFile: iconValue.startsWith('http')
-              ? {
-                fileHttp: iconValue,
-                fileSubType: 'ICON_IMAGE',
-              }
-              : {
-                fileCode: iconValue,
-                fileSubType: 'ICON_IMAGE',
-              },
-          };
-        }
-        // 否则为自定义配置的
-        return (
-          <FactoryIcon
-            style={style}
-            mode="custom"
-            iconItems={[item]}
-            getEngineApis={getEngineApis}
-            engineApis={{ service: getEngineApis?.() }}
-            $$componentItem={$$componentItem}
-            className=""
-          />
-        );
-      }
-
-      case 'dot':
-        return (
-          <div
-            className={classNames({
-              [`${prefixCls}-dot`]: true,
-              [`${prefixCls}-dot-${size}`]: true,
-              [`${prefixCls}-dot-${status}`]: true,
-            })}
-            style={{ background: currentColor }}
-          />
-        );
-
-      default:
-        return null;
-    }
-  };
-
   useImperativeHandle(ref, () => ({
     setStepsOptions(options: any[]) {
       if (Array.isArray(options)) {
@@ -239,14 +124,9 @@ const MySteps = LingxiForwardRef<any, MyStepsProps>((props, ref) => {
     setCurrent(_current: any) {
       onCurrentChange(+_current);
     },
-    setStepByOptions(
-      options: {
-        step: string;
-        status: 'wait' | 'process' | 'finish' | 'error';
-      }[]
-    ) {
+    setStepByOptions(options: { step: string; status: StepStatus; }[]) {
       const newData = innerDataSource.map((i, index) => {
-        const item = options.find(j => j.step === i[idAlias] || +j.step === index);
+        const item = options.find((j) => j.step === i[idAlias] || +j.step === index);
         if (item && item.status) {
           i[statusAlias] = item.status;
         }
@@ -256,65 +136,71 @@ const MySteps = LingxiForwardRef<any, MyStepsProps>((props, ref) => {
     },
   }));
 
-  /**
-   * 步骤切换
-   */
   const onCurrentChange = (index: number, dataSource: any = innerDataSource) => {
     setCurrent(index);
     const newData = dataSource.map((item: any, i: number) => {
       if (i === index) {
         return {
           ...item,
-          [statusAlias]: 'process',
+          [statusAlias]: 'process' as StepStatus,
         };
       }
       if (i < index) {
         return {
           ...item,
-          [statusAlias]: 'finish',
+          [statusAlias]: 'finish' as StepStatus,
         };
       }
       return {
         ...item,
-        [statusAlias]: item[statusAlias] === 'error' ? 'error' : 'wait',
+        [statusAlias]: item[statusAlias] === 'error' ? 'error' as StepStatus : 'wait' as StepStatus,
       };
     });
     setInnerDataSource(newData);
   };
 
-  return visible ? (
-    <Steps
+  const handleChange = (c: number) => {
+    // 如果配置了点击事件，优先执行点击事件，不更改步骤状态，如果没有点击事件，有值变化回掉事件，更改步骤状态
+    if (typeof onClick === 'function' && !innerDataSource[c]?.[disabledAlias]) {
+      onClick(c, innerDataSource[c]);
+      // 如果有配置值变化回掉事件，也执行值变化回掉事件，但是不切换步骤状态
+      if (typeof onChange === 'function') {
+        onChange(c, innerDataSource[c]);
+      }
+    } else if (onChange && !innerDataSource[c]?.[disabledAlias]) {
+      onChange(c, innerDataSource[c]);
+      onCurrentChange(c);
+    }
+  };
+
+  if (!visible) return null;
+
+  return (
+    <StepComponent
+      size={size}
       {...restProps}
-      labelPlacement={stepStyle === 'dot' ? 'vertical' : labelPlacement} // 点状标签位置只能在下方
+      dataSource={innerDataSource}
+      stepStyle={stepStyle}
+      labelPlacement={labelPlacement}
+      direction={finalDirection}
+      iconSetting={iconSetting}
+      template={template}
+      arrowStyle={arrowStyle}
+      stepSpace={stepSpace}
+      backgroundStyle={backgroundStyle}
+      style={style}
+      getCurrentColor={getCurrentColor}
+      alias={alias as StepAlias}
+      getEngineApis={getEngineApis}
+      $$componentItem={$$componentItem}
+      onChange={handleChange}
       current={current}
-      onChange={c => {
-        // 如果配置了点击事件，优先执行点击事件，不更改步骤状态，如果没有点击事件，有值变化回掉事件，更改步骤状态
-        if (typeof onClick === 'function' && !innerDataSource[c]?.[disabledAlias]) {
-          onClick(c, innerDataSource[c]);
-          // 如果有配置值变化回掉事件，也执行值变化回掉事件，但是不切换步骤状态
-          if (typeof onChange === 'function') {
-            onChange(c, innerDataSource[c]);
-          }
-        } else if (onChange && !innerDataSource[c]?.[disabledAlias]) {
-          onChange(c, innerDataSource[c]);
-          onCurrentChange(c);
-        }
-      }}
-    >
-      {(innerDataSource || []).map((opt: any, i: number) => (
-        <Steps.Step
-          status={opt[statusAlias]}
-          title={opt[titleAlias]}
-          subTitle={opt[subTitleAlias]}
-          description={opt[descriptionAlias]}
-          disabled={!!opt[disabledAlias]}
-          key={opt[idAlias]}
-          style={{ ...(opt[disabledAlias] ? { cursor: 'not-allowed' } : {}) }}
-          icon={<div className={`${prefixCls}-iconItem-${size}`}>{renderStepIcon(opt, i)}</div>}
-        />
-      ))}
-    </Steps>
-  ) : null;
+      className={classNames({
+        [className]: true,
+        [prefixCls]: true,
+      })}
+    />
+  );
 });
 
 export default MySteps;

package/lib/pcpublic/src/components/pcfactory/src/Steps/useCommonProps.ts

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { MyStepsProps } from '.';
+import { usePersistFn } from '../utils/ahooks';
+
+const useCommonProps = (props: Pick<MyStepsProps, 'iconSetting' | 'direction' | 'stepStyle'>) => {
+  const { iconSetting, stepStyle, direction } = props;
+  const iconSettingMap = useMemo(() => {
+    const statusIconMap:Record<string, any> = {};
+    (iconSetting || []).forEach((i: any) => {
+      statusIconMap[i.value] = i;
+    });
+    return statusIconMap;
+  }, [iconSetting]);
+    
+  const getCurrentColor = usePersistFn((item: {color?: string; [key: string]: any}, alias: string) => {
+    const iconItem = iconSettingMap[item[alias]];
+    const currentColor = iconItem?.isUsePrimary ? undefined : item.color || iconItem?.color;
+    return currentColor;
+  });
+
+  const finalDirection = useMemo(() => {
+    if (stepStyle === 'arrow') {
+      return 'horizontal';
+    }
+    return direction;
+  }, [direction, stepStyle]);
+
+  return {
+    getCurrentColor,
+    finalDirection,
+  };
+};
+
+export default useCommonProps;