@hi-ui/cascader 4.5.0 → 4.5.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @hi-ui/cascader
 
+## 4.5.2
+
+### Patch Changes
+
+- [#3415](https://github.com/XiaoMi/hiui/pull/3415) [`e7a09db`](https://github.com/XiaoMi/hiui/commit/e7a09db7f75022fee82a254a74a2ec17c6b03638) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(cascader): 修复在异步加载数据下,首次打开弹窗没有定位到已选节点位置的问题 (#3414)
+
+## 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

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,26 @@ var CascaderMenu = function CascaderMenu(_ref) {
     onLoadChildren = _useCascaderContext2.onLoadChildren,
     getItemRequiredProps = _useCascaderContext2.getItemRequiredProps;
   var cls = classname.cx(prefixCls, className);
+  var activeNodeRef = React.useRef();
+  var _useState = React.useState(null),
+    activeNode = _useState[0],
+    setActiveNode = _useState[1];
+  var timeoutId = React.useRef(null);
+  React.useEffect(function () {
+    if (activeNode) {
+      timeoutId.current = setTimeout(function () {
+        scrollIntoView__default["default"](activeNode, {
+          scrollMode: 'if-needed',
+          block: 'center'
+        });
+      }, 100);
+    }
+    return function () {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, [activeNode, activeNodeRef]);
   return /*#__PURE__*/React__default["default"].createElement("ul", {
     className: cls,
     style: style,
@@ -86,6 +108,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) {
+          setActiveNode(node);
+        }
+      },
       key: option.id,
       role: "menu-item",
       className: prefixCls + "-item"

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, useState, 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,26 @@ var CascaderMenu = function CascaderMenu(_ref) {
     onLoadChildren = _useCascaderContext2.onLoadChildren,
     getItemRequiredProps = _useCascaderContext2.getItemRequiredProps;
   var cls = cx(prefixCls, className);
+  var activeNodeRef = useRef();
+  var _useState = useState(null),
+    activeNode = _useState[0],
+    setActiveNode = _useState[1];
+  var timeoutId = useRef(null);
+  useEffect(function () {
+    if (activeNode) {
+      timeoutId.current = setTimeout(function () {
+        scrollIntoView(activeNode, {
+          scrollMode: 'if-needed',
+          block: 'center'
+        });
+      }, 100);
+    }
+    return function () {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, [activeNode, activeNodeRef]);
   return /*#__PURE__*/React.createElement("ul", {
     className: cls,
     style: style,
@@ -74,6 +95,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) {
+          setActiveNode(node);
+        }
+      },
       key: option.id,
       role: "menu-item",
       className: prefixCls + "-item"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/cascader",
-  "version": "4.5.0",
+  "version": "4.5.2",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -60,15 +60,16 @@
     "@hi-ui/use-latest": "^4.0.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"