@pautena/react-design-system 0.14.3 → 0.14.4

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.
Files changed (25) hide show
  1. package/cjs/index.js +2 -2
  2. package/cjs/index.js.map +1 -1
  3. package/index.js +4 -4
  4. package/index.js.map +1 -1
  5. package/list-panel/cjs/index.js +1 -1
  6. package/list-panel/cjs/index.js.map +1 -1
  7. package/list-panel/cjs/package.json +2 -1
  8. package/list-panel/index.js +1 -1
  9. package/list-panel/index.js.map +1 -1
  10. package/list-panel/list-panel.d.ts +1 -0
  11. package/list-panel/list-panel.mocks.d.ts +1 -0
  12. package/list-panel/package.json +2 -1
  13. package/model-router/cjs/index.js +1 -1
  14. package/model-router/cjs/index.js.map +1 -1
  15. package/model-router/index.js +1 -1
  16. package/model-router/index.js.map +1 -1
  17. package/object-details/cjs/index.js +1 -1
  18. package/object-details/cjs/index.js.map +1 -1
  19. package/object-details/index.js +1 -1
  20. package/object-details/index.js.map +1 -1
  21. package/package.json +1 -1
  22. package/value-text/cjs/index.js +1 -1
  23. package/value-text/cjs/index.js.map +1 -1
  24. package/value-text/index.js +1 -1
  25. package/value-text/index.js.map +1 -1
package/object-details/cjs/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Grid"),i=require("@mui/material/styles"),l=require("@mui/material/Box"),r=require("@mui/material/Switch"),n=require("@mui/material/Typography"),a=require("@mui/icons-material/Check"),s=require("@mui/icons-material/Close"),d=require("react"),o=require("@mui/icons-material/Clear"),u=require("@mui/material/Button"),c=require("@mui/material/IconButton"),m=require("@mui/material/InputAdornment"),x=require("@mui/icons-material/Edit"),h=require("@mui/material/Tooltip"),p=require("@mui/material/TextField"),f=require("date-fns"),g=require("@mui/x-date-pickers/DatePicker"),b=require("@mui/x-date-pickers/DateTimePicker"),j=require("@mui/x-date-pickers/TimePicker"),y=require("@mui/material/Paper"),k=require("@mui/material"),v=require("@mui/x-data-grid");function E(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=E(t),q=E(l),S=E(r),T=E(n),I=E(a),z=E(s),P=E(o),R=E(u),D=E(c),V=E(m),W=E(x),A=E(h),w=E(p),L=E(y);const O=(e=12)=>{const t=(t,i,l)=>{const r=t[i];return t[i]+=l,t[i]>e?(t[i]=l,!1):(t[i]==e&&(t[i]=0),r>0)};return{xs:0,sm:0,md:0,lg:0,xl:0,increment:function({xs:e=0,sm:i=0,md:l=0,lg:r=0,xl:n=0}){const a=i||e,s=l||a,d=r||s,o=n||d;return{xs:t(this,"xs",e),sm:t(this,"sm",a),md:t(this,"md",s),lg:t(this,"lg",d),xl:t(this,"xl",o)}}}},N=({onClickCancel:t,onClickSubmit:i,sx:l})=>e.jsxs(V.default,{position:"end",sx:l,children:[e.jsx(R.default,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:e.jsx(P.default,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0,marginRight:1}}),e.jsx(R.default,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:e.jsx(I.default,{sx:{fontSize:12}}),onClick:i,sx:{paddingRight:0,minWidth:0}})]}),B=(e,t)=>{const[i,l]=d.useState(!1),[r,n]=d.useState(e),a=()=>{l(!1),n(e)};return{isEditing:i,cancelEdit:a,editValue:r,setEditValue:n,startEdit:()=>{l(!0)},submitEdit:()=>{t(r),a()}}},H=({dense:t,onClick:l})=>{const{typography:r}=i.useTheme();return e.jsx(D.default,{size:"small",onClick:l,sx:{ml:t?.5:1},"aria-label":"edit button",children:e.jsx(W.default,{sx:{fontSize:r.pxToRem(t?18:24)}})})},F=e=>`label-${e.replace(/ /g,"-")}`,G=({label:t,hideLabel:l,tooltip:r,tooltipEnterDelay:n=2e3,children:a,dense:s,sx:d})=>{const{typography:o}=i.useTheme(),u=F(t);return e.jsxs(q.default,{width:1,lineHeight:s?0:void 0,sx:d,children:[!l&&e.jsx(T.default,{variant:s?"caption":"subtitle2",role:"label",id:u,lineHeight:s?o.pxToRem(15):void 0,children:t}),r?e.jsx(A.default,{title:r,placement:"top",enterDelay:n,children:a}):a]})},M=({label:t,value:l,placeholder:r="-",editable:n,dense:a,onEdit:s=(()=>null)})=>{const d=F(t),{typography:o}=i.useTheme(),{isEditing:u,editValue:c,startEdit:m,cancelEdit:x,setEditValue:h,submitEdit:p}=B(l,s),f={fontSize:a?o.h6.fontSize:o.h5.fontSize};return e.jsx(G,{label:t,dense:a,children:u?e.jsxs(q.default,{display:"flex",alignItems:"center",children:[e.jsx(S.default,{size:a?"small":"medium",checked:c,onChange:e=>h(e.target.checked)}),e.jsx(N,{onClickCancel:x,onClickSubmit:p})]}):e.jsxs(q.default,{display:"flex",alignItems:"center","aria-labelledby":d,role:"checkbox","aria-checked":l,children:[void 0===l?e.jsx(T.default,{variant:"h5",children:r}):l?e.jsx(I.default,{color:"success",sx:f}):e.jsx(z.default,{color:"error",sx:f}),n&&e.jsx(H,{dense:a,onClick:m})]})})},Y=({label:t,value:i,format:l,placeholder:r="-",editable:n,editInputType:a="datetime",dense:s,onEdit:d=(()=>null)})=>{const{isEditing:o,editValue:u,startEdit:c,cancelEdit:m,setEditValue:x,submitEdit:h}=B(i,d),p=F(t),y=i&&f.format(i,l)||r,k="datetime"===a?b.DateTimePicker:"time"===a?j.TimePicker:g.DatePicker;return e.jsx(G,{label:t,hideLabel:o,tooltip:y,dense:s,sx:{display:"flex",flexDirection:"column"},children:o?e.jsx(k,{value:u,format:l,label:t,onChange:e=>x(e||void 0),slots:{textField:t=>e.jsx(w.default,{...t,size:"small",InputProps:{...t.InputProps,endAdornment:e.jsxs(e.Fragment,{children:[t.InputProps?.endAdornment,e.jsx(N,{onClickCancel:m,onClickSubmit:h,sx:{ml:2}})]}),sx:{marginY:s?.2:1}}})}}):e.jsxs(q.default,{display:"flex",alignItems:"center",children:[e.jsx(T.default,{variant:s?"body1":"h5",noWrap:!0,"aria-labelledby":p,children:y}),n&&e.jsx(H,{dense:s,onClick:c})]})})},$=({label:t,value:i,placeholder:l="-",editable:r,dense:n,onEdit:a=(()=>null)})=>{const s=d.useRef(null),{isEditing:o,editValue:u,startEdit:c,cancelEdit:m,setEditValue:x,submitEdit:h}=B(i?.toString(),a),p=F(t),f=i?.toString()||l,g=e=>{"Enter"===e.key&&a(e.target.value)};return d.useEffect((()=>(s.current?.addEventListener("keypress",g),()=>s.current?.removeEventListener("keypress",g))),[s.current]),e.jsx(G,{hideLabel:o,label:t,tooltip:f,dense:n,children:o?e.jsx(w.default,{inputRef:s,value:u,label:t,size:"small",onChange:e=>x(e.target.value),InputProps:{endAdornment:e.jsx(N,{onClickCancel:m,onClickSubmit:h})},sx:{marginY:n?0:1}}):e.jsxs(T.default,{variant:n?"body1":"h5",noWrap:!0,"aria-labelledby":p,children:[f,r&&e.jsx(H,{dense:n,onClick:c})]})})},_=({lightWeight:e=100,darkWeight:t=900}={})=>{const{palette:i}=k.useTheme();return"light"===i.mode?i.grey[e]:i.grey[t]},J=({title:t,subtitle:l,centered:r,children:n,dense:a})=>{const{typography:s}=i.useTheme(),d=_({lightWeight:200,darkWeight:800});return e.jsxs(L.default,{sx:{paddingBottom:a?0:1},children:[e.jsxs(q.default,{bgcolor:d,px:a?1:2,py:a?.5:1,lineHeight:a?0:void 0,children:[e.jsx(T.default,{variant:a?"body1":"h6",role:"heading","aria-level":1,children:t}),l&&e.jsx(T.default,{variant:a?"caption":"body2",role:"heading","aria-level":2,lineHeight:a?s.pxToRem(15):void 0,children:l})]}),e.jsx(C.default,{container:!0,padding:1,rowSpacing:a?1:2,justifyContent:r?"center":"flex-start",children:n})]})},K="RdsValueItem-root",Q="RdsValueItem-content",U=({children:t,bordered:i=!0,...l})=>{const r=((e,t)=>{const i=`solid ${t} 1px`,l="none";if(e){if(Array.isArray(e))return e.map((e=>e?i:l));if("object"==typeof e){const t={};return Object.entries(e).forEach((([e,r])=>{t[e]=r?i:l})),t}return i}})(i,_({lightWeight:200,darkWeight:800}));return e.jsx(C.default,{item:!0,className:K,...l,children:e.jsx(q.default,{className:Q,px:1,borderLeft:r,children:t})})},X=(t,i,{dense:l}={})=>{const{id:r,name:n,type:a}=t,s=i[r];return"boolean"===a?e.jsx(M,{dense:l,label:n,value:s}):"date"===a||"time"===a||"datetime"===a?e.jsx(Y,{dense:l,label:n,value:s,format:t.format}):"object"!=typeof s||Array.isArray(s)?e.jsx($,{dense:l,label:n,value:s?.toString()}):e.jsx($,{dense:l,label:n,value:JSON.stringify(s)})},Z=({field:{name:t,description:i,value:l},instance:r,dense:n})=>{const a=[{field:"id",headerName:"ID",width:70}];l.forEach((e=>{a.push({field:e.id,headerName:e.name})}));const s=r.map(((e,t)=>({id:t,...e})));return e.jsx(J,{title:t,subtitle:i,dense:n,children:e.jsx(C.default,{item:!0,xs:12,children:e.jsx(v.DataGrid,{rows:s,columns:a,density:n?"compact":"standard",disableRowSelectionOnClick:!0,pageSizeOptions:[5],initialState:{pagination:{paginationModel:{pageSize:5}}},sx:{height:400}})})})},ee=({field:{name:t,description:i,value:l},instance:r,dense:n})=>{const a=O();return e.jsx(J,{title:t,subtitle:i,dense:n,children:l.map((t=>{const{id:i,xs:l,sm:s,md:d,lg:o,xl:u}=t,c=a.increment(t);return e.jsx(U,{xs:l,sm:s,md:d,lg:o,xl:u,bordered:c,children:X(t,r,{dense:n})},i)}))})};exports.ObjectDetails=({model:t,instance:i,dense:l})=>{const r=O();return e.jsx(C.default,{container:!0,spacing:l?1:2,children:t.fields.map((t=>{const{id:n,type:a,xs:s=3,sm:d=0,md:o=0,lg:u=0,xl:c=0}=t;if("group"===a)return r.increment({xs:12}),e.jsx(C.default,{item:!0,xs:12,children:e.jsx(ee,{field:t,instance:i[n],dense:l})},n);if("group[]"===a)return r.increment({xs:12}),e.jsx(C.default,{item:!0,xs:12,children:e.jsx(Z,{field:t,instance:i[n],dense:l})},n);const m=r.increment(t);return e.jsx(U,{xs:s,sm:d,md:o,lg:u,xl:c,bordered:m,children:X(t,i,{dense:l})},n)}))})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Grid"),i=require("@mui/material/styles"),l=require("@mui/material/Box"),r=require("@mui/material/Switch"),n=require("@mui/material/Typography"),a=require("@mui/icons-material/Check"),s=require("@mui/icons-material/Close"),d=require("react"),o=require("@mui/icons-material/Clear"),u=require("@mui/material/Button"),c=require("@mui/material/IconButton"),m=require("@mui/material/InputAdornment"),x=require("@mui/icons-material/Edit"),h=require("@mui/material/Tooltip"),p=require("@mui/material/TextField"),f=require("date-fns"),g=require("@mui/x-date-pickers/DatePicker"),b=require("@mui/x-date-pickers/DateTimePicker"),j=require("@mui/x-date-pickers/TimePicker"),y=require("@mui/material/Paper"),k=require("@mui/material"),v=require("@mui/x-data-grid");function E(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=E(t),q=E(l),S=E(r),T=E(n),I=E(a),z=E(s),P=E(o),R=E(u),D=E(c),V=E(m),W=E(x),A=E(h),w=E(p),L=E(y);const O=(e=12)=>{const t=(t,i,l)=>{const r=t[i];return t[i]+=l,t[i]>e?(t[i]=l,!1):(t[i]==e&&(t[i]=0),r>0)};return{xs:0,sm:0,md:0,lg:0,xl:0,increment:function({xs:e=0,sm:i=0,md:l=0,lg:r=0,xl:n=0}){const a=i||e,s=l||a,d=r||s,o=n||d;return{xs:t(this,"xs",e),sm:t(this,"sm",a),md:t(this,"md",s),lg:t(this,"lg",d),xl:t(this,"xl",o)}}}},N=({onClickCancel:t,onClickSubmit:i,sx:l})=>e.jsxs(V.default,{position:"end",sx:l,children:[e.jsx(R.default,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:e.jsx(P.default,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0,marginRight:1}}),e.jsx(R.default,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:e.jsx(I.default,{sx:{fontSize:12}}),onClick:i,sx:{paddingRight:0,minWidth:0}})]}),B=(e,t)=>{const[i,l]=d.useState(!1),[r,n]=d.useState(e),a=()=>{l(!1),n(e)};return{isEditing:i,cancelEdit:a,editValue:r,setEditValue:n,startEdit:()=>{l(!0)},submitEdit:()=>{t(r),a()}}},H=({dense:t,onClick:l})=>{const{typography:r}=i.useTheme();return e.jsx(D.default,{size:"small",onClick:l,sx:{ml:t?.5:1},"aria-label":"edit button",children:e.jsx(W.default,{sx:{fontSize:r.pxToRem(t?18:24)}})})},F=e=>`label-${e.replace(/ /g,"-")}`,G=({label:t,hideLabel:l,tooltip:r,tooltipEnterDelay:n=2e3,children:a,dense:s,sx:d})=>{const{typography:o}=i.useTheme(),u=F(t);return e.jsxs(q.default,{width:1,lineHeight:s?0:void 0,sx:d,children:[!l&&e.jsx(T.default,{variant:s?"caption":"subtitle2",role:"label",id:u,lineHeight:s?o.pxToRem(15):void 0,children:t}),r?e.jsx(A.default,{title:r,placement:"top",enterDelay:n,children:a}):a]})},M=({label:t,value:l,placeholder:r="-",editable:n,dense:a,onEdit:s=(()=>null)})=>{const d=F(t),{typography:o}=i.useTheme(),{isEditing:u,editValue:c,startEdit:m,cancelEdit:x,setEditValue:h,submitEdit:p}=B(l,s),f={fontSize:a?o.h6.fontSize:o.h5.fontSize};return e.jsx(G,{label:t,dense:a,children:u?e.jsxs(q.default,{display:"flex",alignItems:"center",children:[e.jsx(S.default,{size:a?"small":"medium",checked:c,onChange:e=>h(e.target.checked)}),e.jsx(N,{onClickCancel:x,onClickSubmit:p})]}):e.jsxs(q.default,{display:"flex",alignItems:"center","aria-labelledby":d,role:"checkbox","aria-checked":l,children:[void 0===l?e.jsx(T.default,{variant:"h5",children:r}):l?e.jsx(I.default,{color:"success",sx:f}):e.jsx(z.default,{color:"error",sx:f}),n&&e.jsx(H,{dense:a,onClick:m})]})})},Y=({label:t,value:i,format:l,placeholder:r="-",editable:n,editInputType:a="datetime",dense:s,onEdit:d=(()=>null)})=>{const{isEditing:o,editValue:u,startEdit:c,cancelEdit:m,setEditValue:x,submitEdit:h}=B(i,d),p=F(t),y=i&&f.format(i,l)||r,k="datetime"===a?b.DateTimePicker:"time"===a?j.TimePicker:g.DatePicker;return e.jsx(G,{label:t,hideLabel:o,tooltip:y,dense:s,sx:{display:"flex",flexDirection:"column"},children:o?e.jsx(k,{value:u,format:l,label:t,onChange:e=>x(e||void 0),slots:{textField:t=>e.jsx(w.default,{...t,size:"small",InputProps:{...t.InputProps,endAdornment:e.jsxs(e.Fragment,{children:[t.InputProps?.endAdornment,e.jsx(N,{onClickCancel:m,onClickSubmit:h,sx:{ml:2}})]}),sx:{marginY:s?.2:1}}})}}):e.jsxs(q.default,{display:"flex",alignItems:"center",children:[e.jsx(T.default,{variant:s?"body1":"h5",noWrap:!0,"aria-labelledby":p,children:y}),n&&e.jsx(H,{dense:s,onClick:c})]})})},$=({label:t,value:i,placeholder:l="-",editable:r,dense:n,onEdit:a=(()=>null)})=>{const s=d.useRef(null),{isEditing:o,editValue:u,startEdit:c,cancelEdit:m,setEditValue:x,submitEdit:h}=B(i?.toString(),a),p=F(t),f=i?.toString()||l,g=e=>{"Enter"===e.key&&a(e.target.value)};return d.useEffect((()=>(s.current?.addEventListener("keypress",g),()=>s.current?.removeEventListener("keypress",g))),[s.current]),e.jsx(G,{hideLabel:o,label:t,tooltip:f,dense:n,children:o?e.jsx(w.default,{inputRef:s,value:u,label:t,size:"small",onChange:e=>x(e.target.value),InputProps:{endAdornment:e.jsx(N,{onClickCancel:m,onClickSubmit:h})},sx:{marginY:n?0:1}}):e.jsxs(q.default,{display:"flex",children:[e.jsx(T.default,{variant:n?"body1":"h5",noWrap:!0,"aria-labelledby":p,children:f}),r&&e.jsx(H,{dense:n,onClick:c})]})})},_=({lightWeight:e=100,darkWeight:t=900}={})=>{const{palette:i}=k.useTheme();return"light"===i.mode?i.grey[e]:i.grey[t]},J=({title:t,subtitle:l,centered:r,children:n,dense:a})=>{const{typography:s}=i.useTheme(),d=_({lightWeight:200,darkWeight:800});return e.jsxs(L.default,{sx:{paddingBottom:a?0:1},children:[e.jsxs(q.default,{bgcolor:d,px:a?1:2,py:a?.5:1,lineHeight:a?0:void 0,children:[e.jsx(T.default,{variant:a?"body1":"h6",role:"heading","aria-level":1,children:t}),l&&e.jsx(T.default,{variant:a?"caption":"body2",role:"heading","aria-level":2,lineHeight:a?s.pxToRem(15):void 0,children:l})]}),e.jsx(C.default,{container:!0,padding:1,rowSpacing:a?1:2,justifyContent:r?"center":"flex-start",children:n})]})},K="RdsValueItem-root",Q="RdsValueItem-content",U=({children:t,bordered:i=!0,...l})=>{const r=((e,t)=>{const i=`solid ${t} 1px`,l="none";if(e){if(Array.isArray(e))return e.map((e=>e?i:l));if("object"==typeof e){const t={};return Object.entries(e).forEach((([e,r])=>{t[e]=r?i:l})),t}return i}})(i,_({lightWeight:200,darkWeight:800}));return e.jsx(C.default,{item:!0,className:K,...l,children:e.jsx(q.default,{className:Q,px:1,borderLeft:r,children:t})})},X=(t,i,{dense:l}={})=>{const{id:r,name:n,type:a}=t,s=i[r];return"boolean"===a?e.jsx(M,{dense:l,label:n,value:s}):"date"===a||"time"===a||"datetime"===a?e.jsx(Y,{dense:l,label:n,value:s,format:t.format}):"object"!=typeof s||Array.isArray(s)?e.jsx($,{dense:l,label:n,value:s?.toString()}):e.jsx($,{dense:l,label:n,value:JSON.stringify(s)})},Z=({field:{name:t,description:i,value:l},instance:r,dense:n})=>{const a=[{field:"id",headerName:"ID",width:70}];l.forEach((e=>{a.push({field:e.id,headerName:e.name})}));const s=r.map(((e,t)=>({id:t,...e})));return e.jsx(J,{title:t,subtitle:i,dense:n,children:e.jsx(C.default,{item:!0,xs:12,children:e.jsx(v.DataGrid,{rows:s,columns:a,density:n?"compact":"standard",disableRowSelectionOnClick:!0,pageSizeOptions:[5],initialState:{pagination:{paginationModel:{pageSize:5}}},sx:{height:400}})})})},ee=({field:{name:t,description:i,value:l},instance:r,dense:n})=>{const a=O();return e.jsx(J,{title:t,subtitle:i,dense:n,children:l.map((t=>{const{id:i,xs:l,sm:s,md:d,lg:o,xl:u}=t,c=a.increment(t);return e.jsx(U,{xs:l,sm:s,md:d,lg:o,xl:u,bordered:c,children:X(t,r,{dense:n})},i)}))})};exports.ObjectDetails=({model:t,instance:i,dense:l})=>{const r=O();return e.jsx(C.default,{container:!0,spacing:l?1:2,children:t.fields.map((t=>{const{id:n,type:a,xs:s=3,sm:d=0,md:o=0,lg:u=0,xl:c=0}=t;if("group"===a)return r.increment({xs:12}),e.jsx(C.default,{item:!0,xs:12,children:e.jsx(ee,{field:t,instance:i[n],dense:l})},n);if("group[]"===a)return r.increment({xs:12}),e.jsx(C.default,{item:!0,xs:12,children:e.jsx(Z,{field:t,instance:i[n],dense:l})},n);const m=r.increment(t);return e.jsx(U,{xs:s,sm:d,md:o,lg:u,xl:c,bordered:m,children:X(t,i,{dense:l})},n)}))})};
2
2
  //# sourceMappingURL=index.js.map
