@etsoo/materialui 1.0.4 → 1.0.5

package/lib/SelectEx.d.ts

@@ -9,6 +9,14 @@ export declare type SelectExProps<T extends object, D extends DataTypes.Keys<T>
      * Auto add blank item
      */
     autoAddBlankItem?: boolean;
+    /**
+     * The helper text content.
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Input required
+     */
+    inputRequired?: boolean;
     /**
      * Id field
      */

package/lib/SelectEx.js

@@ -1,4 +1,4 @@
-import { Checkbox, FormControl, InputLabel, ListItemText, MenuItem, OutlinedInput, Select } from '@mui/material';
+import { Checkbox, FormControl, FormHelperText, InputLabel, ListItemText, MenuItem, OutlinedInput, Select } from '@mui/material';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
@@ -12,7 +12,7 @@ import { ReactUtils } from '@etsoo/react';
 export function SelectEx(props) {
     var _a;
     // Destruct
-    const { defaultValue, idField = 'id', itemIconRenderer, itemStyle, label, labelField = 'label', loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
+    const { defaultValue, idField = 'id', error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = 'label', loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
     // Options state
     const [localOptions, setOptions] = React.useState(options);
     const isMounted = React.useRef(true);
@@ -112,13 +112,13 @@ export function SelectEx(props) {
         };
     }, []);
     // Layout
-    return (React.createElement(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, fullWidth: fullWidth },
+    return (React.createElement(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, fullWidth: fullWidth, error: error },
         React.createElement(InputLabel, { id: labelId, shrink: search
                 ? MUGlobal.searchFieldShrink
                 : MUGlobal.inputFieldShrink }, label),
         React.createElement(Select, { ref: divRef, value: localOptions.some((option) => itemChecked(getId(option)))
                 ? valueState !== null && valueState !== void 0 ? valueState : ''
-                : '', input: React.createElement(OutlinedInput, { notched: true, label: label }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+                : '', input: React.createElement(OutlinedInput, { notched: true, label: label, required: inputRequired }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                 if (onChange)
                     onChange(event, child);
                 if (multiple)
@@ -154,5 +154,6 @@ export function SelectEx(props) {
                 multiple && React.createElement(Checkbox, { checked: itemChecked(id) }),
                 React.createElement(ListItemText, { primary: label }),
                 itemIconRenderer && (React.createElement(ListItemRightIcon, null, itemIconRenderer(option[idField])))));
-        }))));
+        })),
+        helperText != null && (React.createElement(FormHelperText, null, helperText))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/SelectEx.tsx

@@ -1,6 +1,7 @@
 import {
     Checkbox,
     FormControl,
+    FormHelperText,
     InputLabel,
     ListItemText,
     MenuItem,
@@ -34,6 +35,16 @@ export type SelectExProps<
      */
     autoAddBlankItem?: boolean;
 
+    /**
+     * The helper text content.
+     */
+    helperText?: React.ReactNode;
+
+    /**
+     * Input required
+     */
+    inputRequired?: boolean;
+
     /**
      * Id field
      */
@@ -94,6 +105,9 @@ export function SelectEx<
     const {
         defaultValue,
         idField = 'id' as D,
+        error,
+        helperText,
+        inputRequired,
         itemIconRenderer,
         itemStyle,
         label,
@@ -218,6 +232,7 @@ export function SelectEx<
         <FormControl
             size={search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize}
             fullWidth={fullWidth}
+            error={error}
         >
             <InputLabel
                 id={labelId}
@@ -236,7 +251,13 @@ export function SelectEx<
                         ? valueState ?? ''
                         : ''
                 }
-                input={<OutlinedInput notched label={label} />}
+                input={
+                    <OutlinedInput
+                        notched
+                        label={label}
+                        required={inputRequired}
+                    />
+                }
                 labelId={labelId}
                 name={name}
                 multiple={multiple}
@@ -296,6 +317,9 @@ export function SelectEx<
                     );
                 })}
             </Select>
+            {helperText != null && (
+                <FormHelperText>{helperText}</FormHelperText>
+            )}
         </FormControl>
     );
 }