@etsoo/materialui 1.0.36 → 1.0.37

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.37",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

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