@sap-ux/ui-components/storybook/UIFlexibleTable-story.218b515c.iframe.bundle.js

SAP UI Components Library

"use strict";(()=>{var Fe=Object.defineProperty,Ne=Object.defineProperties;var Le=Object.getOwnPropertyDescriptors;var Ie=Object.getOwnPropertySymbols;var Ue=Object.prototype.hasOwnProperty,Pe=Object.prototype.propertyIsEnumerable;var Se=(R,w,m)=>w in R?Fe(R,w,{enumerable:!0,configurable:!0,writable:!0,value:m}):R[w]=m,_=(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))Pe.call(w,m)&&Se(R,m,w[m]);return R},B=(R,w)=>Ne(R,Le(w));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[812],{"./stories/UIFlexibleTable.story.tsx"(R,w,m){var ye=this&&this.__createBinding||(Object.create?(function(r,l,t,a){a===void 0&&(a=t);var s=Object.getOwnPropertyDescriptor(l,t);(!s||("get"in s?!l.__esModule:s.writable||s.configurable))&&(s={enumerable:!0,get:function(){return l[t]}}),Object.defineProperty(r,a,s)}):(function(r,l,t,a){a===void 0&&(a=t),r[a]=l[t]})),De=this&&this.__setModuleDefault||(Object.create?(function(r,l){Object.defineProperty(r,"default",{enumerable:!0,value:l})}):function(r,l){r.default=l}),Ce=this&&this.__importStar||(function(){var r=function(l){return r=Object.getOwnPropertyNames||function(t){var a=[];for(var s in t)Object.prototype.hasOwnProperty.call(t,s)&&(a[a.length]=s);return a},r(l)};return function(l){if(l&&l.__esModule)return l;var t={};if(l!=null)for(var a=r(l),s=0;s<a.length;s++)a[s]!=="default"&&ye(t,l,a[s]);return De(t,l),t}})();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")),c=m("./src/components/index.tsx"),me=m("../../node_modules/.pnpm/react-movable@2.5.4_react-dom@16.14.0_react@16.14.0__react@16.14.0/node_modules/react-movable/lib/index.js");w.default={title:"Tables/UIFlexibleTable"};const F=["table1","table2"],N=Array.from({length:10}).map((r,l)=>({key:`column${l+1}`,title:l===0?"Beginning Column":`Column ${l+1}`,tooltip:`Tooltip for column #${l+1}`}));N.push({key:"preferred",title:"Preferred",hidden:!0});const Z=r=>{const l={};return N.forEach((t,a)=>{l[t.key]=a<5?`sample_${r}${a}`:"a"}),l},pe=[],ge=(r,l,t)=>r.map((s,f)=>{const x={};N.forEach((h,I)=>{x[h.key]={type:I<5?"input":l&&I===9?"link":"dropdown",value:r[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(r,l,t,a){const s=r.value.value,f=r.colIndex===1&&r.rowIndex===2&&a,x=N[r.colIndex];switch(r.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":a&&r.rowIndex===2&&!f?"not-spanned-cell":void 0,content:e.default.createElement(c.UIDropdown,{options:S,selectedKey:s,disabled:l,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":a&&r.rowIndex===2&&!f?"not-spanned-cell":""],content:e.default.createElement(ve,{value:s,readonly:l,onChange:S=>t(S),title:x.tooltip})};default:return{content:e.default.createElement(c.UILink,{href:"",title:"Tooltip for navigation"},"Link")}}}function ve(r){const[l,t]=(0,e.useState)("");(0,e.useEffect)(()=>{t(r.value)},[r.value]);const a=s=>{t(s)};return e.default.createElement(c.UITextInput,{value:l,readOnly:r.readonly,onChange:(s,f)=>a(f||""),onBlur:()=>{r.value!==l&&setTimeout(()=>{r.onChange(l)},0)},title:r.title})}function he(r){const l=Z(r.length);r.push(l)}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[r,l]=(0,e.useState)(pe),[t,a]=(0,e.useState)([]),[s,f]=(0,e.useState)(!1),[x,S]=(0,e.useState)(!0),[h,I]=(0,e.useState)(!0),[A,L]=(0,e.useState)(!1),[$,q]=(0,e.useState)(!1),[U,ee]=(0,e.useState)(!1),[M,te]=(0,e.useState)(!1),[C,ne]=(0,e.useState)(!1),[P,oe]=(0,e.useState)(!1),[y,le]=(0,e.useState)(!1),[W,ae]=(0,e.useState)(!0),[v,re]=(0,e.useState)(!1),[O,z]=(0,e.useState)(!1),[j,se]=(0,e.useState)(!1),[H,G]=(0,e.useState)(-1),[k,de]=(0,e.useState)(!1),[V,ie]=(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=>{l(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));a(o),E(o)},[]);const X=()=>(he(t),a(t),E(t),{scrollToRow:t.length-1}),fe=o=>{t.splice(o.rowIndex,1),a(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);a(D),E(D)}return{isDropDisabled:b}},u=(o,b,D)=>e.default.createElement(c.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,Be=>{t[o.rowIndex][o.colKey]=Be,a(t),E(t)},j);return B(_({},Re),{content:e.default.createElement("div",{ref:i.current[b]},Re.content)})},d=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(c.UIFlexibleTableRowActionButton,{key:`goto-code-row-${o.rowIndex}`,actionName:"GotoCode",tableId:F[0],iconName:c.UiIcons.CodeSnippet,rowNumber:o.rowIndex,onClick:()=>p(o.rowIndex),title:"Navigation demo"})],we=o=>[e.default.createElement(c.UIFlexibleTableActionButton,{key:"goto-code-row-0",actionName:"GotoCode",tableId:F[0],iconName:c.UiIcons.CodeSnippet,onClick:()=>p(100),title:"Navigation demo"})],_e=o=>[e.default.createElement(c.UIDefaultButton,{key:"1",iconProps:{iconName:"Delete"},className:"flexible-table-btn-clear",disabled:s||o.readonly,onClick:()=>{a([]),l([])}},"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",$,q),u("Show row headers",A,L),u("Show Index",W,ae),u("Show custom content",v,re),u("Span cells",j,se),u("Reorder enabled",x,S),u("Reorder restrictions",g,ce),u("Disable Adding",C,ne),u("Disable Deletion",P,oe),u("Readonly",y,le),u("No row background",M,te),u("Loading data",s,f),u("Column highlight",O,z),u("Is fixed max width",k,de),u("Lock vertically",V,ie),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(c.UIFlexibleTable,{addRowButton:{label:"Add row",title:y?"Disabled due to read only mode":"",onClick:X},columns:N.map((o,b)=>B(_({},o),{className:`table-column column-${O?b:""}${v?"fixed":""}`})),id:F[0],layout:c.UIFlexibleTableLayout.InlineFlex,onRenderCell:n,rows:r,inRowLayoutMinWidth:1e3,onDeleteRow:fe,showColumnTitles:h,showColumnTitlesInCells:$,isContentLoading:s,onTableReorder:x?be:void 0,noRowBackground:M,isAddItemDisabled:C,showIndexColumn:W,readonly:y,onRenderDeleteAction:o=>({isDeleteDisabled:P&&o.rowIndex===0,tooltip:P&&o.rowIndex===0?"Disabled for demo purposes":"Click to delete the row"}),onRenderActions:Y,onRenderRowDataContent:v?d: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)=>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:_e,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[r,l]=(0,e.useState)(pe),[t,a]=(0,e.useState)([]),[s,f]=(0,e.useState)(!1),[x,S]=(0,e.useState)(!0),[h,I]=(0,e.useState)(!0),[A,L]=(0,e.useState)(!1),[$,q]=(0,e.useState)(!1),[U,ee]=(0,e.useState)(!1),[M,te]=(0,e.useState)(!1),[C,ne]=(0,e.useState)(!1),[P,oe]=(0,e.useState)(!1),[y,le]=(0,e.useState)(!1),[W,ae]=(0,e.useState)(!1),[v,re]=(0,e.useState)(!1),[O,z]=(0,e.useState)(-1),[j,se]=(0,e.useState)(!1),[H,G]=(0,e.useState)(!1),[k,de]=(0,e.useState)(!1),[V,ie]=(0,e.useState)(!0),T=(0,e.useRef)({}),K=n=>{n.stopPropagation()},g=n=>{l(ge(n,y,O))};(0,e.useEffect)(()=>{for(const n in T.current){const d=T.current[n];d.current&&(d.current.removeEventListener("mousedown",K),d.current.addEventListener("mousedown",K))}}),(0,e.useEffect)(()=>{g(t)},[y,O]),(0,e.useEffect)(()=>{const n=Array.from({length:3}).map((d,p)=>Z(p));a(n),g(n)},[]);const ce=()=>(he(t),a(t),g(t),{scrollToRow:t.length-1}),J=n=>{t.splice(n.rowIndex,1),a(t),g(t)},ue=n=>{const d=k&&n.oldIndex===0&&n.newIndex>1;if(!d){const p=(0,me.arrayMove)(t,n.oldIndex,n.newIndex);a(p),g(p)}return{isDropDisabled:d}},i=(n,d,p)=>e.default.createElement(c.UICheckbox,{label:n,checked:d,onChange:()=>{p(!d)}}),Q=n=>{const d=`cell-${n.rowIndex}-${n.colIndex}`;T.current[d]||(T.current[d]=e.default.createRef());const Y=xe(n,C,we=>{t[n.rowIndex][n.colKey]=we,a(t),g(t)},v);return B(_({},Y),{content:e.default.createElement("div",{ref:T.current[d]},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(d=>{setTimeout(()=>d(!0),2e3)}).then(()=>{z(-1)})},fe=n=>[e.default.createElement(c.UIToggle,{key:"1",label:"Preferred",checked:n.cells.preferred.value==="1",onChange:(d,p)=>{t[n.rowIndex].preferred=p?"1":"0",a(t),g(t)},inlineLabel:!0,inlineLabelLeft:!0,labelFlexGrow:!0,size:c.UIToggleSize.Small,disabled:C}),e.default.createElement(c.UIFlexibleTableRowActionButton,{key:`goto-code-row-${n.rowIndex}`,actionName:"GotoCode",tableId:F[1],iconName:c.UiIcons.CodeSnippet,rowNumber:n.rowIndex,onClick:()=>X(n.rowIndex),title:"Navigation demo"})],be=n=>[e.default.createElement(c.UIFlexibleTableActionButton,{key:"goto-code-row-0",actionName:"GotoCode",tableId:F[0],iconName:c.UiIcons.CodeSnippet,onClick:()=>X(100),title:"Navigation demo"})],u=n=>[e.default.createElement(c.UIDefaultButton,{key:"1",iconProps:{iconName:"Delete"},className:"flexible-table-btn-clear",disabled:s||n.readonly,onClick:()=>{a([]),l([])}},"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",P,oe),i("Show custom content",y,le),i("Span cells",v,re),i("Reorder enabled",x,S),i("Reorder restrictions",k,de),i("Disable Adding",U,ee),i("Disable Deletion",M,te),i("Readonly",C,ne),i("No row background",$,q),i("Loading data",s,f),i("Column highlight",W,ae),i("Lock vertically",j,se),i("Reverse background",H,G),i("Disable drag using touch",V,ie)),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(c.UIFlexibleTable,{addRowButton:{label:"Add row",title:C?"Disabled due to read only mode":"",onClick:ce},columns:N.map((n,d)=>B(_({},n),{className:`table-column column-${W?d:""}`})),id:F[1],layout:c.UIFlexibleTableLayout.Wrapping,onRenderCell:Q,rows:r,onDeleteRow:J,showColumnTitles:h,isContentLoading:s,onTableReorder:x?ue:void 0,noRowBackground:$,isAddItemDisabled:U,showIndexColumn:P,readonly:C,onRenderDeleteAction:n=>({isDeleteDisabled:M&&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((d,p)=>B(_({},d),{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}}]);})();