alpaca-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(h,p,t,e){"use strict";var o=h.default;p=p&&p.hasOwnProperty("default")?p.default:p,t=t&&t.hasOwnProperty("default")?t.default:t;var r=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")},i=function(){function o(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(e,n,t){return n&&o(e.prototype,n),t&&o(e,t),e}}(),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},a=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)},s=function(e,n){var t={};for(var o in e)0<=n.indexOf(o)||Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},c=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},n=function(e,n){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))},d=function(e){function t(e){r(this,t);var n=c(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 a(t,e),i(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 e=this.props,n=e.children,t=s(e,["children"]),o=this.state.activeIndex,r=l({handleTabChange:this.handleTabChange,handleTabSequence:this.handleTabSequence,handleEdit:this.handleEdit,activeIndex:o},t);return h.createElement("div",null,h.Children.map(n,function(e){return h.cloneElement(e,r)}))}}]),t}(h.Component);d.defaultProps={showModalButton:4,showArrowButton:"auto",onTabChange:function(){},onTabSequenceChange:function(){},customStyle:{TabList:null,Tab:null,Panel:null,ActionButton:null}};var f=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}},u=function(e){var n=e.d;return o.createElement("svg",{viewBox:"0 0 40 40",fill:"currentColor",height:"1em",width:"1em",style:{verticalAlign:"middle"}},o.createElement("g",null,o.createElement("path",{d:n})))},b=function(){return o.createElement(u,{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 o.createElement(u,{d:"m25.7 12.3l-7.7 7.7 7.7 7.7-2.3 2.3-10-10 10-10z"})},g=function(){return o.createElement(u,{d:"m16.6 10l10 10-10 10-2.3-2.3 7.7-7.7-7.7-7.7z"})},y=function(){return o.createElement(u,{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"})};var m=function(e){function t(e){r(this,t);var n=c(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.onSortEnd=n.onSortEnd.bind(n),n}return a(t,e),i(t,[{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})}}]),t}(h.PureComponent),x=e.SortableContainer(function(e){var n=e.children;return h.createElement("div",{style:{marginTop:"50px"}},n)}),w=function(e){function n(){return r(this,n),c(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return a(n,m),i(n,[{key:"render",value:function(){return h.createElement(x,{onSortEnd:this.onSortEnd,axis:"y",lockAxis:"y",pressDelay:"100"},this.props.children)}}]),n}(),k=function(e){function n(){return r(this,n),c(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return a(n,e),i(n,[{key:"render",value:function(){return h.createElement(t,{open:!0,onClose:this.props.closeModal,closeOnEsc:!0,closeBtn:!0},h.createElement(w,{handleTabSequence:this.props.handleTabSequence,handleTabChange:this.props.handleTabChange,activeIndex:this.props.activeIndex},this.props.children))}}]),n}(h.Component),T=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"],["\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(["\n overflow: hidden;\n"],["\n overflow: hidden;\n"]),E=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"],["\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=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"],["\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=n(["\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=n(["\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=p.div(T,function(e){return t=(n=e).showModalButton,r=o=0,t&&(o+=35),n.showArrowButton&&(o+=35,r+=35,t&&(o+=2)),0<o&&(o+=3),0<r&&(r+=3),"0 "+r+"px 0 "+o+"px";var n,t,o,r}),O=p.div(_),I=p.ul(E),A=p.div(S,35),M=function(e){function t(e){r(this,t);var n=c(this,(t.__proto__||Object.getPrototypeOf(t)).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 a(t,e),i(t,[{key:"componentDidMount",value:function(){this.isShowArrowButton(),this.isShowModalButton(),0<this.props.activeIndex&&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?o<(n=i.right-t.right)&&(n=this.unifyScrollMax(o)):"left"===e&&o<-(n=r.left-t.left)&&(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){if(e>this.tabRefs.length-1)e=this.tabRefs.length-1;else if(this.tabRefs.length<=0)return;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;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 n=0,t=this.listContainer.offsetWidth;e=!1;for(var o=0;o<this.tabRefs.length;o++){if(t<=(n+=this.getTabNode(this.tabRefs[o]).offsetWidth)){e=!0;break}}}this.setState({showArrowButton:e})}},{key:"renderTabs",value:function(){var t=this,o=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},r=arguments[1],e=this.props,n=e.children,i=e.activeIndex,a={handleTabChange:e.handleTabChange,handleEdit:e.handleEdit,CustomTabStyle:e.customStyle.Tab};return r||(this.tabRefs=[]),h.Children.map(n,function(e,n){return h.cloneElement(e,l({key:n,active:n===i,index:n,tabIndex:n,ref:function(e){!r&&e&&t.tabRefs.push(e)}},a,o))})}},{key:"renderArrowButton",value:function(e){var n=this;return this.state.showArrowButton?h.createElement("div",null,h.createElement(e,{left:!0,onClick:function(){n.handleScroll("left")},ref:function(e){return n.leftArrowNode=e},showModalButton:this.state.showModalButton},h.createElement(v,null)),h.createElement(e,{onClick:function(){n.handleScroll("right")},ref:function(e){return n.rightArrowNode=e}},h.createElement(g,null))):null}},{key:"render",value:function(){var n=this,e=this.props,t=e.customStyle,o=e.activeIndex,r=e.handleTabChange,i=e.handleTabSequence,a=e.ExtraButton,l=this.state.modalIsOpen,s=t.TabList||B,c=t.ActionButton||A,d=p(c)(P,function(e){return e.left?e.showModalButton?"left: 37px":"left: 0":"right: 0"}),u=p(c)(C);return f(this.props.children,"React-tabtab Error: You MUST pass at least one tab"),h.createElement("div",null,a||null,h.createElement(s,{hasExtraButton:!!a,showModalButton:this.state.showModalButton,showArrowButton:this.state.showArrowButton},this.state.showModalButton?h.createElement(u,{ref:function(e){return n.foldNode=e},onClick:this.toggleModal.bind(this,!0),showArrowButton:this.state.showArrowButton},h.createElement(y,null)):null,this.renderArrowButton(d),h.createElement(O,{ref:function(e){return n.listContainer=e}},h.createElement(I,{ref:function(e){return n.listScroll=e},role:"tablist"},this.renderTabs()))),l?h.createElement(k,{closeModal:this.toggleModal.bind(this,!1),handleTabSequence:i,handleTabChange:r,activeIndex:o},this.renderTabs({vertical:!0},!0)):null)}}]),t}(h.Component);M.displayName="TabList";var 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"],["\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=p.button(N),D=function(e){function n(){return r(this,n),c(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return a(n,e),i(n,[{key:"render",value:function(){return h.createElement(R,{onClick:this.props.handleDelete},h.createElement(b,null))}}]),n}(h.PureComponent),j=n(["\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=n(["\n vertical-align: middle;\n"],["\n vertical-align: middle;\n"]),q=p.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=p.span(L),W=function(e){function t(e){r(this,t);var n=c(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.clickTab=n.clickTab.bind(n),n.clickDelete=n.clickDelete.bind(n),n}return a(t,e),i(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,e=this.props,t=e.CustomTabStyle,o=e.active,r=e.closable,i=e.vertical,a=e.index,l=t||q;return h.createElement(l,{ref:function(e){return n.__INTERNAL_NODE=e},onClick:this.clickTab,active:o,vertical:i,closable:r,role:"tab",id:"react-tabtab-tab-"+a,"aria-controls":"react-tabtab-panel-"+a,"aria-selected":o},h.createElement(z,null,this.props.children),r?h.createElement(D,{handleDelete:this.clickDelete}):null)}}]),t}(h.PureComponent);W.displayName="Tab";var F=e.SortableContainer(function(e){var n=e.children,t=s(e,["children"]);return o.createElement(M,t,n)}),G=function(e){function n(){return r(this,n),c(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return a(n,m),i(n,[{key:"render",value:function(){var e=this.props,n=e.children,t=s(e,["children"]);return o.createElement(F,l({onSortEnd:this.onSortEnd,axis:"x",lockAxis:"x",pressDelay:100},t),n)}}]),n}();G.displayName="DragTabList";var U=e.SortableElement(function(e){var n=e.children,t=s(e,["children"]);return h.createElement(W,l({index:t.tabIndex},t),n)}),Z=function(e){function n(){return r(this,n),c(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return a(n,e),i(n,[{key:"render",value:function(){var n=this,e=this.props,t=e.children,o=s(e,["children"]);return h.createElement(U,l({ref:function(e){return n.__DRAG_TAB_INTERNAL_NODE=e}},o),t)}}]),n}(h.PureComponent);Z.displayName="DragTab";var H=function(e){function n(){return r(this,n),c(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return a(n,e),i(n,[{key:"render",value:function(){var e=this.props,n=e.children,t=e.activeIndex,o=e.customStyle;if(!n||void 0===t)return null;var r={};o&&o.Panel&&(r=l({},r,{CustomPanelStyle:o.Panel}));var i=h.Children.toArray(n).map(function(e,n){return h.cloneElement(e,l({key:n,active:n===t,index:n},r))});return h.createElement("div",null,i)}}]),n}(h.PureComponent),V=n(["\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=p.div(V,function(e){return e.active?null:"display: none;"}),J=function(e){function n(){return r(this,n),c(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return a(n,e),i(n,[{key:"render",value:function(){var e=this.props,n=e.active,t=e.index,o=this.props.CustomPanelStyle||Y;return h.createElement(o,{role:"tabpanel",id:"react-tabtab-panel-"+t,"aria-labelledby":"react-tabtab-"+t,"aria-hidden":!1,active:n},this.props.children)}}]),n}(h.PureComponent),K=function(e){function t(e){r(this,t);var n=c(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 a(t,e),i(t,[{key:"componentDidMount",value:function(){this.props.active&&this.loadPanel()}},{key:"componentWillReceiveProps",value:function(e){e.active&&this.loadPanel()}},{key:"loadPanel",value:function(){var t=this,e=this.props,n=e.loadContent,o=e.cache;if(o&&this.cacheData)this.setState({isLoading:!1,data:this.cacheData});else{var r=function(e,n){e&&console.log("React-Tabtab async panel error:",e),o&&(t.cacheData=n),t.setState({isLoading:!1,data:n})},i=n(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 e=this.props,n=e.render,t=e.renderLoading,o=e.CustomPanelStyle,r=e.active,i=e.index,a=this.state,l=a.isLoading,s=a.data,c=void 0;return c=l?t():n(s),h.createElement(J,{CustomPanelStyle:o,active:r,index:i},c)}}]),t}(h.PureComponent);K.defaultProps={cache:!0};var Q=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"],["\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=p.button(Q,function(e){return e.disabled?"\n pointer-events: none;\n color: #AAA;\n background: #F5F5F5;\n ":null}),$=function(e){function n(){return r(this,n),c(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return a(n,e),i(n,[{key:"render",value:function(){var e=this.props,n=e.disabled,t=e.onClick;return h.createElement(X,{onClick:t,disabled:n},this.props.children)}}]),n}(h.PureComponent);return $.defaultProps={disabled:!1},{Tabs:d,TabList:M,Tab:W,DragTabList:G,DragTab:Z,PanelList:H,Panel:J,AsyncPanel:K,ExtraButton:$,styled:{TabListStyle:B,ActionButtonStyle:A,TabStyle:q,PanelStyle:Y}}});