@etsoo/materialui 1.2.58 → 1.2.59

package/lib/ComboBox.d.ts

@@ -29,6 +29,14 @@ export type ComboBoxProps<T extends object = ListType, D extends DataTypes.Keys<
      * Array of options.
      */
     options?: ReadonlyArray<T>;
+    /**
+     * Add label
+     */
+    addLabel?: string;
+    /**
+     * On add callback
+     */
+    onAdd?: (callback: () => void) => void;
 };
 /**
  * ComboBox

package/lib/ComboBox.js

@@ -1,8 +1,9 @@
 import { Keyboard } from "@etsoo/shared";
-import { Autocomplete } from "@mui/material";
+import { Autocomplete, IconButton, Stack } from "@mui/material";
 import React from "react";
 import { Utils as SharedUtils } from "@etsoo/shared";
 import { ReactUtils } from "@etsoo/react";
+import AddIcon from "@mui/icons-material/Add";
 import { SearchField } from "./SearchField";
 import { InputField } from "./InputField";
 import { globalApp } from "./app/ReactApp";
@@ -13,9 +14,9 @@ import { globalApp } from "./app/ReactApp";
  */
 export function ComboBox(props) {
     // Labels
-    const labels = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "open");
+    const labels = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "open", "add");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px" }, noOptionsText = labels === null || labels === void 0 ? void 0 : labels.noOptions, loadingText = labels === null || labels === void 0 ? void 0 : labels.loading, openText = labels === null || labels === void 0 ? void 0 : labels.open, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px", flexGrow: 2 }, noOptionsText = labels === null || labels === void 0 ? void 0 : labels.noOptions, loadingText = labels === null || labels === void 0 ? void 0 : labels.loading, openText = labels === null || labels === void 0 ? void 0 : labels.open, addLabel = labels === null || labels === void 0 ? void 0 : labels.add, onAdd, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
@@ -88,8 +89,8 @@ export function ComboBox(props) {
             }
         }
     };
-    React.useEffect(() => {
-        if (propertyWay || loadData == null)
+    const doLoadData = React.useCallback(() => {
+        if (loadData == null)
             return;
         loadData().then((result) => {
             if (result == null || !isMounted.current)
@@ -101,7 +102,12 @@ export function ComboBox(props) {
             }
             setOptions(result);
         });
-    }, [propertyWay, autoAddBlankItem, idField, labelField]);
+    }, [loadData, autoAddBlankItem, idField, labelField]);
+    React.useEffect(() => {
+        if (propertyWay)
+            return;
+        doLoadData();
+    }, [propertyWay, doLoadData]);
     React.useEffect(() => {
         return () => {
             isMounted.current = false;
@@ -110,13 +116,18 @@ export function ComboBox(props) {
     // Layout
     return (React.createElement("div", null,
         React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }),
-        React.createElement(Autocomplete, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
-                // Set value
-                setInputValue(value);
-                // Custom
-                if (onChange != null)
-                    onChange(event, value, reason, details);
-                if (onValueChange)
-                    onValueChange(value);
-            }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, ...rest })));
+        React.createElement(Stack, { gap: 0.5, direction: "row", width: "100%" },
+            React.createElement(Autocomplete, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+                    // Set value
+                    setInputValue(value);
+                    // Custom
+                    if (onChange != null)
+                        onChange(event, value, reason, details);
+                    if (onValueChange)
+                        onValueChange(value);
+                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, ...rest }),
+            onAdd && (React.createElement(IconButton, { size: "small", onClick: () => {
+                    onAdd(doLoadData);
+                }, title: addLabel },
+                React.createElement(AddIcon, null))))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.58",
+  "version": "1.2.59",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,7 +52,7 @@
     "@emotion/styled": "^11.11.0",
     "@etsoo/appscript": "^1.4.19",
     "@etsoo/notificationbase": "^1.1.25",
-    "@etsoo/react": "^1.6.92",
+    "@etsoo/react": "^1.6.93",
     "@etsoo/shared": "^1.2.5",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.5",

package/src/ComboBox.tsx

@@ -5,10 +5,16 @@ import {
   LabelDefaultType,
   ListType
 } from "@etsoo/shared";
-import { Autocomplete, AutocompleteRenderInputParams } from "@mui/material";
+import {
+  Autocomplete,
+  AutocompleteRenderInputParams,
+  IconButton,
+  Stack
+} from "@mui/material";
 import React from "react";
 import { Utils as SharedUtils } from "@etsoo/shared";
 import { ReactUtils } from "@etsoo/react";
