feat(atoms): add options feature to render radio items

8base · Nov 21, 2018 · 75620ae · 75620ae
1 parent 67bb02f
commit 75620ae
Show file tree

Hide file tree

Showing 5 changed files with 274 additions and 45 deletions.
diff --git a/src/atoms/dataEntry/Radio/Radio.stories.js b/src/atoms/dataEntry/Radio/Radio.stories.js
@@ -30,6 +30,16 @@ export default (asStory: *) => {
           <Radio.Item label="Radio" color="primary" value={ 3 } />
         </Radio.Group>
       ))
+      .add('with options', () => (
+        <Radio.Group
+          value={ 2 }
+          options={ [
+            { label: 'Radio 1', value: 1 },
+            { label: 'Radio 2', value: 2 },
+            { label: 'Radio 3', value: 3 },
+          ] }
+        />
+      ))
       .add('with row direction', () => (
         <Radio.Group value={ 1 } direction="row">
           <Radio.Item label="Radio" color="primary" value={ 1 } />

diff --git a/src/atoms/dataEntry/Radio/RadioGroup.js b/src/atoms/dataEntry/Radio/RadioGroup.js
@@ -1,6 +1,7 @@
 // @flow
 import React, { PureComponent } from 'react';
 import { FlexLayout } from '../../FlexLayout';
+import { RadioItem } from './RadioItem';
 import type { PropSizes } from '../../../types';
 
 
@@ -18,6 +19,8 @@ type RadioProps = {
   onChange?: (string | number, SyntheticInputEvent<HTMLInputElement>) => void,
   /** then true when show error styles */
   hasError?: boolean,
+  /** options to define radio items */
+  options?: ({ value: any, label: string }) => void,
 }
 
 class RadioGroup extends PureComponent<RadioProps> {
@@ -38,13 +41,23 @@ class RadioGroup extends PureComponent<RadioProps> {
     return name || `radio-group-${RadioGroup.instanceCounter}`;
   }
 
+  renderChildren = () => {
+    const { options, children } = this.props;
+
+    return !options
+      ? children
+      : options.map(({ value, label }) => (
+        <RadioItem key={ value } label={ label } value={ value } />
+      ));
+  }
+
   render() {
-    const { children, value, direction, gap, onChange, hasError } = this.props;
+    const { children, value, direction, gap, onChange, hasError, ...rest } = this.props;
 
     return (
-      <FlexLayout direction={ direction } gap={ gap }>
+      <FlexLayout { ...rest } direction={ direction } gap={ gap }>
         {
-          React.Children.map(children, child =>
+          React.Children.map(this.renderChildren(), child =>
             React.cloneElement(child, {
               onChange,
               selectedValue: value,

diff --git a/src/atoms/dataEntry/Radio/RadioItem.js b/src/atoms/dataEntry/Radio/RadioItem.js
@@ -64,7 +64,7 @@ class RadioItem extends PureComponent<RadioItemProps & RadioItemClonedProps> {
         <RadioCircleTag tagName="div" hasError={ hasError }>
           <RadioInnerCircleTag tagName="div" color={ color } selected={ checked } disabled={ disabled } />
         </RadioCircleTag>
-        <RadioTag name={ name } tagName="input" type="radio" value={ value.toString() } onChange={ this.onChange } />
+        <RadioTag name={ name } tagName="input" type="radio" value={ value } onChange={ this.onChange } />
         <If condition={ hasLabel }>
           <RadioTextTag tagName="div">{ label }</RadioTextTag>
         </If>

diff --git a/src/atoms/dataEntry/RadioGroupField/RadioGroupField.js b/src/atoms/dataEntry/RadioGroupField/RadioGroupField.js
@@ -16,6 +16,8 @@ type RadioGroupFieldProps = {
   input?: InputType,
   /** form meta object */
   meta?: MetaType,
+  /** options to define radio items */
+  options?: ({ value: any, label: string }) => void,
 };
 
 const RadioGroupField = ({