carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 5.43 kB
JavaScript
import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import r,{useRef as o,forwardRef as i,createContext as c,useMemo as l,useState as s}from"react";import{StyledResponsiveMenu as a}from"../responsive-vertical-menu.style.js";import{StyledResponsiveMenuListItem as d,StyledResponsiveMenuItem as p,StyledIcon as u,StyledNestedMenuWrapper as m,StyledNestedMenu as v,StyledMenuItemContent as h,StyledResponsiveMenuActionButton as f,StyledResponsiveMenuActionLink as y}from"./responsive-vertical-menu-item.style.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import b from"../../../../style/utils/filter-styled-system-margin-props.js";import{useDepth as O,IncreaseDepth as j}from"../__internal__/depth.context.js";import{useResponsiveVerticalMenu as g}from"../responsive-vertical-menu.context.js";import w from"../../../icon/icon.component.js";import _ from"../../../../__internal__/utils/helpers/guid/index.js";import P from"../../../../__internal__/utils/helpers/events/events.js";function x(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function I(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){x(e,n,t[n])}))}return e}function $(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function C(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const k=c(void 0),D=({customIcon:t,depth:r,hasChildren:o,icon:i,label:c,responsive:l})=>n(h,t?{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:o,icon:!0,responsive:l,children:[t,c]}:{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:o,icon:!!i,responsive:l,children:[i&&e(w,{type:i}),c]}),S=i(((i,c)=>{var{children:h,customIcon:j,icon:w,id:_,href:x,label:S,onClick:M,rel:K,target:E}=i,A=C(i,["children","customIcon","icon","id","href","label","onClick","rel","target"]);const{activeMenuItem:q,responsiveMode:z,setActive:B,setActiveMenuItem:F,reducedMotion:G,left:H,top:J,width:L,height:N}=g(),Q=O(),R=(null==q?void 0:q.id)===_,T=r.Children.count(h)>0,U=o(null),V=l((()=>z&&0===Q),[Q,z]),[W,X]=s(V&&T||Q>=2),Y=e=>{if(P.isEnterKey(e)||P.isSpaceKey(e)){if(T&&e.preventDefault(),!M&&P.isSpaceKey(e)&&e.preventDefault(),V)return;if(T)if(0!==Q||z)X(!W);else{const e=(null==q?void 0:q.id)===_;F(e?null:{id:_,label:S,children:h})}}},Z=e=>{null==M||M(e),B(!1)};return e(d,$(I({},b(A)),{children:T?n(t,{children:[n(p,$(I({active:R,"aria-expanded":z&&0===Q?void 0:R||W,"aria-controls":R||W?z?0===Q?void 0:`${_}-nested-menu-wrapper`:"responsive-vertical-menu-secondary":void 0,"data-component":`responsive-vertical-menu-item-${_}`,"data-depth":Q,"data-role":`responsive-vertical-menu-item-${_}`,depth:Q,hasIcon:!!w||!!j,id:_,onClick:()=>{if(!V)if(0!==Q||z)X(!W);else{const e=(null==q?void 0:q.id)===_;F(e?null:{id:_,label:S,children:h})}},onKeyDown:e=>{z||Y(e)},ref:c,responsive:z,tabIndex:V?-1:0,type:"button"},A),{children:[e(D,{customIcon:j,depth:Q,hasChildren:!0,icon:w,label:S,responsive:z}),!V&&e(u,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:Q,expanded:W||R,reduceMotion:!!G,type:Q>=1?"chevron_down_thick":"chevron_right_thick"})]})),W&&e(m,{"data-component":`${_}-nested-menu-wrapper`,"data-role":`${_}-nested-menu-wrapper`,depth:Q,hasIcon:!!w||!!j,id:`${_}-nested-menu-wrapper`,responsive:z,children:e(v,{"data-component":`${_}-nested-menu`,"data-role":`${_}-nested-menu`,depth:Q,hasIcon:!!w||!!j,id:`${_}-nested-menu`,responsive:z,children:e(k.Provider,{value:_,children:h})})}),R&&!z&&e(a,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:N||"100%",id:"responsive-vertical-menu-secondary",left:H,menu:"secondary",reduceMotion:!1,ref:U,responsive:!1,tabIndex:-1,top:J,width:L,children:q.children})]}):(()=>{const n=I({"data-component":`responsive-vertical-menu-item-${_}`,"data-depth":Q,"data-role":`responsive-vertical-menu-item-${_}`,depth:Q,href:x,id:_,onClick:Z,onKeyDown:e=>{z||Y(e)},rel:K,responsive:z,tabIndex:0,target:E},A),t=e(D,{customIcon:j,depth:Q,hasChildren:!1,icon:w,label:S,responsive:z});return e(M&&!x?f:y,$(I({ref:c},n),{children:t}))})()}))})),M=n=>{var{children:t,id:r,label:i}=n,c=C(n,["children","id","label"]);const l=O(),s=o(null),a=o(r||_());return e(S,$(I({id:a.current,label:i},c),{"data-depth":l,ref:s,children:t&&e(k.Provider,{value:r,children:e(j,{children:t})})}))};export{M as ResponsiveVerticalMenuItem,M as default};