@salesforce-ux/design-system/__internal/chunked/showcase/ui/components/tabs/mobile-stack/example.jsx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t={1594:function(e){e.exports=React},4478:function(e,t,n){n.r(t),n.d(t,{default:function(){return W},examples:function(){return G},states:function(){return $}});var l=n(1594),r=n.n(l),i=n(4187),a=n.n(i),o=n(942),s=n.n(o),c=n(8347),m=n(6333),d=n.n(m),u=n(6955);function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=Array(t);n<t;n++)l[n]=e[n];return l}var b=function(e){return r().createElement("div",{className:s()("slds-panel",e.size&&"slds-size_".concat(e.size),e.docked&&"slds-panel_docked slds-panel_docked-".concat(e.docked),e.isAnimated&&"slds-panel_animated",e.drawer&&"slds-panel_drawer",e.isVisible?"slds-is-open":"slds-hidden"),hidden:!e.isVisible,id:e.id},e.children)},p=function(e){var t=e.children;return r().createElement("div",{className:"slds-panel__header-actions"},t)},h=function(e){var t=e.symbol,n=e.handleVisibility,l=e.title,i=s()({"slds-panel__back":"back"===t||"chevronleft"===t,"slds-panel__close":"close"===t});return r().createElement(u.A,{key:"panel-header-close-button",className:i,symbol:t,size:"small",assistiveText:"Collapse ".concat(l),title:"Collapse ".concat(l),onClick:n})};h.propTypes={symbol:a().oneOf(["back","chevronleft","close"]),handleVisibility:a().func,title:a().string};var y=function(e){return r().createElement("h2",{className:"slds-panel__header-title slds-text-heading_small slds-truncate",key:"panel-header-title",title:e.title},e.title)},E=function(e){var t="close",n=r().createElement(r().Fragment,null,r().createElement(y,{title:e.title}),r().createElement(p,null,e.headerActions,r().createElement(h,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})));return"drill-in"===e.invoke&&(n=e.isInvokedByTab?r().createElement(r().Fragment,null,r().createElement(h,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),r().createElement(y,{title:e.title})):r().createElement(r().Fragment,null,r().createElement(h,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),r().createElement(y,{title:e.title}),r().createElement(p,null,e.headerActions,r().createElement(h,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})))),r().createElement("div",{className:s()("slds-panel__header",e.hasCenterTitle&&"slds-panel__header_align-center",e.customHeader&&"slds-panel__header_custom")},e.customHeader?e.customHeader:n)},v=function(e){var t=e.title,n=e.closeSymbol,l=e.hasCenterTitle,i=e.customHeader;return r().createElement("div",{className:s()("slds-panel__header",l&&"slds-panel__header_align-center",i&&"slds-panel__header_custom")},i||r().createElement(r().Fragment,null,r().createElement(y,{title:t}),r().createElement(h,{title:t,symbol:n})))};v.propTypes={title:a().string,closeSymbol:a().string,hasCenterTitle:a().bool,customHeader:a().node},v.defaultProps={title:"Deprecated Panel Header",closeSymbol:"close"};var _=function(e){return r().createElement("div",{className:"slds-panel__body"},e.children)},g=function(e){var t=e.size,n=e.title,l=e.docked,i=e.invoke,a=e.drawer,o=e.isVisible,s=void 0===o||o,c=e.handleVisibility,m=e.customHeader,d=e.children,u=e.isAnimated,f=e.hasCenterTitle,p=e.isInvokedByTab,h=e.iconBack,y=e.headerActions,v=e.headerSlot,g=e.id;return r().createElement(b,{docked:l,drawer:a,size:t,invoke:i,isVisible:s,isAnimated:u,id:g},v||r().createElement(E,{title:n,docked:l,invoke:i,customHeader:m,handleVisibility:c,hasCenterTitle:f,isInvokedByTab:p,iconBack:h,headerActions:y}),r().createElement(_,null,d))};g.propTypes={size:a().oneOf(["small","medium","large","x-large","full"]),docked:a().oneOf(["left","right","bottom"]),invoke:a().oneOf(["drill-in","toggle"]),hasCenterTitle:a().bool,isInvokedByTab:a().bool,iconBack:a().string,headerActions:a().node,headerSlot:a().node,id:a().string},g.defaultProps={iconBack:"chevronleft"};var k=g,P=function(e){var t,n,i=e.size,a=e.title,o=e.docked,c=e.invoke,m=e.drawer,b=e.hasCenterTitle,p=e.icon,h=e.iconTitle,y=e.children,E=(t=(0,l.useState)(!0),n=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var l,r,i,a,o=[],s=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(l=i.call(n)).done)&&(o.push(l.value),o.length!==t);s=!0);}catch(e){c=!0,r=e}finally{try{if(!s&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw r}}return o}}(t,n)||function(e,t){if(e){if("string"==typeof e)return f(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,t):void 0}}(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),v=E[0],_=E[1],k=d()("example-unique-id-"),P=s()("demo-only-element","slds-theme_default","slds-border_bottom","slds-p-around_small",{"slds-text-align_right":"right"===o}),T=function(){return _(!v)},I={backgroundColor:"#fafaf9",position:"relative",height:"600px",overflow:"hidden",display:"flex",flexDirection:"right"===o&&"row-reverse"};return r().createElement(r().Fragment,null,r().createElement("header",{className:P,style:{zIndex:"1"}},r().createElement(u.A,{theme:"neutral",selected:v,symbol:p,title:h,className:"slds-button_icon-border",onClick:T,"aria-expanded":v,"aria-controls":k,"aria-pressed":v})),r().createElement("div",{className:"demo-only-element",style:I},r().createElement(g,{isVisible:v,size:i,title:a,docked:o,invoke:c,drawer:m,handleVisibility:T,hasCenterTitle:b,id:k},y),r().createElement("div",{className:"demo-only-content slds-col slds-p-around_medium"},"This section is demo-only content representing a custom layout in conjunction with the panel. It is not a part of the blueprint.")))};P.propTypes={size:a().string,title:a().string,docked:a().string,invoke:a().string,drawer:a().bool,hasCenterTitle:a().bool,icon:a().string,iconTitle:a().string,children:a().node},P.defaultProps={size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",icon:"toggle_panel_left",iconTitle:"Toggle panel",children:"A panel body accepts any layout or component"};var T=n(9825);function I(e){return I="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},I(e)}function w(e,t){for(var n=0;n<t.length;n++){var l=t[n];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,S(l.key),l)}}function S(e){var t=function(e){if("object"!=I(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=I(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==I(t)?t:t+""}function O(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(O=function(){return!!e})()}function N(e){return N=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},N(e)}function x(e,t){return x=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},x(e,t)}var j=function(e){return r().createElement("div",{className:"slds-tabs-mobile__group"},e.children)};j.propTypes={children:a().node};var V=function(e){return r().createElement("div",{className:"slds-tabs-mobile__container"},e.children)};V.propTypes={children:a().node};var A=function(e){return r().createElement("ul",{className:s()("slds-tabs-mobile",{"slds-hidden":e.isHidden})},e.children)};A.propTypes={children:a().node,isHidden:a().bool};var C=function(e){return r().createElement("li",{className:s()("slds-tabs-mobile__item")},e.children)};C.propTypes={children:a().node};var D=function(e){return r().createElement(T.Button,{isFullWidth:!0,onClick:e.onClick},r().createElement("span",{className:"slds-truncate",title:e.summary},e.summary),r().createElement(c.A,{className:"slds-icon slds-icon_x-small slds-icon-text-default",sprite:"utility",symbol:"chevronright"}))};D.propTypes={onClick:a().func,summary:a().string};var B=function(e){return r().createElement(k,{title:e.title,isAnimated:!0,docked:"left",invoke:"drill-in",isInvokedByTab:!0,isVisible:e.isVisible||!1,handleVisibility:e.hidePanel,hasCenterTitle:!0},e.children||"A panel body accepts any layout or component")};B.propTypes={hidePanel:a().func,isVisible:a().bool,title:a().string,children:a().node};var H=function(e){return r().createElement(V,null,r().createElement(A,{isHidden:!0},r().createElement(C,null,r().createElement(D,{summary:"Item One"})),r().createElement(C,null,r().createElement(D,{summary:"Item Two"})),r().createElement(C,null,r().createElement(D,{summary:"Item Three"}))),r().createElement(B,{title:"Item 1 Panel",isVisible:!0},r().createElement(A,null,r().createElement(C,null,r().createElement(D,{summary:"Nested Item One"})),r().createElement(C,null,r().createElement(D,{summary:"Nested Item Two"})),r().createElement(C,null,r().createElement(D,{summary:"Nested Item Three"}))),r().createElement("div",null," Any content can be here "),r().createElement(A,null,r().createElement(C,null,r().createElement(D,{summary:"Nested Item Four"})),r().createElement(C,null,r().createElement(D,{summary:"Nested Item Five"})))),r().createElement(B,{title:"Item 2 Panel"}),r().createElement(B,{title:"Item 3 Panel"}),r().createElement(B,{title:"Nested Item 1 Panel"}),r().createElement(B,{title:"Nested Item 2 Panel"}),r().createElement(B,{title:"Nested Item 3 Panel"}),r().createElement(B,{title:"Nested Item 4 Panel"}),r().createElement(B,{title:"Nested Item 5 Panel"}))},z=function(e){function t(e){var n;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(n=function(e,t,n){return t=N(t),function(e,t){if(t&&("object"==I(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,O()?Reflect.construct(t,n||[],N(e).constructor):t.apply(e,n))}(this,t,[e])).hidePanel=n.hidePanel.bind(n),n.state={visiblePanelIdx:-1},n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&x(e,t)}(t,e),n=t,(l=[{key:"componentDidMount",value:function(){void 0!==this.props.visiblePanelIdx&&-1===this.state.visiblePanelIdx&&this.setState({visiblePanelIdx:this.props.visiblePanelIdx})}},{key:"showPanel",value:function(e){this.props.isStatic||this.setState({visiblePanelIdx:e})}},{key:"hidePanel",value:function(){this.props.isStatic||this.setState({visiblePanelIdx:-1})}},{key:"render",value:function(){var e=this.state.visiblePanelIdx;return r().createElement(V,null,r().createElement(A,{isHidden:-1!==e},r().createElement(C,null,r().createElement(D,{summary:"Item One",onClick:this.showPanel.bind(this,0)})),r().createElement(C,null,r().createElement(D,{summary:"Item Two",onClick:this.showPanel.bind(this,1)})),r().createElement(C,null,r().createElement(D,{summary:"Item Three",onClick:this.showPanel.bind(this,2)}))),r().createElement(B,{title:"Item 1 Panel",isVisible:0===e,hidePanel:this.hidePanel}),r().createElement(B,{title:"Item 2 Panel",isVisible:1===e,hidePanel:this.hidePanel}),r().createElement(B,{title:"Item 3 Panel",isVisible:2===e,hidePanel:this.hidePanel}))}}])&&w(n.prototype,l),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,l}(l.Component);z.propTypes={visiblePanelIdx:a().number,isStatic:a().bool};var L=z,F=function(e){return r().createElement("ul",{className:s()("slds-tabs_mobile")},e.children)},M=function(e){return r().createElement("li",{className:s()("slds-tabs_mobile__item")},e.children)},R=function(e){return r().createElement("div",{className:s()("slds-tabs_mobile__title",e.className)},e.children)},J=function(e){return r().createElement("button",{className:"slds-tabs_mobile__title-action slds-button slds-button_reset"},r().createElement("span",{className:"slds-truncate",title:e.summary},e.summary),r().createElement(c.A,{className:"slds-icon slds-icon_x-small slds-icon-text-default",sprite:"utility",symbol:"chevronright"}))},q=function(e){return r().createElement(F,null,r().createElement(M,null,r().createElement(R,null,r().createElement(J,{summary:"Item One"}))),r().createElement(M,null,r().createElement(R,null,r().createElement(J,{summary:"Item Two"}))),r().createElement(M,null,r().createElement(R,null,r().createElement(J,{summary:"Item Three"}))))},U=function(e){return r().createElement("div",null,r().createElement(F,null,r().createElement(M,null,r().createElement(R,null,r().createElement(J,{summary:"List 1 Item One"}))),r().createElement(M,null,r().createElement(R,null,r().createElement(J,{summary:"List 1 Item Two"})))),r().createElement(F,null,r().createElement(M,null,r().createElement(R,null,r().createElement(J,{summary:"List 2 Item One"}))),r().createElement(M,null,r().createElement(R,null,r().createElement(J,{summary:"List 2 Item Two with A Really Long Name"}))),r().createElement(M,null,r().createElement(R,null,r().createElement(J,{summary:"List 2 Item Three"})))))},W=r().createElement(L,null),$=[{id:"drilled-in",label:"Drilled In",element:r().createElement(L,{visiblePanelIdx:0,isStatic:!0})}],G=[{id:"adjacent",label:"Adjacent Stacked Drill Ins",element:r().createElement(j,null,r().createElement(L,{isStatic:!0}),r().createElement(L,{isStatic:!0}))},{id:"nested",label:"Nested Stacked Drill Ins",element:r().createElement(H,null)},{id:"deprecated-tab-stack",label:"Deprecated Stacked Tabs",element:r().createElement(q,null)},{id:"deprecated-adjacent-tab-stack",label:"Deprecated Adjacent Tab Stack",element:r().createElement(U,null)}]}},n={};function l(e){var r=n[e];if(void 0!==r)return r.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,l),i.exports}l.m=t,l.amdO={},e=[],l.O=function(t,n,r,i){if(!n){var a=1/0;for(m=0;m<e.length;m++){n=e[m][0],r=e[m][1],i=e[m][2];for(var o=!0,s=0;s<n.length;s++)(!1&i||a>=i)&&Object.keys(l.O).every(function(e){return l.O[e](n[s])})?n.splice(s--,1):(o=!1,i<a&&(a=i));if(o){e.splice(m--,1);var c=r();void 0!==c&&(t=c)}}return t}i=i||0;for(var m=e.length;m>0&&e[m-1][2]>i;m--)e[m]=e[m-1];e[m]=[n,r,i]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},l.d=function(e,t){for(var n in t)l.o(t,n)&&!l.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=9874,function(){var e={518:0,1117:0,1252:0,1578:0,1974:0,2033:0,2274:0,2782:0,3140:0,4268:0,4583:0,4723:0,4924:0,6671:0,7217:0,7257:0,7385:0,7508:0,8167:0,8458:0,9874:0};l.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,i,a=n[0],o=n[1],s=n[2],c=0;if(a.some(function(t){return 0!==e[t]})){for(r in o)l.o(o,r)&&(l.m[r]=o[r]);if(s)var m=s(l)}for(t&&t(n);c<a.length;c++)i=a[c],l.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return l.O(m)},n=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),l.nc=void 0;var r=l.O(void 0,[6790],function(){return l(4478)});r=l.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/tabs/mobile-stack/example.jsx.js"]=r}();