Improve input error behaviour

Author: frozenhelium

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

@@ -74,6 +74,8 @@ export default class SegmentOption extends React.PureComponent {
             checked,
             label,
             name,
+            renderer: Renderer,
+            data,
         } = this.props;
 
         const classNames = this.getClassName();
@@ -92,7 +94,7 @@ export default class SegmentOption extends React.PureComponent {
                     value={id}
                     name={name}
                 />
-                {label}
+                { Renderer ? <Renderer data={data} /> : label}
             </label>
         );
     }

components/Input/SegmentInput/index.js

@@ -141,6 +141,9 @@ class SegmentInput extends React.PureComponent {
         error: this.props.error,
         readOnly: this.props.readOnly,
         disabled: this.props.disabled,
+        renderer: this.props.renderer,
+        className: this.props.itemClassName,
+        data,
     });
 
     render() {

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>
         );

components/Input/TextInput/index.js

@@ -29,6 +29,7 @@ const propTypes = {
     ]),
     selectOnFocus: PropTypes.bool,
     title: PropTypes.string,
+    persistantHintAndError: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -46,6 +47,7 @@ const defaultProps = {
     value: '',
     selectOnFocus: false,
     title: undefined,
+    persistantHintAndError: true,
 };
 
 class TextInput extends React.PureComponent {
@@ -138,6 +140,7 @@ class TextInput extends React.PureComponent {
             showHintAndError,
             disabled,
             title,
+            persistantHintAndError,
             ...otherProps
         } = this.props;
 
@@ -170,6 +173,7 @@ class TextInput extends React.PureComponent {
                     show={showHintAndError}
                     hint={hint}
                     error={error}
+                    persistant={persistantHintAndError}
                 />
             </div>
         );