@lingxiteam/ebe-utils 0.2.22 → 0.2.23

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

@@ -1,30 +1,20 @@
-import { CheckOutlined } from '@ant-design/icons';
-import { EngineBaseProps } from '@lingxiteam/types';
 import { Select as AntdSelect, Tag } from 'antd';
 import type { SelectProps } from 'antd/es/select';
-import classNames from 'classnames';
-import { isEqual } from 'lodash';
+import { CheckOutlined } from '@lingxiteam/icons';
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { renderCommonList } from '../utils/renderReadOnly';
+import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
 import { FormFields, getFieldsProps, useCommonImperativeHandle, useForm } from '../utils';
-import { useMemoizedFn } from '../utils/ahooks';
-import CustomModule from '../utils/CustomModule';
 import EmptyComp from '../utils/Empty';
-import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
-import { useLocale } from '../utils/hooks/useLocale';
-import { renderCommonList } from '../utils/renderReadOnly';
 import SpinComp from '../utils/Spin';
-import {
-  checkIfSelectedAll,
-  CHECK_ALL_VALUE,
-  getChangeSelectData,
-  getRules,
-  getSelectedAllData,
-  handleDataSource,
-  handleFormValue,
-  isLabelInValue,
-  localFilterOption,
-  transformValueType,
-} from './selectUtils';
+import { useMemoizedFn } from '../utils/ahooks';
+import classNames from 'classnames';
+import { useLocale } from '../utils/hooks/useLocale';
+import { CHECK_ALL_VALUE, handleFormValue, isLabelInValue, localFilterOption, getSelectedAllData, transformValueType, getRules, getChangeSelectData, checkIfSelectedAll, handleDataSource } from './selectUtils';
+import CustomModule from '../utils/CustomModule';
+import { EngineBaseProps } from '@lingxiteam/types';
+import { isEqual } from 'lodash';
+
 
 export interface MySelectProps extends EngineBaseProps {
   value?: any;
@@ -75,7 +65,7 @@ export interface MySelectProps extends EngineBaseProps {
   tipWidth?: string; // 提示自定义的宽度
   tipHeight?: string; // 提示自定义的高度
   getEngineApis: any;
-  checkedAll?: boolean; // 下拉多选时是否支持全选
+  checkedAll?: boolean;// 下拉多选时是否支持全选
 
   /**
    * 是否输入触发，默认fasel，也就是回车键触发, 为true的时候表示实时搜索
@@ -93,6 +83,7 @@ const WrapperSelect: React.FC<WrapperSelectProps> = ({ children }) =>
     className: `${SELECT_WRAPPER_CLASSNAME} ${children.props.className || ''}`,
   });
 
+
 const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
   const {
     value: originValue,
@@ -154,7 +145,13 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
     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);
@@ -182,10 +179,17 @@ 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);
@@ -237,7 +241,9 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
     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) => {
@@ -270,13 +276,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;
@@ -301,9 +307,26 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
   }, [filter, dataState]);
 
   const renderGengelContent = (c: any, data: any) => {
-    const { color, backgroundColor, remarkTextColor, remarkList = [] } = data?.options || {};
+    const {
+      color,
+      backgroundColor,
+      remarkTextColor,
+      remarkList = [],
+      isBaseText,
+      isShallowPrimary,
+      isPrimary,
+      isSubText,
+      tempTextColorType,
+    } = data?.options || {};
+    const style: React.CSSProperties = {};
     let label = (
-      <div className="ued-select-item-label" style={{ color }}>
+      <div
+        className={classNames({
+          'ued-select-item-label': true,
+          'ued-select-item-primary': tempTextColorType === 'PRIMARY_COLOR',
+        })}
+        style={!tempTextColorType ? { color } : {}}
+      >
         {c.label}
       </div>
     );
@@ -312,8 +335,20 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
     switch (mType) {
       case 'lightBackground':
       case 'darkBackground':
+        if (!isBaseText) {
+          style.color = color;
+        }
+        if (!isShallowPrimary && !isPrimary) {
+          style.backgroundColor = backgroundColor;
+        }
         label = (
-          <div className={`ued-select-item-label ued-select-item-${mType}`} style={{ color, backgroundColor }}>
+          <div
+            className={classNames({
+              'ued-select-item-label': true,
+              [`ued-select-item-${mType}`]: true,
+            })}
+            style={style}
+          >
             {c.label}
           </div>
         );
@@ -323,9 +358,12 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
       case 'otherDarkBackground':
         if (remarkList.length) {
           remarkList
-            .filter((r: any) => !!r.label)
+            .filter((r: any) => !!r.label || r.isBind)
             .forEach((row: any) => {
-              if (row.value || row.label) {
+              if (row.isBind) {
+                const binName = sandBoxSafeRun(row.value, { row: c });
+                remark += `${binName || row.value} | `;
+              } else if (row.value || row.label) {
                 if (c[row.value]) {
                   remark += `${c[row.value]} | `;
                 } else if (c[row.label]) {
@@ -337,13 +375,32 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
             remark = remark.substring(0, remark.length - 3);
           }
         }
+        if (!tempTextColorType && !isBaseText) {
+          style.color = color;
+        }
+        if (!isShallowPrimary && !isPrimary) {
+          style.backgroundColor = backgroundColor;
+        }
         label = (
           <div className="ued-select-item-column">
-            <div className={`ued-select-item-label ued-select-item-${mType}`} style={{ color, backgroundColor }}>
+            <div
+              className={classNames({
+                'ued-select-item-label': true,
+                [`ued-select-item-${mType}`]: true,
+                'ued-select-item-primary': tempTextColorType === 'PRIMARY_COLOR',
+              })}
+              style={style}
+            >
               {c.label}
             </div>
             {!!remark.length && (
-              <div className="ued-select-item-remark" style={{ color: remarkTextColor }}>
+              <div
+                className={classNames({
+                  'ued-select-item-remark': true,
+                  'ued-select-item-primary-remark-color': tempTextColorType === 'PRIMARY_COLOR',
+                })}
+                style={isSubText ? {} : { color: remarkTextColor }}
+              >
                 {remark}
               </div>
             )}
@@ -352,7 +409,13 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
         break;
       default:
     }
-    return <div className="ued-select-item">{label}</div>;
+    return (
+      <div
+        className="ued-select-item"
+      >
+        {label}
+      </div>
+    );
   };
 
   const renderLabel = (c: any, index: number) => {
@@ -454,12 +517,7 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
 
   const extraProps = {
     // 选中数据时过滤掉全选
-    tagRender: (p: any) =>
-      p?.value !== CHECK_ALL_VALUE ? (
-        <Tag {...p} className="ued-select-checked-tag">
-          {p?.label}
-        </Tag>
-      ) : null,
+    tagRender: (p: any) => (p?.value !== CHECK_ALL_VALUE ? <Tag {...p} className="ued-select-checked-tag">{p?.label}</Tag> : null),
     ...restProps,
   };
 
@@ -484,7 +542,7 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
         >
           <div
             className="ued-check-all-content"
-            onClick={e => {
+            onClick={(e) => {
               e.stopPropagation();
               handleCheckedAll();
             }}
@@ -531,17 +589,39 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
 
   const handleCheckedAll = () => {
     if (hasCheckAll) {
-      const localFilterData = dataSource.filter(d => localFilterOption(searchTextRef.current, d));
+      const localFilterData = dataSource.filter((d) => localFilterOption(searchTextRef.current, d));
       const data = getSelectedAllData(!isCheckedAll, localFilterData, value, max);
       handleOnChange(data);
     }
   };
 
+  const tagRender = (props: any) => {
+    const { label, closable, onClose } = props;
+    const { color, backgroundColor } = customRenderLabel?.options || {};
+    return (
+      <Tag
+        className={classNames({
+          'ued-multiple-select-tag': !customRenderLabel?.type && !customRenderLabel?.jsx,
+          lightBackground: customRenderLabel?.type === 'lightBackground',
+          darkBackground: customRenderLabel?.type === 'darkBackground',
+          jsx: customRenderLabel?.jsx,
+        })}
+        style={{ backgroundColor, color }}
+        // color={value}
+        // onMouseDown={onPreventMouseDown}
+        closable={closable}
+        onClose={onClose}
+      >
+        {label}
+      </Tag>
+    );
+  };
+
   return (
     <FormFields
       {...getFieldsProps(props)}
       wrapperClassName={SELECT_WRAPPER_CLASSNAME}
-      render={val => renderCommonList(val, dataSource)}
+      render={(val) => renderCommonList(val, dataSource)}
       required={required}
       disabled={disabled}
       ref={formFieldsRef}
@@ -555,18 +635,19 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
       <AntdSelect
         showArrow
         {...restProps}
-        // value无值时不配置value属性，避免defaultValue渲染失败
+      // value无值时不配置value属性，避免defaultValue渲染失败
         defaultValue={defaultValue}
         {...extraProps}
         {...filterObject}
         value={value}
         open={open}
         mode={mode}
+        tagRender={tagRender}
         optionLabelProp="label"
         notFoundContent={searching ? <SpinComp dataState={dataState} /> : renderEmpty}
-        onChange={v => {
+        onChange={(v) => {
           if (filter === 'local' && searchTextRef.current) {
-            // 点击时需要重置过滤条件
+          // 点击时需要重置过滤条件
             handleLocalSearch('');
           }
           // 单选选完要关闭
@@ -577,7 +658,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) {
@@ -597,9 +678,9 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
           handleAfterClose();
         }}
         onClear={() => {
-          // setOpen(false);
+        // setOpen(false);
           if (searchTextRef.current) {
-            // 需要置空搜索值
+          // 需要置空搜索值
             searchTextRef.current = '';
             resetRemoteFilter();
           }
@@ -607,21 +688,19 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
       >
         {renderCheckAll()}
         {/* 远程过滤searching时展示notFoundContent内的loading */}
-        {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>
-            );
-          })}
+        {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>
+          );
+        })}
       </AntdSelect>
     </FormFields>
   );

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

