refactor: refactoring after review

openedx · Oct 20, 2023 · c1c1a1e · c1c1a1e
1 parent 98726d2
commit c1c1a1e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/src/Form/FormControl.jsx b/src/Form/FormControl.jsx
@@ -18,7 +18,7 @@ const FormControl = React.forwardRef(({
   floatingLabel,
   autoResize,
   onChange,
-  hasInputMask,
+  inputMask,
   ...props
 }, ref) => {
   const {
@@ -73,7 +73,7 @@ const FormControl = React.forwardRef(({
       className={className}
     >
       <RBFormControl
-        as={hasInputMask?.length ? IMaskInput : as}
+        as={inputMask ? IMaskInput : as}
         ref={resolvedRef}
         size={size}
         isInvalid={isInvalid}
@@ -82,7 +82,7 @@ const FormControl = React.forwardRef(({
           'has-value': hasValue,
         })}
         onChange={handleOnChange}
-        mask={hasInputMask}
+        mask={inputMask}
         {...controlProps}
       />
     </FormControlDecoratorGroup>
@@ -126,7 +126,7 @@ FormControl.propTypes = {
   /** Only for `as="textarea"`. Specifies whether the input can be resized according to the height of content. */
   autoResize: PropTypes.bool,
   /** Specifies what format to use for the input mask. */
-  hasInputMask: PropTypes.string,
+  inputMask: PropTypes.string,
 };
 
 FormControl.defaultProps = {
@@ -145,7 +145,7 @@ FormControl.defaultProps = {
   isValid: undefined,
   isInvalid: undefined,
   autoResize: false,
-  hasInputMask: undefined,
+  inputMask: undefined,
 };
 
 export default FormControl;
diff --git a/src/Form/form-control.mdx b/src/Form/form-control.mdx
@@ -165,7 +165,7 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 ## Input masks
 Paragon uses the [react-imask](https://www.npmjs.com/package/react-imask) library,
 which allows you to add masks of different types for inputs.
-To create your own mask, you need to pass the required mask pattern (`+{1}(000)000-00-00`) to the `hasInputMask` property. <br />
+To create your own mask, you need to pass the required mask pattern (`+{1}(000)000-00-00`) to the `inputMask` property. <br />
 See [react-imask](https://imask.js.org) for documentation on available props.
 
 ```jsx live
@@ -180,7 +180,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
         <h3>Phone</h3>
         <Form.Group>
           <Form.Control
-            hasInputMask="+{1}(000)000-00-00"
+            inputMask="+{1}(000)000-00-00"
             value={value}
             onChange={handleChange}
             leadingElement={<Icon src={FavoriteBorder} />}
@@ -193,7 +193,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
       <h3>Credit card</h3>
       <Form.Group>
         <Form.Control
-          hasInputMask="0000 0000 0000 0000"
+          inputMask="0000 0000 0000 0000"
           value={value}
           onChange={handleChange}
           leadingElement={<Icon src={FavoriteBorder} />}
@@ -205,7 +205,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
       <h3>Date</h3>
       <Form.Group>
         <Form.Control
-          hasInputMask={Date}
+          inputMask={Date}
           value={value}
           onChange={handleChange}
           leadingElement={<Icon src={FavoriteBorder} />}
@@ -217,7 +217,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
       <h3>Secure password</h3>
       <Form.Group>
         <Form.Control
-          hasInputMask="XXX-XX-0000"
+          inputMask="XXX-XX-0000"
           value={value}
           definitions={{
             X: {
@@ -236,7 +236,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
       <h3>OTP password</h3>
       <Form.Group>
         <Form.Control
-          hasInputMask="G-00000"
+          inputMask="G-00000"
           value={value}
           onChange={handleChange}
           leadingElement={<Icon src={FavoriteBorder} />}
@@ -249,7 +249,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
           <h3>Course prise</h3>
           <Form.Group>
             <Form.Control
-              hasInputMask="$num"
+              inputMask="$num"
               blocks={{
                 num: {
                   // nested masks are available!
@@ -298,7 +298,7 @@ To get a value without a mask, you need to use `onChange` instead of `onAccept`
       <>
         <Form.Group>
           <Form.Control
-            hasInputMask="+{1}(000)000-00-00"
+            inputMask="+{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
@@ -17,7 +17,7 @@ function Component({ isClearValue }) {
 
   return (
     <FormControl
-      hasInputMask="+{1}(000)000-00-00"
+      inputMask="+{1}(000)000-00-00"
       value={inputValue}
       onChange={isClearValue ? onChangeFunc : (e) => setInputValue(e.target.value)}
       onAccept={isClearValue ? onChangeFunc : (value) => setInputValue(value)}