react-tabs
Version:
An accessible and easy tab component for ReactJS
3 lines (2 loc) • 9.23 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.ReactTabs={},e.React)}(this,function(e,p){"use strict";var b="default"in p?p.default:p;function h(){return(h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function a(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}function m(e,t){if(null==e)return{};var n,r,a={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],0<=t.indexOf(n)||(a[n]=e[n]);return a}function v(e){return e.type&&"Tab"===e.type.tabsRole}function y(e){return e.type&&"TabPanel"===e.type.tabsRole}function C(e){return e.type&&"TabList"===e.type.tabsRole}function T(e,n){return p.Children.map(e,function(e){return null===e?null:v(t=e)||C(t)||y(t)?n(e):e.props&&e.props.children&&"object"==typeof e.props.children?p.cloneElement(e,function(a){for(var e=1;e<arguments.length;e++){var s=null!=arguments[e]?arguments[e]:{},t=Object.keys(s);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(s).filter(function(e){return Object.getOwnPropertyDescriptor(s,e).enumerable}))),t.forEach(function(e){var t,n,r;t=a,r=s[n=e],n in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r})}return a}({},e.props,{children:T(e.props.children,n)})):e;var t})}function n(e,t){return p.Children.forEach(e,function(e){null!==e&&(v(e)||y(e)?t(e):e.props&&e.props.children&&"object"==typeof e.props.children&&(C(e)&&t(e),n(e.props.children,t)))})}var t,g,N=(function(e){!function(){var o={}.hasOwnProperty;function l(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var r=typeof n;if("string"===r||"number"===r)e.push(n);else if(Array.isArray(n)&&n.length){var a=l.apply(null,n);a&&e.push(a)}else if("object"===r)for(var s in n)o.call(n,s)&&n[s]&&e.push(s)}}return e.join(" ")}e.exports?(l.default=l,e.exports=l):window.classNames=l}()}(t={exports:{}},t.exports),t.exports),r=0;function s(){return"react-tabs-"+r++}function l(e){var t=0;return n(e,function(e){v(e)&&t++}),t}function o(e){return"getAttribute"in e&&"tab"===e.getAttribute("role")}function i(e){return"true"===e.getAttribute("aria-disabled")}try{g=!("undefined"==typeof window||!window.document||!window.document.activeElement)}catch(e){g=!1}var c=function(r){function e(){for(var a,e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return(a=r.call.apply(r,[this].concat(t))||this).tabNodes=[],a.handleKeyDown=function(e){if(a.isTabFromContainer(e.target)){var t=a.props.selectedIndex,n=!1,r=!1;32!==e.keyCode&&13!==e.keyCode||(r=!(n=!0),a.handleClick(e)),37===e.keyCode||38===e.keyCode?(t=a.getPrevTab(t),r=n=!0):39===e.keyCode||40===e.keyCode?(t=a.getNextTab(t),r=n=!0):35===e.keyCode?(t=a.getLastTab(),r=n=!0):36===e.keyCode&&(t=a.getFirstTab(),r=n=!0),n&&e.preventDefault(),r&&a.setSelected(t,e)}},a.handleClick=function(e){var t=e.target;do{if(a.isTabFromContainer(t)){if(i(t))return;var n=[].slice.call(t.parentNode.children).filter(o).indexOf(t);return void a.setSelected(n,e)}}while(null!==(t=t.parentNode))},a}a(e,r);var t=e.prototype;return t.setSelected=function(e,t){if(!(e<0||e>=this.getTabsCount())){var n=this.props;(0,n.onSelect)(e,n.selectedIndex,t)}},t.getNextTab=function(e){for(var t=this.getTabsCount(),n=e+1;n<t;n++)if(!i(this.getTab(n)))return n;for(var r=0;r<e;r++)if(!i(this.getTab(r)))return r;return e},t.getPrevTab=function(e){for(var t=e;t--;)if(!i(this.getTab(t)))return t;for(t=this.getTabsCount();t-- >e;)if(!i(this.getTab(t)))return t;return e},t.getFirstTab=function(){for(var e=this.getTabsCount(),t=0;t<e;t++)if(!i(this.getTab(t)))return t;return null},t.getLastTab=function(){for(var e=this.getTabsCount();e--;)if(!i(this.getTab(e)))return e;return null},t.getTabsCount=function(){return l(this.props.children)},t.getPanelsCount=function(){var t,e=this.props.children;return t=0,n(e,function(e){y(e)&&t++}),t},t.getTab=function(e){return this.tabNodes["tabs-"+e]},t.getChildren=function(){var o=this,r=0,e=this.props,t=e.children,l=e.disabledTabClassName,i=e.focus,c=e.forceRenderTabPanel,d=e.selectedIndex,u=e.selectedTabClassName,f=e.selectedTabPanelClassName;this.tabIds=this.tabIds||[],this.panelIds=this.panelIds||[];for(var n=this.tabIds.length-this.getTabsCount();n++<0;)this.tabIds.push(s()),this.panelIds.push(s());return T(t,function(e){var t=e;if(C(e)){var a=0,s=!1;g&&(s=b.Children.toArray(e.props.children).filter(v).some(function(e,t){return document.activeElement===o.getTab(t)})),t=p.cloneElement(e,{children:T(e.props.children,function(e){var t="tabs-"+a,n=d===a,r={tabRef:function(e){o.tabNodes[t]=e},id:o.tabIds[a],panelId:o.panelIds[a],selected:n,focus:n&&(i||s)};return u&&(r.selectedClassName=u),l&&(r.disabledClassName=l),a++,p.cloneElement(e,r)})})}else if(y(e)){var n={id:o.panelIds[r],tabId:o.tabIds[r],selected:d===r};c&&(n.forceRender=c),f&&(n.selectedClassName=f),r++,t=p.cloneElement(e,n)}return t})},t.isTabFromContainer=function(e){if(!o(e))return!1;var t=e.parentElement;do{if(t===this.node)return!0;if(t.getAttribute("data-tabs"))break;t=t.parentElement}while(t);return!1},t.render=function(){var t=this,e=this.props,n=(e.children,e.className),r=(e.disabledTabClassName,e.domRef),a=(e.focus,e.forceRenderTabPanel,e.onSelect,e.selectedIndex,e.selectedTabClassName,e.selectedTabPanelClassName,m(e,["children","className","disabledTabClassName","domRef","focus","forceRenderTabPanel","onSelect","selectedIndex","selectedTabClassName","selectedTabPanelClassName"]));return b.createElement("div",h({},a,{className:N(n),onClick:this.handleClick,onKeyDown:this.handleKeyDown,ref:function(e){t.node=e,r&&r(e)},"data-tabs":!0}),this.getChildren())},e}(p.Component);c.defaultProps={className:"react-tabs",focus:!1};var d=function(t){function o(e){var s;return(s=t.call(this,e)||this).handleSelected=function(e,t,n){var r=s.props.onSelect;if("function"!=typeof r||!1!==r(e,t,n)){var a={focus:"keydown"===n.type};o.inUncontrolledMode(s.props)&&(a.selectedIndex=e),s.setState(a)}},s.state=o.copyPropsToState(s.props,{},e.defaultFocus),s}a(o,t);var e=o.prototype;return e.componentWillReceiveProps=function(t){this.setState(function(e){return o.copyPropsToState(t,e)})},o.inUncontrolledMode=function(e){return null===e.selectedIndex},o.copyPropsToState=function(e,t,n){void 0===n&&(n=!1);var r={focus:n};if(o.inUncontrolledMode(e)){var a=l(e.children)-1,s=null;s=null!=t.selectedIndex?Math.min(t.selectedIndex,a):e.defaultIndex||0,r.selectedIndex=s}return r},e.render=function(){var e=this.props,t=e.children,n=(e.defaultIndex,e.defaultFocus,m(e,["children","defaultIndex","defaultFocus"])),r=this.state,a=r.focus,s=r.selectedIndex;return n.focus=a,n.onSelect=this.handleSelected,null!=s&&(n.selectedIndex=s),b.createElement(c,n,t)},o}(p.Component);d.defaultProps={defaultFocus:!1,forceRenderTabPanel:!1,selectedIndex:null,defaultIndex:null},d.tabsRole="Tabs";var u=function(e){function t(){return e.apply(this,arguments)||this}return a(t,e),t.prototype.render=function(){var e=this.props,t=e.children,n=e.className,r=m(e,["children","className"]);return b.createElement("ul",h({},r,{className:N(n),role:"tablist"}),t)},t}(p.Component);u.defaultProps={className:"react-tabs__tab-list"},u.tabsRole="TabList";var f="react-tabs__tab",I=function(e){function t(){return e.apply(this,arguments)||this}a(t,e);var n=t.prototype;return n.componentDidMount=function(){this.checkFocus()},n.componentDidUpdate=function(){this.checkFocus()},n.checkFocus=function(){var e=this.props,t=e.selected,n=e.focus;t&&n&&this.node.focus()},n.render=function(){var e,t=this,n=this.props,r=n.children,a=n.className,s=n.disabled,o=n.disabledClassName,l=(n.focus,n.id),i=n.panelId,c=n.selected,d=n.selectedClassName,u=n.tabIndex,f=n.tabRef,p=m(n,["children","className","disabled","disabledClassName","focus","id","panelId","selected","selectedClassName","tabIndex","tabRef"]);return b.createElement("li",h({},p,{className:N(a,(e={},e[d]=c,e[o]=s,e)),ref:function(e){t.node=e,f&&f(e)},role:"tab",id:l,"aria-selected":c?"true":"false","aria-disabled":s?"true":"false","aria-controls":i,tabIndex:u||(c?"0":null)}),r)},t}(p.Component);I.defaultProps={className:f,disabledClassName:f+"--disabled",focus:!1,id:null,panelId:null,selected:!1,selectedClassName:f+"--selected"},I.tabsRole="Tab";var x="react-tabs__tab-panel",P=function(e){function t(){return e.apply(this,arguments)||this}return a(t,e),t.prototype.render=function(){var e,t=this.props,n=t.children,r=t.className,a=t.forceRender,s=t.id,o=t.selected,l=t.selectedClassName,i=t.tabId,c=m(t,["children","className","forceRender","id","selected","selectedClassName","tabId"]);return b.createElement("div",h({},c,{className:N(r,(e={},e[l]=o,e)),role:"tabpanel",id:s,"aria-labelledby":i}),a||o?n:null)},t}(p.Component);P.defaultProps={className:x,forceRender:!1,selectedClassName:x+"--selected"},P.tabsRole="TabPanel",e.Tabs=d,e.TabList=u,e.Tab=I,e.TabPanel=P,e.resetIdCounter=function(){r=0},Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=react-tabs.production.min.js.map