@conduction/components 2.1.14 → 2.1.16

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.16: Refactor ToolTip layoutClassName placement.
+  - 2.1.15: Add InputDate component based on react-datepicker.
   - 2.1.14: Refactor checkbox to remove svg errors
   - 2.1.13: Refactor components to remove svg errors (e.g. shape-rendering => shapeRendering)
   - 2.1.12: Added ToolTip max-width and break-word

package/lib/components/formFields/date/Date.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import "react-datepicker/dist/react-datepicker.css";
+import { Control, FieldValues } from "react-hook-form";
+import { IReactHookFormProps } from "../types";
+interface IDateProps {
+    control: Control<FieldValues, any>;
+    name: string;
+    showTimeSelect?: boolean;
+    disabled?: boolean;
+}
+export declare const InputDate: React.FC<IDateProps & IReactHookFormProps>;
+export {};

package/lib/components/formFields/date/Date.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "react-datepicker/dist/react-datepicker.css";
+import * as styles from "./Date.module.css";
+import { Controller } from "react-hook-form";
+import DatePicker from "react-datepicker";
+export const InputDate = ({ name, errors, control, validation, disabled, }) => {
+    return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
+            return (_jsx(DatePicker, { calendarClassName: styles.calendar, className: "denhaag-datepicker__input", onChange: (date) => onChange(date), dateFormat: "d-MM-yyyy HH:mm", selected: value, timeIntervals: 1, showTimeSelect: true, ...{ errors, value, disabled } }));
+        } }));
+};

package/lib/components/formFields/date/Date.module.css

@@ -0,0 +1,12 @@
+.container {
+  display: flex;
+}
+
+.calendar {
+  display: flex;
+}
+
+.calendar > div::before,
+.calendar > div::after {
+  display: none;
+}

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

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

package/lib/components/formFields/index.js

@@ -1,7 +1,8 @@
-import { InputText, InputPassword, InputEmail, InputURL, InputDate, InputDateTime, InputNumber, InputFile, } from "./input";
+import { InputText, InputPassword, InputEmail, InputURL, InputNumber, InputFile } from "./input";
 import { Textarea } from "./textarea";
 import { InputCheckbox } from "./checkbox/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, };
+import { InputDate } from "./date/Date";
+export { InputRadio, InputText, InputPassword, InputEmail, InputURL, InputDate, InputNumber, InputCheckbox, InputFile, Textarea, SelectSingle, SelectMultiple, SelectCreate, CreateKeyValue, };

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

