@oliasoft-open-source/react-ui-library 4.5.3 → 4.5.4-beta-1

package/dist/storybook/assets/unit-table.stories-SngS0-ch.js

@@ -1,103 +0,0 @@
-import{j as l}from"./jsx-runtime-FsUICBgo.js";import{r as h}from"./index-RfLt4OUa.js";import{f as Q}from"./immer.esm-bD7SSJ7T.js";import{d as U}from"./index-qZmQ7nA9.js";import{G as J}from"./grid-u1mZpaML.js";import{C as V}from"./card-0r8RRVk-.js";import{F as $}from"./field-eknsj_Ll.js";import{H as I}from"./heading-Bk0bpNfe.js";import{S as z}from"./select-JjEPivho.js";import{l as M}from"./lodash-Bmg8FrMx.js";import{u as W}from"./use-previous-VKMmnaK7.js";import{T as X,C as _}from"./table-kE2ngWkK.js";import"./index-cCpkwrS5.js";import"./styled-components.browser.esm-qIipjd6c.js";import"./tslib.es6-OIsz3r9a.js";import"./index-VW3EWkuE.js";import"./label-0_Qf6I8t.js";import"./common-types-U65vzrrz.js";import"./help-icon--rUDxLUD.js";import"./tooltip-HEHiU__l.js";import"./index-miLrID2P.js";import"./icon-y1a2N5SZ.js";import"./inheritsLoose-Y9jOMJLd.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";import"./types-5uVBABF4.js";import"./extends-dGVwEr9R.js";import"./assertThisInitialized-4q6YPdh3.js";import"./memoize-one.esm-hqe5SRxC.js";import"./types-VB5zD18b.js";import"./text-6KQ6ntOV.js";import"./actions-Z9jDWreP.js";import"./button-7V8oA22w.js";import"./spinner-R8Il4aRe.js";import"./badge-23Ty_zBt.js";import"./select.input-zP5tW20f.js";import"./index.es-JXn3JM7k.js";import"./redux-F5dueAP3.js";import"./objectSpread2-93s0nBry.js";import"./pagination-5n5spTRo.js";import"./input-u1He-wWs.js";import"./input-group-R8LoqKRn.js";import"./input-group-addon-BHVsW9mL.js";import"./number-input-ToRtRoDB.js";import"./check-box-LZdXXKhv.js";import"./slider-nl2rJ9LF.js";import"./index-ugi_ZH6T.js";import"./popover-Y3FpGdUS.js";const Y=r=>r.reduce(({preferredUnits:n,storageUnits:t},{unitKey:i,preferredUnit:c,storageUnit:d})=>(n[i]=c,t[i]=d,{preferredUnits:n,storageUnits:t}),{preferredUnits:{},storageUnits:{}}),Z=({headers:r,rows:n,selectedUnits:t,storageUnits:i,onChangeUnit:c,convertBackToStorageUnit:d,enableCosmeticRounding:a})=>{const p=r?r.map(u=>({...u,cells:u.cells.map(s=>{if(s.type===_.AUTO_UNIT){const{unitKey:e}=s;return{value:t[e],type:_.SELECT,options:U.getUnitsForQuantity(e),native:!0,onChange:b=>c({unitKey:e,value:b.target.value})}}return s})})):[],o=n?n.map((u,s)=>({...u,cells:u.cells.map((e,b)=>{if("autoUnit"in e&&(e!=null&&e.autoUnit)&&(typeof(e==null?void 0:e.value)=="string"||typeof(e==null?void 0:e.value)=="number")){const{formatDisplayValue:m,unitKey:g,value:f}=e,y=t[g],v=i[g],T=y!==v,R=T?U.convertAndGetValue(f,y,v):e.value,G=U.isScientificStringNum(f),D=a&&(T||!G)?U.roundToPrecision(R,14):R,q=m?m(D):D;return{...e,value:q,onChange:C=>{const{value:A}=C.target,w=i[g],S=t[g],B=S!==w?U.convertAndGetValue(A,w,S):A,k=d?w:S;if("onChange"in e){const{onChange:O}=e,L={...C,target:{...C.target,value:String(B),rowIndex:s,cellIndex:b,unit:k}};O(L)}}}}return e})})):[];return{convertedHeaders:p,convertedRows:o}},j=({table:r,unitConfig:n,convertBackToStorageUnit:t=!0,enableCosmeticRounding:i=!0})=>{const{rows:c,headers:d,...a}=r,{storageUnits:p,preferredUnits:o}=Y(n),u=W(o),[s,e]=h.useState(o),b=({unitKey:v,value:T})=>e({...s,[v]:T}),m=v=>Z({headers:d,rows:c,selectedUnits:v,storageUnits:p,onChangeUnit:b,convertBackToStorageUnit:t,enableCosmeticRounding:i}),g=m(s),[f,y]=h.useState(g);return h.useEffect(()=>{!M.isEqual(o,u)&&(e(o),y(m(o)))},[n]),h.useEffect(()=>{y(m(s))},[r,s]),l.jsx(X,{table:{...a,headers:f.convertedHeaders,rows:f.convertedRows}})};try{j.displayName="UnitTable",j.__docgenInfo={description:"",displayName:"UnitTable",props:{table:{defaultValue:null,description:"",name:"table",required:!0,type:{name:"IUnitTable"}},unitConfig:{defaultValue:null,description:"",name:"unitConfig",required:!0,type:{name:"IUnitConfigItem[]"}},convertBackToStorageUnit:{defaultValue:{value:"true"},description:"",name:"convertBackToStorageUnit",required:!1,type:{name:"boolean"}},enableCosmeticRounding:{defaultValue:{value:"true"},description:"",name:"enableCosmeticRounding",required:!1,type:{name:"boolean"}},onListReorder:{defaultValue:null,description:"",name:"onListReorder",required:!1,type:{name:"((obj: { from: number; to: number; }) => void)"}}}}}catch{}const tt={title:"Basic/UnitTable",args:{}},ee=!0,te=!0,P="m",ne=3,re=(r,n)=>{const t=[n,n,n],i=[...Array(Number(r))].map((c,d)=>{const a=d,p=d+1.25,o=p-a;return[String(a),String(p),String(o)]});return[t].concat(i)},ae=re(ne,P),oe=({reduxTable:r,value:n,rowIndex:t,cellIndex:i})=>Q(r,c=>{c[t+1][i]=n}),x=()=>{const[r,n]=h.useState(P),[t,i]=h.useState(ae),c=a=>{const{rowIndex:p,cellIndex:o,value:u,unit:s}=a.target,e=oe({reduxTable:t,value:u,rowIndex:p,cellIndex:o});i(e)},d=t.reduce((a,p,o)=>(o===0?a.headers=[{cells:[{value:"From"},{value:"To"},{value:"Delta"}]},{cells:[{type:"AutoUnit",unitKey:"length"},{type:"AutoUnit",unitKey:"length"},{type:"AutoUnit",unitKey:"length"}]}]:a.rows=a.rows.concat({cells:p.map((u,s)=>{const e=o===1&&s===1;return{value:u,type:e?"Text":"NumberInput",unitKey:"length",onChange:c,formatDisplayValue:e?f=>`T* ${f}`:null,autoUnit:!0}})}),a),{headers:[],rows:[]});return l.jsxs(J,{columns:"1fr 1fr",gap:!0,children:[l.jsx(V,{heading:l.jsx(I,{children:"Global View Settings"}),children:l.jsx($,{label:"Active Unit Template",children:l.jsx(z,{options:U.getUnitsForQuantity("length"),value:{value:r},onChange:a=>n(a.target.value),width:"100px"})})}),l.jsx(V,{heading:l.jsx(I,{children:"UnitTable"}),children:l.jsx(j,{table:d,unitConfig:[{unitKey:"length",storageUnit:t[0][0],preferredUnit:r}],convertBackToStorageUnit:ee,enableCosmeticRounding:te})}),l.jsx(V,{heading:l.jsx(I,{children:"Storage State (Redux)"}),children:l.jsx("pre",{children:l.jsx("code",{children:JSON.stringify(t,null,2)})})})]})};var K,E,H,N,F;x.parameters={...x.parameters,docs:{...(K=x.parameters)==null?void 0:K.docs,source:{originalSource:`() => {
-  const [preferredUnit, setPreferredUnit] = useState(initialUnit);
-  const [reduxTable, setReduxTable] = useState(initialTable);
-
-  /*********************************************************************************************************************
-   Cell onChange handler
-  *********************************************************************************************************************/
-  const onUpdateCell = (evt: IUnitTableOnChangeEvent) => {
-    const {
-      rowIndex,
-      cellIndex,
-      value,
-      unit
-    } = evt.target;
-    const nextTable = convertWholeTable ? convertStorageTable({
-      reduxTable,
-      value,
-      unit,
-      rowIndex,
-      cellIndex
-    }) : updateCell({
-      reduxTable,
-      value,
-      rowIndex,
-      cellIndex
-    });
-    setReduxTable(nextTable);
-  };
-
-  /*********************************************************************************************************************
-   Construct table view data (same as old Table component, with a new props)
-  *********************************************************************************************************************/
-  const tableViewData = reduxTable.reduce((acc, row, rowIndex) => {
-    if (rowIndex === 0) {
-      acc.headers = [{
-        cells: [{
-          value: 'From'
-        }, {
-          value: 'To'
-        }, {
-          value: 'Delta'
-        }]
-      }, {
-        cells: [{
-          type: 'AutoUnit',
-          unitKey: 'length'
-        }, {
-          type: 'AutoUnit',
-          unitKey: 'length'
-        }, {
-          type: 'AutoUnit',
-          unitKey: 'length'
-        }]
-      }];
-    } else {
-      acc.rows = acc.rows.concat({
-        cells: row.map((cell, cellIndex) => {
-          const specialCell = rowIndex === 1 && cellIndex === 1;
-          const type = specialCell ? 'Text' : 'NumberInput';
-          const formatDisplayValue = specialCell ? (value: number | string) => \`T* \${value}\` : null;
-          const value = cell;
-          return {
-            value,
-            type,
-            unitKey: 'length',
-            onChange: onUpdateCell,
-            formatDisplayValue,
-            autoUnit: true
-          };
-        })
-      });
-    }
-    return acc;
-  }, {
-    headers: ([] as any[]),
-    rows: ([] as IUnitTableRow[])
-  });
-  return <Grid columns="1fr 1fr" gap>
-      <Card heading={<Heading>Global View Settings</Heading>}>
-        <Field label="Active Unit Template">
-          <Select options={getUnitsForQuantity('length')} value={{
-          value: preferredUnit
-        }} onChange={evt => setPreferredUnit(evt.target.value)} width="100px" />
-        </Field>
-      </Card>
-      <Card heading={<Heading>UnitTable</Heading>}>
-        <UnitTable table={tableViewData}
-      //New props:
-      unitConfig={[{
-        unitKey: 'length',
-        storageUnit: reduxTable[0][0],
-        preferredUnit
-      }]}
-      //Most tables should just use the default values here (true):
-      convertBackToStorageUnit={convertBackToStorageUnit} enableCosmeticRounding={enableCosmeticRounding} />
-      </Card>
-      <Card heading={<Heading>Storage State (Redux)</Heading>}>
-        <pre>
-          <code>{JSON.stringify(reduxTable, null, 2)}</code>
-        </pre>
-      </Card>
-    </Grid>;
-}`,...(H=(E=x.parameters)==null?void 0:E.docs)==null?void 0:H.source},description:{story:"Story",...(F=(N=x.parameters)==null?void 0:N.docs)==null?void 0:F.description}}};const nt=["UnitTablePrototype"];export{x as UnitTablePrototype,nt as __namedExportsOrder,tt as default};