@lingxiteam/ebe-utils 0.2.4 → 0.2.5

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

@@ -4,19 +4,8 @@ import { Select as AntdSelect, Tag } from 'antd';
 import type { SelectProps } from 'antd/es/select';
 import classNames from 'classnames';
 import { isEqual } from 'lodash';
-import React, {
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  FormFields,
-  getFieldsProps,
-  useCommonImperativeHandle,
-  useForm,
-} from '../utils';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { FormFields, getFieldsProps, useCommonImperativeHandle, useForm } from '../utils';
 import { useMemoizedFn } from '../utils/ahooks';
 import CustomModule from '../utils/CustomModule';
 import EmptyComp from '../utils/Empty';
@@ -159,22 +148,13 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
   } = props;
 
   const defaultValue = useMemo(() => {
-    if (
-      (_defaultValue === null || _defaultValue === '') &&
-      mode === 'multiple'
-    ) {
+    if ((_defaultValue === null || _defaultValue === '') && mode === 'multiple') {
       return undefined;
     }
     return _defaultValue;
   }, []);
 
-  const {
-    sandBoxSafeRun,
-    sandBoxLoadModule,
-    onlySyncValue,
-    compatConfig,
-    dataState,
-  } = getEngineApis() || {};
+  const { sandBoxSafeRun, sandBoxLoadModule, onlySyncValue, compatConfig, dataState } = getEngineApis() || {};
   const { getLocale, lang } = useLocale(getEngineApis());
   const CHECK_ALL_TEXT = getLocale?.('all', '全选');
   const funcExpExecute = useFuncExpExecute(sandBoxSafeRun, getLocale);
@@ -187,10 +167,7 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
   const [isCheckedAll, setCheckedAll] = useState(false);
 
   // 配置了全选后增加一个全选项
-  const hasCheckAll = useMemo(
-    () => mode === 'multiple' && checkedAll,
-    [mode, checkedAll],
-  );
+  const hasCheckAll = useMemo(() => mode === 'multiple' && checkedAll, [mode, checkedAll]);
 
   const value = useMemo(() => {
     const temValue = handleFormValue(originValue, props.mode);
@@ -205,19 +182,10 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
 
   // FIX: 兼容旧逻辑 通过表单设置值时表单项的值需要预处理，否则会导致值和预想的值不一致
   if (formContext.inForm) {
-    formContext.preproccessSetFormValues(props.fieldName, (v) =>
-      handleFormValue(v, props.mode),
-    );
+    formContext.preproccessSetFormValues(props.fieldName, v => handleFormValue(v, props.mode));
   }
 
-  const {
-    required,
-    disabled,
-    finalRules,
-    setExtendRules,
-    formFieldsRef,
-    readOnly,
-  } = useCommonImperativeHandle(ref, props, {
+  const { required, disabled, finalRules, setExtendRules, formFieldsRef, readOnly } = useCommonImperativeHandle(ref, props, {
     clearValue: [],
     getSelectedData: () => {
       return getChangeSelectData(dataSource, value, mode);
@@ -231,19 +199,10 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
       setDataSource(_dataSource || []);
     },
     // 加载数据
-    setDataWithLabelAndValue: (data: {
-      dataSource: any[];
-      labelKey: any;
-      valueKey: any;
-    }) => {
+    setDataWithLabelAndValue: (data: { dataSource: any[]; labelKey: any; valueKey: any }) => {
       setVKey(data.valueKey);
       setLKey(data.labelKey);
-      const dataSoure = handleDataSource(
-        data.dataSource,
-        [],
-        data.valueKey,
-        data.labelKey,
-      );
+      const dataSoure = handleDataSource(data.dataSource, [], data.valueKey, data.labelKey);
       // 3.3.1 之前，为空不进行赋值
       if (compatConfig?.isFormCompat === true) {
         if (Array.isArray(dataSource) && dataSoure.length > 0) {
@@ -274,25 +233,11 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
 
   // 处理列表数据
   useEffect(() => {
-    const newData = handleDataSource(
-      propsDataSource,
-      isLabelInValue(originValue) ? originValue : [],
-      vKey,
-      lKey,
-    );
+    const newData = handleDataSource(propsDataSource, isLabelInValue(originValue) ? originValue : [], vKey, lKey);
     setDataSource(newData);
   }, [JSON.stringify(propsDataSource)]);
 
-  const renderEmpty = useMemo(
-    () => (
-      <EmptyComp
-        getLocale={getLocale}
-        dataState={dataState}
-        clsName="pcfactory-empty-small"
-      />
-    ),
-    [dataState],
-  );
+  const renderEmpty = useMemo(() => <EmptyComp getLocale={getLocale} dataState={dataState} clsName="pcfactory-empty-small" />, [dataState]);
 
   // 远程过滤搜索
   const onRemoteFilter = async (searchText: string) => {
@@ -325,13 +270,13 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
         defaultActiveFirstOption: false,
         showSearch: true,
         filterOption: false,
-        onKeyDown: (e) => {
+        onKeyDown: e => {
           // 兼容旧浏览器使用keyCode
           if (e.key === 'Enter' || e.keyCode === 13) {
             onRemoteFilter(searchTextRef?.current || '');
           }
         },
-        onSearch: (input) => {
+        onSearch: input => {
           try {
             // setSearchText(input);
             searchTextRef.current = input;
@@ -355,12 +300,66 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
     return {};
   }, [filter, dataState]);
 
+  const renderGengelContent = (c: any, data: any) => {
+    const { color, backgroundColor, remarkTextColor, remarkList = [] } = data?.options || {};
+    let label = (
+      <div className="ued-select-item-label" style={{ color }}>
+        {c.label}
+      </div>
+    );
+    let remark = '';
+    const mType = data.type;
+    switch (mType) {
+      case 'lightBackground':
+      case 'darkBackground':
+        label = (
+          <div className={`ued-select-item-label ued-select-item-${mType}`} style={{ color, backgroundColor }}>
+            {c.label}
+          </div>
+        );
+        break;
+      case 'otherDefault':
+      case 'otherLightBackground':
+      case 'otherDarkBackground':
+        if (remarkList.length) {
+          remarkList
+            .filter((r: any) => !!r.label)
+            .forEach((row: any) => {
+              if (row.value || row.label) {
+                if (c[row.value]) {
+                  remark += `${c[row.value]} | `;
+                } else if (c[row.label]) {
+                  remark += `${c[row.label]} | `;
+                }
+              }
+            });
+          if (remark.substring(remark.length - 3, remark.length) === ' | ') {
+            remark = remark.substring(0, remark.length - 3);
+          }
+        }
+        label = (
+          <div className="ued-select-item-column">
+            <div className={`ued-select-item-label ued-select-item-${mType}`} style={{ color, backgroundColor }}>
+              {c.label}
+            </div>
+            {!!remark.length && (
+              <div className="ued-select-item-remark" style={{ color: remarkTextColor }}>
+                {remark}
+              </div>
+            )}
+          </div>
+        );
+        break;
+      default:
+    }
+    return <div className="ued-select-item">{label}</div>;
+  };
+
   const renderLabel = (c: any, index: number) => {
-    if (
-      customRenderLabel &&
-      typeof customRenderLabel === 'object' &&
-      customRenderLabel.jsx
-    ) {
+    if (customRenderLabel && typeof customRenderLabel === 'object' && customRenderLabel.type) {
+      return renderGengelContent(c, customRenderLabel);
+    }
+    if (customRenderLabel && typeof customRenderLabel === 'object' && customRenderLabel.jsx) {
       return (
         <CustomModule
           code={customRenderLabel.targetVal}
@@ -408,11 +407,9 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
   const renderOption = (c: any, index: number) => {
     let context: React.ReactNode = c.label;
 
-    if (
-      customRenderOption &&
-      typeof customRenderOption === 'object' &&
-      customRenderOption.jsx
-    ) {
+    if (customRenderOption && typeof customRenderOption === 'object' && customRenderOption.type) {
+      context = renderGengelContent(c, customRenderOption);
+    } else if (customRenderOption && typeof customRenderOption === 'object' && customRenderOption.jsx) {
       context = (
         <CustomModule
           code={customRenderOption.targetVal}
@@ -469,11 +466,7 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
   // 判断是否选中全选项，当开启全选时，若选项都勾上时则视为全选，本地或远程过滤后，全选表示的是过滤后的数据
   useEffect(() => {
     if (hasCheckAll) {
-      const checked = checkIfSelectedAll(
-        dataSource,
-        value,
-        searchTextRef.current,
-      );
+      const checked = checkIfSelectedAll(dataSource, value, searchTextRef.current);
       setCheckedAll(checked);
     }
   }, [JSON.stringify(dataSource), hasCheckAll, value]);
@@ -482,10 +475,7 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
     if (hasCheckAll) {
       return (
         <AntdSelect.Option
-          className={classNames(
-            'ued-check-all',
-            isCheckedAll && 'ued-check-all-checked',
-          )}
+          className={classNames('ued-check-all', isCheckedAll && 'ued-check-all-checked')}
           title={CHECK_ALL_TEXT}
           key={CHECK_ALL_VALUE}
           label={CHECK_ALL_TEXT}
@@ -494,7 +484,7 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
         >
           <div
             className="ued-check-all-content"
-            onClick={(e) => {
+            onClick={e => {
               e.stopPropagation();
               handleCheckedAll();
             }}
@@ -541,15 +531,8 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
 
   const handleCheckedAll = () => {
     if (hasCheckAll) {
-      const localFilterData = dataSource.filter((d) =>
-        localFilterOption(searchTextRef.current, d),
-      );
-      const data = getSelectedAllData(
-        !isCheckedAll,
-        localFilterData,
-        value,
-        max,
-      );
+      const localFilterData = dataSource.filter(d => localFilterOption(searchTextRef.current, d));
+      const data = getSelectedAllData(!isCheckedAll, localFilterData, value, max);
       handleOnChange(data);
     }
   };
@@ -558,7 +541,7 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
     <FormFields
       {...getFieldsProps(props)}
       wrapperClassName={SELECT_WRAPPER_CLASSNAME}
-      render={(val) => renderCommonList(val, dataSource)}
+      render={val => renderCommonList(val, dataSource)}
       required={required}
       disabled={disabled}
       ref={formFieldsRef}
@@ -580,10 +563,8 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
         open={open}
         mode={mode}
         optionLabelProp="label"
-        notFoundContent={
-          searching ? <SpinComp dataState={dataState} /> : renderEmpty
-        }
-        onChange={(v) => {
+        notFoundContent={searching ? <SpinComp dataState={dataState} /> : renderEmpty}
+        onChange={v => {
           if (filter === 'local' && searchTextRef.current) {
             // 点击时需要重置过滤条件
             handleLocalSearch('');
@@ -596,7 +577,7 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
 
           handleOnChange(v);
         }}
-        onClick={(e) => {
+        onClick={e => {
           let targetParent = (e?.target as HTMLBaseElement)?.parentNode;
           const curretTarget = e?.currentTarget;
           while (targetParent && targetParent !== curretTarget) {
@@ -629,22 +610,18 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
         {searching
           ? []
           : (dataSource || []).map((c: any, index: number) => {
-              return (
-                <AntdSelect.Option
-                  label={renderLabel(c, index)}
-                  title={c.label}
-                  key={c.value || Math.random()}
-                  value={transformValueType(c.value, value ?? [])}
-                  disabled={
-                    rangeLimit &&
-                    rangeLimit.length > 0 &&
-                    !rangeLimit.includes(+c.value)
-                  }
-                >
-                  {renderOption(c, index)}
-                </AntdSelect.Option>
-              );
-            })}
+            return (
+              <AntdSelect.Option
+                label={renderLabel(c, index)}
+                title={c.label}
+                key={c.value || Math.random()}
+                value={transformValueType(c.value, value ?? [])}
+                disabled={rangeLimit && rangeLimit.length > 0 && !rangeLimit.includes(+c.value)}
+              >
+                {renderOption(c, index)}
+              </AntdSelect.Option>
+            );
+          })}
       </AntdSelect>
     </FormFields>
   );

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

@@ -23,37 +23,22 @@ export const localFilterOption = (input: string = '', option: any) => {
     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?.children?.toLowerCase?.().indexOf(input.toLowerCase()) >= 0 || valueFilter;
   }
 
-  return (
-    option?.label?.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'))
-    ) {
+    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
-  ) {
+  } 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'))
-      ) {
+      if (Object.keys(v).includes('label') && (Object.keys(v).includes('value') || Object.keys(v).includes('key'))) {
         isLabelInValueCount += 1;
       }
     });
@@ -66,9 +51,7 @@ 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;
+    val = Array.isArray(value) ? value.map((v: any) => v?.key || v?.value) : value?.key || value?.value;
   }
   if (val !== undefined) {
     // 如果是多选，值是,分割的字符串的数组
@@ -123,33 +106,20 @@ export const getRules = (min?: number, max?: number, getLocale?: any) => {
   return [...minMsg, ...maxMsg];
 };
 // 获取选中数据
-export const getChangeSelectData = (
-  dataSource: any[],
-  val: string[] | Object,
-  mode?: string,
-) => {
+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()),
-      );
+      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(),
-  );
+  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,
-) => {
+export const getSelectedAllData = (checked: boolean, dataSource: any[], value: any[], max?: number) => {
   let latestValue = [];
   const filterDataMap: any = {};
   // 获取当前数据的所有值
@@ -190,19 +160,11 @@ export const getSelectedAllData = (
 };
 
 // 获取当前列表数据下的全选状态
-export const checkIfSelectedAll = (
-  dataSource: any[],
-  value: any[],
-  filterValue: string = '',
-) => {
-  const localFilterData = dataSource.filter((d) =>
-    localFilterOption(filterValue, d),
-  );
+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),
-    );
+    const checkData = localFilterData.filter((f: any) => value.includes(f.value));
     return checkData?.length === localFilterData?.length;
   }
   return false;
@@ -216,12 +178,7 @@ export const checkIfSelectedAll = (
  * @param labelKey
  * @returns
  */
-export const handleDataSource = (
-  dataSource: any[],
-  appendDataSoure?: any[] | Object,
-  valueKey?: string,
-  labelKey?: string,
-) => {
+export const handleDataSource = (dataSource: any[], appendDataSoure?: any[] | Object, valueKey?: string, labelKey?: string) => {
   const valueKeys: any = [];
   let newDataSoure: any[] = [];
   if (Array.isArray(dataSource)) {
@@ -240,15 +197,10 @@ export const handleDataSource = (
   }
   let newAppednDataSoure = [];
   if (Array.isArray(appendDataSoure) && appendDataSoure.length > 0) {
-    newAppednDataSoure = appendDataSoure.filter(
-      (item) => !valueKeys?.includes(item?.[valueKey || 'value'] || item?.key),
-    );
+    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),
-    );
+    newAppednDataSoure = [appendDataSoure].filter((item: any) => !valueKeys?.includes(item?.[valueKey || 'value'] || item?.key));
   }
   if (newAppednDataSoure?.length > 0) {
     newDataSoure = newDataSoure.concat(newAppednDataSoure);

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

@@ -2,11 +2,7 @@ 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';
+import { FormFields, getFieldsProps, useCommonImperativeHandle } from '../utils';
 
 interface BaseSliderPropsType {
   step: any;
@@ -145,8 +141,7 @@ const BaseSlider = (props: BaseSliderPropsType) => {
         [`${prefixCls}_wrap`]: true,
         [`${prefixCls}_wrap_vertical ${className}`]: options?.vertical,
         [`${prefixCls}_wrap_icon ${className}`]: !!minIcon || !!maxIcon,
-        [`${prefixCls}_wrap_vertical_icon ${className}`]:
-          (!!minIcon || !!maxIcon) && options?.vertical,
+        [`${prefixCls}_wrap_vertical_icon ${className}`]: (!!minIcon || !!maxIcon) && options?.vertical,
       })}
       style={style}
       {...restProps}
@@ -254,8 +249,7 @@ const Slider = React.forwardRef<any, MySliderProps>((props, ref) => {
     ...restProps
   } = props;
 
-  const { disabled, required, readOnly, formFieldsRef, finalRules } =
-    useCommonImperativeHandle(ref, props);
+  const { disabled, required, readOnly, formFieldsRef, finalRules } = useCommonImperativeHandle(ref, props);
 
   const options = useMemo(() => {
     const params: any = {
@@ -303,20 +297,16 @@ const Slider = React.forwardRef<any, MySliderProps>((props, ref) => {
       disabled={disabled as any}
       readOnly={readOnly}
       rules={finalRules}
-      handleFormValue={(val) => {
+      handleFormValue={val => {
         if (val !== undefined) {
           // 绑定内容有可能返回number类型或者是array类型，全部转换为string类型处理
-          const valueArr = (
-            typeof val === 'number' || val ? val.toString() : val
-          )
+          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;
+            range && Array.isArray(_valueArr) && _valueArr?.length > 1 ? _valueArr.sort((a, b) => a - b) : (_valueArr && _valueArr[0]) || 0;
 
           return _value;
         }