@conduction/components 2.1.21 → 2.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +1 -0
  2. package/lib/components/formFields/errorMessage/ErrorMessage.module.css +7 -2
  3. package/lib/components/formFields/input.d.ts +1 -0
  4. package/lib/components/formFields/input.js +9 -8
  5. package/lib/components/formFields/select/select.d.ts +4 -3
  6. package/lib/components/formFields/select/select.js +8 -7
  7. package/lib/components/formFields/textarea.d.ts +2 -1
  8. package/lib/components/formFields/textarea.js +3 -2
  9. package/package.json +1 -1
  10. package/src/components/formFields/errorMessage/ErrorMessage.module.css +9 -0
  11. package/src/components/formFields/errorMessage/ErrorMessage.tsx +9 -0
  12. package/src/components/formFields/input.tsx +69 -42
  13. package/src/components/formFields/select/select.tsx +122 -109
  14. package/src/components/formFields/textarea.tsx +7 -2
package/README.md CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  - **Version 2.1 (breaking changes from 2.0.x)**
6
6
 
7
+ - 2.1.22: Added optional error messages to textarea, select and input fields.
7
8
  - 2.1.21: Added optional copy button and refactored delete button in CreateKeyValue.
8
9
  - 2.1.20: Updated react.fc code and github actions added.
9
10
  - 2.1.19: Refactor Tooltip layout.
package/lib/components/formFields/errorMessage/ErrorMessage.module.css CHANGED
@@ -1,4 +1,9 @@
1
+ :root {
2
+ --conduction-error-message-color: var(--skeleton-color-red-3);
3
+ --conduction-error-message-font-size: var(--skeleton-font-size-sm);
4
+ }
5
+
1
6
  .message {
2
- color: var(--gateway-ui-color-dark-red);
3
- font-size: var(--gateway-ui-font-size-sm);
7
+ color: var(--conduction-error-message-color);
8
+ font-size: var(--conduction-error-message-font-size);
4
9
  }
package/lib/components/formFields/input.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface IInputProps {
6
6
  defaultValue?: string;
7
7
  icon?: JSX.Element;
8
8
  placeholder?: string;
9
+ hideErrorMessage?: boolean;
9
10
  }
10
11
  export declare const InputPassword: React.FC<IInputProps & IReactHookFormProps>;
11
12
  export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;
package/lib/components/formFields/input.js CHANGED
@@ -1,15 +1,16 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
3
  import { TextField } from "@gemeente-denhaag/components-react";
4
4
  import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
5
5
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
- export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, }) => {
6
+ import { ErrorMessage } from "./errorMessage/ErrorMessage";
7
+ export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, hideErrorMessage, }) => {
7
8
  const [showPassword, setShowPassword] = React.useState(false);
8
- return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(FontAwesomeIcon, { icon: faEye }) : _jsx(FontAwesomeIcon, { icon: faEyeSlash }) }) }));
9
+ return (_jsxs(_Fragment, { children: [_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(FontAwesomeIcon, { icon: faEye }) : _jsx(FontAwesomeIcon, { icon: faEyeSlash }) }) }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
9
10
  };
10
- export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
11
- export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
12
- export const InputURL = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "url", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
13
- export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }));
14
- export const InputFloat = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", step: ".01", ...{ disabled, placeholder, icon, defaultValue }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }));
11
+ export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
12
+ export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "email", required: !!validation?.required, ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
13
+ export const InputURL = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "url", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
14
+ export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
15
+ export const InputFloat = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "number", step: ".01", ...{ disabled, placeholder, icon, defaultValue }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
15
16
  export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, }) => (_jsx("input", { className: "denhaag-textfield__input", type: "file", ...{ defaultValue, disabled, accept }, ...register(name, { ...validation }) }));
package/lib/components/formFields/select/select.d.ts CHANGED
@@ -11,8 +11,9 @@ interface ISelectProps {
11
11
  defaultValue?: any;
12
12
  disabled?: boolean;
13
13
  isClearable?: boolean;
14
+ hideErrorMessage?: boolean;
14
15
  }
15
- export declare const SelectMultiple: ({ name, options, errors, control, validation, defaultValue, disabled, }: ISelectProps & IReactHookFormProps) => JSX.Element;
16
- export declare const SelectCreate: ({ name, options, errors, control, validation, defaultValue, disabled, }: ISelectProps & IReactHookFormProps) => JSX.Element;
17
- export declare const SelectSingle: ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, }: ISelectProps & IReactHookFormProps) => JSX.Element;
16
+ export declare const SelectMultiple: ({ name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }: ISelectProps & IReactHookFormProps) => JSX.Element;
17
+ export declare const SelectCreate: ({ name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }: ISelectProps & IReactHookFormProps) => JSX.Element;
18
+ export declare const SelectSingle: ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, }: ISelectProps & IReactHookFormProps) => JSX.Element;
18
19
  export {};
