@lingxiteam/ebe-utils 0.3.20 → 0.3.21

package/lib/public/src/components/pcfactory/src/Select/selectUtils.ts

@@ -0,0 +1,257 @@
+export const CHECK_ALL_VALUE = 'LING_XI_CHECK_ALL';
+
+const typeFn: any = {
+  string: String,
+  number: Number,
+  boolean: Boolean,
+};
+
+/**
+ * 处理搜索逻辑
+ * @param input
+ * @param option
+ * @returns
+ */
+export const localFilterOption = (input: string = '', option: any) => {
+  // 本地支持value和label过滤
+  let valueFilter = false;
+  if (option?.value === CHECK_ALL_VALUE) {
+    // 存在全选项时，永远展示
+    return true;
+  }
+  if (option?.value && typeof option?.value === 'string') {
+    valueFilter = option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  }
+  if (option?.children && typeof option.children === 'string') {
+    return (
+      option?.children?.toLowerCase?.().indexOf(input.toLowerCase()) >= 0 ||
+      valueFilter
+    );
+  }
+
+  return (
+    option?.label?.toLowerCase?.().indexOf(input.toLowerCase()) >= 0 ||
+    valueFilter
+  );
+};
+
+// 判断data类型是不是是labelInValue格式
+export const isLabelInValue = (data: any) => {
+  if (Object.prototype.toString.call(data) === '[object Object]') {
+    if (
+      Object.keys(data).includes('label') &&
+      (Object.keys(data).includes('value') || Object.keys(data).includes('key'))
+    ) {
+      return true;
+    }
+  } else if (
+    Object.prototype.toString.call(data) === '[object Array]' &&
+    data.length
+  ) {
+    let isLabelInValueCount = 0;
+    data.forEach((v: any) => {
+      if (
+        Object.keys(v).includes('label') &&
+        (Object.keys(v).includes('value') || Object.keys(v).includes('key'))
+      ) {
+        isLabelInValueCount += 1;
+      }
+    });
+    return isLabelInValueCount === data.length;
+  }
+  return false;
+};
+// 处理传入的的value值
+export const handleFormValue = (value: any, mode?: string) => {
+  let val = value;
+  if (isLabelInValue(value)) {
+    // 如果是绑定的值value 有label或者value的存在 那么值变成[value] value （一般的场景是页面初始化的时候，值绑定表达式）
+    val = Array.isArray(value)
+      ? value.map((v: any) => v?.key || v?.value)
+      : value?.key || value?.value;
+  }
+  if (val !== undefined) {
+    // 如果是多选，值是,分割的字符串的数组
+    if (mode === 'multiple' && typeof value === 'string' && value.length > 0) {
+      val = value.split(',');
+    }
+  }
+
+  // 清空值时，val为null  antd组件会展示一个空白的选项
+  if (val !== undefined && !Array.isArray(val) && mode === 'multiple') {
+    val = [];
+  }
+  // 如果是下拉单项,空数组原样返回
+  if (Array.isArray(val) && mode !== 'multiple' && val.length > 0) {
+    val = val?.[0];
+  }
+  return val === null || val === '' ? null : val;
+};
+
+export const transformValueType = (v: any, curVal: any) => {
+  const realValueType = typeof (curVal ?? '');
+  if (typeFn[realValueType]) {
+    try {
+      return typeFn[realValueType](v);
+    } catch (error) {
+      return v;
+    }
+  }
+  return v;
+};
+
+export const getRules = (min?: number, max?: number, getLocale?: any) => {
+  if (!min && !max) {
+    return [];
+  }
+  const minMsg = [];
+  const maxMsg = [];
+  if (min) {
+    minMsg.push({
+      type: 'array',
+      min,
+      message: getLocale?.('CheckboxGroup.minRule', { min }),
+    });
+  }
+  if (max) {
+    maxMsg.push({
+      type: 'array',
+      max,
+      message: getLocale?.('CheckboxGroup.maxRule', { max }),
+    });
+  }
+  return [...minMsg, ...maxMsg];
+};
+// 获取选中数据
+export const getChangeSelectData = (
+  dataSource: any[],
+  val: string[] | Object,
+  mode?: string,
+) => {
+  const v = val;
+  if (mode === 'multiple') {
+    if (Array.isArray(v) && v.length) {
+      const sltData = dataSource.filter((c: any) =>
+        v.includes(c.value?.toString()),
+      );
+      return sltData;
+    }
+    return undefined;
+  }
+  const sltData = dataSource.find(
+    (c: any) => c.value?.toString() === v?.toString(),
+  );
+  return sltData ? [sltData] : undefined;
+};
+
+export const getSelectedAllData = (
+  checked: boolean,
+  dataSource: any[],
+  value: any[],
+  max?: number,
+) => {
+  let latestValue = [];
+  const filterDataMap: any = {};
+  // 获取当前数据的所有值
+  const filterData = dataSource.map((val: any) => {
+    filterDataMap[val?.value] = {
+      ...val,
+    };
+    return val?.value;
+  });
+  // 先过滤掉出搜索后隐藏的选中项，再判断是否全选来组装最终的数据
+  const hiddenValue: any[] = [];
+  value?.forEach((val: any) => {
+    if (!filterDataMap[val]) {
+      hiddenValue.push(val);
+    }
+  });
+  // 取消全选
+  if (!checked) {
+    // 仅保留过滤前的选中值
+    latestValue = hiddenValue;
+  } else {
+    // 全选当前值+过滤前的选中值
+    latestValue = hiddenValue.concat(filterData);
+    if (max) {
+      // 有最大可选值限制时全选只选中当前过滤数据基础下的最大数
+      const list: any[] = filterData.slice(0, max);
+      if (list.length < max) {
+        hiddenValue?.reverse()?.forEach((v: any, i: number) => {
+          if (i < max - list.length) {
+            list.unshift(v);
+          }
+        });
+      }
+      latestValue = list;
+    }
+  }
+  return latestValue;
+};
+
+// 获取当前列表数据下的全选状态
+export const checkIfSelectedAll = (
+  dataSource: any[],
+  value: any[],
+  filterValue: string = '',
+) => {
+  const localFilterData = dataSource.filter((d) =>
+    localFilterOption(filterValue, d),
+  );
+  if (localFilterData?.length && Array.isArray(value)) {
+    // 如果是多选，value肯定是字符串类型的数组
+    const checkData = localFilterData.filter((f: any) =>
+      value.includes(f.value),
+    );
+    return checkData?.length === localFilterData?.length;
+  }
+  return false;
+};
+
+/**
+ * 处理下拉选项的数据
+ * @param dataSource 数据源
+ * @param appendDataSoure 追加在数据源的额外数据
+ * @param valueKey
+ * @param labelKey
+ * @returns
+ */
+export const handleDataSource = (
+  dataSource: any[],
+  appendDataSoure?: any[] | Object,
+  valueKey?: string,
+  labelKey?: string,
+) => {
+  const valueKeys: any = [];
+  let newDataSoure: any[] = [];
+  if (Array.isArray(dataSource)) {
+    dataSource.forEach((v: any) => {
+      const label = v?.[labelKey || 'label'];
+      const value = v?.[valueKey || 'value'] || v?.key;
+      if (value) {
+        valueKeys.push(value);
+        newDataSoure.push({
+          ...v,
+          label,
+          value,
+        });
+      }
+    });
+  }
+  let newAppednDataSoure = [];
+  if (Array.isArray(appendDataSoure) && appendDataSoure.length > 0) {
+    newAppednDataSoure = appendDataSoure.filter(
+      (item) => !valueKeys?.includes(item?.[valueKey || 'value'] || item?.key),
+    );
+  }
+  if (Object.prototype.toString.call(appendDataSoure) === '[object Object]') {
+    newAppednDataSoure = [appendDataSoure].filter(
+      (item: any) =>
+        !valueKeys?.includes(item?.[valueKey || 'value'] || item?.key),
+    );
+  }
+  if (newAppednDataSoure?.length > 0) {
+    newDataSoure = newDataSoure.concat(newAppednDataSoure);
+  }
+  return newDataSoure;
+};

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

