@sap-ux/ui-components/storybook/UIFlexibleTable-story.81441f28.iframe.bundle.js

SAP UI Components Library

"use strict";(()=>{var _e=Object.defineProperty,Ne=Object.defineProperties;var Le=Object.getOwnPropertyDescriptors;var Ie=Object.getOwnPropertySymbols;var Ue=Object.prototype.hasOwnProperty,$e=Object.prototype.propertyIsEnumerable;var Se=(R,w,m)=>w in R?_e(R,w,{enumerable:!0,configurable:!0,writable:!0,value:m}):R[w]=m,B=(R,w)=>{for(var m in w||(w={}))Ue.call(w,m)&&Se(R,m,w[m]);if(Ie)for(var m of Ie(w))$e.call(w,m)&&Se(R,m,w[m]);return R},F=(R,w)=>Ne(R,Le(w));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[812],{"./stories/UIFlexibleTable.story.tsx":function(R,w,m){var ye=this&&this.__createBinding||(Object.create?function(l,a,t,s){s===void 0&&(s=t);var c=Object.getOwnPropertyDescriptor(a,t);(!c||("get"in c?!a.__esModule:c.writable||c.configurable))&&(c={enumerable:!0,get:function(){return a[t]}}),Object.defineProperty(l,s,c)}:function(l,a,t,s){s===void 0&&(s=t),l[s]=a[t]}),De=this&&this.__setModuleDefault||(Object.create?function(l,a){Object.defineProperty(l,"default",{enumerable:!0,value:a})}:function(l,a){l.default=a}),Ce=this&&this.__importStar||function(l){if(l&&l.__esModule)return l;var a={};if(l!=null)for(var t in l)t!=="default"&&Object.prototype.hasOwnProperty.call(l,t)&&ye(a,l,t);return De(a,l),a};Object.defineProperty(w,"__esModule",{value:!0}),w.WrappingTable=w.InlineFlexTable=void 0;const e=Ce(m("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),d=m("./src/components/index.tsx"),me=m("../../node_modules/.pnpm/react-movable@2.5.4_react-dom@16.14.0_react@16.14.0/node_modules/react-movable/lib/index.js");w.default={title:"Tables/UIFlexibleTable"};const _=["table1","table2"],N=Array.from({length:10}).map((l,a)=>({key:`column${a+1}`,title:a===0?"Beginning Column":`Column ${a+1}`,tooltip:`Tooltip for column #${a+1}`}));N.push({key:"preferred",title:"Preferred",hidden:!0});const Z=l=>{const a={};return N.forEach((t,s)=>{a[t.key]=s<5?`sample_${l}${s}`:"a"}),a},pe=[],ge=(l,a,t)=>l.map((c,f)=>{const x={};N.forEach((h,I)=>{x[h.key]={type:I<5?"input":a&&I===9?"link":"dropdown",value:l[f][h.key]}});const S=x.preferred.value==="1";return{key:f.toFixed(0),title:`Row ${f+1}`,className:t===f||t===100?"active-row":S?"preferred-row":"",cells:x,tooltip:`Tooltip for row #${f+1}`}});function xe(l,a,t,s){const c=l.value.value,f=l.colIndex===1&&l.rowIndex===2&&s,x=N[l.colIndex];switch(l.value.type){case"dropdown":{const S=["a","b","c"].map(h=>({key:h,text:`Option ${h.toUpperCase()}`}));return{title:f?"Custom Title for spanned cell":void 0,isSpan:f,cellClassNames:f?"spanned-cell":s&&l.rowIndex===2&&!f?"not-spanned-cell":void 0,content:e.default.createElement(d.UIDropdown,{options:S,selectedKey:c,disabled:a,onChange:(h,I,A)=>{var L;return t((L=I==null?void 0:I.key.toString())!=null?L:"")},title:x.tooltip})}}case"input":return{title:f?"Custom Title for spanned cell":void 0,isSpan:f,cellClassNames:[f?"spanned-cell":s&&l.rowIndex===2&&!f?"not-spanned-cell":""],content:e.default.createElement(ve,{value:c,readonly:a,onChange:S=>t(S),title:x.tooltip})};default:return{content:e.default.createElement(d.UILink,{href:"",title:"Tooltip for navigation"},"Link")}}}function ve(l){const[a,t]=(0,e.useState)("");(0,e.useEffect)(()=>{t(l.value)},[l.value]);const s=c=>{t(c)};return e.default.createElement(d.UITextInput,{value:a,readOnly:l.readonly,onChange:(c,f)=>s(f||""),onBlur:()=>{l.value!==a&&setTimeout(()=>{l.onChange(a)},0)},title:l.title})}function he(l){const a=Z(l.length);l.push(a)}const ke=`
.flexible-table {
    font-size: 13px;
}

body .flexible-table-content-table-row.dragged {
    font-size: 13px;
}

.flexible-table-content-table-row-item-actions, .flexible-table-content-table-title-row-item-actions {
    min-width: 130px !important;
}

.flexible-table-content-table-row.active-row {
    background: #D0FFD0;
}

.table-column.fixed {
    width: 100px;
}

.table-column.column-0 {
    background: #FFD0B0;
}

.table-column.column-5 {
    background: #D0B0FF;
}

.in-row .spanned-cell {
    flex: 9;
    
}
.in-row .not-spanned-cell {
    flex: 1;
}
`,Te=()=>{const[l,a]=(0,e.useState)(pe),[t,s]=(0,e.useState)([]),[c,f]=(0,e.useState)(!1),[x,S]=(0,e.useState)(!0),[h,I]=(0,e.useState)(!0),[A,L]=(0,e.useState)(!1),[M,q]=(0,e.useState)(!1),[U,ee]=(0,e.useState)(!1),[P,te]=(0,e.useState)(!1),[C,ne]=(0,e.useState)(!1),[$,oe]=(0,e.useState)(!1),[y,le]=(0,e.useState)(!1),[W,ae]=(0,e.useState)(!0),[v,se]=(0,e.useState)(!1),[O,z]=(0,e.useState)(!1),[j,re]=(0,e.useState)(!1),[H,G]=(0,e.useState)(-1),[k,ie]=(0,e.useState)(!1),[V,de]=(0,e.useState)(!1),[T,K]=(0,e.useState)(!1),[g,ce]=(0,e.useState)(!1),[J,ue]=(0,e.useState)(!0),i=(0,e.useRef)({}),Q=o=>{o.stopPropagation()},E=o=>{a(ge(o,v,H))};(0,e.useEffect)(()=>{for(const o in i.current){const b=i.current[o];b.current&&(b.current.removeEventListener("mousedown",Q),b.current.addEventListener("mousedown",Q))}}),(0,e.useEffect)(()=>{E(t)},[v,H]),(0,e.useEffect)(()=>{const o=Array.from({length:3}).map((b,D)=>Z(D));s(o),E(o)},[]);const X=()=>(he(t),s(t),E(t),{scrollToRow:t.length-1}),fe=o=>{t.splice(o.rowIndex,1),s(t),E(t)},be=o=>{const b=g&&o.oldIndex===0&&o.newIndex>1;if(!b){const D=(0,me.arrayMove)(t,o.oldIndex,o.newIndex);s(D),E(D)}return{isDropDisabled:b}},u=(o,b,D)=>e.default.createElement(d.UICheckbox,{label:o,checked:b,onChange:()=>{D(!b)}}),n=o=>{const b=`cell-${o.rowIndex}-${o.colIndex}`;i.current[b]||(i.current[b]=e.default.createRef());const Re=xe(o,y,Fe=>{t[o.rowIndex][o.colKey]=Fe,s(t),E(t)},j);return F(B({},Re),{content:e.default.createElement("div",{ref:i.current[b]},Re.content)})},r=o=>{if(o.rowIndex===t.length-1)return e.default.createElement("div",{style:{padding:"0 5px",verticalAlign:"center"}},"Special row content")},p=o=>{G(o),new Promise(b=>{setTimeout(()=>b(!0),2e3)}).then(()=>{G(-1)})},Y=o=>[e.default.createElement(d.UIFlexibleTableRowActionButton,{key:`goto-code-row-${o.rowIndex}`,actionName:"GotoCode",tableId:_[0],iconName:d.UiIcons.CodeSnippet,rowNumber:o.rowIndex,onClick:()=>p(o.rowIndex),title:"Navigation demo"})],we=o=>[e.default.createElement(d.UIFlexibleTableActionButton,{key:"goto-code-row-0",actionName:"GotoCode",tableId:_[0],iconName:d.UiIcons.CodeSnippet,onClick:()=>p(100),title:"Navigation demo"})],Be=o=>[e.default.createElement(d.UIDefaultButton,{key:"1",iconProps:{iconName:"Delete"},className:"flexible-table-btn-clear",disabled:c||o.readonly,onClick:()=>{s([]),a([])}},"Clear table")];return e.default.createElement("div",null,e.default.createElement("h3",null,"In-line layout"),e.default.createElement("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:"20px",maxWidth:"1200px"}},u("Vertical layout",U,ee),u("Show titles",h,I),u("Show titles in cells",M,q),u("Show row headers",A,L),u("Show Index",W,ae),u("Show custom content",v,se),u("Span cells",j,re),u("Reorder enabled",x,S),u("Reorder restrictions",g,ce),u("Disable Adding",C,ne),u("Disable Deletion",$,oe),u("Readonly",y,le),u("No row background",P,te),u("Loading data",c,f),u("Column highlight",O,z),u("Is fixed max width",k,ie),u("Lock vertically",V,de),u("Reverse background",T,K),u("Disable drag using touch",J,ue)),e.default.createElement("hr",null),e.default.createElement("div",null,e.default.createElement("style",null,ke),e.default.createElement("div",{style:{maxWidth:U?"500px":"1300px"}},e.default.createElement(d.UIFlexibleTable,{addRowButton:{label:"Add row",title:y?"Disabled due to read only mode":"",onClick:X},columns:N.map((o,b)=>F(B({},o),{className:`table-column column-${O?b:""}${v?"fixed":""}`})),id:_[0],layout:d.UIFlexibleTableLayout.InlineFlex,onRenderCell:n,rows:l,inRowLayoutMinWidth:1e3,onDeleteRow:fe,showColumnTitles:h,showColumnTitlesInCells:M,isContentLoading:c,onTableReorder:x?be:void 0,noRowBackground:P,isAddItemDisabled:C,showIndexColumn:W,readonly:y,onRenderDeleteAction:o=>({isDeleteDisabled:$&&o.rowIndex===0,tooltip:$&&o.rowIndex===0?"Disabled for demo purposes":"Click to delete the row"}),onRenderActions:Y,onRenderRowDataContent:v?r:void 0,onRenderReorderActions:o=>g?{up:{disabled:o.rowIndex===1,tooltip:o.rowIndex===1?"Move up disabled for demo purposes":void 0},down:{disabled:o.rowIndex===1,tooltip:o.rowIndex===1?"Move down disabled for demo purposes":void 0}}:{},onBeforeTableRender:g?o=>({rows:o.rows.map((b,D)=>F(B({},b),{disabled:D===1}))}):void 0,onRenderRowContainer:g?o=>({isDropWarning:!o.isDragged&&!!o.rowIndex&&o.rowIndex>1}):void 0,maxScrollableContentHeight:U?700:220,showRowTitles:A,maxWidth:k?800:void 0,lockVertically:V,reverseBackground:T,onRenderPrimaryTableActions:Be,onRenderSecondaryTableActions:we,noDataText:"No data",isTouchDragDisabled:J}))))};w.InlineFlexTable=Te;const Ee=`

.flexible-table {
    font-size: 13px;
}

body .flexible-table-content-table-row.dragged {
    font-size: 13px;
}

.flexible-table-content-table-row-item-actions, .flexible-table-content-table-title-row-item-actions {
    min-width: 130px !important;
}

.flexible-table-content-table-row.preferred-row {
    background: #FFD0D0;
}

.flexible-table-content-table-row.active-row {
    background: #D0FFD0;
}

.flexible-table-content-table-row-wrapper.wrapping-layout .flexible-table-content-table-row-item-data-cells-wrapper {
    width: 120px !important;
}

.table-column.column-0 {
    background: #FFD0B0;
}

.table-column.column-5 {
    background: #D0B0FF;
}

.flexible-table-content-table-row-wrapper.wrapping-layout .flexible-table-content-table-row-item-data-cells-wrapper.spanned-cell {
    width: 240px !important;
}
`,Ae=()=>{const[l,a]=(0,e.useState)(pe),[t,s]=(0,e.useState)([]),[c,f]=(0,e.useState)(!1),[x,S]=(0,e.useState)(!0),[h,I]=(0,e.useState)(!0),[A,L]=(0,e.useState)(!1),[M,q]=(0,e.useState)(!1),[U,ee]=(0,e.useState)(!1),[P,te]=(0,e.useState)(!1),[C,ne]=(0,e.useState)(!1),[$,oe]=(0,e.useState)(!1),[y,le]=(0,e.useState)(!1),[W,ae]=(0,e.useState)(!1),[v,se]=(0,e.useState)(!1),[O,z]=(0,e.useState)(-1),[j,re]=(0,e.useState)(!1),[H,G]=(0,e.useState)(!1),[k,ie]=(0,e.useState)(!1),[V,de]=(0,e.useState)(!0),T=(0,e.useRef)({}),K=n=>{n.stopPropagation()},g=n=>{a(ge(n,y,O))};(0,e.useEffect)(()=>{for(const n in T.current){const r=T.current[n];r.current&&(r.current.removeEventListener("mousedown",K),r.current.addEventListener("mousedown",K))}}),(0,e.useEffect)(()=>{g(t)},[y,O]),(0,e.useEffect)(()=>{const n=Array.from({length:3}).map((r,p)=>Z(p));s(n),g(n)},[]);const ce=()=>(he(t),s(t),g(t),{scrollToRow:t.length-1}),J=n=>{t.splice(n.rowIndex,1),s(t),g(t)},ue=n=>{const r=k&&n.oldIndex===0&&n.newIndex>1;if(!r){const p=(0,me.arrayMove)(t,n.oldIndex,n.newIndex);s(p),g(p)}return{isDropDisabled:r}},i=(n,r,p)=>e.default.createElement(d.UICheckbox,{label:n,checked:r,onChange:()=>{p(!r)}}),Q=n=>{const r=`cell-${n.rowIndex}-${n.colIndex}`;T.current[r]||(T.current[r]=e.default.createRef());const Y=xe(n,C,we=>{t[n.rowIndex][n.colKey]=we,s(t),g(t)},v);return F(B({},Y),{content:e.default.createElement("div",{ref:T.current[r]},Y.content)})},E=n=>{if(n.rowIndex===t.length-1)return e.default.createElement("div",{style:{padding:"0 5px",verticalAlign:"center"}},"Special row content")},X=n=>{z(n),new Promise(r=>{setTimeout(()=>r(!0),2e3)}).then(()=>{z(-1)})},fe=n=>[e.default.createElement(d.UIToggle,{key:"1",label:"Preferred",checked:n.cells.preferred.value==="1",onChange:(r,p)=>{t[n.rowIndex].preferred=p?"1":"0",s(t),g(t)},inlineLabel:!0,inlineLabelLeft:!0,labelFlexGrow:!0,size:d.UIToggleSize.Small,disabled:C}),e.default.createElement(d.UIFlexibleTableRowActionButton,{key:`goto-code-row-${n.rowIndex}`,actionName:"GotoCode",tableId:_[1],iconName:d.UiIcons.CodeSnippet,rowNumber:n.rowIndex,onClick:()=>X(n.rowIndex),title:"Navigation demo"})],be=n=>[e.default.createElement(d.UIFlexibleTableActionButton,{key:"goto-code-row-0",actionName:"GotoCode",tableId:_[0],iconName:d.UiIcons.CodeSnippet,onClick:()=>X(100),title:"Navigation demo"})],u=n=>[e.default.createElement(d.UIDefaultButton,{key:"1",iconProps:{iconName:"Delete"},className:"flexible-table-btn-clear",disabled:c||n.readonly,onClick:()=>{s([]),a([])}},"Clear table")];return e.default.createElement("div",null,e.default.createElement("hr",null),e.default.createElement("h3",null,"Wrapping layout"),e.default.createElement("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:"20px",maxWidth:"1200px"}},i("Compact size",A,L),i("Show titles",h,I),i("Show Index",$,oe),i("Show custom content",y,le),i("Span cells",v,se),i("Reorder enabled",x,S),i("Reorder restrictions",k,ie),i("Disable Adding",U,ee),i("Disable Deletion",P,te),i("Readonly",C,ne),i("No row background",M,q),i("Loading data",c,f),i("Column highlight",W,ae),i("Lock vertically",j,re),i("Reverse background",H,G),i("Disable drag using touch",V,de)),e.default.createElement("hr",null),e.default.createElement("div",null,e.default.createElement("style",null,Ee),e.default.createElement("div",{style:{maxWidth:A?"500px":"fit-content"}},e.default.createElement(d.UIFlexibleTable,{addRowButton:{label:"Add row",title:C?"Disabled due to read only mode":"",onClick:ce},columns:N.map((n,r)=>F(B({},n),{className:`table-column column-${W?r:""}`})),id:_[1],layout:d.UIFlexibleTableLayout.Wrapping,onRenderCell:Q,rows:l,onDeleteRow:J,showColumnTitles:h,isContentLoading:c,onTableReorder:x?ue:void 0,noRowBackground:M,isAddItemDisabled:U,showIndexColumn:$,readonly:C,onRenderDeleteAction:n=>({isDeleteDisabled:P&&n.rowIndex===0}),onRenderReorderActions:n=>k?{up:{disabled:n.rowIndex===1,tooltip:n.rowIndex===1?"Move up disabled for demo purposes":void 0},down:{disabled:n.rowIndex===1,tooltip:n.rowIndex===1?"Move down disabled for demo purposes":void 0}}:{},onBeforeTableRender:k?n=>({rows:n.rows.map((r,p)=>F(B({},r),{disabled:p===1}))}):void 0,onRenderRowContainer:k?n=>({isDropWarning:!n.isDragged&&!!n.rowIndex&&n.rowIndex>1}):void 0,onRenderRowDataContent:y?E:void 0,onRenderActions:fe,maxScrollableContentHeight:A?700:400,lockVertically:j,reverseBackground:H,onRenderPrimaryTableActions:u,onRenderSecondaryTableActions:be,isTouchDragDisabled:V}))))};w.WrappingTable=Ae}}]);})();