@hi-ui/cascader 5.0.0-experimental.2 → 5.0.0-experimental.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hi-ui/cascader
 
+## 5.0.0-experimental.3
+
+### Minor Changes
+
+- bf1174ed8: feat(cascader): 每次打开选择面板时自动定位到已选节点位置 (5.0)
+
 ## 5.0.0-experimental.2
 
 ### Minor Changes

package/lib/cjs/CascaderMenuList.js

@@ -22,6 +22,7 @@ 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');
 var VirtualList = require('@hi-ui/virtual-list');
 function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
@@ -29,6 +30,7 @@ function _interopDefaultCompat(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var scrollIntoView__default = /*#__PURE__*/_interopDefaultCompat(scrollIntoView);
 var VirtualList__default = /*#__PURE__*/_interopDefaultCompat(VirtualList);
 var menuListPrefix = classname.getPrefixCls('cascader-menu-list');
 var CascaderMenuList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -82,6 +84,26 @@ var CascaderMenu = function CascaderMenu(_ref) {
     height: 260,
     itemHeight: 32
   };
+  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, virtual]);
   return /*#__PURE__*/React__default["default"].createElement("ul", {
     className: cls,
     style: menuStyle,
@@ -99,13 +121,15 @@ var CascaderMenu = function CascaderMenu(_ref) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, {
       key: option.id,
       option: option,
-      prefixCls: prefixCls
+      prefixCls: prefixCls,
+      setActiveNode: setActiveNode
     });
   }) : null);
 };
 var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var option = _ref2.option,
-    prefixCls = _ref2.prefixCls;
+    prefixCls = _ref2.prefixCls,
+    setActiveNode = _ref2.setActiveNode;
   var _useCascaderContext3 = context.useCascaderContext(),
     flatted = _useCascaderContext3.flatted,
     disabledContext = _useCascaderContext3.disabled,
@@ -125,7 +149,11 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref2, 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", classNames === null || classNames === void 0 ? void 0 : classNames.option);
   return /*#__PURE__*/React__default["default"].createElement("li", {
-    ref: ref,
+    ref: function ref(node) {
+      if (node && active) {
+        setActiveNode === null || setActiveNode === void 0 ? void 0 : 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';
 import VirtualList from '@hi-ui/virtual-list';
 var menuListPrefix = getPrefixCls('cascader-menu-list');
 var CascaderMenuList = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -69,6 +70,26 @@ var CascaderMenu = function CascaderMenu(_ref) {
     height: 260,
     itemHeight: 32
   };
+  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, virtual]);
   return /*#__PURE__*/React.createElement("ul", {
     className: cls,
     style: menuStyle,
@@ -86,13 +107,15 @@ var CascaderMenu = function CascaderMenu(_ref) {
     return /*#__PURE__*/React.createElement(MenuItem, {
       key: option.id,
       option: option,
-      prefixCls: prefixCls
+      prefixCls: prefixCls,
+      setActiveNode: setActiveNode
     });
   }) : null);
 };
 var MenuItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var option = _ref2.option,
-    prefixCls = _ref2.prefixCls;
+    prefixCls = _ref2.prefixCls,
+    setActiveNode = _ref2.setActiveNode;
   var _useCascaderContext3 = useCascaderContext(),
     flatted = _useCascaderContext3.flatted,
     disabledContext = _useCascaderContext3.disabled,
@@ -112,7 +135,11 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref2, 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", classNames === null || classNames === void 0 ? void 0 : classNames.option);
   return /*#__PURE__*/React.createElement("li", {
-    ref: ref,
+    ref: function ref(node) {
+      if (node && active) {
+        setActiveNode === null || setActiveNode === void 0 ? void 0 : setActiveNode(node);
+      }
+    },
     key: option.id,
     role: "menu-item",
     className: prefixCls + "-item",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/cascader",
-  "version": "5.0.0-experimental.2",
+  "version": "5.0.0-experimental.3",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",