package/lib/components/formFields/select/select.js CHANGED
@@ -1,21 +1,22 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import * as styles from "./select.module.css";
3
3
  import { Controller } from "react-hook-form";
4
4
  import ReactSelect from "react-select";
5
5
  import CreatableSelect from "react-select/creatable";
6
6
  import clsx from "clsx";
7
- export const SelectMultiple = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
7
+ import { ErrorMessage } from "../errorMessage/ErrorMessage";
8
+ export const SelectMultiple = ({ name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }) => {
8
9
  return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
9
- return (_jsx(ReactSelect, { value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : "Select one or more options..." }));
10
+ return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
10
11
  } }));
11
12
  };
12
- export const SelectCreate = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
13
+ export const SelectCreate = ({ name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }) => {
13
14
  return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
14
- return (_jsx(CreatableSelect, { value: value ?? "", placeholder: disabled ? "Disabled..." : "Select or create one or multiple options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }));
15
+ return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { value: value ?? "", placeholder: disabled ? "Disabled..." : "Select or create one or multiple options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
15
16
  } }));
16
17
  };
17
- export const SelectSingle = ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, }) => {
18
+ export const SelectSingle = ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, }) => {
18
19
  return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
19
- return (_jsx(ReactSelect, { value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : "Select an option..." }));
20
+ return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : "Select an option..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
20
21
  } }));
21
22
  };
package/lib/components/formFields/textarea.d.ts CHANGED
@@ -4,5 +4,6 @@ export interface ITextAreaProps {
4
4
  name: string;
5
5
  disabled?: boolean;
6
6
  defaultValue?: string;
7
+ hideErrorMessage?: boolean;
7
8
  }
