react-tabs
Version:
An accessible and easy tab component for ReactJS
2 lines • 3.13 kB
JavaScript
;exports.__esModule=true;exports.default=void 0;var _propTypes=require("prop-types");var _react=_interopRequireWildcard(require("react"));var _propTypes2=require("../helpers/propTypes");var _UncontrolledTabs=_interopRequireDefault(require("./UncontrolledTabs"));var _count=require("../helpers/count");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}const MODE_CONTROLLED=0;const MODE_UNCONTROLLED=1;const propTypes={children:_propTypes2.childrenPropType,onSelect:_propTypes2.onSelectPropType,selectedIndex:_propTypes2.selectedIndexPropType};const defaultProps={defaultFocus:false,focusTabOnClick:true,forceRenderTabPanel:false,selectedIndex:null,defaultIndex:null,environment:null,disableUpDownKeys:false,disableLeftRightKeys:false};const getModeFromProps=props=>{return props.selectedIndex===null?MODE_UNCONTROLLED:MODE_CONTROLLED};const checkForIllegalModeChange=(props,mode)=>{if(process.env.NODE_ENV!=="production"&&mode!=undefined&&mode!==getModeFromProps(props)){throw new Error(`Switching between controlled mode (by using \`selectedIndex\`) and uncontrolled mode is not supported in \`Tabs\`.
For more information about controlled and uncontrolled mode of react-tabs see https://github.com/reactjs/react-tabs#controlled-vs-uncontrolled-mode.`)}};const Tabs=props=>{(0,_propTypes.checkPropTypes)(propTypes,props,"prop","Tabs");const{children,defaultFocus,defaultIndex,focusTabOnClick,onSelect,...attributes}={...defaultProps,...props};const[focus,setFocus]=(0,_react.useState)(defaultFocus);const[mode]=(0,_react.useState)(getModeFromProps(attributes));const[selectedIndex,setSelectedIndex]=(0,_react.useState)(mode===MODE_UNCONTROLLED?defaultIndex||0:null);(0,_react.useEffect)(()=>{setFocus(false)},[]);if(mode===MODE_UNCONTROLLED){const tabsCount=(0,_count.getTabsCount)(children);(0,_react.useEffect)(()=>{if(selectedIndex!=null){const maxTabIndex=Math.max(0,tabsCount-1);setSelectedIndex(Math.min(selectedIndex,maxTabIndex))}},[tabsCount])}checkForIllegalModeChange(attributes,mode);const handleSelected=(index,last,event)=>{if(typeof onSelect==="function"){if(onSelect(index,last,event)===false)return}if(focusTabOnClick){setFocus(true)}if(mode===MODE_UNCONTROLLED){setSelectedIndex(index)}};let subProps={...props,...attributes};subProps.focus=focus;subProps.onSelect=handleSelected;if(selectedIndex!=null){subProps.selectedIndex=selectedIndex}delete subProps.defaultFocus;delete subProps.defaultIndex;delete subProps.focusTabOnClick;return _react.default.createElement(_UncontrolledTabs.default,subProps,children)};Tabs.tabsRole="Tabs";var _default=exports.default=Tabs;