@conduction/components 2.0.22 → 2.0.24

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,22 +1,22 @@
-import { InputText, InputPassword, InputEmail, 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,
-  InputDate,
-  InputDateTime,
-  InputNumber,
-  InputCheckbox,
-  InputFile,
-  Textarea,
-  SelectSingle,
-  SelectMultiple,
-  CreateKeyValue,
-};
+import { InputText, InputPassword, InputEmail, 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,
+  InputDate,
+  InputDateTime,
+  InputNumber,
+  InputCheckbox,
+  InputFile,
+  Textarea,
+  SelectSingle,
+  SelectMultiple,
+  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] }));

package/src/components/formFields/input.tsx

@@ -1,158 +1,158 @@
-import * as React from "react";
-import { TextField } from "@gemeente-denhaag/components-react";
-import { ShowIcon, HideIcon, EmailIcon } from "@gemeente-denhaag/icons";
-import { IReactHookFormProps } from "./types";
-
-export interface IInputProps {
-  name: string;
-  disabled?: boolean;
-  defaultValue?: string;
-  icon?: JSX.Element;
-  placeholder?: string;
-}
-
-export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
-  disabled,
-  name,
-  validation,
-  register,
-  placeholder,
-  errors,
-}) => {
-  const [showPassword, setShowPassword] = React.useState<boolean>(false);
-
-  return (
-    <TextField
-      type={showPassword ? "text" : "password"}
-      {...{ disabled, placeholder }}
-      {...register(name, { ...validation })}
-      invalid={errors[name]}
-      icon={<span onClick={() => setShowPassword(!showPassword)}>{showPassword ? <HideIcon /> : <ShowIcon />}</span>}
-    />
-  );
-};
-
-export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
-  disabled,
-  name,
-  defaultValue,
-  validation,
-  register,
-  icon,
-  placeholder,
-  errors,
-}) => (
-  <TextField
-    type="text"
-    {...{ defaultValue, disabled, placeholder, icon }}
-    {...register(name, { ...validation })}
-    invalid={errors[name]}
-  />
-);
-
-export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
-  disabled,
-  name,
-  defaultValue,
-  validation,
-  register,
-  icon,
-  placeholder,
-  errors,
-}) => (
-  <TextField
-    type="email"
-    {...{ defaultValue, disabled, placeholder, icon }}
-    {...register(name, { ...validation })}
-    invalid={errors[name]}
-  />
-);
-
-export const InputDate: React.FC<IInputProps & IReactHookFormProps> = ({
-  disabled,
-  name,
-  defaultValue,
-  validation,
-  register,
-  errors,
-}) => (
-  <TextField
-    type="date"
-    {...{ defaultValue, disabled }}
-    {...register(name, { ...validation })}
-    invalid={errors[name]}
-  />
-);
-
-export const InputDateTime: React.FC<IInputProps & IReactHookFormProps> = ({
-  disabled,
-  name,
-  defaultValue,
-  validation,
-  register,
-  errors,
-}) => (
-  <TextField
-    type="datetime-local"
-    {...{ defaultValue, disabled }}
-    {...register(name, { ...validation })}
-    invalid={errors[name]}
-  />
-);
-
-export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
-  disabled,
-  name,
-  defaultValue,
-  validation,
-  register,
-  icon,
-  placeholder,
-  errors,
-}) => (
-  <TextField
-    type="number"
-    {...{ defaultValue, disabled, placeholder, icon }}
-    {...register(name, { ...validation, valueAsNumber: true })}
-    invalid={errors[name]}
-  />
-);
-
-export const InputFloat: React.FC<IInputProps & IReactHookFormProps> = ({
-  disabled,
-  name,
-  defaultValue,
-  validation,
-  register,
-  icon,
-  placeholder,
-  errors,
-}) => (
-  <TextField
-    type="number"
-    step=".01"
-    {...{ disabled, placeholder, icon, defaultValue }}
-    {...register(name, { ...validation, valueAsNumber: true })}
-    invalid={errors[name]}
-  />
-);
-
-interface IInputFileProps {
-  accept?: string;
-}
-
-export const InputFile: React.FC<IInputFileProps & IInputProps & IReactHookFormProps> = ({
-  disabled,
-  name,
-  accept,
-  defaultValue,
-  validation,
-  register,
-}) => (
-  <input
-    className="denhaag-textfield__input"
-    type="file"
-    {...{ defaultValue, disabled, accept }}
-    {...register(name, { ...validation })}
-  />
-);
+import * as React from "react";
+import { TextField } from "@gemeente-denhaag/components-react";
+import { ShowIcon, HideIcon, EmailIcon } from "@gemeente-denhaag/icons";
+import { IReactHookFormProps } from "./types";
+
+export interface IInputProps {
+  name: string;
+  disabled?: boolean;
+  defaultValue?: string;
+  icon?: JSX.Element;
+  placeholder?: string;
+}
+
+export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  validation,
+  register,
+  placeholder,
+  errors,
+}) => {
+  const [showPassword, setShowPassword] = React.useState<boolean>(false);
+
+  return (
+    <TextField
+      type={showPassword ? "text" : "password"}
+      {...{ disabled, placeholder }}
+      {...register(name, { ...validation })}
+      invalid={errors[name]}
+      icon={<span onClick={() => setShowPassword(!showPassword)}>{showPassword ? <HideIcon /> : <ShowIcon />}</span>}
+    />
+  );
+};
+
+export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  defaultValue,
+  validation,
+  register,
+  icon,
+  placeholder,
+  errors,
+}) => (
+  <TextField
+    type="text"
+    {...{ defaultValue, disabled, placeholder, icon }}
+    {...register(name, { ...validation })}
+    invalid={errors[name]}
+  />
+);
+
+export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  defaultValue,
+  validation,
+  register,
+  icon,
+  placeholder,
+  errors,
+}) => (
+  <TextField
+    type="email"
+    {...{ defaultValue, disabled, placeholder, icon }}
+    {...register(name, { ...validation })}
+    invalid={errors[name]}
+  />
+);
+
+export const InputDate: React.FC<IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  defaultValue,
+  validation,
+  register,
+  errors,
+}) => (
+  <TextField
+    type="date"
+    {...{ defaultValue, disabled }}
+    {...register(name, { ...validation })}
+    invalid={errors[name]}
+  />
+);
+
+export const InputDateTime: React.FC<IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  defaultValue,
+  validation,
+  register,
+  errors,
+}) => (
+  <TextField
+    type="datetime-local"
+    {...{ defaultValue, disabled }}
+    {...register(name, { ...validation })}
+    invalid={errors[name]}
+  />
+);
+
+export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  defaultValue,
+  validation,
+  register,
+  icon,
+  placeholder,
+  errors,
+}) => (
+  <TextField
+    type="number"
+    {...{ defaultValue, disabled, placeholder, icon }}
+    {...register(name, { ...validation, valueAsNumber: true })}
+    invalid={errors[name]}
+  />
+);
+
+export const InputFloat: React.FC<IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  defaultValue,
+  validation,
+  register,
+  icon,
+  placeholder,
+  errors,
+}) => (
+  <TextField
+    type="number"
+    step=".01"
+    {...{ disabled, placeholder, icon, defaultValue }}
+    {...register(name, { ...validation, valueAsNumber: true })}
+    invalid={errors[name]}
+  />
+);
+
+interface IInputFileProps {
+  accept?: string;
+}
+
+export const InputFile: React.FC<IInputFileProps & IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  accept,
+  defaultValue,
+  validation,
+  register,
+}) => (
+  <input
+    className="denhaag-textfield__input"
+    type="file"
+    {...{ defaultValue, disabled, accept }}
+    {...register(name, { ...validation })}
+  />
+);