From 4a8165723dd06273b511367dd7f975d3d14fe629 Mon Sep 17 00:00:00 2001
From: Sean Heffernan <sean.heffernan@instacart.com>
Date: Thu, 2 Apr 2020 09:08:14 -0400
Subject: [PATCH] Expose some 'react-text-mask' props on the MaskedTextField
 component

---
 src/components/Forms/MaskedTextField.js       | 20 +++++++++++++++++--
 .../__snapshots__/DateField.spec.js.snap      |  6 ++++++
 .../MaskedTextField.spec.js.snap              |  6 ++++++
 .../PhoneNumberField.spec.js.snap             |  6 ++++++
 4 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/Forms/MaskedTextField.js b/src/components/Forms/MaskedTextField.js
index 6c888bc7..55b0388a 100644
--- a/src/components/Forms/MaskedTextField.js
+++ b/src/components/Forms/MaskedTextField.js
@@ -120,6 +120,11 @@ export const maskedTextFieldPropTypes = {
   floatingLabelText: PropTypes.string,
   /** Sets width to 100% */
   fullWidth: PropTypes.bool,
+  /**
+   * Tells the input whether to be in guide mode or not.
+   * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
+   */
+  guide: PropTypes.bool,
   /** Sets width to 162px */
   halfWidth: PropTypes.bool,
   /** FormComponent error for validation */
@@ -132,6 +137,13 @@ export const maskedTextFieldPropTypes = {
   inputStyle: PropTypes.object,
   /** Set by FormComponent by default.   */
   isValid: PropTypes.bool,
+  /**
+   * Changes the behavour of the input mask.
+   * When `true`, adding or deleting characters will not affect the positions of existing characters.
+   * When `false`, adding characters causes existing characters to advance.
+   * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#keepcharpositions
+   */
+  keepCharPositions: PropTypes.bool,
   /** onFocus callback */
   onFocus: PropTypes.func,
   /** onChange callback
@@ -170,6 +182,8 @@ class MaskedTextField extends React.Component {
     autoComplete: 'on',
     disabled: false,
     defaultValue: null,
+    guide: false,
+    keepCharPositions: true,
     onChange: NoOp,
     onKeyDown: NoOp,
     onFocus: NoOp,
@@ -237,10 +251,12 @@ class MaskedTextField extends React.Component {
       defaultValue,
       disabled,
       fullWidth,
+      guide,
       halfWidth,
       hasError,
       id: inputId,
       isValid,
+      keepCharPositions,
       name,
       required,
       serverError,
@@ -288,7 +304,7 @@ class MaskedTextField extends React.Component {
             mask={mask}
             pipe={pipe}
             id={inputId}
-            guide={false}
+            guide={guide}
             name={name}
             aria-required={required}
             aria-invalid={hasError}
@@ -301,7 +317,7 @@ class MaskedTextField extends React.Component {
             placeholder=""
             defaultValue={value !== undefined ? undefined : defaultValue}
             disabled={disabled}
-            keepCharPositions
+            keepCharPositions={keepCharPositions}
             type={this.props.type}
             render={(ref, props) => (
               <input
diff --git a/src/components/Forms/__tests__/__snapshots__/DateField.spec.js.snap b/src/components/Forms/__tests__/__snapshots__/DateField.spec.js.snap
index 554fe3be..191bff26 100644
--- a/src/components/Forms/__tests__/__snapshots__/DateField.spec.js.snap
+++ b/src/components/Forms/__tests__/__snapshots__/DateField.spec.js.snap
@@ -106,10 +106,12 @@ exports[`renders correctly 1`] = `
                 disabled={false}
                 floatingLabelText="Date of Birth"
                 getValue={[Function]}
+                guide={false}
                 hasError={false}
                 hintText="MM/DD/YYYY"
                 id="test_id"
                 isValid={true}
+                keepCharPositions={true}
                 mask={
                   Array [
                     /\\\\d/,
@@ -504,10 +506,12 @@ exports[`renders correctly with focus state 1`] = `
                 disabled={false}
                 floatingLabelText="Date of Birth"
                 getValue={[Function]}
+                guide={false}
                 hasError={false}
                 hintText="MM/DD/YYYY"
                 id="test_id"
                 isValid={true}
+                keepCharPositions={true}
                 mask={
                   Array [
                     /\\\\d/,
@@ -948,10 +952,12 @@ exports[`uses a custom theme for all child components if one is provided 1`] = `
                 disabled={false}
                 floatingLabelText="Date of Birth"
                 getValue={[Function]}
+                guide={false}
                 hasError={false}
                 hintText="MM/DD/YYYY"
                 id="test_id"
                 isValid={true}
+                keepCharPositions={true}
                 mask={
                   Array [
                     /\\\\d/,
diff --git a/src/components/Forms/__tests__/__snapshots__/MaskedTextField.spec.js.snap b/src/components/Forms/__tests__/__snapshots__/MaskedTextField.spec.js.snap
index bc9b7e22..b1a825d3 100644
--- a/src/components/Forms/__tests__/__snapshots__/MaskedTextField.spec.js.snap
+++ b/src/components/Forms/__tests__/__snapshots__/MaskedTextField.spec.js.snap
@@ -94,9 +94,11 @@ exports[`renders correctly 1`] = `
               disabled={false}
               floatingLabelText="SSN"
               getValue={[Function]}
+              guide={false}
               hasError={false}
               id="test_id"
               isValid={true}
+              keepCharPositions={true}
               mask={
                 Array [
                   /\\\\d/,
@@ -475,9 +477,11 @@ exports[`renders correctly with focus state 1`] = `
               disabled={false}
               floatingLabelText="SSN"
               getValue={[Function]}
+              guide={false}
               hasError={false}
               id="test_id"
               isValid={true}
+              keepCharPositions={true}
               mask={
                 Array [
                   /\\\\d/,
@@ -888,9 +892,11 @@ exports[`uses a custom theme for all child components if one is provided 1`] = `
               disabled={false}
               floatingLabelText="SSN"
               getValue={[Function]}
+              guide={false}
               hasError={false}
               id="test_id"
               isValid={true}
+              keepCharPositions={true}
               mask={
                 Array [
                   /\\\\d/,
diff --git a/src/components/Forms/__tests__/__snapshots__/PhoneNumberField.spec.js.snap b/src/components/Forms/__tests__/__snapshots__/PhoneNumberField.spec.js.snap
index 4a3a7bd8..6b56e6a5 100644
--- a/src/components/Forms/__tests__/__snapshots__/PhoneNumberField.spec.js.snap
+++ b/src/components/Forms/__tests__/__snapshots__/PhoneNumberField.spec.js.snap
@@ -115,10 +115,12 @@ exports[`renders correctly 1`] = `
                 disabled={false}
                 floatingLabelText="Phone Number"
                 getValue={[Function]}
+                guide={false}
                 hasError={false}
                 hintText="(555) 555-555"
                 id="test_id"
                 isValid={true}
+                keepCharPositions={true}
                 mask={
                   Array [
                     "(",
@@ -528,10 +530,12 @@ exports[`renders correctly with focus state 1`] = `
                 disabled={false}
                 floatingLabelText="Phone Number"
                 getValue={[Function]}
+                guide={false}
                 hasError={false}
                 hintText="(555) 555-555"
                 id="test_id"
                 isValid={true}
+                keepCharPositions={true}
                 mask={
                   Array [
                     "(",
@@ -987,10 +991,12 @@ exports[`uses a custom theme for all child components if one is provided 1`] = `
                 disabled={false}
                 floatingLabelText="Phone Number"
                 getValue={[Function]}
+                guide={false}
                 hasError={false}
                 hintText="(555) 555-555"
                 id="test_id"
                 isValid={true}
+                keepCharPositions={true}
                 mask={
                   Array [
                     "(",