package/object-details/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/utils/breakpoints.ts","../../../src/value-base/value-edit.tsx","../../../src/value-content/value-content.tsx","../../../src/value-boolean/value-boolean.tsx","../../../src/value-base/value-displays.types.ts","../../../src/value-datetime/value-datetime.tsx","../../../src/value-text/value-text.tsx","../../../src/utils/theme.ts","../../../src/group-value-card/group-value-card.tsx","../../../src/value-item/value-item.tsx","../../../src/object-details/object-details.tsx"],"sourcesContent":["import { ResponsiveStyleValue } from \"@mui/system\";\n\ninterface Breakpoints {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n}\n\ninterface BreakpointsCounter extends Breakpoints {\n increment(breakpoints: Partial<Breakpoints>): ResponsiveStyleValue<boolean>;\n}\n\nexport const newBreakpointsCounter = (breakpoint = 12): BreakpointsCounter => {\n const calculateBreakpointIncrement = (\n breakpointsCounter: BreakpointsCounter,\n key: keyof Breakpoints,\n value: number,\n ): boolean => {\n const initialValue = breakpointsCounter[key];\n breakpointsCounter[key] += value;\n if (breakpointsCounter[key] > breakpoint) {\n breakpointsCounter[key] = value;\n return false;\n }\n\n if (breakpointsCounter[key] == breakpoint) {\n breakpointsCounter[key] = 0;\n }\n\n return initialValue > 0;\n };\n\n return {\n xs: 0,\n sm: 0,\n md: 0,\n lg: 0,\n xl: 0,\n increment: function ({\n xs = 0,\n sm = 0,\n md = 0,\n lg = 0,\n xl = 0,\n }): ResponsiveStyleValue<boolean> {\n const smInc = sm || xs;\n const mdInc = md || smInc;\n const lgInc = lg || mdInc;\n const xlInc = xl || lgInc;\n\n return {\n xs: calculateBreakpointIncrement(this, \"xs\", xs),\n sm: calculateBreakpointIncrement(this, \"sm\", smInc),\n md: calculateBreakpointIncrement(this, \"md\", mdInc),\n lg: calculateBreakpointIncrement(this, \"lg\", lgInc),\n xl: calculateBreakpointIncrement(this, \"xl\", xlInc),\n };\n },\n };\n};\n","import { useState } from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Button from \"@mui/material/Button\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport EditIcon from \"@mui/icons-material/Edit\";\n\nexport interface ValueEditButtonsProps {\n onClickCancel: () => void;\n onClickSubmit: () => void;\n sx?: SxProps<Theme>;\n}\n\nexport const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {\n return (\n <InputAdornment position=\"end\" sx={sx}>\n <Button\n variant=\"contained\"\n size=\"small\"\n color=\"error\"\n aria-label=\"cancel button\"\n startIcon={<ClearIcon sx={{ fontSize: 12 }} />}\n onClick={onClickCancel}\n sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}\n />\n <Button\n variant=\"contained\"\n size=\"small\"\n color=\"primary\"\n aria-label=\"submit button\"\n startIcon={<CheckIcon sx={{ fontSize: 12 }} />}\n onClick={onClickSubmit}\n sx={{ paddingRight: 0, minWidth: 0 }}\n />\n </InputAdornment>\n );\n};\n\n/**\n * Hook to manage the editing behaviour\n */\nexport const useEditableValueDisplay = <T,>(\n initialValue: T | undefined,\n onEdit: (value?: T) => void,\n) => {\n const [isEditing, setIsEditing] = useState(false);\n const [editValue, setEditValue] = useState<T | undefined>(initialValue);\n\n const cancelEdit = () => {\n setIsEditing(false);\n setEditValue(initialValue);\n };\n const startEdit = () => {\n setIsEditing(true);\n };\n\n const submitEdit = () => {\n onEdit(editValue);\n cancelEdit();\n };\n\n return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };\n};\n\nexport interface ValueEditButtonProps {\n dense?: boolean;\n onClick: () => void;\n}\n\nexport const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {\n const { typography } = useTheme();\n return (\n <IconButton\n size=\"small\"\n onClick={onClick}\n sx={{ ml: dense ? 0.5 : 1 }}\n aria-label=\"edit button\"\n >\n <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />\n </IconButton>\n );\n};\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n /**\n * Name of the displayed value\n */\n label: string;\n\n /**\n * If true, the label will not be shown\n */\n hideLabel?: boolean;\n\n /**\n * If defined, a tooltip is going to be added arround the children;\n */\n tooltip?: string;\n\n /**\n * Timeout before the tooltip appears when the user hovers the value\n */\n tooltipEnterDelay?: number;\n\n /**\n * Component that's going to be renderd under the label\n */\n children: React.ReactElement<any, any>;\n\n /**\n * The value has to be displayed as compact or not.\n * False by default\n */\n dense?: boolean;\n\n /**\n * Custom styles for the root component\n */\n sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n label,\n hideLabel,\n tooltip,\n tooltipEnterDelay = 2000,\n children,\n dense,\n sx,\n}: ValueContentProps) => {\n const { typography } = useTheme();\n const id = getValueContentLabelId(label);\n\n return (\n <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n {!hideLabel && (\n <Typography\n variant={dense ? \"caption\" : \"subtitle2\"}\n role=\"label\"\n id={id}\n lineHeight={dense ? typography.pxToRem(15) : undefined}\n >\n {label}\n </Typography>\n )}\n {tooltip ? (\n <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n {children}\n </Tooltip>\n ) : (\n children\n )}\n </Box>\n );\n};\n","import { useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Switch from \"@mui/material/Switch\";\nimport Typography from \"@mui/material/Typography\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport {\n BaseValueProps,\n DefaultPlaceholder,\n EditableValueProps,\n useEditableValueDisplay,\n ValueEditButton,\n ValueEditButtons,\n} from \"../value-base\";\nimport { ValueContent, getValueContentLabelId } from \"../value-content\";\n\nexport type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;\n\n/**\n * Displays a boolean value with a label\n */\nexport const ValueBoolean = ({\n label,\n value,\n placeholder = DefaultPlaceholder,\n editable,\n dense,\n onEdit = () => null,\n}: ValueBooleanProps) => {\n const id = getValueContentLabelId(label);\n const { typography } = useTheme();\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(value, onEdit);\n\n const iconSx = { fontSize: dense ? typography.h6.fontSize : typography.h5.fontSize };\n\n return (\n <ValueContent label={label} dense={dense}>\n {isEditing ? (\n <Box display=\"flex\" alignItems=\"center\">\n <Switch\n size={dense ? \"small\" : \"medium\"}\n checked={editValue}\n onChange={(e) => setEditValue(e.target.checked)}\n />\n <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n </Box>\n ) : (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n aria-labelledby={id}\n role=\"checkbox\"\n aria-checked={value}\n >\n {value === undefined ? (\n <Typography variant=\"h5\">{placeholder}</Typography>\n ) : value ? (\n <CheckIcon color=\"success\" sx={iconSx} />\n ) : (\n <CloseIcon color=\"error\" sx={iconSx} />\n )}\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Box>\n )}\n </ValueContent>\n );\n};\n","export interface BaseValueProps<T> {\n /**\n * Name of the displayed value\n */\n label: string;\n\n /**\n * Value displayed\n */\n value?: T;\n\n /**\n * String rendered if value is undefined\n */\n placeholder?: string;\n\n /**\n * The value has to be displayed as compact or not.\n * False by default\n */\n dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n /**\n * This field can be edited or not\n */\n editable?: boolean;\n\n /**\n * Callback executed when the value is edited\n */\n onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n","import Box from \"@mui/material/Box\";\nimport TextField from \"@mui/material/TextField\";\nimport Typography from \"@mui/material/Typography\";\nimport { format } from \"date-fns\";\nimport { BaseValueProps, DefaultPlaceholder, EditableValueProps } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\nimport { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from \"../value-base\";\nimport { DatePicker } from \"@mui/x-date-pickers/DatePicker\";\nimport { DateTimePicker } from \"@mui/x-date-pickers/DateTimePicker\";\nimport { TimePicker } from \"@mui/x-date-pickers/TimePicker\";\n\nexport type EditInputType = \"datetime\" | \"date\" | \"time\";\n\nexport interface ValueDatetimeProps extends BaseValueProps<Date>, EditableValueProps<Date> {\n /**\n * Datetime format\n */\n format: string;\n\n /**\n * Edit input type\n */\n editInputType?: EditInputType;\n}\n\n/**\n * Displays a formated datetime with a label\n */\nexport const ValueDatetime = ({\n label,\n value: valueProp,\n format: fmt,\n placeholder = DefaultPlaceholder,\n editable,\n editInputType = \"datetime\",\n dense,\n onEdit = () => null,\n}: ValueDatetimeProps) => {\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(valueProp, onEdit);\n const id = getValueContentLabelId(label);\n const value = (valueProp && format(valueProp, fmt)) || placeholder;\n\n const EditPickerComponent =\n editInputType === \"datetime\"\n ? DateTimePicker\n : editInputType === \"time\"\n ? TimePicker\n : DatePicker;\n\n return (\n <ValueContent\n label={label}\n hideLabel={isEditing}\n tooltip={value}\n dense={dense}\n sx={{ display: \"flex\", flexDirection: \"column\" }}\n >\n {isEditing ? (\n <EditPickerComponent\n value={editValue}\n format={fmt}\n label={label}\n onChange={(newValue) => setEditValue(newValue ? newValue : undefined)}\n slots={{\n textField: (params) => (\n <TextField\n {...params}\n size=\"small\"\n InputProps={{\n ...params.InputProps,\n endAdornment: (\n <>\n {params.InputProps?.endAdornment}\n <ValueEditButtons\n onClickCancel={cancelEdit}\n onClickSubmit={submitEdit}\n sx={{ ml: 2 }}\n />\n </>\n ),\n sx: { marginY: !dense ? 1 : 0.2 },\n }}\n />\n ),\n }}\n />\n ) : (\n <Box display=\"flex\" alignItems=\"center\">\n <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n {value}\n </Typography>\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Box>\n )}\n </ValueContent>\n );\n};\n","import Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport { useEffect, useRef } from \"react\";\nimport {\n BaseValueProps,\n DefaultPlaceholder,\n EditableValueProps,\n useEditableValueDisplay,\n ValueEditButton,\n ValueEditButtons,\n} from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;\n\n/**\n * Displays a string value with a label\n */\nexport const ValueText = ({\n label,\n value: valueProp,\n placeholder = DefaultPlaceholder,\n editable,\n dense,\n onEdit = () => null,\n}: ValueTextProps) => {\n const editInputRef = useRef<HTMLInputElement>(null);\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(valueProp?.toString(), onEdit);\n const id = getValueContentLabelId(label);\n const value = valueProp?.toString() || placeholder;\n\n const editKeyPressListener = (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n onEdit((e.target as any).value);\n }\n };\n\n useEffect(() => {\n editInputRef.current?.addEventListener(\"keypress\", editKeyPressListener);\n return () => editInputRef.current?.removeEventListener(\"keypress\", editKeyPressListener);\n }, [editInputRef.current]);\n\n return (\n <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>\n {isEditing ? (\n <TextField\n inputRef={editInputRef}\n value={editValue}\n label={label}\n size=\"small\"\n onChange={(e) => setEditValue(e.target.value)}\n InputProps={{\n endAdornment: (\n <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n ),\n }}\n sx={{ marginY: !dense ? 1 : 0 }}\n />\n ) : (\n <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n {value}\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Typography>\n )}\n </ValueContent>\n );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n lightWeight = 100,\n darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n const { palette } = useTheme();\n return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import Grid from \"@mui/material/Grid\";\nimport Paper from \"@mui/material/Paper\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { useGetDefaultThemeColor } from \"../utils\";\nimport { ValueItemElement } from \"../value-item\";\n\nexport interface GroupValueCardProps {\n title: string;\n subtitle?: string;\n centered?: boolean;\n children: ValueItemElement | ValueItemElement[];\n dense?: boolean;\n}\n\nexport const GroupValueCard = ({\n title,\n subtitle,\n centered,\n children,\n dense,\n}: GroupValueCardProps) => {\n const { typography } = useTheme();\n const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n\n return (\n <Paper\n sx={{\n paddingBottom: dense ? 0 : 1,\n }}\n >\n <Box\n bgcolor={defaultColor}\n px={dense ? 1 : 2}\n py={dense ? 0.5 : 1}\n lineHeight={dense ? 0 : undefined}\n >\n <Typography variant={dense ? \"body1\" : \"h6\"} role=\"heading\" aria-level={1}>\n {title}\n </Typography>\n {subtitle && (\n <Typography\n variant={dense ? \"caption\" : \"body2\"}\n role=\"heading\"\n aria-level={2}\n lineHeight={dense ? typography.pxToRem(15) : undefined}\n >\n {subtitle}\n </Typography>\n )}\n </Box>\n <Grid\n container\n padding={1}\n rowSpacing={dense ? 1 : 2}\n justifyContent={centered ? \"center\" : \"flex-start\"}\n >\n {children}\n </Grid>\n </Paper>\n );\n};\n","import Grid, { GridProps } from \"@mui/material/Grid\";\nimport Box from \"@mui/material/Box\";\nimport { ResponsiveStyleValue } from \"@mui/system\";\nimport { PropsWithChildren, FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils\";\n\nexport type ValueItemProps = PropsWithChildren<\n Omit<GridProps, \"item\" | \"container\"> & { bordered?: ResponsiveStyleValue<boolean> }\n>;\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n root: \"RdsValueItem-root\",\n content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {\n const borderStyle = `solid ${color} 1px`;\n const noBorder = \"none\";\n\n if (!bordered) {\n return undefined;\n }\n\n if (Array.isArray(bordered)) {\n return bordered.map((b) => (b ? borderStyle : noBorder));\n }\n\n if (typeof bordered === \"object\") {\n const style: Record<string, string | undefined> = {};\n Object.entries(bordered).forEach(([key, value]) => {\n style[key] = value ? borderStyle : noBorder;\n });\n return style;\n }\n\n return borderStyle;\n};\n\nexport const ValueItem: ValueItemComponent = ({\n children,\n bordered = true,\n ...rest\n}: ValueItemProps) => {\n const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n const borderLeft = resolveBorderStyle(bordered, defaultColor);\n return (\n <Grid item className={valueItemClasses.root} {...rest}>\n <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n {children}\n </Box>\n </Grid>\n );\n};\n","import Grid from \"@mui/material/Grid\";\nimport { newBreakpointsCounter } from \"../utils/breakpoints\";\nimport { ValueBoolean } from \"../value-boolean\";\nimport { ValueDatetime } from \"../value-datetime\";\nimport { ValueText } from \"../value-text\";\nimport { GroupValueCard } from \"../group-value-card\";\nimport { ValueItem } from \"../value-item\";\nimport {\n ArrayGroupField,\n ArrayInstanceType,\n BasicModelInstance,\n GroupField,\n GroupInstanceType,\n Model,\n ModelField,\n} from \"../generators/generators.model\";\nimport { GridColDef, DataGrid } from \"@mui/x-data-grid\";\n\ninterface SingleDetailValueFactoryOptions {\n dense?: boolean;\n}\n\nconst singleDetailValueFactory = <T extends BasicModelInstance>(\n field: ModelField,\n instance: T | GroupInstanceType,\n { dense }: SingleDetailValueFactoryOptions = {},\n) => {\n const { id, name, type } = field;\n const value = instance[id];\n if (type === \"boolean\") {\n return <ValueBoolean dense={dense} label={name} value={value as boolean} />;\n } else if (type === \"date\" || type === \"time\" || type === \"datetime\") {\n return <ValueDatetime dense={dense} label={name} value={value as Date} format={field.format} />;\n }\n\n if (typeof value === \"object\" && !Array.isArray(value)) {\n return <ValueText dense={dense} label={name} value={JSON.stringify(value)} />;\n }\n return <ValueText dense={dense} label={name} value={value?.toString()} />;\n};\n\ninterface ObjectArrayGroupProps {\n field: ArrayGroupField;\n instance: ArrayInstanceType;\n dense?: boolean;\n}\n\nconst ObjectArrayGroup = ({\n field: { name, description, value },\n instance,\n dense,\n}: ObjectArrayGroupProps) => {\n const columns: GridColDef[] = [{ field: \"id\", headerName: \"ID\", width: 70 }];\n\n value.forEach((column) => {\n columns.push({\n field: column.id,\n headerName: column.name,\n });\n });\n\n const rows = instance.map((f, id) => ({\n id,\n ...f,\n }));\n\n return (\n <GroupValueCard title={name} subtitle={description} dense={dense}>\n <Grid item xs={12}>\n <DataGrid\n rows={rows}\n columns={columns}\n density={dense ? \"compact\" : \"standard\"}\n disableRowSelectionOnClick\n pageSizeOptions={[5]}\n initialState={{\n pagination: {\n paginationModel: {\n pageSize: 5,\n },\n },\n }}\n sx={{ height: 400 }}\n />\n </Grid>\n </GroupValueCard>\n );\n};\n\ninterface ObjectDetailGroupProps {\n field: GroupField;\n instance: GroupInstanceType;\n dense?: boolean;\n}\n\nconst ObjectDetailGroup = ({\n field: { name, description, value },\n instance,\n dense,\n}: ObjectDetailGroupProps) => {\n const breakpointsCounter = newBreakpointsCounter();\n\n return (\n <GroupValueCard title={name} subtitle={description} dense={dense}>\n {value.map((field) => {\n const { id, xs, sm, md, lg, xl } = field;\n const bordered = breakpointsCounter.increment(field);\n return (\n <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n {singleDetailValueFactory(field, instance, { dense })}\n </ValueItem>\n );\n })}\n </GroupValueCard>\n );\n};\n\nexport interface ObjectDetailsProps<T extends BasicModelInstance> {\n model: Model;\n dense?: boolean;\n instance: T;\n}\n\nexport const ObjectDetails = <T extends BasicModelInstance>({\n model,\n instance,\n dense,\n}: ObjectDetailsProps<T>) => {\n const breakpointsCounter = newBreakpointsCounter();\n return (\n <Grid container spacing={dense ? 1 : 2}>\n {model.fields.map((field) => {\n const { id, type, xs = 3, sm = 0, md = 0, lg = 0, xl = 0 } = field;\n\n if (type === \"group\") {\n breakpointsCounter.increment({ xs: 12 });\n return (\n <Grid item key={id} xs={12}>\n <ObjectDetailGroup\n field={field}\n instance={instance[id] as GroupInstanceType}\n dense={dense}\n />\n </Grid>\n );\n }\n\n if (type === \"group[]\") {\n breakpointsCounter.increment({ xs: 12 });\n return (\n <Grid item key={id} xs={12}>\n <ObjectArrayGroup field={field} instance={instance[id] as any} dense={dense} />\n </Grid>\n );\n }\n\n const bordered = breakpointsCounter.increment(field);\n return (\n <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n {singleDetailValueFactory(field, instance, { dense })}\n </ValueItem>\n );\n })}\n </Grid>\n );\n};\n"],"names":["newBreakpointsCounter","breakpoint","calculateBreakpointIncrement","breakpointsCounter","key","value","initialValue","xs","sm","md","lg","xl","increment","smInc","mdInc","lgInc","xlInc","this","ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","jsx","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","useEditableValueDisplay","onEdit","isEditing","setIsEditing","useState","editValue","setEditValue","cancelEdit","startEdit","submitEdit","ValueEditButton","dense","typography","useTheme","IconButton","ml","EditIcon","pxToRem","getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","id","Box","width","lineHeight","undefined","Typography","role","Tooltip","title","placement","enterDelay","ValueBoolean","placeholder","editable","iconSx","h6","h5","display","alignItems","Switch","checked","onChange","e","target","jsxs","CloseIcon","ValueDatetime","valueProp","format","fmt","editInputType","EditPickerComponent","DateTimePicker","TimePicker","DatePicker","flexDirection","newValue","slots","textField","params","TextField","InputProps","endAdornment","_Fragment","Fragment","marginY","noWrap","ValueText","editInputRef","useRef","toString","editKeyPressListener","useEffect","current","addEventListener","removeEventListener","inputRef","useGetDefaultThemeColor","lightWeight","darkWeight","palette","mode","grey","GroupValueCard","subtitle","centered","defaultColor","Paper","paddingBottom","bgcolor","px","py","Grid","container","padding","rowSpacing","justifyContent","valueItemClasses","ValueItem","bordered","rest","borderLeft","borderStyle","noBorder","Array","isArray","map","b","style","Object","entries","forEach","resolveBorderStyle","item","className","singleDetailValueFactory","field","instance","name","type","JSON","stringify","ObjectArrayGroup","description","columns","headerName","column","push","rows","f","DataGrid","density","disableRowSelectionOnClick","pageSizeOptions","initialState","pagination","paginationModel","pageSize","height","ObjectDetailGroup","model","spacing","fields"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/utils/breakpoints.ts","../../../src/value-base/value-edit.tsx","../../../src/value-content/value-content.tsx","../../../src/value-boolean/value-boolean.tsx","../../../src/value-base/value-displays.types.ts","../../../src/value-datetime/value-datetime.tsx","../../../src/value-text/value-text.tsx","../../../src/utils/theme.ts","../../../src/group-value-card/group-value-card.tsx","../../../src/value-item/value-item.tsx","../../../src/object-details/object-details.tsx"],"sourcesContent":["import { ResponsiveStyleValue } from \"@mui/system\";\n\ninterface Breakpoints {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n}\n\ninterface BreakpointsCounter extends Breakpoints {\n increment(breakpoints: Partial<Breakpoints>): ResponsiveStyleValue<boolean>;\n}\n\nexport const newBreakpointsCounter = (breakpoint = 12): BreakpointsCounter => {\n const calculateBreakpointIncrement = (\n breakpointsCounter: BreakpointsCounter,\n key: keyof Breakpoints,\n value: number,\n ): boolean => {\n const initialValue = breakpointsCounter[key];\n breakpointsCounter[key] += value;\n if (breakpointsCounter[key] > breakpoint) {\n breakpointsCounter[key] = value;\n return false;\n }\n\n if (breakpointsCounter[key] == breakpoint) {\n breakpointsCounter[key] = 0;\n }\n\n return initialValue > 0;\n };\n\n return {\n xs: 0,\n sm: 0,\n md: 0,\n lg: 0,\n xl: 0,\n increment: function ({\n xs = 0,\n sm = 0,\n md = 0,\n lg = 0,\n xl = 0,\n }): ResponsiveStyleValue<boolean> {\n const smInc = sm || xs;\n const mdInc = md || smInc;\n const lgInc = lg || mdInc;\n const xlInc = xl || lgInc;\n\n return {\n xs: calculateBreakpointIncrement(this, \"xs\", xs),\n sm: calculateBreakpointIncrement(this, \"sm\", smInc),\n md: calculateBreakpointIncrement(this, \"md\", mdInc),\n lg: calculateBreakpointIncrement(this, \"lg\", lgInc),\n xl: calculateBreakpointIncrement(this, \"xl\", xlInc),\n };\n },\n };\n};\n","import { useState } from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Button from \"@mui/material/Button\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport EditIcon from \"@mui/icons-material/Edit\";\n\nexport interface ValueEditButtonsProps {\n onClickCancel: () => void;\n onClickSubmit: () => void;\n sx?: SxProps<Theme>;\n}\n\nexport const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {\n return (\n <InputAdornment position=\"end\" sx={sx}>\n <Button\n variant=\"contained\"\n size=\"small\"\n color=\"error\"\n aria-label=\"cancel button\"\n startIcon={<ClearIcon sx={{ fontSize: 12 }} />}\n onClick={onClickCancel}\n sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}\n />\n <Button\n variant=\"contained\"\n size=\"small\"\n color=\"primary\"\n aria-label=\"submit button\"\n startIcon={<CheckIcon sx={{ fontSize: 12 }} />}\n onClick={onClickSubmit}\n sx={{ paddingRight: 0, minWidth: 0 }}\n />\n </InputAdornment>\n );\n};\n\n/**\n * Hook to manage the editing behaviour\n */\nexport const useEditableValueDisplay = <T,>(\n initialValue: T | undefined,\n onEdit: (value?: T) => void,\n) => {\n const [isEditing, setIsEditing] = useState(false);\n const [editValue, setEditValue] = useState<T | undefined>(initialValue);\n\n const cancelEdit = () => {\n setIsEditing(false);\n setEditValue(initialValue);\n };\n const startEdit = () => {\n setIsEditing(true);\n };\n\n const submitEdit = () => {\n onEdit(editValue);\n cancelEdit();\n };\n\n return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };\n};\n\nexport interface ValueEditButtonProps {\n dense?: boolean;\n onClick: () => void;\n}\n\nexport const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {\n const { typography } = useTheme();\n return (\n <IconButton\n size=\"small\"\n onClick={onClick}\n sx={{ ml: dense ? 0.5 : 1 }}\n aria-label=\"edit button\"\n >\n <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />\n </IconButton>\n );\n};\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n /**\n * Name of the displayed value\n */\n label: string;\n\n /**\n * If true, the label will not be shown\n */\n hideLabel?: boolean;\n\n /**\n * If defined, a tooltip is going to be added arround the children;\n */\n tooltip?: string;\n\n /**\n * Timeout before the tooltip appears when the user hovers the value\n */\n tooltipEnterDelay?: number;\n\n /**\n * Component that's going to be renderd under the label\n */\n children: React.ReactElement<any, any>;\n\n /**\n * The value has to be displayed as compact or not.\n * False by default\n */\n dense?: boolean;\n\n /**\n * Custom styles for the root component\n */\n sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n label,\n hideLabel,\n tooltip,\n tooltipEnterDelay = 2000,\n children,\n dense,\n sx,\n}: ValueContentProps) => {\n const { typography } = useTheme();\n const id = getValueContentLabelId(label);\n\n return (\n <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n {!hideLabel && (\n <Typography\n variant={dense ? \"caption\" : \"subtitle2\"}\n role=\"label\"\n id={id}\n lineHeight={dense ? typography.pxToRem(15) : undefined}\n >\n {label}\n </Typography>\n )}\n {tooltip ? (\n <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n {children}\n </Tooltip>\n ) : (\n children\n )}\n </Box>\n );\n};\n","import { useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Switch from \"@mui/material/Switch\";\nimport Typography from \"@mui/material/Typography\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport {\n BaseValueProps,\n DefaultPlaceholder,\n EditableValueProps,\n useEditableValueDisplay,\n ValueEditButton,\n ValueEditButtons,\n} from \"../value-base\";\nimport { ValueContent, getValueContentLabelId } from \"../value-content\";\n\nexport type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;\n\n/**\n * Displays a boolean value with a label\n */\nexport const ValueBoolean = ({\n label,\n value,\n placeholder = DefaultPlaceholder,\n editable,\n dense,\n onEdit = () => null,\n}: ValueBooleanProps) => {\n const id = getValueContentLabelId(label);\n const { typography } = useTheme();\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(value, onEdit);\n\n const iconSx = { fontSize: dense ? typography.h6.fontSize : typography.h5.fontSize };\n\n return (\n <ValueContent label={label} dense={dense}>\n {isEditing ? (\n <Box display=\"flex\" alignItems=\"center\">\n <Switch\n size={dense ? \"small\" : \"medium\"}\n checked={editValue}\n onChange={(e) => setEditValue(e.target.checked)}\n />\n <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n </Box>\n ) : (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n aria-labelledby={id}\n role=\"checkbox\"\n aria-checked={value}\n >\n {value === undefined ? (\n <Typography variant=\"h5\">{placeholder}</Typography>\n ) : value ? (\n <CheckIcon color=\"success\" sx={iconSx} />\n ) : (\n <CloseIcon color=\"error\" sx={iconSx} />\n )}\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Box>\n )}\n </ValueContent>\n );\n};\n","export interface BaseValueProps<T> {\n /**\n * Name of the displayed value\n */\n label: string;\n\n /**\n * Value displayed\n */\n value?: T;\n\n /**\n * String rendered if value is undefined\n */\n placeholder?: string;\n\n /**\n * The value has to be displayed as compact or not.\n * False by default\n */\n dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n /**\n * This field can be edited or not\n */\n editable?: boolean;\n\n /**\n * Callback executed when the value is edited\n */\n onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n","import Box from \"@mui/material/Box\";\nimport TextField from \"@mui/material/TextField\";\nimport Typography from \"@mui/material/Typography\";\nimport { format } from \"date-fns\";\nimport { BaseValueProps, DefaultPlaceholder, EditableValueProps } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\nimport { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from \"../value-base\";\nimport { DatePicker } from \"@mui/x-date-pickers/DatePicker\";\nimport { DateTimePicker } from \"@mui/x-date-pickers/DateTimePicker\";\nimport { TimePicker } from \"@mui/x-date-pickers/TimePicker\";\n\nexport type EditInputType = \"datetime\" | \"date\" | \"time\";\n\nexport interface ValueDatetimeProps extends BaseValueProps<Date>, EditableValueProps<Date> {\n /**\n * Datetime format\n */\n format: string;\n\n /**\n * Edit input type\n */\n editInputType?: EditInputType;\n}\n\n/**\n * Displays a formated datetime with a label\n */\nexport const ValueDatetime = ({\n label,\n value: valueProp,\n format: fmt,\n placeholder = DefaultPlaceholder,\n editable,\n editInputType = \"datetime\",\n dense,\n onEdit = () => null,\n}: ValueDatetimeProps) => {\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(valueProp, onEdit);\n const id = getValueContentLabelId(label);\n const value = (valueProp && format(valueProp, fmt)) || placeholder;\n\n const EditPickerComponent =\n editInputType === \"datetime\"\n ? DateTimePicker\n : editInputType === \"time\"\n ? TimePicker\n : DatePicker;\n\n return (\n <ValueContent\n label={label}\n hideLabel={isEditing}\n tooltip={value}\n dense={dense}\n sx={{ display: \"flex\", flexDirection: \"column\" }}\n >\n {isEditing ? (\n <EditPickerComponent\n value={editValue}\n format={fmt}\n label={label}\n onChange={(newValue) => setEditValue(newValue ? newValue : undefined)}\n slots={{\n textField: (params) => (\n <TextField\n {...params}\n size=\"small\"\n InputProps={{\n ...params.InputProps,\n endAdornment: (\n <>\n {params.InputProps?.endAdornment}\n <ValueEditButtons\n onClickCancel={cancelEdit}\n onClickSubmit={submitEdit}\n sx={{ ml: 2 }}\n />\n </>\n ),\n sx: { marginY: !dense ? 1 : 0.2 },\n }}\n />\n ),\n }}\n />\n ) : (\n <Box display=\"flex\" alignItems=\"center\">\n <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n {value}\n </Typography>\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Box>\n )}\n </ValueContent>\n );\n};\n","import Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport Box from \"@mui/material/Box\";\nimport { useEffect, useRef } from \"react\";\nimport {\n BaseValueProps,\n DefaultPlaceholder,\n EditableValueProps,\n useEditableValueDisplay,\n ValueEditButton,\n ValueEditButtons,\n} from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;\n\n/**\n * Displays a string value with a label\n */\nexport const ValueText = ({\n label,\n value: valueProp,\n placeholder = DefaultPlaceholder,\n editable,\n dense,\n onEdit = () => null,\n}: ValueTextProps) => {\n const editInputRef = useRef<HTMLInputElement>(null);\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(valueProp?.toString(), onEdit);\n const id = getValueContentLabelId(label);\n const value = valueProp?.toString() || placeholder;\n\n const editKeyPressListener = (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n onEdit((e.target as any).value);\n }\n };\n\n useEffect(() => {\n editInputRef.current?.addEventListener(\"keypress\", editKeyPressListener);\n return () => editInputRef.current?.removeEventListener(\"keypress\", editKeyPressListener);\n }, [editInputRef.current]);\n\n return (\n <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>\n {isEditing ? (\n <TextField\n inputRef={editInputRef}\n value={editValue}\n label={label}\n size=\"small\"\n onChange={(e) => setEditValue(e.target.value)}\n InputProps={{\n endAdornment: (\n <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n ),\n }}\n sx={{ marginY: !dense ? 1 : 0 }}\n />\n ) : (\n <Box display=\"flex\">\n <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n {value}\n </Typography>\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Box>\n )}\n </ValueContent>\n );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n lightWeight = 100,\n darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n const { palette } = useTheme();\n return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import Grid from \"@mui/material/Grid\";\nimport Paper from \"@mui/material/Paper\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { useGetDefaultThemeColor } from \"../utils\";\nimport { ValueItemElement } from \"../value-item\";\n\nexport interface GroupValueCardProps {\n title: string;\n subtitle?: string;\n centered?: boolean;\n children: ValueItemElement | ValueItemElement[];\n dense?: boolean;\n}\n\nexport const GroupValueCard = ({\n title,\n subtitle,\n centered,\n children,\n dense,\n}: GroupValueCardProps) => {\n const { typography } = useTheme();\n const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n\n return (\n <Paper\n sx={{\n paddingBottom: dense ? 0 : 1,\n }}\n >\n <Box\n bgcolor={defaultColor}\n px={dense ? 1 : 2}\n py={dense ? 0.5 : 1}\n lineHeight={dense ? 0 : undefined}\n >\n <Typography variant={dense ? \"body1\" : \"h6\"} role=\"heading\" aria-level={1}>\n {title}\n </Typography>\n {subtitle && (\n <Typography\n variant={dense ? \"caption\" : \"body2\"}\n role=\"heading\"\n aria-level={2}\n lineHeight={dense ? typography.pxToRem(15) : undefined}\n >\n {subtitle}\n </Typography>\n )}\n </Box>\n <Grid\n container\n padding={1}\n rowSpacing={dense ? 1 : 2}\n justifyContent={centered ? \"center\" : \"flex-start\"}\n >\n {children}\n </Grid>\n </Paper>\n );\n};\n","import Grid, { GridProps } from \"@mui/material/Grid\";\nimport Box from \"@mui/material/Box\";\nimport { ResponsiveStyleValue } from \"@mui/system\";\nimport { PropsWithChildren, FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils\";\n\nexport type ValueItemProps = PropsWithChildren<\n Omit<GridProps, \"item\" | \"container\"> & { bordered?: ResponsiveStyleValue<boolean> }\n>;\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n root: \"RdsValueItem-root\",\n content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {\n const borderStyle = `solid ${color} 1px`;\n const noBorder = \"none\";\n\n if (!bordered) {\n return undefined;\n }\n\n if (Array.isArray(bordered)) {\n return bordered.map((b) => (b ? borderStyle : noBorder));\n }\n\n if (typeof bordered === \"object\") {\n const style: Record<string, string | undefined> = {};\n Object.entries(bordered).forEach(([key, value]) => {\n style[key] = value ? borderStyle : noBorder;\n });\n return style;\n }\n\n return borderStyle;\n};\n\nexport const ValueItem: ValueItemComponent = ({\n children,\n bordered = true,\n ...rest\n}: ValueItemProps) => {\n const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n const borderLeft = resolveBorderStyle(bordered, defaultColor);\n return (\n <Grid item className={valueItemClasses.root} {...rest}>\n <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n {children}\n </Box>\n </Grid>\n );\n};\n","import Grid from \"@mui/material/Grid\";\nimport { newBreakpointsCounter } from \"../utils/breakpoints\";\nimport { ValueBoolean } from \"../value-boolean\";\nimport { ValueDatetime } from \"../value-datetime\";\nimport { ValueText } from \"../value-text\";\nimport { GroupValueCard } from \"../group-value-card\";\nimport { ValueItem } from \"../value-item\";\nimport {\n ArrayGroupField,\n ArrayInstanceType,\n BasicModelInstance,\n GroupField,\n GroupInstanceType,\n Model,\n ModelField,\n} from \"../generators/generators.model\";\nimport { GridColDef, DataGrid } from \"@mui/x-data-grid\";\n\ninterface SingleDetailValueFactoryOptions {\n dense?: boolean;\n}\n\nconst singleDetailValueFactory = <T extends BasicModelInstance>(\n field: ModelField,\n instance: T | GroupInstanceType,\n { dense }: SingleDetailValueFactoryOptions = {},\n) => {\n const { id, name, type } = field;\n const value = instance[id];\n if (type === \"boolean\") {\n return <ValueBoolean dense={dense} label={name} value={value as boolean} />;\n } else if (type === \"date\" || type === \"time\" || type === \"datetime\") {\n return <ValueDatetime dense={dense} label={name} value={value as Date} format={field.format} />;\n }\n\n if (typeof value === \"object\" && !Array.isArray(value)) {\n return <ValueText dense={dense} label={name} value={JSON.stringify(value)} />;\n }\n return <ValueText dense={dense} label={name} value={value?.toString()} />;\n};\n\ninterface ObjectArrayGroupProps {\n field: ArrayGroupField;\n instance: ArrayInstanceType;\n dense?: boolean;\n}\n\nconst ObjectArrayGroup = ({\n field: { name, description, value },\n instance,\n dense,\n}: ObjectArrayGroupProps) => {\n const columns: GridColDef[] = [{ field: \"id\", headerName: \"ID\", width: 70 }];\n\n value.forEach((column) => {\n columns.push({\n field: column.id,\n headerName: column.name,\n });\n });\n\n const rows = instance.map((f, id) => ({\n id,\n ...f,\n }));\n\n return (\n <GroupValueCard title={name} subtitle={description} dense={dense}>\n <Grid item xs={12}>\n <DataGrid\n rows={rows}\n columns={columns}\n density={dense ? \"compact\" : \"standard\"}\n disableRowSelectionOnClick\n pageSizeOptions={[5]}\n initialState={{\n pagination: {\n paginationModel: {\n pageSize: 5,\n },\n },\n }}\n sx={{ height: 400 }}\n />\n </Grid>\n </GroupValueCard>\n );\n};\n\ninterface ObjectDetailGroupProps {\n field: GroupField;\n instance: GroupInstanceType;\n dense?: boolean;\n}\n\nconst ObjectDetailGroup = ({\n field: { name, description, value },\n instance,\n dense,\n}: ObjectDetailGroupProps) => {\n const breakpointsCounter = newBreakpointsCounter();\n\n return (\n <GroupValueCard title={name} subtitle={description} dense={dense}>\n {value.map((field) => {\n const { id, xs, sm, md, lg, xl } = field;\n const bordered = breakpointsCounter.increment(field);\n return (\n <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n {singleDetailValueFactory(field, instance, { dense })}\n </ValueItem>\n );\n })}\n </GroupValueCard>\n );\n};\n\nexport interface ObjectDetailsProps<T extends BasicModelInstance> {\n model: Model;\n dense?: boolean;\n instance: T;\n}\n\nexport const ObjectDetails = <T extends BasicModelInstance>({\n model,\n instance,\n dense,\n}: ObjectDetailsProps<T>) => {\n const breakpointsCounter = newBreakpointsCounter();\n return (\n <Grid container spacing={dense ? 1 : 2}>\n {model.fields.map((field) => {\n const { id, type, xs = 3, sm = 0, md = 0, lg = 0, xl = 0 } = field;\n\n if (type === \"group\") {\n breakpointsCounter.increment({ xs: 12 });\n return (\n <Grid item key={id} xs={12}>\n <ObjectDetailGroup\n field={field}\n instance={instance[id] as GroupInstanceType}\n dense={dense}\n />\n </Grid>\n );\n }\n\n if (type === \"group[]\") {\n breakpointsCounter.increment({ xs: 12 });\n return (\n <Grid item key={id} xs={12}>\n <ObjectArrayGroup field={field} instance={instance[id] as any} dense={dense} />\n </Grid>\n );\n }\n\n const bordered = breakpointsCounter.increment(field);\n return (\n <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n {singleDetailValueFactory(field, instance, { dense })}\n </ValueItem>\n );\n })}\n </Grid>\n );\n};\n"],"names":["newBreakpointsCounter","breakpoint","calculateBreakpointIncrement","breakpointsCounter","key","value","initialValue","xs","sm","md","lg","xl","increment","smInc","mdInc","lgInc","xlInc","this","ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","jsx","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","useEditableValueDisplay","onEdit","isEditing","setIsEditing","useState","editValue","setEditValue","cancelEdit","startEdit","submitEdit","ValueEditButton","dense","typography","useTheme","IconButton","ml","EditIcon","pxToRem","getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","id","Box","width","lineHeight","undefined","Typography","role","Tooltip","title","placement","enterDelay","ValueBoolean","placeholder","editable","iconSx","h6","h5","display","alignItems","Switch","checked","onChange","e","target","jsxs","CloseIcon","ValueDatetime","valueProp","format","fmt","editInputType","EditPickerComponent","DateTimePicker","TimePicker","DatePicker","flexDirection","newValue","slots","textField","params","TextField","InputProps","endAdornment","_Fragment","Fragment","marginY","noWrap","ValueText","editInputRef","useRef","toString","editKeyPressListener","useEffect","current","addEventListener","removeEventListener","inputRef","useGetDefaultThemeColor","lightWeight","darkWeight","palette","mode","grey","GroupValueCard","subtitle","centered","defaultColor","Paper","paddingBottom","bgcolor","px","py","Grid","container","padding","rowSpacing","justifyContent","valueItemClasses","ValueItem","bordered","rest","borderLeft","borderStyle","noBorder","Array","isArray","map","b","style","Object","entries","forEach","resolveBorderStyle","item","className","singleDetailValueFactory","field","instance","name","type","JSON","stringify","ObjectArrayGroup","description","columns","headerName","column","push","rows","f","DataGrid","density","disableRowSelectionOnClick","pageSizeOptions","initialState","pagination","paginationModel","pageSize","height","ObjectDetailGroup","model","spacing","fields"],"mappings":"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"}
package/object-details/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import n from"@mui/material/Grid";import{useTheme as r}from"@mui/material/styles";import l from"@mui/material/Box";import a from"@mui/material/Switch";import o from"@mui/material/Typography";import d from"@mui/icons-material/Check";import s from"@mui/icons-material/Close";import{useState as m,useRef as c,useEffect as u}from"react";import p from"@mui/icons-material/Clear";import h from"@mui/material/Button";import g from"@mui/material/IconButton";import b from"@mui/material/InputAdornment";import f from"@mui/icons-material/Edit";import x from"@mui/material/Tooltip";import y from"@mui/material/TextField";import{format as k}from"date-fns";import{DatePicker as v}from"@mui/x-date-pickers/DatePicker";import{DateTimePicker as E}from"@mui/x-date-pickers/DateTimePicker";import{TimePicker as C}from"@mui/x-date-pickers/TimePicker";import S from"@mui/material/Paper";import{useTheme as I}from"@mui/material";import{DataGrid as z}from"@mui/x-data-grid";const R=(e=12)=>{const i=(i,t,n)=>{const r=i[t];return i[t]+=n,i[t]>e?(i[t]=n,!1):(i[t]==e&&(i[t]=0),r>0)};return{xs:0,sm:0,md:0,lg:0,xl:0,increment:function({xs:e=0,sm:t=0,md:n=0,lg:r=0,xl:l=0}){const a=t||e,o=n||a,d=r||o,s=l||d;return{xs:i(this,"xs",e),sm:i(this,"sm",a),md:i(this,"md",o),lg:i(this,"lg",d),xl:i(this,"xl",s)}}}},T=({onClickCancel:t,onClickSubmit:n,sx:r})=>e(b,{position:"end",sx:r,children:[i(h,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:i(p,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0,marginRight:1}}),i(h,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:i(d,{sx:{fontSize:12}}),onClick:n,sx:{paddingRight:0,minWidth:0}})]}),V=(e,i)=>{const[t,n]=m(!1),[r,l]=m(e),a=()=>{n(!1),l(e)};return{isEditing:t,cancelEdit:a,editValue:r,setEditValue:l,startEdit:()=>{n(!0)},submitEdit:()=>{i(r),a()}}},W=({dense:e,onClick:t})=>{const{typography:n}=r();return i(g,{size:"small",onClick:t,sx:{ml:e?.5:1},"aria-label":"edit button",children:i(f,{sx:{fontSize:n.pxToRem(e?18:24)}})})},A=e=>`label-${e.replace(/ /g,"-")}`,P=({label:t,hideLabel:n,tooltip:a,tooltipEnterDelay:d=2e3,children:s,dense:m,sx:c})=>{const{typography:u}=r(),p=A(t);return e(l,{width:1,lineHeight:m?0:void 0,sx:c,children:[!n&&i(o,{variant:m?"caption":"subtitle2",role:"label",id:p,lineHeight:m?u.pxToRem(15):void 0,children:t}),a?i(x,{title:a,placement:"top",enterDelay:d,children:s}):s]})},w=({label:t,value:n,placeholder:m="-",editable:c,dense:u,onEdit:p=(()=>null)})=>{const h=A(t),{typography:g}=r(),{isEditing:b,editValue:f,startEdit:x,cancelEdit:y,setEditValue:k,submitEdit:v}=V(n,p),E={fontSize:u?g.h6.fontSize:g.h5.fontSize};return i(P,{label:t,dense:u,children:e(l,b?{display:"flex",alignItems:"center",children:[i(a,{size:u?"small":"medium",checked:f,onChange:e=>k(e.target.checked)}),i(T,{onClickCancel:y,onClickSubmit:v})]}:{display:"flex",alignItems:"center","aria-labelledby":h,role:"checkbox","aria-checked":n,children:[void 0===n?i(o,{variant:"h5",children:m}):n?i(d,{color:"success",sx:E}):i(s,{color:"error",sx:E}),c&&i(W,{dense:u,onClick:x})]})})},D=({label:n,value:r,format:a,placeholder:d="-",editable:s,editInputType:m="datetime",dense:c,onEdit:u=(()=>null)})=>{const{isEditing:p,editValue:h,startEdit:g,cancelEdit:b,setEditValue:f,submitEdit:x}=V(r,u),S=A(n),I=r&&k(r,a)||d;return i(P,{label:n,hideLabel:p,tooltip:I,dense:c,sx:{display:"flex",flexDirection:"column"},children:p?i("datetime"===m?E:"time"===m?C:v,{value:h,format:a,label:n,onChange:e=>f(e||void 0),slots:{textField:n=>i(y,{...n,size:"small",InputProps:{...n.InputProps,endAdornment:e(t,{children:[n.InputProps?.endAdornment,i(T,{onClickCancel:b,onClickSubmit:x,sx:{ml:2}})]}),sx:{marginY:c?.2:1}}})}}):e(l,{display:"flex",alignItems:"center",children:[i(o,{variant:c?"body1":"h5",noWrap:!0,"aria-labelledby":S,children:I}),s&&i(W,{dense:c,onClick:g})]})})},L=({label:t,value:n,placeholder:r="-",editable:l,dense:a,onEdit:d=(()=>null)})=>{const s=c(null),{isEditing:m,editValue:p,startEdit:h,cancelEdit:g,setEditValue:b,submitEdit:f}=V(n?.toString(),d),x=A(t),k=n?.toString()||r,v=e=>{"Enter"===e.key&&d(e.target.value)};return u((()=>(s.current?.addEventListener("keypress",v),()=>s.current?.removeEventListener("keypress",v))),[s.current]),i(P,{hideLabel:m,label:t,tooltip:k,dense:a,children:m?i(y,{inputRef:s,value:p,label:t,size:"small",onChange:e=>b(e.target.value),InputProps:{endAdornment:i(T,{onClickCancel:g,onClickSubmit:f})},sx:{marginY:a?0:1}}):e(o,{variant:a?"body1":"h5",noWrap:!0,"aria-labelledby":x,children:[k,l&&i(W,{dense:a,onClick:h})]})})},j=({lightWeight:e=100,darkWeight:i=900}={})=>{const{palette:t}=I();return"light"===t.mode?t.grey[e]:t.grey[i]},N=({title:t,subtitle:a,centered:d,children:s,dense:m})=>{const{typography:c}=r(),u=j({lightWeight:200,darkWeight:800});return e(S,{sx:{paddingBottom:m?0:1},children:[e(l,{bgcolor:u,px:m?1:2,py:m?.5:1,lineHeight:m?0:void 0,children:[i(o,{variant:m?"body1":"h6",role:"heading","aria-level":1,children:t}),a&&i(o,{variant:m?"caption":"body2",role:"heading","aria-level":2,lineHeight:m?c.pxToRem(15):void 0,children:a})]}),i(n,{container:!0,padding:1,rowSpacing:m?1:2,justifyContent:d?"center":"flex-start",children:s})]})},B="RdsValueItem-root",H="RdsValueItem-content",O=({children:e,bordered:t=!0,...r})=>{const a=((e,i)=>{const t=`solid ${i} 1px`,n="none";if(e){if(Array.isArray(e))return e.map((e=>e?t:n));if("object"==typeof e){const i={};return Object.entries(e).forEach((([e,r])=>{i[e]=r?t:n})),i}return t}})(t,j({lightWeight:200,darkWeight:800}));return i(n,{item:!0,className:B,...r,children:i(l,{className:H,px:1,borderLeft:a,children:e})})},F=(e,t,{dense:n}={})=>{const{id:r,name:l,type:a}=e,o=t[r];return"boolean"===a?i(w,{dense:n,label:l,value:o}):"date"===a||"time"===a||"datetime"===a?i(D,{dense:n,label:l,value:o,format:e.format}):"object"!=typeof o||Array.isArray(o)?i(L,{dense:n,label:l,value:o?.toString()}):i(L,{dense:n,label:l,value:JSON.stringify(o)})},Y=({field:{name:e,description:t,value:r},instance:l,dense:a})=>{const o=[{field:"id",headerName:"ID",width:70}];r.forEach((e=>{o.push({field:e.id,headerName:e.name})}));const d=l.map(((e,i)=>({id:i,...e})));return i(N,{title:e,subtitle:t,dense:a,children:i(n,{item:!0,xs:12,children:i(z,{rows:d,columns:o,density:a?"compact":"standard",disableRowSelectionOnClick:!0,pageSizeOptions:[5],initialState:{pagination:{paginationModel:{pageSize:5}}},sx:{height:400}})})})},$=({field:{name:e,description:t,value:n},instance:r,dense:l})=>{const a=R();return i(N,{title:e,subtitle:t,dense:l,children:n.map((e=>{const{id:t,xs:n,sm:o,md:d,lg:s,xl:m}=e,c=a.increment(e);return i(O,{xs:n,sm:o,md:d,lg:s,xl:m,bordered:c,children:F(e,r,{dense:l})},t)}))})},G=({model:e,instance:t,dense:r})=>{const l=R();return i(n,{container:!0,spacing:r?1:2,children:e.fields.map((e=>{const{id:a,type:o,xs:d=3,sm:s=0,md:m=0,lg:c=0,xl:u=0}=e;if("group"===o)return l.increment({xs:12}),i(n,{item:!0,xs:12,children:i($,{field:e,instance:t[a],dense:r})},a);if("group[]"===o)return l.increment({xs:12}),i(n,{item:!0,xs:12,children:i(Y,{field:e,instance:t[a],dense:r})},a);const p=l.increment(e);return i(O,{xs:d,sm:s,md:m,lg:c,xl:u,bordered:p,children:F(e,t,{dense:r})},a)}))})};export{G as ObjectDetails};
1
+ import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import n from"@mui/material/Grid";import{useTheme as r}from"@mui/material/styles";import l from"@mui/material/Box";import a from"@mui/material/Switch";import o from"@mui/material/Typography";import d from"@mui/icons-material/Check";import s from"@mui/icons-material/Close";import{useState as m,useRef as c,useEffect as u}from"react";import p from"@mui/icons-material/Clear";import h from"@mui/material/Button";import g from"@mui/material/IconButton";import f from"@mui/material/InputAdornment";import x from"@mui/icons-material/Edit";import b from"@mui/material/Tooltip";import y from"@mui/material/TextField";import{format as k}from"date-fns";import{DatePicker as v}from"@mui/x-date-pickers/DatePicker";import{DateTimePicker as E}from"@mui/x-date-pickers/DateTimePicker";import{TimePicker as C}from"@mui/x-date-pickers/TimePicker";import S from"@mui/material/Paper";import{useTheme as I}from"@mui/material";import{DataGrid as z}from"@mui/x-data-grid";const R=(e=12)=>{const i=(i,t,n)=>{const r=i[t];return i[t]+=n,i[t]>e?(i[t]=n,!1):(i[t]==e&&(i[t]=0),r>0)};return{xs:0,sm:0,md:0,lg:0,xl:0,increment:function({xs:e=0,sm:t=0,md:n=0,lg:r=0,xl:l=0}){const a=t||e,o=n||a,d=r||o,s=l||d;return{xs:i(this,"xs",e),sm:i(this,"sm",a),md:i(this,"md",o),lg:i(this,"lg",d),xl:i(this,"xl",s)}}}},T=({onClickCancel:t,onClickSubmit:n,sx:r})=>e(f,{position:"end",sx:r,children:[i(h,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:i(p,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0,marginRight:1}}),i(h,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:i(d,{sx:{fontSize:12}}),onClick:n,sx:{paddingRight:0,minWidth:0}})]}),V=(e,i)=>{const[t,n]=m(!1),[r,l]=m(e),a=()=>{n(!1),l(e)};return{isEditing:t,cancelEdit:a,editValue:r,setEditValue:l,startEdit:()=>{n(!0)},submitEdit:()=>{i(r),a()}}},W=({dense:e,onClick:t})=>{const{typography:n}=r();return i(g,{size:"small",onClick:t,sx:{ml:e?.5:1},"aria-label":"edit button",children:i(x,{sx:{fontSize:n.pxToRem(e?18:24)}})})},A=e=>`label-${e.replace(/ /g,"-")}`,P=({label:t,hideLabel:n,tooltip:a,tooltipEnterDelay:d=2e3,children:s,dense:m,sx:c})=>{const{typography:u}=r(),p=A(t);return e(l,{width:1,lineHeight:m?0:void 0,sx:c,children:[!n&&i(o,{variant:m?"caption":"subtitle2",role:"label",id:p,lineHeight:m?u.pxToRem(15):void 0,children:t}),a?i(b,{title:a,placement:"top",enterDelay:d,children:s}):s]})},w=({label:t,value:n,placeholder:m="-",editable:c,dense:u,onEdit:p=(()=>null)})=>{const h=A(t),{typography:g}=r(),{isEditing:f,editValue:x,startEdit:b,cancelEdit:y,setEditValue:k,submitEdit:v}=V(n,p),E={fontSize:u?g.h6.fontSize:g.h5.fontSize};return i(P,{label:t,dense:u,children:e(l,f?{display:"flex",alignItems:"center",children:[i(a,{size:u?"small":"medium",checked:x,onChange:e=>k(e.target.checked)}),i(T,{onClickCancel:y,onClickSubmit:v})]}:{display:"flex",alignItems:"center","aria-labelledby":h,role:"checkbox","aria-checked":n,children:[void 0===n?i(o,{variant:"h5",children:m}):n?i(d,{color:"success",sx:E}):i(s,{color:"error",sx:E}),c&&i(W,{dense:u,onClick:b})]})})},D=({label:n,value:r,format:a,placeholder:d="-",editable:s,editInputType:m="datetime",dense:c,onEdit:u=(()=>null)})=>{const{isEditing:p,editValue:h,startEdit:g,cancelEdit:f,setEditValue:x,submitEdit:b}=V(r,u),S=A(n),I=r&&k(r,a)||d;return i(P,{label:n,hideLabel:p,tooltip:I,dense:c,sx:{display:"flex",flexDirection:"column"},children:p?i("datetime"===m?E:"time"===m?C:v,{value:h,format:a,label:n,onChange:e=>x(e||void 0),slots:{textField:n=>i(y,{...n,size:"small",InputProps:{...n.InputProps,endAdornment:e(t,{children:[n.InputProps?.endAdornment,i(T,{onClickCancel:f,onClickSubmit:b,sx:{ml:2}})]}),sx:{marginY:c?.2:1}}})}}):e(l,{display:"flex",alignItems:"center",children:[i(o,{variant:c?"body1":"h5",noWrap:!0,"aria-labelledby":S,children:I}),s&&i(W,{dense:c,onClick:g})]})})},L=({label:t,value:n,placeholder:r="-",editable:a,dense:d,onEdit:s=(()=>null)})=>{const m=c(null),{isEditing:p,editValue:h,startEdit:g,cancelEdit:f,setEditValue:x,submitEdit:b}=V(n?.toString(),s),k=A(t),v=n?.toString()||r,E=e=>{"Enter"===e.key&&s(e.target.value)};return u((()=>(m.current?.addEventListener("keypress",E),()=>m.current?.removeEventListener("keypress",E))),[m.current]),i(P,{hideLabel:p,label:t,tooltip:v,dense:d,children:p?i(y,{inputRef:m,value:h,label:t,size:"small",onChange:e=>x(e.target.value),InputProps:{endAdornment:i(T,{onClickCancel:f,onClickSubmit:b})},sx:{marginY:d?0:1}}):e(l,{display:"flex",children:[i(o,{variant:d?"body1":"h5",noWrap:!0,"aria-labelledby":k,children:v}),a&&i(W,{dense:d,onClick:g})]})})},j=({lightWeight:e=100,darkWeight:i=900}={})=>{const{palette:t}=I();return"light"===t.mode?t.grey[e]:t.grey[i]},N=({title:t,subtitle:a,centered:d,children:s,dense:m})=>{const{typography:c}=r(),u=j({lightWeight:200,darkWeight:800});return e(S,{sx:{paddingBottom:m?0:1},children:[e(l,{bgcolor:u,px:m?1:2,py:m?.5:1,lineHeight:m?0:void 0,children:[i(o,{variant:m?"body1":"h6",role:"heading","aria-level":1,children:t}),a&&i(o,{variant:m?"caption":"body2",role:"heading","aria-level":2,lineHeight:m?c.pxToRem(15):void 0,children:a})]}),i(n,{container:!0,padding:1,rowSpacing:m?1:2,justifyContent:d?"center":"flex-start",children:s})]})},B="RdsValueItem-root",H="RdsValueItem-content",O=({children:e,bordered:t=!0,...r})=>{const a=((e,i)=>{const t=`solid ${i} 1px`,n="none";if(e){if(Array.isArray(e))return e.map((e=>e?t:n));if("object"==typeof e){const i={};return Object.entries(e).forEach((([e,r])=>{i[e]=r?t:n})),i}return t}})(t,j({lightWeight:200,darkWeight:800}));return i(n,{item:!0,className:B,...r,children:i(l,{className:H,px:1,borderLeft:a,children:e})})},F=(e,t,{dense:n}={})=>{const{id:r,name:l,type:a}=e,o=t[r];return"boolean"===a?i(w,{dense:n,label:l,value:o}):"date"===a||"time"===a||"datetime"===a?i(D,{dense:n,label:l,value:o,format:e.format}):"object"!=typeof o||Array.isArray(o)?i(L,{dense:n,label:l,value:o?.toString()}):i(L,{dense:n,label:l,value:JSON.stringify(o)})},Y=({field:{name:e,description:t,value:r},instance:l,dense:a})=>{const o=[{field:"id",headerName:"ID",width:70}];r.forEach((e=>{o.push({field:e.id,headerName:e.name})}));const d=l.map(((e,i)=>({id:i,...e})));return i(N,{title:e,subtitle:t,dense:a,children:i(n,{item:!0,xs:12,children:i(z,{rows:d,columns:o,density:a?"compact":"standard",disableRowSelectionOnClick:!0,pageSizeOptions:[5],initialState:{pagination:{paginationModel:{pageSize:5}}},sx:{height:400}})})})},$=({field:{name:e,description:t,value:n},instance:r,dense:l})=>{const a=R();return i(N,{title:e,subtitle:t,dense:l,children:n.map((e=>{const{id:t,xs:n,sm:o,md:d,lg:s,xl:m}=e,c=a.increment(e);return i(O,{xs:n,sm:o,md:d,lg:s,xl:m,bordered:c,children:F(e,r,{dense:l})},t)}))})},G=({model:e,instance:t,dense:r})=>{const l=R();return i(n,{container:!0,spacing:r?1:2,children:e.fields.map((e=>{const{id:a,type:o,xs:d=3,sm:s=0,md:m=0,lg:c=0,xl:u=0}=e;if("group"===o)return l.increment({xs:12}),i(n,{item:!0,xs:12,children:i($,{field:e,instance:t[a],dense:r})},a);if("group[]"===o)return l.increment({xs:12}),i(n,{item:!0,xs:12,children:i(Y,{field:e,instance:t[a],dense:r})},a);const p=l.increment(e);return i(O,{xs:d,sm:s,md:m,lg:c,xl:u,bordered:p,children:F(e,t,{dense:r})},a)}))})};export{G as ObjectDetails};
2
2
  //# sourceMappingURL=index.js.map
