@etsoo/materialui 1.0.66 → 1.0.68

package/lib/AuditDisplay.d.ts

@@ -1,21 +1,11 @@
+import { AuditLineDto } from '@etsoo/appscript';
 import { Theme } from '@mui/material';
 import React, { CSSProperties } from 'react';
 import { ListMoreDisplayProps } from './ListMoreDisplay';
-import { AuditLineUpdateData } from './ShowDataComparison';
-/**
- * Audit line data model
- */
-export interface AuditLine {
-    id: number;
-    creation: Date;
-    user: string;
-    action: string;
-    changes?: AuditLineUpdateData;
-}
 /**
  * Audit display props
  */
-export interface AuditDisplayProps extends Omit<ListMoreDisplayProps<AuditLine>, 'children'> {
+export interface AuditDisplayProps extends Omit<ListMoreDisplayProps<AuditLineDto>, 'children'> {
     /**
      * Get list item style callback
      */
@@ -23,7 +13,7 @@ export interface AuditDisplayProps extends Omit<ListMoreDisplayProps<AuditLine>,
     /**
      * Item/line renderer
      */
-    itemRenderer?: (data: AuditLine, index: number) => React.ReactNode;
+    itemRenderer?: (data: AuditLineDto, index: number) => React.ReactNode;
 }
 /**
  * Audit display

package/lib/AuditDisplay.js

@@ -32,7 +32,7 @@ export function AuditDisplay(props) {
             ? theme.palette.grey[100]
             : theme.palette.grey[50]
     }), itemRenderer = (data) => {
-        const changes = data.changes;
+        const { newData, oldData, changes = { newData: newData !== null && newData !== void 0 ? newData : {}, oldData: oldData !== null && oldData !== void 0 ? oldData : {} } } = data;
         return (React.createElement(React.Fragment, null,
             changes != null && (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => ShowDataComparison(changes, title), sx: {
                     marginLeft: theme.spacing(1),

package/lib/OptionGroup.js

@@ -8,6 +8,7 @@ import React from 'react';
  * @returns Component
  */
 export function OptionGroup(props) {
+    var _a;
     // Destruct
     const { getOptionLabel, defaultValue, idField = 'id', label, labelField = 'label', multiple = false, mRef, name, onValueChange, options, readOnly, row, itemSize, helperText, variant, required, ...rest } = props;
     // Theme
@@ -23,11 +24,11 @@ export function OptionGroup(props) {
     // Checkbox values
     const [values, setValues] = React.useState([]);
     // Values
-    const dv = defaultValue == null
+    const dv = React.useMemo(() => defaultValue == null
         ? []
         : Array.isArray(defaultValue)
             ? defaultValue
-            : [defaultValue];
+            : [defaultValue], [defaultValue]);
     React.useEffect(() => {
         setValues(dv);
     }, [dv]);
@@ -83,7 +84,7 @@ export function OptionGroup(props) {
         return (React.createElement(FormControlLabel, { key: value, control: control, value: value, label: label }));
     });
     // Group
-    const group = multiple ? (React.createElement(FormGroup, { row: row }, list)) : (React.createElement(RadioGroup, { row: row, name: name, value: values[0], onChange: (_event, value) => {
+    const group = multiple ? (React.createElement(FormGroup, { row: row }, list)) : (React.createElement(RadioGroup, { row: row, name: name, value: (_a = values[0]) !== null && _a !== void 0 ? _a : '', onChange: (_event, value) => {
             if (firstOptionValue == null)
                 return;
             const typeValue = Utils.parseString(value, firstOptionValue);

package/lib/ShowDataComparison.d.ts

@@ -1,20 +1,14 @@
+import { AuditLineChangesDto } from '@etsoo/appscript';
 /**
- * Audit line update data model
- */
-export interface AuditLineUpdateData {
-    oldData: Record<string, unknown>;
-    newData: Record<string, unknown>;
-}
-/**
- * Check obj is instance of AuditLineUpdateData
+ * Check obj is instance of AuditLineChangesDto
  * @param obj Input
  * @returns Result
  */
-export declare function IsAuditLineUpdateData(obj: any): obj is AuditLineUpdateData;
+export declare function IsAuditLineUpdateData(obj: any): obj is AuditLineChangesDto;
 /**
  * Show data comparison
  * @param data Data
  * @param modelTitle Model window title
  * @param getLabel Get label callback
  */
-export declare const ShowDataComparison: (data: AuditLineUpdateData, modelTitle?: string, getLabel?: ((field: string) => string) | undefined) => void;
+export declare const ShowDataComparison: (data: AuditLineChangesDto, modelTitle?: string, getLabel?: ((field: string) => string) | undefined) => void;

package/lib/ShowDataComparison.js

@@ -4,7 +4,7 @@ import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
 import React from 'react';
 import { globalApp } from './app/ReactApp';
 /**
- * Check obj is instance of AuditLineUpdateData
+ * Check obj is instance of AuditLineChangesDto
  * @param obj Input
  * @returns Result
  */

package/lib/TwoFieldInput.js

@@ -44,10 +44,8 @@ export function TwoFieldInput(props) {
             return '';
         if (typeof v === 'number')
             return v;
-        if (type === 'date')
-            return DateUtils.formatForInput(v);
-        if (type === 'datetime-local')
-            return DateUtils.formatForInput(v, true);
+        if (type === 'date' || type === 'datetime-local')
+            return DateUtils.formatForInput(v, type);
         return v;
     };
     React.useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.66",
+    "version": "1.0.68",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -51,10 +51,10 @@
         "@emotion/css": "^11.10.5",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
-        "@etsoo/appscript": "^1.3.29",
+        "@etsoo/appscript": "^1.3.30",
         "@etsoo/notificationbase": "^1.1.14",
         "@etsoo/react": "^1.6.24",
-        "@etsoo/shared": "^1.1.74",
+        "@etsoo/shared": "^1.1.75",
         "@mui/icons-material": "^5.10.9",
         "@mui/material": "^5.10.13",
         "@types/pica": "^9.0.1",

package/src/AuditDisplay.tsx

@@ -1,26 +1,16 @@
+import { AuditLineDto } from '@etsoo/appscript';
 import { Utils } from '@etsoo/shared';
 import { Button, Divider, Theme, Typography, useTheme } from '@mui/material';
 import React, { CSSProperties } from 'react';
 import { globalApp } from './app/ReactApp';
 import { ListMoreDisplay, ListMoreDisplayProps } from './ListMoreDisplay';
-import { AuditLineUpdateData, ShowDataComparison } from './ShowDataComparison';
-
-/**
- * Audit line data model
- */
-export interface AuditLine {
-    id: number;
-    creation: Date;
-    user: string;
-    action: string;
-    changes?: AuditLineUpdateData;
-}
+import { ShowDataComparison } from './ShowDataComparison';
 
 /**
  * Audit display props
  */
 export interface AuditDisplayProps
-    extends Omit<ListMoreDisplayProps<AuditLine>, 'children'> {
+    extends Omit<ListMoreDisplayProps<AuditLineDto>, 'children'> {
     /**
      * Get list item style callback
      */
@@ -29,7 +19,7 @@ export interface AuditDisplayProps
     /**
      * Item/line renderer
      */
-    itemRenderer?: (data: AuditLine, index: number) => React.ReactNode;
+    itemRenderer?: (data: AuditLineDto, index: number) => React.ReactNode;
 }
 
 // Get label
@@ -65,7 +55,11 @@ export function AuditDisplay(props: AuditDisplayProps) {
                     : theme.palette.grey[50]
         }),
         itemRenderer = (data) => {
-            const changes = data.changes;
+            const {
+                newData,
+                oldData,
+                changes = { newData: newData ?? {}, oldData: oldData ?? {} }
+            } = data;
             return (
                 <React.Fragment>
                     {changes != null && (
@@ -103,7 +97,7 @@ export function AuditDisplay(props: AuditDisplayProps) {
 
     // Layout
     return (
-        <ListMoreDisplay<AuditLine> headerTitle={headerTitle} {...rest}>
+        <ListMoreDisplay<AuditLineDto> headerTitle={headerTitle} {...rest}>
             {(data, index) => (
                 <div key={data.id} style={getItemStyle(index, theme)}>
                     {itemRenderer(data, index)}

package/src/OptionGroup.tsx

@@ -157,12 +157,15 @@ export function OptionGroup<
     const [values, setValues] = React.useState<T[D][]>([]);
 
     // Values
-    const dv =
-        defaultValue == null
-            ? []
-            : Array.isArray(defaultValue)
-            ? defaultValue
-            : [defaultValue];
+    const dv = React.useMemo(
+        () =>
+            defaultValue == null
+                ? []
+                : Array.isArray(defaultValue)
+                ? defaultValue
+                : [defaultValue],
+        [defaultValue]
+    );
 
     React.useEffect(() => {
         setValues(dv);
@@ -261,7 +264,7 @@ export function OptionGroup<
         <RadioGroup
             row={row}
             name={name}
-            value={values[0]}
+            value={values[0] ?? ''}
             onChange={(_event, value) => {
                 if (firstOptionValue == null) return;
                 const typeValue = Utils.parseString(value, firstOptionValue);

package/src/ShowDataComparison.tsx

@@ -1,4 +1,4 @@
-import { IApp } from '@etsoo/appscript/lib/mjs/app/IApp';
+import { AuditLineChangesDto, IApp } from '@etsoo/appscript';
 import { NotificationMessageType } from '@etsoo/notificationbase';
 import { Utils } from '@etsoo/shared';
 import {
@@ -12,19 +12,11 @@ import React from 'react';
 import { globalApp } from './app/ReactApp';
 
 /**
- * Audit line update data model
- */
-export interface AuditLineUpdateData {
-    oldData: Record<string, unknown>;
-    newData: Record<string, unknown>;
-}
-
-/**
- * Check obj is instance of AuditLineUpdateData
+ * Check obj is instance of AuditLineChangesDto
  * @param obj Input
  * @returns Result
  */
-export function IsAuditLineUpdateData(obj: any): obj is AuditLineUpdateData {
+export function IsAuditLineUpdateData(obj: any): obj is AuditLineChangesDto {
     return (
         typeof obj === 'object' &&
         'oldData' in obj &&
@@ -48,7 +40,7 @@ const formatValue = (value: unknown, app: IApp) => {
  * @param getLabel Get label callback
  */
 export const ShowDataComparison = (
-    data: AuditLineUpdateData,
+    data: AuditLineChangesDto,
     modelTitle?: string,
     getLabel?: (field: string) => string
 ) => {

package/src/TwoFieldInput.tsx

@@ -83,8 +83,8 @@ export function TwoFieldInput(props: TwoFieldInputProps) {
     const formatValue = (v: ValueType, type?: string) => {
         if (v == null) return '';
         if (typeof v === 'number') return v;
-        if (type === 'date') return DateUtils.formatForInput(v);
-        if (type === 'datetime-local') return DateUtils.formatForInput(v, true);
+        if (type === 'date' || type === 'datetime-local')
+            return DateUtils.formatForInput(v, type);
         return v;
     };