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

package/es/data-grid/cell-editors/select.d.ts

@@ -2,7 +2,7 @@ import type { BaseOptionType, SelectProps } from 'antd/lib/select';
 import React from 'react';
 import type { ICellEditorParams } from '@ag-grid-community/core';
 import type { ICellEditorReactComp } from '@ag-grid-community/react';
-export declare type SelectEditorParams = Pick<SelectProps<any, BaseOptionType>, 'disabled' | 'options' | 'virtual' | 'showSearch' | 'listHeight' | 'allowClear' | 'mode'> & {
+export declare type SelectEditorParams = Pick<SelectProps<any, BaseOptionType>, 'disabled' | 'options' | 'virtual' | 'showSearch' | 'listHeight' | 'allowClear' | 'mode' | 'optionFilterProp'> & {
     fieldNames?: {
         label: string;
         value: string;
@@ -16,7 +16,7 @@ export declare type SelectEditorParams = Pick<SelectProps<any, BaseOptionType>,
      */
     action?: 'next' | 'stop' | 'none';
 };
-declare const _default: React.ForwardRefExoticComponent<ICellEditorParams<any, any, any> & Pick<SelectProps<any, BaseOptionType>, "disabled" | "mode" | "virtual" | "allowClear" | "showSearch" | "options" | "listHeight"> & {
+declare const _default: React.ForwardRefExoticComponent<ICellEditorParams<any, any, any> & Pick<SelectProps<any, BaseOptionType>, "disabled" | "mode" | "virtual" | "allowClear" | "showSearch" | "optionFilterProp" | "options" | "listHeight"> & {
     fieldNames?: {
         label: string;
         value: string;

package/es/data-grid/cell-editors/select.js

@@ -23,6 +23,8 @@ export default /*#__PURE__*/forwardRef(function SelectEditor(props, ref) {
     valueByOption = props.valueByOption,
     showSearch = props.showSearch,
     listHeight = props.listHeight,
+    _props$optionFilterPr = props.optionFilterProp,
+    optionFilterProp = _props$optionFilterPr === void 0 ? 'value' : _props$optionFilterPr,
     _props$action = props.action,
     action = _props$action === void 0 ? 'next' : _props$action;
   var _useState = useState(props.value),
@@ -88,6 +90,7 @@ export default /*#__PURE__*/forwardRef(function SelectEditor(props, ref) {
     style: {
       width: '100%'
     },
+    optionFilterProp: optionFilterProp,
     onChange: function onChange(changedValue, opt) {
       if (valueByOption) {
         setValue(opt);

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.d.ts

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

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,18 +1,22 @@
 {
   "name": "@lemon-fe/components",
-  "version": "1.2.0-alpha.2",
+  "version": "1.2.1",
   "description": "> TODO: description",
   "homepage": "",
   "license": "ISC",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
+  "sideEffects": [
+    "es/index.less",
+    "src/index.less"
+  ],
   "main": "es/index.js",
   "files": [
     "es"
   ],
   "scripts": {
     "build": "father build",
-    "test": "echo \"Error: run tests from root\" && exit 1",
-    "prepublish": "npm run build"
+    "prepublish": "npm run build",
+    "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "29.2.0",
@@ -22,7 +26,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 +66,5 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "49675d62b0403af381b58a8a3da02255f2d16dbc"
+  "gitHead": "32c25ae162a45c94c5a4f791a9c6f3456f4ca4f7"
 }