Merge pull request toggle-corp#755 from toggle-corp/feature/radio-inp…

…ut-hint-error Add hint and error to RadioInput
Bihan · Mar 9, 2021 · 7e72f93 · 7e72f93
2 parents 162ac22 + 2abe554
commit 7e72f93
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 8 deletions.
diff --git a/components/Input/RadioInput/index.js b/components/Input/RadioInput/index.js
@@ -5,6 +5,7 @@ import { FaramInputElement } from '@togglecorp/faram';
 import memoize from 'memoize-one';
 
 import ListView from '../../View/List/ListView';
+import HintAndError from '../HintAndError';
 
 import Option from './Option';
 import styles from './styles.scss';
@@ -41,7 +42,15 @@ const propTypes = {
     /**
      * key for selected option
      */
-    value: PropTypes.string,
+    persistentHintAndError: PropTypes.bool,
+    showHintAndError: PropTypes.bool,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+    ]),
+    hint: PropTypes.string,
+    error: PropTypes.string,
+    changeDelay: PropTypes.number,
 };
 
 const defaultProps = {
@@ -55,6 +64,11 @@ const defaultProps = {
     options: [],
     // disabled: false,
     // readOnly: false,
+    persistentHintAndError: true,
+    showHintAndError: true,
+    hint: '',
+    error: '',
+    changeDelay: undefined,
 };
 
 export class NormalRadioInput extends React.PureComponent {
@@ -85,6 +99,13 @@ export class NormalRadioInput extends React.PureComponent {
         const {
             className, // eslint-disable-line @typescript-eslint/no-unused-vars, no-unused-vars
             onChange, // eslint-disable-line @typescript-eslint/no-unused-vars, no-unused-vars
+            hint, // eslint-disable-line @typescript-eslint/no-unused-vars, no-unused-vars
+            error, // eslint-disable-line @typescript-eslint/no-unused-vars, no-unused-vars
+            changeDelay, // eslint-disable-line @typescript-eslint/no-unused-vars, no-unused-vars
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+            showHintAndError,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+            persistentHintAndError,
             labelSelector,
             keySelector,
             options,
@@ -108,16 +129,28 @@ export class NormalRadioInput extends React.PureComponent {
             className,
             options,
             keySelector,
+            persistentHintAndError,
+            showHintAndError,
+            hint,
+            error,
         } = this.props;
 
         return (
-            <ListView
-                className={_cs('radio-input', className, styles.radioInput)}
-                data={options}
-                keySelector={keySelector}
-                renderer={Option}
-                rendererParams={this.rendererParams}
-            />
+            <>
+                <ListView
+                    className={_cs('radio-input', className, styles.radioInput)}
+                    data={options}
+                    keySelector={keySelector}
+                    renderer={Option}
+                    rendererParams={this.rendererParams}
+                />
+                <HintAndError
+                    show={showHintAndError}
+                    hint={hint}
+                    error={error}
+                    persistent={persistentHintAndError}
+                />
+            </>
         );
     }
 }

diff --git a/components/View/FloatingContainer/index.js b/components/View/FloatingContainer/index.js
@@ -174,6 +174,7 @@ export default class FloatingContainer extends React.PureComponent {
             <div
                 className={className}
                 ref={this.containerRef}
+                style={this.props.style}
             >
                 { children }
             </div>