@transferwise/components 46.45.0 → 46.46.0

package/build/withDisplayFormat/WithDisplayFormat.js

@@ -0,0 +1,304 @@
+'use strict';
+
+var React = require('react');
+var formatWithPattern = require('../common/textFormat/formatWithPattern/formatWithPattern.js');
+var unformatWithPattern = require('../common/textFormat/unformatWithPattern/unformatWithPattern.js');
+var getCountOfSymbolsInSelection = require('../common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.js');
+var getCursorPositionAfterKeystroke = require('../common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.js');
+var getDistanceToSymbol = require('../common/textFormat/getDistanceToSymbol/getDistanceToSymbol.js');
+var historyNavigator = require('../common/historyNavigator/historyNavigator.js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+class WithDisplayFormat extends React__namespace.Component {
+  static defaultProps = {
+    autoComplete: 'off',
+    displayPattern: '',
+    value: ''
+  };
+  constructor(props) {
+    super(props);
+    const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);
+    this.state = {
+      value: formatWithPattern(unformattedValue, props.displayPattern),
+      historyNavigator: new historyNavigator(),
+      prevDisplayPattern: props.displayPattern,
+      triggerType: 'Initial',
+      triggerEvent: null,
+      selectionStart: 0,
+      selectionEnd: 0,
+      pastedLength: 0
+    };
+  }
+  static getDerivedStateFromProps({
+    displayPattern
+  }, {
+    prevDisplayPattern = displayPattern,
+    value,
+    historyNavigator
+  }) {
+    if (prevDisplayPattern !== displayPattern) {
+      const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);
+      historyNavigator.reset();
+      return {
+        prevDisplayPattern: displayPattern,
+        value: formatWithPattern(unFormattedValue, displayPattern),
+        triggerType: null,
+        triggerEvent: null,
+        pastedLength: 0
+      };
+    }
+    return null;
+  }
+  getUserAction = unformattedValue => {
+    const {
+      triggerEvent,
+      triggerType,
+      value
+    } = this.state;
+    const {
+      displayPattern
+    } = this.props;
+    if (triggerEvent) {
+      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
+      if (triggerType === 'Paste' || triggerType === 'Cut') {
+        return triggerType;
+      }
+      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {
+        return triggerEvent.shiftKey ? 'Redo' : 'Undo';
+      }
+      // Detect mouse event redo
+      if (triggerEvent.ctrlKey && charCode === 'd') {
+        return 'Delete';
+      }
+      // Android Fix.
+      if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern(value, displayPattern).length) {
+        return 'Backspace';
+      }
+      return triggerEvent.key;
+    }
+    // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
+    return 'Paste';
+  };
+  resetEvent = () => {
+    this.setState({
+      triggerType: 'Initial',
+      triggerEvent: null,
+      pastedLength: 0
+    });
+  };
+  detectUndoRedo = event => {
+    const charCode = String.fromCharCode(event.which).toLowerCase();
+    if ((event.ctrlKey || event.metaKey) && charCode === 'z') {
+      return event.shiftKey ? 'Redo' : 'Undo';
+    }
+    return null;
+  };
+  handleOnKeyDown = event => {
+    event.persist();
+    const {
+      selectionStart,
+      selectionEnd
+    } = event.currentTarget;
+    const {
+      historyNavigator
+    } = this.state;
+    const {
+      displayPattern
+    } = this.props;
+    // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.
+    let newFormattedValue = '';
+    if (this.detectUndoRedo(event) === 'Undo') {
+      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);
+      this.setState({
+        value: newFormattedValue,
+        triggerType: 'Undo'
+      });
+    } else if (this.detectUndoRedo(event) === 'Redo') {
+      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);
+      this.setState({
+        value: newFormattedValue,
+        triggerType: 'Redo'
+      });
+    } else {
+      this.setState({
+        triggerEvent: event,
+        triggerType: 'KeyDown',
+        selectionStart: selectionStart ?? 0,
+        selectionEnd: selectionEnd ?? 0
+      });
+    }
+  };
+  handleOnPaste = event => {
+    const {
+      displayPattern
+    } = this.props;
+    const pastedLength = unformatWithPattern(event.clipboardData.getData('Text'), displayPattern).length;
+    this.setState({
+      triggerType: 'Paste',
+      pastedLength
+    });
+  };
+  handleOnCut = () => {
+    this.setState({
+      triggerType: 'Cut'
+    });
+  };
+  isKeyAllowed = action => {
+    const {
+      displayPattern
+    } = this.props;
+    const symbolsInPattern = displayPattern.split('').filter(character => character !== '*');
+    return !symbolsInPattern.includes(action);
+  };
+  handleOnChange = event => {
+    const {
+      historyNavigator,
+      triggerType
+    } = this.state;
+    const {
+      displayPattern,
+      onChange
+    } = this.props;
+    const {
+      value
+    } = event.target;
+    let unformattedValue = unformatWithPattern(value, displayPattern);
+    const action = this.getUserAction(unformattedValue);
+    if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
+      return;
+    }
+    if (action === 'Backspace' || action === 'Delete') {
+      unformattedValue = this.handleDelete(unformattedValue, action);
+    }
+    const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);
+    historyNavigator.add(unformattedValue);
+    this.handleCursorPositioning(action);
+    this.setState({
+      value: newFormattedValue
+    }, () => {
+      this.resetEvent();
+      if (onChange) {
+        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
+        onChange(broadcastValue);
+      }
+    });
+  };
+  handleOnBlur = event => {
+    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
+  };
+  handleOnFocus = event => {
+    const {
+      displayPattern,
+      onFocus
+    } = this.props;
+    if (onFocus) {
+      this.handleOnChange(event);
+      onFocus(unformatWithPattern(event.target.value, displayPattern));
+    }
+  };
+  handleDelete = (unformattedValue, action) => {
+    const {
+      displayPattern
+    } = this.props;
+    const {
+      selectionStart,
+      selectionEnd
+    } = this.state;
+    const newStack = [...unformattedValue];
+    if (selectionStart === selectionEnd) {
+      let startPosition = selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);
+      let toDelete = 0;
+      let count = getDistanceToSymbol.getDistanceToNextSymbol(selectionStart, displayPattern);
+      if (action === 'Backspace') {
+        startPosition -= 1;
+        count = getDistanceToSymbol.getDistanceToPreviousSymbol(selectionStart, displayPattern);
+      }
+      if (startPosition >= 0 && count) {
+        toDelete = 1;
+      }
+      newStack.splice(startPosition, toDelete);
+    }
+    return newStack.join('');
+  };
+  handleCursorPositioning = action => {
+    const {
+      displayPattern
+    } = this.props;
+    const {
+      triggerEvent,
+      selectionStart,
+      selectionEnd,
+      pastedLength
+    } = this.state;
+    const target = triggerEvent?.currentTarget;
+    const cursorPosition = getCursorPositionAfterKeystroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
+    setTimeout(() => {
+      target?.setSelectionRange(cursorPosition, cursorPosition);
+      this.setState({
+        selectionStart: cursorPosition,
+        selectionEnd: cursorPosition
+      });
+    }, 0);
+  };
+  render() {
+    const {
+      inputMode,
+      className,
+      id,
+      name,
+      placeholder,
+      readOnly,
+      required,
+      minLength,
+      maxLength,
+      disabled,
+      autoComplete
+    } = this.props;
+    const {
+      value
+    } = this.state;
+    const renderProps = {
+      inputMode,
+      className,
+      id,
+      name,
+      placeholder,
+      readOnly,
+      required,
+      minLength,
+      maxLength,
+      disabled,
+      autoComplete,
+      value,
+      onFocus: this.handleOnFocus,
+      onBlur: this.handleOnBlur,
+      onPaste: this.handleOnPaste,
+      onKeyDown: this.handleOnKeyDown,
+      onChange: this.handleOnChange,
+      onCut: this.handleOnCut
+    };
+    return this.props.render(renderProps);
+  }
+}
+
+module.exports = WithDisplayFormat;
+//# sourceMappingURL=WithDisplayFormat.js.map

