@conduction/components 2.0.34 → 2.1.0

package/README.md

@@ -2,6 +2,10 @@
 
 ## Changelog
 
+- **Version 2.1 (breaking changes from 2.0.x)**
+
+  - 2.1.0: InputDate now includes Den Haag InputDate component, requiring react-hook-form controls.
+
 - **Version 2**
 
   - 2.0.34: SelectMultiple and SelectCreate update to include defaultValue in react-hook-form controller.

package/lib/components/formFields/input.d.ts

@@ -1,11 +1,13 @@
 import * as React from "react";
 import { IReactHookFormProps } from "./types";
+import { Control, FieldValues } from "react-hook-form";
 export interface IInputProps {
     name: string;
     disabled?: boolean;
     defaultValue?: string;
     icon?: JSX.Element;
     placeholder?: string;
+    control?: Control<FieldValues, any>;
 }
 export declare const InputPassword: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;

package/lib/components/formFields/input.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { TextField } from "@gemeente-denhaag/components-react";
+import { Datepicker, TextField } from "@gemeente-denhaag/components-react";
 import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
+import { Controller } from "react-hook-form";
 export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, }) => {
     const [showPassword, setShowPassword] = React.useState(false);
     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, {}) }) }));
@@ -9,7 +10,9 @@ export const InputPassword = ({ disabled, name, validation, register, placeholde
 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] }));
 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] }));
 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] }));
-export const InputDate = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputDate = ({ disabled, name, defaultValue, validation, errors, control, }) => (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
+        return _jsx(Datepicker, { ...{ value, onChange, disabled }, error: !!errors[name] });
+    } }));
 export const InputDateTime = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "datetime-local", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
 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] }));
 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] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.0.34",
+  "version": "2.1.0",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/formFields/input.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
-import { TextField } from "@gemeente-denhaag/components-react";
+import { Datepicker, TextField } from "@gemeente-denhaag/components-react";
 import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
 import { IReactHookFormProps } from "./types";
+import { Control, FieldValues, Controller } from "react-hook-form";
 
 export interface IInputProps {
   name: string;
@@ -9,6 +10,7 @@ export interface IInputProps {
   defaultValue?: string;
   icon?: JSX.Element;
   placeholder?: string;
+  control?: Control<FieldValues, any>;
 }
 
 export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -91,14 +93,15 @@ export const InputDate: React.FC<IInputProps & IReactHookFormProps> = ({
   name,
   defaultValue,
   validation,
-  register,
   errors,
+  control,
 }) => (
-  <TextField
-    type="date"
-    {...{ defaultValue, disabled }}
-    {...register(name, { ...validation })}
-    invalid={errors[name]}
+  <Controller
+    {...{ control, name, defaultValue }}
+    rules={validation}
+    render={({ field: { onChange, value } }) => {
+      return <Datepicker {...{ value, onChange, disabled }} error={!!errors[name]} />;
+    }}
   />
 );