react-smart-tabs/dist/bundle.js

A tab component with drag and drop functionality, add and close

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-svg"),require("uuid")):"function"==typeof define&&define.amd?define(["exports","react","react-svg","uuid"],t):t((e=e||self)["react-smart-tabs"]={},e.React,e.ReactSVG,e.uuid)}(this,(function(e,t,n,r){"use strict";var i="default"in t?t.default:t;n=n&&n.hasOwnProperty("default")?n.default:n,r=r&&r.hasOwnProperty("default")?r.default:r;function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var n=[],r=!0,i=!1,a=void 0;try{for(var o,c=e[Symbol.iterator]();!(r=(o=c.next()).done)&&(n.push(o.value),!t||n.length!==t);r=!0);}catch(e){i=!0,a=e}finally{try{r||null==c.return||c.return()}finally{if(i)throw a}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function l(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var u=function(e){return i.createElement("div",null,e.children)};function s(e,t,n){return e.splice(n,0,e.splice(t,1)[0]),e}e.Tab=function(e){return i.createElement("div",{className:"tab-wrapper"},i.createElement("div",null,e.children))},e.TabBar=function(e){var f=c(t.useState(""),2),p=f[0],d=f[1],g=c(t.useState(null),2),b=(g[0],g[1]),m=t.useRef(null),y=t.useRef(null),h=t.useRef(0),v=t.useRef(0),C=c(t.useState(null),2),w=C[0],x=C[1],O=c(t.useState([]),2),R=O[0],j=O[1],S=c(t.useState(!1),2),E=(S[0],S[1]),T=t.useRef(i.Children.toArray(e.children).map((function(){return t.createRef()})));function L(e){return T.current.find((function(t){return t.current.id===e.id}))}function N(e){if(w){var t=L(w).current,n=t.nextSibling,r=t.previousSibling;n&&(n.style.marginLeft="0",n.style.marginRight="-1px"),r&&(r.style.marginLeft="0",r.style.marginRight="-1px"),t.style.position="relative",t.style.left="auto",m.current.onmouseup=null,x(null)}}t.useEffect((function(){var t=i.Children.toArray(e.children).map((function(e,t){return{tabComponent:e,id:r(),arrayIndex:t}}));j(t)}),[]),t.useEffect((function(){e.onTabsChange&&e.onTabsChange(R,e.children)}),[R]),t.useEffect((function(){var n=i.Children.toArray(e.children),c=n[n.length-1];if(!(0===R.length&&n.length>1)){if(n.length>R.length&&n.length>0){R.find((function(e){return e.tabComponent.props===c.props}));var u={tabComponent:c,id:r(),arrayIndex:n.length-1};j([].concat(l(R),[u])),A(u),T.current.push(t.createRef())}if(n.length===R.length){var s=n.find((function(e){return!0===e.props.active}));if(w)return;s&&A(s);var f=R.map((function(e){var t=n.find((function(t){return t.key===e.tabComponent.key}));return function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},e,{tabComponent:t})}));j(l(f))}}}),[e.children]);var A=function(e){d(e.id),b(e)},P=function(t){if(e.inactive)return!1;var n=i.Children.toArray(e.children).find((function(e){return e.props.active})),r=n&&n.props===t.tabComponent.props?n:null;return!!r||(t.id===p||!r&&""===p&&!n&&i.Children.toArray(e.children)[0].props===t.tabComponent.props&&(A(R[0]),!0))};return i.createElement("div",{className:e.className},!e.hiddenTabs&&i.createElement("div",{className:"bar__wrapper"},i.createElement("ul",{className:"tab__bar",onMouseMove:function(e){if(w){var t=function(e){return h.current=v.current-e.clientX,v.current=e.clientX,L(w).current.offsetLeft-h.current}(e),n=L(w).current,r=n.nextSibling,i=n.previousSibling,a=n.getBoundingClientRect().width-1;n.style.left="".concat(t,"px"),n.style.position="absolute",r&&r.getBoundingClientRect().left-70<t&&(i&&(i.style.marginRight="-1px",i.style.marginLeft="0"),r.style.marginLeft="0px",r.style.marginRight="".concat(a-1,"px"),r.className="animated",s(R,R.indexOf(w),R.indexOf(w)+1),j(l(R))),i&&i.getBoundingClientRect().right-80>t&&(r&&(r.style.marginRight="-1px",r.style.marginLeft="0"),i.style.marginRight="-1px",i.style.marginLeft="".concat(a,"px"),i.className="deanimated",s(R,R.indexOf(w),R.indexOf(w)-1),j(l(R)))}},onMouseLeave:N,ref:m},R.length>0&&R.map((function(t,r){var a=t.tabComponent.props.className,o=t.tabComponent.props.classNameActive,c=t.tabComponent.props.closeable,l=e.closeable,u=void 0!==c?c&&l:l;return i.createElement("li",{id:t.id,key:t.id,ref:T.current[r],className:P(t)?"".concat(o||"active"," reposition"):a,onMouseDown:function(n){return function(t,n){if("close"!==t.target.className){e.onTabClick&&e.onTabClick(n);var r=L(n).current;if(A(n),!n.tabComponent.props.blocked&&e.reorderable){x(n),v.current=t.clientX,r.style.left="".concat(r.getBoundingClientRect().left,"px"),r.style.position="absolute",r.style.width="".concat(r.offsetWidth,"px");var i=r.nextSibling,a=r.previousSibling;i&&a?i.style.marginLeft="".concat(r.getBoundingClientRect().width-1,"px"):a?a.style.marginRight="".concat(r.getBoundingClientRect().width-2,"px"):i.style.marginLeft="".concat(r.getBoundingClientRect().width-1,"px")}}}(n,t)},onMouseUp:N},t.tabComponent.props.tabHeader||t.tabComponent.props.text,u&&i.createElement("span",{ref:y,className:"close",onClick:function(n){return function(t,n,r){if(P(r)&&R.length>1){var i=R[R.indexOf(r)+1],a=R[R.indexOf(r)-1];i?(e.onTabClose&&e.onTabClose(r,i),j(R.filter((function(e){return e.id!==r.id})))):(e.onTabClose&&e.onTabClose(r,a),j(R.filter((function(e){return e.id!==r.id}))))}else e.onTabClose(r,null),j(R.filter((function(e){return e.id!==r.id})));E(!0),d("")}(t.id,0,t)}},e.closeIcon||i.createElement(n,{className:"close-icon",src:'<svg width="64" version="1.1" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 64 64" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 64 64">\n  <g>\n    <path fill="#1D1D1B" d="M28.941,31.786L0.613,60.114c-0.787,0.787-0.787,2.062,0,2.849c0.393,0.394,0.909,0.59,1.424,0.59   c0.516,0,1.031-0.196,1.424-0.59l28.541-28.541l28.541,28.541c0.394,0.394,0.909,0.59,1.424,0.59c0.515,0,1.031-0.196,1.424-0.59   c0.787-0.787,0.787-2.062,0-2.849L35.064,31.786L63.41,3.438c0.787-0.787,0.787-2.062,0-2.849c-0.787-0.786-2.062-0.786-2.848,0   L32.003,29.15L3.441,0.59c-0.787-0.786-2.061-0.786-2.848,0c-0.787,0.787-0.787,2.062,0,2.849L28.941,31.786z"/>\n  </g>\n</svg>'.toString()})))}))),e.newTab&&i.createElement("span",{className:"addButton",onClick:function(n){return e.newTab(),void T.current.push(t.createRef())}},"+")),R.length>0&&R.map((function(t){return i.createElement("div",{id:"".concat(t.id,"-panel"),key:"".concat(t.id,"-panel"),className:"tab-panel ".concat(P(t)&&!e.hiddenPanel?"active":"")},i.createElement(u,null,t.tabComponent))})))},e.TabPanel=u,Object.defineProperty(e,"__esModule",{value:!0})}));