@knapsack/app/dist/client/pattern-list-page-ms7ii~21833f8f.chunk.eaa5497fb7f7db0479e3.js

Build Design Systems on top of knapsack, by Basalt

(window.webpackJsonp=window.webpackJsonp||[]).push([["pattern-list-page-ms7ii~21833f8f"],{"./src/client/components/inline-edit.scss":function(e,t,a){},"./src/client/components/inline-edit.tsx":function(e,t,a){a.d(t,"a",(function(){return InlineEditText}));var n=a("../node_modules/@babel/runtime/helpers/esm/extends.js"),s=a("react"),r=a.n(s),l=a("../design-system/dist/ks-design-system.js"),c=a("../node_modules/classnames/index.js"),i=a.n(c),o=(a("./src/client/components/inline-edit.scss"),a("./src/client/store/index.ts")),InlineEditTextBase=e=>{var{text:t,isHeading:a,showControls:n=!1,handleSave:c,canEdit:o,noWrap:d=!1}=e,[m,u]=Object(s.useState)(!1),p=Object(s.useRef)();if(!o)return r.a.createElement("span",null,t);var handleTargetFocus=()=>{m?(u(!1),p.current.textContent=t,setTimeout(()=>{window.getSelection().removeAllRanges()},0)):(u(!0),setTimeout(()=>{p.current.focus();var e=document.createRange();e.selectNodeContents(p.current);var t=window.getSelection();t.removeAllRanges(),t.addRange(e)},0))},handleControlTrigger=()=>{m&&c(p.current.textContent),handleTargetFocus()},g=i()({"ks-inline-edit":!0,"ks-inline-edit--visible":n,"ks-inline-edit--editing":m,"ks-inline-edit--no-wrap":d}),v=m?"save":"edit-text";return r.a.createElement("span",{className:g},r.a.createElement("span",{className:"ks-inline-edit__text",ref:p,contentEditable:m,suppressContentEditableWarning:m,role:"textbox",onKeyDown:e=>{13===e.which&&handleControlTrigger(),27===e.which&&handleTargetFocus()}},t),n&&r.a.createElement("span",{className:"ks-inline-edit__controls"},"save"===v&&r.a.createElement(l.l,{size:a?"m":"s",icon:"close",kind:"icon",flush:!0,emphasis:"danger",handleTrigger:handleTargetFocus},"close"),r.a.createElement(l.l,{size:a?"m":"s",icon:v,kind:"icon",flush:!0,handleTrigger:handleControlTrigger},v)))},InlineEditText=e=>{var t=Object(o.useSelector)(e=>e.userState.canEdit);return r.a.createElement(InlineEditTextBase,Object(n.a)({},e,{canEdit:t,showControls:t}))}},"./src/client/components/page-header.scss":function(e,t,a){},"./src/client/components/page-header.tsx":function(e,t,a){a.d(t,"a",(function(){return d}));var n=a("react"),s=a.n(n),r=a("../node_modules/classnames/index.js"),l=a.n(r),c=a("../design-system/dist/ks-design-system.js"),i=a("./src/client/store/index.ts"),o=a("./src/client/components/inline-edit.tsx"),d=(a("./src/client/components/page-header.scss"),e=>{var{section:t,title:a,handleEditTitle:n,description:r,handleEditDescription:d,constrained:m=!1,flush:u=!1}=e,p=Object(i.useSelector)(e=>e.ui.status),g=Object(i.useDispatch)();if(!t&&!a)return null;var v=l()("ks-page-header",{"ks-page-header--constrained":m,"ks-page-header--flush":u});return s.a.createElement("header",{className:v},s.a.createElement("div",{className:"ks-page-header__content-wrap"},t&&s.a.createElement("p",{className:"ks-page-header__section"},t),s.a.createElement("h2",{className:"ks-page-header__title"},n?s.a.createElement(o.a,{text:a,isHeading:!0,handleSave:n}):s.a.createElement("span",null,a)),d&&s.a.createElement("p",{className:"ks-page-header__description"},s.a.createElement(o.a,{text:r,handleSave:d})),r&&!d?s.a.createElement("p",{className:"ks-page-header__description"},r):"",p&&s.a.createElement("div",{className:"ks-page-header__status"},s.a.createElement(c.C,{type:p.type,message:p.message,handleClose:()=>g(Object(i.removeStatus)())}))))})},"./src/client/components/pattern-grid.scss":function(e,t,a){},"./src/client/components/pattern-table.scss":function(e,t,a){},"./src/client/components/template-thumbnail.scss":function(e,t,a){},"./src/client/components/template-thumbnail.tsx":function(e,t,a){a.d(t,"a",(function(){return o}));var n=a("../node_modules/@babel/runtime/helpers/esm/extends.js"),s=a("../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),r=a("react"),l=a.n(r),c=a("./src/client/components/template.tsx"),i=a("./src/client/store/index.ts"),o=(a("./src/client/components/template-thumbnail.scss"),e=>{var t,a,r,{handleSelection:o=(()=>{}),patternWidth:d,templateId:m,thumbnailSize:u=120}=e,p=Object(s.a)(e,["handleSelection","patternWidth","templateId","thumbnailSize"]),g=Object(i.useSelector)(e=>e.patternsState.patterns[p.patternId]),{currentTemplateRenderer:v}=Object(i.useSelector)(e=>e.ui),h=null==g?void 0:null===(t=g.templates)||void 0===t?void 0:t.find(e=>m?e.id===m:e.templateLanguageId===v);if(!h)return l.a.createElement("div",{className:"ks-template-thumbnail ks-template-thumbnail--empty",style:{width:"".concat(u,"px"),height:"".concat(u,"px")}},"No ",v," template available for ",g.id);var E=null!==(a=p.demo)&&void 0!==a?a:null==h?void 0:h.demosById[null==h?void 0:h.demos[0]],b=(null!=d?d:Array.isArray(g.demoWidths)&&g.demoWidths.length>0)?null==g?void 0:null===(r=g.demoWidths[0])||void 0===r?void 0:r.width:400;return l.a.createElement("div",{className:"ks-template-thumbnail",style:{width:"".concat(u,"px"),height:"".concat(u,"px")}},l.a.createElement("div",{className:"ks-template-thumbnail__template",style:{width:"".concat(b,"px"),transform:u/b<1?"".concat("translate(-50%, -50%)"," scale(").concat(u/b,")"):"translate(-50%, -50%)"}},l.a.createElement(c.a,Object(n.a)({},p,{templateId:h.id,demo:E,isResizable:!1}))),l.a.createElement("div",{className:"ks-template-thumbnail__overlay",onKeyPress:()=>o(),onClick:()=>o()}))})},"./src/client/components/template.scss":function(e,t,a){},"./src/client/components/template.tsx":function(e,t,a){var n,s=a("../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),r=a("react"),l=a.n(r),c=a("../design-system/dist/ks-design-system.js"),i=a("../node_modules/iframe-resizer/js/iframeResizer.js"),o=a.n(i),d=a("../node_modules/shortid/index.js"),m=a.n(d),u=a("./src/client/data.ts"),p=a("./src/lib/constants.ts"),{PATTERN_TEMPLATE_CHANGED:g,PATTERN_ASSET_CHANGED:v}=p.b,h={[g]:g,[v]:v};!function(e){e.ready="ready"}(n||(n={}));a("./src/client/components/template.scss");var E=a("./src/client/store/index.ts"),b=a("./src/client/hooks.ts"),f=a("./src/client/utils/error-catcher.jsx");t.a=e=>{var{templateId:t,patternId:a,demo:i,assetSetId:d,isResizable:p=!0,handleCodeUsage:g=(()=>{}),handleExternalUrl:v=(()=>{}),handleRenderedHtml:_=(()=>{})}=e,makeId=()=>"".concat(a,"-").concat(t,"-").concat(m.a.generate()),[j,S]=Object(r.useState)(makeId()),[k,N]=Object(r.useState)(""),[w,x]=Object(r.useState)(null),[T,O]=Object(r.useState)(!1),y=Object(r.useRef)(null),I=Object(r.useRef)(null),P=Object(r.useRef)(),R=Object(E.useSelector)(e=>e.userState.features.templatePush),{socket:D}=Object(b.b)(R),A=null!=i?i:{},{title:z,description:C}=A,W=Object(s.a)(A,["title","description"]),H=JSON.stringify(W);D&&R&&D.addEventListener("message",e=>{var t;try{t=JSON.parse(e.data)}catch(t){console.warn("Tried to parse JSON string from WebSocket message so Template can re-fetch new data.",{messageEvent:e,error:t})}if(t)switch(t.event){case h.PATTERN_TEMPLATE_CHANGED:case h.PATTERN_ASSET_CHANGED:S(makeId());break;default:console.log("ws default")}}),Object(r.useEffect)(()=>{var e=o()({log:!1,checkOrigin:[window.location.origin],autoResize:!0,resizeFrom:"child",onResized:e=>{var{width:t}=e;x(t)},onMessage(e){var{message:t}=e;if("event"===(null==t?void 0:t.type)&&(null==t?void 0:t.event)===n.ready){if(O(!0),!_)return;setTimeout(()=>{var e,t;if(y.current){var a=null===(e=y.current)||void 0===e?void 0:null===(t=e.contentDocument)||void 0===t?void 0:t.querySelectorAll(".knapsack-pattern-direct-parent");if(a){var[n]=Array.from(a).reverse();if(n){var s=n.innerHTML;_(s)}}}},100)}}},y.current),[t]=e;if(!t)return()=>{};x(y.current.offsetWidth);var a=t.iFrameResizer;return y.current.onload=()=>{a.resize()},()=>{a&&"function"==typeof a.close&&a.close()}},[]),Object(r.useEffect)(()=>{var e=!0,n=setTimeout(()=>{var n;O(!1),Object(u.f)({patternId:a,templateId:t,demo:i,assetSetId:null!==(n=null==i?void 0:i.assetSetId)&&void 0!==n?n:d,cacheBuster:j}).then(n=>{var s,{dataId:r}=n;if((null==n?void 0:null===(s=n.urls)||void 0===s?void 0:s.iframeSrc)!==k||T){if(e){var l,c;if(P.current=r,N(null==n?void 0:null===(l=n.urls)||void 0===l?void 0:l.iframeSrc),v(n.urls.external),!g)return;Object(u.h)({patternId:a,templateId:t,dataId:r,assetSetId:null!==(c=null==i?void 0:i.assetSetId)&&void 0!==c?c:d,isInIframe:!1,wrapHtml:!1}).then(e=>{var{usage:t,templateLanguage:a}=e;g({code:t,language:a})})}}else O(!0)}).catch(console.log.bind(console))},175);return()=>{e=!1,clearTimeout(n)}},[a,t,H,d,j]);var L=l.a.createElement(f.a,null,l.a.createElement("iframe",{className:"ks-template__iframe",title:j,ref:y,src:k}));return p&&(L=l.a.createElement("div",{className:"ks-template__iframe-wrapper",ref:I},l.a.createElement("div",{className:"ks-template__resizable"},L,w&&l.a.createElement("div",{className:"ks-template__resizable__size-reading"},w,"px")))),l.a.createElement("div",{className:"ks-template ks-template--".concat(T?"ready":"not-ready")},!T&&l.a.createElement("div",{className:"ks-template__spinner"},l.a.createElement(c.e,{size:"2em"})),L)}},"./src/client/hooks.ts":function(e,t,a){a.d(t,"b",(function(){return useWebsocket})),a.d(t,"a",(function(){return useKsDragDrop}));var n=a("react"),s=a("../node_modules/react-dnd/dist/esm/hooks/useDrop.js"),r=a("../node_modules/react-dnd/dist/esm/hooks/useDrag.js"),l=a("./src/client/store/index.ts");a("../design-system/dist/ks-design-system.js");function useWebsocket(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=Object(l.useSelector)(e=>e.metaState.meta.websocketsPort),[a,s]=Object(n.useState)({socket:null,sendMsg:()=>{}});return Object(n.useEffect)(()=>{if(e){var a="https:"===window.location.protocol?"wss":"ws",n=new window.WebSocket("".concat(a,"://localhost:").concat(t));return n.onopen=()=>{s({socket:n,sendMsg:e=>{n.send(JSON.stringify(e))}})},()=>{n.close(1e3,"unmounting")}}},[e]),a}function useKsDragDrop(e){var{dragTypeId:t,index:a,handleDrop:n,ref:l,canDrag:c=!0}=e,[i,o]=Object(s.a)({accept:t,hover(e,t){if(l.current){var s=e.index,r=a;if(s!==r){var c=l.current.getBoundingClientRect();c.bottom,c.top,t.getClientOffset().y,c.top;n({dragIndex:s}),e.index=r}}}}),[{isDragging:d},m]=Object(r.a)({canDrag:()=>c,item:{type:t,index:a},collect:e=>({isDragging:e.isDragging()})});return m(o(l)),{isDragging:d}}},"./src/client/pages/pattern-list-page.scss":function(e,t,a){},"./src/client/pages/pattern-list-page.tsx":function(e,t,a){a.r(t);var n=a("react"),s=a.n(n),r=a("../design-system/dist/ks-design-system.js"),l=a("./src/client/store/index.ts"),c=a("./src/client/layouts/page-with-sidebar.tsx"),i=a("../node_modules/react-router/esm/react-router.js"),o=a("./src/lib/constants.ts"),d=a("./src/client/components/template-thumbnail.tsx"),m=(a("./src/client/components/pattern-grid.scss"),e=>{var{patterns:t}=e,a=Object(i.g)(),n=t.map(e=>{var{id:t,title:n}=e,l="".concat(o.a.PATTERN,"/").concat(t);return s.a.createElement("div",{className:"ks-pattern-grid__item",key:t,style:{width:"240px"}},s.a.createElement(r.q,{figcaption:s.a.createElement("p",null,n),handleTrigger:()=>{a.push(l)}},s.a.createElement(d.a,{patternId:t,thumbnailSize:240})))});return s.a.createElement("div",{className:"ks-pattern-grid"},n)}),u=a("../node_modules/react-table/es/index.js"),p=a("../node_modules/react-router-dom/esm/react-router-dom.js"),g=(a("./src/client/components/pattern-table.scss"),e=>{var{allPatterns:t}=e,{patterns:a,templateStatuses:n,renderers:c}=Object(l.useSelector)(e=>e.patternsState),m=Object(i.g)(),g=[];return t.forEach(e=>{var{title:t,id:a,description:n,templates:s}=e;g.push({patternTitle:t,patternId:a,description:n,data:s.map(e=>{var{id:t,title:a,templateLanguageId:n,statusId:s}=e;return{templateId:t,templateTitle:a,templateLanguageId:n,statusId:s}})})}),s.a.createElement(s.a.Fragment,null,g.map(e=>{var{data:t,patternId:l}=e,i=a[l];return s.a.createElement(r.p,{key:"pattern-".concat(l),titleContent:s.a.createElement("div",{className:"pattern-table__item-header"},s.a.createElement("div",{className:"pattern-table__item-header__title"},s.a.createElement(p.b,{to:"".concat(o.a.PATTERN,"/").concat(l)},i.title||l)),s.a.createElement("div",{className:"pattern-table__item-header__statuses"},i.templates.map(e=>{var t=n.find(t=>t.id===e.statusId);return t&&s.a.createElement(r.t,{key:"".concat(l,"-").concat(e.id),trigger:"hover",content:s.a.createElement("span",null,e.templateLanguageId," Template Status:"," ",s.a.createElement("strong",null,t.title))},s.a.createElement(r.B,{status:t}))})))},s.a.createElement("div",{className:"pattern-table__content"},s.a.createElement("div",null,i.description&&s.a.createElement("div",{className:"pattern-table__content__description"},s.a.createElement("h4",null,"Description"),s.a.createElement("p",null,i.description)),s.a.createElement("div",{className:"pattern-table__content__thumbnail"},s.a.createElement(d.a,{patternId:l,handleSelection:()=>{m.push("".concat(o.a.PATTERN,"/").concat(l))},thumbnailSize:240}))),s.a.createElement("div",null,s.a.createElement("h4",null,"Templates"),s.a.createElement(u.a,{defaultPageSize:t.length,data:t,showPagination:!1,columns:[{Header:"Template Language",accessor:"templateLanguageId",Cell:e=>{var t=c[e.value];return t?s.a.createElement("div",null,s.a.createElement("span",{className:"pattern-table__content__language-icon",dangerouslySetInnerHTML:{__html:t.meta.iconSvg}}),s.a.createElement("span",{className:"pattern-table__content__language-title"},t.meta.title)):null}},{Header:"Status",accessor:"statusId",Cell:e=>{var t=n.find(t=>t.id===(null==e?void 0:e.value));return t?s.a.createElement(r.B,{hasTitle:!0,status:t}):s.a.createElement("p",null,"Error: No Status Found")}}]}))))}))}),v=a("./src/client/components/page-header.tsx");a("./src/client/pages/pattern-list-page.scss"),t.default=()=>{var e=Object(l.useSelector)(e=>e.patternsState.patterns),t=Object.values(e),{patternViewPreference:a}=Object(l.useSelector)(e=>e.ui),n=Object(l.useDispatch)();return s.a.createElement(c.default,null,s.a.createElement(v.a,{title:"Patterns"}),s.a.createElement("div",{className:"pattern-list-page__toggles"},s.a.createElement(r.n,null,s.a.createElement(r.t,{content:s.a.createElement("p",null,"Toggle Grid View")},s.a.createElement(r.l,{icon:"grid-view",active:"grid"===a,handleTrigger:()=>n(Object(l.setPatternPageViewPreference)({preference:"grid"}))})),s.a.createElement(r.t,{content:s.a.createElement("p",null,"Toggle Table View")},s.a.createElement(r.l,{icon:"table-view",active:"table"===a,handleTrigger:()=>n(Object(l.setPatternPageViewPreference)({preference:"table"}))})))),s.a.createElement("div",{className:"pattern-list-page__content"},"grid"===a&&s.a.createElement(m,{patterns:t.map(e=>({id:e.id,title:e.title}))}),"table"===a&&s.a.createElement(g,{allPatterns:t})))}}}]);
//# sourceMappingURL=pattern-list-page-ms7ii~21833f8f.chunk.eaa5497fb7f7db0479e3.js.map