"use strict";(self.webpackChunkmattermost_webapp=self.webpackChunkmattermost_webapp||[]).push([[6549],{76549:(e,t,a)=>{a.r(t),a.d(t,{default:()=>S}),a(43617),a(93991);var n=a(71633),c=a.n(n),l=a(36418),r=a.n(l),s=a(26366),u=a(85873),o=a(24867);const m=(e,t,a)=>{const[n,c]=(0,l.useState)(t),s=(0,l.useCallback)((e=>c(e.target.value)),[]),u=(0,l.useMemo)((()=>{const t=a?r().createElement("textarea",{onChange:s,value:n}):r().createElement("input",{type:"text",onChange:s,value:n});return r().createElement("label",{className:"clInput"},`${e}: `,t)}),[s,n,e,a]);return[(0,l.useMemo)((()=>({[e]:n})),[e,n]),u]},i="ALL";function p(e){const t=Object.keys(e);if(!t.length)return[{}];const a=t[0],n={...e};delete n[a];const c=p(n),l=[];return e[a].forEach((e=>{c.forEach((t=>{l.push({...t,[a]:e})}))})),l}function k(e,t,a,n){const c=[];let l={...t};a.forEach((e=>{e&&(l={...l,...e})}));const s=p(l);let u={};return n.forEach((e=>{e&&(u={...u,...e})})),s.forEach((t=>{const a=function(e){const t=Object.keys(e);if(!t.length)return;const a=[r().createElement(r().Fragment,null,"PROPS: ")];return t.forEach((t=>{a.push(r().createElement(r().Fragment,null,r().createElement("b",null,t),`: ${e[t]}, `))})),a}(t);c.push(r().createElement(r().Fragment,null,Boolean(a)&&r().createElement("p",null,a),r().createElement(e,Object.assign({},u,t))))})),c}a(15724),a(99930);const E={},b=["danger","info","success","welcome","warning"],d={primaryButton:{onClick:()=>window.alert("primary!"),text:"Primary"}},h={secondaryButton:{onClick:()=>window.alert("secondary!"),text:"Secondary"}},g={linkButton:{onClick:()=>window.alert("link!"),text:"Link"}},C={"Section Notice":e=>{let{backgroundClass:t}=e;const[a,n]=m("text","Some text",!0),[s,u]=m("title","Some text",!1),[p,C]=(e=>{const[t,a]=(0,l.useState)(!0),n=(0,l.useCallback)((e=>a(e.target.checked)),[]),c=(0,l.useMemo)((()=>r().createElement("label",{className:"clInput"},`${e}: `,r().createElement("input",{type:"checkbox",onChange:n,checked:t}))),[n,e,t]);return[(0,l.useMemo)((()=>({[e]:t})),[e,t]),c]})("isDismissable"),[y,v,S]=((e,t,a,n)=>{const[c,s]=(0,l.useState)("danger"),u=(0,l.useCallback)((e=>s(e.target.value)),[]),o=(0,l.useMemo)((()=>{const e=a.map((e=>r().createElement("option",{key:e,value:e},e)));return e.unshift(r().createElement("option",{key:i,value:i},i)),e}),[a,n]),m=(0,l.useMemo)((()=>r().createElement("label",{className:"clInput"},`${e}: `,r().createElement("select",{onChange:u,value:c},o))),[u,e,o,c]);return[(0,l.useMemo)((()=>c===i?void 0:{[e]:c}),[e,c]),(0,l.useMemo)((()=>c===i?{[e]:a}:void 0),[e,c,a]),m]})("type",0,b,!0),[f,w]=(0,l.useState)(!1),M=(0,l.useCallback)((e=>w(e.target.checked)),[]),[N,x]=(0,l.useState)(!1),I=(0,l.useCallback)((e=>x(e.target.checked)),[]),[O,j]=(0,l.useState)(!1),B=(0,l.useCallback)((e=>j(e.target.checked)),[]),T=(0,l.useMemo)((()=>k(o.A,E,[v],[a,s,p,y,f?d:void 0,N?h:void 0,O?g:void 0,{onDismissClick:()=>window.alert("dismiss!")}])),[p,y,v,O,f,N,a,s]);return r().createElement(r().Fragment,null,n,u,C,S,r().createElement("label",{className:"clInput"},"Show primary button: ",r().createElement("input",{type:"checkbox",onChange:M,checked:f})),r().createElement("label",{className:"clInput"},"Show secondary button: ",r().createElement("input",{type:"checkbox",onChange:I,checked:N})),r().createElement("label",{className:"clInput"},"Show link button: ",r().createElement("input",{type:"checkbox",onChange:B,checked:O})),r().createElement("div",{className:c()("clWrapper",t)},T))}},y=Object.keys(C)[0],v=Object.keys(s.pm.THEMES)[0],S=()=>{const[e,t]=(0,l.useState)(y),a=(0,l.useCallback)((e=>{t(e.target.value)}),[]),[n,o]=(0,l.useState)(v),m=(0,l.useCallback)((e=>{o(e.target.value)}),[]),[i,p]=(0,l.useState)("center"),k=(0,l.useCallback)((e=>{p(e.currentTarget.value)}),[]);(0,l.useEffect)((()=>{(0,u.AZ)(s.pm.THEMES[n])}),[n]);const E=(0,l.useMemo)((()=>Object.keys(C).map((e=>r().createElement("option",{key:e,value:e},e)))),[]),b=(0,l.useMemo)((()=>Object.keys(s.pm.THEMES).map((e=>r().createElement("option",{key:e,value:e},e)))),[]),d=C[e];return r().createElement("div",{className:"clWrapper"},r().createElement("label",{className:"clInput"},"Component: ",r().createElement("select",{onChange:a,value:e},E)),r().createElement("label",{className:"clInput"},"Theme: ",r().createElement("select",{onChange:m,value:n},b)),r().createElement("label",{className:"clInput"},"Background: ",r().createElement("label",null,"Center channel",r().createElement("input",{onChange:k,name:"background",value:"center",type:"radio",checked:"center"===i})),r().createElement("label",null,"Sidebar",r().createElement("input",{onChange:k,name:"background",value:"sidebar",type:"radio",checked:"sidebar"===i}))),r().createElement("div",{className:"clWrapper"},r().createElement(d,{backgroundClass:c()({clCenterBackground:"center"===i,clSidebarBackground:"sidebar"===i})})))}}}]);
//# sourceMappingURL=6549.f88cc404a84c9361c5b8.js.map