@etsoo/materialui 1.2.58 → 1.2.60

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/lib/FileUploadButton.d.ts

@@ -0,0 +1,22 @@
+import { ButtonProps } from "@mui/material";
+import React from "react";
+/**
+ * File upload button props
+ */
+export type FileUploadButtonProps = ButtonProps<"label"> & {
+    /**
+     * Input field attributes
+     */
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hidden">;
+    /**
+     * Upload files callback
+     * @param files Files
+     */
+    onUploadFiles?: (files: FileList) => void;
+};
+/**
+ * File upload button
+ * @param props Props
+ * @returns Component
+ */
+export declare function FileUploadButton(props: FileUploadButtonProps): React.JSX.Element;

package/lib/FileUploadButton.js

@@ -0,0 +1,27 @@
+import { Button } from "@mui/material";
+import React from "react";
+/**
+ * File upload button
+ * @param props Props
+ * @returns Component
+ */
+export function FileUploadButton(props) {
+    // Destruct
+    const { inputProps, onUploadFiles, children, ...rest } = props;
+    const { onChange } = inputProps !== null && inputProps !== void 0 ? inputProps : {};
+    // Layout
+    return (React.createElement(Button, { component: "label", ...rest },
+        children,
+        React.createElement("input", { type: "file", hidden: true, onChange: (event) => {
+                if (onChange)
+                    onChange(event);
+                if (event.isDefaultPrevented())
+                    return;
+                if (onUploadFiles) {
+                    const files = event.target.files;
+                    if (files == null || files.length == 0)
+                        return;
+                    onUploadFiles(files);
+                }
+            }, ...inputProps })));
+}

package/lib/UserAvatarEditor.js

@@ -8,6 +8,7 @@ import DoneIcon from "@mui/icons-material/Done";
 import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
 import { Labels } from "./app/Labels";
+import { FileUploadButton } from "./FileUploadButton";
 const defaultState = {
     scale: 1,
     rotate: 0
@@ -70,12 +71,9 @@ export function UserAvatarEditor(props) {
     const handleLoad = () => {
         setReady(true);
     };
-    // Handle file change
-    const handleFileChange = (event) => {
+    // Handle file upload
+    const handleFileUpload = (files) => {
         var _a;
-        const files = event.target.files;
-        if (files == null || files.length == 0)
-            return;
         // Reset all settings
         handleReset();
         // Set new preview image
@@ -140,9 +138,7 @@ export function UserAvatarEditor(props) {
     // Load the component
     const AE = React.lazy(() => import("react-avatar-editor"));
     return (React.createElement(Stack, { direction: "column", spacing: 0.5, width: containerWidth },
-        React.createElement(Button, { variant: "outlined", size: "medium", component: "label", startIcon: React.createElement(ComputerIcon, null), fullWidth: true },
-            labels.upload,
-            React.createElement("input", { id: "fileInput", type: "file", accept: "image/png, image/jpeg", multiple: false, hidden: true, onChange: handleFileChange })),
+        React.createElement(FileUploadButton, { variant: "outlined", size: "medium", startIcon: React.createElement(ComputerIcon, null), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" } }, labels.upload),
         React.createElement(Stack, { direction: "row", spacing: 0.5 },
             React.createElement(React.Suspense, { fallback: React.createElement(Skeleton, { variant: "rounded", width: width, height: height }) },
                 React.createElement(AE, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: previewImage !== null && previewImage !== void 0 ? previewImage : "", scale: editorState.scale, rotate: editorState.rotate })),

package/lib/index.d.ts

@@ -47,6 +47,7 @@ export * from "./DnDList";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./FabBox";
+export * from "./FileUploadButton";
 export * from "./FlexBox";
 export * from "./GridDataFormat";
 export * from "./HiSelector";

package/lib/index.js

@@ -47,6 +47,7 @@ export * from "./DnDList";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./FabBox";
+export * from "./FileUploadButton";
 export * from "./FlexBox";
 export * from "./GridDataFormat";
 export * from "./HiSelector";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.58",
+  "version": "1.2.60",
   "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>
   );
 }

package/src/FileUploadButton.tsx

@@ -0,0 +1,55 @@
+import { Button, ButtonProps } from "@mui/material";
+import React from "react";
+
+/**
+ * File upload button props
+ */
+export type FileUploadButtonProps = ButtonProps<"label"> & {
+  /**
+   * Input field attributes
+   */
+  inputProps?: Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "type" | "hidden"
+  >;
+
+  /**
+   * Upload files callback
+   * @param files Files
+   */
+  onUploadFiles?: (files: FileList) => void;
+};
+
+/**
+ * File upload button
+ * @param props Props
+ * @returns Component
+ */
+export function FileUploadButton(props: FileUploadButtonProps) {
+  // Destruct
+  const { inputProps, onUploadFiles, children, ...rest } = props;
+
+  const { onChange } = inputProps ?? {};
+
+  // Layout
+  return (
+    <Button component="label" {...rest}>
+      {children}
+      <input
+        type="file"
+        hidden={true}
+        onChange={(event) => {
+          if (onChange) onChange(event);
+          if (event.isDefaultPrevented()) return;
+
+          if (onUploadFiles) {
+            const files = event.target.files;
+            if (files == null || files.length == 0) return;
+            onUploadFiles(files);
+          }
+        }}
+        {...inputProps}
+      />
+    </Button>
+  );
+}

package/src/UserAvatarEditor.tsx

@@ -16,6 +16,7 @@ import DoneIcon from "@mui/icons-material/Done";
 import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
 import { Labels } from "./app/Labels";
+import { FileUploadButton } from "./FileUploadButton";
 
 /**
  * User avatar editor to Blob helper
@@ -182,11 +183,8 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     setReady(true);
   };
 
-  // Handle file change
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = event.target.files;
-    if (files == null || files.length == 0) return;
-
+  // Handle file upload
+  const handleFileUpload = (files: FileList) => {
     // Reset all settings
     handleReset();
 
@@ -266,23 +264,16 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
 
   return (
     <Stack direction="column" spacing={0.5} width={containerWidth}>
-      <Button
+      <FileUploadButton
         variant="outlined"
         size="medium"
-        component="label"
         startIcon={<ComputerIcon />}
         fullWidth
+        onUploadFiles={handleFileUpload}
+        inputProps={{ multiple: false, accept: "image/png, image/jpeg" }}
       >
         {labels.upload}
-        <input
-          id="fileInput"
-          type="file"
-          accept="image/png, image/jpeg"
-          multiple={false}
-          hidden
-          onChange={handleFileChange}
-        />
-      </Button>
+      </FileUploadButton>
       <Stack direction="row" spacing={0.5}>
         <React.Suspense
           fallback={

package/src/index.ts

@@ -50,6 +50,7 @@ export * from "./DnDList";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./FabBox";
+export * from "./FileUploadButton";
 export * from "./FlexBox";
 export * from "./GridDataFormat";
 export * from "./HiSelector";