apier-react-tabtab
Version:
A mobile support, draggable, editable and api based Tab for ReactJS
2 lines (1 loc) • 19.5 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(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"],t):e.Tabtab=t(e.React,e.styled,e.PopPop,e.SortableHOC)}(this,function(b,f,n,e){"use strict";var o=b.default;f=f&&f.hasOwnProperty("default")?f.default:f,n=n&&n.hasOwnProperty("default")?n.default:n;var r=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},a=function(){function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}}(),l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},i=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)},s=function(e,t){var n={};for(var o in e)0<=t.indexOf(o)||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);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},t=function(e,t){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))},d=function(e){function n(e){r(this,n);var t=c(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.handleTabChange=t.handleTabChange.bind(t),t.handleTabSequence=t.handleTabSequence.bind(t),t.handleEdit=t.handleEdit.bind(t),t.state={activeIndex:t.getActiveIndex(e)},t}return i(n,e),a(n,[{key:"getActiveIndex",value:function(e){var t=e.defaultIndex,n=e.activeIndex;return n||(t||0)}},{key:"UNSAFE_componentWillReceiveProps",value:function(e){e.activeIndex!==this.props.activeIndex&&this.setState({activeIndex:e.activeIndex})}},{key:"handleTabChange",value:function(e){var t=this.props,n=t.activeIndex,o=t.onTabChange;0===n||n||this.setState({activeIndex:e}),o&&o(e)}},{key:"handleTabSequence",value:function(e){var t=e.oldIndex,n=e.newIndex,o=this.props.onTabSequenceChange;o&&o({oldIndex:t,newIndex:n})}},{key:"handleEdit",value:function(e){var t=e.type,n=e.index,o=this.props.onTabEdit;o&&o({type:t,index:n})}},{key:"render",value:function(){var e=this.props,t=e.children,n=s(e,["children"]),o=this.state.activeIndex,r=l({handleTabChange:this.handleTabChange,handleTabSequence:this.handleTabSequence,handleEdit:this.handleEdit,autoCloseModal:this.props.autoCloseModal||!1,activeIndex:o},n);return b.createElement("div",null,b.Children.map(t,function(e){return b.cloneElement(e,r)}))}}]),n}(b.Component);d.defaultProps={showModalButton:4,showArrowButton:"auto",onTabChange:function(){},onTabSequenceChange:function(){},customStyle:{TabList:null,Tab:null,Panel:null,ActionButton:null}};var v=function(e,t,n,o,r,a,i,l){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,o,r,a,i,l],d=0;(s=new Error(t.replace(/%s/g,function(){return c[d++]}))).name="Invariant Violation"}throw s.framesToPop=1,s}},u=function(){return o.createElement("i",{className:"apier api-tab-close"})},h=function(){return o.createElement("i",{className:"apier api-tab-prev"})},p=function(){return o.createElement("i",{className:"apier api-tab-next"})},g=function(){return o.createElement("i",{className:"apier api-tab-bullet"})};var y=function(e){function n(e){r(this,n);var t=c(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.onSortEnd=t.onSortEnd.bind(t),t}return i(n,e),a(n,[{key:"onSortEnd",value:function(e){var t=e.oldIndex,n=e.newIndex,o=this.props,r=o.activeIndex,a=o.handleTabChange,i=o.handleTabSequence;t===n?r!==t&&a(t):i({oldIndex:t,newIndex:n})}}]),n}(b.PureComponent),m=e.SortableContainer(function(e){var t=e.children;return b.createElement("div",{style:{marginTop:"50px"},className:"tab-modal-container"},t)}),x=function(e){function t(){return r(this,t),c(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,y),a(t,[{key:"render",value:function(){return b.createElement(m,{onSortEnd:this.onSortEnd,axis:"y",lockAxis:"y",helperClass:"tabbar-modal-dragging",distance:2},this.props.children)}}]),t}(),w=function(e){function t(){return r(this,t),c(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),a(t,[{key:"render",value:function(){return b.createElement(n,{open:!0,onClose:this.props.closeModal,closeOnEsc:!0,overlayStyle:this.props.modalOverlayStyle,contentStyle:this.props.modalContentStyle},b.createElement(x,{handleTabSequence:this.props.handleTabSequence,handleTabChange:this.props.handleTabChange,activeIndex:this.props.activeIndex,className:"tab-modal-tablist"},this.props.children))}}]),t}(b.Component),k=t(["\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"]),_=t(["\n overflow: hidden;\n"],["\n overflow: hidden;\n"]),S=t(["\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"]),T=t(["\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"]),E=t(["\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=t(["\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"]),P=f.div(k,function(e){return n=(t=e).showModalButton,r=o=0,n&&(o+=35),t.showArrowButton&&(o+=35,r+=35,n&&(o+=2)),0<o&&(o+=3),0<r&&(r+=3),"0 "+r+"px 0 "+o+"px";var t,n,o,r}),B=f.div(_),O=f.ul(S),A=f.div(T,35),I=function(e){function n(e){r(this,n);var t=c(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.handleScroll=t.handleScroll.bind(t),t.toggleModal=t.toggleModal.bind(t),t.renderTabs=t.renderTabs.bind(t),t.renderArrowButton=t.renderArrowButton.bind(t),t.isShowModalButton=t.isShowModalButton.bind(t),t.isShowArrowButton=t.isShowArrowButton.bind(t),t.scrollPosition=0,t.tabRefs=[],t.state={modalIsOpen:!1,showArrowButton:!1,showModalButton:!1},t}return i(n,e),a(n,[{key:"componentDidMount",value:function(){this.isShowArrowButton(),this.isShowModalButton(),0<this.props.activeIndex&&this.scrollToIndex(this.props.activeIndex,"left")}},{key:"componentDidUpdate",value:function(e,t){if(e.children.length!==this.props.children.length&&(this.isShowArrowButton(),this.isShowModalButton()),e.activeIndex!==this.props.activeIndex){var n=this.props.activeIndex===this.props.children.length-1?"right":"left";this.scrollToIndex(this.props.activeIndex,n)}t.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 t=0,n=this.listContainer.getBoundingClientRect(),o=this.listContainer.offsetWidth,r=this.getTabNode(this.tabRefs[0]).getBoundingClientRect(),a=this.getTabNode(this.tabRefs[this.tabRefs.length-1]).getBoundingClientRect();"right"===e?o<(t=a.right-n.right)&&(t=this.unifyScrollMax(o)):"left"===e&&o<-(t=r.left-n.left)&&(t=-this.unifyScrollMax(o)),this.scrollPosition+=t,this.scrollPosition<0&&(this.scrollPosition=0),this.listScroll.style.transform="translate3d(-"+this.scrollPosition+"px, 0, 0)"}},{key:"scrollToIndex",value:function(e,t){var n=this.getTabNode(this.tabRefs[e]).getBoundingClientRect(),o=this.listContainer.getBoundingClientRect();if(!(n.right<o.right&&n.left>o.left)){var r=n[t]-o[t];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 t=this;this.setState({modalIsOpen:e},function(){e||t.scrollToIndex(t.props.activeIndex,"right")})}},{key:"isShowModalButton",value:function(){var e=this.props.showModalButton;isNaN(parseInt(e,10))||(e=this.props.children.length>=e),this.setState({showModalButton:e})}},{key:"isShowArrowButton",value:function(){var e=this.props.showArrowButton;if("auto"===e){var t=0,n=this.listContainer.offsetWidth;e=!1;for(var o=0;o<this.tabRefs.length;o++){if(n<=(t+=this.getTabNode(this.tabRefs[o]).offsetWidth)){e=!0;break}}}this.setState({showArrowButton:e})}},{key:"renderTabs",value:function(){var n=this,o=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},r=arguments[1],e=this.props,t=e.children,a=e.activeIndex,i={handleTabChange:e.handleTabChange,handleEdit:e.handleEdit,CustomTabStyle:e.customStyle.Tab};return r||(this.tabRefs=[]),b.Children.map(t,function(e,t){return b.cloneElement(e,l({key:t,active:t===a,index:t,tabIndex:t,ref:function(e){!r&&e&&n.tabRefs.push(e)}},i,o))})}},{key:"renderArrowButton",value:function(e){var t=this;return this.state.showArrowButton?b.createElement("div",null,b.createElement(e,{left:!0,onClick:function(){t.handleScroll("left")},ref:function(e){return t.leftArrowNode=e},showModalButton:this.state.showModalButton},b.createElement(h,null)),b.createElement(e,{onClick:function(){t.handleScroll("right")},ref:function(e){return t.rightArrowNode=e}},b.createElement(p,null))):null}},{key:"render",value:function(){var t=this,e=this.props,n=e.customStyle,o=e.activeIndex,r=e.handleTabChange,a=e.handleTabSequence,i=e.modalOverlayStyle,l=e.modalContentStyle,s=e.ExtraButton,c=this.state.modalIsOpen,d=n.TabList||P,u=n.ActionButton||A,h=f(u)(E,function(e){return e.left?e.showModalButton?"left: 37px":"left: 0":"right: 0"}),p=f(u)(C);return v(this.props.children,"React-tabtab Error: You MUST pass at least one tab"),b.createElement("div",{className:"app_tab_bar"},s&&this.state.showArrowButton?s:null,b.createElement(d,{hasExtraButton:!!s,showModalButton:this.state.showModalButton,showArrowButton:this.state.showArrowButton,className:"tablist"},this.state.showModalButton?b.createElement(p,{ref:function(e){return t.foldNode=e},onClick:this.toggleModal.bind(this,!0),showArrowButton:this.state.showArrowButton,className:"show-modal-btn"},b.createElement(g,null)):null,this.renderArrowButton(h),b.createElement(B,{ref:function(e){return t.listContainer=e},className:"tablist-inner"},b.createElement(O,{ref:function(e){return t.listScroll=e},role:"tablist",className:"tablist-scroll"},this.renderTabs(),s&&!this.state.showArrowButton?s:null))),c?b.createElement(w,{closeModal:this.toggleModal.bind(this,!1),handleTabSequence:a,handleTabChange:r,activeIndex:o,modalOverlayStyle:i,modalContentStyle:l,className:"tab-modal"},b.createElement("span",{className:"tab-modal-close",onClick:this.toggleModal.bind(this,!1)},b.createElement("i",{className:"apier api-tab-modal-close"})),this.renderTabs({vertical:!0},!0)):null)}}]),n}(b.Component);I.displayName="TabList";var N=t(["\n display: inline-block;\n color: #777;\n margin-left: 3px;\n padding-bottom: 2px;\n vertical-align: middle;\n &:hover {\n color: black;\n background-color: #eee;\n cursor: pointer;\n }\n > svg {\n vertical-align: middle;\n }\n"],["\n display: inline-block;\n color: #777;\n margin-left: 3px;\n padding-bottom: 2px;\n vertical-align: middle;\n &:hover {\n color: black;\n background-color: #eee;\n cursor: pointer;\n }\n > svg {\n vertical-align: middle;\n }\n"]),M=f.div(N),R=function(e){function t(){return r(this,t),c(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),a(t,[{key:"render",value:function(){return b.createElement(M,{onClick:this.props.handleDelete,className:"tab-close-btn"},b.createElement(u,null))}}]),t}(b.PureComponent),D=t(["\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"]),j=f.li(D,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;"}}),L=function(e){function n(e){r(this,n);var t=c(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.clickTab=t.clickTab.bind(t),t.clickDelete=t.clickDelete.bind(t),t}return i(n,e),a(n,[{key:"clickTab",value:function(){var e=this.props;(0,e.handleTabChange)(e.index)}},{key:"clickDelete",value:function(e){e.stopPropagation();var t=this.props;(0,t.handleEdit)({type:"delete",index:t.index})}},{key:"render",value:function(){var t=this,e=this.props,n=e.CustomTabStyle,o=e.active,r=e.closable,a=e.vertical,i=e.index,l=n||j;return b.createElement(l,{ref:function(e){return t.__INTERNAL_NODE=e},onClick:this.clickTab,active:o,vertical:a,closable:r,role:"tab",id:"react-tabtab-tab-"+i,"aria-controls":"react-tabtab-panel-"+i,"aria-selected":o,className:"tabbar-tab "+(o?"tabbar-tab-active ":"")+(a?"tabbar-tab-vertical ":"")},this.props.children,r?b.createElement(R,{handleDelete:this.clickDelete}):null)}}]),n}(b.PureComponent);L.displayName="Tab";var q=e.SortableContainer(function(e){var t=e.children,n=s(e,["children"]);return o.createElement(I,n,t)}),F=function(e){function t(){return r(this,t),c(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,y),a(t,[{key:"render",value:function(){var e=this.props,t=e.children,n=s(e,["children"]);return o.createElement(q,l({onSortEnd:this.onSortEnd,axis:"x",lockAxis:"x",helperClass:"tabbar-dragging",distance:2},n),t)}}]),t}();F.displayName="DragTabList";var z=e.SortableElement(function(e){var t=e.children,n=s(e,["children"]);return b.createElement(L,l({index:n.tabIndex},n),t)}),W=function(e){function t(){return r(this,t),c(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),a(t,[{key:"render",value:function(){var t=this,e=this.props,n=e.children,o=s(e,["children"]);return b.createElement(z,l({ref:function(e){return t.__DRAG_TAB_INTERNAL_NODE=e}},o),n)}}]),t}(b.PureComponent);W.displayName="DragTab";var U=function(e){function t(){return r(this,t),c(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),a(t,[{key:"render",value:function(){var e=this.props,t=e.children,n=e.activeIndex,o=e.customStyle;if(!t||void 0===n)return null;var r={};o&&o.Panel&&(r=l({},r,{CustomPanelStyle:o.Panel}));var a=b.Children.toArray(t).map(function(e,t){return b.cloneElement(e,l({key:t,active:t===n,index:t},r))});return b.createElement("div",null,a)}}]),t}(b.PureComponent),G=t(["\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"]),Z=f.div(G,function(e){return e.active?null:"display: none;"}),H=function(e){function t(){return r(this,t),c(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),a(t,[{key:"render",value:function(){var e=this.props,t=e.active,n=e.index,o=this.props.CustomPanelStyle||Z;return b.createElement(o,{role:"tabpanel",id:"react-tabtab-panel-"+n,"aria-labelledby":"react-tabtab-"+n,"aria-hidden":!1,active:t,className:"panel "+(t?"panel-active ":"")},t?this.props.children:null)}}]),t}(b.PureComponent),V=function(e){function n(e){r(this,n);var t=c(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.loadPanel=t.loadPanel.bind(t),t.cacheData=void 0,t.state={isLoading:!1,data:void 0},t}return i(n,e),a(n,[{key:"componentDidMount",value:function(){this.props.active&&this.loadPanel()}},{key:"UNSAFE_componentWillReceiveProps",value:function(e){e.active&&this.loadPanel()}},{key:"loadPanel",value:function(){var n=this,e=this.props,t=e.loadContent,o=e.cache;if(o&&this.cacheData)this.setState({isLoading:!1,data:this.cacheData});else{var r=function(e,t){e&&console.log("React-Tabtab async panel error:",e),o&&(n.cacheData=t),n.setState({isLoading:!1,data:t})},a=t(r);a&&a.then(function(e){return r(null,e)},function(e){return r(e)}),this.state.isLoading||this.setState({isLoading:!0})}}},{key:"render",value:function(){var e=this.props,t=e.render,n=e.renderLoading,o=e.CustomPanelStyle,r=e.active,a=e.index,i=this.state,l=i.isLoading,s=i.data,c=void 0;return c=l?n():t(s),b.createElement(H,{CustomPanelStyle:o,active:r,index:a},c)}}]),n}(b.PureComponent);V.defaultProps={cache:!0};var Y=t(["\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"]),J=f.button(Y,function(e){return e.disabled?"\n pointer-events: none;\n color: #AAA;\n background: #F5F5F5;\n ":null}),K=function(e){function t(){return r(this,t),c(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),a(t,[{key:"render",value:function(){var e=this.props,t=e.disabled,n=e.onClick;return b.createElement(J,{onClick:n,disabled:t,className:"tab-add-btn "+(t?"tab-add-btn-disabled ":"")},this.props.children)}}]),t}(b.PureComponent);return K.defaultProps={disabled:!1},{Tabs:d,TabList:I,Tab:L,DragTabList:F,DragTab:W,PanelList:U,Panel:H,AsyncPanel:V,ExtraButton:K,styled:{TabListStyle:P,ActionButtonStyle:A,TabStyle:j,PanelStyle:Z}}});