Use renderer params in segment input options

Author: AdityaKhatri

components/Input/SegmentInput/Option/index.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { randomString, isFalsy } from '@togglecorp/fujs';
+import {
+    _cs,
+    randomString,
+    isFalsy,
+} from '@togglecorp/fujs';
 
 import styles from './styles.scss';
 
@@ -16,12 +20,22 @@ const propTypes = {
     error: PropTypes.string,
     disabled: PropTypes.bool,
     readOnly: PropTypes.bool,
+    renderer: PropTypes.func,
+    rendererClassName: PropTypes.string,
+    rendererParams: PropTypes.func,
+    index: PropTypes.number.isRequired,
+    datum: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    data: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
 const defaultProps = {
     error: '',
     disabled: false,
     readOnly: false,
+    renderer: undefined,
+    rendererClassName: '',
+    rendererParams: undefined,
+    datum: {},
 };
 
 export default class SegmentOption extends React.PureComponent {
@@ -35,66 +49,61 @@ export default class SegmentOption extends React.PureComponent {
         this.inputId = randomString();
     }
 
-    getClassName = () => {
+    render() {
         const {
+            checked,
+            data,
+            datum,
             disabled,
             error,
-            readOnly,
-            checked,
-        } = this.props;
-
-        const classNames = [
-            'segment-option',
-            styles.segmentOption,
-        ];
-
-        if (checked) {
-            classNames.push('checked');
-            classNames.push(styles.checked);
-        }
-        if (readOnly) {
-            classNames.push('read-only');
-            classNames.push(styles.readOnly);
-        }
-        if (disabled) {
-            classNames.push('disabled');
-            classNames.push(styles.disabled);
-        }
-        if (!isFalsy(error, [''])) {
-            classNames.push('error');
-            classNames.push(styles.error);
-        }
-        return classNames.join(' ');
-    }
-
-    render() {
-        const {
             id,
-            onChange,
-            checked,
+            index,
             label,
             name,
+            onChange,
+            readOnly,
             renderer: Renderer,
-            data,
+            rendererClassName,
+            rendererParams,
         } = this.props;
 
-        const classNames = this.getClassName();
+        const classNames = _cs(
+            'segment-option',
+            styles.segmentOption,
+            checked && 'checked',
+            checked && styles.checked,
+            readOnly && 'read-only',
+            readOnly && styles.readOnly,
+            disabled && 'disabled',
+            disabled && styles.disabled,
+            !isFalsy(error, ['']) && 'error',
+            !isFalsy(error, ['']) && styles.error,
+        );
+
+        const extraProps = rendererParams ? rendererParams(id, datum, index, data) : undefined;
 
         return (
             <label
                 htmlFor={this.inputId}
                 className={classNames}
             >
                 <input
-                    className={`${styles.segmentButtonInput} segment-option-input`}
+                    className={_cs(styles.segmentButtonInput, 'segment-option-input')}
                     type="radio"
                     onChange={onChange}
                     checked={checked}
                     id={this.inputId}
                     value={id}
                     name={name}
                 />
-                { Renderer ? <Renderer data={data} /> : label}
+                { Renderer ? (
+                    <Renderer
+                        className={rendererClassName}
+                        {...extraProps}
+                    />
+                ) : (
+                    label
+                )}
             </label>
         );
     }

components/Input/SegmentInput/index.js

@@ -16,6 +16,8 @@ const propTypes = {
      */
     className: PropTypes.string,
 
+    itemClassName: PropTypes.string,
+
     /**
      * Is input disabled?
      */
@@ -52,6 +54,10 @@ const propTypes = {
     keySelector: PropTypes.func,
     readOnly: PropTypes.bool,
 
+    renderer: PropTypes.func,
+    rendererClassName: PropTypes.string,
+    rendererParams: PropTypes.func,
+
     value: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number,
@@ -63,6 +69,7 @@ const propTypes = {
 
 const defaultProps = {
     className: '',
+    itemClassName: '',
     disabled: false,
     readOnly: false,
     error: '',
@@ -74,6 +81,9 @@ const defaultProps = {
     keySelector: d => d.key,
     labelSelector: d => d.label,
     showHintAndError: true,
+    renderer: undefined,
+    rendererClassName: '',
+    rendererParams: undefined,
     value: '',
     name: '',
     options: [],
@@ -132,19 +142,39 @@ class SegmentInput extends React.PureComponent {
         }
     }
 
-    rendererParams = (key, data) => ({
-        label: this.props.labelSelector(data),
-        id: String(this.props.keySelector(data)),
-        onChange: this.handleInputChange,
-        name: this.props.name,
-        checked: String(this.props.value) === String(key),
-        error: this.props.error,
-        readOnly: this.props.readOnly,
-        disabled: this.props.disabled,
-        renderer: this.props.renderer,
-        className: this.props.itemClassName,
-        data,
-    });
+    rendererParams = (key, datum, index, data) => {
+        const {
+            labelSelector,
+            keySelector,
+            name,
+            value,
+            error,
+            readOnly,
+            renderer,
+            disabled,
+            itemClassName,
+            rendererParams,
+            rendererClassName,
+        } = this.props;
+
+        return ({
+            label: labelSelector(datum),
+            id: String(keySelector(datum)),
+            onChange: this.handleInputChange,
+            name,
+            checked: String(value) === String(key),
+            error,
+            readOnly,
+            disabled,
+            renderer,
+            className: itemClassName,
+            rendererParams,
+            rendererClassName,
+            datum,
+            index,
+            data,
+        });
+    }
 
     render() {
         const {