@@ -1,5 +1,8 @@
+
+
 export const CHECK_ALL_VALUE = 'LING_XI_CHECK_ALL';
 
+
 const typeFn: any = {
   string: String,
   number: Number,
@@ -32,13 +35,17 @@ export const localFilterOption = (input: string = '', option: any) => {
 // 判断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) {
     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;
       }
     });
@@ -83,6 +90,7 @@ export const transformValueType = (v: any, curVal: any) => {
   return v;
 };
 
+
 export const getRules = (min?: number, max?: number, getLocale?: any) => {
   if (!min && !max) {
     return [];
@@ -97,11 +105,7 @@ export const getRules = (min?: number, max?: number, getLocale?: any) => {
     });
   }
   if (max) {
-    maxMsg.push({
-      type: 'array',
-      max,
-      message: getLocale?.('CheckboxGroup.maxRule', { max }),
-    });
+    maxMsg.push({ type: 'array', max, message: getLocale?.('CheckboxGroup.maxRule', { max }) });
   }
   return [...minMsg, ...maxMsg];
 };
@@ -116,7 +120,7 @@ export const getChangeSelectData = (dataSource: any[], val: string[] | Object, m
     return undefined;
   }
   const sltData = dataSource.find((c: any) => c.value?.toString() === v?.toString());
