Merge branch 'feature/improve-input-error-behaviour' into develop

Author: tnagorra

components/Input/ColorInput/index.js

@@ -50,6 +50,7 @@ const propTypes = {
 
     disabled: PropTypes.bool,
     readOnly: PropTypes.bool,
+    persistantHintAndError: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -61,6 +62,7 @@ const defaultProps = {
     showHintAndError: true,
     disabled: false,
     readOnly: false,
+    persistantHintAndError: true,
 };
 
 class ColorInput extends React.PureComponent {
@@ -136,6 +138,7 @@ class ColorInput extends React.PureComponent {
             hint,
             disabled,
             readOnly,
+            persistantHintAndError,
         } = this.props;
 
         const { showColorPicker } = this.state;
@@ -179,6 +182,7 @@ class ColorInput extends React.PureComponent {
                     show={showHintAndError}
                     hint={hint}
                     error={error}
+                    persistant={persistantHintAndError}
                 />
                 {
                     showColorPicker && (

components/Input/HintAndError/index.js

@@ -8,12 +8,14 @@ const propTypes = {
     show: PropTypes.bool,
     error: PropTypes.string,
     hint: PropTypes.string,
+    persistant: PropTypes.bool,
 };
 
 const defaultProps = {
     show: true,
     error: undefined,
     hint: undefined,
+    persistant: false,
 };
 
 const emptyText = '-';
@@ -28,9 +30,10 @@ export default class InputHintAndError extends React.PureComponent {
             show,
             error,
             hint,
+            persistant,
         } = this.props;
 
-        if (!show) {
+        if (!show || (!persistant && !error)) {
             return null;
         }
 

components/Input/HintAndError/styles.scss

@@ -1,4 +1,3 @@
-
 .input-hint-and-error {
     overflow: hidden;
     text-overflow: ellipsis;

components/Input/NonFieldErrors/styles.scss

@@ -1,4 +1,3 @@
-
 .non-field-errors {
     display: flex;
     text-align: center;
@@ -9,7 +8,8 @@
         padding: var(--spacing-small);
 
         &.empty {
-            color: transparent;
+            display: none;
+            // color: transparent;
             user-select: none;
         }
 

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,64 +49,61 @@ export default class SegmentOption extends React.PureComponent {
         this.inputId = randomString();
     }
 
-    getClassName = () => {
+    render() {
         const {
+            checked,
+            data,
+            datum,
             disabled,
             error,
+            id,
+            index,
+            label,
+            name,
+            onChange,
             readOnly,
-            checked,
+            renderer: Renderer,
+            rendererClassName,
+            rendererParams,
         } = this.props;
 
-        const classNames = [
+        const classNames = _cs(
             '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,
-            label,
-            name,
-        } = this.props;
+            checked && 'checked',
+            checked && styles.checked,
+            readOnly && 'read-only',
+            readOnly && styles.readOnly,
+            disabled && 'disabled',
+            disabled && styles.disabled,
+            !isFalsy(error, ['']) && 'error',
+            !isFalsy(error, ['']) && styles.error,
+        );
 
-        const classNames = this.getClassName();
+        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}
                 />
-                {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,16 +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,
-    });
+    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 {

components/Input/SelectInput/index.js

@@ -60,6 +60,7 @@ const propTypes = {
     optionLabelSelector: PropTypes.func,
 
     renderEmpty: PropTypes.func,
+    persistantHintAndError: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -82,6 +83,7 @@ const defaultProps = {
     showLabel: true,
     title: undefined,
     value: undefined,
+    persistantHintAndError: true,
 };
 
 class SelectInput extends React.PureComponent {
@@ -292,6 +294,7 @@ class SelectInput extends React.PureComponent {
             autoFocus,
             hideClearButton,
             className: classNameFromProps,
+            persistantHintAndError,
             options,
         } = this.props;
 
@@ -415,12 +418,12 @@ class SelectInput extends React.PureComponent {
                         />
                     </div>
                 </div>
-                { showHintAndError && (
-                    <HintAndError
-                        error={error}
-                        hint={hint}
-                    />
-                )}
+                <HintAndError
+                    show={showHintAndError}
+                    error={error}
+                    hint={hint}
+                    persistant={persistantHintAndError}
+                />
                 <Options
                     className={optionsClassName}
                     labelSelector={labelSelector}

components/Input/TextArea/index.js

@@ -63,6 +63,7 @@ const propTypes = {
     resize: PropTypes.string,
 
     selectOnFocus: PropTypes.bool,
+    persistantHintAndError: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -80,6 +81,7 @@ const defaultProps = {
     showHintAndError: true,
     value: '',
     selectOnFocus: false,
+    persistantHintAndError: true,
 };
 
 export class NormalTextArea extends React.PureComponent {
@@ -188,6 +190,7 @@ export class NormalTextArea extends React.PureComponent {
             showHintAndError,
             disabled,
             resize,
+            persistantHintAndError,
             ...otherProps
         } = this.props;
 
@@ -216,6 +219,7 @@ export class NormalTextArea extends React.PureComponent {
                     show={showHintAndError}
                     hint={hint}
                     error={error}
+                    persistant={persistantHintAndError}
                 />
             </div>
         );