@lemon-fe/components 1.2.0-alpha.2 → 1.2.0

package/es/data-grid/components/custom-panel/index.js

@@ -9,7 +9,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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, Space, Tooltip, message } from 'antd';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import Icons from "../../../icons";
 import { useLocaleReceiver } from "../../../locale-receiver";
@@ -52,6 +52,11 @@ export default function CustomColumnPanel(params) {
   var _useLocaleReceiver = useLocaleReceiver('DataGrid'),
     _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
     dataGridLocale = _useLocaleReceiver2[0];
+  var listContainer = useRef(null);
+  var _useState13 = useState(new Set()),
+    _useState14 = _slicedToArray(_useState13, 2),
+    highlights = _useState14[0],
+    setHighlights = _useState14[1];
   var handleColumnState = useDebounce(function () {
     setState(columnApi.getColumnState());
   }, 16);
@@ -95,9 +100,6 @@ export default function CustomColumnPanel(params) {
         return;
       }
       var title = def.headerName || def.field || '';
-      if (keywords && !title.includes(keywords)) {
-        return;
-      }
       var originNode = {
         index: idx,
         key: item.colId,
@@ -146,7 +148,41 @@ export default function CustomColumnPanel(params) {
       prevPath = path;
     });
     return items;
-  }, [state, keywords]);
+  }, [state, columnApi]);
+  var handleSearch = function handleSearch() {
+    var index = -1;
+    var highlight = [];
+    if (keywords) {
+      var idx = 0;
+      var traverse = function traverse(items) {
+        items.forEach(function (item) {
+          var flag = item.title ? item.title.toUpperCase().includes(keywords.toUpperCase()) : false;
+          if (flag) {
+            highlight.push(item);
+            if (index === -1) {
+              index = idx;
+            }
+          }
+          idx += 1;
+          traverse(item.children);
+        });
+      };
+      traverse(list);
+    }
+    if (listContainer.current === null) {
+      return;
+    }
+    setHighlights(new Set(highlight.map(function (item) {
+      return item.key;
+    })));
+    if (index < 0) {
+      listContainer.current.scrollTop = 0;
+      return;
+    }
+    var _listContainer$curren = listContainer.current.getBoundingClientRect(),
+      height = _listContainer$curren.height;
+    listContainer.current.scrollTop = Math.max(24 * index - height / 2, 0);
+  };
   var grid = useGridStore(function (val) {
     return val.grid;
   });
@@ -193,10 +229,16 @@ export default function CustomColumnPanel(params) {
     placeholder: dataGridLocale.searchText,
     onChange: function onChange(e) {
       handleChangeKeywords(e.target.value);
+    },
+    onKeyUp: function onKeyUp(e) {
+      if (e.key === 'Enter') {
+        handleSearch();
+      }
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: prefix('column-panel-icon'),
     onClick: function onClick() {
+      setHighlights(new Set());
       setSearching(false);
       handleChangeKeywords('');
     }
@@ -279,9 +321,11 @@ export default function CustomColumnPanel(params) {
   }, /*#__PURE__*/React.createElement(DragContext.Provider, {
     value: dragActive
   }, /*#__PURE__*/React.createElement("div", {
-    className: prefix('column-panel-body')
+    className: prefix('column-panel-body'),
+    ref: listContainer
   }, list.map(function (node) {
     return /*#__PURE__*/React.createElement(ItemWrapper, {
+      highlights: highlights,
       onEdit: function onEdit(v) {
         var data = grid.getField(v.id);
         if (data !== undefined) {

package/es/data-grid/components/custom-panel/item.d.ts

@@ -9,6 +9,7 @@ interface ItemProps {
     dragActive?: DragActive;
     onEdit: (node: Node) => void;
     onDelete: (node: Node) => void;
+    highlights: Set<string>;
 }
 export default function ItemWrapper(props: Omit<ItemProps, 'dragActive'>): JSX.Element;
 export {};

package/es/data-grid/components/custom-panel/item.js

@@ -21,7 +21,8 @@ var Item = /*#__PURE__*/memo(function (props) {
     level = props.level,
     dragActive = props.dragActive,
     onDelete = props.onDelete,
-    onEdit = props.onEdit;
+    onEdit = props.onEdit,
+    highlights = props.highlights;
   var column = node.column;
   var colDef = (column === null || column === void 0 ? void 0 : column.getColDef()) || {};
   var _useDraggable = useDraggable({
@@ -82,7 +83,7 @@ var Item = /*#__PURE__*/memo(function (props) {
     style: {
       paddingLeft: level * 20 + 8
     },
-    className: classNames(prefix('column-panel-item'), dragActive ? prefix("column-panel-item-active-".concat(dragActive.indicator)) : undefined),
+    className: classNames(prefix('column-panel-item'), dragActive ? prefix("column-panel-item-active-".concat(dragActive.indicator)) : undefined, highlights.has(node.key) ? prefix('column-panel-item-highlight') : undefined),
     ref: setDropRef
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper', {

package/es/data-grid/index.less

@@ -130,7 +130,7 @@
       display: flex;
       align-items: center;
       height: 24px;
-      margin-top: 1px;
+      // margin-top: 1px;
       padding: 0 8px;
 
       &:hover {
@@ -175,6 +175,10 @@
       &:hover &-operator {
         opacity: 1;
       }
+
+      &-highlight {
+        background-color: ~'var(--@{ant-prefix}-primary-2)';
+      }
     }
 
     &-drag-overlay {

package/es/data-grid/locale/zh_CN.js

@@ -38,7 +38,7 @@ var locale = {
   maxWordText: '${headName}最多${maxLength}个字符',
   operationSuccessText: '操作成功',
   displayText: '显示',
-  searchText: '搜索',
+  searchText: '按回车进行搜索',
   addCustomColumnText: '添加自定义列',
   resetText: '重置',
   saveText: '保存',

package/es/filter/locale/zh_CN.js

@@ -7,7 +7,7 @@ var locale = {
   defaultTitleText: '默认',
   noDefaultRemoveText: '不允许删除默认',
   autoPlaceholderText: '请${action}${label}',
-  searchText: '搜索',
+  searchText: '查询',
   selectText: '选择',
   inputText: '输入',
   searchOptionText: '搜索选项',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "1.2.0-alpha.2",
+  "version": "1.2.0",
   "description": "> TODO: description",
   "homepage": "",
   "license": "ISC",
@@ -22,7 +22,7 @@
     "@ag-grid-community/react": "29.2.0",
     "@ag-grid-community/styles": "29.2.0",
     "@dnd-kit/core": "^6.0.8",
-    "@lemon-fe/hooks": "^1.2.0-alpha.1",
+    "@lemon-fe/hooks": "^1.2.0",
     "@lemon-fe/utils": "^1.1.0",
     "async-validator": "^4.2.5",
     "bignumber.js": ">=9.0.0",
@@ -62,5 +62,5 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "49675d62b0403af381b58a8a3da02255f2d16dbc"
+  "gitHead": "bc6eefb9acd1c267e15c7cf8132b4d866d3eb9ca"
 }