fix(atoms): fix passing the rest in the form fields

8base · Dec 3, 2018 · 90059b6 · 90059b6
1 parent 5e3c88b
commit 90059b6
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 37 deletions.
diff --git a/src/atoms/dataEntry/Checkbox/Checkbox.js b/src/atoms/dataEntry/Checkbox/Checkbox.js
@@ -16,7 +16,7 @@ type CheckboxProps = {
   checked?: boolean,
   /** when error then show error styles */
   hasError?: boolean,
-  /** when error then show disabled styles  */
+  /** show disabled styles  */
   disabled?: boolean,
 
   /** callback to change chcked state */

diff --git a/src/atoms/dataEntry/CheckboxField/CheckboxField.js b/src/atoms/dataEntry/CheckboxField/CheckboxField.js
@@ -14,30 +14,36 @@ type CheckboxFieldProps = {|
   input?: InputType,
   /** form meta object */
   meta?: MetaType,
+  /** color of the check */
+  color ?: 'primary' | 'secondary',
+  /** show disabled styles  */
+  disabled ?: boolean,
 |};
 
 const CheckboxField = ({
   label,
   stretch,
   input = {},
   meta = {},
+  disabled,
+  color,
   ...rest
   }: CheckboxFieldProps) => {
   const { name, value, onChange, onFocus, onBlur } = input;
-
   const hasError = formUtils.hasError(meta);
 
   return (
-    <FormField input={ input } meta={ meta }>
+    <FormField { ...rest } input={ input } meta={ meta }>
       <Checkbox
-        { ...rest }
         label={ label }
         name={ name }
         onChange={ onChange }
         onBlur={ onBlur }
         onFocus={ onFocus }
         checked={ value }
         hasError={ hasError }
+        disabled={ disabled }
+        color={ color }
       />
     </FormField>
   );

diff --git a/src/atoms/dataEntry/InputField/InputField.js b/src/atoms/dataEntry/InputField/InputField.js
@@ -22,6 +22,8 @@ type InputFieldProps = {|
   hideErrorIndicator?: boolean,
   /** align of the input value */
   align?: 'center' | 'left' | 'right',
+  /** input placeholder */
+  placeholder?: string,
   /** form input object */
   input?: InputType,
   /** form meta object */
@@ -45,31 +47,44 @@ const InputField = ({
   hideErrorIndicator,
   hideErrorLabel,
   input = {},
+  insideRef,
   label,
   maxLength,
   meta = {},
+  placeholder,
   square,
   stretch,
+  width,
   ...rest
   }: InputFieldProps) => {
   const { name, value, onChange, onFocus, onBlur } = input;
 
   const hasError = formUtils.hasError(meta);
 
   return (
-    <FormField label={ label } stretch={ stretch } direction={ direction } hideErrorLabel={ hideErrorLabel } input={ input } meta={ meta }>
+    <FormField
+      { ...rest }
+      label={ label }
+      stretch={ stretch }
+      direction={ direction }
+      hideErrorLabel={ hideErrorLabel }
+      input={ input }
+      meta={ meta }
+    >
       <Input
-        { ...rest }
         align={ align }
         hasError={ hasError }
         hideErrorIndicator={ hideErrorIndicator }
+        insideRef={ insideRef }
         maxLength={ maxLength }
         name={ name }
+        onBlur={ onBlur }
         onChange={ onChange }
         onFocus={ onFocus }
-        onBlur={ onBlur }
+        placeholder={ placeholder }
         square={ square }
         value={ value }
+        width={ width }
       />
     </FormField>
   );

diff --git a/src/atoms/dataEntry/RadioGroupField/RadioGroupField.js b/src/atoms/dataEntry/RadioGroupField/RadioGroupField.js
@@ -2,10 +2,11 @@
 
 import React from 'react';
 
-import type { InputType, MetaType } from '../formTypes';
 import * as formUtils from '../../../utils/forms';
 import { Radio } from '../Radio';
 import { FormField } from '../Form/FormField';
+import type { PropSizes } from '../../../types';
+import type { InputType, MetaType } from '../formTypes';
 
 type RadioGroupFieldProps = {
   /** Grop.Item components */
@@ -16,28 +17,37 @@ type RadioGroupFieldProps = {
   input?: InputType,
   /** form meta object */
   meta?: MetaType,
+  /** offset between radio items */
+  gap?: PropSizes,
+  /** direction of the radio items */
+  direction?: 'row' | 'column',
   /** options to define radio items */
   options?: ({ value: any, label: string }) => void,
 };
 
 const RadioGroupField = ({
   children,
+  direction,
+  gap,
   hideErrorLabel,
   input = {},
   meta = {},
+  options,
   ...rest
   }: RadioGroupFieldProps) => {
   const { name, value, onChange } = input;
 
   const hasError = formUtils.hasError(meta);
 
   return (
-    <FormField hideErrorLabel={ hideErrorLabel } input={ input } meta={ meta }>
+    <FormField { ...rest } hideErrorLabel={ hideErrorLabel } input={ input } meta={ meta }>
       <Radio.Group
-        { ...rest }
-        name={ name }
+        direction={ direction }
+        gap={ gap }
         hasError={ hasError }
+        name={ name }
         onChange={ onChange }
+        options={ options }
         value={ value }
       >
         { children }