feat(Radio): add render prop feature

8base · Sep 9, 2020 · 13025ce · 13025ce
1 parent 39b6a63
commit 13025ce
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/src/components/Radio/RadioItem.js b/src/components/Radio/RadioItem.js
@@ -21,10 +21,11 @@ type RadioItemClonedProps = {
 }
 
 type RadioItemProps = {
+  children?: React$Node | ({ checked: boolean }) => React$Node,
   /** text of the label */
   label?: string,
   /** radio value */
-  value: string | number,
+  value: string | number | boolean,
   /** possible colors */
   color?: 'primary' | 'secondary',
   /** when true then disable radio */
@@ -53,6 +54,7 @@ class RadioItem extends PureComponent<RadioItemProps & RadioItemClonedProps> {
       selectedValue,
       equalsFunc,
       onChange,
+      children,
       ...rest
     } = this.props;
     const hasLabel = !!label;
@@ -61,12 +63,22 @@ class RadioItem extends PureComponent<RadioItemProps & RadioItemClonedProps> {
     return (
       <RadioWrapperTag tagName="label" { ...rest }>
         <RadioTag modifiers={ rest } name={ name } tagName="input" type="radio" onChange={ this.onChange } checked={ checked } />
-        <RadioCircleTag modifiers={ rest } tagName="div" >
-          <RadioCircleInnerTag modifiers={ rest } tagName="div" checked={ checked } />
-        </RadioCircleTag>
-        <If condition={ hasLabel }>
-          <RadioTextTag modifiers={ rest } tagName="div">{ label }</RadioTextTag>
-        </If>
+        <Choose>
+          <When condition={ typeof children === 'function' }>
+            { children({ checked }) }
+          </When>
+          <When condition={ !!children }>
+            { children }
+          </When>
+          <Otherwise>
+            <RadioCircleTag modifiers={ rest } tagName="div" >
+              <RadioCircleInnerTag modifiers={ rest } tagName="div" checked={ checked } />
+            </RadioCircleTag>
+            <If condition={ hasLabel }>
+              <RadioTextTag modifiers={ rest } tagName="div">{ label }</RadioTextTag>
+            </If>
+          </Otherwise>
+        </Choose>
       </RadioWrapperTag>
     );
   }

diff --git a/src/components/RadioGroupField/RadioGroupField.js b/src/components/RadioGroupField/RadioGroupField.js
@@ -5,7 +5,7 @@ import React from 'react';
 import * as formUtils from '../../utils/forms';
 import { Radio } from '../Radio';
 import { FormField } from '../Form/FormField';
-import type { InputType, MetaType, PropSizes } from '../../types';
+import type { InputType, MetaType, PropLayout, PropLayoutStretch, PropSizes } from '../../types';
 
 type RadioGroupFieldProps = {
   /** Grop.Item components */
@@ -26,6 +26,10 @@ type RadioGroupFieldProps = {
   disabled?: boolean,
   /** stretch */
   stretch?: boolean,
+  justifyContent?: PropLayoutStretch,
+  alignContent?: PropLayout,
+  alignItems?: PropLayoutStretch,
+  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse',
 };
 
 const RadioGroupField = ({
@@ -38,6 +42,10 @@ const RadioGroupField = ({
   options,
   disabled,
   stretch,
+  justifyContent,
+  alignContent,
+  alignItems,
+  flexWrap,
   ...rest
 }: RadioGroupFieldProps) => {
   const { name, value, onChange } = input;
@@ -56,6 +64,10 @@ const RadioGroupField = ({
         value={ value }
         disabled={ disabled }
         stretch={ stretch }
+        justifyContent={ justifyContent }
+        alignContent={ alignContent }
+        alignItems={ alignItems }
+        flexWrap={ flexWrap }
       >
         { children }
       </Radio.Group>