https://www.pxcode.io/static/js/49717.74a85f50.chunk.js

1"use strict";(self.webpackChunkpxCodeClient=self.webpackChunkpxCodeClient||[]).push([[49717],{49717:(e,t,o)=>{o.r(t),o.d(t,{default:()=>k});var r,i,n,l,s,p=o(26809),d=o(91645),a=o(78544),x=o(17280),f=o(93037),c=o(98986),h=o(8733),m=o(67210),u=o(6989),g=o(54167),v=o(793),w=o(50526),y=o(88818),A=o(12973);let b=(0,d.PA)(((s=class extends p.Component{constructor(e){super(e),this.titleRef=p.createRef(),(0,g.A)(this,"titleIsOverflowed",n,this),(0,g.A)(this,"onAnimationEnd",l,this),(0,y.makeObservable)(this)}componentDidMount(){document.addEventListener("animationend",this.onAnimationEnd)}componentWillUnmount(){document.removeEventListener("animationend",this.onAnimationEnd)}render(){const{model:e,type:t,selectComponent:o,onSelect:r}=this.props;return(0,A.jsx)("div",{className:(0,h.AH)(T.pxGroup7),style:{width:298,height:131},name:"CoverGroup",onClick:i=>{"component"===t?o.selectedComponent=e:o.selectedInstance=e,r&&r()},children:(0,A.jsxs)("div",{className:(0,h.AH)(T.pxGroup7Body),children:[(0,A.jsx)("div",{className:(0,h.AH)(T.pxGraph8),name:"Rectangle 5",children:(0,A.jsx)("div",{className:(0,h.AH)(T.pxGraph8Body)})},"px-graph-8"),(0,A.jsx)("div",{className:(0,h.AH)(T.pxGroup9),name:"CoverGroup",children:(0,A.jsxs)("div",{className:(0,h.AH)(T.pxGroup9Body),children:[(0,A.jsx)("div",{className:(0,h.AH)(T.pxGraph10),name:"Rectangle 5",children:(0,A.jsx)("div",{className:(0,h.AH)(T.pxGraph10Body),style:{backgroundColor:"component"===t&&o.selectedComponent===e||"instance"===t&&o.selectedInstance===e?"#86cfff":"#ffffff"}})},"px-graph-10"),(0,A.jsx)("div",{className:(0,h.AH)(T.pxFlexGroup11),name:"BackgroundGroup-FlexGroup",children:(0,A.jsxs)("div",{className:(0,h.AH)(T.pxFlexGroup11Body),children:[(0,A.jsx)("div",{className:(0,h.AH)(T.pxFlexGroup12),name:"column-FlexGroup",children:(0,A.jsxs)("div",{className:(0,h.AH)(T.pxFlexGroup12Body),children:[(0,A.jsx)("div",{className:(0,h.AH)(T.pxText13),name:"Artboard name",children:(0,A.jsx)(w.A,{placement:"bottomLeft",title:e.title,destroyTooltipOnHide:!0,overlayStyle:this.titleIsOverflowed?{zIndex:1e4}:{visibility:"hidden"},children:(0,A.jsx)("div",{className:(0,h.AH)(T.pxText13Body,T.pxText13Text),ref:this.titleRef,children:e.title})})},"px-text-13"),e.component?(0,A.jsx)("div",{className:(0,h.AH)(T.pxText15),name:"Imported",children:(0,A.jsx)("div",{className:(0,h.AH)(T.pxText15Body,T.pxText15Text),children:"Imported"})},"px-text-15"):null,e.component?(0,A.jsx)("div",{className:(0,h.AH)(T.pxText17),name:"Component name",children:(0,A.jsx)("div",{className:(0,h.AH)(T.pxText17Body,T.pxText17Text),children:e.component.title})},"px-text-17"):null]})},"px-flexGroup-12"),(0,A.jsx)("div",{className:(0,h.AH)(T.pxFlexCell20),name:"null"},"px-flexCell-20"),"component"===t&&(0,A.jsx)("div",{className:(0,h.AH)(T.pxGraph21),name:"Group",children:(0,A.jsx)("div",{className:(0,h.AH)(T.pxGraph21Body),style:e.thumbnailUrl?{backgroundImage:`url(${e.thumbnailUrl})`}:null})},"px-graph-21")]})},"px-flexGroup-11")]})},"px-group-9")]})},"px-group-7")}}).inStorybook=!0,i=s,n=(0,v.A)(i.prototype,"titleIsOverflowed",[y.observable],{configurable:!0,enumerable:!0,writable:!0,initializer:function(){return!1}}),l=(0,v.A)(i.prototype,"onAnimationEnd",[y.action],{configurable:!0,enumerable:!0,writable:!0,initializer:function(){return()=>{const e=this.titleRef.current;this.titleIsOverflowed=e.scrollWidth>e.offsetWidth||e.scrollWidth>138}}}),r=i))||r;const T=h.vv.create({pxGroup7:{position:"relative",display:"grid",gridTemplateRows:"0px 0fr 126px 0fr 5px",gridTemplateColumns:"0fr 0fr 290fr 0fr 0fr",backgroundColor:"rgb(241, 241, 241)"},pxGroup7Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"none",width:"100%",height:"100%"},pxGraph8:{position:"absolute",pointerEvents:"none",left:0,top:0,width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0fr 126px 0fr 0fr",gridTemplateColumns:"0fr 0fr 290fr 0fr 0fr"},pxGraph8Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"auto",width:"100%",height:"100%",filter:""},pxGroup9:{position:"absolute",pointerEvents:"none",left:0,top:0,width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0fr 126px 0fr 12fr",gridTemplateColumns:"0fr 0fr 290fr 0fr 0fr"},pxGroup9Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"none",width:"100%",height:"100%"},pxGraph10:{position:"absolute",pointerEvents:"none",left:0,top:0,width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0fr 126px 0fr 5px",gridTemplateColumns:"0fr 0fr 290fr 0fr 0fr"},pxGraph10Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"auto",width:"100%",height:"100%",filter:""},pxFlexGroup11:{position:"absolute",pointerEvents:"none",left:0,top:0,width:"100%",height:"100%",display:"grid",gridTemplateRows:"13px 0fr minmax(101px,101fr) 0fr 12fr",gridTemplateColumns:"15.955307262569768fr 0fr 330.9599469747183fr 0fr 10.084745762711805fr"},pxFlexGroup11Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"none",width:"100%",height:"100%",display:"flex",flexDirection:"row"},pxFlexGroup12:{position:"relative",pointerEvents:"none",width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0px 101px 0px 0fr",gridTemplateColumns:"0fr 0fr 182.48882681564245fr 0fr 0fr",flexGrow:0,flexShrink:1,flexBasis:182.48882681564245},pxFlexGroup12Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"none",width:"100%",height:"100%",display:"flex",flexDirection:"column"},pxText13:{position:"relative",pointerEvents:"none",width:"100%",height:"100%",display:"grid",gridTemplateRows:"2px 0fr minmax(33px,33fr) 0fr 0fr",gridTemplateColumns:"0fr 0fr 181.4916201117319fr 0fr 0.9972067039105639fr",flexGrow:0,flexShrink:0,flexBasis:35},pxText13Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"auto",width:"100%",height:"100%",opacity:"1"},pxText13Text:{color:"#585858ff",textAlign:"left",lineHeight:"28.799999999999997px",textOverflow:"ellipsis",overflow:"hidden",

1whiteSpace:"pre",fontSize:"18px",fontFamily:'"Eina01", Roboto, Helvetica, Arial, serif',userSelect:"text"},pxText15:{position:"relative",pointerEvents:"none",width:"100%",height:"100%",display:"grid",gridTemplateRows:"24fr 0px 20px 0px 0px",gridTemplateColumns:"0.997206703910642fr 0fr 181.4916201117318fr 0fr 0fr",flexGrow:0,flexShrink:0,flexBasis:44},pxText15Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"auto",width:"100%",height:"100%",opacity:"1"},pxText15Text:{color:"#585858ff",textAlign:"left",lineHeight:"16.8px",textOverflow:"ellipsis",whiteSpace:"pre",fontSize:"14px",fontFamily:'"Eina01", Roboto, Helvetica, Arial, serif',userSelect:"text"},pxText17:{position:"relative",pointerEvents:"none",width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0fr minmax(20px,20fr) 0fr 2fr",gridTemplateColumns:"0.997206703910642fr 0fr 181.4916201117318fr 0fr 0fr",flexGrow:0,flexShrink:0,flexBasis:22},pxText17Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"auto",width:"100%",height:"100%"},pxText17Text:{color:"#585858ff",textAlign:"left",lineHeight:"16.8px",textOverflow:"ellipsis",whiteSpace:"pre",fontSize:"14px",fontFamily:'"Eina01", Roboto, Helvetica, Arial, serif',userSelect:"text"},pxFlexCell20:{position:"relative",flexGrow:1,flexShrink:1,flexBasis:46.61518795568608,width:"100%",height:"100%"},pxGraph21:{position:"relative",pointerEvents:"none",width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0px 101px 0px 0fr",gridTemplateColumns:"0fr 0px 101.85593220338978px 0px 0fr",flexGrow:0,flexShrink:1,flexBasis:101.85593220338978},pxGraph21Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"auto",backgroundSize:"contain",backgroundRepeat:"no-repeat",backgroundPosition:"center center",width:"100%",height:"100%",borderRadius:14,backgroundOrigin:"content-box",padding:10,border:"1px solid #dcdee4"}}),B=b;var C,H=o(32882);const E=(0,o(33081).A)((()=>Promise.all([o.e(6899),o.e(89390),o.e(37741),o.e(92183),o.e(17411)]).then(o.bind(o,17411)))),{Search:j}=a.A,N=(0,d.PA)((e=>{let{scrollRef:t,renderItem:o,type:r,that:i}=e;return(0,A.jsx)("div",{ref:t,className:(0,h.AH)(R.containerBody),children:(0,A.jsx)(f.Ay,{renderItem:o,itemLayout:"horizontal",dataSource:"component"===r?i.props.model.componentCollection:i.props.model.instanceCollection})})}));let G=(0,d.PA)(C=class extends p.Component{constructor(){super(...arguments),this.okRef=p.createRef(),this.renderInstance=e=>{const{model:t}=this.props;return(0,A.jsx)(B,{type:"instance",model:e,selectComponent:t,onSelect:()=>{setTimeout((()=>{this.okRef.current&&this.okRef.current.focus()}),200)}},e.key)},this.renderComponent=e=>{const{model:t}=this.props;return(0,A.jsx)(B,{type:"component",model:e,selectComponent:t,onSelect:()=>{setTimeout((()=>{this.okRef.current&&this.okRef.current.focus()}),200)}},e.cid)},this.loadMore=()=>{const{model:e}=this.props;if(!e)return null;e.hasMore&&!e.loading&&e.queryComponents()}}render(){const{model:e}=this.props;if(!e.visible)return null;const t=[{key:"instance",label:(0,A.jsx)("div",{style:{fontSize:"14px"},children:"Instance"}),children:(0,A.jsx)("div",{className:(0,h.AH)(R.pxFlexGroup1),children:(0,A.jsxs)("div",{className:(0,h.AH)(R.pxFlexGroup1Body),children:[(0,A.jsx)("div",{className:(0,h.AH)(R.selectList),children:(0,A.jsx)("div",{className:(0,h.AH)(R.selectListBody),children:(0,A.jsx)("div",{className:(0,h.AH)(R.container1),children:(0,A.jsx)(N,{renderItem:this.renderInstance,type:"instance",that:this})})})}),(0,A.jsx)("div",{className:(0,h.AH)(R.viewer),children:(0,A.jsx)("div",{className:(0,h.AH)(R.viewerBody),children:(0,A.jsx)("div",{className:(0,h.AH)(R.pxBox28),children:(0,A.jsx)(p.Suspense,{fallback:(0,A.jsx)(H.A,{tip:"Loading Content ..."}),children:(0,A.jsx)(E,{className:(0,h.AH)(R.pxBox28Body),boundWidth:400,boundHeight:400,root:e.instanceRoot,fontItems:e.fontItems,fontFaces:e.fontFaces,context:e.instanceInnerContext})})})})})]})})},{key:"component",label:(0,A.jsx)("div",{style:{fontSize:"14px"},children:"Component"}),children:(0,A.jsx)("div",{className:(0,h.AH)(R.pxFlexGroup1),children:(0,A.jsxs)("div",{className:(0,h.AH)(R.pxFlexGroup1Body),children:[(0,A.jsx)("div",{className:(0,h.AH)(R.selectList),children:(0,A.jsxs)("div",{className:(0,h.AH)(R.selectListBody),children:[(0,A.jsx)("div",{className:(0,h.AH)(R.search),children:(0,A.jsxs)("div",{className:(0,h.AH)(R.searchBody),children:[(0,A.jsx)("div",{className:(0,h.AH)(R.pxBox4),children:(0,A.jsx)("div",{className:(0,h.AH)(R.pxBox4Body)})}),(0,A.jsx)("div",{className:(0,h.AH)(R.pxBox5),children:(0,A.jsx)(j,{className:(0,h.AH)(R.pxBox5Body),placeholder:"Search reusable component",onChange:t=>e.componentFilter=t.target.value})})]})}),(0,A.jsx)("div",{className:(0,h.AH)(R.container),children:(0,A.jsx)(m.r,{onBottom:this.loadMore,children:e=>(0,A.jsx)(N,{scrollRef:e,renderItem:this.renderComponent,type:"component",that:this})})})]})}),(0,A.jsx)("div",{className:(0,h.AH)(R.viewer),children:(0,A.jsx)("div",{className:(0,h.AH)(R.viewerBody),children:(0,A.jsx)("div",{className:(0,h.AH)(R.pxBox28),children:(0,A.jsx)(E,{className:(0,h.AH)(R.pxBox28Body),boundWidth:400,boundHeight:400,root:e.componentRoot,fontItems:e.fontItems,fontFaces:e.fontFaces,context:e.componentInnerContext})})})})]})})}];return(0,A.jsx)(x.A,{title:"Select Component",width:740,bodyStyle:{height:500},open:e.visible,okButtonProps:{disabled:e.canOk,ref:this.okRef},cancelButtonProps:{},okText:"Select",onOk:e.handleSelect,onCancel:e.handleCancel,children:(0,A.jsx)(u.A,{activeKey:e.focusTab,className:(0,h.AH)(R.tab),tabPosition:"top",onTabClick:t=>

1e.focusTab=t,items:t})})}})||C;const R=h.vv.create({tab:{marginTop:-24,width:"100%",height:"calc(100% + 20px)"},pxFlexGroup1:{pointerEvents:"none",display:"grid",position:"relative",width:"100%",height:400,gridTemplateRows:"0px 0fr minmax(400px,603fr) 0fr 0px",gridTemplateColumns:"0px 0fr 900fr 0fr 0px"},pxFlexGroup1Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"none",width:"100%",height:"100%",backgroundColor:"#ffffffff",display:"flex",flexDirection:"row"},selectList:{position:"relative",pointerEvents:"none",width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0fr 752fr 0fr 0fr",gridTemplateColumns:"0fr 0px 300px 0px 0fr",flexGrow:0,flexShrink:1,flexBasis:300},selectListBody:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"none",width:"100%",height:"100%"},search:{position:"absolute",pointerEvents:"none",left:0,top:0,width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0fr 752fr 0fr 0fr",gridTemplateColumns:"0fr 0fr 300fr 0fr 0fr"},searchBody:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"none",width:"100%",height:"100%"},pxBox4:{position:"absolute",pointerEvents:"none",left:0,top:0,width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0fr 752fr 0fr 0fr",gridTemplateColumns:"0fr 0px 300px 0px 0fr"},pxBox4Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"auto",width:"100%",height:"100%",backgroundColor:"rgb(241, 241, 241)"},pxBox5:{position:"absolute",pointerEvents:"none",left:0,top:0,width:"100%",height:"100%",display:"grid",gridTemplateRows:"13px 0px 40px 0px 971fr",gridTemplateColumns:"15px 0fr 330fr 0fr 14px"},pxBox5Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"auto",width:"100%",height:"100%"},container:{position:"absolute",pointerEvents:"none",left:0,top:0,right:0,bottom:0,width:"100%",height:"100%",display:"grid",gridTemplateRows:"65px 0px 959fr 0px 0fr",gridTemplateColumns:"1fr 0fr 357fr 0fr 1fr"},container1:{position:"absolute",pointerEvents:"none",left:0,top:0,right:0,bottom:0,width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0px 959fr 0px 0fr",gridTemplateColumns:"1fr 0fr 357fr 0fr 1fr"},containerBody:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"auto",overflow:"scroll"},viewer:{position:"relative",pointerEvents:"none",width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0fr 1023fr 0fr 1fr",gridTemplateColumns:"0fr 0fr 752fr 0fr 0fr",flexGrow:1,flexShrink:1,flexBasis:620},props:{position:"relative",pointerEvents:"none",width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0fr 1023fr 0fr 1fr",gridTemplateColumns:"0fr 0fr 752fr 0fr 0fr",flexGrow:1,flexShrink:1,flexBasis:400},viewerBody:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"none",width:"100%",height:"100%"},propsBody:{gridArea:"3 / 3 / 3 / 3",padding:10,overflow:"auto",pointerEvents:"auto",width:"100%",height:"100%"},selectList5:{position:"absolute",pointerEvents:"none",left:0,top:0,width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0px 70px 0px 953fr",gridTemplateColumns:"0fr 0fr 752fr 0fr 0fr"},selectList5Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"none",width:"100%",height:"100%"},pxBox26:{position:"absolute",pointerEvents:"none",left:0,top:0,width:"100%",height:"100%",display:"grid",gridTemplateRows:"0px 0px 70px 0px 0fr",gridTemplateColumns:"0fr 0fr 752fr 0fr 0fr"},pxBox26Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"auto",width:"100%",height:"100%",borderRadius:"0px 0px 0px 0px"},pxText27:{position:"absolute",pointerEvents:"none",left:0,top:0,width:"100%",height:"100%",display:"grid",gridTemplateRows:"19px 0px 33px 0px 18fr",gridTemplateColumns:"18px 0px 171px 0px 563fr"},pxText27Body:{gridArea:"3 / 3 / 3 / 3",pointerEvents:"auto",width:"100%",height:"100%"},pxText27Text:{color:"#585858ff",textAlign:"left",lineHeight:"28.799999999999997px",textOverflow:"ellipsis",whiteSpace:"pre",fontSize:"24px",fontFamily:'"Eina01", Roboto, Helvetica, Arial, serif',userSelect:"text"},pxBox28:{position:"absolute",pointerEvents:"none",left:0,top:0,width:"100%",height:"100%",backgroundColor:"#000000"},pxBox28Body:{width:393,height:400,backgroundColor:"#000000"},helper:{display:"block",position:"absolute",cursor:"pointer",right:20,top:85,fontSize:18,color:"#2696f7"}}

1),k=(0,c.withRouter)(G)},67210:(e,t,o)=>{o.d(t,{r:()=>s});var r=o(26809),i=o(88920),n=o.n(i);function l(e,t){var o=(0,r.useMemo)((function(){var e,o,r,i;return{offset:null!=(e=null===t||void 0===t?void 0:t.offset)?e:0,debounce:null!=(o=null===t||void 0===t?void 0:t.debounce)?o:200,debounceOptions:null!=(r=null===t||void 0===t?void 0:t.debounceOptions)?r:{leading:!0},triggerOnNoScroll:null!=(i=null===t||void 0===t?void 0:t.triggerOnNoScroll)&&i}}),[null===t||void 0===t?void 0:t.offset,null===t||void 0===t?void 0:t.debounce,null===t||void 0===t?void 0:t.debounceOptions,null===t||void 0===t?void 0:t.triggerOnNoScroll]),i=o.offset,l=o.triggerOnNoScroll,s=o.debounce,p=o.debounceOptions,d=(0,r.useMemo)((function(){return function(e,t,o){return e?n()(t,e,o):t}(s,e,p)}),[s,e]),a=(0,r.useRef)(null),x=(0,r.useCallback)((function(){if(null!=a.current){var e=a.current,t=Math.round(e.scrollTop+e.clientHeight);Math.round(e.scrollHeight-i)<=t&&d()}else{var o=document.scrollingElement||document.documentElement,r=Math.round(o.scrollTop+window.innerHeight);Math.round(o.scrollHeight-i)<=r&&d()}}),[i,e,a.current]);return(0,r.useEffect)((function(){var e=a.current;return null!=e?e.addEventListener("scroll",x):window.addEventListener("scroll",x),l&&x(),function(){null!=e?e.removeEventListener("scroll",x):window.removeEventListener("scroll",x)}}),[x,s]),a}var s=function(e){var t=e.children,o=l(e.onBottom,{offset:e.offset,debounce:e.debounce,debounceOptions:e.debounceOptions,triggerOnNoScroll:e.triggerOnNoScroll});return t?"function"===typeof t?t(o):t:null}}}]);