@lingxiteam/ebe-utils 0.5.0 → 0.5.2

package/lib/public/src/components/pcfactory/src/StdUpload/uploadItem.less

@@ -0,0 +1,64 @@
+.std-upload-item {
+  border: 1px solid #e5e5e5;
+  border-radius: 2px;
+  height: 100%;
+  margin: 0;
+  padding: 8px;
+  position: relative;
+  font-size: 14px;
+  cursor: pointer;
+  &:hover {
+    background: transparent;
+  }
+
+  &:hover .std-upload-item-info::before {
+    opacity: 1;
+  }
+
+  &:hover .std-upload-item-info-actions {
+    opacity: 1!important;
+  }
+
+  &-info {
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    transition: background-color .3s;
+    &:hover {
+      background: rgba(28, 36, 46, .04);
+    }
+    &::before {
+      background-color: rgba(0,0,0,.5);
+      content: " ";
+      height: 100%;
+      opacity: 0;
+      position: absolute;
+      transition: all .3s;
+      width: 100%;
+      z-index: 1;
+    }
+
+    &-icon {
+      width: 100%;
+      height: 100%;
+    }
+
+    &-actions {
+      left: 50%;
+      opacity: 0;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      transition: all .3s;
+      white-space: nowrap;
+      z-index: 10;
+      .ued-stdUpload-item-action-icon {
+        font-size: 14px;
+        opacity: 1;
+        display: inline-block;
+        width: 24px;
+      }
+    }
+  }
+}

package/lib/public/src/components/pcfactory/src/Steps/constant/checkcircle.tsx

