UNPKG

@auraxy/react-tabs

Version:

tabs component for react app

10 lines (8 loc) 7.72 kB
/** * Bundle of @auraxy/react-tabs * Generated: 2020-02-05 * Version: 1.4.2 * License: MIT * Author: houyuxuan */ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):(t=t||self).ReactTabs=e(t.React)}(this,function(g){"use strict";var w="default"in g?g.default:g;function O(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t)){var a=[],n=!0,r=!1,i=void 0;try{for(var o,u=t[Symbol.iterator]();!(n=(o=u.next()).done)&&(a.push(o.value),!e||a.length!==e);n=!0);}catch(t){r=!0,i=t}finally{try{n||null==u.return||u.return()}finally{if(r)throw i}}return a}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function E(){for(var t=arguments.length,e=new Array(t),a=0;a<t;a++)e[a]=arguments[a];var n=e.reduce(function(t,e){return"".concat(t).concat(e?" ".concat(e):"")},"");return n?n.trim():""}function j(t){var e=t.allTabs,a=t.currentIndex,n=O(g.useState(0),2),r=n[0],i=n[1],o=O(g.useState(0),2),u=o[0],s=o[1];return g.useEffect(function(){i(e[a].offsetWidth||0),s(e.reduce(function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0;return(2<arguments.length?arguments[2]:void 0)<a?t+(1<arguments.length?arguments[1]:void 0).offsetWidth:t},0)||0)},[a]),w.createElement("div",{className:"au-tab-bar",style:{width:r,left:u}})}function S(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t)){var a=[],n=!0,r=!1,i=void 0;try{for(var o,u=t[Symbol.iterator]();!(n=(o=u.next()).done)&&(a.push(o.value),!e||a.length!==e);n=!0);}catch(t){r=!0,i=t}finally{try{n||null==u.return||u.return()}finally{if(r)throw i}}return a}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function e(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),a.push.apply(a,n)}return a}function R(r){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?e(i,!0).forEach(function(t){var e,a,n;e=r,n=i[a=t],a in e?Object.defineProperty(e,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[a]=n}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(i)):e(i).forEach(function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(i,t))})}return r}!function(t,e){void 0===e&&(e={});var a=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===a&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.au-tabs-box{font-size:14px}.au-tabs-box.au-tabs-hide-over{overflow:hidden}.au-tabs-box *{box-sizing:border-box}.au-tabs-box li,.au-tabs-box ul{padding:0;margin:0;list-style-type:none}.au-tabs-box.card>.au-tabs-nav-list{background:#f2f8fe;padding-top:10px}.au-tabs-box.card>.au-tabs-nav-list .au-tabs-tab{position:relative;bottom:-1px;border:1px solid transparent}.au-tabs-box.card>.au-tabs-nav-list .au-tabs-tab.active-tab{background:#fff;border:1px solid #bfd4eb;border-bottom-color:#fff;border-radius:5px 5px 0 0;z-index:1}.au-tabs-box.card>.au-tabs-nav-list .au-tab-bar{display:none}.au-tabs-box .au-tabs-nav-list,.au-tabs-box.line>.au-tabs-nav-list{display:flex;position:relative}.au-tabs-box .au-tabs-nav-list:after,.au-tabs-box.line>.au-tabs-nav-list:after{content:"";position:absolute;top:100%;left:0;width:100%;height:0;border-bottom:1px solid #ccc}.au-tabs-box .au-tabs-nav-list .au-tabs-tab,.au-tabs-box.line>.au-tabs-nav-list .au-tabs-tab{padding:0 20px;height:40px;line-height:40px;text-align:center;font-weight:500;cursor:pointer;color:#bfd4eb;transition:all .3s linear}.au-tabs-box .au-tabs-nav-list .au-tabs-tab.active-tab,.au-tabs-box .au-tabs-nav-list .au-tabs-tab:hover,.au-tabs-box.line>.au-tabs-nav-list .au-tabs-tab.active-tab,.au-tabs-box.line>.au-tabs-nav-list .au-tabs-tab:hover{color:#125fb2}.au-tabs-box .au-tabs-nav-list .au-tabs-tab.disabled,.au-tabs-box.line>.au-tabs-nav-list .au-tabs-tab.disabled{color:#ccc;cursor:not-allowed}.au-tabs-box .au-tabs-nav-list .au-tab-bar,.au-tabs-box.line>.au-tabs-nav-list .au-tab-bar{position:absolute;top:calc(100% - 1px);left:0;height:2px;background:#125fb2;transition:all .2s linear;z-index:1}.au-tabs-box .au-tabs-content{display:flex;align-items:flex-start}.au-tabs-box .au-tabs-content .au-tab-panel{padding:20px;width:100%}.au-tabs-box .au-tabs-content .au-tab-panel.au-tab-show{visibility:visible;opacity:1;pointer-events:all}.au-tabs-box .au-tabs-content .au-tab-panel.au-tab-hide{visibility:hidden;opacity:0;pointer-events:none}');return function(t){function i(t,e){x.current[e]="function"!=typeof t?t||"":t(a[e],s||{})}var n=t.onChange,a=t.tabs,e=t.value,r=t.className,o=t.animation,u=void 0===o||o,s=t.optionsForTab,c=function(){var e=g.useRef(null),t=g.useRef([]),a=O(g.useState({boxWidth:0}),2),n=a[0],r=a[1];return g.useEffect(function(){function t(){return r(function(t){return R({},t,{boxWidth:e.current.clientWidth})})}return t(),window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}},[]),{boxRef:e,tabsRef:t,size:n}}(),b=c.boxRef,l=c.tabsRef,f=c.size,d=O(function(t,e){var a=g.useRef(),n=g.useRef();n.current=e||function(t){return t};var r=S(g.useState(function(){return a.current=t,n.current(t)}),2),i=r[0],o=r[1],u=g.useRef(i);return t!==a.current&&(u.current=n.current(t,u.current,a.current),a.current=t),[u.current,g.useCallback(function(t){var e="function"==typeof t?t(u.current):t;o(u.current=e)},[])]}(e),2),p=d[0],v=d[1],h=g.useMemo(function(){return Math.max(0,a.findIndex(function(t){return t.value===p}))},[a,p]),x=g.useRef(a.map(function(t){return t.content||""})),y=O(g.useState(function(){return a.some(function(t){return!!t.content})}),1)[0];i(x.current[h],h),function(t,e,a){var n=2<arguments.length&&void 0!==a?a:{},r=g.useRef(n.immediate),i=g.useRef({preWatches:void 0,watcher:e});i.current.watcher=e,g.useLayoutEffect(function(){r.current&&i.current.watcher(t,i.current.preWatches),i.current.preWatches=t,r.current=!0},[t])}(a,function(t,e){for(var a=Math.max(t.length,e.length),n=0;n<a;n+=1){var r=t[n]?t[n].content:NaN;r!==(e[n]?e[n].content:NaN)&&i(r||"",n)}});var m=u?"0.3s all ease-in-out":"none";return w.createElement("div",{className:E("au-tabs-box",r||"",u?"au-tabs-hide-over au-tabs-has-animation":"au-tabs-no-animation"),ref:b},w.createElement("ul",{className:"au-tabs-nav-list"},a.length&&a.map(function(t,e){return w.createElement("li",{key:"tab".concat(e),className:E("au-tabs-tab",h===e?"active-tab":"",t.disabled?"disabled":""),onClick:function(){t.disabled||function(t){var e=t.key,a=t.index;v(e),n&&n({key:e,index:a})}({key:t.value,index:e})},ref:function(t){return l.current[e]=t}},"function"==typeof t.title?t.title(t,s):t.title)}),w.createElement(j,{allTabs:l.current,currentIndex:h})),y&&w.createElement("div",{className:"au-tabs-content",style:{width:100*a.length+"%",position:"relative",left:"".concat(-h*f.boxWidth,"px"),transition:m,padding:"0 !important"}},a.length&&a.map(function(t,e){return w.createElement("div",{className:E("au-tab-panel",h===e?"au-tab-show":"au-tab-hide"),key:"tab-panel-".concat(e),style:{width:1/a.length*100+"%",transition:m}},"function"==typeof x.current[e]?w.createElement(w.Fragment,null):x.current[e])})))}});