...

1 files changed, 247 insertions, 0 deletions

diff --git a/FrontEnd/src/views/common/input/InputPanel.tsx b/FrontEnd/src/views/common/input/InputPanel.tsx
new file mode 100644
index 00000000..1270cc53
--- /dev/null
+++ b/FrontEnd/src/views/common/input/InputPanel.tsx
@@ -0,0 +1,247 @@
+import React from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { TwitterPicker } from "react-color";
+
+import { convertI18nText, I18nText } from "@/common";
+
+import "./InputPanel.css";
+
+export interface TextInput {
+  type: "text";
+  label?: I18nText;
+  helper?: I18nText;
+  password?: boolean;
+}
+
+export interface BoolInput {
+  type: "bool";
+  label: I18nText;
+  helper?: I18nText;
+}
+
+export interface SelectInputOption {
+  value: string;
+  label: I18nText;
+  icon?: React.ReactElement;
+}
+
+export interface SelectInput {
+  type: "select";
+  label: I18nText;
+  options: SelectInputOption[];
+}
+
+export interface ColorInput {
+  type: "color";
+  label?: I18nText;
+}
+
+export interface DateTimeInput {
+  type: "datetime";
+  label?: I18nText;
+  helper?: I18nText;
+}
+
+export type Input =
+  | TextInput
+  | BoolInput
+  | SelectInput
+  | ColorInput
+  | DateTimeInput;
+
+interface InputTypeToValueTypeMap {
+  text: string;
+  bool: boolean;
+  select: string;
+  color: string;
+  datetime: string;
+}
+
+type ValueTypes = InputTypeToValueTypeMap[keyof InputTypeToValueTypeMap];
+
+type MapInputTypeToValueType<Type> = Type extends keyof InputTypeToValueTypeMap
+  ? InputTypeToValueTypeMap[Type]
+  : never;
+
+type MapInputToValueType<T> = T extends Input
+  ? MapInputTypeToValueType<T["type"]>
+  : T;
+
+type MapInputListToValueTypeList<Tuple extends readonly Input[]> = {
+  [Index in keyof Tuple]: MapInputToValueType<Tuple[Index]>;
+} & { length: Tuple["length"] };
+
+export type OperationInputError = (I18nText | null | undefined)[];
+
+export interface InputPanelProps<InputList extends readonly Input[]> {
+  scheme: InputList;
+  values: MapInputListToValueTypeList<InputList>;
+  onChange: (
+    values: MapInputListToValueTypeList<InputList>,
+    index: number
+  ) => void;
+  error?: OperationInputError;
+  disable?: boolean;
+}
+
+const InputPanel = <InputList extends readonly Input[]>(
+  props: InputPanelProps<InputList>
+): React.ReactElement => {
+  const { values, onChange, scheme, error, disable } = props;
+
+  const { t } = useTranslation();
+
+  const updateValue = (index: number, newValue: ValueTypes): void => {
+    const oldValues = values;
+    const newValues = oldValues.slice();
+    newValues[index] = newValue;
+    onChange(
+      newValues as unknown as MapInputListToValueTypeList<InputList>,
+      index
+    );
+  };
+
+  return (
+    <div>
+      {scheme.map((item, index) => {
+        const v = values[index];
+        const e: string | null = convertI18nText(error?.[index], t);
+
+        if (item.type === "text") {
+          return (
+            <div
+              key={index}
+              className={classNames("cru-input-panel-group", e && "error")}
+            >
+              {item.label && (
+                <label className="cru-input-panel-label">
+                  {convertI18nText(item.label, t)}
+                </label>
+              )}
+              <input
+                type={item.password === true ? "password" : "text"}
+                value={v as string}
+                onChange={(e) => {
+                  const v = e.target.value;
+                  updateValue(index, v);
+                }}
+                disabled={disable}
+              />
+              {e && <div className="cru-input-panel-error-text">{e}</div>}
+              {item.helper && (
+                <div className="cru-input-panel-helper-text">
+                  {convertI18nText(item.helper, t)}
+                </div>
+              )}
+            </div>
+          );
+        } else if (item.type === "bool") {
+          return (
+            <div
+              key={index}
+              className={classNames("cru-input-panel-group", e && "error")}
+            >
+              <input
+                type="checkbox"
+                checked={v as boolean}
+                onChange={(event) => {
+                  const value = event.currentTarget.checked;
+                  updateValue(index, value);
+                }}
+                disabled={disable}
+              />
+              <label className="cru-input-panel-inline-label">
+                {convertI18nText(item.label, t)}
+              </label>
+              {e != null && (
+                <div className="cru-input-panel-error-text">{e}</div>
+              )}
+              {item.helper && (
+                <div className="cru-input-panel-helper-text">
+                  {convertI18nText(item.helper, t)}
+                </div>
+              )}
+            </div>
+          );
+        } else if (item.type === "select") {
+          return (
+            <div
+              key={index}
+              className={classNames("cru-input-panel-group", e && "error")}
+            >
+              <label className="cru-input-panel-label">
+                {convertI18nText(item.label, t)}
+              </label>
+              <select
+                value={v as string}
+                onChange={(event) => {
+                  const value = event.target.value;
+                  updateValue(index, value);
+                }}
+                disabled={disable}
+              >
+                {item.options.map((option, i) => {
+                  return (
+                    <option value={option.value} key={i}>
+                      {option.icon}
+                      {convertI18nText(option.label, t)}
+                    </option>
+                  );
+                })}
+              </select>
+            </div>
+          );
+        } else if (item.type === "color") {
+          return (
+            <div
+              key={index}
+              className={classNames("cru-input-panel-group", e && "error")}
+            >
+              <label className="cru-input-panel-inline-label">
+                {convertI18nText(item.label, t)}
+              </label>
+              <TwitterPicker
+                color={v as string}
+                triangle="hide"
+                onChange={(result) => updateValue(index, result.hex)}
+              />
+            </div>
+          );
+        } else if (item.type === "datetime") {
+          return (
+            <div
+              key={index}
+              className={classNames("cru-input-panel-group", e && "error")}
+            >
+              {item.label && (
+                <label className="cru-input-panel-label">
+                  {convertI18nText(item.label, t)}
+                </label>
+              )}
+              <input
+                type="datetime-local"
+                value={v as string}
+                onChange={(e) => {
+                  const v = e.target.value;
+                  updateValue(index, v);
+                }}
+                disabled={disable}
+              />
+              {e != null && (
+                <div className="cru-input-panel-error-text">{e}</div>
+              )}
+              {item.helper && (
+                <div className="cru-input-panel-helper-text">
+                  {convertI18nText(item.helper, t)}
+                </div>
+              )}
+            </div>
+          );
+        }
+      })}
+    </div>
+  );
+};
+
+export default InputPanel;