+import AddIcon from "@mui/icons-material/Add";
 import { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
 import { SearchField } from "./SearchField";
 import { InputField } from "./InputField";
@@ -51,6 +57,16 @@ export type ComboBoxProps<
    * Array of options.
    */
   options?: ReadonlyArray<T>;
+
+  /**
+   * Add label
+   */
+  addLabel?: string;
+
+  /**
+   * On add callback
+   */
+  onAdd?: (callback: () => void) => void;
 };
 
 /**
@@ -64,7 +80,7 @@ export function ComboBox<
   L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
 >(props: ComboBoxProps<T, D, L>) {
   // Labels
-  const labels = globalApp?.getLabels("noOptions", "loading", "open");
+  const labels = globalApp?.getLabels("noOptions", "loading", "open", "add");
 
   // Destruct
   const {
@@ -94,10 +110,12 @@ export function ComboBox<
     value,
     disableCloseOnSelect = false,
     getOptionLabel = (option: T) => `${option[labelField]}`,
-    sx = { minWidth: "150px" },
+    sx = { minWidth: "150px", flexGrow: 2 },
     noOptionsText = labels?.noOptions,
     loadingText = labels?.loading,
     openText = labels?.open,
+    addLabel = labels?.add,
+    onAdd,
     ...rest
   } = props;
 
@@ -189,8 +207,8 @@ export function ComboBox<
     }
   };
 
-  React.useEffect(() => {
-    if (propertyWay || loadData == null) return;
+  const doLoadData = React.useCallback(() => {
+    if (loadData == null) return;
     loadData().then((result) => {
       if (result == null || !isMounted.current) return;
       if (onLoadData) onLoadData(result);
@@ -199,7 +217,12 @@ export function ComboBox<
       }
       setOptions(result);
     });
-  }, [propertyWay, autoAddBlankItem, idField, labelField]);
+  }, [loadData, autoAddBlankItem, idField, labelField]);
+
+  React.useEffect(() => {
+    if (propertyWay) return;
+    doLoadData();
+  }, [propertyWay, doLoadData]);
 
   React.useEffect(() => {
     return () => {
@@ -221,55 +244,68 @@ export function ComboBox<
         onChange={inputOnChange}
       />
       {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
-      <Autocomplete<T, false, false, false>
-        value={stateValue}
-        disableCloseOnSelect={disableCloseOnSelect}
-        getOptionLabel={getOptionLabel}
-        isOptionEqualToValue={(option: T, value: T) =>
-          option[idField] === value[idField]
-        }
-        onChange={(event, value, reason, details) => {
-          // Set value
-          setInputValue(value);
+      <Stack gap={0.5} direction="row" width="100%">
+        <Autocomplete<T, false, false, false>
+          value={stateValue}
+          disableCloseOnSelect={disableCloseOnSelect}
+          getOptionLabel={getOptionLabel}
+          isOptionEqualToValue={(option: T, value: T) =>
+            option[idField] === value[idField]
+          }
+          onChange={(event, value, reason, details) => {
+            // Set value
+            setInputValue(value);
 
-          // Custom
-          if (onChange != null) onChange(event, value, reason, details);
+            // Custom
+            if (onChange != null) onChange(event, value, reason, details);
 
-          if (onValueChange) onValueChange(value);
-        }}
-        openOnFocus={openOnFocus}
-        sx={sx}
-        renderInput={(params) =>
-          search ? (
-            <SearchField
-              {...addReadOnly(params)}
-              label={label}
-              name={name + "Input"}
-              margin={inputMargin}
-              variant={inputVariant}
-              required={inputRequired}
-              error={inputError}
-              helperText={inputHelperText}
-            />
-          ) : (
-            <InputField
-              {...addReadOnly(params)}
-              label={label}
-              name={name + "Input"}
-              margin={inputMargin}
-              variant={inputVariant}
-              required={inputRequired}
-              error={inputError}
-              helperText={inputHelperText}
-            />
-          )
-        }
-        options={localOptions}
-        noOptionsText={noOptionsText}
-        loadingText={loadingText}
-        openText={openText}
-        {...rest}
-      />
+            if (onValueChange) onValueChange(value);
+          }}
+          openOnFocus={openOnFocus}
+          sx={sx}
+          renderInput={(params) =>
+            search ? (
+              <SearchField
+                {...addReadOnly(params)}
+                label={label}
+                name={name + "Input"}
+                margin={inputMargin}
+                variant={inputVariant}
+                required={inputRequired}
+                error={inputError}
+                helperText={inputHelperText}
+              />
+            ) : (
+              <InputField
+                {...addReadOnly(params)}
+                label={label}
+                name={name + "Input"}
+                margin={inputMargin}
+                variant={inputVariant}
+                required={inputRequired}
+                error={inputError}
+                helperText={inputHelperText}
+              />
+            )
+          }
+          options={localOptions}
+          noOptionsText={noOptionsText}
+          loadingText={loadingText}
+          openText={openText}
+          {...rest}
+        />
+        {onAdd && (
+          <IconButton
+            size="small"
+            onClick={() => {
+              onAdd(doLoadData);
+            }}
+            title={addLabel}
+          >
+            <AddIcon />
+          </IconButton>
+        )}
+      </Stack>
     </div>
   );
 }