@conduction/components 2.1.5 → 2.1.7

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.7: Add disabled placholders to all Select elements.
+  - 2.1.6: Add disabled state to CreateKeyValue component
   - 2.1.4 & 2.1.5: Remove IInputProps from CreateKeyValue to undo duplicate defaultValue prop
   - 2.1.3: Export IKeyValue from CreateKeyValue component.
   - 2.1.2: REVERT 2.1.1 and 2.1.0.

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

@@ -8,6 +8,7 @@ interface CreateKeyValueProps {
     name: string;
     control: Control<FieldValues, any>;
     defaultValue?: IKeyValue[];
+    disabled?: boolean;
 }
 export interface IKeyValue {
     key: string;

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

@@ -4,12 +4,12 @@ import * as styles from "./CreateKeyValue.module.css";
 import { Controller } from "react-hook-form";
 import { Button } from "@gemeente-denhaag/components-react";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@gemeente-denhaag/table";
-export const CreateKeyValue = ({ name, errors, control, validation, defaultValue, }) => {
+export const CreateKeyValue = ({ name, errors, control, validation, defaultValue, disabled, }) => {
     return (_jsx(Controller, { ...{ control, name, errors }, rules: validation, render: ({ field: { onChange } }) => {
-            return _jsx(KeyValueComponent, { handleChange: onChange, ...{ defaultValue, errors } });
+            return _jsx(KeyValueComponent, { handleChange: onChange, ...{ defaultValue, errors, disabled } });
         } }));
 };
-const KeyValueComponent = ({ defaultValue, handleChange }) => {
+const KeyValueComponent = ({ defaultValue, handleChange, disabled }) => {
     const [currentKey, setCurrentKey] = React.useState("");
     const [currentValue, setCurrentValue] = React.useState("");
     const [keyValues, setKeyValues] = React.useState(defaultValue ?? []);
@@ -27,5 +27,5 @@ const KeyValueComponent = ({ defaultValue, handleChange }) => {
     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, { className: styles.tdDelete, children: _jsx(Button, { onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), children: "Delete" }) })] }, `${keyValue}${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) }), _jsx("input", { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentValue(e.target.value) }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue, 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, { className: styles.tdDelete, children: _jsx(Button, { onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), children: "Delete" }) })] }, `${keyValue}${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/lib/components/formFields/select/select.js

@@ -6,16 +6,16 @@ import CreatableSelect from "react-select/creatable";
 import clsx from "clsx";
 export const SelectMultiple = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            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 }) } }));
+            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..." }));
         } }));
 };
 export const SelectCreate = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsx(CreatableSelect, { value: value ?? "", placeholder: "Select existing or create new entries", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }));
+            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 }) } }));
         } }));
 };
 export const SelectSingle = ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            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 }) } }));
+            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..." }));
         } }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "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

@@ -13,6 +13,7 @@ interface CreateKeyValueProps {
   name: string;
   control: Control<FieldValues, any>;
   defaultValue?: IKeyValue[];
+  disabled?: boolean;
 }
 
 export interface IKeyValue {
@@ -26,13 +27,14 @@ export const CreateKeyValue: React.FC<CreateKeyValueProps & IReactHookFormProps>
   control,
   validation,
   defaultValue,
+  disabled,
 }) => {
   return (
     <Controller
       {...{ control, name, errors }}
       rules={validation}
       render={({ field: { onChange } }) => {
-        return <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors }} />;
+        return <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors, disabled }} />;
       }}
     />
   );
@@ -44,9 +46,10 @@ export const CreateKeyValue: React.FC<CreateKeyValueProps & IReactHookFormProps>
 interface CreateKeyValueComponentProps {
   defaultValue?: IKeyValue[];
   handleChange: (...event: any[]) => void;
+  disabled?: boolean;
 }
 
-const KeyValueComponent: React.FC<CreateKeyValueComponentProps> = ({ defaultValue, handleChange }) => {
+const KeyValueComponent: React.FC<CreateKeyValueComponentProps> = ({ defaultValue, handleChange, disabled }) => {
   const [currentKey, setCurrentKey] = React.useState<string>("");
   const [currentValue, setCurrentValue] = React.useState<string>("");
   const [keyValues, setKeyValues] = React.useState<IKeyValue[]>(defaultValue ?? []);
@@ -106,6 +109,7 @@ const KeyValueComponent: React.FC<CreateKeyValueComponentProps> = ({ defaultValu
           ref={currentKeyRef}
           className="denhaag-textfield__input"
           onChange={(e) => setCurrentKey(e.target.value)}
+          {...{ disabled }}
         />
 
         <input
@@ -115,9 +119,10 @@ const KeyValueComponent: React.FC<CreateKeyValueComponentProps> = ({ defaultValu
           ref={currentValueRef}
           className="denhaag-textfield__input"
           onChange={(e) => setCurrentValue(e.target.value)}
+          {...{ disabled }}
         />
 
-        <Button onClick={handleCreate} disabled={!currentKey || !currentValue}>
+        <Button onClick={handleCreate} disabled={!currentKey || !currentValue || disabled}>
           Add
         </Button>
       </div>

package/src/components/formFields/select/select.tsx

@@ -38,6 +38,7 @@ export const SelectMultiple: React.FC<ISelectProps & IReactHookFormProps> = ({
             {...{ options, onChange, errors }}
             menuPortalTarget={document.body}
             styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
+            placeholder={disabled ? "Disabled..." : "Select one or more options..."}
           />
         );
       }}
@@ -62,7 +63,7 @@ export const SelectCreate: React.FC<ISelectProps & IReactHookFormProps> = ({
         return (
           <CreatableSelect
             value={value ?? ""}
-            placeholder="Select existing or create new entries"
+            placeholder={disabled ? "Disabled..." : "Select or create one or multiple options..."}
             className={clsx(styles.select, errors[name] && styles.error)}
             isMulti
             isDisabled={disabled}
@@ -99,6 +100,7 @@ export const SelectSingle: React.FC<ISelectProps & IReactHookFormProps> = ({
             {...{ options, onChange, errors, isClearable }}
             menuPortalTarget={document.body}
             styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
+            placeholder={disabled ? "Disabled..." : "Select an option..."}
           />
         );
       }}