@hi-ui/cascader 4.4.1 → 4.5.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @hi-ui/cascader
 
+## 4.5.1
+
+### Patch Changes
+
+- [#3407](https://github.com/XiaoMi/hiui/pull/3407) [`4a1444965`](https://github.com/XiaoMi/hiui/commit/4a1444965bdeeeb12333e43a05caa2e76d74eb47) Thanks [@zyprepare](https://github.com/zyprepare)! - perf(cascader): 体验优化：每次打开菜单时自动定位到已选节点 (#3406)
+
+- Updated dependencies [[`b2de718e9`](https://github.com/XiaoMi/hiui/commit/b2de718e9fd12dbe8fa1d762c6924696c19bc924)]:
+  - @hi-ui/core@4.0.11
+
+## 4.5.0
+
+### Minor Changes
+
+- [#3231](https://github.com/XiaoMi/hiui/pull/3231) [`bbba46153`](https://github.com/XiaoMi/hiui/commit/bbba4615313cd0618deff633bebc657e7f34ec94) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(cascader): onChange 回调中增加选中项对象参数返回 (#3230)
+
+### Patch Changes
+
+- Updated dependencies [[`dc1311a91`](https://github.com/XiaoMi/hiui/commit/dc1311a917518bc5debef755a9fcd4e33fb58790)]:
+  - @hi-ui/use-search-mode@4.2.1
+
 ## 4.4.1
 
 ### Patch Changes

package/lib/cjs/CascaderMenuList.js

@@ -22,12 +22,14 @@ var index = require('./utils/index.js');
 var context = require('./context.js');
 var treeUtils = require('@hi-ui/tree-utils');
 var typeAssertion = require('@hi-ui/type-assertion');
+var scrollIntoView = require('scroll-into-view-if-needed');
 function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
   };
 }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var scrollIntoView__default = /*#__PURE__*/_interopDefaultCompat(scrollIntoView);
 var menuListPrefix = classname.getPrefixCls('cascader-menu-list');
 var CascaderMenuList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$prefixCls = _a.prefixCls,
@@ -74,6 +76,24 @@ var CascaderMenu = function CascaderMenu(_ref) {
     onLoadChildren = _useCascaderContext2.onLoadChildren,
     getItemRequiredProps = _useCascaderContext2.getItemRequiredProps;
   var cls = classname.cx(prefixCls, className);
+  var activeNodeRef = React.useRef();
+  var rafId = React.useRef(0);
+  React.useEffect(function () {
+    if (activeNodeRef.current) {
+      // 每次打开菜单时，滚动到选中的节点，双重 requestAnimationFrame 确保 DOM 已经渲染后再滚动
+      rafId.current = requestAnimationFrame(function () {
+        rafId.current = requestAnimationFrame(function () {
+          scrollIntoView__default["default"](activeNodeRef.current, {
+            scrollMode: 'if-needed',
+            block: 'center'
+          });
+        });
+      });
+    }
+    return function () {
+      cancelAnimationFrame(rafId.current);
+    };
+  }, [activeNodeRef]);
   return /*#__PURE__*/React__default["default"].createElement("ul", {
     className: cls,
     style: style,
@@ -86,6 +106,11 @@ var CascaderMenu = function CascaderMenu(_ref) {
     var disabled = disabledContext || option.disabled;
     var optionCls = classname.cx(prefixCls + "-option", active && prefixCls + "-option--active", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled", selected && prefixCls + "-option--selected");
     return /*#__PURE__*/React__default["default"].createElement("li", {
+      ref: function ref(node) {
+        if (node && active) {
+          activeNodeRef.current = node;
+        }
+      },
       key: option.id,
       role: "menu-item",
       className: prefixCls + "-item"

package/lib/cjs/use-cascader.js

@@ -56,7 +56,7 @@ var useCascader = function useCascader(_a) {
     tryChangeValue(itemPaths.map(function (_ref) {
       var id = _ref.id;
       return id;
-    }));
+    }), item, itemPaths);
     onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, itemPaths);
   };
   // 单击选中某项

package/lib/esm/CascaderMenuList.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef, useEffect } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { defaultLoadingIcon, defaultSuffixIcon, defaultLeafIcon } from './icons/index.js';
@@ -16,6 +16,7 @@ import { getItemEventData, checkCanLoadChildren } from './utils/index.js';
 import { useCascaderContext } from './context.js';
 import { getTopDownAncestors } from '@hi-ui/tree-utils';
 import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
+import scrollIntoView from 'scroll-into-view-if-needed';
 var menuListPrefix = getPrefixCls('cascader-menu-list');
 var CascaderMenuList = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$prefixCls = _a.prefixCls,
@@ -62,6 +63,24 @@ var CascaderMenu = function CascaderMenu(_ref) {
     onLoadChildren = _useCascaderContext2.onLoadChildren,
     getItemRequiredProps = _useCascaderContext2.getItemRequiredProps;
   var cls = cx(prefixCls, className);
+  var activeNodeRef = useRef();
+  var rafId = useRef(0);
+  useEffect(function () {
+    if (activeNodeRef.current) {
+      // 每次打开菜单时，滚动到选中的节点，双重 requestAnimationFrame 确保 DOM 已经渲染后再滚动
+      rafId.current = requestAnimationFrame(function () {
+        rafId.current = requestAnimationFrame(function () {
+          scrollIntoView(activeNodeRef.current, {
+            scrollMode: 'if-needed',
+            block: 'center'
+          });
+        });
+      });
+    }
+    return function () {
+      cancelAnimationFrame(rafId.current);
+    };
+  }, [activeNodeRef]);
   return /*#__PURE__*/React.createElement("ul", {
     className: cls,
     style: style,
@@ -74,6 +93,11 @@ var CascaderMenu = function CascaderMenu(_ref) {
     var disabled = disabledContext || option.disabled;
     var optionCls = cx(prefixCls + "-option", active && prefixCls + "-option--active", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled", selected && prefixCls + "-option--selected");
     return /*#__PURE__*/React.createElement("li", {
+      ref: function ref(node) {
+        if (node && active) {
+          activeNodeRef.current = node;
+        }
+      },
       key: option.id,
       role: "menu-item",
       className: prefixCls + "-item"

package/lib/esm/use-cascader.js

@@ -51,7 +51,7 @@ var useCascader = function useCascader(_a) {
     tryChangeValue(itemPaths.map(function (_ref) {
       var id = _ref.id;
       return id;
-    }));
+    }), item, itemPaths);
     onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, itemPaths);
   };
   // 单击选中某项

package/lib/types/use-cascader.d.ts

@@ -41,7 +41,7 @@ export interface UseCascaderProps {
     /**
      * 选中值改变时的回调
      */
-    onChange?: (value: React.ReactText[]) => void;
+    onChange?: (value: React.ReactText[], targetOption?: CascaderItemEventData, optionPaths?: FlattedCascaderDataItem[]) => void;
     /**
      * 选中选项时触发，仅供内部使用。暂不对外暴露
      * @private

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/cascader",
-  "version": "4.4.1",
+  "version": "4.5.1",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -58,17 +58,18 @@
     "@hi-ui/use-check-state": "^4.0.4",
     "@hi-ui/use-data-source": "^4.0.4",
     "@hi-ui/use-latest": "^4.0.4",
-    "@hi-ui/use-search-mode": "^4.1.4",
+    "@hi-ui/use-search-mode": "^4.2.1",
     "@hi-ui/use-toggle": "^4.0.4",
-    "@hi-ui/use-uncontrolled-state": "^4.0.4"
+    "@hi-ui/use-uncontrolled-state": "^4.0.4",
+    "scroll-into-view-if-needed": "^3.1.0"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=4.0.8",
+    "@hi-ui/core": ">=4.0.11",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^4.0.8",
+    "@hi-ui/core": "^4.0.11",
     "@hi-ui/core-css": "^4.1.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"