@conduction/components 1.0.20 → 1.0.21

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 (4) hide show
  1. package/lib/components/formFields/input.d.ts +2 -0
  2. package/lib/components/formFields/input.js +5 -5
  3. package/package.json +1 -1
  4. package/src/components/formFields/input.tsx +14 -5
package/lib/components/formFields/input.d.ts CHANGED
@@ -4,6 +4,8 @@ export interface IInputProps {
4
4
  name: string;
5
5
  disabled?: boolean;
6
6
  defaultValue?: string;
7
+ icon?: JSX.Element;
8
+ placeholder?: string;
7
9
  }
8
10
  export declare const InputPassword: React.FC<IInputProps & IReactHookFormProps>;
9
11
  export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;
package/lib/components/formFields/input.js CHANGED
@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
3
  import { TextField } from "@gemeente-denhaag/components-react";
4
4
  import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
5
- export const InputPassword = ({ disabled, name, validation, register, errors, }) => {
5
+ export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, }) => {
6
6
  const [showPassword, setShowPassword] = React.useState(false);
7
- 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, {}) }) }));
7
+ return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
8
8
  };
9
- export const InputText = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
10
- export const InputEmail = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
9
+ 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] }));
10
+ 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] }));
11
11
  export const InputDate = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
12
- export const InputNumber = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
12
+ export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
13
13
  export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, }) => (_jsx("input", { className: "denhaag-textfield__input", type: "file", ...{ defaultValue, disabled, accept }, ...register(name, { ...validation }) }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "1.0.20",
3
+ "version": "1.0.21",
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/input.tsx CHANGED
@@ -1,12 +1,14 @@
1
1
  import * as React from "react";
2
2
  import { TextField } from "@gemeente-denhaag/components-react";
3
- import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
3
+ import { ShowIcon, HideIcon, EmailIcon } from "@gemeente-denhaag/icons";
4
4
  import { IReactHookFormProps } from "./types";
5
5
 
6
6
  export interface IInputProps {
7
7
  name: string;
8
8
  disabled?: boolean;
9
9
  defaultValue?: string;
10
+ icon?: JSX.Element;
11
+ placeholder?: string;
10
12
  }
11
13
 
12
14
  export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -14,6 +16,7 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
14
16
  name,
15
17
  validation,
16
18
  register,
19
+ placeholder,
17
20
  errors,
18
21
  }) => {
19
22
  const [showPassword, setShowPassword] = React.useState<boolean>(false);
@@ -21,7 +24,7 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
21
24
  return (
22
25
  <TextField
23
26
  type={showPassword ? "text" : "password"}
24
- {...{ disabled }}
27
+ {...{ disabled, placeholder }}
25
28
  {...register(name, { ...validation })}
26
29
  invalid={errors[name]}
27
30
  icon={<span onClick={() => setShowPassword(!showPassword)}>{showPassword ? <HideIcon /> : <ShowIcon />}</span>}
@@ -35,11 +38,13 @@ export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
35
38
  defaultValue,
36
39
  validation,
37
40
  register,
41
+ icon,
42
+ placeholder,
38
43
  errors,
39
44
  }) => (
40
45
  <TextField
41
46
  type="text"
42
- {...{ defaultValue, disabled }}
47
+ {...{ defaultValue, disabled, placeholder, icon }}
43
48
  {...register(name, { ...validation })}
44
49
  invalid={errors[name]}
45
50
  />
@@ -51,11 +56,13 @@ export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
51
56
  defaultValue,
52
57
  validation,
53
58
  register,
59
+ icon,
60
+ placeholder,
54
61
  errors,
55
62
  }) => (
56
63
  <TextField
57
64
  type="email"
58
- {...{ defaultValue, disabled }}
65
+ {...{ defaultValue, disabled, placeholder, icon }}
59
66
  {...register(name, { ...validation })}
60
67
  invalid={errors[name]}
61
68
  />
@@ -83,11 +90,13 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
83
90
  defaultValue,
84
91
  validation,
85
92
  register,
93
+ icon,
94
+ placeholder,
86
95
  errors,
87
96
  }) => (
88
97
  <TextField
89
98
  type="number"
90
- {...{ defaultValue, disabled }}
99
+ {...{ defaultValue, disabled, placeholder, icon }}
91
100
  {...register(name, { ...validation })}
92
101
  invalid={errors[name]}
93
102
  />