@@ -0,0 +1,29 @@
+export default (props: any) => {
+  return (
+    <svg
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g id="CheckCircle" clipPath="url(#clip0_2704_29331)">
+        <g id="Vector">
+          <path d="M15.0061 6.4502H13.9592C13.7315 6.4502 13.515 6.55957 13.3811 6.74707L9.87214 11.6131L8.28286 9.40778C8.14893 9.22252 7.93464 9.11091 7.70473 9.11091H6.65786C6.51277 9.11091 6.42795 9.27609 6.51277 9.39439L9.29402 13.2515C9.35972 13.3432 9.44634 13.418 9.54668 13.4695C9.64703 13.5211 9.75822 13.5479 9.87103 13.5479C9.98384 13.5479 10.095 13.5211 10.1954 13.4695C10.2957 13.418 10.3823 13.3432 10.448 13.2515L15.1489 6.73368C15.236 6.61537 15.1512 6.4502 15.0061 6.4502Z" />
+          <path d="M10.832 0C5.30971 0 0.832031 4.47768 0.832031 10C0.832031 15.5223 5.30971 20 10.832 20C16.3544 20 20.832 15.5223 20.832 10C20.832 4.47768 16.3544 0 10.832 0ZM10.832 18.3036C6.24721 18.3036 2.52846 14.5848 2.52846 10C2.52846 5.41518 6.24721 1.69643 10.832 1.69643C15.4169 1.69643 19.1356 5.41518 19.1356 10C19.1356 14.5848 15.4169 18.3036 10.832 18.3036Z" />
+        </g>
+      </g>
+      <defs>
+        <clipPath id="clip0_2704_29331">
+          <rect
+            width="20"
+            height="20"
+            fill="white"
+            transform="translate(0.832031)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/lib/public/src/components/pcfactory/src/Steps/constant/index.ts

@@ -0,0 +1,2 @@
+export { default as CheckCircle } from './checkcircle';
+export { default as Vector } from './vector';

package/lib/public/src/components/pcfactory/src/Steps/constant/vector.tsx

@@ -0,0 +1,13 @@
+export default (props: any) => {
+  return (
+    <svg
+      height="20"
+      viewBox="0 0 21 20"
+      width="21"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="m10.5 0c-2.82737.074349-5.18227 1.05169-7.0647 2.93203-1.88244 1.88034-2.860868 4.24004-2.9353 7.07907.074432 2.8243 1.05286 5.1765 2.9353 7.0569 1.88243 1.8803 4.23733 2.8577 7.0647 2.932 2.8422-.0743 5.2046-1.0517 7.087-2.932 1.8824-1.8804 2.8534-4.2326 2.913-7.0569-.0596-2.83903-1.0306-5.19873-2.913-7.07907s-4.2448-2.857681-7.087-2.93203zm0 18.6846c-2.45534-.0744-4.5015-.9254-6.13847-2.5532-1.63698-1.6276-2.48519-3.6677-2.54463-6.1203.05957-2.46742.90778-4.51501 2.54463-6.14274 1.63684-1.6276 3.683-2.47865 6.13847-2.55313 2.4553.07435 4.5014.9254 6.1383 2.55313 1.637 1.6276 2.4852 3.67519 2.5448 6.14274-.0596 2.4526-.9078 4.4927-2.5448 6.1203-1.6369 1.6278-3.683 2.4788-6.1383 2.5532zm-7.67847-8.6735c0 1.3825.33853 2.6571 1.01558 3.8239.67706 1.1669 1.61828 2.0996 2.82365 2.7982 1.20538.6986 2.48513 1.0479 3.83924 1.0479 1.3541 0 2.6339-.3493 3.8392-1.0479 1.2054-.6986 2.1466-1.6313 2.8237-2.7982.677-1.167 1.0156-2.4454 1.0156-3.8352 0-1.38984-.3386-2.66822-1.0156-3.83515-.6771-1.1668-1.6183-2.09955-2.8237-2.79824-1.2053-.6987-2.4851-1.04805-3.8392-1.04805-1.35411 0-2.63386.34935-3.83924 1.04805-1.20537.69869-2.14659 1.63144-2.82365 2.79824-.67705 1.16693-1.01558 2.44902-1.01558 3.84625z" />
+    </svg>
+  );
+};

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

@@ -0,0 +1,343 @@
+import { Icon } from '@lingxiteam/icons';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Steps } from 'antd';
+import classNames from 'classnames';
+import { useEffect, useImperativeHandle, useState } from 'react';
+import FactoryIcon from '../Icon';
+import { useListenProps } from '../utils';
+import { useLocale } from '../utils/hooks/useLocale';
+import { CheckCircle, Vector } from './constant';
+
+export interface MyStepsProps {
+  visible: boolean;
+  stepsOptions: any | any[];
+  defaultStepsOptions: any;
+  valName: string;
+  staticService: any;
+  dataSource?: any;
+  options?: any;
+  current?: any;
+  onValueRelease?: any;
+  onChange?: any;
+  alias: any;
+  labelPlacement: 'horizontal' | 'vertical';
+  stepStyle: 'number' | 'icon' | 'dot';
+  size: 'small' | 'default';
+  iconSetting: IconSettingItem[];
+}
+
+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 engineApis = props?.getEngineApis?.();
+  const { getLocale } = useLocale(engineApis);
+
+  const {
+    defaultStepsOptions,
+    staticService,
+    visible = true,
+    dataSource,
+    options,
+    onValueRelease,
+    onChange,
+    $$componentItem,
+    getEngineApis,
+    stepsOptions,
+    labelPlacement,
+    stepStyle,
+    size,
+    iconSetting = getDefaultIconSetting(getLocale),
+    alias = {},
+    ...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 || {};
+
+  const [current, setCurrent] = useListenProps(props.current);
+  const [innerDataSource, setInnerDataSource] = useState<any[]>([]);
+
+  useEffect(() => {
+    // 数据绑定
+    if (Array.isArray(dataSource)) {
+      // 绑定数据源
+      setInnerDataSource(dataSource);
+      setCurrent(
+        props.current ||
+          dataSource.findIndex((i) => i[statusAlias] === 'process') ||
+          0,
+      );
+    } else if (stepsOptions && Array.isArray(stepsOptions)) {
+      // 步骤设置
+      setCurrent(
+        props.current ||
+          stepsOptions.findIndex((i) => i[statusAlias] === 'process') ||
+          0,
+      );
+      setInnerDataSource(stepsOptions);
+    }
+  }, [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)) {
+        setInnerDataSource(options);
+      }
+    },
+    get current() {
+      return +current;
+    },
+    setCurrent(_current: any) {
+      onCurrentChange(+_current);
+    },
+    setStepByOptions(
+      options: {
+        step: string;
+        status: 'wait' | 'process' | 'finish' | 'error';
+      }[],
+    ) {
+      const newData = innerDataSource.map((i, index) => {
+        const item = options.find(
+          (j) => j.step === i[idAlias] || +j.step === index,
+        );
+        if (item && item.status) {
+          i[statusAlias] = item.status;
+        }
+        return i;
+      });
+      setInnerDataSource(newData);
+    },
+  }));
+
+  /**
+   * 步骤切换
+   */
+  const onCurrentChange = (
+    index: number,
+    dataSource: any = innerDataSource,
+  ) => {
+    setCurrent(index);
+    const newData = dataSource.map((item: any, i: number) => {
+      if (i === index) {
+        return {
+          ...item,
+          [statusAlias]: 'process',
+        };
+      }
+      if (i < index) {
+        return {
+          ...item,
+          [statusAlias]: 'finish',
+        };
+      }
+      return {
+        ...item,
+        [statusAlias]: item[statusAlias] === 'error' ? 'error' : 'wait',
+      };
+    });
+    setInnerDataSource(newData);
+  };
+
+  return visible ? (
+    <Steps
+      {...restProps}
+      labelPlacement={stepStyle === 'dot' ? 'vertical' : labelPlacement} // 点状标签位置只能在下方
+      current={current}
+      onChange={(c) => {
+        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;
+});
+
+export default MySteps;