refactor: refactorng after review

openedx · Sep 18, 2023 · 62b9d12 · 62b9d12
1 parent 029f3d9
commit 62b9d12
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 27 deletions.
diff --git a/src/Form/FormControl.jsx b/src/Form/FormControl.jsx
@@ -9,8 +9,6 @@ import FormControlDecoratorGroup from './FormControlDecoratorGroup';
 
 import { callAllHandlers, useHasValue } from './fieldUtils';
 
-const DEFAULT_MASK_VALUE = '00-00-000';
-
 const FormControl = React.forwardRef(({
   as,
   className,
@@ -21,7 +19,6 @@ const FormControl = React.forwardRef(({
   autoResize,
   onChange,
   hasInputMask,
-  mask,
   ...props
 }, ref) => {
   const {
@@ -76,7 +73,7 @@ const FormControl = React.forwardRef(({
       className={className}
     >
       <RBFormControl
-        as={hasInputMask ? IMaskInput : as}
+        as={hasInputMask?.length ? IMaskInput : as}
         ref={resolvedRef}
         size={size}
         isInvalid={isInvalid}
@@ -85,7 +82,7 @@ const FormControl = React.forwardRef(({
           'has-value': hasValue,
         })}
         onChange={handleOnChange}
-        mask={mask}
+        mask={hasInputMask}
         {...controlProps}
       />
     </FormControlDecoratorGroup>
@@ -128,10 +125,8 @@ FormControl.propTypes = {
   isInvalid: PropTypes.bool,
   /** Only for `as="textarea"`. Specifies whether the input can be resized according to the height of content. */
   autoResize: PropTypes.bool,
-  /** Specifies whether to use an input mask for the input. */
-  hasInputMask: PropTypes.bool,
-  /** Specifies the input mask to be used if `hasInputMask` is set to `true`. */
-  mask: PropTypes.string,
+  /** Specifies what format to use for the input mask. */
+  hasInputMask: PropTypes.string,
 };
 
 FormControl.defaultProps = {
@@ -150,8 +145,7 @@ FormControl.defaultProps = {
   isValid: undefined,
   isInvalid: undefined,
   autoResize: false,
-  hasInputMask: false,
-  mask: DEFAULT_MASK_VALUE,
+  hasInputMask: undefined,
 };
 
 export default FormControl;
diff --git a/src/Form/form-control.mdx b/src/Form/form-control.mdx
@@ -179,8 +179,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
         <h3>Phone</h3>
         <Form.Group>
           <Form.Control
-            hasInputMask
-            mask="+{1}(000)000-00-00"
+            hasInputMask="+{1}(000)000-00-00"
             value={value}
             onChange={handleChange}
             leadingElement={<Icon src={FavoriteBorder} />}
@@ -193,8 +192,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
       <h3>Credit card</h3>
       <Form.Group>
         <Form.Control
-          hasInputMask
-          mask="0000 0000 0000 0000"
+          hasInputMask="0000 0000 0000 0000"
           value={value}
           onChange={handleChange}
           leadingElement={<Icon src={FavoriteBorder} />}
@@ -206,8 +204,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
       <h3>Date</h3>
       <Form.Group>
         <Form.Control
-          hasInputMask
-          mask={Date}
+          hasInputMask={Date}
           value={value}
           onChange={handleChange}
           leadingElement={<Icon src={FavoriteBorder} />}
@@ -219,8 +216,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
       <h3>Secure password</h3>
       <Form.Group>
         <Form.Control
-          hasInputMask
-          mask="XXX-XX-0000"
+          hasInputMask="XXX-XX-0000"
           value={value}
           definitions={{
             X: {
@@ -239,8 +235,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
       <h3>OTP password</h3>
       <Form.Group>
         <Form.Control
-          hasInputMask
-          mask="G-00000"
+          hasInputMask="G-00000"
           value={value}
           onChange={handleChange}
           leadingElement={<Icon src={FavoriteBorder} />}
@@ -253,8 +248,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
           <h3>Course prise</h3>
           <Form.Group>
             <Form.Control
-              hasInputMask
-              mask="$num"
+              hasInputMask="$num"
               blocks={{
                 num: {
                   // nested masks are available!
@@ -303,8 +297,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
   return (
     <Form.Group>
       <Form.Control
-        hasInputMask
-        mask="+{1}(000)000-00-00"
+        hasInputMask="+{1}(000)000-00-00"
         leadingElement={<Icon src={FavoriteBorder} />}
         trailingElement={<Icon src={Verified} />}
         floatingLabel="What is your phone number?"

diff --git a/src/Form/tests/FormControl.test.jsx b/src/Form/tests/FormControl.test.jsx
@@ -14,8 +14,7 @@ function Component({ isClearValue }) {
 
   return (
     <FormControl
-      hasInputMask
-      mask="+{1}(000)000-00-00"
+      hasInputMask="+{1}(000)000-00-00"
       value={inputValue}
       onChange={isClearValue ? onChangeFunc : (e) => setInputValue(e.target.value)}
       onAccept={isClearValue ? onChangeFunc : (value) => setInputValue(value)}