UNPKG

chakra-ui-bottom-navigation

Version:

Bottom navigation component built for chakra

3 lines (2 loc) 4.28 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("@chakra-ui/react"),a=require("@chakra-ui/react-utils"),o=require("@chakra-ui/utils"),n=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,i=require("@chakra-ui/descendant"),r=require("@chakra-ui/theme-tools");function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var o in a)Object.prototype.hasOwnProperty.call(a,o)&&(e[o]=a[o])}return e}).apply(this,arguments)}function c(e,t){if(null==e)return{};var a,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t.indexOf(a=i[o])>=0||(n[a]=e[a]);return n}var l=i.createDescendantContext(),m=l[0],u=l[1],v=l[2],d=l[3],f=a.createContext({name:"BottomNavigationContext",errorMessage:"useBottomNavigationContext: `context` is undefined. Seems you forgot to wrap the accordion components in `<BottomNavigation />`"}),g=f[0],h=f[1],p=a.createContext({name:"BottomNavigationItemContext",errorMessage:"useBottomNavigationItemContext: `context` is undefined. Seems you forgot to wrap the accordion components in `<BottomNavigationItem />`"}),x=p[0],b=p[1],N=["value","onChange","showLabel"],_=["value","onClick"],y=t.createStylesContext("BottomNavigation"),B=y[0],C=y[1],k=t.forwardRef((function(e,a){var i=e.value,r=e.onChange,s=e.showLabel,l=c(e,N),u=t.useMultiStyleConfig("BottomNavigation",l),d=t.omitThemingProps(l),f=v(),h=n.useMemo((function(){return{value:i,onChange:r,showLabel:s}}),[i,r,s]);return n.createElement(g,{value:h},n.createElement(m,{value:f},n.createElement(B,{value:u},n.createElement(t.chakra.nav,Object.assign({ref:a,className:o.cx("chakra-bottom-navigation",l.className),__css:u.container},d)))))}));o.__DEV__&&(k.displayName="BottomNavigation"),k.defaultProps={showLabel:"always"};var w=t.forwardRef((function(e,i){var r=e.value,l=e.onClick,m=c(e,_),u=m.disabled||!1,v=C(),f=h(),g=d({disabled:u}),p=g.register,b=r||g.index,N=b===f.value,y=n.useCallback((function(e){null==l||l(e),f.onChange(b)}),[b,f.onChange]),B=s({opacity:u||!N?.4:1},v.item),k=n.useMemo((function(){return{isDisabled:u,isSelected:N}}),[u,N]);return n.createElement(x,{value:k},n.createElement(t.chakra.button,Object.assign({ref:a.mergeRefs(p,i),className:o.cx("chakra-bottom-navigation__item",m.className),__css:B,"aria-selected":o.ariaAttr(N),onClick:y},m)))}));o.__DEV__&&(w.displayName="BottomNavigationItem");var E=function(e){var a=C();return n.createElement(t.Icon,Object.assign({"aria-hidden":!0,__css:a.icon},e,{className:o.cx("chakra-bottom-navigation__icon",e.className)}))};o.__DEV__&&(E.displayName="BottomNavigationIcon");var S=t.forwardRef((function(e,a){var i=h().showLabel,r=b().isSelected,c=C(),l=n.useMemo((function(){return o.dataAttr("never"===i||"if-active"===i&&!r)}),[i,r]),m=s({flex:1},c.label);return n.createElement(B,{value:c},n.createElement(t.chakra.div,Object.assign({ref:a,className:o.cx("chakra-bottom-navigation__label",e.className),__css:m,"data-hidden":l},e)))}));function D(e){var t=e.colorScheme;return{container:{bottom:0,left:0,right:0,color:r.mode(t+".900","#fff")(e),bg:r.mode(t+".300",t+".900")(e),boxShadow:"lg"}}}o.__DEV__&&(S.displayName="BottomNavigationLabel");var O={parts:["container","item","label","icon"],baseStyle:{container:{position:"fixed",display:"flex",justifyContent:"space-between",px:4,py:2},item:{flex:1,mx:4,opacity:.4,_selected:{opacity:1}},label:{_hidden:{opacity:0,height:0,width:0,overflow:"hidden"}}},variants:{flat:D,float:function(e){var t=D(e);return s({},t,{container:s({},t.container,{bottom:4,left:4,right:4,borderRadius:"base"})})}},defaultProps:{variant:"float",colorScheme:"blue"}};exports.BottomNavigation=k,exports.BottomNavigationDescendantsProvider=m,exports.BottomNavigationIcon=E,exports.BottomNavigationItem=w,exports.BottomNavigationItemProvider=x,exports.BottomNavigationLabel=S,exports.BottomNavigationProvider=g,exports.BottomNavigationStyleConfig=O,exports.useBottomNavigationContext=h,exports.useBottomNavigationDescendant=d,exports.useBottomNavigationDescendants=v,exports.useBottomNavigationDescendantsContext=u,exports.useBottomNavigationItemContext=b,exports.withDefaultStyles=function(e){return t.mergeThemeOverride(O,e)}; //# sourceMappingURL=chakra-ui-bottom-navigation.cjs.production.min.js.map