react-tabtab
Version:
A mobile support, draggable, editable and api based Tab for ReactJS
2 lines (1 loc) • 19.5 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react"),require("styled-components"),require("react-poppop"),require("react-sortable-hoc")):"function"==typeof define&&define.amd?define(["react","styled-components","react-poppop","react-sortable-hoc"],n):e.Tabtab=n(e.React,e.styled,e.PopPop,e.SortableHOC)}(this,function(e,n,t,o){"use strict";var r=e.default;n=n&&n.hasOwnProperty("default")?n.default:n,t=t&&t.hasOwnProperty("default")?t.default:t;var i=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")},a=function(){function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}}(),l=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},s=function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)},c=function(e,n){var t={};for(var o in e)n.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},d=function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?e:n},u=function(e,n){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))},h=function(n){function t(e){i(this,t);var n=d(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.handleTabChange=n.handleTabChange.bind(n),n.handleTabSequence=n.handleTabSequence.bind(n),n.handleEdit=n.handleEdit.bind(n),n.state={activeIndex:n.getActiveIndex(e)},n}return s(t,n),a(t,[{key:"getActiveIndex",value:function(e){var n=e.defaultIndex,t=e.activeIndex;return t||(n||0)}},{key:"componentWillReceiveProps",value:function(e){e.activeIndex!==this.props.activeIndex&&this.setState({activeIndex:e.activeIndex})}},{key:"handleTabChange",value:function(e){var n=this.props,t=n.activeIndex,o=n.onTabChange;0===t||t||this.setState({activeIndex:e}),o&&o(e)}},{key:"handleTabSequence",value:function(e){var n=e.oldIndex,t=e.newIndex,o=this.props.onTabSequenceChange;o&&o({oldIndex:n,newIndex:t})}},{key:"handleEdit",value:function(e){var n=e.type,t=e.index,o=this.props.onTabEdit;o&&o({type:n,index:t})}},{key:"render",value:function(){var n=this.props,t=n.children,o=c(n,["children"]),r=this.state.activeIndex,i=l({handleTabChange:this.handleTabChange,handleTabSequence:this.handleTabSequence,handleEdit:this.handleEdit,activeIndex:r},o);return e.createElement("div",null,e.Children.map(t,function(n){return e.cloneElement(n,i)}))}}]),t}(e.Component);h.defaultProps={showModalButton:4,showArrowButton:"auto",onTabChange:function(){},onTabSequenceChange:function(){},customStyle:{TabList:null,Tab:null,Panel:null,ActionButton:null}};var p=function(e,n,t,o,r,i,a,l){if(!e){var s;if(void 0===n)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[t,o,r,i,a,l],d=0;(s=new Error(n.replace(/%s/g,function(){return c[d++]}))).name="Invariant Violation"}throw s.framesToPop=1,s}},f=function(e){var n=e.d;return r.createElement("svg",{viewBox:"0 0 40 40",fill:"currentColor",height:"1em",width:"1em",style:{verticalAlign:"middle"}},r.createElement("g",null,r.createElement("path",{d:n})))},b=function(){return r.createElement(f,{d:"m31.6 10.7l-9.3 9.3 9.3 9.3-2.3 2.3-9.3-9.3-9.3 9.3-2.3-2.3 9.3-9.3-9.3-9.3 2.3-2.3 9.3 9.3 9.3-9.3z"})},v=function(){return r.createElement(f,{d:"m25.7 12.3l-7.7 7.7 7.7 7.7-2.3 2.3-10-10 10-10z"})},g=function(){return r.createElement(f,{d:"m16.6 10l10 10-10 10-2.3-2.3 7.7-7.7-7.7-7.7z"})},y=function(){return r.createElement(f,{d:"m31.7 28.3h-23.4c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.3 3.3 3.3h23.4c1.8 0 3.3-1.5 3.3-3.3s-1.5-3.4-3.3-3.4z m0-11.6h-23.4c-1.8 0-3.3 1.5-3.3 3.3s1.5 3.3 3.3 3.3h23.4c1.8 0 3.3-1.5 3.3-3.3s-1.5-3.3-3.3-3.3z m0-11.7h-23.4c-1.8 0-3.3 1.5-3.3 3.3s1.5 3.4 3.3 3.4h23.4c1.8 0 3.3-1.5 3.3-3.4s-1.5-3.3-3.3-3.3z"})},m=function(e){function n(e){i(this,n);var t=d(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.onSortEnd=t.onSortEnd.bind(t),t}return s(n,e),a(n,[{key:"onSortEnd",value:function(e){var n=e.oldIndex,t=e.newIndex,o=this.props,r=o.activeIndex,i=o.handleTabChange,a=o.handleTabSequence;n===t?r!==n&&i(n):a({oldIndex:n,newIndex:t})}}]),n}(e.PureComponent),x=o.SortableContainer(function(n){var t=n.children;return e.createElement("div",{style:{marginTop:"50px"}},t)}),w=function(n){function t(){return i(this,t),d(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s(t,m),a(t,[{key:"render",value:function(){return e.createElement(x,{onSortEnd:this.onSortEnd,axis:"y",lockAxis:"y",pressDelay:"100"},this.props.children)}}]),t}(),k=function(n){function o(){return i(this,o),d(this,(o.__proto__||Object.getPrototypeOf(o)).apply(this,arguments))}return s(o,n),a(o,[{key:"render",value:function(){return e.createElement(t,{open:!0,onClose:this.props.closeModal,closeOnEsc:!0,closeBtn:!0},e.createElement(w,{handleTabSequence:this.props.handleTabSequence,handleTabChange:this.props.handleTabChange,activeIndex:this.props.activeIndex},this.props.children))}}]),o}(e.Component),T=u(["\n background-color: white;\n text-align: left;\n position: relative;\n white-space: nowrap;\n overflow: hidden;\n width: auto;\n padding: ",";\n"],["\n background-color: white;\n text-align: left;\n position: relative;\n white-space: nowrap;\n overflow: hidden;\n width: auto;\n padding: ",";\n"]),_=u(["\n overflow: hidden;\n"],["\n overflow: hidden;\n"]),E=u(["\n padding-left: 0;\n position: relative;\n margin: 0;\n list-style: none;\n display: inline-block;\n transition: transform .3s cubic-bezier(.42, 0, .58, 1);\n"],["\n padding-left: 0;\n position: relative;\n margin: 0;\n list-style: none;\n display: inline-block;\n transition: transform .3s cubic-bezier(.42, 0, .58, 1);\n"]),S=u(["\n height: 100%;\n width ","px;\n text-align: center;\n border: 1px solid #d9d9d9;\n border-bottom: 0;\n border-radius: 4px 4px 0 0;\n background: #f9f9f9;\n > svg {\n padding-top: 11px;\n }\n"],["\n height: 100%;\n width ","px;\n text-align: center;\n border: 1px solid #d9d9d9;\n border-bottom: 0;\n border-radius: 4px 4px 0 0;\n background: #f9f9f9;\n > svg {\n padding-top: 11px;\n }\n"]),P=u(["\n display: inline-block;\n filter: none;\n position: absolute;\n ",";\n &:hover {\n cursor: pointer;\n }\n"],["\n display: inline-block;\n filter: none;\n position: absolute;\n ",";\n &:hover {\n cursor: pointer;\n }\n"]),C=u(["\n display: inline-block;\n filter: none;\n position: absolute;\n left: 0;\n &:hover {\n cursor: pointer;\n }\n"],["\n display: inline-block;\n filter: none;\n position: absolute;\n left: 0;\n &:hover {\n cursor: pointer;\n }\n"]),B=n.div(T,function(e){return function(e){var n=e.showModalButton,t=e.showArrowButton,o=0,r=0;return n&&(o+=35),t&&(o+=35,r+=35,n&&(o+=2)),o>0&&(o+=3),r>0&&(r+=3),"0 "+r+"px 0 "+o+"px"}(e)}),O=n.div(_),I=n.ul(E),A=n.div(S,35),M=function(t){function o(e){i(this,o);var n=d(this,(o.__proto__||Object.getPrototypeOf(o)).call(this,e));return n.handleScroll=n.handleScroll.bind(n),n.toggleModal=n.toggleModal.bind(n),n.renderTabs=n.renderTabs.bind(n),n.renderArrowButton=n.renderArrowButton.bind(n),n.isShowModalButton=n.isShowModalButton.bind(n),n.isShowArrowButton=n.isShowArrowButton.bind(n),n.scrollPosition=0,n.tabRefs=[],n.state={modalIsOpen:!1,showArrowButton:!1,showModalButton:!1},n}return s(o,t),a(o,[{key:"componentDidMount",value:function(){this.isShowArrowButton(),this.isShowModalButton(),this.props.activeIndex>0&&this.scrollToIndex(this.props.activeIndex,"left")}},{key:"componentDidUpdate",value:function(e,n){if(e.children.length!==this.props.children.length&&(this.isShowArrowButton(),this.isShowModalButton()),e.activeIndex!==this.props.activeIndex){var t=this.props.activeIndex===this.props.children.length-1?"right":"left";this.scrollToIndex(this.props.activeIndex,t)}n.showArrowButton&&!this.state.showArrowButton&&this.scrollToZero(),e.showModalButton!==this.props.showModalButton&&this.isShowModalButton(),e.showArrowButton!==this.props.showArrowButton&&this.isShowArrowButton()}},{key:"getTabNode",value:function(e){return e.__INTERNAL_NODE?e.__INTERNAL_NODE:e.__DRAG_TAB_INTERNAL_NODE?e.__DRAG_TAB_INTERNAL_NODE.node:void 0}},{key:"unifyScrollMax",value:function(e){return parseFloat(e/3*2)}},{key:"handleScroll",value:function(e){var n=0,t=this.listContainer.getBoundingClientRect(),o=this.listContainer.offsetWidth,r=this.getTabNode(this.tabRefs[0]).getBoundingClientRect(),i=this.getTabNode(this.tabRefs[this.tabRefs.length-1]).getBoundingClientRect();"right"===e?(n=i.right-t.right)>o&&(n=this.unifyScrollMax(o)):"left"===e&&-(n=r.left-t.left)>o&&(n=-this.unifyScrollMax(o)),this.scrollPosition+=n,this.scrollPosition<0&&(this.scrollPosition=0),this.listScroll.style.transform="translate3d(-"+this.scrollPosition+"px, 0, 0)"}},{key:"scrollToIndex",value:function(e,n){var t=this.getTabNode(this.tabRefs[e]).getBoundingClientRect(),o=this.listContainer.getBoundingClientRect();if(!(t.right<o.right&&t.left>o.left)){var r=t[n]-o[n];this.scrollPosition+=r,this.scrollPosition<0&&(this.scrollPosition=0),this.listScroll.style.transform="translate3d(-"+this.scrollPosition+"px, 0, 0)"}}},{key:"scrollToZero",value:function(){this.listScroll.style.transform="translate3d(0, 0, 0)"}},{key:"toggleModal",value:function(e){var n=this;this.setState({modalIsOpen:e},function(){e||n.scrollToIndex(n.props.activeIndex,"right")})}},{key:"isShowModalButton",value:function(){var e=this.props.showModalButton;(function(e){return!isNaN(parseInt(e,10))})(e)&&(e=this.props.children.length>=e),this.setState({showModalButton:e})}},{key:"isShowArrowButton",value:function(){var e=this.props.showArrowButton;if("auto"===e){var n=0,t=this.listContainer.offsetWidth;e=!1;for(var o=0;o<this.tabRefs.length;o++){if((n+=this.getTabNode(this.tabRefs[o]).offsetWidth)>=t){e=!0;break}}}this.setState({showArrowButton:e})}},{key:"renderTabs",value:function(){var n=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=arguments[1],r=this.props,i=r.children,a=r.activeIndex,s={handleTabChange:r.handleTabChange,handleEdit:r.handleEdit,CustomTabStyle:r.customStyle.Tab};return o||(this.tabRefs=[]),e.Children.map(i,function(r,i){return e.cloneElement(r,l({key:i,active:i===a,index:i,tabIndex:i,ref:function(e){!o&&e&&n.tabRefs.push(e)}},s,t))})}},{key:"renderArrowButton",value:function(n){var t=this;return this.state.showArrowButton?e.createElement("div",null,e.createElement(n,{left:!0,onClick:function(){t.handleScroll("left")},ref:function(e){return t.leftArrowNode=e},showModalButton:this.state.showModalButton},e.createElement(v,null)),e.createElement(n,{onClick:function(){t.handleScroll("right")},ref:function(e){return t.rightArrowNode=e}},e.createElement(g,null))):null}},{key:"render",value:function(){var t=this,o=this.props,r=o.customStyle,i=o.activeIndex,a=o.handleTabChange,l=o.handleTabSequence,s=o.ExtraButton,c=this.state.modalIsOpen,d=r.TabList||B,u=r.ActionButton||A,h=function(e){return n(e)(P,function(e){return e.left?e.showModalButton?"left: 37px":"left: 0":"right: 0"})}(u),f=function(e){return n(e)(C)}(u);return p(this.props.children,"React-tabtab Error: You MUST pass at least one tab"),e.createElement("div",null,s||null,e.createElement(d,{hasExtraButton:!!s,showModalButton:this.state.showModalButton,showArrowButton:this.state.showArrowButton},this.state.showModalButton?e.createElement(f,{ref:function(e){return t.foldNode=e},onClick:this.toggleModal.bind(this,!0),showArrowButton:this.state.showArrowButton},e.createElement(y,null)):null,this.renderArrowButton(h),e.createElement(O,{ref:function(e){return t.listContainer=e}},e.createElement(I,{ref:function(e){return t.listScroll=e},role:"tablist"},this.renderTabs()))),c?e.createElement(k,{closeModal:this.toggleModal.bind(this,!1),handleTabSequence:l,handleTabChange:a,activeIndex:i},this.renderTabs({vertical:!0},!0)):null)}}]),o}(e.Component);M.displayName="TabList";var N=u(["\n display: inline-block;\n color: #777;\n margin-left: 5px;\n padding: 0;\n vertical-align: middle;\n border: 0;\n padding: 2px;\n outline: 0;\n &:hover {\n color: black;\n background-color: #eee;\n cursor: pointer;\n border-radius: 50%;\n }\n > svg {\n vertical-align: middle;\n }\n"],["\n display: inline-block;\n color: #777;\n margin-left: 5px;\n padding: 0;\n vertical-align: middle;\n border: 0;\n padding: 2px;\n outline: 0;\n &:hover {\n color: black;\n background-color: #eee;\n cursor: pointer;\n border-radius: 50%;\n }\n > svg {\n vertical-align: middle;\n }\n"]),R=n.button(N),D=function(n){function t(){return i(this,t),d(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s(t,n),a(t,[{key:"render",value:function(){return e.createElement(R,{onClick:this.props.handleDelete},e.createElement(b,null))}}]),t}(e.PureComponent),j=u(["\n display: ",";\n ","\n\n user-select: none;\n &:hover {\n cursor: pointer;\n color: black;\n }\n"],["\n display: ",";\n ","\n\n user-select: none;\n &:hover {\n cursor: pointer;\n color: black;\n }\n"]),L=u(["\n vertical-align: middle;\n"],["\n vertical-align: middle;\n"]),q=n.li(j,function(e){return e.vertical?"block":"inline-block"},function(e){return e.vertical?"\n background-color: white;\n color: black;\n padding: 10px 10px;\n z-index: 100000;\n ":function(e){return e.closable?"padding: 10px 10px 10px 15px;":"padding: 10px 15px;"}}),z=n.span(L),W=function(n){function t(e){i(this,t);var n=d(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.clickTab=n.clickTab.bind(n),n.clickDelete=n.clickDelete.bind(n),n}return s(t,n),a(t,[{key:"clickTab",value:function(){var e=this.props;(0,e.handleTabChange)(e.index)}},{key:"clickDelete",value:function(e){e.stopPropagation();var n=this.props;(0,n.handleEdit)({type:"delete",index:n.index})}},{key:"render",value:function(){var n=this,t=this.props,o=t.CustomTabStyle,r=t.active,i=t.closable,a=t.vertical,l=t.index,s=o||q;return e.createElement(s,{ref:function(e){return n.__INTERNAL_NODE=e},onClick:this.clickTab,active:r,vertical:a,closable:i,role:"tab",id:"react-tabtab-tab-"+l,"aria-controls":"react-tabtab-panel-"+l,"aria-selected":r},e.createElement(z,null,this.props.children),i?e.createElement(D,{handleDelete:this.clickDelete}):null)}}]),t}(e.PureComponent);W.displayName="Tab";var F=o.SortableContainer(function(e){var n=e.children,t=c(e,["children"]);return r.createElement(M,t,n)}),G=function(e){function n(){return i(this,n),d(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return s(n,m),a(n,[{key:"render",value:function(){var e=this.props,n=e.children,t=c(e,["children"]);return r.createElement(F,l({onSortEnd:this.onSortEnd,axis:"x",lockAxis:"x",pressDelay:100},t),n)}}]),n}();G.displayName="DragTabList";var U=o.SortableElement(function(n){var t=n.children,o=c(n,["children"]);return e.createElement(W,l({index:o.tabIndex},o),t)}),Z=function(n){function t(){return i(this,t),d(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s(t,n),a(t,[{key:"render",value:function(){var n=this,t=this.props,o=t.children,r=c(t,["children"]);return e.createElement(U,l({ref:function(e){return n.__DRAG_TAB_INTERNAL_NODE=e}},r),o)}}]),t}(e.PureComponent);Z.displayName="DragTab";var H=function(n){function t(){return i(this,t),d(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s(t,n),a(t,[{key:"render",value:function(){var n=this.props,t=n.children,o=n.activeIndex,r=n.customStyle;if(!t||void 0===o)return null;var i={};r&&r.Panel&&(i=l({},i,{CustomPanelStyle:r.Panel}));var a=e.Children.toArray(t).map(function(n,t){return e.cloneElement(n,l({key:t,active:t===o,index:t},i))});return e.createElement("div",null,a)}}]),t}(e.PureComponent),V=u(["\n background-color: white;\n text-align: left;\n padding: 20px 15px;\n ","\n"],["\n background-color: white;\n text-align: left;\n padding: 20px 15px;\n ","\n"]),Y=n.div(V,function(e){return e.active?null:"display: none;"}),J=function(n){function t(){return i(this,t),d(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s(t,n),a(t,[{key:"render",value:function(){var n=this.props,t=n.active,o=n.index,r=this.props.CustomPanelStyle||Y;return e.createElement(r,{role:"tabpanel",id:"react-tabtab-panel-"+o,"aria-labelledby":"react-tabtab-"+o,"aria-hidden":!1,active:t},t?this.props.children:null)}}]),t}(e.PureComponent),K=function(n){function t(e){i(this,t);var n=d(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.loadPanel=n.loadPanel.bind(n),n.cacheData=void 0,n.state={isLoading:!1,data:void 0},n}return s(t,n),a(t,[{key:"componentDidMount",value:function(){this.props.active&&this.loadPanel()}},{key:"componentWillReceiveProps",value:function(e){e.active&&this.loadPanel()}},{key:"loadPanel",value:function(){var e=this,n=this.props,t=n.loadContent,o=n.cache;if(o&&this.cacheData)this.setState({isLoading:!1,data:this.cacheData});else{var r=function(n,t){n&&console.log("React-Tabtab async panel error:",n),o&&(e.cacheData=t),e.setState({isLoading:!1,data:t})},i=t(r);i&&i.then(function(e){return r(null,e)},function(e){return r(e)}),this.state.isLoading||this.setState({isLoading:!0})}}},{key:"render",value:function(){var n=this.props,t=n.render,o=n.renderLoading,r=n.CustomPanelStyle,i=n.active,a=n.index,l=this.state,s=l.isLoading,c=l.data,d=void 0;return d=s?o():t(c),e.createElement(J,{CustomPanelStyle:r,active:i,index:a},d)}}]),t}(e.PureComponent);K.defaultProps={cache:!0};var Q=u(["\n float: right;\n border: 1px solid #eee;\n border-radius: 2px;\n padding: 3px;\n margin-top: 10px;\n margin-left: 2px;\n display: inline-block;\n color: #777;\n vertical-align: middle;\n /* "," */\n &:hover {\n color: black;\n cursor: pointer;\n }\n &:disabled,\n &[disabled]{\n border: 1px solid grey;\n background-color: #e7e7e7;\n cursor: not-allowed;\n }\n"],["\n float: right;\n border: 1px solid #eee;\n border-radius: 2px;\n padding: 3px;\n margin-top: 10px;\n margin-left: 2px;\n display: inline-block;\n color: #777;\n vertical-align: middle;\n /* "," */\n &:hover {\n color: black;\n cursor: pointer;\n }\n &:disabled,\n &[disabled]{\n border: 1px solid grey;\n background-color: #e7e7e7;\n cursor: not-allowed;\n }\n"]),X=n.button(Q,function(e){return e.disabled?"\n pointer-events: none;\n color: #AAA;\n background: #F5F5F5;\n ":null}),$=function(n){function t(){return i(this,t),d(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s(t,n),a(t,[{key:"render",value:function(){var n=this.props,t=n.disabled,o=n.onClick;return e.createElement(X,{onClick:o,disabled:t},this.props.children)}}]),t}(e.PureComponent);$.defaultProps={disabled:!1};return{Tabs:h,TabList:M,Tab:W,DragTabList:G,DragTab:Z,PanelList:H,Panel:J,AsyncPanel:K,ExtraButton:$,styled:{TabListStyle:B,ActionButtonStyle:A,TabStyle:q,PanelStyle:Y}}});