@transferwise/components 0.0.0-experimental-1f8ed05 → 0.0.0-experimental-d0bd4b4

package/src/withDisplayFormat/{WithDisplayFormat.js → WithDisplayFormat.tsx}

@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import { Component } from 'react';
+import { Component, KeyboardEvent, ClipboardEvent, ChangeEvent, FocusEvent } from 'react';
 
 import { HistoryNavigator } from '../common';
 import {
@@ -10,14 +9,65 @@ import {
   getDistanceToPreviousSymbol,
   getDistanceToNextSymbol,
 } from '../common/textFormat';
+import { InputProps } from '../inputs/Input';
+import { TextAreaProps } from '../inputs/TextArea';
+import { Merge } from '../utils';
+
+export type TextInputProps = Merge<
+  InputProps,
+  {
+    value?: string;
+    displayPattern: string;
+    /**
+     * autocomplete hides our form help so we need to disable it when help text
+     * is present. Chrome ignores autocomplete=off, the only way to disable it is
+     * to provide an 'invalid' value, for which 'disabled' serves.
+     */
+    autoComplete?: InputProps['autoComplete'] | 'disabled';
+    onChange?: (value: string) => void;
+    onBlur?: (value: string) => void;
+    onFocus?: (value: string) => void;
+  }
+>;
+
+export type Props = typeof WithDisplayFormat.defaultProps & {
+  render: (renderProps: InputProps | TextAreaProps) => JSX.Element;
+} & TextInputProps;
+
+export type EventType =
+  | 'KeyDown'
+  | 'Paste'
+  | 'Cut'
+  | 'Undo'
+  | 'Redo'
+  | 'Backspace'
+  | 'Delete'
+  | null;
+
+type State = {
+  value: string;
+  historyNavigator: HistoryNavigator;
+  prevDisplayPattern?: string;
+  triggerType?: EventType;
+  triggerEvent?: KeyboardEvent<HTMLInputElement> | null;
+  pastedLength?: number;
+  selectionStart?: HTMLInputElement['selectionStart'];
+  selectionEnd?: HTMLInputElement['selectionEnd'];
+};
+
+class WithDisplayFormat extends Component<Props, State> {
+  static defaultProps = {
+    autoComplete: 'off',
+    displayPattern: '',
+    type: 'text',
+    value: '',
+  };
 
-class WithDisplayFormat extends Component {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
-    const { value, displayPattern } = props;
-    const unformattedValue = unformatWithPattern(value, displayPattern);
+    const unformattedValue = unformatWithPattern(props.value, props.displayPattern);
     this.state = {
-      value: formatWithPattern(unformattedValue, displayPattern),
+      value: formatWithPattern(unformattedValue, props.displayPattern),
       historyNavigator: new HistoryNavigator(),
       prevDisplayPattern: props.displayPattern,
       triggerType: null,
@@ -25,12 +75,11 @@ class WithDisplayFormat extends Component {
     };
   }
 
-  static getDerivedStateFromProps(nextProps, previousState) {
-    const { displayPattern } = nextProps;
-    const { prevDisplayPattern } = previousState;
-    if (previousState.prevDisplayPattern !== displayPattern) {
-      const { value, historyNavigator } = previousState;
-
+  static getDerivedStateFromProps(
+    { displayPattern }: Props,
+    { prevDisplayPattern = displayPattern, value, historyNavigator }: State,
+  ) {
+    if (prevDisplayPattern !== displayPattern) {
       const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);
       historyNavigator.reset();
 
@@ -45,32 +94,37 @@ class WithDisplayFormat extends Component {
     return null;
   }
 
-  getUserAction = (unformattedValue) => {
+  getUserAction = (unformattedValue: string): EventType => {
     const { triggerEvent, triggerType, value } = this.state;
     const { displayPattern } = this.props;
 
-    const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
+    if (triggerEvent) {
+      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
 
-    if (triggerType === 'Paste' || triggerType === 'Cut') {
-      return triggerType;
-    }
+      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';
-    }
+      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') {
-      if (unformattedValue.length <= unformatWithPattern(value, displayPattern).length) {
+      // Android Fix.
+      if (
+        typeof triggerEvent.key === 'undefined' &&
+        unformattedValue.length <= unformatWithPattern(value, displayPattern).length
+      ) {
         return 'Backspace';
       }
+      return triggerEvent.key as EventType;
+    } else {
+      // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
+      return 'Paste';
     }
-
-    return triggerEvent.key;
   };
 
   resetEvent = () => {
@@ -81,7 +135,7 @@ class WithDisplayFormat extends Component {
     });
   };
 
-  detectUndoRedo = (event) => {
+  detectUndoRedo = (event: KeyboardEvent<HTMLInputElement>) => {
     const charCode = String.fromCharCode(event.which).toLowerCase();
     if ((event.ctrlKey || event.metaKey) && charCode === 'z') {
       return event.shiftKey ? 'Redo' : 'Undo';
@@ -89,9 +143,9 @@ class WithDisplayFormat extends Component {
     return null;
   };
 
-  handleOnKeyDown = (event) => {
+  handleOnKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     event.persist();
-    const { selectionStart, selectionEnd } = event.target;
+    const { selectionStart, selectionEnd } = event.target as HTMLInputElement;
     const { historyNavigator } = this.state;
     const { displayPattern } = this.props;
 
@@ -114,7 +168,7 @@ class WithDisplayFormat extends Component {
     }
   };
 
-  handleOnPaste = (event) => {
+  handleOnPaste = (event: ClipboardEvent<HTMLInputElement>) => {
     const { displayPattern } = this.props;
     const pastedLength = unformatWithPattern(
       event.clipboardData.getData('Text'),
@@ -128,23 +182,19 @@ class WithDisplayFormat extends Component {
     this.setState({ triggerType: 'Cut' });
   };
 
-  isKeyAllowed = (action) => {
+  isKeyAllowed = (action: EventType) => {
     const { displayPattern } = this.props;
     const symbolsInPattern = displayPattern.split('').filter((character) => character !== '*');
 
-    return !symbolsInPattern.includes(action);
+    return !symbolsInPattern.includes(action as string);
   };
 
-  handleOnChange = (event) => {
-    const { historyNavigator, triggerEvent, triggerType } = this.state;
+  handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { historyNavigator, triggerType } = this.state;
     const { displayPattern, onChange } = this.props;
     const { value } = event.target;
     let unformattedValue = unformatWithPattern(value, displayPattern);
-    const action =
-      triggerEvent === null
-        ? // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
-          'Paste'
-        : this.getUserAction(unformattedValue);
+    const action = this.getUserAction(unformattedValue);
     if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
       return;
     }
@@ -158,19 +208,20 @@ class WithDisplayFormat extends Component {
 
     this.handleCursorPositioning(action);
 
-    const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
-
-    this.setState({ value: newFormattedValue }, this.resetEvent(), onChange(broadcastValue));
+    this.setState({ value: newFormattedValue }, () => {
+      this.resetEvent();
+      if (onChange) {
+        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
+        onChange(broadcastValue);
+      }
+    });
   };
 
-  handleOnBlur = (event) => {
-    const { displayPattern, onBlur } = this.props;
-    if (onBlur) {
-      onBlur(unformatWithPattern(event.target.value, displayPattern));
-    }
+  handleOnBlur = (event: FocusEvent<HTMLInputElement>) => {
+    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
   };
 
-  handleOnFocus = (event) => {
+  handleOnFocus = (event: FocusEvent<HTMLInputElement>) => {
     const { displayPattern, onFocus } = this.props;
     if (onFocus) {
       this.handleOnChange(event);
@@ -178,13 +229,14 @@ class WithDisplayFormat extends Component {
     }
   };
 
-  handleDelete = (unformattedValue, action) => {
+  handleDelete = (unformattedValue: string, action: EventType) => {
     const { displayPattern } = this.props;
     const { selectionStart, selectionEnd } = this.state;
     const newStack = [...unformattedValue];
     if (selectionStart === selectionEnd) {
       let startPosition =
-        selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);
+        (selectionStart as number) -
+        getCountOfSymbolsInSelection(0, selectionStart, displayPattern);
       let toDelete = 0;
 
       let count = getDistanceToNextSymbol(selectionStart, displayPattern);
@@ -203,21 +255,21 @@ class WithDisplayFormat extends Component {
     return newStack.join('');
   };
 
-  handleCursorPositioning = (action) => {
+  handleCursorPositioning = (action: EventType) => {
     const { displayPattern } = this.props;
     const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;
 
     const cursorPosition = getCursorPositionAfterKeystroke(
       action,
-      selectionStart,
-      selectionEnd,
+      selectionStart as number,
+      selectionEnd as number,
       displayPattern,
-      pastedLength,
+      pastedLength as number,
     );
 
     setTimeout(() => {
       if (triggerEvent) {
-        triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
+        (triggerEvent.target as HTMLInputElement).setSelectionRange(cursorPosition, cursorPosition);
       }
       this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });
     }, 0);
@@ -264,49 +316,4 @@ class WithDisplayFormat extends Component {
   }
 }
 
-WithDisplayFormat.propTypes = {
-  /**
-   * autocomplete hides our form help so we need to disable it when help text
-   * is present. Chrome ignores autocomplete=off, the only way to disable it is
-   * to provide an 'invalid' value, for which 'disabled' serves.
-   */
-  autoComplete: PropTypes.oneOf(['on', 'off', 'disabled']),
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
-  maxLength: PropTypes.number,
-  minLength: PropTypes.number,
-  name: PropTypes.string,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  readOnly: PropTypes.bool,
-  render: PropTypes.func.isRequired,
-  required: PropTypes.bool,
-  displayPattern: PropTypes.string,
-  type: PropTypes.string,
-  inputMode: PropTypes.string,
-  value: PropTypes.string,
-};
-
-WithDisplayFormat.defaultProps = {
-  autoComplete: 'off',
-  className: null,
-  disabled: false,
-  id: null,
-  maxLength: null,
-  minLength: null,
-  name: null,
-  placeholder: null,
-  readOnly: false,
-  required: false,
-  displayPattern: '',
-  type: 'text',
-  inputMode: null,
-  value: '',
-  onFocus: null,
-  onBlur: null,
-};
-
 export default WithDisplayFormat;

package/src/withDisplayFormat/index.ts

@@ -0,0 +1,2 @@
+export { default } from './WithDisplayFormat';
+export type { Props as WithDisplayFormatProps, TextInputProps } from './WithDisplayFormat';

package/src/inputWithDisplayFormat/InputWithDisplayFormat.js

@@ -1,14 +0,0 @@
-import PropTypes from 'prop-types';
-
-import WithDisplayFormat from '../withDisplayFormat';
-
-const InputWithDisplayFormat = (props) => (
-  <WithDisplayFormat {...props} render={(renderProps) => <input {...renderProps} />} />
-);
-
-InputWithDisplayFormat.propTypes = {
-  displayPattern: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
-export default InputWithDisplayFormat;

package/src/inputWithDisplayFormat/index.js

@@ -1 +0,0 @@
-export { default } from './InputWithDisplayFormat';

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.js

@@ -1,14 +0,0 @@
-import PropTypes from 'prop-types';
-
-import WithDisplayFormat from '../withDisplayFormat';
-
-const TextareaWithDisplayFormat = (props) => (
-  <WithDisplayFormat {...props} render={(renderProps) => <textarea {...renderProps} />} />
-);
-
-TextareaWithDisplayFormat.propTypes = {
-  displayPattern: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
-export default TextareaWithDisplayFormat;

package/src/textareaWithDisplayFormat/index.js

@@ -1 +0,0 @@
-export { default } from './TextareaWithDisplayFormat';

package/src/withDisplayFormat/index.js

@@ -1 +0,0 @@
-export { default } from './WithDisplayFormat';