retabbed
Version:
Primitive to build simple, flexible, WAI-ARIA compliant React tab components
3 lines (2 loc) • 6.65 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],t):t(e.Retabbed={},e.React,e.PropTypes)}(this,function(e,t,n){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t,n=n&&n.hasOwnProperty("default")?n.default:n;var r=0;function o(){}function a(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return function(e){for(var n=arguments.length,r=Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];return t.some(function(t){return t&&t.apply(void 0,[e].concat(r)),e.preventTabsDefault||e.hasOwnProperty("nativeEvent")&&e.nativeEvent.preventTabsDefault})}}function i(e,t){var n=Array.isArray(e)?e[0]:e;return!n&&t?t:n}var s=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},l=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},d=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},u=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},c=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},p=function(e){function t(){var n,o;s(this,t);for(var i=arguments.length,d=Array(i),p=0;p<i;p++)d[p]=arguments[p];return n=o=c(this,e.call.apply(e,[this].concat(d))),o.tabs=[],o.tabPanels=[],o.id=o.props.id||"retabbed-"+String(r++),o.focus=o.props.defaultFocus,o.clearTabs=function(){o.tabs=[]},o.clearTabPanels=function(){o.tabPanels=[]},o.handleClickAtTabIndex=function(e,t){t.preventDefault();var n=o.props,r=n.onSelect,a=n.selectedIndex;a!==e&&(o.focus=!0,r(e,a,t))},o.handleKeyPressAtTabIndex=function(e,t){var n=o.props,r=n.onSelect,a=n.selectedIndex,i=t.keyCode,s=o,l=s.getPrevTab,d=s.getNextTab,u={37:l,39:d,38:l,40:d,36:s.getFirstTab,35:s.getLastTab}[i];if(u){o.focus=!0,t.preventDefault();var c=u(e,t);r&&r(c,a,t)}},o.getPrevTab=function(e){for(var t=e;t--;)if(!o.getTab(t).disabled)return t;for(t=o.getTabsCount();t-- >e+1;)if(!o.getTab(t).disabled)return t;return e},o.getNextTab=function(e){for(var t=o.getTabsCount(),n=e+1;n<t;n++)if(!o.getTab(n).disabled)return n;for(var r=0;r<e;r++)if(!o.getTab(r).disabled)return r;return e},o.getFirstTab=function(){for(var e=o.getTabsCount(),t=0;t<e;t++)if(!o.getTab(t).disabled)return t;return null},o.getLastTab=function(){for(var e=o.getTabsCount();e--;)if(!o.getTab(e).disabled)return e;return null},o.getTabListProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return l({role:"tablist"},e)},o.getTabPanelProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.id,n=e.tabId,r=e.index,a=u(e,["id","tabId","index"]),i={},s=r;return void 0===s?(o.tabPanels.push(i),s=o.tabPanels.indexOf(i)):o.tabPanels[s]=i,l({role:"tabpanel",id:t||o.id+"-tabpanel-"+s,"aria-hidden":s!==o.props.selectedIndex,"aria-labelledby":n||o.id+"-tab-"+s},a)},o.getTabProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.id,n=e.panelId,r=e.index,i=e.onKeyDown,s=e.onClick,d=u(e,["id","panelId","index","onKeyDown","onClick"]),c=o.props.selectedIndex,p=r,f={disabled:d.disabled};void 0===p?(o.tabs.push(f),p=o.tabs.indexOf(f)):o.tabs[p]=f;var b=!d.disabled&&c===p,h=b?{onKeyDown:a(i,o.handleKeyPressAtTabIndex.bind(o,p))}:{};d.disabled||(h.onClick=a(s,o.handleClickAtTabIndex.bind(o,p)));var y=b?{tabIndex:0}:d.disabled?{}:{tabIndex:-1};return l({role:"tab",id:t||o.id+"-tab-"+p,focus:b&&o.focus,"aria-selected":b,"aria-disabled":d.disabled,"aria-controls":n||o.id+"-tab-"+p},h,y,d)},c(o,n)}return d(t,e),t.prototype.getTab=function(e){return this.tabs[e]},t.prototype.getTabsCount=function(){return this.tabs.length},t.prototype.getStateAndHelpers=function(){return{id:this.id,getTabListProps:this.getTabListProps,getTabPanelProps:this.getTabPanelProps,getTabProps:this.getTabProps,selectedIndex:this.props.selectedIndex}},t.prototype.render=function(){var e=i(this.props.children,o);return this.clearTabs(),this.clearTabPanels(),i(e(this.getStateAndHelpers()))},t}(t.Component),f=function(e){function n(){var t,r;s(this,n);for(var o=arguments.length,a=Array(o),i=0;i<o;i++)a[i]=arguments[i];return t=r=c(this,e.call.apply(e,[this].concat(a))),r.state={selectedIndex:r.props.defaultIndex},r.handleSelect=function(e,t,n){(0,r.props.onSelect)(e,t,n),r.setState({selectedIndex:e})},c(r,t)}return d(n,e),n.prototype.render=function(){return t.createElement(p,l({},this.props,{onSelect:this.handleSelect,selectedIndex:this.state.selectedIndex}))},n}(t.Component);f.defaultProps={defaultIndex:0};var b=function(e){function n(){return s(this,n),c(this,e.apply(this,arguments))}return d(n,e),n.inUncontrolledMode=function(e){return void 0===e.selectedIndex},n.prototype.componentDidUpdate=function(){},n.prototype.render=function(){return this.uncontrolledMode=n.inUncontrolledMode(this.props),this.uncontrolledMode?t.createElement(f,this.props):t.createElement(p,this.props)},n}(t.Component);b.defaultProps={onSelect:o};var h,y,v=(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e.displayName||e.name||("string"==typeof e&&e.length>0?e:"Unknown")}}(h={exports:{}},h.exports),h.exports),g=(y=v)&&y.__esModule&&Object.prototype.hasOwnProperty.call(y,"default")?y.default:y;n.bool;e.default=b,e.createFocusableComponent=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"ref",r=function(r){function o(){var e,t;s(this,o);for(var n=arguments.length,a=Array(n),i=0;i<n;i++)a[i]=arguments[i];return e=t=c(this,r.call.apply(r,[this].concat(a))),t.node=null,t.setRef=function(e){t.node=e},c(t,e)}return d(o,r),o.prototype.checkFocus=function(){this.props.focus&&this.node.focus()},o.prototype.componentDidMount=function(){this.checkFocus()},o.prototype.componentDidUpdate=function(){this.checkFocus()},o.prototype.render=function(){var r,o=this.props,a=(o.focus,u(o,["focus"])),i=((r={})[n]=this.setRef,r);return t.createElement(e,l({},i,a))},o}(t.Component);return r.displayName="Focusable("+g(e),r},e.resetIdCounter=function(){r=0},Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=retabbed.umd.min.js.map