@conduction/components 2.0.33 → 2.1.0

package/src/components/formFields/createKeyValue/CreateKeyValue.tsx

@@ -1,125 +1,125 @@
-import * as React from "react";
-import * as styles from "./CreateKeyValue.module.css";
-import { Control, Controller, FieldValues } from "react-hook-form";
-import { IReactHookFormProps } from "../types";
-import { IInputProps } from "../input";
-import { Button } from "@gemeente-denhaag/components-react";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@gemeente-denhaag/table";
-
-/**
- * Export KeyValue input component (wrapped in FormFieldGroup)
- */
-interface CreateKeyValueProps {
-  control: Control<FieldValues, any>;
-  defaultValue?: IKeyValue[];
-}
-
-interface IKeyValue {
-  key: string;
-  value: string;
-}
-
-export const CreateKeyValue: React.FC<CreateKeyValueProps & IInputProps & IReactHookFormProps> = ({
-  name,
-  errors,
-  control,
-  validation,
-  defaultValue,
-}) => {
-  return (
-    <Controller
-      {...{ control, name, errors }}
-      rules={validation}
-      render={({ field: { onChange } }) => {
-        return <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors }} />;
-      }}
-    />
-  );
-};
-
-/**
- * Internal KeyValueComponent (contains all required logic)
- */
-interface CreateKeyValueComponentProps {
-  defaultValue?: IKeyValue[];
-  handleChange: (...event: any[]) => void;
-}
-
-const KeyValueComponent: React.FC<CreateKeyValueComponentProps> = ({ defaultValue, handleChange }) => {
-  const [currentKey, setCurrentKey] = React.useState<string>("");
-  const [currentValue, setCurrentValue] = React.useState<string>("");
-  const [keyValues, setKeyValues] = React.useState<IKeyValue[]>(defaultValue ?? []);
-
-  const currentKeyRef = React.useRef(null);
-  const currentValueRef = React.useRef(null);
-
-  const handleCreate = (): void => {
-    const keyValue: IKeyValue = { key: currentKey, value: currentValue };
-
-    setCurrentKey("");
-    setCurrentValue("");
-
-    setKeyValues([...keyValues, keyValue]);
-  };
-
-  React.useEffect(() => {
-    defaultValue && setKeyValues(defaultValue);
-  }, [defaultValue]);
-
-  React.useEffect(() => {
-    handleChange(keyValues);
-  }, [keyValues]);
-
-  return (
-    <div className={styles.keyValue}>
-      {keyValues && (
-        <Table className={styles.table}>
-          <TableHead>
-            <TableRow>
-              <TableHeader>Key</TableHeader>
-              <TableHeader>Value</TableHeader>
-              <TableHeader />
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {keyValues.map((keyValue, idx) => (
-              <TableRow key={`${keyValue}${idx}`}>
-                <TableCell>{keyValue.key}</TableCell>
-                <TableCell>{keyValue.value}</TableCell>
-                <TableCell className={styles.tdDelete}>
-                  <Button onClick={() => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue))}>
-                    Delete
-                  </Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      )}
-
-      <div className={styles.form}>
-        <input
-          type="text"
-          placeholder="Key"
-          value={currentKey}
-          ref={currentKeyRef}
-          className="denhaag-textfield__input"
-          onChange={(e) => setCurrentKey(e.target.value)}
-        />
-
-        <input
-          type="text"
-          placeholder="Value"
-          value={currentValue}
-          ref={currentValueRef}
-          className="denhaag-textfield__input"
-          onChange={(e) => setCurrentValue(e.target.value)}
-        />
-
-        <Button onClick={handleCreate} disabled={!currentKey || !currentValue}>
-          Add
-        </Button>
-      </div>
-    </div>
-  );
-};
+import * as React from "react";
+import * as styles from "./CreateKeyValue.module.css";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { IReactHookFormProps } from "../types";
+import { IInputProps } from "../input";
+import { Button } from "@gemeente-denhaag/components-react";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@gemeente-denhaag/table";
+
+/**
+ * Export KeyValue input component (wrapped in FormFieldGroup)
+ */
+interface CreateKeyValueProps {
+  control: Control<FieldValues, any>;
+  defaultValue?: IKeyValue[];
+}
+
+interface IKeyValue {
+  key: string;
+  value: string;
+}
+
+export const CreateKeyValue: React.FC<CreateKeyValueProps & IInputProps & IReactHookFormProps> = ({
+  name,
+  errors,
+  control,
+  validation,
+  defaultValue,
+}) => {
+  return (
+    <Controller
+      {...{ control, name, errors }}
+      rules={validation}
+      render={({ field: { onChange } }) => {
+        return <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors }} />;
+      }}
+    />
+  );
+};
+
+/**
+ * Internal KeyValueComponent (contains all required logic)
+ */
+interface CreateKeyValueComponentProps {
+  defaultValue?: IKeyValue[];
+  handleChange: (...event: any[]) => void;
+}
+
+const KeyValueComponent: React.FC<CreateKeyValueComponentProps> = ({ defaultValue, handleChange }) => {
+  const [currentKey, setCurrentKey] = React.useState<string>("");
+  const [currentValue, setCurrentValue] = React.useState<string>("");
+  const [keyValues, setKeyValues] = React.useState<IKeyValue[]>(defaultValue ?? []);
+
+  const currentKeyRef = React.useRef(null);
+  const currentValueRef = React.useRef(null);
+
+  const handleCreate = (): void => {
+    const keyValue: IKeyValue = { key: currentKey, value: currentValue };
+
+    setCurrentKey("");
+    setCurrentValue("");
+
+    setKeyValues([...keyValues, keyValue]);
+  };
+
+  React.useEffect(() => {
+    defaultValue && setKeyValues(defaultValue);
+  }, [defaultValue]);
+
+  React.useEffect(() => {
+    handleChange(keyValues);
+  }, [keyValues]);
+
+  return (
+    <div className={styles.keyValue}>
+      {keyValues && (
+        <Table className={styles.table}>
+          <TableHead>
+            <TableRow>
+              <TableHeader>Key</TableHeader>
+              <TableHeader>Value</TableHeader>
+              <TableHeader />
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {keyValues.map((keyValue, idx) => (
+              <TableRow key={`${keyValue}${idx}`}>
+                <TableCell>{keyValue.key}</TableCell>
+                <TableCell>{keyValue.value}</TableCell>
+                <TableCell className={styles.tdDelete}>
+                  <Button onClick={() => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue))}>
+                    Delete
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+
+      <div className={styles.form}>
+        <input
+          type="text"
+          placeholder="Key"
+          value={currentKey}
+          ref={currentKeyRef}
+          className="denhaag-textfield__input"
+          onChange={(e) => setCurrentKey(e.target.value)}
+        />
+
+        <input
+          type="text"
+          placeholder="Value"
+          value={currentValue}
+          ref={currentValueRef}
+          className="denhaag-textfield__input"
+          onChange={(e) => setCurrentValue(e.target.value)}
+        />
+
+        <Button onClick={handleCreate} disabled={!currentKey || !currentValue}>
+          Add
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/formFields/index.js

@@ -1,4 +1,4 @@
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
-import { Textarea } from "./textarea";
-import { InputCheckbox } from "./checkbox";
-export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
+import { Textarea } from "./textarea";
+import { InputCheckbox } from "./checkbox";
+export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };

package/src/components/formFields/index.tsx

@@ -1,32 +1,33 @@
-import {
-  InputText,
-  InputPassword,
-  InputEmail,
-  InputURL,
-  InputDate,
-  InputDateTime,
-  InputNumber,
-  InputFile,
-} from "./input";
-import { Textarea } from "./textarea";
-import { InputCheckbox } from "./checkbox";
-import { InputRadio } from "./radio";
-import { SelectSingle, SelectMultiple } from "./select/select";
-import { CreateKeyValue } from "./createKeyValue/CreateKeyValue";
-
-export {
-  InputRadio,
-  InputText,
-  InputPassword,
-  InputEmail,
-  InputURL,
-  InputDate,
-  InputDateTime,
-  InputNumber,
-  InputCheckbox,
-  InputFile,
-  Textarea,
-  SelectSingle,
-  SelectMultiple,
-  CreateKeyValue,
-};
+import {
+  InputText,
+  InputPassword,
+  InputEmail,
+  InputURL,
+  InputDate,
+  InputDateTime,
+  InputNumber,
+  InputFile,
+} from "./input";
+import { Textarea } from "./textarea";
+import { InputCheckbox } from "./checkbox";
+import { InputRadio } from "./radio";
+import { SelectSingle, SelectMultiple, SelectCreate } from "./select/select";
+import { CreateKeyValue } from "./createKeyValue/CreateKeyValue";
+
+export {
+  InputRadio,
+  InputText,
+  InputPassword,
+  InputEmail,
+  InputURL,
+  InputDate,
+  InputDateTime,
+  InputNumber,
+  InputCheckbox,
+  InputFile,
+  Textarea,
+  SelectSingle,
+  SelectMultiple,
+  SelectCreate,
+  CreateKeyValue,
+};

package/src/components/formFields/input.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { TextField } from "@gemeente-denhaag/components-react";
-import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
-export const InputPassword = ({ disabled, name, validation, register, errors, }) => {
-    const [showPassword, setShowPassword] = React.useState(false);
-    return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
-};
-export const InputText = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputEmail = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputDate = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputNumber = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { TextField } from "@gemeente-denhaag/components-react";
+import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
+export const InputPassword = ({ disabled, name, validation, register, errors, }) => {
+    const [showPassword, setShowPassword] = React.useState(false);
+    return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
+};
+export const InputText = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputEmail = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputDate = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputNumber = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));