@etsoo/materialui 1.3.63 → 1.3.65

package/src/custom/FieldCombobox.tsx

@@ -0,0 +1,63 @@
+import { IdType } from "@etsoo/shared";
+import { Typography } from "@mui/material";
+import React from "react";
+import { ComboBoxMultiple } from "../ComboBoxMultiple";
+import { ICustomFieldReact } from "@etsoo/react";
+
+/**
+ * Combobox (multiple values) field creator
+ * type combobox
+ * @returns Component
+ */
+export const FieldCombobox: ICustomFieldReact<IdType[]> = ({
+  field,
+  mref,
+  onChange,
+  defaultValue
+}) => {
+  // State
+  const [ids, setIds] = React.useState<IdType[]>();
+
+  const getValue = () => ids;
+  const setValue = (value: unknown) => {
+    if (Array.isArray(value)) setIds(value);
+    else if (typeof value === "number" || typeof value === "string")
+      setIds([value]);
+  };
+
+  // Ref
+  React.useImperativeHandle(mref, () => ({
+    getValue,
+    setValue
+  }));
+
+  React.useEffect(() => {
+    if (defaultValue == null) return;
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  // Name
+  const name = field.name;
+  if (!name) {
+    return (
+      <Typography>No name for FieldCombobox {JSON.stringify(field)}</Typography>
+    );
+  }
+
+  return (
+    <ComboBoxMultiple
+      label={field.label ?? ""}
+      inputHelperText={field.helperText}
+      name={name}
+      options={field.options}
+      fullWidth
+      idValues={ids}
+      onChange={(_event, value) => {
+        const ids = value.map((v) => v.id);
+        setIds(ids);
+        onChange(name, ids);
+      }}
+      {...field.mainSlotProps}
+    />
+  );
+};

package/src/custom/FieldDateInput.tsx

@@ -0,0 +1,75 @@
+import { ICustomFieldReact } from "@etsoo/react";
+import { DateUtils } from "@etsoo/shared";
+import { Typography } from "@mui/material";
+import React from "react";
+import { InputField } from "../InputField";
+
+/**
+ * Date input field creator
+ * type: date
+ * @returns Component
+ */
+export const FieldDateInput: ICustomFieldReact<Date> = ({
+  field,
+  mref,
+  onChange,
+  defaultValue
+}) => {
+  // Ref
+  const inputRef = React.useRef<HTMLInputElement>();
+
+  const getValue = () =>
+    inputRef.current == null
+      ? undefined
+      : DateUtils.parse(inputRef.current.value);
+
+  const setValue = (value: unknown) => {
+    if (inputRef.current == null) return;
+
+    const date =
+      value instanceof Date
+        ? value
+        : typeof value === "string"
+        ? DateUtils.parse(value)
+        : undefined;
+
+    inputRef.current.value =
+      DateUtils.formatForInput(
+        date,
+        inputRef.current.type === "date" ? undefined : false
+      ) ?? "";
+  };
+
+  React.useImperativeHandle(mref, () => ({
+    getValue,
+    setValue
+  }));
+
+  React.useEffect(() => {
+    if (defaultValue == null) return;
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  // Name
+  const name = field.name;
+  if (!name) {
+    return (
+      <Typography>
+        No name for FieldDateInput {JSON.stringify(field)}
+      </Typography>
+    );
+  }
+
+  return (
+    <InputField
+      label={field.label ?? ""}
+      helperText={field.helperText}
+      inputRef={inputRef}
+      type="date"
+      name={name}
+      fullWidth
+      onChange={() => onChange(name, getValue())}
+      {...field.mainSlotProps}
+    />
+  );
+};

package/src/custom/FieldDivider.tsx

@@ -0,0 +1,18 @@
+import { ICustomFieldReact } from "@etsoo/react";
+import { Divider } from "@mui/material";
+import React from "react";
+import { CustomFieldUtils } from "./CustomFieldUtils";
+
+/**
+ * Divider field creator
+ * type: divider
+ * @returns Component
+ */
+export const FieldDivider: ICustomFieldReact<unknown> = ({ field }) => {
+  return (
+    <React.Fragment>
+      {CustomFieldUtils.createMultilineLabel(field.label)}
+      <Divider {...field.mainSlotProps} />
+    </React.Fragment>
+  );
+};

package/src/custom/FieldInput.tsx

@@ -0,0 +1,49 @@
+import { ICustomFieldReact } from "@etsoo/react";
+import { Typography } from "@mui/material";
+import React from "react";
+import { InputField } from "../InputField";
+
+/**
+ * Input field creator
+ * type: input
+ * @returns Component
+ */
+export const FieldInput: ICustomFieldReact<string> = ({
+  field,
+  mref,
+  onChange,
+  defaultValue
+}) => {
+  // Ref
+  const inputRef = React.useRef<HTMLInputElement>();
+
+  const getValue = () => inputRef.current?.value;
+
+  React.useImperativeHandle(mref, () => ({
+    getValue,
+    setValue(value) {
+      if (inputRef.current) inputRef.current.value = `${value ?? ""}`;
+    }
+  }));
+
+  // Name
+  const name = field.name;
+  if (!name) {
+    return (
+      <Typography>No name for FieldInput {JSON.stringify(field)}</Typography>
+    );
+  }
+
+  return (
+    <InputField
+      label={field.label ?? ""}
+      helperText={field.helperText}
+      inputRef={inputRef}
+      name={name}
+      fullWidth
+      defaultValue={defaultValue}
+      onChange={() => onChange(name, getValue())}
+      {...field.mainSlotProps}
+    />
+  );
+};

package/src/custom/FieldJson.tsx

@@ -0,0 +1,77 @@
+import { ICustomFieldReact } from "@etsoo/react";
+import { Typography } from "@mui/material";
+import React from "react";
+import { InputField } from "../InputField";
+
+function parseJson(value: string | undefined | null) {
+  if (value) {
+    try {
+      return JSON.parse(value);
+    } catch (error) {
+      return undefined;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Textarea field creator
+ * type: json
+ * @returns Component
+ */
+export const FieldJson: ICustomFieldReact<object> = ({
+  field,
+  mref,
+  onChange,
+  defaultValue
+}) => {
+  // Ref
+  const inputRef = React.useRef<HTMLInputElement>();
+
+  const getValue = () => parseJson(inputRef.current?.value);
+
+  const setValue = (value: unknown) => {
+    if (inputRef.current) {
+      const obj =
+        typeof value === "object"
+          ? value
+          : typeof value === "string"
+          ? parseJson(value)
+          : undefined;
+      inputRef.current.value = obj ? JSON.stringify(obj, null, 4) : "";
+    }
+  };
+
+  React.useImperativeHandle(mref, () => ({
+    getValue,
+    setValue
+  }));
+
+  React.useEffect(() => {
+    if (defaultValue == null) return;
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  // Name
+  const name = field.name;
+  if (!name) {
+    return (
+      <Typography>No name for FieldJson {JSON.stringify(field)}</Typography>
+    );
+  }
+
+  return (
+    <InputField
+      label={field.label ?? ""}
+      helperText={field.helperText}
+      name={name}
+      fullWidth
+      multiline
+      rows={4}
+      inputProps={{ maxLength: 1280 }}
+      inputRef={inputRef}
+      onChange={() => onChange(name, getValue())}
+      {...field.mainSlotProps}
+    />
+  );
+};

package/src/custom/FieldLabel.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { CustomFieldUtils } from "./CustomFieldUtils";
+import { ICustomFieldReact } from "@etsoo/react";
+
+/**
+ * Label field creator
+ * type: label
+ * @returns Component
+ */
+export const FieldLabel: ICustomFieldReact<string> = ({
+  field,
+  mref,
+  defaultValue
+}) => {
+  // State
+  const [label, setLabel] = React.useState<string>();
+
+  // Ref
+  const getValue = () => label;
+  const setValue = (value: unknown) => setLabel(`${value ?? ""}`);
+  React.useImperativeHandle(mref, () => ({
+    getValue,
+    setValue
+  }));
+
+  React.useEffect(() => {
+    setLabel(field.label);
+  }, [field.label]);
+
+  React.useEffect(() => {
+    if (defaultValue == null) return;
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  return (
+    <React.Fragment>
+      {CustomFieldUtils.createMultilineLabel(label, field.mainSlotProps)}
+    </React.Fragment>
+  );
+};

package/src/custom/FieldNumberInput.tsx

@@ -0,0 +1,60 @@
+import { ICustomFieldReact } from "@etsoo/react";
+import { Typography } from "@mui/material";
+import React from "react";
+import { NumberInputField } from "../NumberInputField";
+import { NumberUtils } from "@etsoo/shared";
+
+/**
+ * Number input field creator
+ * type: number
+ * @returns Component
+ */
+export const FieldNumberInput: ICustomFieldReact<number> = ({
+  field,
+  mref,
+  onChange,
+  defaultValue
+}) => {
+  // Ref
+  const inputRef = React.useRef<HTMLInputElement>();
+
+  const getValue = () => {
+    const value = inputRef.current?.valueAsNumber;
+    return NumberUtils.parse(value);
+  };
+
+  const setValue = (value: unknown) => {
+    if (inputRef.current) inputRef.current.value = `${value ?? ""}`;
+  };
+  React.useImperativeHandle(mref, () => ({
+    getValue,
+    setValue
+  }));
+
+  React.useEffect(() => {
+    if (defaultValue == null) return;
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  // Name
+  const name = field.name;
+  if (!name) {
+    return (
+      <Typography>
+        No name for FieldNumberInput {JSON.stringify(field)}
+      </Typography>
+    );
+  }
+
+  return (
+    <NumberInputField
+      label={field.label ?? ""}
+      helperText={field.helperText}
+      inputRef={inputRef}
+      name={name}
+      fullWidth
+      onChange={() => onChange(name, getValue())}
+      {...field.mainSlotProps}
+    />
+  );
+};

package/src/custom/FieldRadio.tsx

@@ -0,0 +1,73 @@
+import { ICustomFieldReact } from "@etsoo/react";
+import { IdType } from "@etsoo/shared";
+import { Typography } from "@mui/material";
+import React from "react";
+import { OptionGroup } from "../OptionGroup";
+
+/**
+ * Radio (single value) field creator
+ * type: radio
+ * @returns Component
+ */
+export const FieldRadio: ICustomFieldReact<IdType> = ({
+  field,
+  mref,
+  onChange,
+  defaultValue
+}) => {
+  // State
+  const [value, setLocalValue] = React.useState<IdType>();
+
+  // Ref
+  const getValue = () => value;
+  const setValue = (value: unknown) => {
+    if (Array.isArray(value)) {
+      setLocalValue(value[0]);
+    } else if (typeof value === "string" || typeof value === "number") {
+      setLocalValue(value);
+    } else {
+      setLocalValue(undefined);
+    }
+  };
+  React.useImperativeHandle(mref, () => ({
+    getValue,
+    setValue
+  }));
+
+  React.useEffect(() => {
+    if (defaultValue == null) return;
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  // Name
+  const name = field.name;
+  if (!name) {
+    return (
+      <Typography>No name for FieldRadio {JSON.stringify(field)}</Typography>
+    );
+  }
+
+  return (
+    <OptionGroup
+      name={name}
+      options={field.options ?? []}
+      multiple={false}
+      row
+      helperText={field.helperText}
+      label={field.label}
+      variant="outlined"
+      fullWidth
+      defaultValue={value}
+      onValueChange={(value) => {
+        const newValue = Array.isArray(value)
+          ? value[0]
+          : value == null
+          ? undefined
+          : value;
+        setLocalValue(newValue);
+        onChange(name, newValue);
+      }}
+      {...field.mainSlotProps}
+    />
+  );
+};

package/src/custom/FieldSelect.tsx

@@ -0,0 +1,70 @@
+import { IdType } from "@etsoo/shared";
+import { Typography } from "@mui/material";
+import React from "react";
+import { ICustomFieldReact } from "@etsoo/react";
+import { SelectEx } from "../SelectEx";
+
+/**
+ * Select (single value) field creator
+ * type select
+ * @returns Component
+ */
+export const FieldSelect: ICustomFieldReact<IdType> = ({
+  field,
+  mref,
+  onChange,
+  defaultValue
+}) => {
+  // State
+  const [value, setLocalValue] = React.useState<IdType>();
+
+  const getValue = () => value;
+  const setValue = (value: unknown) => {
+    if (Array.isArray(value)) {
+      setLocalValue(value[0]);
+    } else if (typeof value === "string" || typeof value === "number") {
+      setLocalValue(value);
+    } else {
+      setLocalValue(undefined);
+    }
+  };
+
+  // Ref
+  React.useImperativeHandle(mref, () => ({
+    getValue,
+    setValue
+  }));
+
+  React.useEffect(() => {
+    if (defaultValue == null) return;
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  // Name
+  const name = field.name;
+  if (!name) {
+    return (
+      <Typography>No name for FieldSelect {JSON.stringify(field)}</Typography>
+    );
+  }
+
+  return (
+    <SelectEx
+      label={field.label ?? ""}
+      helperText={field.helperText}
+      name={name}
+      options={field.options}
+      fullWidth
+      onChange={(event) => {
+        const value = event.target.value;
+        const newValue =
+          typeof value === "string" || typeof value === "number"
+            ? value
+            : undefined;
+        setLocalValue(newValue);
+        onChange(name, newValue);
+      }}
+      {...field.mainSlotProps}
+    />
+  );
+};

package/src/custom/FieldSwitch.tsx

@@ -0,0 +1,58 @@
+import { ICustomFieldReact } from "@etsoo/react";
+import React from "react";
+import { SwitchAnt } from "../SwitchAnt";
+import { Typography } from "@mui/material";
+
+/**
+ * Input field creator
+ * type: switch
+ * @returns Component
+ */
+export const FieldSwitch: ICustomFieldReact<boolean> = ({
+  field,
+  mref,
+  onChange,
+  defaultValue
+}) => {
+  // State
+  const [value, setLocalValue] = React.useState<boolean>();
+
+  const getValue = () => value;
+  const setValue = (value: unknown) => {
+    if (typeof value === "boolean") setLocalValue(value);
+    else if (value === "true" || value === "1" || value === 1)
+      setLocalValue(true);
+    else if (value === "false" || value === "0" || value === 0)
+      setLocalValue(false);
+    else setLocalValue(undefined);
+  };
+
+  React.useImperativeHandle(mref, () => ({
+    getValue,
+    setValue
+  }));
+
+  // Name
+  const name = field.name;
+  if (!name) {
+    return (
+      <Typography>No name for FieldSwitch {JSON.stringify(field)}</Typography>
+    );
+  }
+
+  React.useEffect(() => {
+    if (defaultValue == null) return;
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  return (
+    <SwitchAnt
+      name={name}
+      onChange={(_event, value) => {
+        setLocalValue(value);
+        onChange(name, value);
+      }}
+      {...field.mainSlotProps}
+    />
+  );
+};

package/src/custom/FieldTexarea.tsx

@@ -0,0 +1,54 @@
+import { ICustomFieldReact } from "@etsoo/react";
+import { Typography } from "@mui/material";
+import React from "react";
+import { InputField } from "../InputField";
+
+/**
+ * Textarea field creator
+ * type: textarea
+ * @returns Component
+ */
+export const FieldTexarea: ICustomFieldReact<string> = ({
+  field,
+  mref,
+  onChange,
+  defaultValue
+}) => {
+  // Ref
+  const inputRef = React.useRef<HTMLInputElement>();
+
+  const getValue = () => inputRef.current?.value;
+
+  const setValue = (value: unknown) => {
+    if (inputRef.current) inputRef.current.value = `${value ?? ""}`;
+  };
+
+  React.useImperativeHandle(mref, () => ({
+    getValue,
+    setValue
+  }));
+
+  // Name
+  const name = field.name;
+  if (!name) {
+    return (
+      <Typography>No name for FieldTextarea {JSON.stringify(field)}</Typography>
+    );
+  }
+
+  return (
+    <InputField
+      label={field.label ?? ""}
+      helperText={field.helperText}
+      name={name}
+      fullWidth
+      multiline
+      rows={4}
+      inputProps={{ maxLength: 1280 }}
+      inputRef={inputRef}
+      defaultValue={defaultValue}
+      onChange={() => onChange(name, getValue())}
+      {...field.mainSlotProps}
+    />
+  );
+};

package/src/index.ts

@@ -9,6 +9,8 @@ export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 
+export * from "./custom/CustomFieldUtils";
+
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";