@oliasoft-open-source/react-ui-library 4.6.1 → 4.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +0 -1
- package/dist/index.js +2 -3
- package/dist/index.js.map +1 -1
- package/dist/storybook/assets/{Color-6VNJS4EI-LkypNDYY.js → Color-6VNJS4EI-eKwSdfsH.js} +1 -1
- package/dist/storybook/assets/{DocsRenderer-NNNQARDV-271EmMHR.js → DocsRenderer-NNNQARDV-Mw-AK-oD.js} +1 -1
- package/dist/storybook/assets/{WithTooltip-V3YHNWJZ-5odABDuO.js → WithTooltip-V3YHNWJZ-JnOjcEaC.js} +1 -1
- package/dist/storybook/assets/{buttons-and-links-Sb4bneec.js → buttons-and-links-qZ7Q6PtQ.js} +1 -1
- package/dist/storybook/assets/{chunk-HLWAVYOI-C-Uqv-lv.js → chunk-HLWAVYOI-9i297Xpt.js} +1 -1
- package/dist/storybook/assets/{color-QEPOj0Ib.js → color-N_loPg08.js} +1 -1
- package/dist/storybook/assets/{file-input.stories-qbEqmWyt.js → file-input.stories-8w1taUk6.js} +1 -1
- package/dist/storybook/assets/{form.stories-7v6JzvJl.js → form.stories-b8fSf1KV.js} +1 -1
- package/dist/storybook/assets/{formatter-SWP5E3XI-a7sBt194.js → formatter-SWP5E3XI-6Gq75F0J.js} +1 -1
- package/dist/storybook/assets/{iframe-Z5bUT4O1.js → iframe-lzxbLPVf.js} +2 -2
- package/dist/storybook/assets/{index-i2tVYo5N.js → index-IfH4Az5B.js} +5 -5
- package/dist/storybook/assets/{input-validation-FFXJoKSI.js → input-validation-cYicgXhW.js} +1 -1
- package/dist/storybook/assets/{inputs-DtKO2too.js → inputs-XnhIP8qk.js} +1 -1
- package/dist/storybook/assets/{layout-forms-7ZIITxGs.js → layout-forms-fYDFBp-7.js} +1 -1
- package/dist/storybook/assets/{layout-general-zuo7KumY.js → layout-general-eMTunaoD.js} +1 -1
- package/dist/storybook/assets/{padding-and-spacing-3Mlm9PiC.js → padding-and-spacing-dZ9CkxUp.js} +1 -1
- package/dist/storybook/assets/{preview-MDW-geT9.js → preview-Dugul3Yk.js} +2 -2
- package/dist/storybook/assets/{preview-0LPoYPAJ.js → preview-YrSZsPtP.js} +1 -1
- package/dist/storybook/assets/{syntaxhighlighter-B5GMVT5T-jueltlMw.js → syntaxhighlighter-B5GMVT5T--o1Ni0TE.js} +1 -1
- package/dist/storybook/assets/{textarea-ygEac3d2.js → textarea-gwm6gdQO.js} +1 -1
- package/dist/storybook/assets/{textarea.stories-vr_I38NI.js → textarea.stories-eOTtHmL4.js} +1 -1
- package/dist/storybook/assets/unit-table.stories-CO9oH2A7.js +107 -0
- package/dist/storybook/iframe.html +1 -1
- package/dist/storybook/project.json +1 -1
- package/package.json +1 -1
- package/dist/storybook/assets/unit-table.stories-JkNu_Up6.js +0 -103
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r,C as n}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r,C as n}from"./index-IfH4Az5B.js";import{Center as d,SpaceBetween as a,JustifyEnd as c,Column as l}from"./flex.stories-8HJIYv6E.js";import{Default as h,CustomColumnWidth as p,DefaultGap as x,CustomGap as m,Responsive as j}from"./grid.stories-hPfW-CxX.js";import{Default as u,FixedWidth as f,NoPadding as g,ResponsiveWidth as w}from"./column.stories-1Qq8awo0.js";import{useMDXComponents as s}from"./index-4YXVTraW.js";import"./index-RfLt4OUa.js";import"./iframe-lzxbLPVf.js";import"../sb-preview/runtime.js";import"./index-miLrID2P.js";import"./inheritsLoose-8sb_A2v4.js";import"./assertThisInitialized-4q6YPdh3.js";import"./index-R5dkQuFe.js";import"./index-PPLHz8o0.js";import"./flex-RYZsoWEN.js";import"./button-shH4xakS.js";import"./index-VW3EWkuE.js";import"./common-types-U65vzrrz.js";import"./disabled-context-urNQThQz.js";import"./spinner-R8Il4aRe.js";import"./icon-8EQazuuW.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./tooltip-HEHiU__l.js";import"./text-6KQ6ntOV.js";import"./grid-u1mZpaML.js";import"./styled-components.browser.esm-qIipjd6c.js";import"./card-0r8RRVk-.js";import"./row-vFUhHoz5.js";import"./heading-jZsIIJF0.js";import"./help-icon-SKky6KLV.js";function t(i){const o=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code",h3:"h3"},s(),i.components);return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Layout (General)"}),`
|
|
2
2
|
`,e.jsx(o.h1,{id:"layout-general",children:"Layout (General)"}),`
|
|
3
3
|
`,e.jsx(o.h2,{id:"flex",children:"Flex"}),`
|
|
4
4
|
`,e.jsxs(o.p,{children:["The ",e.jsx(o.code,{children:"Flex"})," component is a basic flexbox wrapper with optional props for ",e.jsx(o.code,{children:"alignItems"}),", ",e.jsx(o.code,{children:"justifyContent"})," and ",e.jsx(o.code,{children:"flexDirection"}),". This is a conveninent way to center items vertically and/or horizontally, to align them to opposite edges, or align them to the far side."]}),`
|
package/dist/storybook/assets/{padding-and-spacing-3Mlm9PiC.js → padding-and-spacing-dZ9CkxUp.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r}from"./index-IfH4Az5B.js";import{useMDXComponents as t}from"./index-4YXVTraW.js";import"./index-RfLt4OUa.js";import"./iframe-lzxbLPVf.js";import"../sb-preview/runtime.js";import"./index-miLrID2P.js";import"./inheritsLoose-8sb_A2v4.js";import"./assertThisInitialized-4q6YPdh3.js";import"./index-R5dkQuFe.js";import"./index-PPLHz8o0.js";function i(n){const s=Object.assign({h1:"h1",h2:"h2",p:"p",ul:"ul",li:"li",strong:"strong",code:"code"},t(),n.components);return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Padding, Margin & Size"}),`
|
|
2
2
|
`,e.jsx(s.h1,{id:"padding-margin--size",children:"Padding, Margin & Size"}),`
|
|
3
3
|
`,e.jsx(s.h2,{id:"padding--margin",children:"Padding & Margin"}),`
|
|
4
4
|
`,e.jsx(s.p,{children:"There are standard CSS spacing variables for padding and margin."}),`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{_ as e}from"./iframe-
|
|
1
|
+
import{_ as e}from"./iframe-lzxbLPVf.js";import"../sb-preview/runtime.js";var a={docs:{renderer:async()=>{let{DocsRenderer:r}=await e(()=>import("./DocsRenderer-NNNQARDV-Mw-AK-oD.js"),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10]),import.meta.url);return new r}}};export{a as parameters};
|
|
2
2
|
function __vite__mapDeps(indexes) {
|
|
3
3
|
if (!__vite__mapDeps.viteFileDeps) {
|
|
4
|
-
__vite__mapDeps.viteFileDeps = ["./DocsRenderer-NNNQARDV-
|
|
4
|
+
__vite__mapDeps.viteFileDeps = ["./DocsRenderer-NNNQARDV-Mw-AK-oD.js","./chunk-HLWAVYOI-9i297Xpt.js","./iframe-lzxbLPVf.js","./index-RfLt4OUa.js","./react-16-hgR7FrAp.js","./index-miLrID2P.js","./index-IfH4Az5B.js","./inheritsLoose-8sb_A2v4.js","./assertThisInitialized-4q6YPdh3.js","./index-R5dkQuFe.js","./index-PPLHz8o0.js"]
|
|
5
5
|
}
|
|
6
6
|
return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as at}from"./jsx-runtime-FsUICBgo.js";import{g as Le,c as ct,a as Li,r as he,R as fe}from"./index-RfLt4OUa.js";import{T as Di}from"./toaster-yPcd4ELJ.js";import{q as ga,r as ma,s as qr,i as ki,t as ya,e as Hr,v as Mi,w as Bi,c as zr,x as Ui,y as Gi,z as qi,A as Hi,B as va,C as zi,D as Wi,E as Yi,F as Xi,G as Ki,H as Vi,I as Qi,J as Ji}from"./index-R5dkQuFe.js";import{f as Zi,k as ba,h as eo,i as to,j as ro,l as no,o as ao,m as De,p as io,q as oo,r as so,t as cn}from"./index-
|
|
1
|
+
import{j as at}from"./jsx-runtime-FsUICBgo.js";import{g as Le,c as ct,a as Li,r as he,R as fe}from"./index-RfLt4OUa.js";import{T as Di}from"./toaster-yPcd4ELJ.js";import{q as ga,r as ma,s as qr,i as ki,t as ya,e as Hr,v as Mi,w as Bi,c as zr,x as Ui,y as Gi,z as qi,A as Hi,B as va,C as zi,D as Wi,E as Yi,F as Xi,G as Ki,H as Vi,I as Qi,J as Ji}from"./index-R5dkQuFe.js";import{f as Zi,k as ba,h as eo,i as to,j as ro,l as no,o as ao,m as De,p as io,q as oo,r as so,t as cn}from"./index-IfH4Az5B.js";import{a as lo}from"./isPlainObject-OQlD0fAV.js";import{d as Sa}from"./index-PPLHz8o0.js";import{e as pn}from"./index-cCpkwrS5.js";import"./chunk-HLWAVYOI-9i297Xpt.js";import"./index-miLrID2P.js";import"./message-CRKuTfOl.js";import"./index-VW3EWkuE.js";import"./common-types-U65vzrrz.js";import"./icon-8EQazuuW.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-8sb_A2v4.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";import"./iframe-lzxbLPVf.js";import"../sb-preview/runtime.js";import"./assertThisInitialized-4q6YPdh3.js";import"./react-16-hgR7FrAp.js";var hn="DARK_MODE";const{global:uo}=__STORYBOOK_MODULE_GLOBAL__;__STORYBOOK_MODULE_CLIENT_LOGGER__;function Te(){return Te=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},Te.apply(this,arguments)}function fo(t){if(t===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function Qe(t,e){return Qe=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(r,n){return r.__proto__=n,r},Qe(t,e)}function co(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,Qe(t,e)}function yr(t){return yr=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},yr(t)}function po(t){return Function.toString.call(t).indexOf("[native code]")!==-1}function ho(){if(typeof Reflect>"u"||!Reflect.construct||Reflect.construct.sham)return!1;if(typeof Proxy=="function")return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch{return!1}}function pt(t,e,r){return ho()?pt=Reflect.construct.bind():pt=function(n,s,o){var l=[null];l.push.apply(l,s);var a=Function.bind.apply(n,l),i=new a;return o&&Qe(i,o.prototype),i},pt.apply(null,arguments)}function vr(t){var e=typeof Map=="function"?new Map:void 0;return vr=function(r){if(r===null||!po(r))return r;if(typeof r!="function")throw new TypeError("Super expression must either be null or a function");if(typeof e<"u"){if(e.has(r))return e.get(r);e.set(r,n)}function n(){return pt(r,arguments,yr(this).constructor)}return n.prototype=Object.create(r.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),Qe(n,r)},vr(t)}var go={1:`Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).
|
|
2
2
|
|
|
3
3
|
`,2:`Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).
|
|
4
4
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{S as l,c as n,s as d}from"./index-
|
|
1
|
+
import{S as l,c as n,s as d}from"./index-IfH4Az5B.js";import"./iframe-lzxbLPVf.js";import"../sb-preview/runtime.js";import"./index-RfLt4OUa.js";import"./index-miLrID2P.js";import"./inheritsLoose-8sb_A2v4.js";import"./assertThisInitialized-4q6YPdh3.js";import"./index-R5dkQuFe.js";import"./index-PPLHz8o0.js";export{l as SyntaxHighlighter,n as createCopyToClipboardFunction,d as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as o}from"./jsx-runtime-FsUICBgo.js";import{r as V}from"./index-RfLt4OUa.js";import{c as h}from"./index-VW3EWkuE.js";import{i as l}from"./types-5uVBABF4.js";import{D as z}from"./disabled-context-urNQThQz.js";import{T as k}from"./tooltip-HEHiU__l.js";const I="_inputInTable_66zck_1",N="_inputHover_66zck_13",R="_inputFocus_66zck_18",C="_inputError_66zck_25",S="_inputWarning_66zck_26",A="_inputDisabled_66zck_61",F="_hideScrollbars_66zck_67",H="_textarea_66zck_77",W="_small_66zck_116",w="_error_66zck_121",D="_warning_66zck_138",P="_monospace_66zck_155",t={inputInTable:I,inputHover:N,inputFocus:R,inputError:C,inputWarning:S,inputDisabled:A,hideScrollbars:F,textarea:H,small:W,error:w,warning:D,monospace:P},i=({name:r,value:u="",placeholder:s="",cols:d,rows:c,disabled:m=!1,onChange:p=()=>{},onKeyPress:f=()=>{},onFocus:v=()=>{},onBlur:_=()=>{},tabIndex:b=0,error:e=null,warning:a=null,tooltip:n=null,maxTooltipWidth:y,resize:x,monospace:g=!1,testId:E})=>{const T=V.useContext(z),q=o.jsx("textarea",{className:h(t.textarea,e?t.error:"",a?t.warning:"",g?t.monospace:""),name:r,value:u,placeholder:s,cols:d,rows:c,onChange:p,disabled:m||T,onKeyPress:f,onFocus:v,onBlur:_,tabIndex:b,style:{resize:x},"data-testid":E});return o.jsx(k,{error:!!e,warning:!!a,text:n||e||a,enabled:n&&l(n)||e&&l(e)||a&&l(a)||!1,maxWidth:y,placement:"bottom-center",children:q})};try{i.displayName="TextArea",i.__docgenInfo={description:"",displayName:"TextArea",props:{name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"string"}},value:{defaultValue:{value:""},description:"",name:"value",required:!1,type:{name:"TStringOrNumber"}},placeholder:{defaultValue:{value:""},description:"",name:"placeholder",required:!1,type:{name:"string"}},cols:{defaultValue:null,description:"",name:"cols",required:!1,type:{name:"number"}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"number"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean"}},onChange:{defaultValue:{value:"() => {}"},description:"",name:"onChange",required:!1,type:{name:"((evt: ChangeEvent<HTMLTextAreaElement>) => void)"}},onKeyPress:{defaultValue:{value:"() => {}"},description:"",name:"onKeyPress",required:!1,type:{name:"((evt: KeyboardEvent<HTMLTextAreaElement>) => void)"}},onFocus:{defaultValue:{value:"() => {}"},description:"",name:"onFocus",required:!1,type:{name:"((evt: FocusEvent<HTMLTextAreaElement, Element>) => void)"}},onBlur:{defaultValue:{value:"() => {}"},description:"",name:"onBlur",required:!1,type:{name:"((evt: FocusEvent<HTMLTextAreaElement, Element>) => void)"}},tabIndex:{defaultValue:{value:"0"},description:"",name:"tabIndex",required:!1,type:{name:"number"}},error:{defaultValue:{value:"null"},description:"",name:"error",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},warning:{defaultValue:{value:"null"},description:"",name:"warning",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},tooltip:{defaultValue:{value:"null"},description:"",name:"tooltip",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},maxTooltipWidth:{defaultValue:null,description:"",name:"maxTooltipWidth",required:!1,type:{name:"TStringOrNumber"}},resize:{defaultValue:null,description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"inline"'},{value:'"-moz-initial"'},{value:'"inherit"'},{value:'"initial"'},{value:'"revert"'},{value:'"revert-layer"'},{value:'"unset"'},{value:'"
|
|
1
|
+
import{j as o}from"./jsx-runtime-FsUICBgo.js";import{r as V}from"./index-RfLt4OUa.js";import{c as h}from"./index-VW3EWkuE.js";import{i as l}from"./types-5uVBABF4.js";import{D as z}from"./disabled-context-urNQThQz.js";import{T as k}from"./tooltip-HEHiU__l.js";const I="_inputInTable_66zck_1",N="_inputHover_66zck_13",R="_inputFocus_66zck_18",C="_inputError_66zck_25",S="_inputWarning_66zck_26",A="_inputDisabled_66zck_61",F="_hideScrollbars_66zck_67",H="_textarea_66zck_77",W="_small_66zck_116",w="_error_66zck_121",D="_warning_66zck_138",P="_monospace_66zck_155",t={inputInTable:I,inputHover:N,inputFocus:R,inputError:C,inputWarning:S,inputDisabled:A,hideScrollbars:F,textarea:H,small:W,error:w,warning:D,monospace:P},i=({name:r,value:u="",placeholder:s="",cols:d,rows:c,disabled:m=!1,onChange:p=()=>{},onKeyPress:f=()=>{},onFocus:v=()=>{},onBlur:_=()=>{},tabIndex:b=0,error:e=null,warning:a=null,tooltip:n=null,maxTooltipWidth:y,resize:x,monospace:g=!1,testId:E})=>{const T=V.useContext(z),q=o.jsx("textarea",{className:h(t.textarea,e?t.error:"",a?t.warning:"",g?t.monospace:""),name:r,value:u,placeholder:s,cols:d,rows:c,onChange:p,disabled:m||T,onKeyPress:f,onFocus:v,onBlur:_,tabIndex:b,style:{resize:x},"data-testid":E});return o.jsx(k,{error:!!e,warning:!!a,text:n||e||a,enabled:n&&l(n)||e&&l(e)||a&&l(a)||!1,maxWidth:y,placement:"bottom-center",children:q})};try{i.displayName="TextArea",i.__docgenInfo={description:"",displayName:"TextArea",props:{name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"string"}},value:{defaultValue:{value:""},description:"",name:"value",required:!1,type:{name:"TStringOrNumber"}},placeholder:{defaultValue:{value:""},description:"",name:"placeholder",required:!1,type:{name:"string"}},cols:{defaultValue:null,description:"",name:"cols",required:!1,type:{name:"number"}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"number"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean"}},onChange:{defaultValue:{value:"() => {}"},description:"",name:"onChange",required:!1,type:{name:"((evt: ChangeEvent<HTMLTextAreaElement>) => void)"}},onKeyPress:{defaultValue:{value:"() => {}"},description:"",name:"onKeyPress",required:!1,type:{name:"((evt: KeyboardEvent<HTMLTextAreaElement>) => void)"}},onFocus:{defaultValue:{value:"() => {}"},description:"",name:"onFocus",required:!1,type:{name:"((evt: FocusEvent<HTMLTextAreaElement, Element>) => void)"}},onBlur:{defaultValue:{value:"() => {}"},description:"",name:"onBlur",required:!1,type:{name:"((evt: FocusEvent<HTMLTextAreaElement, Element>) => void)"}},tabIndex:{defaultValue:{value:"0"},description:"",name:"tabIndex",required:!1,type:{name:"number"}},error:{defaultValue:{value:"null"},description:"",name:"error",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},warning:{defaultValue:{value:"null"},description:"",name:"warning",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},tooltip:{defaultValue:{value:"null"},description:"",name:"tooltip",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},maxTooltipWidth:{defaultValue:null,description:"",name:"maxTooltipWidth",required:!1,type:{name:"TStringOrNumber"}},resize:{defaultValue:null,description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"inline"'},{value:'"-moz-initial"'},{value:'"inherit"'},{value:'"initial"'},{value:'"revert"'},{value:'"revert-layer"'},{value:'"unset"'},{value:'"block"'},{value:'"both"'},{value:'"horizontal"'},{value:'"none"'},{value:'"vertical"'}]}},monospace:{defaultValue:{value:"false"},description:"",name:"monospace",required:!1,type:{name:"boolean"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}export{i as T};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as u}from"./jsx-runtime-FsUICBgo.js";import{T as s}from"./textarea-
|
|
1
|
+
import{j as u}from"./jsx-runtime-FsUICBgo.js";import{T as s}from"./textarea-gwm6gdQO.js";import"./index-RfLt4OUa.js";import"./index-VW3EWkuE.js";import"./types-5uVBABF4.js";import"./lodash-Bmg8FrMx.js";import"./disabled-context-urNQThQz.js";import"./tooltip-HEHiU__l.js";import"./index-miLrID2P.js";const{useArgs:g}=__STORYBOOK_MODULE_ADDONS__,C={title:"Forms/TextArea",component:s,args:{disabled:!1}},c=n=>{const[i,o]=g(),m=p=>{o({value:p.target.value})};return u.jsx(s,{...n,onChange:m})},e=c.bind({});var t,r,a;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`args => {
|
|
2
2
|
const [_, updateArgs] = useArgs();
|
|
3
3
|
const handleChange = (evt: ChangeEvent<HTMLTextAreaElement>) => {
|
|
4
4
|
updateArgs({
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import{j as s}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 v}from"./index-qZmQ7nA9.js";import{G as J}from"./grid-u1mZpaML.js";import{C as D}from"./card-0r8RRVk-.js";import{F as $}from"./field-FZX0Z7IB.js";import{H as R}from"./heading-jZsIIJF0.js";import{S as W}from"./select-DZdWUrCW.js";import{l as X}from"./lodash-Bmg8FrMx.js";import{u as Y}from"./use-previous-VKMmnaK7.js";import{T as Z,C as K}from"./table-033R9jUC.js";import"./index-cCpkwrS5.js";import"./styled-components.browser.esm-qIipjd6c.js";import"./tslib.es6-OIsz3r9a.js";import"./index-VW3EWkuE.js";import"./label-uCFEME1p.js";import"./common-types-U65vzrrz.js";import"./help-icon-SKky6KLV.js";import"./tooltip-HEHiU__l.js";import"./index-miLrID2P.js";import"./icon-8EQazuuW.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-8sb_A2v4.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";import"./types-5uVBABF4.js";import"./assertThisInitialized-4q6YPdh3.js";import"./memoize-one.esm-hqe5SRxC.js";import"./types-VB5zD18b.js";import"./text-6KQ6ntOV.js";import"./actions-mOcj9IlF.js";import"./button-shH4xakS.js";import"./spinner-R8Il4aRe.js";import"./badge-23Ty_zBt.js";import"./select.input-zP5tW20f.js";import"./index.es-VXFRDikp.js";import"./redux-F5dueAP3.js";import"./objectSpread2-93s0nBry.js";import"./tiny-invariant-R4kOKlvx.js";import"./pagination-tnyyuMkB.js";import"./input-2BhbKV-j.js";import"./input-group-R8LoqKRn.js";import"./input-group-addon-BHVsW9mL.js";import"./number-input-CMhEMmUd.js";import"./check-box-2gxosI3y.js";import"./slider-MN9iDCsS.js";import"./index-ugi_ZH6T.js";import"./popover-cad2llTa.js";const ee=o=>o.reduce(({preferredUnits:t,storageUnits:n},{unitKey:i,preferredUnit:p,storageUnit:m})=>(t[i]=p,n[i]=m,{preferredUnits:t,storageUnits:n}),{preferredUnits:{},storageUnits:{}}),ne=({headers:o,rows:t,selectedUnits:n,storageUnits:i,onChangeUnit:p,convertBackToStorageUnit:m,enableCosmeticRounding:a,enableDisplayRounding:l})=>{const u=o?o.map(c=>({...c,cells:c.cells.map(r=>{if(r.type===K.AUTO_UNIT){const{unitKey:e}=r;return{value:n[e],type:K.SELECT,options:v.getUnitsForQuantity(e),native:!0,onChange:b=>p({unitKey:e,value:b.target.value})}}return r})})):[],d=t?t.map((c,r)=>({...c,cells:c.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{unitKey:g,value:U,formatDisplayValue:f}=e,T=l&&"roundDisplayValue"in e?e==null?void 0:e.roundDisplayValue:null,y=n[g],C=i[g],j=y!==C,A=j?v.convertAndGetValue(U,y,C):e.value,q=v.isScientificStringNum(U),N=a&&(j||!q)?v.roundToPrecision(A,14):A,k=f?f(N):N;return{...e,value:k,enableCosmeticRounding:a,enableDisplayRounding:l,roundDisplayValue:T,onChange:w=>{const{value:_}=w.target,S=i[g],V=n[g],O=V!==S?v.convertAndGetValue(_,S,V):_,z=m?S:V;if("onChange"in e){const{onChange:L}=e,M={...w,target:{...w.target,value:String(O),rowIndex:r,cellIndex:b,unit:z}};L(M)}}}}return e})})):[];return{convertedHeaders:u,convertedRows:d}},I=({table:o,unitConfig:t,convertBackToStorageUnit:n=!0,enableCosmeticRounding:i=!0,enableDisplayRounding:p=!0})=>{const{rows:m,headers:a,...l}=o,{storageUnits:u,preferredUnits:d}=ee(t),c=Y(d),[r,e]=h.useState(d),b=({unitKey:y,value:C})=>e({...r,[y]:C}),g=y=>ne({headers:a,rows:m,selectedUnits:y,storageUnits:u,onChangeUnit:b,convertBackToStorageUnit:n,enableCosmeticRounding:i,enableDisplayRounding:p}),U=g(r),[f,T]=h.useState(U);return h.useEffect(()=>{!X.isEqual(d,c)&&(e(d),T(g(d)))},[t]),h.useEffect(()=>{T(g(r))},[o,r]),s.jsx(Z,{table:{...l,headers:f.convertedHeaders,rows:f.convertedRows}})};try{I.displayName="UnitTable",I.__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"}},enableDisplayRounding:{defaultValue:{value:"true"},description:"",name:"enableDisplayRounding",required:!1,type:{name:"boolean"}},onListReorder:{defaultValue:null,description:"",name:"onListReorder",required:!1,type:{name:"((obj: { from: number; to: number; }) => void)"}}}}}catch{}const rn={title:"Basic/UnitTable",args:{}},te=!0,ae=!0,oe=!0,G="m",re=3,ie=(o,t)=>{const n=[t,t,t],i=[...Array(Number(o))].map((p,m)=>{const a=m,l=m+1.25,u=l-a;return[String(a),String(l),String(u)]});return[n].concat(i)},se=ie(re,G),le=({reduxTable:o,value:t,rowIndex:n,cellIndex:i})=>Q(o,p=>{p[n+1][i]=t}),x=()=>{const[o,t]=h.useState(G),[n,i]=h.useState(se),p=a=>{const{rowIndex:l,cellIndex:u,value:d,unit:c}=a.target,r=le({reduxTable:n,value:d,rowIndex:l,cellIndex:u});i(r)},m=n.reduce((a,l,u)=>(u===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:l.map((d,c)=>{const r=u===1&&c===1;return{value:d,type:r?"Text":"NumberInput",unitKey:"length",onChange:p,roundDisplayValue:u===3&&c===2?f=>v.roundByMagnitude(f,2):null,formatDisplayValue:r?f=>`T* ${f}`:null,autoUnit:!0}})}),a),{headers:[],rows:[]});return s.jsxs(J,{columns:"1fr 1fr",gap:!0,children:[s.jsx(D,{heading:s.jsx(R,{children:"Global View Settings"}),children:s.jsx($,{label:"Active Unit Template",children:s.jsx(W,{options:v.getUnitsForQuantity("length"),value:{value:o},onChange:a=>t(a.target.value),width:"100px"})})}),s.jsx(D,{heading:s.jsx(R,{children:"UnitTable"}),children:s.jsx(I,{table:m,unitConfig:[{unitKey:"length",storageUnit:n[0][0],preferredUnit:o}],convertBackToStorageUnit:te,enableDisplayRounding:oe,enableCosmeticRounding:ae})}),s.jsx(D,{heading:s.jsx(R,{children:"Storage State (Redux)"}),children:s.jsx("pre",{children:s.jsx("code",{children:JSON.stringify(n,null,2)})})})]})};var E,H,F,P,B;x.parameters={...x.parameters,docs:{...(E=x.parameters)==null?void 0:E.docs,source:{originalSource:`() => {
|
|
2
|
+
const [preferredUnit, setPreferredUnit] = useState(initialUnit);
|
|
3
|
+
const [reduxTable, setReduxTable] = useState(initialTable);
|
|
4
|
+
|
|
5
|
+
/*********************************************************************************************************************
|
|
6
|
+
Cell onChange handler
|
|
7
|
+
*********************************************************************************************************************/
|
|
8
|
+
const onUpdateCell = (evt: IUnitTableOnChangeEvent) => {
|
|
9
|
+
const {
|
|
10
|
+
rowIndex,
|
|
11
|
+
cellIndex,
|
|
12
|
+
value,
|
|
13
|
+
unit
|
|
14
|
+
} = evt.target;
|
|
15
|
+
const nextTable = convertWholeTable ? convertStorageTable({
|
|
16
|
+
reduxTable,
|
|
17
|
+
value,
|
|
18
|
+
unit,
|
|
19
|
+
rowIndex,
|
|
20
|
+
cellIndex
|
|
21
|
+
}) : updateCell({
|
|
22
|
+
reduxTable,
|
|
23
|
+
value,
|
|
24
|
+
rowIndex,
|
|
25
|
+
cellIndex
|
|
26
|
+
});
|
|
27
|
+
setReduxTable(nextTable);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
/*********************************************************************************************************************
|
|
31
|
+
Construct table view data (same as old Table component, with a new props)
|
|
32
|
+
*********************************************************************************************************************/
|
|
33
|
+
const tableViewData = reduxTable.reduce((acc, row, rowIndex) => {
|
|
34
|
+
if (rowIndex === 0) {
|
|
35
|
+
acc.headers = [{
|
|
36
|
+
cells: [{
|
|
37
|
+
value: 'From'
|
|
38
|
+
}, {
|
|
39
|
+
value: 'To'
|
|
40
|
+
}, {
|
|
41
|
+
value: 'Delta'
|
|
42
|
+
}]
|
|
43
|
+
}, {
|
|
44
|
+
cells: [{
|
|
45
|
+
type: 'AutoUnit',
|
|
46
|
+
unitKey: 'length'
|
|
47
|
+
}, {
|
|
48
|
+
type: 'AutoUnit',
|
|
49
|
+
unitKey: 'length'
|
|
50
|
+
}, {
|
|
51
|
+
type: 'AutoUnit',
|
|
52
|
+
unitKey: 'length'
|
|
53
|
+
}]
|
|
54
|
+
}];
|
|
55
|
+
} else {
|
|
56
|
+
acc.rows = acc.rows.concat({
|
|
57
|
+
cells: row.map((cell, cellIndex) => {
|
|
58
|
+
const specialCell = rowIndex === 1 && cellIndex === 1;
|
|
59
|
+
const type = specialCell ? 'Text' : 'NumberInput';
|
|
60
|
+
const formatDisplayValue = specialCell ? (value: number | string) => \`T* \${value}\` : null;
|
|
61
|
+
const customDisplayRounding = rowIndex === 3 && cellIndex === 2 ? (value: TStringNumberNull) => roundByMagnitude(value, 2) : null;
|
|
62
|
+
const value = cell;
|
|
63
|
+
return {
|
|
64
|
+
value,
|
|
65
|
+
type,
|
|
66
|
+
unitKey: 'length',
|
|
67
|
+
onChange: onUpdateCell,
|
|
68
|
+
roundDisplayValue: customDisplayRounding,
|
|
69
|
+
// optionally customize the display rounding of specific columns/cells
|
|
70
|
+
formatDisplayValue,
|
|
71
|
+
// optionally extend/customize the display formatting of specific columns/cells
|
|
72
|
+
autoUnit: true
|
|
73
|
+
};
|
|
74
|
+
})
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
return acc;
|
|
78
|
+
}, {
|
|
79
|
+
headers: ([] as any[]),
|
|
80
|
+
rows: ([] as IUnitTableRow[])
|
|
81
|
+
});
|
|
82
|
+
return <Grid columns="1fr 1fr" gap>
|
|
83
|
+
<Card heading={<Heading>Global View Settings</Heading>}>
|
|
84
|
+
<Field label="Active Unit Template">
|
|
85
|
+
<Select options={getUnitsForQuantity('length')} value={{
|
|
86
|
+
value: preferredUnit
|
|
87
|
+
}} onChange={evt => setPreferredUnit(evt.target.value)} width="100px" />
|
|
88
|
+
</Field>
|
|
89
|
+
</Card>
|
|
90
|
+
<Card heading={<Heading>UnitTable</Heading>}>
|
|
91
|
+
<UnitTable table={tableViewData}
|
|
92
|
+
//New props:
|
|
93
|
+
unitConfig={[{
|
|
94
|
+
unitKey: 'length',
|
|
95
|
+
storageUnit: reduxTable[0][0],
|
|
96
|
+
preferredUnit
|
|
97
|
+
}]}
|
|
98
|
+
//Most tables should just use the default values here (true):
|
|
99
|
+
convertBackToStorageUnit={convertBackToStorageUnit} enableDisplayRounding={enableDisplayRounding} enableCosmeticRounding={enableCosmeticRounding} />
|
|
100
|
+
</Card>
|
|
101
|
+
<Card heading={<Heading>Storage State (Redux)</Heading>}>
|
|
102
|
+
<pre>
|
|
103
|
+
<code>{JSON.stringify(reduxTable, null, 2)}</code>
|
|
104
|
+
</pre>
|
|
105
|
+
</Card>
|
|
106
|
+
</Grid>;
|
|
107
|
+
}`,...(F=(H=x.parameters)==null?void 0:H.docs)==null?void 0:F.source},description:{story:"Story",...(B=(P=x.parameters)==null?void 0:P.docs)==null?void 0:B.description}}};const sn=["UnitTablePrototype"];export{x as UnitTablePrototype,sn as __namedExportsOrder,rn as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"generatedAt":
|
|
1
|
+
{"generatedAt":1717579022137,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"yarn","version":"1.22.19"},"features":{"storyStoreV7":true},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","storybookVersion":"7.6.19","storybookVersionSpecifier":"^7.6.19","language":"typescript","storybookPackages":{"@storybook/addon-essentials":{"version":"7.6.19"},"@storybook/addon-links":{"version":"7.6.19"},"@storybook/addons":{"version":"7.6.19"},"@storybook/react":{"version":"7.6.19"},"@storybook/react-vite":{"version":"7.6.19"},"eslint-plugin-storybook":{"version":"0.6.15"},"storybook":{"version":"7.5.3"}},"addons":{"@storybook/addon-actions":{"version":"7.6.19"},"@storybook/addon-docs":{"version":"7.6.19"},"storybook-dark-mode":{"version":"3.0.3"}}}
|
package/package.json
CHANGED
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
import{j as i}from"./jsx-runtime-FsUICBgo.js";import{r as h}from"./index-RfLt4OUa.js";import{f as $}from"./immer.esm-bD7SSJ7T.js";import{d as U}from"./index-qZmQ7nA9.js";import{G as z}from"./grid-u1mZpaML.js";import{C as D}from"./card-0r8RRVk-.js";import{F as M}from"./field-FZX0Z7IB.js";import{H as R}from"./heading-jZsIIJF0.js";import{S as W}from"./select-DZdWUrCW.js";import{l as X}from"./lodash-Bmg8FrMx.js";import{u as Y}from"./use-previous-VKMmnaK7.js";import{T as Z,C as K}from"./table-033R9jUC.js";import"./index-cCpkwrS5.js";import"./styled-components.browser.esm-qIipjd6c.js";import"./tslib.es6-OIsz3r9a.js";import"./index-VW3EWkuE.js";import"./label-uCFEME1p.js";import"./common-types-U65vzrrz.js";import"./help-icon-SKky6KLV.js";import"./tooltip-HEHiU__l.js";import"./index-miLrID2P.js";import"./icon-8EQazuuW.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-8sb_A2v4.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";import"./types-5uVBABF4.js";import"./assertThisInitialized-4q6YPdh3.js";import"./memoize-one.esm-hqe5SRxC.js";import"./types-VB5zD18b.js";import"./text-6KQ6ntOV.js";import"./actions-mOcj9IlF.js";import"./button-shH4xakS.js";import"./spinner-R8Il4aRe.js";import"./badge-23Ty_zBt.js";import"./select.input-zP5tW20f.js";import"./index.es-VXFRDikp.js";import"./redux-F5dueAP3.js";import"./objectSpread2-93s0nBry.js";import"./tiny-invariant-R4kOKlvx.js";import"./pagination-tnyyuMkB.js";import"./input-2BhbKV-j.js";import"./input-group-R8LoqKRn.js";import"./input-group-addon-BHVsW9mL.js";import"./number-input-CMhEMmUd.js";import"./check-box-2gxosI3y.js";import"./slider-MN9iDCsS.js";import"./index-ugi_ZH6T.js";import"./popover-cad2llTa.js";const ee=a=>a.reduce(({preferredUnits:n,storageUnits:t},{unitKey:o,preferredUnit:u,storageUnit:c})=>(n[o]=u,t[o]=c,{preferredUnits:n,storageUnits:t}),{preferredUnits:{},storageUnits:{}}),te=({headers:a,rows:n,selectedUnits:t,storageUnits:o,onChangeUnit:u,convertBackToStorageUnit:c,enableCosmeticRounding:r,enableDisplayRounding:d,roundDisplayValue:p})=>{const f=a?a.map(s=>({...s,cells:s.cells.map(l=>{if(l.type===K.AUTO_UNIT){const{unitKey:e}=l;return{value:t[e],type:K.SELECT,options:U.getUnitsForQuantity(e),native:!0,onChange:b=>u({unitKey:e,value:b.target.value})}}return l})})):[],m=n?n.map((s,l)=>({...s,cells:s.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:g,unitKey:y,value:T}=e,x=t[y],v=o[y],S=x!==v,N=S?U.convertAndGetValue(T,x,v):e.value,B=U.isScientificStringNum(T),A=r&&(S||!B)?U.roundToPrecision(N,14):N,k=g?g(A):A;return{...e,value:k,enableCosmeticRounding:r,enableDisplayRounding:d,roundDisplayValue:p,onChange:w=>{const{value:_}=w.target,V=o[y],I=t[y],O=I!==V?U.convertAndGetValue(_,V,I):_,L=c?V:I;if("onChange"in e){const{onChange:Q}=e,J={...w,target:{...w.target,value:String(O),rowIndex:l,cellIndex:b,unit:L}};Q(J)}}}}return e})})):[];return{convertedHeaders:f,convertedRows:m}},j=({table:a,unitConfig:n,convertBackToStorageUnit:t=!0,enableCosmeticRounding:o=!0,enableDisplayRounding:u=!0,roundDisplayValue:c})=>{const{rows:r,headers:d,...p}=a,{storageUnits:f,preferredUnits:m}=ee(n),s=Y(m),[l,e]=h.useState(m),b=({unitKey:v,value:S})=>e({...l,[v]:S}),g=v=>te({headers:d,rows:r,selectedUnits:v,storageUnits:f,onChangeUnit:b,convertBackToStorageUnit:t,enableCosmeticRounding:o,enableDisplayRounding:u,roundDisplayValue:c}),y=g(l),[T,x]=h.useState(y);return h.useEffect(()=>{!X.isEqual(m,s)&&(e(m),x(g(m)))},[n]),h.useEffect(()=>{x(g(l))},[a,l]),i.jsx(Z,{table:{...p,headers:T.convertedHeaders,rows:T.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"}},enableDisplayRounding:{defaultValue:{value:"true"},description:"",name:"enableDisplayRounding",required:!1,type:{name:"boolean"}},roundDisplayValue:{defaultValue:null,description:"",name:"roundDisplayValue",required:!1,type:{name:"((value: TStringNumberNull) => TStringNumberNull)"}},onListReorder:{defaultValue:null,description:"",name:"onListReorder",required:!1,type:{name:"((obj: { from: number; to: number; }) => void)"}}}}}catch{}const at={title:"Basic/UnitTable",args:{}},ne=!0,re=!0,G="m",ae=3,oe=(a,n)=>{const t=[n,n,n],o=[...Array(Number(a))].map((u,c)=>{const r=c,d=c+1.25,p=d-r;return[String(r),String(d),String(p)]});return[t].concat(o)},ie=oe(ae,G),se=({reduxTable:a,value:n,rowIndex:t,cellIndex:o})=>$(a,u=>{u[t+1][o]=n}),C=()=>{const[a,n]=h.useState(G),[t,o]=h.useState(ie),u=r=>{const{rowIndex:d,cellIndex:p,value:f,unit:m}=r.target,s=se({reduxTable:t,value:f,rowIndex:d,cellIndex:p});o(s)},c=t.reduce((r,d,p)=>(p===0?r.headers=[{cells:[{value:"From"},{value:"To"},{value:"Delta"}]},{cells:[{type:"AutoUnit",unitKey:"length"},{type:"AutoUnit",unitKey:"length"},{type:"AutoUnit",unitKey:"length"}]}]:r.rows=r.rows.concat({cells:d.map((f,m)=>{const s=p===1&&m===1;return{value:f,type:s?"Text":"NumberInput",unitKey:"length",onChange:u,formatDisplayValue:s?g=>`T* ${g}`:null,autoUnit:!0}})}),r),{headers:[],rows:[]});return i.jsxs(z,{columns:"1fr 1fr",gap:!0,children:[i.jsx(D,{heading:i.jsx(R,{children:"Global View Settings"}),children:i.jsx(M,{label:"Active Unit Template",children:i.jsx(W,{options:U.getUnitsForQuantity("length"),value:{value:a},onChange:r=>n(r.target.value),width:"100px"})})}),i.jsx(D,{heading:i.jsx(R,{children:"UnitTable"}),children:i.jsx(j,{table:c,unitConfig:[{unitKey:"length",storageUnit:t[0][0],preferredUnit:a}],convertBackToStorageUnit:ne,enableCosmeticRounding:re})}),i.jsx(D,{heading:i.jsx(R,{children:"Storage State (Redux)"}),children:i.jsx("pre",{children:i.jsx("code",{children:JSON.stringify(t,null,2)})})})]})};var E,H,F,P,q;C.parameters={...C.parameters,docs:{...(E=C.parameters)==null?void 0:E.docs,source:{originalSource:`() => {
|
|
2
|
-
const [preferredUnit, setPreferredUnit] = useState(initialUnit);
|
|
3
|
-
const [reduxTable, setReduxTable] = useState(initialTable);
|
|
4
|
-
|
|
5
|
-
/*********************************************************************************************************************
|
|
6
|
-
Cell onChange handler
|
|
7
|
-
*********************************************************************************************************************/
|
|
8
|
-
const onUpdateCell = (evt: IUnitTableOnChangeEvent) => {
|
|
9
|
-
const {
|
|
10
|
-
rowIndex,
|
|
11
|
-
cellIndex,
|
|
12
|
-
value,
|
|
13
|
-
unit
|
|
14
|
-
} = evt.target;
|
|
15
|
-
const nextTable = convertWholeTable ? convertStorageTable({
|
|
16
|
-
reduxTable,
|
|
17
|
-
value,
|
|
18
|
-
unit,
|
|
19
|
-
rowIndex,
|
|
20
|
-
cellIndex
|
|
21
|
-
}) : updateCell({
|
|
22
|
-
reduxTable,
|
|
23
|
-
value,
|
|
24
|
-
rowIndex,
|
|
25
|
-
cellIndex
|
|
26
|
-
});
|
|
27
|
-
setReduxTable(nextTable);
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
/*********************************************************************************************************************
|
|
31
|
-
Construct table view data (same as old Table component, with a new props)
|
|
32
|
-
*********************************************************************************************************************/
|
|
33
|
-
const tableViewData = reduxTable.reduce((acc, row, rowIndex) => {
|
|
34
|
-
if (rowIndex === 0) {
|
|
35
|
-
acc.headers = [{
|
|
36
|
-
cells: [{
|
|
37
|
-
value: 'From'
|
|
38
|
-
}, {
|
|
39
|
-
value: 'To'
|
|
40
|
-
}, {
|
|
41
|
-
value: 'Delta'
|
|
42
|
-
}]
|
|
43
|
-
}, {
|
|
44
|
-
cells: [{
|
|
45
|
-
type: 'AutoUnit',
|
|
46
|
-
unitKey: 'length'
|
|
47
|
-
}, {
|
|
48
|
-
type: 'AutoUnit',
|
|
49
|
-
unitKey: 'length'
|
|
50
|
-
}, {
|
|
51
|
-
type: 'AutoUnit',
|
|
52
|
-
unitKey: 'length'
|
|
53
|
-
}]
|
|
54
|
-
}];
|
|
55
|
-
} else {
|
|
56
|
-
acc.rows = acc.rows.concat({
|
|
57
|
-
cells: row.map((cell, cellIndex) => {
|
|
58
|
-
const specialCell = rowIndex === 1 && cellIndex === 1;
|
|
59
|
-
const type = specialCell ? 'Text' : 'NumberInput';
|
|
60
|
-
const formatDisplayValue = specialCell ? (value: number | string) => \`T* \${value}\` : null;
|
|
61
|
-
const value = cell;
|
|
62
|
-
return {
|
|
63
|
-
value,
|
|
64
|
-
type,
|
|
65
|
-
unitKey: 'length',
|
|
66
|
-
onChange: onUpdateCell,
|
|
67
|
-
formatDisplayValue,
|
|
68
|
-
autoUnit: true
|
|
69
|
-
};
|
|
70
|
-
})
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
return acc;
|
|
74
|
-
}, {
|
|
75
|
-
headers: ([] as any[]),
|
|
76
|
-
rows: ([] as IUnitTableRow[])
|
|
77
|
-
});
|
|
78
|
-
return <Grid columns="1fr 1fr" gap>
|
|
79
|
-
<Card heading={<Heading>Global View Settings</Heading>}>
|
|
80
|
-
<Field label="Active Unit Template">
|
|
81
|
-
<Select options={getUnitsForQuantity('length')} value={{
|
|
82
|
-
value: preferredUnit
|
|
83
|
-
}} onChange={evt => setPreferredUnit(evt.target.value)} width="100px" />
|
|
84
|
-
</Field>
|
|
85
|
-
</Card>
|
|
86
|
-
<Card heading={<Heading>UnitTable</Heading>}>
|
|
87
|
-
<UnitTable table={tableViewData}
|
|
88
|
-
//New props:
|
|
89
|
-
unitConfig={[{
|
|
90
|
-
unitKey: 'length',
|
|
91
|
-
storageUnit: reduxTable[0][0],
|
|
92
|
-
preferredUnit
|
|
93
|
-
}]}
|
|
94
|
-
//Most tables should just use the default values here (true):
|
|
95
|
-
convertBackToStorageUnit={convertBackToStorageUnit} enableCosmeticRounding={enableCosmeticRounding} />
|
|
96
|
-
</Card>
|
|
97
|
-
<Card heading={<Heading>Storage State (Redux)</Heading>}>
|
|
98
|
-
<pre>
|
|
99
|
-
<code>{JSON.stringify(reduxTable, null, 2)}</code>
|
|
100
|
-
</pre>
|
|
101
|
-
</Card>
|
|
102
|
-
</Grid>;
|
|
103
|
-
}`,...(F=(H=C.parameters)==null?void 0:H.docs)==null?void 0:F.source},description:{story:"Story",...(q=(P=C.parameters)==null?void 0:P.docs)==null?void 0:q.description}}};const ot=["UnitTablePrototype"];export{C as UnitTablePrototype,ot as __namedExportsOrder,at as default};
|