Merge pull request #1477 from buildo/1476_RadioGroup_doesnt_support_custom_values

1476 radio group doesnt support custom values

Author: veej

src/FormField/RadioGroupField.tsx

@@ -3,12 +3,12 @@ import * as cx from 'classnames';
 import RadioGroup from '../RadioGroup';
 import { FormField } from './FormField';
 
-type DefaultProps = {
+type DefaultProps<T> = {
   /** an optional custom renderer for RadioGroupField */
-  radioGroupRenderer: (props: RadioGroup.Props) => JSX.Element;
+  radioGroupRenderer: (props: RadioGroup.Props<T>) => JSX.Element;
 };
 
-type NonDefaultProps = {
+type NonDefaultProps<T> = {
   /** the label for the field */
   label: FormField.Props['label'];
   /** whether the field is required */
@@ -22,17 +22,17 @@ type NonDefaultProps = {
   /** an optional id passed to the input component */
   id?: string;
   /** the properties of the radio group */
-  radioGroupProps: RadioGroup.Props;
+  radioGroupProps: RadioGroup.Props<T>;
 };
 
-type InternalProps = NonDefaultProps & DefaultProps;
+type InternalProps<T> = NonDefaultProps<T> & DefaultProps<T>;
 
 export namespace RadioGroupField {
-  export type Props = NonDefaultProps & Partial<DefaultProps>;
+  export type Props<T> = NonDefaultProps<T> & Partial<DefaultProps<T>>;
 }
 
-export class RadioGroupField extends React.PureComponent<InternalProps> {
-  static defaultProps: DefaultProps = {
+export class RadioGroupField<T> extends React.PureComponent<InternalProps<T>> {
+  static defaultProps: DefaultProps<unknown> = {
     radioGroupRenderer: props => (
       <RadioGroup {...props} style={{ marginTop: '16px', ...props.style }} />
     )

src/RadioGroup/Examples.md

@@ -34,20 +34,26 @@ const onChange = value => setState({ value });
 const options = [
   {
     label: 'First',
-    value: 'first'
+    value: { position: 'first' }
   },
   {
     label: 'Second',
-    value: 'second'
+    value: { position: 'second' }
   },
   {
     label: 'Other',
-    value: 'other'
+    value: { position: 'other' }
   }
 ];
 
 <form className="ui form">
-  <RadioGroup horizontal value={state.value} onChange={onChange} options={options} />
-  <div style={{ marginTop: 20 }}>Selected: {state.value}</div>
+  <RadioGroup
+    horizontal
+    value={state.value}
+    onChange={onChange}
+    getValueKey={value => value.position}
+    options={options}
+  />
+  <div style={{ marginTop: 20 }}>Selected: {state.value ? state.value.position : state.value}</div>
 </form>;
 ```

src/RadioGroup/RadioGroup.tsx

@@ -2,18 +2,19 @@ import * as React from 'react';
 import * as cx from 'classnames';
 import FlexView from 'react-flexview';
 
-export type RadioOption = {
+export type RadioOption<T> = {
   label: string;
-  value: string;
+  value: T;
 };
 
-export type RadioGroupRequiredProps = {
+export type RadioGroupRequiredProps<T> = {
   /** value */
-  value?: string;
+  value?: T;
   /** onChange */
-  onChange: (value: string) => void;
+  onChange: (value: T) => void;
+  getValueKey?: (value: T) => string;
   /** text displayed on the right of the checkbox */
-  options: Array<RadioOption>;
+  options: Array<RadioOption<T>>;
   className?: string;
   id?: string;
   style?: React.CSSProperties;
@@ -27,16 +28,16 @@ export type RadioGroupDefaultProps = {
 };
 
 export namespace RadioGroup {
-  export type Props = RadioGroupRequiredProps & Partial<RadioGroupDefaultProps>;
+  export type Props<T> = RadioGroupRequiredProps<T> & Partial<RadioGroupDefaultProps>;
 }
 
-export class RadioGroup extends React.PureComponent<RadioGroup.Props> {
+export class RadioGroup<T> extends React.PureComponent<RadioGroup.Props<T>> {
   static defaultProps: RadioGroupDefaultProps = {
     disabled: false,
     horizontal: false
   };
 
-  onChange = (option: RadioOption): React.EventHandler<any> => {
+  onChange = (option: RadioOption<T>): React.EventHandler<any> => {
     return e => {
       e.stopPropagation();
       if (!this.props.disabled) {
@@ -47,6 +48,9 @@ export class RadioGroup extends React.PureComponent<RadioGroup.Props> {
 
   render() {
     const { id, className, style, disabled, options, value, horizontal } = this.props;
+    const defaultedGetValueKey = this.props.getValueKey
+      ? this.props.getValueKey
+      : (value: T) => value;
     return (
       <FlexView
         shrink={false}
@@ -65,10 +69,11 @@ export class RadioGroup extends React.PureComponent<RadioGroup.Props> {
       >
         {options.map(option => (
           <FlexView
-            key={option.value}
+            key={option.label}
             vAlignContent="center"
             className={cx('radio-group-option', {
-              'is-checked': option.value === value
+              'is-checked':
+                value && defaultedGetValueKey(option.value) === defaultedGetValueKey(value)
             })}
           >
             <svg viewBox="0 0 16 16" onClick={this.onChange(option)}>