8
- export declare const Textarea: ({ name, validation, register, errors, disabled, defaultValue, }: ITextAreaProps & IReactHookFormProps) => JSX.Element;
9
+ export declare const Textarea: ({ name, validation, register, errors, disabled, defaultValue, hideErrorMessage, }: ITextAreaProps & IReactHookFormProps) => JSX.Element;
package/lib/components/formFields/textarea.js CHANGED
@@ -1,3 +1,4 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { TextArea } from "@gemeente-denhaag/textarea";
3
- export const Textarea = ({ name, validation, register, errors, disabled, defaultValue, }) => (_jsx(TextArea, { ...register(name, { ...validation }), ...{ disabled, defaultValue }, invalid: errors[name] }));
3
+ import { ErrorMessage } from "./errorMessage/ErrorMessage";
4
+ export const Textarea = ({ name, validation, register, errors, disabled, defaultValue, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextArea, { ...register(name, { ...validation }), ...{ disabled, defaultValue }, invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.1.21",
3
+ "version": "2.1.22",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/formFields/errorMessage/ErrorMessage.module.css ADDED
@@ -0,0 +1,9 @@
1
+ :root {
2
+ --conduction-error-message-color: var(--skeleton-color-red-3);
3
+ --conduction-error-message-font-size: var(--skeleton-font-size-sm);
4
+ }
5
+
6
+ .message {
7
+ color: var(--conduction-error-message-color);
8
+ font-size: var(--conduction-error-message-font-size);
9
+ }
package/src/components/formFields/errorMessage/ErrorMessage.tsx ADDED
@@ -0,0 +1,9 @@
1
+ import * as styles from "./ErrorMessage.module.css";
2
+
3
+ export interface IErrorMessageProps {
4
+ message: string;
5
+ }
6
+
7
+ export const ErrorMessage = ({ message }: IErrorMessageProps): JSX.Element => (
8
+ <span className={styles.message}>{message}</span>
9
+ );
package/src/components/formFields/input.tsx CHANGED
@@ -3,6 +3,7 @@ import { TextField } from "@gemeente-denhaag/components-react";
3
3
  import { IReactHookFormProps } from "./types";
4
4
  import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
5
5
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
+ import { ErrorMessage } from "./errorMessage/ErrorMessage";
6
7
 
7
8
  export interface IInputProps {
8
9
  name: string;
@@ -10,6 +11,7 @@ export interface IInputProps {
10
11
  defaultValue?: string;
11
12
  icon?: JSX.Element;
12
13
  placeholder?: string;
14
+ hideErrorMessage?: boolean;
13
15
  }
14
16
 
15
17
  export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -19,21 +21,25 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
19
21
  register,
20
22
  placeholder,
21
23
  errors,
24
+ hideErrorMessage,
22
25
  }) => {
23
26
  const [showPassword, setShowPassword] = React.useState<boolean>(false);
24
27
 
25
28
  return (
26
- <TextField
27
- type={showPassword ? "text" : "password"}
28
- {...{ disabled, placeholder }}
29
- {...register(name, { ...validation })}
30
- invalid={errors[name]}
31
- icon={
32
- <span onClick={() => setShowPassword(!showPassword)}>
33
- {showPassword ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} />}
34
- </span>
35
- }
36
- />
29
+ <>
30
+ <TextField
31
+ type={showPassword ? "text" : "password"}
32
+ {...{ disabled, placeholder }}
33
+ {...register(name, { ...validation })}
34
+ invalid={errors[name]}
35
+ icon={
36
+ <span onClick={() => setShowPassword(!showPassword)}>
37
+ {showPassword ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} />}
38
+ </span>
39
+ }
40
+ />
41
+ {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
42
+ </>
37
43
  );
38
44
  };
39
45
 
@@ -46,13 +52,17 @@ export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
46
52
  icon,
47
53
  placeholder,
48
54
  errors,
55
+ hideErrorMessage,
49
56
  }) => (
50
- <TextField
51
- type="text"
52
- {...{ defaultValue, disabled, placeholder, icon }}
53
- {...register(name, { ...validation })}
54
- invalid={errors[name]}
55
- />
57
+ <>
58
+ <TextField
59
+ type="text"
60
+ {...{ defaultValue, disabled, placeholder, icon }}
61
+ {...register(name, { ...validation })}
62
+ invalid={errors[name]}
63
+ />
64
+ {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
65
+ </>
56
66
  );
57
67
 
58
68
  export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -64,13 +74,18 @@ export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
64
74
  icon,
65
75
  placeholder,
66
76
  errors,
77
+ hideErrorMessage,
67
78
  }) => (
68
- <TextField
69
- type="email"
70
- {...{ defaultValue, disabled, placeholder, icon }}
71
- {...register(name, { ...validation })}
72
- invalid={errors[name]}
73
- />
79
+ <>
80
+ <TextField
81
+ type="email"
82
+ required={!!validation?.required}
83
+ {...{ defaultValue, disabled, placeholder, icon }}
84
+ {...register(name, { ...validation })}
85
+ invalid={errors[name]}
86
+ />
87
+ {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
88
+ </>
74
89
  );
75
90
 
76
91
  export const InputURL: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -82,13 +97,17 @@ export const InputURL: React.FC<IInputProps & IReactHookFormProps> = ({
82
97
  icon,
83
98
  placeholder,
84
99
  errors,
100
+ hideErrorMessage,
85
101
  }) => (
86
- <TextField
87
- type="url"
88
- {...{ defaultValue, disabled, placeholder, icon }}
89
- {...register(name, { ...validation })}
90
- invalid={errors[name]}
91
- />
102
+ <>
103
+ <TextField
104
+ type="url"
105
+ {...{ defaultValue, disabled, placeholder, icon }}
106
+ {...register(name, { ...validation })}
107
+ invalid={errors[name]}
108
+ />
109
+ {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
110
+ </>
92
111
  );
93
112
 
94
113
  export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -100,13 +119,17 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
100
119
  icon,
101
120
  placeholder,
102
121
  errors,
122
+ hideErrorMessage,
103
123
  }) => (
104
- <TextField
105
- type="number"
106
- {...{ defaultValue, disabled, placeholder, icon }}
107
- {...register(name, { ...validation, valueAsNumber: true })}
108
- invalid={errors[name]}
109
- />
124
+ <>
125
+ <TextField
126
+ type="number"
127
+ {...{ defaultValue, disabled, placeholder, icon }}
128
+ {...register(name, { ...validation, valueAsNumber: true })}
129
+ invalid={errors[name]}
130
+ />
131
+ {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
132
+ </>
110
133
  );
111
134
 
112
135
  export const InputFloat: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -118,14 +141,18 @@ export const InputFloat: React.FC<IInputProps & IReactHookFormProps> = ({
118
141
  icon,
119
142
  placeholder,
120
143
  errors,
144
+ hideErrorMessage,
121
145
  }) => (
122
- <TextField
123
- type="number"
124
- step=".01"
125
- {...{ disabled, placeholder, icon, defaultValue }}
126
- {...register(name, { ...validation, valueAsNumber: true })}
127
- invalid={errors[name]}
128
- />
146
+ <>
147
+ <TextField
148
+ type="number"
149
+ step=".01"
150
+ {...{ disabled, placeholder, icon, defaultValue }}
151
+ {...register(name, { ...validation, valueAsNumber: true })}
152
+ invalid={errors[name]}
153
+ />
154
+ {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
155
+ </>
129
156
  );
130
157
 
131
158
  interface IInputFileProps {
package/src/components/formFields/select/select.tsx CHANGED
@@ -1,109 +1,122 @@
1
- import * as React from "react";
2
- import * as styles from "./select.module.css";
3
- import { Control, Controller, FieldValues } from "react-hook-form";
4
- import ReactSelect from "react-select";
5
- import CreatableSelect from "react-select/creatable";
6
- import { IReactHookFormProps } from "../types";
7
- import clsx from "clsx";
8
-
9
- interface ISelectProps {
10
- control: Control<FieldValues, any>;
11
- options: { label: string; value: string }[];
12
- name: string;
13
- defaultValue?: any;
14
- disabled?: boolean;
15
- isClearable?: boolean;
16
- }
17
-
18
- export const SelectMultiple = ({
19
- name,
20
- options,
21
- errors,
22
- control,
23
- validation,
24
- defaultValue,
25
- disabled,
26
- }: ISelectProps & IReactHookFormProps): JSX.Element => {
27
- return (
28
- <Controller
29
- {...{ control, name, defaultValue }}
30
- rules={validation}
31
- render={({ field: { onChange, value } }) => {
32
- return (
33
- <ReactSelect
34
- value={value ?? ""}
35
- className={clsx(styles.select, errors[name] && styles.error)}
36
- isMulti
37
- isDisabled={disabled}
38
- {...{ options, onChange, errors }}
39
- menuPortalTarget={document.body}
40
- styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
41
- placeholder={disabled ? "Disabled..." : "Select one or more options..."}
42
- />
43
- );
44
- }}
45
- />
46
- );
47
- };
48
-
49
- export const SelectCreate = ({
50
- name,
51
- options,
52
- errors,
53
- control,
54
- validation,
55
- defaultValue,
56
- disabled,
57
- }: ISelectProps & IReactHookFormProps): JSX.Element => {
58
- return (
59
- <Controller
60
- {...{ control, name, defaultValue }}
61
- rules={validation}
62
- render={({ field: { onChange, value } }) => {
63
- return (
64
- <CreatableSelect
65
- value={value ?? ""}
66
- placeholder={disabled ? "Disabled..." : "Select or create one or multiple options..."}
67
- className={clsx(styles.select, errors[name] && styles.error)}
68
- isMulti
69
- isDisabled={disabled}
70
- {...{ options, onChange, errors }}
71
- menuPortalTarget={document.body}
72
- styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
73
- />
74
- );
75
- }}
76
- />
77
- );
78
- };
79
-
80
- export const SelectSingle = ({
81
- name,
82
- options,
83
- errors,
84
- control,
85
- validation,
86
- isClearable,
87
- defaultValue,
88
- disabled,
89
- }: ISelectProps & IReactHookFormProps): JSX.Element => {
90
- return (
91
- <Controller
92
- {...{ control, name, defaultValue }}
93
- rules={validation}
94
- render={({ field: { onChange, value } }) => {
95
- return (
96
- <ReactSelect
97
- value={value ?? ""}
98
- className={clsx(styles.select, errors[name] && styles.error)}
99
- isDisabled={disabled}
100
- {...{ options, onChange, errors, isClearable }}
101
- menuPortalTarget={document.body}
102
- styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
103
- placeholder={disabled ? "Disabled..." : "Select an option..."}
104
- />
105
- );
106
- }}
107
- />
108
- );
109
- };
1
+ import * as styles from "./select.module.css";
2
+ import { Control, Controller, FieldValues } from "react-hook-form";
3
+ import ReactSelect from "react-select";
4
+ import CreatableSelect from "react-select/creatable";
5
+ import { IReactHookFormProps } from "../types";
6
+ import clsx from "clsx";
7
+ import { ErrorMessage } from "../errorMessage/ErrorMessage";
8
+
9
+ interface ISelectProps {
10
+ control: Control<FieldValues, any>;
11
+ options: { label: string; value: string }[];
12
+ name: string;
13
+ defaultValue?: any;
14
+ disabled?: boolean;
15
+ isClearable?: boolean;
16
+ hideErrorMessage?: boolean;
17
+ }
18
+
19
+ export const SelectMultiple = ({
20
+ name,
21
+ options,
22
+ errors,
23
+ control,
24
+ validation,
25
+ defaultValue,
26
+ disabled,
27
+ hideErrorMessage,
28
+ }: ISelectProps & IReactHookFormProps): JSX.Element => {
29
+ return (
30
+ <Controller
31
+ {...{ control, name, defaultValue }}
32
+ rules={validation}
33
+ render={({ field: { onChange, value } }) => {
34
+ return (
35
+ <>
36
+ <ReactSelect
37
+ value={value ?? ""}
38
+ className={clsx(styles.select, errors[name] && styles.error)}
39
+ isMulti
40
+ isDisabled={disabled}
41
+ {...{ options, onChange, errors }}
42
+ menuPortalTarget={document.body}
43
+ styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
44
+ placeholder={disabled ? "Disabled..." : "Select one or more options..."}
45
+ />
46
+ {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
47
+ </>
48
+ );
49
+ }}
50
+ />
51
+ );
52
+ };
53
+
54
+ export const SelectCreate = ({
55
+ name,
56
+ options,
57
+ errors,
58
+ control,
59
+ validation,
60
+ defaultValue,
61
+ disabled,
62
+ hideErrorMessage,
63
+ }: ISelectProps & IReactHookFormProps): JSX.Element => {
64
+ return (
65
+ <Controller
66
+ {...{ control, name, defaultValue }}
67
+ rules={validation}
68
+ render={({ field: { onChange, value } }) => {
69
+ return (
70
+ <>
71
+ <CreatableSelect
72
+ value={value ?? ""}
73
+ placeholder={disabled ? "Disabled..." : "Select or create one or multiple options..."}
74
+ className={clsx(styles.select, errors[name] && styles.error)}
75
+ isMulti
76
+ isDisabled={disabled}
77
+ {...{ options, onChange, errors }}
78
+ menuPortalTarget={document.body}
79
+ styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
80
+ />
81
+ {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
82
+ </>
83
+ );
84
+ }}
85
+ />
86
+ );
87
+ };
88
+
89
+ export const SelectSingle = ({
90
+ name,
91
+ options,
92
+ errors,
93
+ control,
94
+ validation,
95
+ isClearable,
96
+ defaultValue,
97
+ disabled,
98
+ hideErrorMessage,
99
+ }: ISelectProps & IReactHookFormProps): JSX.Element => {
100
+ return (
101
+ <Controller
102
+ {...{ control, name, defaultValue }}
103
+ rules={validation}
104
+ render={({ field: { onChange, value } }) => {
105
+ return (
106
+ <>
107
+ <ReactSelect
108
+ value={value ?? ""}
109
+ className={clsx(styles.select, errors[name] && styles.error)}
110
+ isDisabled={disabled}
111
+ {...{ options, onChange, errors, isClearable }}
112
+ menuPortalTarget={document.body}
113
+ styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
114
+ placeholder={disabled ? "Disabled..." : "Select an option..."}
115
+ />
116
+ {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
117
+ </>
118
+ );
119
+ }}
120
+ />
121
+ );
122
+ };
package/src/components/formFields/textarea.tsx CHANGED
@@ -1,11 +1,12 @@
1
- import * as React from "react";
2
1
  import { TextArea } from "@gemeente-denhaag/textarea";
3
2
  import { IReactHookFormProps } from "./types";
3
+ import { ErrorMessage } from "./errorMessage/ErrorMessage";
4
4
 
5
5
  export interface ITextAreaProps {
6
6
  name: string;
7
7
  disabled?: boolean;
8
8
  defaultValue?: string;
9
+ hideErrorMessage?: boolean;
9
10
  }
10
11
 
11
12
  export const Textarea = ({
@@ -15,6 +16,10 @@ export const Textarea = ({
15
16
  errors,
16
17
  disabled,
17
18
  defaultValue,
19
+ hideErrorMessage,
18
20
  }: ITextAreaProps & IReactHookFormProps): JSX.Element => (
19
- <TextArea {...register(name, { ...validation })} {...{ disabled, defaultValue }} invalid={errors[name]} />
21
+ <>
22
+ <TextArea {...register(name, { ...validation })} {...{ disabled, defaultValue }} invalid={errors[name]} />
23
+ {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
24
+ </>
20
25
  );