package/build/withDisplayFormat/WithDisplayFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WithDisplayFormat.js","sources":["../../src/withDisplayFormat/WithDisplayFormat.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { HistoryNavigator } from '../common';\nimport {\n  formatWithPattern,\n  getCountOfSymbolsInSelection,\n  getCursorPositionAfterKeystroke,\n  unformatWithPattern,\n  getDistanceToPreviousSymbol,\n  getDistanceToNextSymbol,\n} from '../common/textFormat';\nimport { InputProps } from '../inputs/Input';\nimport { TextAreaProps } from '../inputs/TextArea';\n\ntype HTMLTextElement = HTMLInputElement | HTMLTextAreaElement;\ntype TextElementProps = InputProps | TextAreaProps;\n\nexport type EventType =\n  | 'KeyDown'\n  | 'Paste'\n  | 'Cut'\n  | 'Undo'\n  | 'Redo'\n  | 'Backspace'\n  | 'Delete'\n  | 'Initial';\n\ninterface WithDisplayFormatState {\n  value: string;\n  historyNavigator: HistoryNavigator;\n  prevDisplayPattern: string;\n  triggerType: EventType;\n  triggerEvent: React.KeyboardEvent<HTMLTextElement> | null;\n  pastedLength: number;\n  selectionStart: number;\n  selectionEnd: number;\n}\n\nexport interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps>\n  extends Pick<\n    TextElementProps,\n    | 'className'\n    | 'disabled'\n    | 'id'\n    | 'maxLength'\n    | 'minLength'\n    | 'name'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'inputMode'\n  > {\n  value?: string;\n  displayPattern: string;\n  /**\n   * autocomplete hides our form help so we need to disable it when help text\n   * is present. Chrome ignores autocomplete=off, the only way to disable it is\n   * to provide an 'invalid' value, for which 'disabled' serves.\n   */\n  autoComplete?: TextElementProps['autoComplete'] | 'disabled';\n  onChange?: (value: string) => void;\n  onBlur?: (value: string) => void;\n  onFocus?: (value: string) => void;\n  render: (renderProps: T) => React.JSX.Element;\n}\n\nclass WithDisplayFormat<T extends TextElementProps> extends React.Component<\n  WithDisplayFormatProps<T>,\n  WithDisplayFormatState\n> {\n  declare props: WithDisplayFormatProps<T> &\n    Required<Pick<WithDisplayFormatProps<T>, keyof typeof WithDisplayFormat.defaultProps>>;\n  static defaultProps = {\n    autoComplete: 'off',\n    displayPattern: '',\n    value: '',\n  };\n\n  constructor(props: WithDisplayFormatProps) {\n    super(props);\n    const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);\n    this.state = {\n      value: formatWithPattern(unformattedValue, props.displayPattern),\n      historyNavigator: new HistoryNavigator(),\n      prevDisplayPattern: props.displayPattern,\n      triggerType: 'Initial',\n      triggerEvent: null,\n      selectionStart: 0,\n      selectionEnd: 0,\n      pastedLength: 0,\n    };\n  }\n\n  static getDerivedStateFromProps(\n    { displayPattern }: WithDisplayFormatProps,\n    { prevDisplayPattern = displayPattern, value, historyNavigator }: WithDisplayFormatState,\n  ) {\n    if (prevDisplayPattern !== displayPattern) {\n      const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);\n      historyNavigator.reset();\n\n      return {\n        prevDisplayPattern: displayPattern,\n        value: formatWithPattern(unFormattedValue, displayPattern),\n        triggerType: null,\n        triggerEvent: null,\n        pastedLength: 0,\n      };\n    }\n    return null;\n  }\n\n  getUserAction = (unformattedValue: string): EventType | string => {\n    const { triggerEvent, triggerType, value } = this.state;\n    const { displayPattern } = this.props;\n\n    if (triggerEvent) {\n      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();\n\n      if (triggerType === 'Paste' || triggerType === 'Cut') {\n        return triggerType;\n      }\n\n      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {\n        return triggerEvent.shiftKey ? 'Redo' : 'Undo';\n      }\n      // Detect mouse event redo\n      if (triggerEvent.ctrlKey && charCode === 'd') {\n        return 'Delete';\n      }\n\n      // Android Fix.\n      if (\n        typeof triggerEvent.key === 'undefined' &&\n        unformattedValue.length <= unformatWithPattern(value, displayPattern).length\n      ) {\n        return 'Backspace';\n      }\n      return triggerEvent.key;\n    }\n    // triggerEvent can be null only in case of \"autofilling\" (via password manager extension or browser build-in one) events\n    return 'Paste';\n  };\n\n  resetEvent = () => {\n    this.setState({\n      triggerType: 'Initial',\n      triggerEvent: null,\n      pastedLength: 0,\n    });\n  };\n\n  detectUndoRedo = (event: React.KeyboardEvent<HTMLTextElement>) => {\n    const charCode = String.fromCharCode(event.which).toLowerCase();\n    if ((event.ctrlKey || event.metaKey) && charCode === 'z') {\n      return event.shiftKey ? 'Redo' : 'Undo';\n    }\n    return null;\n  };\n\n  handleOnKeyDown: React.KeyboardEventHandler<HTMLTextElement> = (event) => {\n    event.persist();\n    const { selectionStart, selectionEnd } = event.currentTarget;\n    const { historyNavigator } = this.state;\n    const { displayPattern } = this.props;\n\n    // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.\n    let newFormattedValue = '';\n\n    if (this.detectUndoRedo(event) === 'Undo') {\n      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Undo' });\n    } else if (this.detectUndoRedo(event) === 'Redo') {\n      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Redo' });\n    } else {\n      this.setState({\n        triggerEvent: event,\n        triggerType: 'KeyDown',\n        selectionStart: selectionStart ?? 0,\n        selectionEnd: selectionEnd ?? 0,\n      });\n    }\n  };\n\n  handleOnPaste: React.ClipboardEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern } = this.props;\n    const pastedLength = unformatWithPattern(\n      event.clipboardData.getData('Text'),\n      displayPattern,\n    ).length;\n\n    this.setState({ triggerType: 'Paste', pastedLength });\n  };\n\n  handleOnCut: React.ClipboardEventHandler<HTMLTextElement> = () => {\n    this.setState({ triggerType: 'Cut' });\n  };\n\n  isKeyAllowed = (action: EventType | string) => {\n    const { displayPattern } = this.props;\n    const symbolsInPattern = displayPattern.split('').filter((character) => character !== '*');\n\n    return !symbolsInPattern.includes(action);\n  };\n\n  handleOnChange: React.ChangeEventHandler<HTMLTextElement> = (event) => {\n    const { historyNavigator, triggerType } = this.state;\n    const { displayPattern, onChange } = this.props;\n    const { value } = event.target;\n    let unformattedValue = unformatWithPattern(value, displayPattern);\n    const action = this.getUserAction(unformattedValue);\n    if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {\n      return;\n    }\n\n    if (action === 'Backspace' || action === 'Delete') {\n      unformattedValue = this.handleDelete(unformattedValue, action);\n    }\n\n    const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);\n    historyNavigator.add(unformattedValue);\n\n    this.handleCursorPositioning(action);\n\n    this.setState({ value: newFormattedValue }, () => {\n      this.resetEvent();\n      if (onChange) {\n        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);\n        onChange(broadcastValue);\n      }\n    });\n  };\n\n  handleOnBlur: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));\n  };\n\n  handleOnFocus: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern, onFocus } = this.props;\n    if (onFocus) {\n      this.handleOnChange(event);\n      onFocus(unformatWithPattern(event.target.value, displayPattern));\n    }\n  };\n\n  handleDelete = (unformattedValue: string, action: EventType) => {\n    const { displayPattern } = this.props;\n    const { selectionStart, selectionEnd } = this.state;\n    const newStack = [...unformattedValue];\n    if (selectionStart === selectionEnd) {\n      let startPosition =\n        selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);\n      let toDelete = 0;\n\n      let count = getDistanceToNextSymbol(selectionStart, displayPattern);\n      if (action === 'Backspace') {\n        startPosition -= 1;\n        count = getDistanceToPreviousSymbol(selectionStart, displayPattern);\n      }\n\n      if (startPosition >= 0 && count) {\n        toDelete = 1;\n      }\n\n      newStack.splice(startPosition, toDelete);\n    }\n\n    return newStack.join('');\n  };\n\n  handleCursorPositioning = (action: string) => {\n    const { displayPattern } = this.props;\n    const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;\n    const target = triggerEvent?.currentTarget;\n\n    const cursorPosition = getCursorPositionAfterKeystroke(\n      action,\n      selectionStart,\n      selectionEnd,\n      displayPattern,\n      pastedLength,\n    );\n\n    setTimeout(() => {\n      target?.setSelectionRange(cursorPosition, cursorPosition);\n      this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });\n    }, 0);\n  };\n\n  render() {\n    const {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n    } = this.props;\n    const { value } = this.state;\n    const renderProps: TextElementProps = {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n      value,\n      onFocus: this.handleOnFocus,\n      onBlur: this.handleOnBlur,\n      onPaste: this.handleOnPaste,\n      onKeyDown: this.handleOnKeyDown,\n      onChange: this.handleOnChange,\n      onCut: this.handleOnCut,\n    };\n    return this.props.render(renderProps as T);\n  }\n}\n\nexport default WithDisplayFormat;\n"],"names":["WithDisplayFormat","React","Component","defaultProps","autoComplete","displayPattern","value","constructor","props","unformattedValue","unformatWithPattern","state","formatWithPattern","historyNavigator","HistoryNavigator","prevDisplayPattern","triggerType","triggerEvent","selectionStart","selectionEnd","pastedLength","getDerivedStateFromProps","unFormattedValue","reset","getUserAction","charCode","String","fromCharCode","which","toLowerCase","ctrlKey","metaKey","shiftKey","key","length","resetEvent","setState","detectUndoRedo","event","handleOnKeyDown","persist","currentTarget","newFormattedValue","undo","toString","redo","handleOnPaste","clipboardData","getData","handleOnCut","isKeyAllowed","action","symbolsInPattern","split","filter","character","includes","handleOnChange","onChange","target","handleDelete","add","handleCursorPositioning","broadcastValue","handleOnBlur","onBlur","handleOnFocus","onFocus","newStack","startPosition","getCountOfSymbolsInSelection","toDelete","count","getDistanceToNextSymbol","getDistanceToPreviousSymbol","splice","join","cursorPosition","getCursorPositionAfterKeystroke","setTimeout","setSelectionRange","render","inputMode","className","id","name","placeholder","readOnly","required","minLength","maxLength","disabled","renderProps","onPaste","onKeyDown","onCut"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAMA,iBAA8C,SAAQC,gBAAK,CAACC,SAGjE,CAAA;AAGC,EAAA,OAAOC,YAAY,GAAG;AACpBC,IAAAA,YAAY,EAAE,KAAK;AACnBC,IAAAA,cAAc,EAAE,EAAE;AAClBC,IAAAA,KAAK,EAAE,EAAA;GACR,CAAA;EAEDC,WAAAA,CAAYC,KAA6B,EAAA;IACvC,KAAK,CAACA,KAAK,CAAC,CAAA;AACZ,IAAA,MAAMC,gBAAgB,GAAGC,mBAAmB,CAACF,KAAK,CAACF,KAAK,IAAI,EAAE,EAAEE,KAAK,CAACH,cAAc,CAAC,CAAA;IACrF,IAAI,CAACM,KAAK,GAAG;MACXL,KAAK,EAAEM,iBAAiB,CAACH,gBAAgB,EAAED,KAAK,CAACH,cAAc,CAAC;AAChEQ,MAAAA,gBAAgB,EAAE,IAAIC,gBAAgB,EAAE;MACxCC,kBAAkB,EAAEP,KAAK,CAACH,cAAc;AACxCW,MAAAA,WAAW,EAAE,SAAS;AACtBC,MAAAA,YAAY,EAAE,IAAI;AAClBC,MAAAA,cAAc,EAAE,CAAC;AACjBC,MAAAA,YAAY,EAAE,CAAC;AACfC,MAAAA,YAAY,EAAE,CAAA;KACf,CAAA;AACH,GAAA;AAEA,EAAA,OAAOC,wBAAwBA,CAC7B;AAAEhB,IAAAA,cAAAA;AAAwC,GAAA,EAC1C;AAAEU,IAAAA,kBAAkB,GAAGV,cAAc;IAAEC,KAAK;AAAEO,IAAAA,gBAAAA;AAA0C,GAAA,EAAA;IAExF,IAAIE,kBAAkB,KAAKV,cAAc,EAAE;AACzC,MAAA,MAAMiB,gBAAgB,GAAGZ,mBAAmB,CAACJ,KAAK,EAAES,kBAAkB,CAAC,CAAA;MACvEF,gBAAgB,CAACU,KAAK,EAAE,CAAA;MAExB,OAAO;AACLR,QAAAA,kBAAkB,EAAEV,cAAc;AAClCC,QAAAA,KAAK,EAAEM,iBAAiB,CAACU,gBAAgB,EAAEjB,cAAc,CAAC;AAC1DW,QAAAA,WAAW,EAAE,IAAI;AACjBC,QAAAA,YAAY,EAAE,IAAI;AAClBG,QAAAA,YAAY,EAAE,CAAA;OACf,CAAA;AACH,KAAA;AACA,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;EAEAI,aAAa,GAAIf,gBAAwB,IAAwB;IAC/D,MAAM;MAAEQ,YAAY;MAAED,WAAW;AAAEV,MAAAA,KAAAA;KAAO,GAAG,IAAI,CAACK,KAAK,CAAA;IACvD,MAAM;AAAEN,MAAAA,cAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK,CAAA;AAErC,IAAA,IAAIS,YAAY,EAAE;AAChB,MAAA,MAAMQ,QAAQ,GAAGC,MAAM,CAACC,YAAY,CAACV,YAAY,CAACW,KAAK,CAAC,CAACC,WAAW,EAAE,CAAA;AAEtE,MAAA,IAAIb,WAAW,KAAK,OAAO,IAAIA,WAAW,KAAK,KAAK,EAAE;AACpD,QAAA,OAAOA,WAAW,CAAA;AACpB,OAAA;AAEA,MAAA,IAAI,CAACC,YAAY,CAACa,OAAO,IAAIb,YAAY,CAACc,OAAO,KAAKN,QAAQ,KAAK,GAAG,EAAE;AACtE,QAAA,OAAOR,YAAY,CAACe,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAChD,OAAA;AACA;AACA,MAAA,IAAIf,YAAY,CAACa,OAAO,IAAIL,QAAQ,KAAK,GAAG,EAAE;AAC5C,QAAA,OAAO,QAAQ,CAAA;AACjB,OAAA;AAEA;AACA,MAAA,IACE,OAAOR,YAAY,CAACgB,GAAG,KAAK,WAAW,IACvCxB,gBAAgB,CAACyB,MAAM,IAAIxB,mBAAmB,CAACJ,KAAK,EAAED,cAAc,CAAC,CAAC6B,MAAM,EAC5E;AACA,QAAA,OAAO,WAAW,CAAA;AACpB,OAAA;MACA,OAAOjB,YAAY,CAACgB,GAAG,CAAA;AACzB,KAAA;AACA;AACA,IAAA,OAAO,OAAO,CAAA;GACf,CAAA;EAEDE,UAAU,GAAGA,MAAK;IAChB,IAAI,CAACC,QAAQ,CAAC;AACZpB,MAAAA,WAAW,EAAE,SAAS;AACtBC,MAAAA,YAAY,EAAE,IAAI;AAClBG,MAAAA,YAAY,EAAE,CAAA;AACf,KAAA,CAAC,CAAA;GACH,CAAA;EAEDiB,cAAc,GAAIC,KAA2C,IAAI;AAC/D,IAAA,MAAMb,QAAQ,GAAGC,MAAM,CAACC,YAAY,CAACW,KAAK,CAACV,KAAK,CAAC,CAACC,WAAW,EAAE,CAAA;AAC/D,IAAA,IAAI,CAACS,KAAK,CAACR,OAAO,IAAIQ,KAAK,CAACP,OAAO,KAAKN,QAAQ,KAAK,GAAG,EAAE;AACxD,MAAA,OAAOa,KAAK,CAACN,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AACzC,KAAA;AACA,IAAA,OAAO,IAAI,CAAA;GACZ,CAAA;EAEDO,eAAe,GAAiDD,KAAK,IAAI;IACvEA,KAAK,CAACE,OAAO,EAAE,CAAA;IACf,MAAM;MAAEtB,cAAc;AAAEC,MAAAA,YAAAA;KAAc,GAAGmB,KAAK,CAACG,aAAa,CAAA;IAC5D,MAAM;AAAE5B,MAAAA,gBAAAA;KAAkB,GAAG,IAAI,CAACF,KAAK,CAAA;IACvC,MAAM;AAAEN,MAAAA,cAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK,CAAA;AAErC;IACA,IAAIkC,iBAAiB,GAAG,EAAE,CAAA;IAE1B,IAAI,IAAI,CAACL,cAAc,CAACC,KAAK,CAAC,KAAK,MAAM,EAAE;AACzCI,MAAAA,iBAAiB,GAAG9B,iBAAiB,CAACC,gBAAgB,CAAC8B,IAAI,EAAE,CAACC,QAAQ,EAAE,EAAEvC,cAAc,CAAC,CAAA;MACzF,IAAI,CAAC+B,QAAQ,CAAC;AAAE9B,QAAAA,KAAK,EAAEoC,iBAAiB;AAAE1B,QAAAA,WAAW,EAAE,MAAA;AAAM,OAAE,CAAC,CAAA;KACjE,MAAM,IAAI,IAAI,CAACqB,cAAc,CAACC,KAAK,CAAC,KAAK,MAAM,EAAE;AAChDI,MAAAA,iBAAiB,GAAG9B,iBAAiB,CAACC,gBAAgB,CAACgC,IAAI,EAAE,CAACD,QAAQ,EAAE,EAAEvC,cAAc,CAAC,CAAA;MACzF,IAAI,CAAC+B,QAAQ,CAAC;AAAE9B,QAAAA,KAAK,EAAEoC,iBAAiB;AAAE1B,QAAAA,WAAW,EAAE,MAAA;AAAM,OAAE,CAAC,CAAA;AAClE,KAAC,MAAM;MACL,IAAI,CAACoB,QAAQ,CAAC;AACZnB,QAAAA,YAAY,EAAEqB,KAAK;AACnBtB,QAAAA,WAAW,EAAE,SAAS;QACtBE,cAAc,EAAEA,cAAc,IAAI,CAAC;QACnCC,YAAY,EAAEA,YAAY,IAAI,CAAA;AAC/B,OAAA,CAAC,CAAA;AACJ,KAAA;GACD,CAAA;EAED2B,aAAa,GAAkDR,KAAK,IAAI;IACtE,MAAM;AAAEjC,MAAAA,cAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK,CAAA;AACrC,IAAA,MAAMY,YAAY,GAAGV,mBAAmB,CACtC4B,KAAK,CAACS,aAAa,CAACC,OAAO,CAAC,MAAM,CAAC,EACnC3C,cAAc,CACf,CAAC6B,MAAM,CAAA;IAER,IAAI,CAACE,QAAQ,CAAC;AAAEpB,MAAAA,WAAW,EAAE,OAAO;AAAEI,MAAAA,YAAAA;AAAc,KAAA,CAAC,CAAA;GACtD,CAAA;EAED6B,WAAW,GAAiDA,MAAK;IAC/D,IAAI,CAACb,QAAQ,CAAC;AAAEpB,MAAAA,WAAW,EAAE,KAAA;AAAO,KAAA,CAAC,CAAA;GACtC,CAAA;EAEDkC,YAAY,GAAIC,MAA0B,IAAI;IAC5C,MAAM;AAAE9C,MAAAA,cAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK,CAAA;AACrC,IAAA,MAAM4C,gBAAgB,GAAG/C,cAAc,CAACgD,KAAK,CAAC,EAAE,CAAC,CAACC,MAAM,CAAEC,SAAS,IAAKA,SAAS,KAAK,GAAG,CAAC,CAAA;AAE1F,IAAA,OAAO,CAACH,gBAAgB,CAACI,QAAQ,CAACL,MAAM,CAAC,CAAA;GAC1C,CAAA;EAEDM,cAAc,GAA+CnB,KAAK,IAAI;IACpE,MAAM;MAAEzB,gBAAgB;AAAEG,MAAAA,WAAAA;KAAa,GAAG,IAAI,CAACL,KAAK,CAAA;IACpD,MAAM;MAAEN,cAAc;AAAEqD,MAAAA,QAAAA;KAAU,GAAG,IAAI,CAAClD,KAAK,CAAA;IAC/C,MAAM;AAAEF,MAAAA,KAAAA;KAAO,GAAGgC,KAAK,CAACqB,MAAM,CAAA;AAC9B,IAAA,IAAIlD,gBAAgB,GAAGC,mBAAmB,CAACJ,KAAK,EAAED,cAAc,CAAC,CAAA;AACjE,IAAA,MAAM8C,MAAM,GAAG,IAAI,CAAC3B,aAAa,CAACf,gBAAgB,CAAC,CAAA;AACnD,IAAA,IAAI,CAAC,IAAI,CAACyC,YAAY,CAACC,MAAM,CAAC,IAAInC,WAAW,KAAK,MAAM,IAAIA,WAAW,KAAK,MAAM,EAAE;AAClF,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,IAAImC,MAAM,KAAK,WAAW,IAAIA,MAAM,KAAK,QAAQ,EAAE;MACjD1C,gBAAgB,GAAG,IAAI,CAACmD,YAAY,CAACnD,gBAAgB,EAAE0C,MAAM,CAAC,CAAA;AAChE,KAAA;AAEA,IAAA,MAAMT,iBAAiB,GAAG9B,iBAAiB,CAACH,gBAAgB,EAAEJ,cAAc,CAAC,CAAA;AAC7EQ,IAAAA,gBAAgB,CAACgD,GAAG,CAACpD,gBAAgB,CAAC,CAAA;AAEtC,IAAA,IAAI,CAACqD,uBAAuB,CAACX,MAAM,CAAC,CAAA;IAEpC,IAAI,CAACf,QAAQ,CAAC;AAAE9B,MAAAA,KAAK,EAAEoC,iBAAAA;AAAiB,KAAE,EAAE,MAAK;MAC/C,IAAI,CAACP,UAAU,EAAE,CAAA;AACjB,MAAA,IAAIuB,QAAQ,EAAE;AACZ,QAAA,MAAMK,cAAc,GAAGrD,mBAAmB,CAACgC,iBAAiB,EAAErC,cAAc,CAAC,CAAA;QAC7EqD,QAAQ,CAACK,cAAc,CAAC,CAAA;AAC1B,OAAA;AACF,KAAC,CAAC,CAAA;GACH,CAAA;EAEDC,YAAY,GAA8C1B,KAAK,IAAI;AACjE,IAAA,IAAI,CAAC9B,KAAK,CAACyD,MAAM,GAAGvD,mBAAmB,CAAC4B,KAAK,CAACqB,MAAM,CAACrD,KAAK,EAAE,IAAI,CAACE,KAAK,CAACH,cAAc,CAAC,CAAC,CAAA;GACxF,CAAA;EAED6D,aAAa,GAA8C5B,KAAK,IAAI;IAClE,MAAM;MAAEjC,cAAc;AAAE8D,MAAAA,OAAAA;KAAS,GAAG,IAAI,CAAC3D,KAAK,CAAA;AAC9C,IAAA,IAAI2D,OAAO,EAAE;AACX,MAAA,IAAI,CAACV,cAAc,CAACnB,KAAK,CAAC,CAAA;MAC1B6B,OAAO,CAACzD,mBAAmB,CAAC4B,KAAK,CAACqB,MAAM,CAACrD,KAAK,EAAED,cAAc,CAAC,CAAC,CAAA;AAClE,KAAA;GACD,CAAA;AAEDuD,EAAAA,YAAY,GAAGA,CAACnD,gBAAwB,EAAE0C,MAAiB,KAAI;IAC7D,MAAM;AAAE9C,MAAAA,cAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK,CAAA;IACrC,MAAM;MAAEU,cAAc;AAAEC,MAAAA,YAAAA;KAAc,GAAG,IAAI,CAACR,KAAK,CAAA;AACnD,IAAA,MAAMyD,QAAQ,GAAG,CAAC,GAAG3D,gBAAgB,CAAC,CAAA;IACtC,IAAIS,cAAc,KAAKC,YAAY,EAAE;MACnC,IAAIkD,aAAa,GACfnD,cAAc,GAAGoD,4BAA4B,CAAC,CAAC,EAAEpD,cAAc,EAAEb,cAAc,CAAC,CAAA;MAClF,IAAIkE,QAAQ,GAAG,CAAC,CAAA;AAEhB,MAAA,IAAIC,KAAK,GAAGC,2CAAuB,CAACvD,cAAc,EAAEb,cAAc,CAAC,CAAA;MACnE,IAAI8C,MAAM,KAAK,WAAW,EAAE;AAC1BkB,QAAAA,aAAa,IAAI,CAAC,CAAA;AAClBG,QAAAA,KAAK,GAAGE,+CAA2B,CAACxD,cAAc,EAAEb,cAAc,CAAC,CAAA;AACrE,OAAA;AAEA,MAAA,IAAIgE,aAAa,IAAI,CAAC,IAAIG,KAAK,EAAE;AAC/BD,QAAAA,QAAQ,GAAG,CAAC,CAAA;AACd,OAAA;AAEAH,MAAAA,QAAQ,CAACO,MAAM,CAACN,aAAa,EAAEE,QAAQ,CAAC,CAAA;AAC1C,KAAA;AAEA,IAAA,OAAOH,QAAQ,CAACQ,IAAI,CAAC,EAAE,CAAC,CAAA;GACzB,CAAA;EAEDd,uBAAuB,GAAIX,MAAc,IAAI;IAC3C,MAAM;AAAE9C,MAAAA,cAAAA;KAAgB,GAAG,IAAI,CAACG,KAAK,CAAA;IACrC,MAAM;MAAES,YAAY;MAAEC,cAAc;MAAEC,YAAY;AAAEC,MAAAA,YAAAA;KAAc,GAAG,IAAI,CAACT,KAAK,CAAA;AAC/E,IAAA,MAAMgD,MAAM,GAAG1C,YAAY,EAAEwB,aAAa,CAAA;AAE1C,IAAA,MAAMoC,cAAc,GAAGC,+BAA+B,CACpD3B,MAAM,EACNjC,cAAc,EACdC,YAAY,EACZd,cAAc,EACde,YAAY,CACb,CAAA;AAED2D,IAAAA,UAAU,CAAC,MAAK;AACdpB,MAAAA,MAAM,EAAEqB,iBAAiB,CAACH,cAAc,EAAEA,cAAc,CAAC,CAAA;MACzD,IAAI,CAACzC,QAAQ,CAAC;AAAElB,QAAAA,cAAc,EAAE2D,cAAc;AAAE1D,QAAAA,YAAY,EAAE0D,cAAAA;AAAc,OAAE,CAAC,CAAA;KAChF,EAAE,CAAC,CAAC,CAAA;GACN,CAAA;AAEDI,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,SAAS;MACTC,SAAS;MACTC,EAAE;MACFC,IAAI;MACJC,WAAW;MACXC,QAAQ;MACRC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,QAAQ;AACRvF,MAAAA,YAAAA;KACD,GAAG,IAAI,CAACI,KAAK,CAAA;IACd,MAAM;AAAEF,MAAAA,KAAAA;KAAO,GAAG,IAAI,CAACK,KAAK,CAAA;AAC5B,IAAA,MAAMiF,WAAW,GAAqB;MACpCV,SAAS;MACTC,SAAS;MACTC,EAAE;MACFC,IAAI;MACJC,WAAW;MACXC,QAAQ;MACRC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,QAAQ;MACRvF,YAAY;MACZE,KAAK;MACL6D,OAAO,EAAE,IAAI,CAACD,aAAa;MAC3BD,MAAM,EAAE,IAAI,CAACD,YAAY;MACzB6B,OAAO,EAAE,IAAI,CAAC/C,aAAa;MAC3BgD,SAAS,EAAE,IAAI,CAACvD,eAAe;MAC/BmB,QAAQ,EAAE,IAAI,CAACD,cAAc;MAC7BsC,KAAK,EAAE,IAAI,CAAC9C,WAAAA;KACb,CAAA;AACD,IAAA,OAAO,IAAI,CAACzC,KAAK,CAACyE,MAAM,CAACW,WAAgB,CAAC,CAAA;AAC5C,GAAA;;;;;"}

package/build/withDisplayFormat/WithDisplayFormat.mjs

@@ -0,0 +1,282 @@
+import * as React from 'react';
+import formatWithPattern from '../common/textFormat/formatWithPattern/formatWithPattern.mjs';
+import unformatWithPattern from '../common/textFormat/unformatWithPattern/unformatWithPattern.mjs';
+import getCountOfSymbolsInSelection from '../common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.mjs';
+import getCursorPositionAfterActionStroke from '../common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.mjs';
+import { getDistanceToNextSymbol, getDistanceToPreviousSymbol } from '../common/textFormat/getDistanceToSymbol/getDistanceToSymbol.mjs';
+import HistoryNavigator from '../common/historyNavigator/historyNavigator.mjs';
+
+class WithDisplayFormat extends React.Component {
+  static defaultProps = {
+    autoComplete: 'off',
+    displayPattern: '',
+    value: ''
+  };
+  constructor(props) {
+    super(props);
+    const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);
+    this.state = {
+      value: formatWithPattern(unformattedValue, props.displayPattern),
+      historyNavigator: new HistoryNavigator(),
+      prevDisplayPattern: props.displayPattern,
+      triggerType: 'Initial',
+      triggerEvent: null,
+      selectionStart: 0,
+      selectionEnd: 0,
+      pastedLength: 0
+    };
+  }
+  static getDerivedStateFromProps({
+    displayPattern
+  }, {
+    prevDisplayPattern = displayPattern,
+    value,
+    historyNavigator
+  }) {
+    if (prevDisplayPattern !== displayPattern) {
+      const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);
+      historyNavigator.reset();
+      return {
+        prevDisplayPattern: displayPattern,
+        value: formatWithPattern(unFormattedValue, displayPattern),
+        triggerType: null,
+        triggerEvent: null,
+        pastedLength: 0
+      };
+    }
+    return null;
+  }
+  getUserAction = unformattedValue => {
+    const {
+      triggerEvent,
+      triggerType,
+      value
+    } = this.state;
+    const {
+      displayPattern
+    } = this.props;
+    if (triggerEvent) {
+      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
+      if (triggerType === 'Paste' || triggerType === 'Cut') {
+        return triggerType;
+      }
+      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {
+        return triggerEvent.shiftKey ? 'Redo' : 'Undo';
+      }
+      // Detect mouse event redo
+      if (triggerEvent.ctrlKey && charCode === 'd') {
+        return 'Delete';
+      }
+      // Android Fix.
+      if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern(value, displayPattern).length) {
+        return 'Backspace';
+      }
+      return triggerEvent.key;
+    }
+    // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
+    return 'Paste';
+  };
+  resetEvent = () => {
+    this.setState({
+      triggerType: 'Initial',
+      triggerEvent: null,
+      pastedLength: 0
+    });
+  };
+  detectUndoRedo = event => {
+    const charCode = String.fromCharCode(event.which).toLowerCase();
+    if ((event.ctrlKey || event.metaKey) && charCode === 'z') {
+      return event.shiftKey ? 'Redo' : 'Undo';
+    }
+    return null;
+  };
+  handleOnKeyDown = event => {
+    event.persist();
+    const {
+      selectionStart,
+      selectionEnd
+    } = event.currentTarget;
+    const {
+      historyNavigator
+    } = this.state;
+    const {
+      displayPattern
+    } = this.props;
+    // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.
+    let newFormattedValue = '';
+    if (this.detectUndoRedo(event) === 'Undo') {
+      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);
+      this.setState({
+        value: newFormattedValue,
+        triggerType: 'Undo'
+      });
+    } else if (this.detectUndoRedo(event) === 'Redo') {
+      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);
+      this.setState({
+        value: newFormattedValue,
+        triggerType: 'Redo'
+      });
+    } else {
+      this.setState({
+        triggerEvent: event,
+        triggerType: 'KeyDown',
+        selectionStart: selectionStart ?? 0,
+        selectionEnd: selectionEnd ?? 0
+      });
+    }
+  };
+  handleOnPaste = event => {
+    const {
+      displayPattern
+    } = this.props;
+    const pastedLength = unformatWithPattern(event.clipboardData.getData('Text'), displayPattern).length;
+    this.setState({
+      triggerType: 'Paste',
+      pastedLength
+    });
+  };
+  handleOnCut = () => {
+    this.setState({
+      triggerType: 'Cut'
+    });
+  };
+  isKeyAllowed = action => {
+    const {
+      displayPattern
+    } = this.props;
+    const symbolsInPattern = displayPattern.split('').filter(character => character !== '*');
+    return !symbolsInPattern.includes(action);
+  };
+  handleOnChange = event => {
+    const {
+      historyNavigator,
+      triggerType
+    } = this.state;
+    const {
+      displayPattern,
+      onChange
+    } = this.props;
+    const {
+      value
+    } = event.target;
+    let unformattedValue = unformatWithPattern(value, displayPattern);
+    const action = this.getUserAction(unformattedValue);
+    if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
+      return;
+    }
+    if (action === 'Backspace' || action === 'Delete') {
+      unformattedValue = this.handleDelete(unformattedValue, action);
+    }
+    const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);
+    historyNavigator.add(unformattedValue);
+    this.handleCursorPositioning(action);
+    this.setState({
+      value: newFormattedValue
+    }, () => {
+      this.resetEvent();
+      if (onChange) {
+        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
+        onChange(broadcastValue);
+      }
+    });
+  };
+  handleOnBlur = event => {
+    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
+  };
+  handleOnFocus = event => {
+    const {
+      displayPattern,
+      onFocus
+    } = this.props;
+    if (onFocus) {
+      this.handleOnChange(event);
+      onFocus(unformatWithPattern(event.target.value, displayPattern));
+    }
+  };
+  handleDelete = (unformattedValue, action) => {
+    const {
+      displayPattern
+    } = this.props;
+    const {
+      selectionStart,
+      selectionEnd
+    } = this.state;
+    const newStack = [...unformattedValue];
+    if (selectionStart === selectionEnd) {
+      let startPosition = selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);
+      let toDelete = 0;
+      let count = getDistanceToNextSymbol(selectionStart, displayPattern);
+      if (action === 'Backspace') {
+        startPosition -= 1;
+        count = getDistanceToPreviousSymbol(selectionStart, displayPattern);
+      }
+      if (startPosition >= 0 && count) {
+        toDelete = 1;
+      }
+      newStack.splice(startPosition, toDelete);
+    }
+    return newStack.join('');
+  };
+  handleCursorPositioning = action => {
+    const {
+      displayPattern
+    } = this.props;
+    const {
+      triggerEvent,
+      selectionStart,
+      selectionEnd,
+      pastedLength
+    } = this.state;
+    const target = triggerEvent?.currentTarget;
+    const cursorPosition = getCursorPositionAfterActionStroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
+    setTimeout(() => {
+      target?.setSelectionRange(cursorPosition, cursorPosition);
+      this.setState({
+        selectionStart: cursorPosition,
+        selectionEnd: cursorPosition
+      });
+    }, 0);
+  };
+  render() {
+    const {
+      inputMode,
+      className,
+      id,
+      name,
+      placeholder,
+      readOnly,
+      required,
+      minLength,
+      maxLength,
+      disabled,
+      autoComplete
+    } = this.props;
+    const {
+      value
+    } = this.state;
+    const renderProps = {
+      inputMode,
+      className,
+      id,
+      name,
+      placeholder,
+      readOnly,
+      required,
+      minLength,
+      maxLength,
+      disabled,
+      autoComplete,
+      value,
+      onFocus: this.handleOnFocus,
+      onBlur: this.handleOnBlur,
+      onPaste: this.handleOnPaste,
+      onKeyDown: this.handleOnKeyDown,
+      onChange: this.handleOnChange,
+      onCut: this.handleOnCut
+    };
+    return this.props.render(renderProps);
+  }
+}
+
+export { WithDisplayFormat as default };
+//# sourceMappingURL=WithDisplayFormat.mjs.map

