@sap-ux/ui-components/storybook/UITable-story.2c0ccae1.iframe.bundle.js

SAP UI Components Library

"use strict";(()=>{(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[967],{"./stories/UITable.story.tsx":function(v,a,u){var r=this&&this.__createBinding||(Object.create?function(e,t,n,i){i===void 0&&(i=n);var f=Object.getOwnPropertyDescriptor(t,n);(!f||("get"in f?!t.__esModule:f.writable||f.configurable))&&(f={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,i,f)}:function(e,t,n,i){i===void 0&&(i=n),e[i]=t[n]}),s=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),m=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(e!=null)for(var n in e)n!=="default"&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return s(t,e),t};Object.defineProperty(a,"__esModule",{value:!0}),a.EditableTable2=a.EditableTable=a.ReadOnlyTable=void 0;const o=m(u("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),l=u("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js"),b=u("./src/components/UITable/index.tsx"),T=u("./src/components/Icons.tsx"),d=u("./src/components/UITable/types.ts"),c=u("./test/__mock__/table-data.ts");a.default={title:"Tables/UITable"};const p=Array.from({length:10}).map((e,t)=>{const n={key:"test"+(t+1),name:"Test "+(t+1),fieldName:"test"+(t+1),minWidth:100,maxWidth:200,isResizable:!0,editable:!1,validate:void 0,iconName:void 0,iconTooltip:void 0,columnControlType:d.ColumnControlType.UITextInput,comboboxOptions:void 0};return(t===1||t>=3)&&(n.name+=" (editable)",n.editable=!0,n.validate=h),t===1&&(n.iconName=T.UiIcons.Home,n.iconTooltip="Dummy tooltip"),t===3&&(n.columnControlType=d.ColumnControlType.UICombobox,n.comboboxOptions=["one","two","three"]),t===4&&(n.columnControlType=d.ColumnControlType.UIBooleanSelect),n}),_=p.map(e=>Object.assign({},e,{validate:void 0,editable:!1})),g=()=>o.default.createElement(l.Stack,null,o.default.createElement("div",{className:(0,l.mergeStyles)({height:"50vh",width:"100vh",position:"relative"})},o.default.createElement(b.UITable,{items:c.items,dataSetKey:"datasetkey",columns:_})));a.ReadOnlyTable=g;function S(e,t){var n;e&&(console.log("saving ",t,e),c.items[e==null?void 0:e.rowIndex][(n=e==null?void 0:e.column)==null?void 0:n.key]=t,console.log("saving ",c.items))}function y(e){console.log("selected",e)}function h(e){if(e==="hello")return'"hello" is not allowed here!'}const w=()=>{const[e,t]=(0,o.useState)(null),[n,i]=(0,o.useState)(null);return o.default.createElement(l.Stack,null,o.default.createElement("div",null,o.default.createElement("button",{onClick:()=>t(1)},"Scroll to 1st row"),"\xA0",o.default.createElement("button",{onClick:()=>t(9)},"Scroll to 9th row"),"\xA0",o.default.createElement("button",{onClick:()=>t(100)},"Scroll to 100th row"),"\xA0",o.default.createElement("button",{onClick:()=>i("column1")},"Scroll to 1st column"),"\xA0",o.default.createElement("button",{onClick:()=>i("column10")},"Scroll to 10th column"),"\xA0"),o.default.createElement("div",{className:(0,l.mergeStyles)({height:"90vh",width:"100vw",position:"relative"})},o.default.createElement(b.UITable,{dataSetKey:"datasetkey",items:c.items,columns:p,onSave:S,onSelectionChange:y,selectedRow:e,selectedColumnId:n,selectionMode:l.SelectionMode.multiple,checkboxVisibility:l.CheckboxVisibility.always,showRowNumbers:!0})))};a.EditableTable=w;const I=[{key:"",text:""},{key:"DZ",text:"Algeria"},{key:"AR",text:"Argentina"},{key:"AU",text:"Australia"},{key:"AT",text:"Austria"},{key:"BH",text:"Bahrain"}],E=Array.from({length:5}).map((e,t)=>{const n={key:"test"+(t+1),name:"Test "+(t+1),fieldName:"test"+(t+1),minWidth:100,maxWidth:200,isResizable:!0,editable:!1,validate:void 0,iconName:void 0,iconTooltip:void 0,columnControlType:d.ColumnControlType.UITextInput};return t>=1&&(n.name+=" (editable)",n.editable=!0,n.validate=h),t===1&&(n.columnControlType=d.ColumnControlType.UIDropdown,n.data={dropdownOptions:I}),n}),k=(e,t)=>t?o.default.createElement(l.Sticky,null,t(e)):null;function O(e,t){var n;e&&(console.log("saving ",t,e),c.items2[e==null?void 0:e.rowIndex][(n=e==null?void 0:e.column)==null?void 0:n.key]=t,console.log("saving ",c.items2))}const A=()=>o.default.createElement(l.Stack,null,o.default.createElement("div",{className:(0,l.mergeStyles)({height:"90vh",width:"100vw",position:"relative"})},o.default.createElement(b.UITable,{dataSetKey:"datasetkey",items:c.items2,columns:E,onSave:O,onSelectionChange:y,checkboxVisibility:l.CheckboxVisibility.always,headerRenderer:k,selectionMode:l.SelectionMode.multiple,renderInputs:d.RenderInputs.always})));a.EditableTable2=A},"./test/__mock__/table-data.ts":(v,a)=>{Object.defineProperty(a,"__esModule",{value:!0}),a.items2=a.items=void 0;const u=`lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut
 labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut
 aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
 eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt`;let r=0;function s(m=4){const o=u.split(" "),l=r+m>o.length?0:r;return r=l+m,o.slice(l,r).join(" ")}a.items=Array.from({length:200}).map((m,o)=>({key:o,test1:`row ${o}`,test2:s(),test3:s(),test4:s(),test5:s(),test6:s(),test7:s(),test8:s(),test9:s(),test10:s()})),a.items2=Array.from({length:4}).map((m,o)=>({key:o,test1:`test 1 row ${o}`,test2:`test 2 row ${o}`,test3:`test 3 row ${o}`,test4:`test 4 row ${o}`,test5:`test 5 row ${o}`}))}}]);})();