@pisell/materials 1.10.5 → 1.10.6

package/es/components/PisellSuperTabs/PisellSuperTabs.js

@@ -62,11 +62,15 @@ var PisellSuperTabs = function PisellSuperTabs(props, ref) {
     activeKey = _useTabsState.activeKey,
     handleTabChange = _useTabsState.handleTabChange;
   var scrollItemByRowKey = function scrollItemByRowKey(key) {
-    var item = document.querySelector(".pisell-super-tabs-item-".concat(id, "-").concat(key));
-    console.log(".pisell-super-tabs-item-".concat(id, "-").concat(key));
+    var _containerRef$current;
+    var item = Array.from(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelectorAll('[data-pisell-super-tabs-key]')) || []).find(function (element) {
+      return element.dataset.pisellSuperTabsKey === key;
+    });
     if (item) {
       item.scrollIntoView({
-        behavior: 'smooth'
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'nearest'
       });
     }
   };
@@ -140,6 +144,7 @@ var PisellSuperTabs = function PisellSuperTabs(props, ref) {
       // 包裹点击事件处理
       return /*#__PURE__*/React.createElement("div", {
         key: key,
+        "data-pisell-super-tabs-key": key,
         className: classNames('pisell-super-tabs-item', "pisell-super-tabs-item-".concat(id, "-").concat(key), {
           'pisell-super-tabs-item--active': active
         }, tabItemClassName),

package/es/components/PisellTabbar/template/Template1/PisellTabbar.d.ts

@@ -7,6 +7,10 @@ export interface PisellTabbarTemplate1Props extends PisellTabbarProps {
     direction?: PisellTabbarTemplate1Direction;
     /** 是否在每个层级展示自动生成的 All 分类；默认保持展示。 */
     showAllItem?: boolean;
+    /** 是否展示一级分类中自动生成的搜索入口；默认保持展示。 */
+    showSearchItem?: boolean;
+    /** 外部切换选中项时，是否自动把一级分类滚动到可视区域。 */
+    scrollActiveItemIntoView?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<PisellTabbarTemplate1Props & React.RefAttributes<unknown>>;
 export default _default;

package/es/components/PisellTabbar/template/Template1/PisellTabbar.js

@@ -85,9 +85,14 @@ var PisellTabbar = function PisellTabbar(props, ref) {
     _props$direction = props.direction,
     direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
     _props$showAllItem = props.showAllItem,
-    showAllItem = _props$showAllItem === void 0 ? true : _props$showAllItem;
+    showAllItem = _props$showAllItem === void 0 ? true : _props$showAllItem,
+    _props$showSearchItem = props.showSearchItem,
+    showSearchItem = _props$showSearchItem === void 0 ? true : _props$showSearchItem,
+    _props$scrollActiveIt = props.scrollActiveItemIntoView,
+    scrollActiveItemIntoView = _props$scrollActiveIt === void 0 ? false : _props$scrollActiveIt;
   var isVertical = direction === 'vertical';
   var containerRef = useRef(null);
+  var level1TabsRef = useRef(null);
   var searchRef = useRef(null);
   var firstCategoryKey = (_dataSource$0$id = (_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : _dataSource$.id) !== null && _dataSource$0$id !== void 0 ? _dataSource$0$id : (_dataSource$2 = dataSource[0]) === null || _dataSource$2 === void 0 ? void 0 : _dataSource$2.key;
   var initialActiveKey = value !== null && value !== void 0 ? value : showAllItem ? getDefaultActiveKey(dataSource, 'id') : firstCategoryKey !== undefined ? [firstCategoryKey] : [];
@@ -145,6 +150,16 @@ var PisellTabbar = function PisellTabbar(props, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isSearchOpen = _useState2[0],
     setIsSearchOpen = _useState2[1];
+  useEffect(function () {
+    if (!scrollActiveItemIntoView || level1Value == null) return;
+    var animationFrame = requestAnimationFrame(function () {
+      var _level1TabsRef$curren, _level1TabsRef$curren2;
+      (_level1TabsRef$curren = level1TabsRef.current) === null || _level1TabsRef$curren === void 0 || (_level1TabsRef$curren2 = _level1TabsRef$curren.scrollItemByRowKey) === null || _level1TabsRef$curren2 === void 0 || _level1TabsRef$curren2.call(_level1TabsRef$curren, String(level1Value));
+    });
+    return function () {
+      return cancelAnimationFrame(animationFrame);
+    };
+  }, [level1Value, scrollActiveItemIntoView]);
 
   /**
    * 打开搜索模式
@@ -357,7 +372,7 @@ var PisellTabbar = function PisellTabbar(props, ref) {
    */
   var level1DataSource = useMemo(function () {
     var categoryItems = dataSource.length ? addDataSourceItemsByKey(dataSource, LEVEL_ADD_ITEMS.level1.filter(function (itemKey) {
-      return showAllItem || itemKey !== 'all';
+      return (showAllItem || itemKey !== 'all') && (showSearchItem || itemKey !== 'search');
     })) : [];
     var actionItems = (level1Actions || []).map(function (action, index) {
       return {
@@ -378,7 +393,7 @@ var PisellTabbar = function PisellTabbar(props, ref) {
     return isVertical ? full.filter(function (item) {
       return (item === null || item === void 0 ? void 0 : item.key) !== 'expand';
     }) : full;
-  }, [dataSource, isSearchOpen, isVertical, level1Actions, showAllItem]);
+  }, [dataSource, isSearchOpen, isVertical, level1Actions, showAllItem, showSearchItem]);
 
   /**
    * 渲染一级 Tab Item
@@ -646,6 +661,7 @@ var PisellTabbar = function PisellTabbar(props, ref) {
     style: style,
     ref: containerRef
   }, /*#__PURE__*/React.createElement(SuperTabs, {
+    ref: level1TabsRef,
     isControlled: true,
     id: tabbarId,
     className: classNames('pisell-tabbar__level', 'pisell-tabbar__level--1'),

package/lib/components/PisellSuperTabs/PisellSuperTabs.js

@@ -84,10 +84,18 @@ var PisellSuperTabs = (props, ref) => {
     isControlled: isControlled ?? false
   });
   const scrollItemByRowKey = (key) => {
-    const item = document.querySelector(`.pisell-super-tabs-item-${id}-${key}`);
-    console.log(`.pisell-super-tabs-item-${id}-${key}`);
+    var _a2;
+    const item = Array.from(
+      ((_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll(
+        "[data-pisell-super-tabs-key]"
+      )) || []
+    ).find((element) => element.dataset.pisellSuperTabsKey === key);
     if (item) {
-      item.scrollIntoView({ behavior: "smooth" });
+      item.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest"
+      });
     }
   };
   (0, import_react.useImperativeHandle)(ref, () => {
@@ -180,6 +188,7 @@ var PisellSuperTabs = (props, ref) => {
             "div",
             {
               key,
+              "data-pisell-super-tabs-key": key,
               className: (0, import_classnames.default)(
                 "pisell-super-tabs-item",
                 `pisell-super-tabs-item-${id}-${key}`,

package/lib/components/PisellTabbar/template/Template1/PisellTabbar.d.ts

@@ -7,6 +7,10 @@ export interface PisellTabbarTemplate1Props extends PisellTabbarProps {
     direction?: PisellTabbarTemplate1Direction;
     /** 是否在每个层级展示自动生成的 All 分类；默认保持展示。 */
     showAllItem?: boolean;
+    /** 是否展示一级分类中自动生成的搜索入口；默认保持展示。 */
+    showSearchItem?: boolean;
+    /** 外部切换选中项时，是否自动把一级分类滚动到可视区域。 */
+    scrollActiveItemIntoView?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<PisellTabbarTemplate1Props & React.RefAttributes<unknown>>;
 export default _default;

package/lib/components/PisellTabbar/template/Template1/PisellTabbar.js

@@ -81,10 +81,13 @@ var PisellTabbar = (props, ref) => {
     searchProps,
     level1Actions,
     direction = "horizontal",
-    showAllItem = true
+    showAllItem = true,
+    showSearchItem = true,
+    scrollActiveItemIntoView = false
   } = props;
   const isVertical = direction === "vertical";
   const containerRef = (0, import_react.useRef)(null);
+  const level1TabsRef = (0, import_react.useRef)(null);
   const searchRef = (0, import_react.useRef)(null);
   const firstCategoryKey = ((_a = dataSource[0]) == null ? void 0 : _a.id) ?? ((_b = dataSource[0]) == null ? void 0 : _b.key);
   const initialActiveKey = value ?? (showAllItem ? (0, import_utils.getDefaultActiveKey)(dataSource, "id") : firstCategoryKey !== void 0 ? [firstCategoryKey] : []);
@@ -116,6 +119,14 @@ var PisellTabbar = (props, ref) => {
     return getActiveKey(2);
   }, [activeKey]);
   const [isSearchOpen, setIsSearchOpen] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!scrollActiveItemIntoView || level1Value == null) return;
+    const animationFrame = requestAnimationFrame(() => {
+      var _a2, _b2;
+      (_b2 = (_a2 = level1TabsRef.current) == null ? void 0 : _a2.scrollItemByRowKey) == null ? void 0 : _b2.call(_a2, String(level1Value));
+    });
+    return () => cancelAnimationFrame(animationFrame);
+  }, [level1Value, scrollActiveItemIntoView]);
   const openSearchMode = () => {
     setCacheActiveKey(activeKey);
     _setActiveKey([]);
@@ -340,7 +351,7 @@ var PisellTabbar = (props, ref) => {
       const categoryItems = dataSource.length ? (0, import_utils.addDataSourceItemsByKey)(
         dataSource,
         import_constants.LEVEL_ADD_ITEMS.level1.filter(
-          (itemKey) => showAllItem || itemKey !== "all"
+          (itemKey) => (showAllItem || itemKey !== "all") && (showSearchItem || itemKey !== "search")
         )
       ) : [];
       const actionItems = (level1Actions || []).map((action, index) => ({
@@ -356,7 +367,14 @@ var PisellTabbar = (props, ref) => {
       }
       return isVertical ? full.filter((item) => (item == null ? void 0 : item.key) !== "expand") : full;
     },
-    [dataSource, isSearchOpen, isVertical, level1Actions, showAllItem]
+    [
+      dataSource,
+      isSearchOpen,
+      isVertical,
+      level1Actions,
+      showAllItem,
+      showSearchItem
+    ]
   );
   const renderLevel1Item = (0, import_react.useCallback)(
     (itemProps) => {
@@ -658,6 +676,7 @@ var PisellTabbar = (props, ref) => {
     /* @__PURE__ */ import_react.default.createElement(
       import_PisellSuperTabs.default,
       {
+        ref: level1TabsRef,
         isControlled: true,
         id: tabbarId,
         className: (0, import_classnames.default)(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "scripts": {
     "dev:tailwind-css": "tailwindcss -c ./tailwind.materials.config.cjs --postcss ./postcss.materials-tailwind.cjs -i ./src/tailwind-input.css -o ./src/pisell-materials.tw.css --watch",
     "build:tailwind-css:once": "tailwindcss -c ./tailwind.materials.config.cjs --postcss ./postcss.materials-tailwind.cjs -i ./src/tailwind-input.css -o ./src/pisell-materials.tw.css",