@@ -0,0 +1,351 @@
+import { InputNumber, Slider as AntdSlider } from 'antd';
+import classNames from 'classnames';
+import React, { CSSProperties, useMemo } from 'react';
+import CommonIcon from '../Icon';
+import {
+  FormFields,
+  getFieldsProps,
+  useCommonImperativeHandle,
+} from '../utils';
+
+interface BaseSliderPropsType {
+  step: any;
+  showLabel: any;
+  labelPlacement: any;
+  range: boolean | undefined;
+  disabled?: boolean | undefined;
+  direction: any;
+  options: any;
+  className: any;
+  minIcon: any;
+  maxIcon: any;
+  max: any;
+  min: any;
+  style: CSSProperties;
+  showInput: any;
+  getEngineApis?: any;
+  value?: any;
+  onChange?: (value: any) => void;
+  onMouseEnter: any;
+  onMouseLeave: any;
+  onClick: any;
+}
+
+export interface MySliderProps extends Omit<BaseSliderPropsType, 'options'> {
+  defaultValue: any;
+  showMarks: any;
+  marks: any;
+  stepNull: any;
+  included: any;
+  labelPlacement: any;
+  draggableTrack: any;
+  readOnly: any;
+  required: any;
+  visible: any;
+  showWrapperContainer?: any;
+  selfSpan?: any;
+  colSpan?: any;
+  label?: any;
+  titleTip?: any;
+  tipIcon?: any;
+  tipLocation?: any;
+  tipContent?: any;
+  tipPlacement?: any;
+  regexp?: any;
+  message?: any;
+  hidden?: any;
+  compId?: any;
+  labelCol?: any;
+  wrapperCol?: any;
+  colon?: any;
+  fieldName?: any;
+  onValueRelease?: any;
+  getCompPropMapState?: any;
+  wrapperContainer?: any;
+  isFormChild?: boolean | undefined;
+  tipSize?: string; // 文字提示
+  tipWidth?: string; // 提示自定义的宽度
+  tipHeight?: string; // 提示自定义的高度
+  getEngineApis?: any;
+}
+
+const prefixCls = 'slider';
+
+const BaseSlider = (props: BaseSliderPropsType) => {
+  const {
+    step,
+    showLabel,
+    labelPlacement,
+    range,
+    disabled,
+    direction,
+    options,
+    className,
+    minIcon,
+    maxIcon,
+    max,
+    min,
+    style,
+    showInput,
+    getEngineApis,
+    value,
+    onChange,
+    ...restProps
+  } = props;
+
+  const curValue = useMemo(() => {
+    // 单滑动时，设置了默认值，防止滑动到0时，会跳动到默认值上
+    let newVal = typeof value === 'number' && value === 0 ? 0 : value || 0;
+    if (range) {
+      // 双滑块
+      newVal = Array.isArray(newVal) ? newVal : [newVal, newVal];
+    } else if (!range && Array.isArray(newVal)) {
+      newVal = newVal[1];
+    }
+
+    return newVal;
+  }, [value, range]);
+
+  const mid = Number(((max - min) / 2).toFixed(5));
+
+  let isMinIconHL = false;
+  let isMaxIconHL = false;
+  if (!range && !disabled) {
+    isMinIconHL = direction === 'reverse' ? curValue > mid : curValue <= mid;
+    isMaxIconHL = direction === 'reverse' ? curValue <= mid : curValue > mid;
+  }
+
+  const renderIconFont = (info: any, color: any) => {
+    if (info) {
+      return (
+        <div>
+          {/** @ts-ignore */}
+          <CommonIcon
+            icon={info}
+            isUsePrimary={color}
+            style={{
+              width: 16,
+              height: 16,
+              fontSize: '16px',
+              fill: color ? undefined : 'rgba(28, 36, 46, 0.25)',
+              color: color ? undefined : 'rgba(28, 36, 46, 0.25)',
+            }}
+            getEngineApis={getEngineApis}
+          />
+        </div>
+      );
+    }
+    return undefined;
+  };
+
+  return (
+    <div
+      className={classNames({
+        className,
+        [`${prefixCls}_wrap`]: true,
+        [`${prefixCls}_wrap_vertical ${className}`]: options?.vertical,
+        [`${prefixCls}_wrap_icon ${className}`]: !!minIcon || !!maxIcon,
+        [`${prefixCls}_wrap_vertical_icon ${className}`]:
+          (!!minIcon || !!maxIcon) && options?.vertical,
+      })}
+      style={style}
+      {...restProps}
+    >
+      {minIcon && renderIconFont(minIcon, isMinIconHL)}
+      <div className={`${prefixCls}-inputbox`}>
+        <AntdSlider
+          {...options}
+          value={curValue}
+          tooltipPlacement={labelPlacement}
+          tooltipVisible={showLabel ? undefined : false}
+          disabled={disabled}
+          onChange={(e: any) => {
+            if (onChange) {
+              onChange(e);
+            }
+          }}
+        />
+      </div>
+      {showInput && (
+        <div className={`${prefixCls}_inputNumber`}>
+          <InputNumber
+            min={min}
+            max={range ? curValue[1] : max}
+            value={range ? curValue[0] : curValue}
+            disabled={disabled}
+            step={step}
+            onChange={(e: any) => {
+              if (onChange) {
+                onChange(range ? [e, curValue[1]] : e);
+              }
+            }}
+          />
+          {range && (
+            <>
+              <span className={`${prefixCls}_line`} />
+              <InputNumber
+                min={curValue[0]}
+                max={max}
+                step={step}
+                value={curValue[1]}
+                disabled={disabled}
+                onChange={(e: any) => {
+                  if (onChange) {
+                    onChange(range ? [curValue[0], e] : e);
+                  }
+                }}
+              />
+            </>
+          )}
+        </div>
+      )}
+      {maxIcon && renderIconFont(maxIcon, isMaxIconHL)}
+    </div>
+  );
+};
+
+const Slider = React.forwardRef<any, MySliderProps>((props, ref) => {
+  const {
+    showMarks,
+    marks,
+    stepNull,
+    included,
+    className,
+    style,
+    range = false,
+    defaultValue,
+    direction,
+    step,
+    value,
+    minIcon,
+    maxIcon,
+    max,
+    min,
+    wrapperContainer: WrapperContainer,
+    showInput,
+    showLabel,
+    labelPlacement,
+    draggableTrack,
+    onChange,
+    showWrapperContainer,
+    selfSpan,
+    colSpan,
+    label,
+    tipContent,
+    regexp,
+    message,
+    hidden,
+    compId,
+    tipIcon,
+    tipLocation,
+    titleTip,
+    tipPlacement,
+    labelCol,
+    wrapperCol,
+    colon,
+    fieldName: rawFieldName,
+    onValueRelease,
+    getCompPropMapState,
+    isFormChild,
+    getEngineApis,
+    tipSize,
+    tipWidth,
+    tipHeight,
+    ...restProps
+  } = props;
+
+  const { disabled, required, readOnly, formFieldsRef, finalRules } =
+    useCommonImperativeHandle(ref, props);
+
+  const options = useMemo(() => {
+    const params: any = {
+      range,
+      step,
+      vertical: direction === 'vertical',
+      reverse: direction === 'reverse',
+    };
+    const marksAttr = marks?.filter((mark: any) => mark.checked);
+    if (showMarks && marks?.length) {
+      // 显示刻度
+      const marksObj: any = {};
+      marksAttr.forEach((mark: any) => {
+        const { key, unit, fontFamily } = mark || {};
+        marksObj[key] = {
+          style: {
+            color: mark.color,
+            fontWeight: fontFamily?.includes('bold') ? 'bold' : undefined,
+            fontStyle: fontFamily?.includes('italic') ? 'italic' : undefined,
+          },
+          label: unit,
+        };
+      });
+      params.marks = marksObj;
+      if (!included) {
+        params.included = included;
+      }
+      if (stepNull) {
+        params.step = null;
+      }
+    }
+    if (range && draggableTrack) {
+      params.range = {
+        draggableTrack,
+      };
+    }
+    return params;
+  }, [range, step, direction, marks, stepNull, draggableTrack]);
+
+  return (
+    <FormFields
+      {...getFieldsProps(props)}
+      ref={formFieldsRef}
+      required={required}
+      disabled={disabled as any}
+      readOnly={readOnly}
+      rules={finalRules}
+      handleFormValue={(val) => {
+        if (val !== undefined) {
+          // 绑定内容有可能返回number类型或者是array类型，全部转换为string类型处理
+          const valueArr = (
+            typeof val === 'number' || val ? val.toString() : val
+          )
+            ?.replace(/\[|]/g, '')
+            ?.split(',')
+            ?.filter((v: any) => !!v);
+          const _valueArr = valueArr?.map((v: any) => (v && Number(v)) || 0);
+          const _value =
+            range && Array.isArray(_valueArr) && _valueArr?.length > 1
+              ? _valueArr.sort((a, b) => a - b)
+              : (_valueArr && _valueArr[0]) || 0;
+
+          return _value;
+        }
+
+        return val;
+      }}
+    >
+      <BaseSlider
+        step={step}
+        showLabel={showLabel}
+        labelPlacement={labelPlacement}
+        range={range}
+        direction={direction}
+        options={options}
+        className={className}
+        minIcon={minIcon}
+        maxIcon={maxIcon}
+        max={max}
+        min={min}
+        style={style}
+        showInput={showInput}
+        getEngineApis={getEngineApis}
+        onChange={onChange}
+        onMouseEnter={restProps.onMouseEnter}
+        onMouseLeave={restProps.onMouseLeave}
+        onClick={restProps.onClick}
+      />
+    </FormFields>
+  );
+});
+
+export default Slider;

package/lib/public/src/components/pcfactory/src/StdUpload/DownloadProgress/DownloadProgress.tsx

@@ -0,0 +1,27 @@
+import { Progress } from 'antd';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+
+const DownloadProgress = forwardRef((_, ref) => {
+  const [percent, setPercent] = useState<number>(0);
+
+  useImperativeHandle(ref, () => ({
+    setPercent,
+  }));
+
+  return (
+    <Progress
+      type="circle"
+      percent={percent}
+      showInfo={false}
+      width={14}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        visibility: 'visible',
+      }}
+    />
+  );
+});
+
+export default DownloadProgress;

package/lib/public/src/components/pcfactory/src/StdUpload/DownloadProgress/index.ts

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