@lemon-fe/components 1.4.22 → 1.4.23-alpha.0

package/es/data-grid/components/search.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
 import type { DataGridSearch, DataGridSearchRef } from '../typings';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DataGridSearch & React.RefAttributes<DataGridSearchRef>>>;
+declare const _default: <TData>(props: DataGridSearch<TData> & {
+    ref: React.RefObject<DataGridSearchRef>;
+}) => React.ReactElement;
 export default _default;

package/es/data-grid/components/search.js

@@ -15,10 +15,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { Button, Input, Space } from 'antd';
+import { Button, Input, Select, Space } from 'antd';
 import React, { forwardRef, memo, useState, useImperativeHandle, useMemo, useRef } from 'react';
+import InputCompact from "../../input-compact";
 import { useLocaleReceiver } from "../../locale-receiver";
 import { useGridStore } from "../hooks";
+import { prefix } from "../utils";
 import { useDebounce } from '@lemon-fe/hooks';
 export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Search(props, ref) {
   var placeholder = props.placeholder,
@@ -27,7 +29,8 @@ export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Search(props,
     _props$clearSelection = props.clearSelection,
     clearSelection = _props$clearSelection === void 0 ? true : _props$clearSelection,
     defaultValue = props.defaultValue,
-    onValueChange = props.onValueChange;
+    onValueChange = props.onValueChange,
+    dropdownConfig = props.dropdownConfig;
   // 单行搜索大致耗时
   var duration = useRef(0);
   var defaultState = useMemo(function () {
@@ -64,15 +67,33 @@ export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Search(props,
     }
     return cols;
   };
+  var getLabel = function getLabel(node) {
+    var defaultVal = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    if (dropdownConfig && node.data) {
+      var label = dropdownConfig.label;
+      if (typeof label === 'function') {
+        return label(node.data);
+      } else {
+        return grid.api.getValue(label, node);
+      }
+    }
+    return defaultVal;
+  };
   var checkNodes = function checkNodes(keywords, node, cols) {
+    var result = {
+      label: '',
+      matched: false
+    };
     for (var i = 0; i < cols.length; i++) {
       var col = cols[i];
       var value = grid.api.getValue(col, node);
       if (value !== undefined && value !== null && typeof value === 'string' && value.toUpperCase().includes(keywords.toUpperCase())) {
-        return true;
+        result.label = getLabel(node, value);
+        result.matched = true;
+        return result;
       }
     }
-    return false;
+    return result;
   };
   var handleSearch = useDebounce(function (str, prevState) {
     var keywords = str.trim();
@@ -107,9 +128,11 @@ export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Search(props,
       if (id === undefined) {
         return;
       }
-      if (checkNodes(keywords, node, cols)) {
+      var checkResult = checkNodes(keywords, node, cols);
+      if (checkResult.matched) {
         nodes.push({
-          id: id
+          id: id,
+          label: checkResult.label
         });
         if (prevNodes.has(id)) {
           prevNodes.set(id, nodes.length - 1);
@@ -186,6 +209,23 @@ export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Search(props,
       });
     });
   };
+  var jumpToItem = function jumpToItem(id) {
+    if (state.nodes.length <= 0) {
+      return;
+    }
+    var idx = state.nodes.findIndex(function (item) {
+      return item.id === id;
+    });
+    if (idx < 0) {
+      return;
+    }
+    focusCell(id);
+    setState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        index: idx
+      });
+    });
+  };
   useImperativeHandle(ref, function () {
     return {
       reset: function reset() {
@@ -233,8 +273,10 @@ export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Search(props,
                 break;
               }
             }
+            var label = getLabel(node);
             _newNodes.splice(idx, 0, {
-              id: id
+              id: id,
+              label: label
             });
             setState(function (prev) {
               return _objectSpread(_objectSpread({}, prev), {}, {
@@ -253,7 +295,12 @@ export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Search(props,
       }
     };
   });
-  return /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Input, {
+  return /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(InputCompact, {
+    className: "".concat(prefix('bottom-search')),
+    style: {
+      width: 264
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
     placeholder: placeholder || dataGridLocale.searchPlaceholderText,
     value: state.keywords,
     defaultValue: defaultValue,
@@ -272,8 +319,24 @@ export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Search(props,
       if (e.key === 'Enter') {
         handleNext(searching.current ? handleSearch.flush() : state);
       }
+    },
+    bordered: false
+  }), /*#__PURE__*/React.createElement(Select, {
+    options: state.nodes,
+    bordered: false,
+    notFoundContent: null,
+    className: "".concat(prefix('bottom-search-select')),
+    fieldNames: {
+      label: 'label',
+      value: 'id'
+    },
+    placement: "topRight",
+    dropdownMatchSelectWidth: 264,
+    listHeight: 280,
+    onChange: function onChange(val) {
+      jumpToItem(val);
     }
-  }), /*#__PURE__*/React.createElement(Button, {
+  })), /*#__PURE__*/React.createElement(Button, {
     size: "small",
     onClick: handlePrev
   }, dataGridLocale.searchPrevText), /*#__PURE__*/React.createElement(Button, {

package/es/data-grid/index.d.ts

@@ -17,7 +17,7 @@ declare const Editors: {
     Text: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & import("..").TextEditorParams<any> & React.RefAttributes<import("ag-grid-react").ICellEditorReactComp>>;
     Date: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & import("..").DateEditorParams<any> & React.RefAttributes<import("ag-grid-react").ICellEditorReactComp>>;
     Number: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & import("..").NumberEditorParams<any> & React.RefAttributes<import("ag-grid-react").ICellEditorReactComp>>;
-    Select: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & Pick<import("antd").SelectProps<any, import("antd/lib/select").BaseOptionType>, "disabled" | "mode" | "virtual" | "allowClear" | "showSearch" | "optionFilterProp" | "options" | "listHeight"> & {
+    Select: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & Pick<import("antd").SelectProps<any, import("antd/lib/select").BaseOptionType>, "disabled" | "mode" | "allowClear" | "showSearch" | "optionFilterProp" | "options" | "virtual" | "listHeight"> & {
         fieldNames?: {
             label: string;
             value: string;

package/es/data-grid/index.less

@@ -538,6 +538,17 @@
     justify-content: center;
     background-color: rgba(255, 255, 255, 0.6);
   }
+
+  &-bottom-search {
+    &-select {
+      width: 32px;
+      overflow: hidden;
+
+      .@{ant-prefix}-select-selector {
+        opacity: 0;
+      }
+    }
+  }
 }
 
 .ag-theme-@{prefixCls} {

package/es/data-grid/typings.d.ts

@@ -133,7 +133,7 @@ export declare type DetailCell<TData, Params = Record<string, never>> = {
     /** 这是一个render函数不是组件 */
     render: (params: ICellRendererParams<TData> & Params) => ReactNode;
 };
-export interface DataGridSearch {
+export interface DataGridSearch<TData> {
     /**
      * @description
      * 不传入就根据所有字符类型的列数据搜索
@@ -156,6 +156,16 @@ export interface DataGridSearch {
      */
     defaultValue?: string;
     onValueChange?: (value: string) => void;
+    /**
+     * @description
+     * 是否显示搜索结果 上下键快速定位
+     */
+    dropdownConfig?: {
+        /**
+         * label字段
+         */
+        label: string | ((item: TData) => ReactNode | string);
+    };
 }
 export interface DataGridSearchRef {
     reset: () => void;
@@ -235,7 +245,7 @@ export interface DataGridProps<TData> extends Omit<AgGridReactProps<TData>, 'row
     /**
      * @description 显示底部搜索栏，只支持非远程模式
      */
-    showSearch?: boolean | DataGridSearch;
+    showSearch?: boolean | DataGridSearch<TData>;
     /**
      * @description 单元格是否表现成弹性盒子，从而便于垂直，此时也会导致文本ellipsis失效
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "1.4.22",
+  "version": "1.4.23-alpha.0",
   "description": "> TODO: description",
   "homepage": "",
   "license": "MIT",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "028b91754f651ef860b0e57a2a8e538087334e17"
+  "gitHead": "35dfdc73a1e887377b7f67734a0231d1271420a0"
 }