From 314f1415acf6ed876d88f46dfd086ef643ae185f Mon Sep 17 00:00:00 2001
From: Bruno Cunha <bruno.silva.cunha@hotmail.com>
Date: Wed, 28 Sep 2022 16:01:42 -0300
Subject: [PATCH 1/3] feat: adding new patterns

---
 example/src/index.js | 20 ++++++++++++++++++++
 src/types.ts         |  1 +
 2 files changed, 21 insertions(+)

diff --git a/example/src/index.js b/example/src/index.js
index 17e7402c..85afb3b1 100644
--- a/example/src/index.js
+++ b/example/src/index.js
@@ -154,6 +154,26 @@ class App extends React.Component {
           <h3>Custom Numeral: add support for custom languages </h3>
           <NumericFormat customNumerals={['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']} />
         </div>
+
+        <div className="example">
+          <h3>Format on type</h3>
+          <PatternFormat format="###.###.###-##" formatOnType />
+        </div>
+
+        <div className="example">
+          <h3>Format phone number on type</h3>
+          <PatternFormat format="+1 (###) ###-####" formatOnType />
+        </div>
+
+        <div className="example">
+          <h3>Format postal code on type</h3>
+          <PatternFormat format="##.###-###" formatOnType />
+        </div>
+
+        <div className="example">
+          <h3>Format date on type</h3>
+          <PatternFormat format="##/##/####" formatOnType />
+        </div>
       </div>
     );
   }
diff --git a/src/types.ts b/src/types.ts
index 93b9295f..2c0b9baf 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -110,6 +110,7 @@ export type PatternFormatProps<BaseType = InputAttributes> = NumberFormatProps<
     mask?: string | string[];
     allowEmptyFormatting?: boolean;
     patternChar?: string;
+    formatOnType?: boolean;
   },
   BaseType
 >;

From e89a21fa79e64b5400c9f0863cf9ea44372b5277 Mon Sep 17 00:00:00 2001
From: Bruno Cunha <bruno.silva.cunha@hotmail.com>
Date: Wed, 28 Sep 2022 16:01:25 -0300
Subject: [PATCH 2/3] refact: create function to handle formatted array

---
 src/pattern_format.tsx | 32 ++++++++++++++++++++++++++++----
 src/utils.tsx          |  2 +-
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/pattern_format.tsx b/src/pattern_format.tsx
index 45bccac8..8041c204 100644
--- a/src/pattern_format.tsx
+++ b/src/pattern_format.tsx
@@ -9,20 +9,44 @@ import {
 } from './utils';
 import NumberFormatBase from './number_format_base';
 
+function _getFormattedNumberArray(format: string, patternChar: string, numStr: string, formatOnType: boolean) {
+  const formatArray = format.split('');
+  if (!formatOnType) {
+    return formatArray;
+  }
+  let hashCount = 0;
+  // find last pattern index
+  const replacePatternIdx = formatArray.findIndex((char) => {
+    if (char === patternChar) {
+      hashCount += 1;
+    }
+    return hashCount === numStr.length
+  })
+
+  // filter format array until numStr length
+  return formatArray.filter((_, index) => {
+    return replacePatternIdx >= 0 
+      ? index <= replacePatternIdx
+      : true
+  });
+}
+
 export function format<BaseType = InputAttributes>(
   numStr: string,
   props: PatternFormatProps<BaseType>,
 ) {
   const format = props.format as string;
-  const { allowEmptyFormatting, mask, patternChar = '#' } = props;
+  const { allowEmptyFormatting, mask, patternChar = '#', formatOnType } = props;
 
   if (numStr === '' && !allowEmptyFormatting) return '';
 
-  let hashCount = 0;
-  const formattedNumberAry = format.split('');
+  const formattedNumberAry = _getFormattedNumberArray(format, patternChar, numStr, formatOnType);
+  
+  let hashCount = 0
+
   for (let i = 0, ln = format.length; i < ln; i++) {
     if (format[i] === patternChar) {
-      formattedNumberAry[i] = numStr[hashCount] || getMaskAtIndex(mask, hashCount);
+      formattedNumberAry[i] = numStr[hashCount] || getMaskAtIndex(mask, hashCount, formatOnType);
       hashCount += 1;
     }
   }
diff --git a/src/utils.tsx b/src/utils.tsx
index 64b158fb..91467f40 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -294,7 +294,7 @@ export function getDefaultChangeMeta(value: string) {
   };
 }
 
-export function getMaskAtIndex(mask: string | string[] = ' ', index: number) {
+export function getMaskAtIndex(mask: string | string[] = ' ', index: number, formatOnType = false) {
   if (typeof mask === 'string') {
     return mask;
   }

From 6ff87d82a7758d1eeabbd3333f4c4df19f34a795 Mon Sep 17 00:00:00 2001
From: Bruno Cunha <bruno.silva.cunha@hotmail.com>
Date: Wed, 28 Sep 2022 16:30:12 -0300
Subject: [PATCH 3/3] feat: remove mask when is format on type

---
 src/utils.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/utils.tsx b/src/utils.tsx
index 91467f40..0e1a63e3 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -295,6 +295,9 @@ export function getDefaultChangeMeta(value: string) {
 }
 
 export function getMaskAtIndex(mask: string | string[] = ' ', index: number, formatOnType = false) {
+  if (formatOnType) {
+    return '';
+  }
   if (typeof mask === 'string') {
     return mask;
   }