@@ -11,8 +11,6 @@ export declare const InputPassword: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputEmail: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputURL: React.FC<IInputProps & IReactHookFormProps>;
-export declare const InputDate: React.FC<IInputProps & IReactHookFormProps>;
-export declare const InputDateTime: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputNumber: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputFloat: React.FC<IInputProps & IReactHookFormProps>;
 interface IInputFileProps {

package/lib/components/formFields/input.js

@@ -10,8 +10,6 @@ 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, errors, register, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: 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] }));
 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/toolTip/ToolTip.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
 import ReactTooltip from "react-tooltip";
 import * as styles from "./ToolTip.module.css";
 export const ToolTip = ({ children, layoutClassName, tooltip }) => {
-    return (_jsxs("div", { className: styles.wrapper, children: [_jsx("div", { "data-tip": tooltip, className: layoutClassName && layoutClassName, children: children }), _jsx(ReactTooltip, { place: "top", type: "dark", effect: "solid", className: styles.tooltip })] }));
+    return (_jsxs("div", { className: clsx(styles.wrapper, layoutClassName && layoutClassName), children: [_jsx("div", { "data-tip": tooltip, children: children }), _jsx(ReactTooltip, { place: "top", type: "dark", effect: "solid", className: styles.tooltip })] }));
 };
 export { ReactTooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.14",
+  "version": "2.1.16",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -32,6 +32,7 @@
     "clsx": "^1.1.1",
     "gatsby": "^4.11.1",
     "react": "^17.0.1",
+    "react-datepicker": "^4.10.0",
     "react-hook-form": "7.29.0",
     "react-select": "5.3.2",
     "react-tooltip": "^4.2.21"
@@ -39,6 +40,7 @@
   "devDependencies": {
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.43",
+    "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "^17.0.14",
     "tsc-hooks": "^1.1.1",
     "typescript": "^4.6.3"

package/src/components/formFields/date/Date.module.css

@@ -0,0 +1,12 @@
+.container {
+  display: flex;
+}
+
+.calendar {
+  display: flex;
+}
+
+.calendar > div::before,
+.calendar > div::after {
+  display: none;
+}

package/src/components/formFields/date/Date.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import "react-datepicker/dist/react-datepicker.css";
+import * as styles from "./Date.module.css";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { IReactHookFormProps } from "../types";
+import DatePicker from "react-datepicker";
+
+interface IDateProps {
+  control: Control<FieldValues, any>;
+  name: string;
+  showTimeSelect?: boolean;
+  disabled?: boolean;
+}
+
+export const InputDate: React.FC<IDateProps & IReactHookFormProps> = ({
+  name,
+  errors,
+  control,
+  validation,
+  disabled,
+}) => {
+  return (
+    <Controller
+      {...{ control, name }}
+      rules={validation}
+      render={({ field: { onChange, value } }) => {
+        return (
+          <DatePicker
+            calendarClassName={styles.calendar}
+            className="denhaag-datepicker__input"
+            onChange={(date) => onChange(date)}
+            dateFormat="d-MM-yyyy HH:mm"
+            selected={value}
+            timeIntervals={1}
+            showTimeSelect
+            {...{ errors, value, disabled }}
+          />
+        );
+      }}
+    />
+  );
+};

package/src/components/formFields/index.tsx

@@ -1,18 +1,10 @@
-import {
-  InputText,
-  InputPassword,
-  InputEmail,
-  InputURL,
-  InputDate,
-  InputDateTime,
-  InputNumber,
-  InputFile,
-} from "./input";
+import { InputText, InputPassword, InputEmail, InputURL, InputNumber, InputFile } from "./input";
 import { Textarea } from "./textarea";
 import { InputCheckbox } from "./checkbox/checkbox";
 import { InputRadio } from "./radio";
 import { SelectSingle, SelectMultiple, SelectCreate } from "./select/select";
 import { CreateKeyValue, IKeyValue } from "./createKeyValue/CreateKeyValue";
+import { InputDate } from "./date/Date";
 
 export {
   InputRadio,
@@ -21,7 +13,6 @@ export {
   InputEmail,
   InputURL,
   InputDate,
-  InputDateTime,
   InputNumber,
   InputCheckbox,
   InputFile,

package/src/components/formFields/input.tsx

@@ -91,38 +91,6 @@ export const InputURL: React.FC<IInputProps & IReactHookFormProps> = ({
   />
 );
 
-export const InputDate: React.FC<IInputProps & IReactHookFormProps> = ({
-  disabled,
-  name,
-  defaultValue,
-  validation,
-  errors,
-  register,
-}) => (
-  <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,

package/src/components/toolTip/ToolTip.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import _ from "lodash";
 import * as React from "react";
 import ReactTooltip from "react-tooltip";
@@ -11,10 +12,8 @@ interface ToolTipProps {
 
 export const ToolTip: React.FC<ToolTipProps> = ({ children, layoutClassName, tooltip }) => {
   return (
-    <div className={styles.wrapper}>
-      <div data-tip={tooltip} className={layoutClassName && layoutClassName}>
-        {children}
-      </div>
+    <div className={clsx(styles.wrapper, layoutClassName && layoutClassName)}>
+      <div data-tip={tooltip}>{children}</div>
 
       <ReactTooltip place={"top"} type={"dark"} effect={"solid"} className={styles.tooltip} />
     </div>