"use strict";(()=>{var _e=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?_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))Pe.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(s,l,t,a){a===void 0&&(a=t);var r=Object.getOwnPropertyDescriptor(l,t);(!r||("get"in r?!l.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return l[t]}}),Object.defineProperty(s,a,r)}):(function(s,l,t,a){a===void 0&&(a=t),s[a]=l[t]})),De=this&&this.__setModuleDefault||(Object.create?(function(s,l){Object.defineProperty(s,"default",{enumerable:!0,value:l})}):function(s,l){s.default=l}),Ce=this&&this.__importStar||(function(){var s=function(l){return s=Object.getOwnPropertyNames||function(t){var a=[];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(a[a.length]=r);return a},s(l)};return function(l){if(l&&l.__esModule)return l;var t={};if(l!=null)for(var a=s(l),r=0;r<a.length;r++)a[r]!=="default"&&ye(t,l,a[r]);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/node_modules/react-movable/lib/index.js");w.default={title:"Tables/UIFlexibleTable"};const _=["table1","table2"],N=Array.from({length:10}).map((s,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=s=>{const l={};return N.forEach((t,a)=>{l[t.key]=a<5?`sample_${s}${a}`:"a"}),l},pe=[],ge=(s,l,t)=>s.map((r,f)=>{const x={};N.forEach((h,I)=>{x[h.key]={type:I<5?"input":l&&I===9?"link":"dropdown",value:s[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(s,l,t,a){const r=s.value.value,f=s.colIndex===1&&s.rowIndex===2&&a,x=N[s.colIndex];switch(s.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&&s.rowIndex===2&&!f?"not-spanned-cell":void 0,content:e.default.createElement(c.UIDropdown,{options:S,selectedKey:r,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&&s.rowIndex===2&&!f?"not-spanned-cell":""],content:e.default.createElement(ve,{value:r,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(s){const[l,t]=(0,e.useState)("");(0,e.useEffect)(()=>{t(s.value)},[s.value]);const a=r=>{t(r)};return e.default.createElement(c.UITextInput,{value:l,readOnly:s.readonly,onChange:(r,f)=>a(f||""),onBlur:()=>{s.value!==l&&setTimeout(()=>{s.onChange(l)},0)},title:s.title})}function he(s){const l=Z(s.length);s.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[s,l]=(0,e.useState)(pe),[t,a]=(0,e.useState)([]),[r,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,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),d=(0,e.useRef)({}),Q=o=>{o.stopPropagation()},E=o=>{l(ge(o,v,H))};(0,e.useEffect)(()=>{for(const o in d.current){const b=d.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}`;d.current[b]||(d.current[b]=e.default.createRef());const Re=xe(o,y,Fe=>{t[o.rowIndex][o.colKey]=Fe,a(t),E(t)},j);return F(B({},Re),{content:e.default.createElement("div",{ref:d.current[b]},Re.content)})},i=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:_[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:_[0],iconName:c.UiIcons.CodeSnippet,onClick:()=>p(100),title:"Navigation demo"})],Be=o=>[e.default.createElement(c.UIDefaultButton,{key:"1",iconProps:{iconName:"Delete"},className:"flexible-table-btn-clear",disabled:r||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,se),u("Span cells",j,re),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",r,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(c.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:c.UIFlexibleTableLayout.InlineFlex,onRenderCell:n,rows:s,inRowLayoutMinWidth:1e3,onDeleteRow:fe,showColumnTitles:h,showColumnTitlesInCells:$,isContentLoading:r,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?i: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[s,l]=(0,e.useState)(pe),[t,a]=(0,e.useState)([]),[r,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,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=>{l(ge(n,y,O))};(0,e.useEffect)(()=>{for(const n in T.current){const i=T.current[n];i.current&&(i.current.removeEventListener("mousedown",K),i.current.addEventListener("mousedown",K))}}),(0,e.useEffect)(()=>{g(t)},[y,O]),(0,e.useEffect)(()=>{const n=Array.from({length:3}).map((i,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 i=k&&n.oldIndex===0&&n.newIndex>1;if(!i){const p=(0,me.arrayMove)(t,n.oldIndex,n.newIndex);a(p),g(p)}return{isDropDisabled:i}},d=(n,i,p)=>e.default.createElement(c.UICheckbox,{label:n,checked:i,onChange:()=>{p(!i)}}),Q=n=>{const i=`cell-${n.rowIndex}-${n.colIndex}`;T.current[i]||(T.current[i]=e.default.createRef());const Y=xe(n,C,we=>{t[n.rowIndex][n.colKey]=we,a(t),g(t)},v);return F(B({},Y),{content:e.default.createElement("div",{ref:T.current[i]},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(i=>{setTimeout(()=>i(!0),2e3)}).then(()=>{z(-1)})},fe=n=>[e.default.createElement(c.UIToggle,{key:"1",label:"Preferred",checked:n.cells.preferred.value==="1",onChange:(i,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:_[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:_[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:r||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"}},d("Compact size",A,L),d("Show titles",h,I),d("Show Index",P,oe),d("Show custom content",y,le),d("Span cells",v,se),d("Reorder enabled",x,S),d("Reorder restrictions",k,ie),d("Disable Adding",U,ee),d("Disable Deletion",M,te),d("Readonly",C,ne),d("No row background",$,q),d("Loading data",r,f),d("Column highlight",W,ae),d("Lock vertically",j,re),d("Reverse background",H,G),d("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(c.UIFlexibleTable,{addRowButton:{label:"Add row",title:C?"Disabled due to read only mode":"",onClick:ce},columns:N.map((n,i)=>F(B({},n),{className:`table-column column-${W?i:""}`})),id:_[1],layout:c.UIFlexibleTableLayout.Wrapping,onRenderCell:Q,rows:s,onDeleteRow:J,showColumnTitles:h,isContentLoading:r,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((i,p)=>F(B({},i),{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})}]);})();
