@shopgate/engage/components/SideNavigation/SideNavigationCategoriesItem.js

Shopgate's ENGAGE library.

function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useCallback,useMemo,useEffect}from'react';import ArrowDrop from'@shopgate/pwa-ui-shared/icons/ArrowDropIcon';import{bin2hex}from'@shopgate/pwa-common/helpers/data';import{CATEGORY_PATH}from'@shopgate/pwa-common-commerce/category/constants';import{ProgressBar}from'@shopgate/pwa-ui-shared';// eslint-disable-next-line import/no-cycle
import SideNavigationCategoriesItemChildren from"./SideNavigationCategoriesItemChildren";import SideNavigationItem from"./SideNavigationItem";import connect from"./SideNavigationCategoriesItem.connector";import{chevronButton,chevronUp,chevronDown,progressBar,open}from"./SideNavigationCategoriesItem.style";import{useSideNavigation}from"./SideNavigation.hooks";/**
 * The SideNavigationCategoriesItem component
 * @returns {JSX}
 */var SideNavigationCategoriesItem=function SideNavigationCategoriesItem(_ref){var categoryId=_ref.categoryId,category=_ref.category,subcategories=_ref.subcategories,subcategoriesFetching=_ref.subcategoriesFetching,fetchCategory=_ref.fetchCategory,level=_ref.level;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isOpen=_useState2[0],setIsOpen=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isLoading=_useState4[0],setIsLoading=_useState4[1];var _useSideNavigation=useSideNavigation(),maxCategoryNesting=_useSideNavigation.maxCategoryNesting,activeCategoryId=_useSideNavigation.activeCategoryId;var hasSubcategories=useMemo(function(){return category.childrenCount!==0;},[category.childrenCount]);var maxNestingReached=useMemo(function(){return level+1===maxCategoryNesting;},[level,maxCategoryNesting]);var handleClick=useCallback(function(){setIsOpen(!isOpen);if(hasSubcategories&&!subcategories){setIsLoading(true);fetchCategory(categoryId);}},[categoryId,fetchCategory,hasSubcategories,isOpen,subcategories]);useEffect(function(){if(isLoading&&(subcategories||!subcategoriesFetching)){setIsLoading(false);}},[isLoading,subcategories,subcategoriesFetching]);var buttonRight=useMemo(function(){if(!maxNestingReached&&hasSubcategories){return React.createElement("button",{type:"button",onClick:handleClick,className:chevronButton},React.createElement(ArrowDrop,{className:(isOpen&&subcategories?chevronUp:chevronDown).toString()}));}return null;},[handleClick,hasSubcategories,isOpen,maxNestingReached,subcategories]);if(!category){return null;}return React.createElement(SideNavigationItem,{href:"".concat(CATEGORY_PATH,"/").concat(bin2hex(categoryId)),label:category.name,level:level,buttonRight:buttonRight,forceActive:activeCategoryId===categoryId,className:level===0&&isOpen?open:null},isLoading&&React.createElement("div",{className:progressBar},React.createElement(ProgressBar,null)),!maxNestingReached&&isOpen&&hasSubcategories&&subcategories&&React.createElement(SideNavigationCategoriesItemChildren,{subcategories:subcategories,level:level+1}));};SideNavigationCategoriesItem.defaultProps={subcategories:null,subcategoriesFetching:false,categoryId:null,level:0};export default connect(SideNavigationCategoriesItem);