@lingxiteam/ebe-utils 0.4.0 → 0.4.1

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

@@ -1,7 +1,7 @@
 import { Select as AntdSelect, Tag } from 'antd';
-import type { SelectProps } from 'antd/es/select';
+import type { SelectProps, DefaultOptionType } from 'antd/es/select';
 import { CheckOutlined } from '@lingxiteam/icons';
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, 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';
@@ -14,6 +14,7 @@ import { CHECK_ALL_VALUE, handleFormValue, isLabelInValue, localFilterOption, ge
 import CustomModule from '../utils/CustomModule';
 import { EngineBaseProps } from '@lingxiteam/types';
 import { isEqual } from 'lodash';
+import useDoubleClick from '../utils/hooks/useDoubleClick';
 
 
 export interface MySelectProps extends EngineBaseProps {
@@ -71,6 +72,7 @@ export interface MySelectProps extends EngineBaseProps {
    * 是否输入触发，默认fasel，也就是回车键触发, 为true的时候表示实时搜索
    */
   isInputSearch?: boolean;
+  localFilterType?: 'default' | 'label' | 'value';
 }
 
 interface WrapperSelectProps {
@@ -85,6 +87,7 @@ const WrapperSelect: React.FC<WrapperSelectProps> = ({ children }) =>
 
 
 const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
+  console.log('Select', props);
   const {
     value: originValue,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -134,10 +137,10 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
     labelKey = 'label',
     valueKey = 'value',
     mode,
+    localFilterType,
     $$componentItem,
     ...restProps
   } = props;
-
   const defaultValue = useMemo(() => {
     if ((_defaultValue === null || _defaultValue === '') && mode === 'multiple') {
       return undefined;
@@ -190,7 +193,7 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
     formFieldsRef,
     readOnly,
   } = useCommonImperativeHandle(ref, props, {
-    clearValue: [],
+    clearValue: mode === 'multiple' ? [] : undefined,
     getSelectedData: () => {
       return getChangeSelectData(dataSource, value, mode);
     },
@@ -267,7 +270,7 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
         defaultActiveFirstOption: false,
         showSearch: true,
         optionFilterProp: 'children',
-        filterOption: localFilterOption,
+        filterOption: (inputValue, option) => localFilterOption(inputValue, option, localFilterType),
         onSearch: handleLocalSearch,
       };
     }
@@ -304,7 +307,29 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
       };
     }
     return {};
-  }, [filter, dataState]);
+  }, [filter, dataState, localFilterType]);
+
+  const filterSort = useCallback((optionA: DefaultOptionType, optionB: DefaultOptionType) => {
+    const getScore = (option: any) => {
+      const label = String(option?.children || option?.label || '').toLowerCase();
+      const value = String(option?.value || '').toLowerCase();
+      const search = searchTextRef.current?.toLowerCase() || '';
+
+      // 匹配位置越靠前，排名越前
+      if (localFilterType === 'label') {
+        return label.indexOf(search);
+      } if (localFilterType === 'value') {
+        return value.indexOf(search);
+      }
+
+      return Math.min(
+        label.includes(search) ? label.indexOf(search) : Infinity,
+        value.includes(search) ? value.indexOf(search) : Infinity
+      );
+    };
+  
+    return getScore(optionA) - getScore(optionB);
+  }, [localFilterType]);
 
   const renderGengelContent = (c: any, data: any) => {
     const {
@@ -597,7 +622,15 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
 
   const tagRender = (props: any) => {
     const { label, closable, onClose } = props;
-    const { color, backgroundColor } = customRenderLabel?.options || {};
+    const { color, backgroundColor, isBaseText, isShallowPrimary, isPrimary } =
+      customRenderLabel?.options || {};
+    const style: React.CSSProperties = {};
+    if (!isBaseText) {
+      style.color = color;
+    }
+    if (!isShallowPrimary && !isPrimary) {
+      style.backgroundColor = backgroundColor;
+    }
     return (
       <Tag
         className={classNames({
@@ -606,7 +639,7 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
           darkBackground: customRenderLabel?.type === 'darkBackground',
           jsx: customRenderLabel?.jsx,
         })}
-        style={{ backgroundColor, color }}
+        style={style}
         // color={value}
         // onMouseDown={onPreventMouseDown}
         closable={closable}
@@ -617,6 +650,32 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
     );
   };
 
+  const selectOnClick = (e: any) => {
+    let targetParent = (e?.target as HTMLBaseElement)?.parentNode;
+    const curretTarget = e?.currentTarget;
+    while (targetParent && targetParent !== curretTarget) {
+      targetParent = targetParent.parentNode;
+    }
+    if (targetParent === curretTarget) {
+      setOpen(!open);
+      if (open) {
+        handleAfterClose();
+      }
+    }
+    // @ts-ignore
+    restProps?.onClick?.(e);
+  };
+
+  // 改造兼容双击事件
+  const selectClickEvents = useDoubleClick({
+    clickName: 'onClick',
+    doubleClickName: 'onDoubleClick',
+    type: 'Button',
+    events: {
+      onClick: selectOnClick,
+    },
+  });
+
   return (
     <FormFields
       {...getFieldsProps(props)}
@@ -645,6 +704,8 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
         tagRender={tagRender}
         optionLabelProp="label"
         notFoundContent={searching ? <SpinComp dataState={dataState} /> : renderEmpty}
+        filterSort={filterSort}
+        {...selectClickEvents}
         onChange={(v) => {
           if (filter === 'local' && searchTextRef.current) {
           // 点击时需要重置过滤条件
@@ -658,21 +719,22 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
 
           handleOnChange(v);
         }}
-        onClick={(e) => {
-          let targetParent = (e?.target as HTMLBaseElement)?.parentNode;
-          const curretTarget = e?.currentTarget;
-          while (targetParent && targetParent !== curretTarget) {
-            targetParent = targetParent.parentNode;
-          }
-          if (targetParent === curretTarget) {
-            setOpen(!open);
-            if (open) {
-              handleAfterClose();
-            }
-          }
-          // @ts-ignore
-          restProps?.onClick?.(e);
-        }}
+        // onClick={(e) => {
+        //   console.log('单击：', e);
+        //   let targetParent = (e?.target as HTMLBaseElement)?.parentNode;
+        //   const curretTarget = e?.currentTarget;
+        //   while (targetParent && targetParent !== curretTarget) {
+        //     targetParent = targetParent.parentNode;
+        //   }
+        //   if (targetParent === curretTarget) {
+        //     setOpen(!open);
+        //     if (open) {
+        //       handleAfterClose();
+        //     }
+        //   }
+        //   // @ts-ignore
+        //   restProps?.onClick?.(e);
+        // }}
         onBlur={() => {
           setOpen(false);
           handleAfterClose();

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,
@@ -12,33 +15,70 @@ const typeFn: any = {
  * @param option
  * @returns
  */
-export const localFilterOption = (input: string = '', option: any) => {
-  // 本地支持value和label过滤
-  let valueFilter = false;
+// 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;
+// };
+
+const checkInputValue = (input: string = '', value: any) => {
+  if (value !== null && value !== undefined) {
+    return String(value).toLowerCase().includes(input);
+  }
+  return false;
+};
+
+export const localFilterOption = (input: string = '', option: any, localFilterType?: 'default' | 'label' | 'value') => {
   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;
+  const inputLower = input.toLowerCase();
+
+  // 处理 value 过滤
+  const valueFilter = checkInputValue(inputLower, option.value);
+
+  // 处理 label 或 children 过滤
+  const childernFilter = option?.children && typeof option.children === 'string' ? checkInputValue(inputLower, option.children) : false;
+  const labelFilter = checkInputValue(inputLower, option.label);
+
+  // 根据 localFilterType 决定返回值
+  switch (localFilterType) {
+    case 'value':
+      return valueFilter;
+    case 'label':
+      return labelFilter || childernFilter;
+    default:
+      return labelFilter || childernFilter || 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) {
     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 +123,7 @@ export const transformValueType = (v: any, curVal: any) => {
   return v;
 };
 
+
 export const getRules = (min?: number, max?: number, getLocale?: any) => {
   if (!min && !max) {
     return [];
@@ -112,7 +153,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) => {
@@ -157,7 +198,7 @@ export const getSelectedAllData = (checked: boolean, dataSource: any[], value: a
 
 // 获取当前列表数据下的全选状态
 export const checkIfSelectedAll = (dataSource: any[], value: any[], filterValue: string = '') => {
-  const localFilterData = dataSource.filter((d) => localFilterOption(filterValue, d));
+  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));
@@ -174,7 +215,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)) {
@@ -182,7 +223,7 @@ export const handleDataSource = (dataSource: any[], appendDataSoure?: any[] | Ob
       const label = v?.[labelKey || 'label'];
       const value = v?.[valueKey || 'value'] || v?.key;
       if (value) {
-        // TODO: 为什么 id 是数字就不行？？
+        // 兼容源码逻辑
         valueKeys.push(`${value}`);
         newDataSoure.push({
           ...v,
@@ -194,7 +235,7 @@ export const handleDataSource = (dataSource: any[], appendDataSoure?: any[] | Ob
   }
   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));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxiteam/ebe-utils",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "",
   "keywords": [],
   "author": "",
@@ -19,7 +19,7 @@
     "@babel/types": "^7.12.12",
     "cac": "^6.7.14",
     "fs-extra": "9.x",
-    "@lingxiteam/ebe": "0.4.0"
+    "@lingxiteam/ebe": "0.4.1"
   },
   "publishConfig": {
     "access": "public"