Adding format on type feature prop

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>
  );
  }

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;
  }
  }

src/types.ts

@@ -110,6 +110,7 @@ export type PatternFormatProps<BaseType = InputAttributes> = NumberFormatProps<
  mask?: string | string[];
  allowEmptyFormatting?: boolean;
  patternChar?: string;
+ formatOnType?: boolean;
  },
  BaseType
 >;

src/utils.tsx

@@ -294,7 +294,10 @@ export function getDefaultChangeMeta(value: string) {
  };
 }
 
-export function getMaskAtIndex(mask: string | string[] = ' ', index: number) {
+export function getMaskAtIndex(mask: string | string[] = ' ', index: number, formatOnType = false) {
+ if (formatOnType) {
+ return '';
+ }
  if (typeof mask === 'string') {
  return mask;
  }