package/build/withDisplayFormat/WithDisplayFormat.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WithDisplayFormat.mjs","sources":["../../src/withDisplayFormat/WithDisplayFormat.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { HistoryNavigator } from '../common';\nimport {\n  formatWithPattern,\n  getCountOfSymbolsInSelection,\n  getCursorPositionAfterKeystroke,\n  unformatWithPattern,\n  getDistanceToPreviousSymbol,\n  getDistanceToNextSymbol,\n} from '../common/textFormat';\nimport { InputProps } from '../inputs/Input';\nimport { TextAreaProps } from '../inputs/TextArea';\n\ntype HTMLTextElement = HTMLInputElement | HTMLTextAreaElement;\ntype TextElementProps = InputProps | TextAreaProps;\n\nexport type EventType =\n  | 'KeyDown'\n  | 'Paste'\n  | 'Cut'\n  | 'Undo'\n  | 'Redo'\n  | 'Backspace'\n  | 'Delete'\n  | 'Initial';\n\ninterface WithDisplayFormatState {\n  value: string;\n  historyNavigator: HistoryNavigator;\n  prevDisplayPattern: string;\n  triggerType: EventType;\n  triggerEvent: React.KeyboardEvent<HTMLTextElement> | null;\n  pastedLength: number;\n  selectionStart: number;\n  selectionEnd: number;\n}\n\nexport interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps>\n  extends Pick<\n    TextElementProps,\n    | 'className'\n    | 'disabled'\n    | 'id'\n    | 'maxLength'\n    | 'minLength'\n    | 'name'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'inputMode'\n  > {\n  value?: string;\n  displayPattern: string;\n  /**\n   * autocomplete hides our form help so we need to disable it when help text\n   * is present. Chrome ignores autocomplete=off, the only way to disable it is\n   * to provide an 'invalid' value, for which 'disabled' serves.\n   */\n  autoComplete?: TextElementProps['autoComplete'] | 'disabled';\n  onChange?: (value: string) => void;\n  onBlur?: (value: string) => void;\n  onFocus?: (value: string) => void;\n  render: (renderProps: T) => React.JSX.Element;\n}\n\nclass WithDisplayFormat<T extends TextElementProps> extends React.Component<\n  WithDisplayFormatProps<T>,\n  WithDisplayFormatState\n> {\n  declare props: WithDisplayFormatProps<T> &\n    Required<Pick<WithDisplayFormatProps<T>, keyof typeof WithDisplayFormat.defaultProps>>;\n  static defaultProps = {\n    autoComplete: 'off',\n    displayPattern: '',\n    value: '',\n  };\n\n  constructor(props: WithDisplayFormatProps) {\n    super(props);\n    const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);\n    this.state = {\n      value: formatWithPattern(unformattedValue, props.displayPattern),\n      historyNavigator: new HistoryNavigator(),\n      prevDisplayPattern: props.displayPattern,\n      triggerType: 'Initial',\n      triggerEvent: null,\n      selectionStart: 0,\n      selectionEnd: 0,\n      pastedLength: 0,\n    };\n  }\n\n  static getDerivedStateFromProps(\n    { displayPattern }: WithDisplayFormatProps,\n    { prevDisplayPattern = displayPattern, value, historyNavigator }: WithDisplayFormatState,\n  ) {\n    if (prevDisplayPattern !== displayPattern) {\n      const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);\n      historyNavigator.reset();\n\n      return {\n        prevDisplayPattern: displayPattern,\n        value: formatWithPattern(unFormattedValue, displayPattern),\n        triggerType: null,\n        triggerEvent: null,\n        pastedLength: 0,\n      };\n    }\n    return null;\n  }\n\n  getUserAction = (unformattedValue: string): EventType | string => {\n    const { triggerEvent, triggerType, value } = this.state;\n    const { displayPattern } = this.props;\n\n    if (triggerEvent) {\n      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();\n\n      if (triggerType === 'Paste' || triggerType === 'Cut') {\n        return triggerType;\n      }\n\n      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {\n        return triggerEvent.shiftKey ? 'Redo' : 'Undo';\n      }\n      // Detect mouse event redo\n      if (triggerEvent.ctrlKey && charCode === 'd') {\n        return 'Delete';\n      }\n\n      // Android Fix.\n      if (\n        typeof triggerEvent.key === 'undefined' &&\n        unformattedValue.length <= unformatWithPattern(value, displayPattern).length\n      ) {\n        return 'Backspace';\n      }\n      return triggerEvent.key;\n    }\n    // triggerEvent can be null only in case of \"autofilling\" (via password manager extension or browser build-in one) events\n    return 'Paste';\n  };\n\n  resetEvent = () => {\n    this.setState({\n      triggerType: 'Initial',\n      triggerEvent: null,\n      pastedLength: 0,\n    });\n  };\n\n  detectUndoRedo = (event: React.KeyboardEvent<HTMLTextElement>) => {\n    const charCode = String.fromCharCode(event.which).toLowerCase();\n    if ((event.ctrlKey || event.metaKey) && charCode === 'z') {\n      return event.shiftKey ? 'Redo' : 'Undo';\n    }\n    return null;\n  };\n\n  handleOnKeyDown: React.KeyboardEventHandler<HTMLTextElement> = (event) => {\n    event.persist();\n    const { selectionStart, selectionEnd } = event.currentTarget;\n    const { historyNavigator } = this.state;\n    const { displayPattern } = this.props;\n\n    // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.\n    let newFormattedValue = '';\n\n    if (this.detectUndoRedo(event) === 'Undo') {\n      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Undo' });\n    } else if (this.detectUndoRedo(event) === 'Redo') {\n      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Redo' });\n    } else {\n      this.setState({\n        triggerEvent: event,\n        triggerType: 'KeyDown',\n        selectionStart: selectionStart ?? 0,\n        selectionEnd: selectionEnd ?? 0,\n      });\n    }\n  };\n\n  handleOnPaste: React.ClipboardEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern } = this.props;\n    const pastedLength = unformatWithPattern(\n      event.clipboardData.getData('Text'),\n      displayPattern,\n    ).length;\n\n    this.setState({ triggerType: 'Paste', pastedLength });\n  };\n\n  handleOnCut: React.ClipboardEventHandler<HTMLTextElement> = () => {\n    this.setState({ triggerType: 'Cut' });\n  };\n\n  isKeyAllowed = (action: EventType | string) => {\n    const { displayPattern } = this.props;\n    const symbolsInPattern = displayPattern.split('').filter((character) => character !== '*');\n\n    return !symbolsInPattern.includes(action);\n  };\n\n  handleOnChange: React.ChangeEventHandler<HTMLTextElement> = (event) => {\n    const { historyNavigator, triggerType } = this.state;\n    const { displayPattern, onChange } = this.props;\n    const { value } = event.target;\n    let unformattedValue = unformatWithPattern(value, displayPattern);\n    const action = this.getUserAction(unformattedValue);\n    if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {\n      return;\n    }\n\n    if (action === 'Backspace' || action === 'Delete') {\n      unformattedValue = this.handleDelete(unformattedValue, action);\n    }\n\n    const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);\n    historyNavigator.add(unformattedValue);\n\n    this.handleCursorPositioning(action);\n\n    this.setState({ value: newFormattedValue }, () => {\n      this.resetEvent();\n      if (onChange) {\n        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);\n        onChange(broadcastValue);\n      }\n    });\n  };\n\n  handleOnBlur: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));\n  };\n\n  handleOnFocus: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern, onFocus } = this.props;\n    if (onFocus) {\n      this.handleOnChange(event);\n      onFocus(unformatWithPattern(event.target.value, displayPattern));\n    }\n  };\n\n  handleDelete = (unformattedValue: string, action: EventType) => {\n    const { displayPattern } = this.props;\n    const { selectionStart, selectionEnd } = this.state;\n    const newStack = [...unformattedValue];\n    if (selectionStart === selectionEnd) {\n      let startPosition =\n        selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);\n      let toDelete = 0;\n\n      let count = getDistanceToNextSymbol(selectionStart, displayPattern);\n      if (action === 'Backspace') {\n        startPosition -= 1;\n        count = getDistanceToPreviousSymbol(selectionStart, displayPattern);\n      }\n\n      if (startPosition >= 0 && count) {\n        toDelete = 1;\n      }\n\n      newStack.splice(startPosition, toDelete);\n    }\n\n    return newStack.join('');\n  };\n\n  handleCursorPositioning = (action: string) => {\n    const { displayPattern } = this.props;\n    const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;\n    const target = triggerEvent?.currentTarget;\n\n    const cursorPosition = getCursorPositionAfterKeystroke(\n      action,\n      selectionStart,\n      selectionEnd,\n      displayPattern,\n      pastedLength,\n    );\n\n    setTimeout(() => {\n      target?.setSelectionRange(cursorPosition, cursorPosition);\n      this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });\n    }, 0);\n  };\n\n  render() {\n    const {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n    } = this.props;\n    const { value } = this.state;\n    const renderProps: TextElementProps = {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n      value,\n      onFocus: this.handleOnFocus,\n      onBlur: this.handleOnBlur,\n      onPaste: this.handleOnPaste,\n      onKeyDown: this.handleOnKeyDown,\n      onChange: this.handleOnChange,\n      onCut: this.handleOnCut,\n    };\n    return this.props.render(renderProps as T);\n  }\n}\n\nexport default WithDisplayFormat;\n"],"names":["WithDisplayFormat","React","Component","defaultProps","autoComplete","displayPattern","value","constructor","props","unformattedValue","unformatWithPattern","state","formatWithPattern","historyNavigator","HistoryNavigator","prevDisplayPattern","triggerType","triggerEvent","selectionStart","selectionEnd","pastedLength","getDerivedStateFromProps","unFormattedValue","reset","getUserAction","charCode","String","fromCharCode","which","toLowerCase","ctrlKey","metaKey","shiftKey","key","length","resetEvent","setState","detectUndoRedo","event","handleOnKeyDown","persist","currentTarget","newFormattedValue","undo","toString","redo","handleOnPaste","clipboardData","getData","handleOnCut","isKeyAllowed","action","symbolsInPattern","split","filter","character","includes","handleOnChange","onChange","target","handleDelete","add","handleCursorPositioning","broadcastValue","handleOnBlur","onBlur","handleOnFocus","onFocus","newStack","startPosition","getCountOfSymbolsInSelection","toDelete","count","getDistanceToNextSymbol","getDistanceToPreviousSymbol","splice","join","cursorPosition","getCursorPositionAfterKeystroke","setTimeout","setSelectionRange","render","inputMode","className","id","name","placeholder","readOnly","required","minLength","maxLength","disabled","renderProps","onPaste","onKeyDown","onCut"],"mappings":"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"}