package/object-details/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/utils/breakpoints.ts","../../src/value-base/value-edit.tsx","../../src/value-content/value-content.tsx","../../src/value-boolean/value-boolean.tsx","../../src/value-base/value-displays.types.ts","../../src/value-datetime/value-datetime.tsx","../../src/value-text/value-text.tsx","../../src/utils/theme.ts","../../src/group-value-card/group-value-card.tsx","../../src/value-item/value-item.tsx","../../src/object-details/object-details.tsx"],"sourcesContent":["import { ResponsiveStyleValue } from \"@mui/system\";\n\ninterface Breakpoints {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n}\n\ninterface BreakpointsCounter extends Breakpoints {\n increment(breakpoints: Partial<Breakpoints>): ResponsiveStyleValue<boolean>;\n}\n\nexport const newBreakpointsCounter = (breakpoint = 12): BreakpointsCounter => {\n const calculateBreakpointIncrement = (\n breakpointsCounter: BreakpointsCounter,\n key: keyof Breakpoints,\n value: number,\n ): boolean => {\n const initialValue = breakpointsCounter[key];\n breakpointsCounter[key] += value;\n if (breakpointsCounter[key] > breakpoint) {\n breakpointsCounter[key] = value;\n return false;\n }\n\n if (breakpointsCounter[key] == breakpoint) {\n breakpointsCounter[key] = 0;\n }\n\n return initialValue > 0;\n };\n\n return {\n xs: 0,\n sm: 0,\n md: 0,\n lg: 0,\n xl: 0,\n increment: function ({\n xs = 0,\n sm = 0,\n md = 0,\n lg = 0,\n xl = 0,\n }): ResponsiveStyleValue<boolean> {\n const smInc = sm || xs;\n const mdInc = md || smInc;\n const lgInc = lg || mdInc;\n const xlInc = xl || lgInc;\n\n return {\n xs: calculateBreakpointIncrement(this, \"xs\", xs),\n sm: calculateBreakpointIncrement(this, \"sm\", smInc),\n md: calculateBreakpointIncrement(this, \"md\", mdInc),\n lg: calculateBreakpointIncrement(this, \"lg\", lgInc),\n xl: calculateBreakpointIncrement(this, \"xl\", xlInc),\n };\n },\n };\n};\n","import { useState } from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Button from \"@mui/material/Button\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport EditIcon from \"@mui/icons-material/Edit\";\n\nexport interface ValueEditButtonsProps {\n onClickCancel: () => void;\n onClickSubmit: () => void;\n sx?: SxProps<Theme>;\n}\n\nexport const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {\n return (\n <InputAdornment position=\"end\" sx={sx}>\n <Button\n variant=\"contained\"\n size=\"small\"\n color=\"error\"\n aria-label=\"cancel button\"\n startIcon={<ClearIcon sx={{ fontSize: 12 }} />}\n onClick={onClickCancel}\n sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}\n />\n <Button\n variant=\"contained\"\n size=\"small\"\n color=\"primary\"\n aria-label=\"submit button\"\n startIcon={<CheckIcon sx={{ fontSize: 12 }} />}\n onClick={onClickSubmit}\n sx={{ paddingRight: 0, minWidth: 0 }}\n />\n </InputAdornment>\n );\n};\n\n/**\n * Hook to manage the editing behaviour\n */\nexport const useEditableValueDisplay = <T,>(\n initialValue: T | undefined,\n onEdit: (value?: T) => void,\n) => {\n const [isEditing, setIsEditing] = useState(false);\n const [editValue, setEditValue] = useState<T | undefined>(initialValue);\n\n const cancelEdit = () => {\n setIsEditing(false);\n setEditValue(initialValue);\n };\n const startEdit = () => {\n setIsEditing(true);\n };\n\n const submitEdit = () => {\n onEdit(editValue);\n cancelEdit();\n };\n\n return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };\n};\n\nexport interface ValueEditButtonProps {\n dense?: boolean;\n onClick: () => void;\n}\n\nexport const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {\n const { typography } = useTheme();\n return (\n <IconButton\n size=\"small\"\n onClick={onClick}\n sx={{ ml: dense ? 0.5 : 1 }}\n aria-label=\"edit button\"\n >\n <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />\n </IconButton>\n );\n};\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n /**\n * Name of the displayed value\n */\n label: string;\n\n /**\n * If true, the label will not be shown\n */\n hideLabel?: boolean;\n\n /**\n * If defined, a tooltip is going to be added arround the children;\n */\n tooltip?: string;\n\n /**\n * Timeout before the tooltip appears when the user hovers the value\n */\n tooltipEnterDelay?: number;\n\n /**\n * Component that's going to be renderd under the label\n */\n children: React.ReactElement<any, any>;\n\n /**\n * The value has to be displayed as compact or not.\n * False by default\n */\n dense?: boolean;\n\n /**\n * Custom styles for the root component\n */\n sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n label,\n hideLabel,\n tooltip,\n tooltipEnterDelay = 2000,\n children,\n dense,\n sx,\n}: ValueContentProps) => {\n const { typography } = useTheme();\n const id = getValueContentLabelId(label);\n\n return (\n <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n {!hideLabel && (\n <Typography\n variant={dense ? \"caption\" : \"subtitle2\"}\n role=\"label\"\n id={id}\n lineHeight={dense ? typography.pxToRem(15) : undefined}\n >\n {label}\n </Typography>\n )}\n {tooltip ? (\n <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n {children}\n </Tooltip>\n ) : (\n children\n )}\n </Box>\n );\n};\n","import { useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Switch from \"@mui/material/Switch\";\nimport Typography from \"@mui/material/Typography\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport {\n BaseValueProps,\n DefaultPlaceholder,\n EditableValueProps,\n useEditableValueDisplay,\n ValueEditButton,\n ValueEditButtons,\n} from \"../value-base\";\nimport { ValueContent, getValueContentLabelId } from \"../value-content\";\n\nexport type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;\n\n/**\n * Displays a boolean value with a label\n */\nexport const ValueBoolean = ({\n label,\n value,\n placeholder = DefaultPlaceholder,\n editable,\n dense,\n onEdit = () => null,\n}: ValueBooleanProps) => {\n const id = getValueContentLabelId(label);\n const { typography } = useTheme();\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(value, onEdit);\n\n const iconSx = { fontSize: dense ? typography.h6.fontSize : typography.h5.fontSize };\n\n return (\n <ValueContent label={label} dense={dense}>\n {isEditing ? (\n <Box display=\"flex\" alignItems=\"center\">\n <Switch\n size={dense ? \"small\" : \"medium\"}\n checked={editValue}\n onChange={(e) => setEditValue(e.target.checked)}\n />\n <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n </Box>\n ) : (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n aria-labelledby={id}\n role=\"checkbox\"\n aria-checked={value}\n >\n {value === undefined ? (\n <Typography variant=\"h5\">{placeholder}</Typography>\n ) : value ? (\n <CheckIcon color=\"success\" sx={iconSx} />\n ) : (\n <CloseIcon color=\"error\" sx={iconSx} />\n )}\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Box>\n )}\n </ValueContent>\n );\n};\n","export interface BaseValueProps<T> {\n /**\n * Name of the displayed value\n */\n label: string;\n\n /**\n * Value displayed\n */\n value?: T;\n\n /**\n * String rendered if value is undefined\n */\n placeholder?: string;\n\n /**\n * The value has to be displayed as compact or not.\n * False by default\n */\n dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n /**\n * This field can be edited or not\n */\n editable?: boolean;\n\n /**\n * Callback executed when the value is edited\n */\n onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n","import Box from \"@mui/material/Box\";\nimport TextField from \"@mui/material/TextField\";\nimport Typography from \"@mui/material/Typography\";\nimport { format } from \"date-fns\";\nimport { BaseValueProps, DefaultPlaceholder, EditableValueProps } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\nimport { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from \"../value-base\";\nimport { DatePicker } from \"@mui/x-date-pickers/DatePicker\";\nimport { DateTimePicker } from \"@mui/x-date-pickers/DateTimePicker\";\nimport { TimePicker } from \"@mui/x-date-pickers/TimePicker\";\n\nexport type EditInputType = \"datetime\" | \"date\" | \"time\";\n\nexport interface ValueDatetimeProps extends BaseValueProps<Date>, EditableValueProps<Date> {\n /**\n * Datetime format\n */\n format: string;\n\n /**\n * Edit input type\n */\n editInputType?: EditInputType;\n}\n\n/**\n * Displays a formated datetime with a label\n */\nexport const ValueDatetime = ({\n label,\n value: valueProp,\n format: fmt,\n placeholder = DefaultPlaceholder,\n editable,\n editInputType = \"datetime\",\n dense,\n onEdit = () => null,\n}: ValueDatetimeProps) => {\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(valueProp, onEdit);\n const id = getValueContentLabelId(label);\n const value = (valueProp && format(valueProp, fmt)) || placeholder;\n\n const EditPickerComponent =\n editInputType === \"datetime\"\n ? DateTimePicker\n : editInputType === \"time\"\n ? TimePicker\n : DatePicker;\n\n return (\n <ValueContent\n label={label}\n hideLabel={isEditing}\n tooltip={value}\n dense={dense}\n sx={{ display: \"flex\", flexDirection: \"column\" }}\n >\n {isEditing ? (\n <EditPickerComponent\n value={editValue}\n format={fmt}\n label={label}\n onChange={(newValue) => setEditValue(newValue ? newValue : undefined)}\n slots={{\n textField: (params) => (\n <TextField\n {...params}\n size=\"small\"\n InputProps={{\n ...params.InputProps,\n endAdornment: (\n <>\n {params.InputProps?.endAdornment}\n <ValueEditButtons\n onClickCancel={cancelEdit}\n onClickSubmit={submitEdit}\n sx={{ ml: 2 }}\n />\n </>\n ),\n sx: { marginY: !dense ? 1 : 0.2 },\n }}\n />\n ),\n }}\n />\n ) : (\n <Box display=\"flex\" alignItems=\"center\">\n <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n {value}\n </Typography>\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Box>\n )}\n </ValueContent>\n );\n};\n","import Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport { useEffect, useRef } from \"react\";\nimport {\n BaseValueProps,\n DefaultPlaceholder,\n EditableValueProps,\n useEditableValueDisplay,\n ValueEditButton,\n ValueEditButtons,\n} from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;\n\n/**\n * Displays a string value with a label\n */\nexport const ValueText = ({\n label,\n value: valueProp,\n placeholder = DefaultPlaceholder,\n editable,\n dense,\n onEdit = () => null,\n}: ValueTextProps) => {\n const editInputRef = useRef<HTMLInputElement>(null);\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(valueProp?.toString(), onEdit);\n const id = getValueContentLabelId(label);\n const value = valueProp?.toString() || placeholder;\n\n const editKeyPressListener = (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n onEdit((e.target as any).value);\n }\n };\n\n useEffect(() => {\n editInputRef.current?.addEventListener(\"keypress\", editKeyPressListener);\n return () => editInputRef.current?.removeEventListener(\"keypress\", editKeyPressListener);\n }, [editInputRef.current]);\n\n return (\n <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>\n {isEditing ? (\n <TextField\n inputRef={editInputRef}\n value={editValue}\n label={label}\n size=\"small\"\n onChange={(e) => setEditValue(e.target.value)}\n InputProps={{\n endAdornment: (\n <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n ),\n }}\n sx={{ marginY: !dense ? 1 : 0 }}\n />\n ) : (\n <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n {value}\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Typography>\n )}\n </ValueContent>\n );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n lightWeight = 100,\n darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n const { palette } = useTheme();\n return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import Grid from \"@mui/material/Grid\";\nimport Paper from \"@mui/material/Paper\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { useGetDefaultThemeColor } from \"../utils\";\nimport { ValueItemElement } from \"../value-item\";\n\nexport interface GroupValueCardProps {\n title: string;\n subtitle?: string;\n centered?: boolean;\n children: ValueItemElement | ValueItemElement[];\n dense?: boolean;\n}\n\nexport const GroupValueCard = ({\n title,\n subtitle,\n centered,\n children,\n dense,\n}: GroupValueCardProps) => {\n const { typography } = useTheme();\n const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n\n return (\n <Paper\n sx={{\n paddingBottom: dense ? 0 : 1,\n }}\n >\n <Box\n bgcolor={defaultColor}\n px={dense ? 1 : 2}\n py={dense ? 0.5 : 1}\n lineHeight={dense ? 0 : undefined}\n >\n <Typography variant={dense ? \"body1\" : \"h6\"} role=\"heading\" aria-level={1}>\n {title}\n </Typography>\n {subtitle && (\n <Typography\n variant={dense ? \"caption\" : \"body2\"}\n role=\"heading\"\n aria-level={2}\n lineHeight={dense ? typography.pxToRem(15) : undefined}\n >\n {subtitle}\n </Typography>\n )}\n </Box>\n <Grid\n container\n padding={1}\n rowSpacing={dense ? 1 : 2}\n justifyContent={centered ? \"center\" : \"flex-start\"}\n >\n {children}\n </Grid>\n </Paper>\n );\n};\n","import Grid, { GridProps } from \"@mui/material/Grid\";\nimport Box from \"@mui/material/Box\";\nimport { ResponsiveStyleValue } from \"@mui/system\";\nimport { PropsWithChildren, FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils\";\n\nexport type ValueItemProps = PropsWithChildren<\n Omit<GridProps, \"item\" | \"container\"> & { bordered?: ResponsiveStyleValue<boolean> }\n>;\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n root: \"RdsValueItem-root\",\n content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {\n const borderStyle = `solid ${color} 1px`;\n const noBorder = \"none\";\n\n if (!bordered) {\n return undefined;\n }\n\n if (Array.isArray(bordered)) {\n return bordered.map((b) => (b ? borderStyle : noBorder));\n }\n\n if (typeof bordered === \"object\") {\n const style: Record<string, string | undefined> = {};\n Object.entries(bordered).forEach(([key, value]) => {\n style[key] = value ? borderStyle : noBorder;\n });\n return style;\n }\n\n return borderStyle;\n};\n\nexport const ValueItem: ValueItemComponent = ({\n children,\n bordered = true,\n ...rest\n}: ValueItemProps) => {\n const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n const borderLeft = resolveBorderStyle(bordered, defaultColor);\n return (\n <Grid item className={valueItemClasses.root} {...rest}>\n <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n {children}\n </Box>\n </Grid>\n );\n};\n","import Grid from \"@mui/material/Grid\";\nimport { newBreakpointsCounter } from \"../utils/breakpoints\";\nimport { ValueBoolean } from \"../value-boolean\";\nimport { ValueDatetime } from \"../value-datetime\";\nimport { ValueText } from \"../value-text\";\nimport { GroupValueCard } from \"../group-value-card\";\nimport { ValueItem } from \"../value-item\";\nimport {\n ArrayGroupField,\n ArrayInstanceType,\n BasicModelInstance,\n GroupField,\n GroupInstanceType,\n Model,\n ModelField,\n} from \"../generators/generators.model\";\nimport { GridColDef, DataGrid } from \"@mui/x-data-grid\";\n\ninterface SingleDetailValueFactoryOptions {\n dense?: boolean;\n}\n\nconst singleDetailValueFactory = <T extends BasicModelInstance>(\n field: ModelField,\n instance: T | GroupInstanceType,\n { dense }: SingleDetailValueFactoryOptions = {},\n) => {\n const { id, name, type } = field;\n const value = instance[id];\n if (type === \"boolean\") {\n return <ValueBoolean dense={dense} label={name} value={value as boolean} />;\n } else if (type === \"date\" || type === \"time\" || type === \"datetime\") {\n return <ValueDatetime dense={dense} label={name} value={value as Date} format={field.format} />;\n }\n\n if (typeof value === \"object\" && !Array.isArray(value)) {\n return <ValueText dense={dense} label={name} value={JSON.stringify(value)} />;\n }\n return <ValueText dense={dense} label={name} value={value?.toString()} />;\n};\n\ninterface ObjectArrayGroupProps {\n field: ArrayGroupField;\n instance: ArrayInstanceType;\n dense?: boolean;\n}\n\nconst ObjectArrayGroup = ({\n field: { name, description, value },\n instance,\n dense,\n}: ObjectArrayGroupProps) => {\n const columns: GridColDef[] = [{ field: \"id\", headerName: \"ID\", width: 70 }];\n\n value.forEach((column) => {\n columns.push({\n field: column.id,\n headerName: column.name,\n });\n });\n\n const rows = instance.map((f, id) => ({\n id,\n ...f,\n }));\n\n return (\n <GroupValueCard title={name} subtitle={description} dense={dense}>\n <Grid item xs={12}>\n <DataGrid\n rows={rows}\n columns={columns}\n density={dense ? \"compact\" : \"standard\"}\n disableRowSelectionOnClick\n pageSizeOptions={[5]}\n initialState={{\n pagination: {\n paginationModel: {\n pageSize: 5,\n },\n },\n }}\n sx={{ height: 400 }}\n />\n </Grid>\n </GroupValueCard>\n );\n};\n\ninterface ObjectDetailGroupProps {\n field: GroupField;\n instance: GroupInstanceType;\n dense?: boolean;\n}\n\nconst ObjectDetailGroup = ({\n field: { name, description, value },\n instance,\n dense,\n}: ObjectDetailGroupProps) => {\n const breakpointsCounter = newBreakpointsCounter();\n\n return (\n <GroupValueCard title={name} subtitle={description} dense={dense}>\n {value.map((field) => {\n const { id, xs, sm, md, lg, xl } = field;\n const bordered = breakpointsCounter.increment(field);\n return (\n <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n {singleDetailValueFactory(field, instance, { dense })}\n </ValueItem>\n );\n })}\n </GroupValueCard>\n );\n};\n\nexport interface ObjectDetailsProps<T extends BasicModelInstance> {\n model: Model;\n dense?: boolean;\n instance: T;\n}\n\nexport const ObjectDetails = <T extends BasicModelInstance>({\n model,\n instance,\n dense,\n}: ObjectDetailsProps<T>) => {\n const breakpointsCounter = newBreakpointsCounter();\n return (\n <Grid container spacing={dense ? 1 : 2}>\n {model.fields.map((field) => {\n const { id, type, xs = 3, sm = 0, md = 0, lg = 0, xl = 0 } = field;\n\n if (type === \"group\") {\n breakpointsCounter.increment({ xs: 12 });\n return (\n <Grid item key={id} xs={12}>\n <ObjectDetailGroup\n field={field}\n instance={instance[id] as GroupInstanceType}\n dense={dense}\n />\n </Grid>\n );\n }\n\n if (type === \"group[]\") {\n breakpointsCounter.increment({ xs: 12 });\n return (\n <Grid item key={id} xs={12}>\n <ObjectArrayGroup field={field} instance={instance[id] as any} dense={dense} />\n </Grid>\n );\n }\n\n const bordered = breakpointsCounter.increment(field);\n return (\n <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n {singleDetailValueFactory(field, instance, { dense })}\n </ValueItem>\n );\n })}\n </Grid>\n );\n};\n"],"names":["newBreakpointsCounter","breakpoint","calculateBreakpointIncrement","breakpointsCounter","key","value","initialValue","xs","sm","md","lg","xl","increment","smInc","mdInc","lgInc","xlInc","this","ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","useEditableValueDisplay","onEdit","isEditing","setIsEditing","useState","editValue","setEditValue","cancelEdit","startEdit","submitEdit","ValueEditButton","dense","typography","useTheme","IconButton","ml","EditIcon","pxToRem","getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","id","Box","width","lineHeight","undefined","Typography","role","Tooltip","title","placement","enterDelay","ValueBoolean","placeholder","editable","iconSx","h6","h5","display","alignItems","Switch","checked","onChange","e","target","CloseIcon","ValueDatetime","valueProp","format","fmt","editInputType","flexDirection","DateTimePicker","TimePicker","DatePicker","newValue","slots","textField","params","TextField","InputProps","endAdornment","_Fragment","marginY","noWrap","ValueText","editInputRef","useRef","toString","editKeyPressListener","useEffect","current","addEventListener","removeEventListener","inputRef","useGetDefaultThemeColor","lightWeight","darkWeight","palette","mode","grey","GroupValueCard","subtitle","centered","defaultColor","Paper","paddingBottom","bgcolor","px","py","Grid","container","padding","rowSpacing","justifyContent","valueItemClasses","ValueItem","bordered","rest","borderLeft","borderStyle","noBorder","Array","isArray","map","b","style","Object","entries","forEach","resolveBorderStyle","item","className","singleDetailValueFactory","field","instance","name","type","JSON","stringify","ObjectArrayGroup","description","columns","headerName","column","push","rows","f","DataGrid","density","disableRowSelectionOnClick","pageSizeOptions","initialState","pagination","paginationModel","pageSize","height","ObjectDetailGroup","ObjectDetails","model","spacing","fields"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../src/utils/breakpoints.ts","../../src/value-base/value-edit.tsx","../../src/value-content/value-content.tsx","../../src/value-boolean/value-boolean.tsx","../../src/value-base/value-displays.types.ts","../../src/value-datetime/value-datetime.tsx","../../src/value-text/value-text.tsx","../../src/utils/theme.ts","../../src/group-value-card/group-value-card.tsx","../../src/value-item/value-item.tsx","../../src/object-details/object-details.tsx"],"sourcesContent":["import { ResponsiveStyleValue } from \"@mui/system\";\n\ninterface Breakpoints {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n}\n\ninterface BreakpointsCounter extends Breakpoints {\n increment(breakpoints: Partial<Breakpoints>): ResponsiveStyleValue<boolean>;\n}\n\nexport const newBreakpointsCounter = (breakpoint = 12): BreakpointsCounter => {\n const calculateBreakpointIncrement = (\n breakpointsCounter: BreakpointsCounter,\n key: keyof Breakpoints,\n value: number,\n ): boolean => {\n const initialValue = breakpointsCounter[key];\n breakpointsCounter[key] += value;\n if (breakpointsCounter[key] > breakpoint) {\n breakpointsCounter[key] = value;\n return false;\n }\n\n if (breakpointsCounter[key] == breakpoint) {\n breakpointsCounter[key] = 0;\n }\n\n return initialValue > 0;\n };\n\n return {\n xs: 0,\n sm: 0,\n md: 0,\n lg: 0,\n xl: 0,\n increment: function ({\n xs = 0,\n sm = 0,\n md = 0,\n lg = 0,\n xl = 0,\n }): ResponsiveStyleValue<boolean> {\n const smInc = sm || xs;\n const mdInc = md || smInc;\n const lgInc = lg || mdInc;\n const xlInc = xl || lgInc;\n\n return {\n xs: calculateBreakpointIncrement(this, \"xs\", xs),\n sm: calculateBreakpointIncrement(this, \"sm\", smInc),\n md: calculateBreakpointIncrement(this, \"md\", mdInc),\n lg: calculateBreakpointIncrement(this, \"lg\", lgInc),\n xl: calculateBreakpointIncrement(this, \"xl\", xlInc),\n };\n },\n };\n};\n","import { useState } from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Button from \"@mui/material/Button\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport EditIcon from \"@mui/icons-material/Edit\";\n\nexport interface ValueEditButtonsProps {\n onClickCancel: () => void;\n onClickSubmit: () => void;\n sx?: SxProps<Theme>;\n}\n\nexport const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {\n return (\n <InputAdornment position=\"end\" sx={sx}>\n <Button\n variant=\"contained\"\n size=\"small\"\n color=\"error\"\n aria-label=\"cancel button\"\n startIcon={<ClearIcon sx={{ fontSize: 12 }} />}\n onClick={onClickCancel}\n sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}\n />\n <Button\n variant=\"contained\"\n size=\"small\"\n color=\"primary\"\n aria-label=\"submit button\"\n startIcon={<CheckIcon sx={{ fontSize: 12 }} />}\n onClick={onClickSubmit}\n sx={{ paddingRight: 0, minWidth: 0 }}\n />\n </InputAdornment>\n );\n};\n\n/**\n * Hook to manage the editing behaviour\n */\nexport const useEditableValueDisplay = <T,>(\n initialValue: T | undefined,\n onEdit: (value?: T) => void,\n) => {\n const [isEditing, setIsEditing] = useState(false);\n const [editValue, setEditValue] = useState<T | undefined>(initialValue);\n\n const cancelEdit = () => {\n setIsEditing(false);\n setEditValue(initialValue);\n };\n const startEdit = () => {\n setIsEditing(true);\n };\n\n const submitEdit = () => {\n onEdit(editValue);\n cancelEdit();\n };\n\n return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };\n};\n\nexport interface ValueEditButtonProps {\n dense?: boolean;\n onClick: () => void;\n}\n\nexport const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {\n const { typography } = useTheme();\n return (\n <IconButton\n size=\"small\"\n onClick={onClick}\n sx={{ ml: dense ? 0.5 : 1 }}\n aria-label=\"edit button\"\n >\n <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />\n </IconButton>\n );\n};\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n /**\n * Name of the displayed value\n */\n label: string;\n\n /**\n * If true, the label will not be shown\n */\n hideLabel?: boolean;\n\n /**\n * If defined, a tooltip is going to be added arround the children;\n */\n tooltip?: string;\n\n /**\n * Timeout before the tooltip appears when the user hovers the value\n */\n tooltipEnterDelay?: number;\n\n /**\n * Component that's going to be renderd under the label\n */\n children: React.ReactElement<any, any>;\n\n /**\n * The value has to be displayed as compact or not.\n * False by default\n */\n dense?: boolean;\n\n /**\n * Custom styles for the root component\n */\n sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n label,\n hideLabel,\n tooltip,\n tooltipEnterDelay = 2000,\n children,\n dense,\n sx,\n}: ValueContentProps) => {\n const { typography } = useTheme();\n const id = getValueContentLabelId(label);\n\n return (\n <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n {!hideLabel && (\n <Typography\n variant={dense ? \"caption\" : \"subtitle2\"}\n role=\"label\"\n id={id}\n lineHeight={dense ? typography.pxToRem(15) : undefined}\n >\n {label}\n </Typography>\n )}\n {tooltip ? (\n <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n {children}\n </Tooltip>\n ) : (\n children\n )}\n </Box>\n );\n};\n","import { useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Switch from \"@mui/material/Switch\";\nimport Typography from \"@mui/material/Typography\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport {\n BaseValueProps,\n DefaultPlaceholder,\n EditableValueProps,\n useEditableValueDisplay,\n ValueEditButton,\n ValueEditButtons,\n} from \"../value-base\";\nimport { ValueContent, getValueContentLabelId } from \"../value-content\";\n\nexport type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;\n\n/**\n * Displays a boolean value with a label\n */\nexport const ValueBoolean = ({\n label,\n value,\n placeholder = DefaultPlaceholder,\n editable,\n dense,\n onEdit = () => null,\n}: ValueBooleanProps) => {\n const id = getValueContentLabelId(label);\n const { typography } = useTheme();\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(value, onEdit);\n\n const iconSx = { fontSize: dense ? typography.h6.fontSize : typography.h5.fontSize };\n\n return (\n <ValueContent label={label} dense={dense}>\n {isEditing ? (\n <Box display=\"flex\" alignItems=\"center\">\n <Switch\n size={dense ? \"small\" : \"medium\"}\n checked={editValue}\n onChange={(e) => setEditValue(e.target.checked)}\n />\n <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n </Box>\n ) : (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n aria-labelledby={id}\n role=\"checkbox\"\n aria-checked={value}\n >\n {value === undefined ? (\n <Typography variant=\"h5\">{placeholder}</Typography>\n ) : value ? (\n <CheckIcon color=\"success\" sx={iconSx} />\n ) : (\n <CloseIcon color=\"error\" sx={iconSx} />\n )}\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Box>\n )}\n </ValueContent>\n );\n};\n","export interface BaseValueProps<T> {\n /**\n * Name of the displayed value\n */\n label: string;\n\n /**\n * Value displayed\n */\n value?: T;\n\n /**\n * String rendered if value is undefined\n */\n placeholder?: string;\n\n /**\n * The value has to be displayed as compact or not.\n * False by default\n */\n dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n /**\n * This field can be edited or not\n */\n editable?: boolean;\n\n /**\n * Callback executed when the value is edited\n */\n onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n","import Box from \"@mui/material/Box\";\nimport TextField from \"@mui/material/TextField\";\nimport Typography from \"@mui/material/Typography\";\nimport { format } from \"date-fns\";\nimport { BaseValueProps, DefaultPlaceholder, EditableValueProps } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\nimport { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from \"../value-base\";\nimport { DatePicker } from \"@mui/x-date-pickers/DatePicker\";\nimport { DateTimePicker } from \"@mui/x-date-pickers/DateTimePicker\";\nimport { TimePicker } from \"@mui/x-date-pickers/TimePicker\";\n\nexport type EditInputType = \"datetime\" | \"date\" | \"time\";\n\nexport interface ValueDatetimeProps extends BaseValueProps<Date>, EditableValueProps<Date> {\n /**\n * Datetime format\n */\n format: string;\n\n /**\n * Edit input type\n */\n editInputType?: EditInputType;\n}\n\n/**\n * Displays a formated datetime with a label\n */\nexport const ValueDatetime = ({\n label,\n value: valueProp,\n format: fmt,\n placeholder = DefaultPlaceholder,\n editable,\n editInputType = \"datetime\",\n dense,\n onEdit = () => null,\n}: ValueDatetimeProps) => {\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(valueProp, onEdit);\n const id = getValueContentLabelId(label);\n const value = (valueProp && format(valueProp, fmt)) || placeholder;\n\n const EditPickerComponent =\n editInputType === \"datetime\"\n ? DateTimePicker\n : editInputType === \"time\"\n ? TimePicker\n : DatePicker;\n\n return (\n <ValueContent\n label={label}\n hideLabel={isEditing}\n tooltip={value}\n dense={dense}\n sx={{ display: \"flex\", flexDirection: \"column\" }}\n >\n {isEditing ? (\n <EditPickerComponent\n value={editValue}\n format={fmt}\n label={label}\n onChange={(newValue) => setEditValue(newValue ? newValue : undefined)}\n slots={{\n textField: (params) => (\n <TextField\n {...params}\n size=\"small\"\n InputProps={{\n ...params.InputProps,\n endAdornment: (\n <>\n {params.InputProps?.endAdornment}\n <ValueEditButtons\n onClickCancel={cancelEdit}\n onClickSubmit={submitEdit}\n sx={{ ml: 2 }}\n />\n </>\n ),\n sx: { marginY: !dense ? 1 : 0.2 },\n }}\n />\n ),\n }}\n />\n ) : (\n <Box display=\"flex\" alignItems=\"center\">\n <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n {value}\n </Typography>\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Box>\n )}\n </ValueContent>\n );\n};\n","import Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport Box from \"@mui/material/Box\";\nimport { useEffect, useRef } from \"react\";\nimport {\n BaseValueProps,\n DefaultPlaceholder,\n EditableValueProps,\n useEditableValueDisplay,\n ValueEditButton,\n ValueEditButtons,\n} from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;\n\n/**\n * Displays a string value with a label\n */\nexport const ValueText = ({\n label,\n value: valueProp,\n placeholder = DefaultPlaceholder,\n editable,\n dense,\n onEdit = () => null,\n}: ValueTextProps) => {\n const editInputRef = useRef<HTMLInputElement>(null);\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(valueProp?.toString(), onEdit);\n const id = getValueContentLabelId(label);\n const value = valueProp?.toString() || placeholder;\n\n const editKeyPressListener = (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n onEdit((e.target as any).value);\n }\n };\n\n useEffect(() => {\n editInputRef.current?.addEventListener(\"keypress\", editKeyPressListener);\n return () => editInputRef.current?.removeEventListener(\"keypress\", editKeyPressListener);\n }, [editInputRef.current]);\n\n return (\n <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>\n {isEditing ? (\n <TextField\n inputRef={editInputRef}\n value={editValue}\n label={label}\n size=\"small\"\n onChange={(e) => setEditValue(e.target.value)}\n InputProps={{\n endAdornment: (\n <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n ),\n }}\n sx={{ marginY: !dense ? 1 : 0 }}\n />\n ) : (\n <Box display=\"flex\">\n <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n {value}\n </Typography>\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Box>\n )}\n </ValueContent>\n );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n lightWeight = 100,\n darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n const { palette } = useTheme();\n return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import Grid from \"@mui/material/Grid\";\nimport Paper from \"@mui/material/Paper\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { useGetDefaultThemeColor } from \"../utils\";\nimport { ValueItemElement } from \"../value-item\";\n\nexport interface GroupValueCardProps {\n title: string;\n subtitle?: string;\n centered?: boolean;\n children: ValueItemElement | ValueItemElement[];\n dense?: boolean;\n}\n\nexport const GroupValueCard = ({\n title,\n subtitle,\n centered,\n children,\n dense,\n}: GroupValueCardProps) => {\n const { typography } = useTheme();\n const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n\n return (\n <Paper\n sx={{\n paddingBottom: dense ? 0 : 1,\n }}\n >\n <Box\n bgcolor={defaultColor}\n px={dense ? 1 : 2}\n py={dense ? 0.5 : 1}\n lineHeight={dense ? 0 : undefined}\n >\n <Typography variant={dense ? \"body1\" : \"h6\"} role=\"heading\" aria-level={1}>\n {title}\n </Typography>\n {subtitle && (\n <Typography\n variant={dense ? \"caption\" : \"body2\"}\n role=\"heading\"\n aria-level={2}\n lineHeight={dense ? typography.pxToRem(15) : undefined}\n >\n {subtitle}\n </Typography>\n )}\n </Box>\n <Grid\n container\n padding={1}\n rowSpacing={dense ? 1 : 2}\n justifyContent={centered ? \"center\" : \"flex-start\"}\n >\n {children}\n </Grid>\n </Paper>\n );\n};\n","import Grid, { GridProps } from \"@mui/material/Grid\";\nimport Box from \"@mui/material/Box\";\nimport { ResponsiveStyleValue } from \"@mui/system\";\nimport { PropsWithChildren, FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils\";\n\nexport type ValueItemProps = PropsWithChildren<\n Omit<GridProps, \"item\" | \"container\"> & { bordered?: ResponsiveStyleValue<boolean> }\n>;\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n root: \"RdsValueItem-root\",\n content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {\n const borderStyle = `solid ${color} 1px`;\n const noBorder = \"none\";\n\n if (!bordered) {\n return undefined;\n }\n\n if (Array.isArray(bordered)) {\n return bordered.map((b) => (b ? borderStyle : noBorder));\n }\n\n if (typeof bordered === \"object\") {\n const style: Record<string, string | undefined> = {};\n Object.entries(bordered).forEach(([key, value]) => {\n style[key] = value ? borderStyle : noBorder;\n });\n return style;\n }\n\n return borderStyle;\n};\n\nexport const ValueItem: ValueItemComponent = ({\n children,\n bordered = true,\n ...rest\n}: ValueItemProps) => {\n const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n const borderLeft = resolveBorderStyle(bordered, defaultColor);\n return (\n <Grid item className={valueItemClasses.root} {...rest}>\n <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n {children}\n </Box>\n </Grid>\n );\n};\n","import Grid from \"@mui/material/Grid\";\nimport { newBreakpointsCounter } from \"../utils/breakpoints\";\nimport { ValueBoolean } from \"../value-boolean\";\nimport { ValueDatetime } from \"../value-datetime\";\nimport { ValueText } from \"../value-text\";\nimport { GroupValueCard } from \"../group-value-card\";\nimport { ValueItem } from \"../value-item\";\nimport {\n ArrayGroupField,\n ArrayInstanceType,\n BasicModelInstance,\n GroupField,\n GroupInstanceType,\n Model,\n ModelField,\n} from \"../generators/generators.model\";\nimport { GridColDef, DataGrid } from \"@mui/x-data-grid\";\n\ninterface SingleDetailValueFactoryOptions {\n dense?: boolean;\n}\n\nconst singleDetailValueFactory = <T extends BasicModelInstance>(\n field: ModelField,\n instance: T | GroupInstanceType,\n { dense }: SingleDetailValueFactoryOptions = {},\n) => {\n const { id, name, type } = field;\n const value = instance[id];\n if (type === \"boolean\") {\n return <ValueBoolean dense={dense} label={name} value={value as boolean} />;\n } else if (type === \"date\" || type === \"time\" || type === \"datetime\") {\n return <ValueDatetime dense={dense} label={name} value={value as Date} format={field.format} />;\n }\n\n if (typeof value === \"object\" && !Array.isArray(value)) {\n return <ValueText dense={dense} label={name} value={JSON.stringify(value)} />;\n }\n return <ValueText dense={dense} label={name} value={value?.toString()} />;\n};\n\ninterface ObjectArrayGroupProps {\n field: ArrayGroupField;\n instance: ArrayInstanceType;\n dense?: boolean;\n}\n\nconst ObjectArrayGroup = ({\n field: { name, description, value },\n instance,\n dense,\n}: ObjectArrayGroupProps) => {\n const columns: GridColDef[] = [{ field: \"id\", headerName: \"ID\", width: 70 }];\n\n value.forEach((column) => {\n columns.push({\n field: column.id,\n headerName: column.name,\n });\n });\n\n const rows = instance.map((f, id) => ({\n id,\n ...f,\n }));\n\n return (\n <GroupValueCard title={name} subtitle={description} dense={dense}>\n <Grid item xs={12}>\n <DataGrid\n rows={rows}\n columns={columns}\n density={dense ? \"compact\" : \"standard\"}\n disableRowSelectionOnClick\n pageSizeOptions={[5]}\n initialState={{\n pagination: {\n paginationModel: {\n pageSize: 5,\n },\n },\n }}\n sx={{ height: 400 }}\n />\n </Grid>\n </GroupValueCard>\n );\n};\n\ninterface ObjectDetailGroupProps {\n field: GroupField;\n instance: GroupInstanceType;\n dense?: boolean;\n}\n\nconst ObjectDetailGroup = ({\n field: { name, description, value },\n instance,\n dense,\n}: ObjectDetailGroupProps) => {\n const breakpointsCounter = newBreakpointsCounter();\n\n return (\n <GroupValueCard title={name} subtitle={description} dense={dense}>\n {value.map((field) => {\n const { id, xs, sm, md, lg, xl } = field;\n const bordered = breakpointsCounter.increment(field);\n return (\n <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n {singleDetailValueFactory(field, instance, { dense })}\n </ValueItem>\n );\n })}\n </GroupValueCard>\n );\n};\n\nexport interface ObjectDetailsProps<T extends BasicModelInstance> {\n model: Model;\n dense?: boolean;\n instance: T;\n}\n\nexport const ObjectDetails = <T extends BasicModelInstance>({\n model,\n instance,\n dense,\n}: ObjectDetailsProps<T>) => {\n const breakpointsCounter = newBreakpointsCounter();\n return (\n <Grid container spacing={dense ? 1 : 2}>\n {model.fields.map((field) => {\n const { id, type, xs = 3, sm = 0, md = 0, lg = 0, xl = 0 } = field;\n\n if (type === \"group\") {\n breakpointsCounter.increment({ xs: 12 });\n return (\n <Grid item key={id} xs={12}>\n <ObjectDetailGroup\n field={field}\n instance={instance[id] as GroupInstanceType}\n dense={dense}\n />\n </Grid>\n );\n }\n\n if (type === \"group[]\") {\n breakpointsCounter.increment({ xs: 12 });\n return (\n <Grid item key={id} xs={12}>\n <ObjectArrayGroup field={field} instance={instance[id] as any} dense={dense} />\n </Grid>\n );\n }\n\n const bordered = breakpointsCounter.increment(field);\n return (\n <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>\n {singleDetailValueFactory(field, instance, { dense })}\n </ValueItem>\n );\n })}\n </Grid>\n );\n};\n"],"names":["newBreakpointsCounter","breakpoint","calculateBreakpointIncrement","breakpointsCounter","key","value","initialValue","xs","sm","md","lg","xl","increment","smInc","mdInc","lgInc","xlInc","this","ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","useEditableValueDisplay","onEdit","isEditing","setIsEditing","useState","editValue","setEditValue","cancelEdit","startEdit","submitEdit","ValueEditButton","dense","typography","useTheme","IconButton","ml","EditIcon","pxToRem","getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","id","Box","width","lineHeight","undefined","Typography","role","Tooltip","title","placement","enterDelay","ValueBoolean","placeholder","editable","iconSx","h6","h5","display","alignItems","Switch","checked","onChange","e","target","CloseIcon","ValueDatetime","valueProp","format","fmt","editInputType","flexDirection","DateTimePicker","TimePicker","DatePicker","newValue","slots","textField","params","TextField","InputProps","endAdornment","_Fragment","marginY","noWrap","ValueText","editInputRef","useRef","toString","editKeyPressListener","useEffect","current","addEventListener","removeEventListener","inputRef","useGetDefaultThemeColor","lightWeight","darkWeight","palette","mode","grey","GroupValueCard","subtitle","centered","defaultColor","Paper","paddingBottom","bgcolor","px","py","Grid","container","padding","rowSpacing","justifyContent","valueItemClasses","ValueItem","bordered","rest","borderLeft","borderStyle","noBorder","Array","isArray","map","b","style","Object","entries","forEach","resolveBorderStyle","item","className","singleDetailValueFactory","field","instance","name","type","JSON","stringify","ObjectArrayGroup","description","columns","headerName","column","push","rows","f","DataGrid","density","disableRowSelectionOnClick","pageSizeOptions","initialState","pagination","paginationModel","pageSize","height","ObjectDetailGroup","ObjectDetails","model","spacing","fields"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pautena/react-design-system",
3
- "version": "0.14.3",
3
+ "version": "0.14.4",
4
4
  "description": "My custom design system on top of MUI",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./index.js",
package/value-text/cjs/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Typography"),i=require("@mui/material/TextField"),a=require("react"),l=require("@mui/icons-material/Check"),r=require("@mui/icons-material/Clear"),n=require("@mui/material/styles"),s=require("@mui/material/Button"),u=require("@mui/material/IconButton"),o=require("@mui/material/InputAdornment"),d=require("@mui/icons-material/Edit"),c=require("@mui/material/Box"),m=require("@mui/material/Tooltip");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=x(t),h=x(i),b=x(l),f=x(r),g=x(s),j=x(u),y=x(o),E=x(d),v=x(c),C=x(m);const k=({onClickCancel:t,onClickSubmit:i,sx:a})=>e.jsxs(y.default,{position:"end",sx:a,children:[e.jsx(g.default,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:e.jsx(f.default,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0,marginRight:1}}),e.jsx(g.default,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:e.jsx(b.default,{sx:{fontSize:12}}),onClick:i,sx:{paddingRight:0,minWidth:0}})]}),q=({dense:t,onClick:i})=>{const{typography:a}=n.useTheme();return e.jsx(j.default,{size:"small",onClick:i,sx:{ml:t?.5:1},"aria-label":"edit button",children:e.jsx(E.default,{sx:{fontSize:a.pxToRem(t?18:24)}})})},S=e=>`label-${e.replace(/ /g,"-")}`,T=({label:t,hideLabel:i,tooltip:a,tooltipEnterDelay:l=2e3,children:r,dense:s,sx:u})=>{const{typography:o}=n.useTheme(),d=S(t);return e.jsxs(v.default,{width:1,lineHeight:s?0:void 0,sx:u,children:[!i&&e.jsx(p.default,{variant:s?"caption":"subtitle2",role:"label",id:d,lineHeight:s?o.pxToRem(15):void 0,children:t}),a?e.jsx(C.default,{title:a,placement:"top",enterDelay:l,children:r}):r]})};exports.ValueText=({label:t,value:i,placeholder:l="-",editable:r,dense:n,onEdit:s=(()=>null)})=>{const u=a.useRef(null),{isEditing:o,editValue:d,startEdit:c,cancelEdit:m,setEditValue:x,submitEdit:b}=((e,t)=>{const[i,l]=a.useState(!1),[r,n]=a.useState(e),s=()=>{l(!1),n(e)};return{isEditing:i,cancelEdit:s,editValue:r,setEditValue:n,startEdit:()=>{l(!0)},submitEdit:()=>{t(r),s()}}})(i?.toString(),s),f=S(t),g=i?.toString()||l,j=e=>{"Enter"===e.key&&s(e.target.value)};return a.useEffect((()=>(u.current?.addEventListener("keypress",j),()=>u.current?.removeEventListener("keypress",j))),[u.current]),e.jsx(T,{hideLabel:o,label:t,tooltip:g,dense:n,children:o?e.jsx(h.default,{inputRef:u,value:d,label:t,size:"small",onChange:e=>x(e.target.value),InputProps:{endAdornment:e.jsx(k,{onClickCancel:m,onClickSubmit:b})},sx:{marginY:n?0:1}}):e.jsxs(p.default,{variant:n?"body1":"h5",noWrap:!0,"aria-labelledby":f,children:[g,r&&e.jsx(q,{dense:n,onClick:c})]})})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Typography"),i=require("@mui/material/TextField"),l=require("@mui/material/Box"),a=require("react"),r=require("@mui/icons-material/Check"),n=require("@mui/icons-material/Clear"),s=require("@mui/material/styles"),u=require("@mui/material/Button"),o=require("@mui/material/IconButton"),d=require("@mui/material/InputAdornment"),c=require("@mui/icons-material/Edit"),m=require("@mui/material/Tooltip");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=x(t),h=x(i),b=x(l),f=x(r),g=x(n),j=x(u),y=x(o),E=x(d),v=x(c),C=x(m);const k=({onClickCancel:t,onClickSubmit:i,sx:l})=>e.jsxs(E.default,{position:"end",sx:l,children:[e.jsx(j.default,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:e.jsx(g.default,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0,marginRight:1}}),e.jsx(j.default,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:e.jsx(f.default,{sx:{fontSize:12}}),onClick:i,sx:{paddingRight:0,minWidth:0}})]}),q=({dense:t,onClick:i})=>{const{typography:l}=s.useTheme();return e.jsx(y.default,{size:"small",onClick:i,sx:{ml:t?.5:1},"aria-label":"edit button",children:e.jsx(v.default,{sx:{fontSize:l.pxToRem(t?18:24)}})})},S=e=>`label-${e.replace(/ /g,"-")}`,T=({label:t,hideLabel:i,tooltip:l,tooltipEnterDelay:a=2e3,children:r,dense:n,sx:u})=>{const{typography:o}=s.useTheme(),d=S(t);return e.jsxs(b.default,{width:1,lineHeight:n?0:void 0,sx:u,children:[!i&&e.jsx(p.default,{variant:n?"caption":"subtitle2",role:"label",id:d,lineHeight:n?o.pxToRem(15):void 0,children:t}),l?e.jsx(C.default,{title:l,placement:"top",enterDelay:a,children:r}):r]})};exports.ValueText=({label:t,value:i,placeholder:l="-",editable:r,dense:n,onEdit:s=(()=>null)})=>{const u=a.useRef(null),{isEditing:o,editValue:d,startEdit:c,cancelEdit:m,setEditValue:x,submitEdit:f}=((e,t)=>{const[i,l]=a.useState(!1),[r,n]=a.useState(e),s=()=>{l(!1),n(e)};return{isEditing:i,cancelEdit:s,editValue:r,setEditValue:n,startEdit:()=>{l(!0)},submitEdit:()=>{t(r),s()}}})(i?.toString(),s),g=S(t),j=i?.toString()||l,y=e=>{"Enter"===e.key&&s(e.target.value)};return a.useEffect((()=>(u.current?.addEventListener("keypress",y),()=>u.current?.removeEventListener("keypress",y))),[u.current]),e.jsx(T,{hideLabel:o,label:t,tooltip:j,dense:n,children:o?e.jsx(h.default,{inputRef:u,value:d,label:t,size:"small",onChange:e=>x(e.target.value),InputProps:{endAdornment:e.jsx(k,{onClickCancel:m,onClickSubmit:f})},sx:{marginY:n?0:1}}):e.jsxs(b.default,{display:"flex",children:[e.jsx(p.default,{variant:n?"body1":"h5",noWrap:!0,"aria-labelledby":g,children:j}),r&&e.jsx(q,{dense:n,onClick:c})]})})};
2
2
  //# sourceMappingURL=index.js.map
