@etsoo/materialui 1.0.36 → 1.0.38

package/lib/NotifierMU.js

@@ -55,6 +55,7 @@ export class NotificationMU extends NotificationReact {
         // Callback
         const callback = async (_event) => {
             await this.returnValue(undefined);
+            return true;
         };
         return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
             React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
@@ -71,7 +72,10 @@ export class NotificationMU extends NotificationReact {
         const labels = Labels.NotificationMU;
         const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.confirmTitle;
         const { buttons, okLabel = labels.confirmYes, cancelLabel = labels.confirmNo, cancelButton = true, inputs, fullScreen, fullWidth = true, maxWidth, primaryButton } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
-        const callback = async (_event, value) => await this.returnValue(value);
+        const callback = async (_event, value) => {
+            await this.returnValue(value);
+            return true;
+        };
         return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
             React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
                 React.createElement(Help, { color: "action" }),
@@ -134,7 +138,7 @@ export class NotificationMU extends NotificationReact {
                         const dateValue = input.valueAsDate;
                         if (dateValue == null && input.required) {
                             input.focus();
-                            return;
+                            return false;
                         }
                         result = this.onReturn(dateValue);
                     }
@@ -142,7 +146,7 @@ export class NotificationMU extends NotificationReact {
                         const numberValue = input.valueAsNumber;
                         if (isNaN(numberValue) && input.required) {
                             input.focus();
-                            return;
+                            return false;
                         }
                         result = this.onReturn(numberValue);
                     }
@@ -154,7 +158,7 @@ export class NotificationMU extends NotificationReact {
                         const textValue = input.value.trim();
                         if (textValue === '' && input.required) {
                             input.focus();
-                            return;
+                            return false;
                         }
                         result = this.onReturn(textValue);
                     }
@@ -168,14 +172,15 @@ export class NotificationMU extends NotificationReact {
             const v = await result;
             if (v === false) {
                 input === null || input === void 0 ? void 0 : input.focus();
-                return;
+                return false;
             }
             if (typeof v === 'string') {
                 setError(v);
                 input === null || input === void 0 ? void 0 : input.focus();
-                return;
+                return false;
             }
             this.dismiss();
+            return true;
         };
         let localInputs;
         let value = undefined;

package/lib/OptionGroup.d.ts

@@ -1,6 +1,16 @@
-/// <reference types="react" />
 import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from '@etsoo/shared';
 import { FormControlProps } from '@mui/material';
+import React from 'react';
+/**
+ * OptionGroup methods ref
+ */
+export interface OptionGroupRef {
+    /**
+     * Disable specific items with their ids
+     * @param ids Ids
+     */
+    disable(ids: unknown[]): void;
+}
 /**
  * OptionGroup props
  */
@@ -25,6 +35,10 @@ export declare type OptionGroupProps<T extends object, D extends DataTypes.Keys<
      * Label field
      */
     labelField?: L;
+    /**
+     * Methods
+     */
+    mRef?: React.Ref<OptionGroupRef>;
     /**
      * Multiple choose item
      */

package/lib/OptionGroup.js

@@ -8,7 +8,7 @@ import React from 'react';
  */
 export function OptionGroup(props) {
     // Destruct
-    const { getOptionLabel, defaultValue, idField = 'id', label, labelField = 'label', multiple = false, name, onValueChange, options, readOnly, row, size, ...rest } = props;
+    const { getOptionLabel, defaultValue, idField = 'id', label, labelField = 'label', multiple = false, mRef, name, onValueChange, options, readOnly, row, size, ...rest } = props;
     // Get option value
     // D type should be the source id type
     const getOptionValue = (option) => {
@@ -23,6 +23,8 @@ export function OptionGroup(props) {
         : Array.isArray(defaultValue)
             ? defaultValue
             : [defaultValue]);
+    // Disabled ids
+    const [disabledIds, setDisabledIds] = React.useState();
     // Item checked
     const itemChecked = (option) => {
         // Value
@@ -31,12 +33,19 @@ export function OptionGroup(props) {
             return false;
         return values.includes(value);
     };
+    React.useImperativeHandle(mRef, () => ({
+        disable(ids) {
+            setDisabledIds(ids);
+        }
+    }));
     // First item value
     const firstOptionValue = getOptionValue(options[0]);
     // Items
     const list = options.map((option) => {
+        // Value
+        const ov = getOptionValue(option);
         // Control
-        const control = multiple ? (React.createElement(Checkbox, { name: name, readOnly: readOnly, size: size, checked: itemChecked(option), onChange: (event) => {
+        const control = multiple ? (React.createElement(Checkbox, { name: name, readOnly: readOnly, size: size, checked: itemChecked(option), disabled: disabledIds === null || disabledIds === void 0 ? void 0 : disabledIds.includes(ov), onChange: (event) => {
                 if (firstOptionValue == null)
                     return;
                 const typeValue = Utils.parseString(event.target.value, firstOptionValue);
@@ -55,7 +64,7 @@ export function OptionGroup(props) {
                 if (onValueChange)
                     onValueChange(changedValues);
                 setValues(changedValues);
-            } })) : (React.createElement(Radio, { size: size, readOnly: readOnly }));
+            } })) : (React.createElement(Radio, { disabled: disabledIds === null || disabledIds === void 0 ? void 0 : disabledIds.includes(ov), size: size, readOnly: readOnly }));
         // Label
         const label = getOptionLabel == null
             ? `${option[labelField]}`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.36",
+    "version": "1.0.38",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -53,7 +53,7 @@
         "@emotion/styled": "^11.10.4",
         "@etsoo/appscript": "^1.3.0",
         "@etsoo/notificationbase": "^1.1.11",
-        "@etsoo/react": "^1.6.10",
+        "@etsoo/react": "^1.6.11",
         "@etsoo/shared": "^1.1.58",
         "@mui/icons-material": "^5.10.6",
         "@mui/material": "^5.10.7",

package/src/NotifierMU.tsx

@@ -100,6 +100,7 @@ export class NotificationMU extends NotificationReact {
             _event: React.MouseEvent<HTMLButtonElement>
         ) => {
             await this.returnValue(undefined);
+            return true;
         };
 
         return (
@@ -158,7 +159,10 @@ export class NotificationMU extends NotificationReact {
         const callback = async (
             _event: React.MouseEvent<HTMLButtonElement>,
             value: boolean
-        ) => await this.returnValue(value);
+        ) => {
+            await this.returnValue(value);
+            return true;
+        };
 
         return (
             <Dialog
@@ -291,14 +295,14 @@ export class NotificationMU extends NotificationReact {
                         const dateValue = input.valueAsDate;
                         if (dateValue == null && input.required) {
                             input.focus();
-                            return;
+                            return false;
                         }
                         result = this.onReturn(dateValue);
                     } else if (type === 'number') {
                         const numberValue = input.valueAsNumber;
                         if (isNaN(numberValue) && input.required) {
                             input.focus();
-                            return;
+                            return false;
                         }
                         result = this.onReturn(numberValue);
                     } else if (type === 'switch') {
@@ -308,7 +312,7 @@ export class NotificationMU extends NotificationReact {
                         const textValue = input.value.trim();
                         if (textValue === '' && input.required) {
                             input.focus();
-                            return;
+                            return false;
                         }
                         result = this.onReturn(textValue);
                     }
@@ -322,15 +326,16 @@ export class NotificationMU extends NotificationReact {
             const v = await result;
             if (v === false) {
                 input?.focus();
-                return;
+                return false;
             }
             if (typeof v === 'string') {
                 setError(v);
                 input?.focus();
-                return;
+                return false;
             }
 
             this.dismiss();
+            return true;
         };
 
         let localInputs: React.ReactNode;

package/src/OptionGroup.tsx

@@ -17,6 +17,17 @@ import {
 } from '@mui/material';
 import React from 'react';
 
+/**
+ * OptionGroup methods ref
+ */
+export interface OptionGroupRef {
+    /**
+     * Disable specific items with their ids
+     * @param ids Ids
+     */
+    disable(ids: unknown[]): void;
+}
+
 /**
  * OptionGroup props
  */
@@ -50,6 +61,11 @@ export type OptionGroupProps<
      */
     labelField?: L;
 
+    /**
+     * Methods
+     */
+    mRef?: React.Ref<OptionGroupRef>;
+
     /**
      * Multiple choose item
      */
@@ -99,6 +115,7 @@ export function OptionGroup<
         label,
         labelField = 'label' as L,
         multiple = false,
+        mRef,
         name,
         onValueChange,
         options,
@@ -125,6 +142,9 @@ export function OptionGroup<
             : [defaultValue]
     );
 
+    // Disabled ids
+    const [disabledIds, setDisabledIds] = React.useState<unknown[]>();
+
     // Item checked
     const itemChecked = (option: T) => {
         // Value
@@ -134,11 +154,20 @@ export function OptionGroup<
         return values.includes(value);
     };
 
+    React.useImperativeHandle(mRef, () => ({
+        disable(ids: unknown[]) {
+            setDisabledIds(ids);
+        }
+    }));
+
     // First item value
     const firstOptionValue = getOptionValue(options[0]);
 
     // Items
     const list = options.map((option) => {
+        // Value
+        const ov = getOptionValue(option);
+
         // Control
         const control = multiple ? (
             <Checkbox
@@ -146,6 +175,7 @@ export function OptionGroup<
                 readOnly={readOnly}
                 size={size}
                 checked={itemChecked(option)}
+                disabled={disabledIds?.includes(ov)}
                 onChange={(event) => {
                     if (firstOptionValue == null) return;
 
@@ -171,7 +201,11 @@ export function OptionGroup<
                 }}
             />
         ) : (
-            <Radio size={size} readOnly={readOnly} />
+            <Radio
+                disabled={disabledIds?.includes(ov)}
+                size={size}
+                readOnly={readOnly}
+            />
         );
 
         // Label