-  return sltData ? [sltData] : undefined;
+  return (sltData ? [sltData] : undefined);
 };
 
 export const getSelectedAllData = (checked: boolean, dataSource: any[], value: any[], max?: number) => {
@@ -178,7 +182,7 @@ export const checkIfSelectedAll = (dataSource: any[], value: any[], filterValue:
  * @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)) {

package/lib/pcpublic/src/components/pcfactory/src/Table/BodyCell/index.tsx

@@ -1,32 +1,32 @@
-import _ from 'lodash';
 import React from 'react';
+import { MyBodyCellProps } from '../types/bodyCell';
+import FormatCell from '../FormatCell';
 import {
-  BODY_CELL_MODE_ED,
-  OPERATOR_ENDS_WITH,
+  SET_ROW_SPECIAL_CELL_BACKGROUND_COLOR,
+  SET_ROW_SPECIAL_CELL_CONTENT_STYLE,
+  RELATION_OR,
   OPERATOR_EQUAL,
+  OPERATOR_NOT_EQUAL,
   OPERATOR_GREATER_THAN,
-  OPERATOR_INCLUDE,
   OPERATOR_LESS_THAN,
-  OPERATOR_NOT_EQUAL,
+  OPERATOR_INCLUDE,
   OPERATOR_NOT_INCLUDE,
-  OPERATOR_NOT_NULL,
-  OPERATOR_NULL,
   OPERATOR_STARTS_WITH,
-  RELATION_OR,
+  OPERATOR_ENDS_WITH,
+  OPERATOR_NULL,
+  OPERATOR_NOT_NULL,
+  BODY_CELL_MODE_ED,
   SET_ROW_ALL_CELL_BACKGROUND_COLOR,
   SET_ROW_ALL_CELL_CONTENT_STYLE,
-  SET_ROW_SPECIAL_CELL_BACKGROUND_COLOR,
-  SET_ROW_SPECIAL_CELL_CONTENT_STYLE,
 } from '../constant';
-import FormatCell from '../FormatCell';
-import { MyBodyCellProps } from '../types/bodyCell';
+import _ from 'lodash';
 import type { ContentStyle } from '../types/contentStyle';
 
 const validateCondition = (data: any, row: any) => {
   const { code, operator, value } = data;
 
   const toStringVal = (val: any) => `${val}`;
-  const toNumberVal = (val: any) => (!isNaN(Number(val)) ? Number(val) : toStringVal(val));
+  const toNumberVal = (val: any) => !isNaN(Number(val)) ? Number(val) : toStringVal(val);
 
   switch (operator) {
     case OPERATOR_EQUAL:
@@ -67,7 +67,10 @@ const validateCondition = (data: any, row: any) => {
   }
 };
 
-const collectCondition: (data: string | any[], record: any) => any = (data: string | any[], record: any) => {
+const collectCondition: (data: string | any[], record: any) => any = (
+  data: string | any[],
+  record: any,
+) => {
   if (!data || !data?.length) {
     return true;
   }
@@ -90,7 +93,7 @@ const collectCondition: (data: string | any[], record: any) => any = (data: stri
   return valid;
 };
 
-const MyBodyCell: React.FC<MyBodyCellProps> = props => {
+const MyBodyCell: React.FC<MyBodyCellProps> = (props) => {
   const {
     mode,
     editable,
@@ -108,6 +111,7 @@ const MyBodyCell: React.FC<MyBodyCellProps> = props => {
     ...restProps
   } = props;
 
+
   const commonCellOnClick = () => {
     if (onTableCellClick) {
       onTableCellClick(record, _.get(record, dataIndex), dataIndex, index);
@@ -117,11 +121,7 @@ const MyBodyCell: React.FC<MyBodyCellProps> = props => {
   // 编辑单元格和扩展单元格忽略样式
   if (editable || isExtend) {
     if (editable) {
-      return (
-        <td {...restProps}>
-          <div className="ued-table-edit-cell">{children}</div>
-        </td>
-      );
+      return <td {...restProps}><div className="ued-table-edit-cell">{children}</div></td>;
     }
     return <td {...restProps}>{children}</td>;
   }
@@ -160,7 +160,12 @@ const MyBodyCell: React.FC<MyBodyCellProps> = props => {
       } = item;
 
       // 背景相关
-      if ([SET_ROW_ALL_CELL_BACKGROUND_COLOR, SET_ROW_SPECIAL_CELL_BACKGROUND_COLOR].includes(formatStyle)) {
+      if (
+        [
+          SET_ROW_ALL_CELL_BACKGROUND_COLOR,
+          SET_ROW_SPECIAL_CELL_BACKGROUND_COLOR,
+        ].includes(formatStyle)
+      ) {
         /**
          * 1、属于列单元格的单元格背景样式，需要多判断是否为当前列
          * 2、运行态时，单元格背景样式配置符合条件才生效
@@ -185,7 +190,10 @@ const MyBodyCell: React.FC<MyBodyCellProps> = props => {
         }
       } else if (
         // 内容相关
-        [SET_ROW_ALL_CELL_CONTENT_STYLE, SET_ROW_SPECIAL_CELL_CONTENT_STYLE].includes(formatStyle)
+        [
+          SET_ROW_ALL_CELL_CONTENT_STYLE,
+          SET_ROW_SPECIAL_CELL_CONTENT_STYLE,
+        ].includes(formatStyle)
       ) {
         // 当存在 contentType 时，表明是新版的内容样式，如果有自定义函数，则内容样式都不生效
         if (typeof contentType === 'string' && isCustomRendering) {
@@ -244,6 +252,7 @@ const MyBodyCell: React.FC<MyBodyCellProps> = props => {
       }
     }
 
+
     return (
       <FormatCell
         bgColorStyle={bgColorStyle}
@@ -257,15 +266,16 @@ const MyBodyCell: React.FC<MyBodyCellProps> = props => {
         commonCellClick={commonCellOnClick}
         mode={mode}
         width={width}
-      >
-        {children}
+      >{children}
       </FormatCell>
     );
   }
 
   return (
-    <td {...restProps} onClick={commonCellOnClick}>
-      {children}
+    <td
+      {...restProps}
+      onClick={commonCellOnClick}
+    >{children}
     </td>
   );
 };