package/value-text/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/value-base/value-edit.tsx","../../../src/value-content/value-content.tsx","../../../src/value-text/value-text.tsx","../../../src/value-base/value-displays.types.ts"],"sourcesContent":["import { useState } from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Button from \"@mui/material/Button\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport EditIcon from \"@mui/icons-material/Edit\";\n\nexport interface ValueEditButtonsProps {\n onClickCancel: () => void;\n onClickSubmit: () => void;\n sx?: SxProps<Theme>;\n}\n\nexport const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {\n return (\n <InputAdornment position=\"end\" sx={sx}>\n <Button\n variant=\"contained\"\n size=\"small\"\n color=\"error\"\n aria-label=\"cancel button\"\n startIcon={<ClearIcon sx={{ fontSize: 12 }} />}\n onClick={onClickCancel}\n sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}\n />\n <Button\n variant=\"contained\"\n size=\"small\"\n color=\"primary\"\n aria-label=\"submit button\"\n startIcon={<CheckIcon sx={{ fontSize: 12 }} />}\n onClick={onClickSubmit}\n sx={{ paddingRight: 0, minWidth: 0 }}\n />\n </InputAdornment>\n );\n};\n\n/**\n * Hook to manage the editing behaviour\n */\nexport const useEditableValueDisplay = <T,>(\n initialValue: T | undefined,\n onEdit: (value?: T) => void,\n) => {\n const [isEditing, setIsEditing] = useState(false);\n const [editValue, setEditValue] = useState<T | undefined>(initialValue);\n\n const cancelEdit = () => {\n setIsEditing(false);\n setEditValue(initialValue);\n };\n const startEdit = () => {\n setIsEditing(true);\n };\n\n const submitEdit = () => {\n onEdit(editValue);\n cancelEdit();\n };\n\n return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };\n};\n\nexport interface ValueEditButtonProps {\n dense?: boolean;\n onClick: () => void;\n}\n\nexport const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {\n const { typography } = useTheme();\n return (\n <IconButton\n size=\"small\"\n onClick={onClick}\n sx={{ ml: dense ? 0.5 : 1 }}\n aria-label=\"edit button\"\n >\n <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />\n </IconButton>\n );\n};\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n /**\n * Name of the displayed value\n */\n label: string;\n\n /**\n * If true, the label will not be shown\n */\n hideLabel?: boolean;\n\n /**\n * If defined, a tooltip is going to be added arround the children;\n */\n tooltip?: string;\n\n /**\n * Timeout before the tooltip appears when the user hovers the value\n */\n tooltipEnterDelay?: number;\n\n /**\n * Component that's going to be renderd under the label\n */\n children: React.ReactElement<any, any>;\n\n /**\n * The value has to be displayed as compact or not.\n * False by default\n */\n dense?: boolean;\n\n /**\n * Custom styles for the root component\n */\n sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n label,\n hideLabel,\n tooltip,\n tooltipEnterDelay = 2000,\n children,\n dense,\n sx,\n}: ValueContentProps) => {\n const { typography } = useTheme();\n const id = getValueContentLabelId(label);\n\n return (\n <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n {!hideLabel && (\n <Typography\n variant={dense ? \"caption\" : \"subtitle2\"}\n role=\"label\"\n id={id}\n lineHeight={dense ? typography.pxToRem(15) : undefined}\n >\n {label}\n </Typography>\n )}\n {tooltip ? (\n <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n {children}\n </Tooltip>\n ) : (\n children\n )}\n </Box>\n );\n};\n","import Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport { useEffect, useRef } from \"react\";\nimport {\n BaseValueProps,\n DefaultPlaceholder,\n EditableValueProps,\n useEditableValueDisplay,\n ValueEditButton,\n ValueEditButtons,\n} from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;\n\n/**\n * Displays a string value with a label\n */\nexport const ValueText = ({\n label,\n value: valueProp,\n placeholder = DefaultPlaceholder,\n editable,\n dense,\n onEdit = () => null,\n}: ValueTextProps) => {\n const editInputRef = useRef<HTMLInputElement>(null);\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(valueProp?.toString(), onEdit);\n const id = getValueContentLabelId(label);\n const value = valueProp?.toString() || placeholder;\n\n const editKeyPressListener = (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n onEdit((e.target as any).value);\n }\n };\n\n useEffect(() => {\n editInputRef.current?.addEventListener(\"keypress\", editKeyPressListener);\n return () => editInputRef.current?.removeEventListener(\"keypress\", editKeyPressListener);\n }, [editInputRef.current]);\n\n return (\n <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>\n {isEditing ? (\n <TextField\n inputRef={editInputRef}\n value={editValue}\n label={label}\n size=\"small\"\n onChange={(e) => setEditValue(e.target.value)}\n InputProps={{\n endAdornment: (\n <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n ),\n }}\n sx={{ marginY: !dense ? 1 : 0 }}\n />\n ) : (\n <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n {value}\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Typography>\n )}\n </ValueContent>\n );\n};\n","export interface BaseValueProps<T> {\n /**\n * Name of the displayed value\n */\n label: string;\n\n /**\n * Value displayed\n */\n value?: T;\n\n /**\n * String rendered if value is undefined\n */\n placeholder?: string;\n\n /**\n * The value has to be displayed as compact or not.\n * False by default\n */\n dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n /**\n * This field can be edited or not\n */\n editable?: boolean;\n\n /**\n * Callback executed when the value is edited\n */\n onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","jsx","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","ValueEditButton","dense","typography","useTheme","IconButton","ml","EditIcon","pxToRem","getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","id","Box","width","lineHeight","undefined","Typography","role","Tooltip","title","placement","enterDelay","value","valueProp","placeholder","editable","onEdit","editInputRef","useRef","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","editKeyPressListener","e","key","target","useEffect","current","addEventListener","removeEventListener","TextField","inputRef","onChange","InputProps","endAdornment","marginY","noWrap"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/value-base/value-edit.tsx","../../../src/value-content/value-content.tsx","../../../src/value-text/value-text.tsx","../../../src/value-base/value-displays.types.ts"],"sourcesContent":["import { useState } from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Button from \"@mui/material/Button\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport EditIcon from \"@mui/icons-material/Edit\";\n\nexport interface ValueEditButtonsProps {\n onClickCancel: () => void;\n onClickSubmit: () => void;\n sx?: SxProps<Theme>;\n}\n\nexport const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {\n return (\n <InputAdornment position=\"end\" sx={sx}>\n <Button\n variant=\"contained\"\n size=\"small\"\n color=\"error\"\n aria-label=\"cancel button\"\n startIcon={<ClearIcon sx={{ fontSize: 12 }} />}\n onClick={onClickCancel}\n sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}\n />\n <Button\n variant=\"contained\"\n size=\"small\"\n color=\"primary\"\n aria-label=\"submit button\"\n startIcon={<CheckIcon sx={{ fontSize: 12 }} />}\n onClick={onClickSubmit}\n sx={{ paddingRight: 0, minWidth: 0 }}\n />\n </InputAdornment>\n );\n};\n\n/**\n * Hook to manage the editing behaviour\n */\nexport const useEditableValueDisplay = <T,>(\n initialValue: T | undefined,\n onEdit: (value?: T) => void,\n) => {\n const [isEditing, setIsEditing] = useState(false);\n const [editValue, setEditValue] = useState<T | undefined>(initialValue);\n\n const cancelEdit = () => {\n setIsEditing(false);\n setEditValue(initialValue);\n };\n const startEdit = () => {\n setIsEditing(true);\n };\n\n const submitEdit = () => {\n onEdit(editValue);\n cancelEdit();\n };\n\n return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };\n};\n\nexport interface ValueEditButtonProps {\n dense?: boolean;\n onClick: () => void;\n}\n\nexport const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {\n const { typography } = useTheme();\n return (\n <IconButton\n size=\"small\"\n onClick={onClick}\n sx={{ ml: dense ? 0.5 : 1 }}\n aria-label=\"edit button\"\n >\n <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />\n </IconButton>\n );\n};\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n /**\n * Name of the displayed value\n */\n label: string;\n\n /**\n * If true, the label will not be shown\n */\n hideLabel?: boolean;\n\n /**\n * If defined, a tooltip is going to be added arround the children;\n */\n tooltip?: string;\n\n /**\n * Timeout before the tooltip appears when the user hovers the value\n */\n tooltipEnterDelay?: number;\n\n /**\n * Component that's going to be renderd under the label\n */\n children: React.ReactElement<any, any>;\n\n /**\n * The value has to be displayed as compact or not.\n * False by default\n */\n dense?: boolean;\n\n /**\n * Custom styles for the root component\n */\n sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n label,\n hideLabel,\n tooltip,\n tooltipEnterDelay = 2000,\n children,\n dense,\n sx,\n}: ValueContentProps) => {\n const { typography } = useTheme();\n const id = getValueContentLabelId(label);\n\n return (\n <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n {!hideLabel && (\n <Typography\n variant={dense ? \"caption\" : \"subtitle2\"}\n role=\"label\"\n id={id}\n lineHeight={dense ? typography.pxToRem(15) : undefined}\n >\n {label}\n </Typography>\n )}\n {tooltip ? (\n <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n {children}\n </Tooltip>\n ) : (\n children\n )}\n </Box>\n );\n};\n","import Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport Box from \"@mui/material/Box\";\nimport { useEffect, useRef } from \"react\";\nimport {\n BaseValueProps,\n DefaultPlaceholder,\n EditableValueProps,\n useEditableValueDisplay,\n ValueEditButton,\n ValueEditButtons,\n} from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;\n\n/**\n * Displays a string value with a label\n */\nexport const ValueText = ({\n label,\n value: valueProp,\n placeholder = DefaultPlaceholder,\n editable,\n dense,\n onEdit = () => null,\n}: ValueTextProps) => {\n const editInputRef = useRef<HTMLInputElement>(null);\n const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n useEditableValueDisplay(valueProp?.toString(), onEdit);\n const id = getValueContentLabelId(label);\n const value = valueProp?.toString() || placeholder;\n\n const editKeyPressListener = (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n onEdit((e.target as any).value);\n }\n };\n\n useEffect(() => {\n editInputRef.current?.addEventListener(\"keypress\", editKeyPressListener);\n return () => editInputRef.current?.removeEventListener(\"keypress\", editKeyPressListener);\n }, [editInputRef.current]);\n\n return (\n <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>\n {isEditing ? (\n <TextField\n inputRef={editInputRef}\n value={editValue}\n label={label}\n size=\"small\"\n onChange={(e) => setEditValue(e.target.value)}\n InputProps={{\n endAdornment: (\n <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n ),\n }}\n sx={{ marginY: !dense ? 1 : 0 }}\n />\n ) : (\n <Box display=\"flex\">\n <Typography variant={dense ? \"body1\" : \"h5\"} noWrap aria-labelledby={id}>\n {value}\n </Typography>\n {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n </Box>\n )}\n </ValueContent>\n );\n};\n","export interface BaseValueProps<T> {\n /**\n * Name of the displayed value\n */\n label: string;\n\n /**\n * Value displayed\n */\n value?: T;\n\n /**\n * String rendered if value is undefined\n */\n placeholder?: string;\n\n /**\n * The value has to be displayed as compact or not.\n * False by default\n */\n dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n /**\n * This field can be edited or not\n */\n editable?: boolean;\n\n /**\n * Callback executed when the value is edited\n */\n onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","jsx","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","ValueEditButton","dense","typography","useTheme","IconButton","ml","EditIcon","pxToRem","getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","id","Box","width","lineHeight","undefined","Typography","role","Tooltip","title","placement","enterDelay","value","valueProp","placeholder","editable","onEdit","editInputRef","useRef","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","editKeyPressListener","e","key","target","useEffect","current","addEventListener","removeEventListener","TextField","inputRef","onChange","InputProps","endAdornment","marginY","display","noWrap"],"mappings":"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"}
package/value-text/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import{jsxs as t,jsx as i}from"react/jsx-runtime";import e from"@mui/material/Typography";import r from"@mui/material/TextField";import{useState as n,useRef as l,useEffect as a}from"react";import o from"@mui/icons-material/Check";import m from"@mui/icons-material/Clear";import{useTheme as s}from"@mui/material/styles";import d from"@mui/material/Button";import c from"@mui/material/IconButton";import u from"@mui/material/InputAdornment";import p from"@mui/icons-material/Edit";import h from"@mui/material/Box";import b from"@mui/material/Tooltip";const g=({onClickCancel:e,onClickSubmit:r,sx:n})=>t(u,{position:"end",sx:n,children:[i(d,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:i(m,{sx:{fontSize:12}}),onClick:e,sx:{paddingRight:0,minWidth:0,marginRight:1}}),i(d,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:i(o,{sx:{fontSize:12}}),onClick:r,sx:{paddingRight:0,minWidth:0}})]}),f=({dense:t,onClick:e})=>{const{typography:r}=s();return i(c,{size:"small",onClick:e,sx:{ml:t?.5:1},"aria-label":"edit button",children:i(p,{sx:{fontSize:r.pxToRem(t?18:24)}})})},x=t=>`label-${t.replace(/ /g,"-")}`,E=({label:r,hideLabel:n,tooltip:l,tooltipEnterDelay:a=2e3,children:o,dense:m,sx:d})=>{const{typography:c}=s(),u=x(r);return t(h,{width:1,lineHeight:m?0:void 0,sx:d,children:[!n&&i(e,{variant:m?"caption":"subtitle2",role:"label",id:u,lineHeight:m?c.pxToRem(15):void 0,children:r}),l?i(b,{title:l,placement:"top",enterDelay:a,children:o}):o]})},y=({label:o,value:m,placeholder:s="-",editable:d,dense:c,onEdit:u=(()=>null)})=>{const p=l(null),{isEditing:h,editValue:b,startEdit:y,cancelEdit:C,setEditValue:k,submitEdit:v}=((t,i)=>{const[e,r]=n(!1),[l,a]=n(t),o=()=>{r(!1),a(t)};return{isEditing:e,cancelEdit:o,editValue:l,setEditValue:a,startEdit:()=>{r(!0)},submitEdit:()=>{i(l),o()}}})(m?.toString(),u),z=x(o),S=m?.toString()||s,R=t=>{"Enter"===t.key&&u(t.target.value)};return a((()=>(p.current?.addEventListener("keypress",R),()=>p.current?.removeEventListener("keypress",R))),[p.current]),i(E,{hideLabel:h,label:o,tooltip:S,dense:c,children:h?i(r,{inputRef:p,value:b,label:o,size:"small",onChange:t=>k(t.target.value),InputProps:{endAdornment:i(g,{onClickCancel:C,onClickSubmit:v})},sx:{marginY:c?0:1}}):t(e,{variant:c?"body1":"h5",noWrap:!0,"aria-labelledby":z,children:[S,d&&i(f,{dense:c,onClick:y})]})})};export{y as ValueText};
1
+ import{jsxs as i,jsx as t}from"react/jsx-runtime";import e from"@mui/material/Typography";import r from"@mui/material/TextField";import l from"@mui/material/Box";import{useState as n,useRef as a,useEffect as o}from"react";import m from"@mui/icons-material/Check";import s from"@mui/icons-material/Clear";import{useTheme as d}from"@mui/material/styles";import c from"@mui/material/Button";import p from"@mui/material/IconButton";import u from"@mui/material/InputAdornment";import h from"@mui/icons-material/Edit";import b from"@mui/material/Tooltip";const g=({onClickCancel:e,onClickSubmit:r,sx:l})=>i(u,{position:"end",sx:l,children:[t(c,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:t(s,{sx:{fontSize:12}}),onClick:e,sx:{paddingRight:0,minWidth:0,marginRight:1}}),t(c,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:t(m,{sx:{fontSize:12}}),onClick:r,sx:{paddingRight:0,minWidth:0}})]}),f=({dense:i,onClick:e})=>{const{typography:r}=d();return t(p,{size:"small",onClick:e,sx:{ml:i?.5:1},"aria-label":"edit button",children:t(h,{sx:{fontSize:r.pxToRem(i?18:24)}})})},x=i=>`label-${i.replace(/ /g,"-")}`,y=({label:r,hideLabel:n,tooltip:a,tooltipEnterDelay:o=2e3,children:m,dense:s,sx:c})=>{const{typography:p}=d(),u=x(r);return i(l,{width:1,lineHeight:s?0:void 0,sx:c,children:[!n&&t(e,{variant:s?"caption":"subtitle2",role:"label",id:u,lineHeight:s?p.pxToRem(15):void 0,children:r}),a?t(b,{title:a,placement:"top",enterDelay:o,children:m}):m]})},E=({label:m,value:s,placeholder:d="-",editable:c,dense:p,onEdit:u=(()=>null)})=>{const h=a(null),{isEditing:b,editValue:E,startEdit:C,cancelEdit:k,setEditValue:v,submitEdit:z}=((i,t)=>{const[e,r]=n(!1),[l,a]=n(i),o=()=>{r(!1),a(i)};return{isEditing:e,cancelEdit:o,editValue:l,setEditValue:a,startEdit:()=>{r(!0)},submitEdit:()=>{t(l),o()}}})(s?.toString(),u),S=x(m),R=s?.toString()||d,I=i=>{"Enter"===i.key&&u(i.target.value)};return o((()=>(h.current?.addEventListener("keypress",I),()=>h.current?.removeEventListener("keypress",I))),[h.current]),t(y,{hideLabel:b,label:m,tooltip:R,dense:p,children:b?t(r,{inputRef:h,value:E,label:m,size:"small",onChange:i=>v(i.target.value),InputProps:{endAdornment:t(g,{onClickCancel:k,onClickSubmit:z})},sx:{marginY:p?0:1}}):i(l,{display:"flex",children:[t(e,{variant:p?"body1":"h5",noWrap:!0,"aria-labelledby":S,children:R}),c&&t(f,{dense:p,onClick:C})]})})};export{E as ValueText};
2
2
  //# sourceMappingURL=index.js.map