@conduction/components 2.1.22 → 2.1.23

package/README.md

@@ -4,6 +4,7 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.23: Added optional error messages to CreateKeyValue and unused classname removed warning.
   - 2.1.22: Added optional error messages to textarea, select and input fields.
   - 2.1.21: Added optional copy button and refactored delete button in CreateKeyValue.
   - 2.1.20: Updated react.fc code and github actions added.

package/lib/components/formFields/createKeyValue/CreateKeyValue.d.ts

@@ -13,10 +13,11 @@ interface CreateKeyValueProps {
         canCopy: boolean;
         onCopied?: () => any;
     };
+    hideErrorMessage?: boolean;
 }
 export interface IKeyValue {
     key: string;
     value: string;
 }
-export declare const CreateKeyValue: ({ name, errors, control, validation, defaultValue, disabled, copyValue, }: CreateKeyValueProps & IReactHookFormProps) => JSX.Element;
+export declare const CreateKeyValue: ({ name, errors, control, validation, defaultValue, disabled, copyValue, hideErrorMessage, }: CreateKeyValueProps & IReactHookFormProps) => JSX.Element;
 export {};

package/lib/components/formFields/createKeyValue/CreateKeyValue.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as styles from "./CreateKeyValue.module.css";
 import { Controller } from "react-hook-form";
@@ -8,9 +8,10 @@ import { ToolTip } from "../../toolTip/ToolTip";
 import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
-export const CreateKeyValue = ({ name, errors, control, validation, defaultValue, disabled, copyValue, }) => {
+import { ErrorMessage } from "../errorMessage/ErrorMessage";
+export const CreateKeyValue = ({ name, errors, control, validation, defaultValue, disabled, copyValue, hideErrorMessage, }) => {
     return (_jsx(Controller, { ...{ control, name, errors }, rules: validation, render: ({ field: { onChange } }) => {
-            return _jsx(KeyValueComponent, { handleChange: onChange, ...{ defaultValue, errors, disabled, copyValue } });
+            return (_jsxs(_Fragment, { children: [_jsx(KeyValueComponent, { handleChange: onChange, ...{ defaultValue, errors, disabled, copyValue } }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };
 const KeyValueComponent = ({ defaultValue, handleChange, disabled, copyValue, }) => {
@@ -37,5 +38,5 @@ const KeyValueComponent = ({ defaultValue, handleChange, disabled, copyValue, })
     React.useEffect(() => {
         handleChange(keyValues);
     }, [keyValues]);
-    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeader, { children: "Key" }), _jsx(TableHeader, { children: "Value" }), _jsx(TableHeader, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { children: _jsxs("div", { className: styles.buttonsContainer, children: [copyValue && (_jsx(ToolTip, { tooltip: "Copy value", children: _jsx(Button, { ...{ disabled }, className: styles.copyButton, onClick: () => handleCopyToClipboard(keyValue.value, idx), variant: currentCopyIdx === idx ? "secondary-action" : "primary-action", children: _jsx(FontAwesomeIcon, { icon: faCopy }) }) })), _jsx(ToolTip, { tooltip: "Delete value", children: _jsx(Button, { ...{ disabled }, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), className: clsx(styles.deleteButton), children: _jsx(FontAwesomeIcon, { icon: faTrash }) }) })] }) })] }, `${keyValue.key}${keyValue.value}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx("input", { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx("input", { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
+    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeader, { children: "Key" }), _jsx(TableHeader, { children: "Value" }), _jsx(TableHeader, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { children: _jsxs("div", { className: styles.buttonsContainer, children: [copyValue && (_jsx(ToolTip, { tooltip: "Copy value", children: _jsx(Button, { ...{ disabled }, onClick: () => handleCopyToClipboard(keyValue.value, idx), variant: currentCopyIdx === idx ? "secondary-action" : "primary-action", children: _jsx(FontAwesomeIcon, { icon: faCopy }) }) })), _jsx(ToolTip, { tooltip: "Delete value", children: _jsx(Button, { ...{ disabled }, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), className: clsx(styles.deleteButton), children: _jsx(FontAwesomeIcon, { icon: faTrash }) }) })] }) })] }, `${keyValue.key}${keyValue.value}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx("input", { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx("input", { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
 };

package/package.json

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

package/src/components/formFields/createKeyValue/CreateKeyValue.tsx

@@ -8,6 +8,7 @@ import { ToolTip } from "../../toolTip/ToolTip";
 import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { ErrorMessage } from "../errorMessage/ErrorMessage";
 
 /**
  * Export KeyValue input component (wrapped in FormFieldGroup)
@@ -21,6 +22,7 @@ interface CreateKeyValueProps {
     canCopy: boolean;
     onCopied?: () => any;
   };
+  hideErrorMessage?: boolean;
 }
 
 export interface IKeyValue {
@@ -36,13 +38,19 @@ export const CreateKeyValue = ({
   defaultValue,
   disabled,
   copyValue,
+  hideErrorMessage,
 }: CreateKeyValueProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
       {...{ control, name, errors }}
       rules={validation}
       render={({ field: { onChange } }) => {
-        return <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors, disabled, copyValue }} />;
+        return (
+          <>
+            <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors, disabled, copyValue }} />
+            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+          </>
+        );
       }}
     />
   );
@@ -120,7 +128,6 @@ const KeyValueComponent = ({
                       <ToolTip tooltip="Copy value">
                         <Button
                           {...{ disabled }}
-                          className={styles.copyButton}
                           onClick={() => handleCopyToClipboard(keyValue.value, idx)}
                           variant={currentCopyIdx === idx ? "secondary-action" : "primary-action"}
                         >