@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 16.7 kB
JavaScript
var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/showcase/./ui/components/data-tables/advanced/example.jsx.js"]=function(e){function a(a){for(var n,c,i=a[0],o=a[1],s=a[2],u=0,m=[];u<i.length;u++)c=i[u],Object.prototype.hasOwnProperty.call(l,c)&&l[c]&&m.push(l[c][0]),l[c]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(d&&d(a);m.length;)m.shift()();return r.push.apply(r,s||[]),t()}function t(){for(var e,a=0;a<r.length;a++){for(var t=r[a],n=!0,i=1;i<t.length;i++){var o=t[i];0!==l[o]&&(n=!1)}n&&(r.splice(a--,1),e=c(c.s=t[0]))}return e}var n={},l={51:0,6:0,13:0,14:0,22:0,24:0,26:0,36:0,37:0,56:0,72:0,73:0,79:0,93:0,94:0,96:0,97:0,98:0,103:0,104:0,112:0,117:0,119:0,123:0,125:0,128:0,132:0,134:0,136:0,137:0,138:0,141:0,143:0,146:0,147:0,148:0,151:0,155:0,158:0},r=[];function c(a){if(n[a])return n[a].exports;var t=n[a]={i:a,l:!1,exports:{}};return e[a].call(t.exports,t,t.exports,c),t.l=!0,t.exports}c.m=e,c.c=n,c.d=function(e,a,t){c.o(e,a)||Object.defineProperty(e,a,{enumerable:!0,get:t})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,a){if(1&a&&(e=c(e)),8&a)return e;if(4&a&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(c.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&a&&"string"!=typeof e)for(var n in e)c.d(t,n,function(a){return e[a]}.bind(null,n));return t},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},c.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_showcase=this.webpackJsonpSLDS___internal_chunked_showcase||[],o=i.push.bind(i);i.push=a,i=i.slice();for(var s=0;s<i.length;s++)a(i[s]);var d=o;return r.push([716,0]),t()}({0:function(e,a){e.exports=React},14:function(e,a){e.exports=ReactDOM},716:function(e,a,t){"use strict";t.r(a),t.d(a,"columns",(function(){return h})),t.d(a,"rows",(function(){return R})),t.d(a,"productColumns",(function(){return L})),t.d(a,"productRows",(function(){return T})),t.d(a,"states",(function(){return I})),t.d(a,"examples",(function(){return O}));var n=t(0),l=t.n(n),r=t(135),c=t(26),i=t(3),o=t(1),s=t.n(o),d=t(6),u=t(136),m=t(66),p=t(13),b=t(5),E=function(e){var a=Object(n.useContext)(i.d).isActionableMode;return l.a.createElement(i.p,{isSelected:e.isSelected},l.a.createElement(i.t,{isRightAligned:!0,type:"advanced"},l.a.createElement(i.n,{checked:e.isSelected,hasSingleRowSelect:e.hasSingleRowSelect,index:e.index,inputTabIndex:a?"0":"-1"})),l.a.createElement(i.m,{hasFocus:!a&&1===e.index&&e.hasFocus,tabIndex:a||1!==e.index?null:"0"},l.a.createElement(i.j,{cellLink:!0,cellText:e.recordName})),l.a.createElement(i.t,{type:"advanced"},l.a.createElement(i.j,{cellText:e.accountName})),l.a.createElement(i.t,{type:"advanced"},l.a.createElement(i.j,{cellText:e.closeDate})),l.a.createElement(i.t,{type:"advanced"},l.a.createElement(i.j,{cellText:e.stage})),l.a.createElement(i.t,{type:"advanced"},l.a.createElement(i.j,{cellText:e.confidence})),e.hasScores&&e.amountScore&&e.amountScoreLabel?l.a.createElement(i.t,{type:"advanced"},l.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},l.a.createElement("div",{className:"slds-truncate",title:e.amount},e.amount),l.a.createElement("div",{className:"slds-icon_container slds-m-left_x-small slds-m-right_xx-small"},l.a.createElement(u.a,{"data-slds-state":e.amountScore})),l.a.createElement("div",{className:"slds-truncate",title:e.amountScoreLabel},e.amountScoreLabel))):l.a.createElement(i.t,{type:"advanced"},l.a.createElement(i.j,{cellText:e.amount})),l.a.createElement(i.t,{type:"advanced"},l.a.createElement(i.j,{cellLink:!0,cellText:e.contact})),e.hasRowActions&&l.a.createElement(i.t,{type:"advanced"},l.a.createElement(i.k,{rowName:e.recordName})))};E.displayName="AdvancedDataTableTr",E.propTypes={accountName:s.a.string.isRequired,amount:s.a.string.isRequired,amountScore:Object(d.b)("amountScoreLabel",s.a.string),amountScoreLabel:Object(d.b)("amountScore",s.a.string),closeDate:s.a.string.isRequired,confidence:s.a.string.isRequired,contact:s.a.string.isRequired,hasFocus:s.a.bool,hasRowActions:s.a.bool,hasScores:s.a.bool,index:s.a.number.isRequired,hasSingleRowSelect:s.a.bool,recordName:s.a.string.isRequired,isSelected:s.a.bool,stage:s.a.string.isRequired},E.defaultProps={hasRowActions:!0};var y=function(e){return l.a.createElement("div",{className:"slds-size_xx-small"},l.a.createElement("img",{alt:e.productName,src:e.productImgSrc,title:e.productName}))};y.displayName="ProductImage",y.propTypes={productImgSrc:s.a.string.isRequired,productName:s.a.string.isRequired};var v=function(e){return l.a.createElement(l.a.Fragment,null,l.a.createElement("p",null,l.a.createElement("s",null,e.priceOriginal)),l.a.createElement("p",null,e.priceDiscount))};v.displayName="ProductPriceCell",v.propTypes={priceDiscount:s.a.string.isRequired,priceOriginal:s.a.string.isRequired};var g=function(e){return l.a.createElement(m.a,{figureLeft:l.a.createElement(y,{productImgSrc:e.productImgSrc,productName:e.productName})},l.a.createElement(i.j,{cellLink:!0,cellText:e.productName}),l.a.createElement("ul",null,e.productProperties.map((function(e,a){return l.a.createElement("li",{className:"slds-truncate",key:a,title:"".concat(e.label,": ").concat(e.value)},e.label,": ",l.a.createElement("strong",null,e.value))}))),l.a.createElement("p",{className:"slds-text-color_success"},e.labelInventory))};g.displayName="ProductItemDetailsCell",g.propTypes={labelInventory:s.a.string.isRequired,productImgSrc:s.a.string.isRequired,productName:s.a.string.isRequired,productProperties:s.a.array.isRequired};var f=function(e){var a=Object(n.useContext)(i.d).isActionableMode;return l.a.createElement(b.b,{inputId:e.inputId,labelClassName:"slds-assistive-text",labelContent:e.labelText},l.a.createElement(p.a,{className:"slds-size_xxx-small slds-text-align_center slds-p-horizontal_x-small",defaultValue:e.quantity,id:e.inputId,placeholder:" ",tabIndex:a?null:"-1"}))};f.displayName="ProductQuantityCell",f.propTypes={labelText:s.a.string.isRequired,inputId:s.a.string.isRequired,quantity:s.a.string};var x=function(e){return l.a.createElement(i.p,{isTopAligned:!0},l.a.createElement(i.m,null,l.a.createElement(g,{labelInventory:e.labelInventory,productImgSrc:e.productImgSrc,productName:e.productName,productProperties:e.productProperties})),l.a.createElement(i.t,{type:"advanced"},l.a.createElement(f,{inputId:"product-quantity-text-input-id-".concat(e.index),labelText:"".concat(e.productName," quantity"),quantity:e.quantity})),l.a.createElement(i.t,{type:"advanced"},l.a.createElement(i.j,{cellText:e.dateAdded})),l.a.createElement(i.t,{type:"advanced"},l.a.createElement(v,{priceDiscount:e.priceDiscount,priceOriginal:e.priceOriginal})),l.a.createElement(i.t,{type:"advanced"},l.a.createElement(i.k,{rowName:e.productName})))};function S(){return(S=Object.assign||function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}x.displayName="ProductDataTableTr",x.propTypes={dateAdded:s.a.string.isRequired,index:s.a.number.isRequired,labelInventory:s.a.string.isRequired,priceDiscount:s.a.string.isRequired,priceOriginal:s.a.string.isRequired,productImgSrc:s.a.string.isRequired,productName:s.a.string.isRequired,productProperties:s.a.array.isRequired,quantity:s.a.string};var h=["Name","Account Name","Close Date","Stage","Confidence","Amount","Contact"],R=[{recordName:"Acme - 1,200 Widgets",accountName:"Acme",closeDate:"4/10/15",stage:"Value Proposition",confidence:"30%",amount:"$25,000,000",contact:"jrogers@acme.com",amountScore:"positive",amountScoreLabel:"High"},{recordName:"Acme - 200 Widgets",accountName:"Acme",closeDate:"1/31/15",stage:"Prospecting",confidence:"60%",amount:"$5,000,000",contact:"bob@acme.com"},{recordName:"salesforce.com - 1,000 Widgets",accountName:"salesforce.com",closeDate:"1/31/15 3:45PM",stage:"Id. Decision Makers",confidence:"70%",amount:"$25,000",contact:"nathan@salesforce.com",amountScore:"negative",amountScoreLabel:"Low"}],N=[].concat(R).reverse(),L=["Product","Quantity","Date Added","Price"],T=[{productImgSrc:"/assets/images/product1.jpg",productName:"Baseball Cap",productProperties:[{label:"Size",value:"7 3/4"},{label:"Color",value:"Blue"},{label:"Item No.",value:"1007100"}],labelInventory:"In Stock",quantity:"1",dateAdded:"4/10/17",priceOriginal:"$23.00",priceDiscount:"$20.00"},{productImgSrc:"/assets/images/product2.jpg",productName:"Construction Hat",productProperties:[{label:"Size",value:"One size fits most"},{label:"Color",value:"Yellow"},{label:"Item No.",value:"2800100"}],labelInventory:"In Stock",quantity:"1",dateAdded:"4/10/17",priceOriginal:"$52.00",priceDiscount:"$40.00"},{productImgSrc:"/assets/images/product3.jpg",productName:"Campaign Hat",productProperties:[{label:"Size",value:"Small"},{label:"Color",value:"Tan"},{label:"Item No.",value:"2000100"}],labelInventory:"In Stock",quantity:"1",dateAdded:"4/10/17",priceOriginal:"$79.00",priceDiscount:"$59.00"}],w=[{column:"account name",icon:l.a.createElement(c.StandardIcon,{assistiveText:"Account",className:"slds-icon_x-small",containerClassName:"slds-m-right_xx-small",symbol:"account",title:"Account"})},{column:"confidence",icon:l.a.createElement("div",{className:"slds-icon_container slds-m-right_xx-small"},l.a.createElement(r.a,{assistiveText:"Einstein calculated",className:"slds-is-paused",title:"Einstein calculated"}))}],I=(a.default=[{id:"default",label:"Default",element:l.a.createElement(i.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example default advanced table of Opportunities"},l.a.createElement(i.a,{columns:h}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({isSelected:!1,key:a,index:a+1},e))}))))}],[{id:"cell-focused",label:"Cell Focused",element:l.a.createElement(i.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities with cell focused"},l.a.createElement(i.a,{columns:h}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({isSelected:!1,key:a,index:a+1},e,{hasFocus:!0}))}))))},{id:"actionable-mode",label:"Actionable Mode",element:l.a.createElement(i.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities in actionable mode"},l.a.createElement(i.d.Provider,{value:{isActionableMode:!0}},l.a.createElement(i.a,{columns:h}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({index:a+1,isSelected:!1,key:a},e))})))))},{id:"row-selected",label:"Row Selected (Actionable mode)",element:l.a.createElement(i.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities in actionable mode with row selected"},l.a.createElement(i.d.Provider,{value:{isActionableMode:!0}},l.a.createElement(i.a,{columns:h}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({index:a+1,isSelected:1===a,key:a},e))})))))},{id:"all-row-selected",label:"All Rows Selected (Actionable mode)",element:l.a.createElement(i.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities in actionable mode with all rows selected"},l.a.createElement(i.d.Provider,{value:{isActionableMode:!0}},l.a.createElement(i.a,{columns:h,selectAll:!0}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({index:a+1,isSelected:!0,key:a},e))})))))},{id:"sorted-column-asc",label:"Sorted Ascending (Actionable mode)",element:l.a.createElement(i.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities in actionable mode with ascending column sorting"},l.a.createElement(i.d.Provider,{value:{isActionableMode:!0}},l.a.createElement(i.a,{columns:h,sortDirection:"ascending"}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({index:a+1,isSelected:!1,key:a},e))})))))},{id:"sorted-column-desc",label:"Sorted Descending (Actionable mode)",element:l.a.createElement(i.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities in actionable mode with descending column sorting"},l.a.createElement(i.d.Provider,{value:{isActionableMode:!0}},l.a.createElement(i.a,{columns:h,sortDirection:"descending"}),l.a.createElement(i.o,null,N.map((function(e,a){return l.a.createElement(E,S({index:a+1,isSelected:!1,key:a},e))})))))},{id:"resized-column",label:"Column Resized (Actionable mode)",element:l.a.createElement(i.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities in actionable mode with resized column"},l.a.createElement(i.d.Provider,{value:{isActionableMode:!0}},l.a.createElement(i.a,{columns:h,singleColumnWidth:"300px"}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({index:a+1,isSelected:!1,key:a},e))})))))}]),O=[{id:"header-icon-menu-button",label:"Header Icon and Menu Button",element:l.a.createElement(i.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities with header icon and menu button"},l.a.createElement(i.a,{columnHeaderIcons:w,columns:h,hasMenus:!0}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({isSelected:!1,key:a,index:a+1},e))}))))},{id:"header-menu-button",label:"Header Menu Button",element:l.a.createElement(i.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities with header menu button"},l.a.createElement(i.a,{columns:h,hasMenus:!0}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({isSelected:!1,key:a,index:a+1},e))}))))},{id:"cell-icon",label:"Cell Icon",element:l.a.createElement(i.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities with cell icon"},l.a.createElement(i.a,{columns:h}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({isSelected:!1,key:a,index:a+1},e,{hasScores:!0}))}))))},{id:"product-listing",label:"Product Listing",element:l.a.createElement(i.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table as product listing"},l.a.createElement(i.d.Provider,{value:{isActionableMode:!0}},l.a.createElement(i.a,{columns:L,hasNoRowSelection:!0}),l.a.createElement(i.o,null,T.map((function(e,a){return l.a.createElement(x,S({isSelected:!1,key:a,index:a+1},e))})))))},{id:"radio-group",label:"Radio Group",element:l.a.createElement(i.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,type:"advanced",ariaLabel:"Example advanced table as radio group"},l.a.createElement(i.a,{columns:h,hasSingleRowSelect:!0}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({hasSingleRowSelect:!0,index:a+1,key:a},e))}))))},{id:"data-table-no-borders",label:"No borders",element:l.a.createElement(i.s,{isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table with no borders"},l.a.createElement(i.a,{columns:h}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({isSelected:!1,key:a,index:a+1},e))}))))},{id:"data-table-headless",label:"Headless",element:l.a.createElement(i.s,{hasHiddenHeader:!0,isBordered:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced headless table"},l.a.createElement(i.a,{isHidden:!0,columns:h}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({isSelected:!1,key:a,index:a+1},e))}))))},{id:"data-table-headless-no-borders",label:"Headless with no borders",element:l.a.createElement(i.s,{hasHiddenHeader:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced headless border-less table"},l.a.createElement(i.a,{isHidden:!0,columns:h}),l.a.createElement(i.o,null,R.map((function(e,a){return l.a.createElement(E,S({isSelected:!1,key:a,index:a+1},e))}))))}]}});