UNPKG

@salesforce-ux/design-system

Version:
1 lines 7.13 kB
var SLDS=SLDS||{};SLDS["__internal/chunked/showcase/ui/components/drop-zone/base/example.jsx.js"]=function(e){function t(t){for(var a,s,o=t[0],d=t[1],c=t[2],i=0,m=[];i<o.length;i++)s=o[i],n[s]&&m.push(n[s][0]),n[s]=0;for(a in d)Object.prototype.hasOwnProperty.call(d,a)&&(e[a]=d[a]);for(u&&u(t);m.length;)m.shift()();return r.push.apply(r,c||[]),l()}function l(){for(var e,t=0;t<r.length;t++){for(var l=r[t],a=!0,o=1;o<l.length;o++){var d=l[o];0!==n[d]&&(a=!1)}a&&(r.splice(t--,1),e=s(s.s=l[0]))}return e}var a={},n={41:0,7:0,8:0,15:0,16:0,22:0,32:0,38:0,42:0,45:0,54:0,58:0,59:0,63:0,64:0,67:0,71:0,75:0,77:0,80:0,84:0,87:0,88:0,93:0,99:0,100:0,104:0,106:0,114:0,117:0,118:0,122:0,124:0,125:0,126:0,127:0,128:0,129:0,133:0,138:0,144:0,152:0,163:0,167:0,170:0,171:0,178:0,181:0,182:0},r=[];function s(t){if(a[t])return a[t].exports;var l=a[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,s),l.l=!0,l.exports}s.m=e,s.c=a,s.d=function(e,t,l){s.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:l})},s.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_showcase=this.webpackJsonpSLDS___internal_chunked_showcase||[],d=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var u=d;return r.push([107,0]),l()}({0:function(e,t){e.exports=React},107:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.DropZoneLabel=t.DropZoneContainer=t.DropZoneInsertionPoint=t.DropZone=t.DemoComponent=t.Demo=void 0;var a=m(l(0)),n=m(l(1)),r=l(6),s=m(l(23)),o=m(l(2)),d=l(35),c=l(22),u=m(c),i=m(l(3));function m(e){return e&&e.__esModule?e:{default:e}}var f=t.Demo=function(e){return a.default.createElement("div",{className:"demo-only",style:{paddingTop:"2rem"}},e.children)};f.propTypes={children:i.default.node};var p=t.DemoComponent=function(e){return a.default.createElement("div",{className:"demo-only demo-component",style:{width:"100%",height:"10rem"}},e.children)};p.propTypes={children:i.default.node};var E=t.DropZone=function(e){return a.default.createElement("div",{className:(0,n.default)("slds-drop-zone",{"slds-drop-zone_drag":e.isDragging})},e.children)};E.propTypes={isDragging:i.default.bool,children:i.default.node};var h=t.DropZoneInsertionPoint=function(e){return a.default.createElement("div",{className:"slds-drop-zone_drag__slot"})},b=t.DropZoneContainer=function(e){return a.default.createElement("div",{className:(0,n.default)("slds-drop-zone__container",{"slds-is-hovered":e.isHovered}),tabIndex:"-1"},a.default.createElement(_,{isContainer:!0,headerText:"Component Name"}),e.children,e.hasActions&&a.default.createElement("div",{className:"slds-drop-zone__actions"},a.default.createElement(d.ButtonGroup,null,a.default.createElement(o.default,{className:"slds-button_icon-x-small",theme:"brand",symbol:"move",assistiveText:"Move",title:"Move"}),a.default.createElement(o.default,{className:"slds-button_icon-x-small",theme:"brand",symbol:"close",assistiveText:"Close",title:"Close"}))))};b.propTypes={hasActions:i.default.bool,isHovered:i.default.bool,children:i.default.node};var v=function(e){return a.default.createElement(r.UtilityIcon,{symbol:e.isContainer?"connected_apps":"builder",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-current-color",title:!1,assistiveText:!1})};v.propTypes={isContainer:i.default.bool};var _=t.DropZoneLabel=function(e){return a.default.createElement("div",{className:(0,n.default)("slds-drop-zone__label",{"slds-drop-zone__label_container":e.isContainer})},a.default.createElement(s.default,{figureLeft:a.default.createElement(v,{isContainer:e.isContainer}),flavor:"center"},e.isContainer?a.default.createElement("h2",null,a.default.createElement("button",{className:"slds-drop-zone__label_button slds-button_reset"},a.default.createElement("span",{className:"slds-assistive-text"},"Edit: "),a.default.createElement("span",null,e.headerText))):a.default.createElement("h2",null,e.headerText)))};_.propTypes={isContainer:i.default.bool,headerText:i.default.string},t.default=a.default.createElement(E,null,a.default.createElement(p,null));t.examples=[{id:"drag-over",label:"Drag Over",element:a.default.createElement(f,null,a.default.createElement(E,{isDragging:!0},a.default.createElement(_,{headerText:"Content"}),a.default.createElement(p,null),a.default.createElement(h,null),a.default.createElement(p,null)))},{id:"with-populated-region",label:"With Populated Region",element:a.default.createElement(f,null,a.default.createElement(E,null,a.default.createElement(p,null),a.default.createElement(b,{isHovered:!0},a.default.createElement(p,null))))},{id:"with-populated-region-and-actions",label:"With Populated Region and Actions",element:a.default.createElement(f,null,a.default.createElement(E,null,a.default.createElement(p,null),a.default.createElement(b,{hasActions:!0,isHovered:!0},a.default.createElement(p,null))))},{id:"with-cards",label:"With Cards",element:a.default.createElement(f,null,a.default.createElement(E,null,a.default.createElement(b,{hasActions:!0},a.default.createElement(u.default,{className:"slds-m-bottom_small"},a.default.createElement(c.CardHeader,{title:"Accounts",showIcon:!0,symbol:"account"}),a.default.createElement(c.CardBody,{hasPadding:!0},"Card Body"),a.default.createElement(c.CardFooter,{linkTabIndex:"-1"},"View All ",a.default.createElement("span",{className:"slds-assistive-text"},"Accounts")))),a.default.createElement(b,{hasActions:!0},a.default.createElement(u.default,{className:"slds-m-top_small"},a.default.createElement(c.CardHeader,{title:"Accounts",showIcon:!0,symbol:"account"}),a.default.createElement(c.CardBody,{hasPadding:!0},"Card Body"),a.default.createElement(c.CardFooter,{linkTabIndex:"-1"},"View All ",a.default.createElement("span",{className:"slds-assistive-text"},"Accounts"))))))},{id:"dragging-with-cards",label:"Dragging With Cards",element:a.default.createElement(f,null,a.default.createElement(E,{isDragging:!0},a.default.createElement(_,{headerText:"Content"}),a.default.createElement(b,{hasActions:!0},a.default.createElement(u.default,{className:"slds-m-bottom_small"},a.default.createElement(c.CardHeader,{title:"Accounts",showIcon:!0,symbol:"account"}),a.default.createElement(c.CardBody,{hasPadding:!0},"Card Body"),a.default.createElement(c.CardFooter,{linkTabIndex:"-1"},"View All ",a.default.createElement("span",{className:"slds-assistive-text"},"Accounts")))),a.default.createElement(h,null),a.default.createElement(b,{hasActions:!0},a.default.createElement(u.default,{className:"slds-m-top_small"},a.default.createElement(c.CardHeader,{title:"Accounts",showIcon:!0,symbol:"account"}),a.default.createElement(c.CardBody,{hasPadding:!0},"Card Body"),a.default.createElement(c.CardFooter,{linkTabIndex:"-1"},"View All ",a.default.createElement("span",{className:"slds-assistive-text"},"Accounts"))))))}]}});