@transferwise/components 0.0.0-experimental-adcaf57 → 0.0.0-experimental-2118ad7

package/src/withDisplayFormat/WithDisplayFormat.js

@@ -0,0 +1,312 @@
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+
+import { HistoryNavigator } from '../common';
+import {
+  formatWithPattern,
+  getCountOfSymbolsInSelection,
+  getCursorPositionAfterKeystroke,
+  unformatWithPattern,
+  getDistanceToPreviousSymbol,
+  getDistanceToNextSymbol,
+} from '../common/textFormat';
+
+class WithDisplayFormat extends Component {
+  constructor(props) {
+    super(props);
+    const { value, displayPattern } = props;
+    const unformattedValue = unformatWithPattern(value, displayPattern);
+    this.state = {
+      value: formatWithPattern(unformattedValue, displayPattern),
+      historyNavigator: new HistoryNavigator(),
+      prevDisplayPattern: props.displayPattern,
+      triggerType: null,
+      triggerEvent: null,
+    };
+  }
+
+  static getDerivedStateFromProps(nextProps, previousState) {
+    const { displayPattern } = nextProps;
+    const { prevDisplayPattern } = previousState;
+    if (previousState.prevDisplayPattern !== displayPattern) {
+      const { value, historyNavigator } = previousState;
+
+      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;
+
+    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') {
+      if (unformattedValue.length <= unformatWithPattern(value, displayPattern).length) {
+        return 'Backspace';
+      }
+    }
+
+    return triggerEvent.key;
+  };
+
+  resetEvent = () => {
+    this.setState({
+      triggerType: null,
+      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.target;
+    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(), displayPattern);
+      this.setState({ value: newFormattedValue, triggerType: 'Undo' });
+    } else if (this.detectUndoRedo(event) === 'Redo') {
+      newFormattedValue = formatWithPattern(historyNavigator.redo(), displayPattern);
+      this.setState({ value: newFormattedValue, triggerType: 'Redo' });
+    } else {
+      this.setState({
+        triggerEvent: event,
+        triggerType: 'KeyDown',
+        selectionStart,
+        selectionEnd,
+      });
+    }
+  };
+
+  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, triggerEvent, 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);
+    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);
+
+    const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
+
+    this.setState({ value: newFormattedValue }, this.resetEvent(), onChange(broadcastValue));
+  };
+
+  handleOnBlur = (event) => {
+    const { displayPattern, onBlur } = this.props;
+    if (onBlur) {
+      onBlur(unformatWithPattern(event.target.value, 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 cursorPosition = getCursorPositionAfterKeystroke(
+      action,
+      selectionStart,
+      selectionEnd,
+      displayPattern,
+      pastedLength,
+    );
+
+    setTimeout(() => {
+      if (triggerEvent) {
+        triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
+      }
+      this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });
+    }, 0);
+  };
+
+  render() {
+    const {
+      type,
+      inputMode,
+      className,
+      id,
+      name,
+      placeholder,
+      readOnly,
+      required,
+      minLength,
+      maxLength,
+      disabled,
+      autoComplete,
+    } = this.props;
+    const { value } = this.state;
+    const renderProps = {
+      type,
+      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);
+  }
+}
+
+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.js

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

package/src/inputWithDisplayFormat/InputWithDisplayFormat.tsx

@@ -1,11 +0,0 @@
-import { Input, type InputProps } from '../inputs/Input';
-import WithDisplayFormat, { type TextInputProps } from '../withDisplayFormat';
-
-const InputWithDisplayFormat = (props: TextInputProps) => (
-  <WithDisplayFormat
-    {...props}
-    render={(renderProps) => <Input {...(renderProps as InputProps)} />}
-  />
-);
-
-export default InputWithDisplayFormat;

package/src/inputWithDisplayFormat/index.ts

@@ -1,2 +0,0 @@
-export { default } from './InputWithDisplayFormat';
-export type { TextInputProps as InputWithDisplayFormatProps } from '../withDisplayFormat';

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -1,30 +0,0 @@
-import { StoryObj } from '@storybook/react';
-
-import { userEvent, within } from '../test-utils';
-
-import TextareaWithDisplayFormat from './TextareaWithDisplayFormat';
-
-export default {
-  component: TextareaWithDisplayFormat,
-  title: 'Forms/TextareaWithDisplayFormat',
-};
-
-type Story = StoryObj<typeof TextareaWithDisplayFormat>;
-
-export const Basic: Story = {
-  render: (args) => {
-    return (
-      <>
-        <TextareaWithDisplayFormat
-          value="0000"
-          displayPattern="**** - **** - ****"
-          onChange={console.log}
-        />
-      </>
-    );
-  },
-  play: ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    userEvent.type(canvas.getByRole('textbox'), '111122223333');
-  },
-};

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.tsx

@@ -1,11 +0,0 @@
-import { TextArea, type TextAreaProps } from '../inputs/TextArea';
-import WithDisplayFormat, { type TextInputProps } from '../withDisplayFormat';
-
-const TextareaWithDisplayFormat = (props: TextInputProps) => (
-  <WithDisplayFormat
-    {...props}
-    render={(renderProps) => <TextArea {...(renderProps as TextAreaProps)} />}
-  />
-);
-
-export default TextareaWithDisplayFormat;

package/src/textareaWithDisplayFormat/index.ts

@@ -1,2 +0,0 @@
-export { default } from './TextareaWithDisplayFormat';
-export type { TextInputProps as TextareaWithDisplayFormatProps } from '../withDisplayFormat';

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -1,303 +0,0 @@
-import { Component, KeyboardEvent, ClipboardEvent, ChangeEvent, FocusEvent } from 'react';
-
-import { HistoryNavigator } from '../common';
-import {
-  formatWithPattern,
-  getCountOfSymbolsInSelection,
-  getCursorPositionAfterKeystroke,
-  unformatWithPattern,
-  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: '',
-  };
-
-  constructor(props: Props) {
-    super(props);
-    const unformattedValue = unformatWithPattern(props.value, props.displayPattern);
-    this.state = {
-      value: formatWithPattern(unformattedValue, props.displayPattern),
-      historyNavigator: new HistoryNavigator(),
-      prevDisplayPattern: props.displayPattern,
-      triggerType: null,
-      triggerEvent: null,
-    };
-  }
-
-  static getDerivedStateFromProps(
-    { displayPattern }: Props,
-    { prevDisplayPattern = displayPattern, value, historyNavigator }: State,
-  ) {
-    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: string): EventType => {
-    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 as EventType;
-    } else {
-      // 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: null,
-      triggerEvent: null,
-      pastedLength: 0,
-    });
-  };
-
-  detectUndoRedo = (event: KeyboardEvent<HTMLInputElement>) => {
-    const charCode = String.fromCharCode(event.which).toLowerCase();
-    if ((event.ctrlKey || event.metaKey) && charCode === 'z') {
-      return event.shiftKey ? 'Redo' : 'Undo';
-    }
-    return null;
-  };
-
-  handleOnKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    event.persist();
-    const { selectionStart, selectionEnd } = event.target as HTMLInputElement;
-    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(), displayPattern);
-      this.setState({ value: newFormattedValue, triggerType: 'Undo' });
-    } else if (this.detectUndoRedo(event) === 'Redo') {
-      newFormattedValue = formatWithPattern(historyNavigator.redo(), displayPattern);
-      this.setState({ value: newFormattedValue, triggerType: 'Redo' });
-    } else {
-      this.setState({
-        triggerEvent: event,
-        triggerType: 'KeyDown',
-        selectionStart,
-        selectionEnd,
-      });
-    }
-  };
-
-  handleOnPaste = (event: ClipboardEvent<HTMLInputElement>) => {
-    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: EventType) => {
-    const { displayPattern } = this.props;
-    const symbolsInPattern = displayPattern.split('').filter((character) => character !== '*');
-
-    return !symbolsInPattern.includes(action as string);
-  };
-
-  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 = 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: FocusEvent<HTMLInputElement>) => {
-    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
-  };
-
-  handleOnFocus = (event: FocusEvent<HTMLInputElement>) => {
-    const { displayPattern, onFocus } = this.props;
-    if (onFocus) {
-      this.handleOnChange(event);
-      onFocus(unformatWithPattern(event.target.value, displayPattern));
-    }
-  };
-
-  handleDelete = (unformattedValue: string, action: EventType) => {
-    const { displayPattern } = this.props;
-    const { selectionStart, selectionEnd } = this.state;
-    const newStack = [...unformattedValue];
-    if (selectionStart === selectionEnd) {
-      let startPosition =
-        (selectionStart as number) -
-        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: EventType) => {
-    const { displayPattern } = this.props;
-    const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;
-
-    const cursorPosition = getCursorPositionAfterKeystroke(
-      action,
-      selectionStart as number,
-      selectionEnd as number,
-      displayPattern,
-      pastedLength as number,
-    );
-
-    setTimeout(() => {
-      if (triggerEvent) {
-        (triggerEvent.target as HTMLInputElement).setSelectionRange(cursorPosition, cursorPosition);
-      }
-      this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });
-    }, 0);
-  };
-
-  render() {
-    return this.props.render({
-      value: this.state.value,
-      type: this.props.type,
-      inputMode: this.props.inputMode,
-      className: this.props.className,
-      id: this.props.id,
-      name: this.props.name,
-      placeholder: this.props.placeholder,
-      readOnly: this.props.readOnly,
-      required: this.props.required,
-      minLength: this.props.minLength,
-      maxLength: this.props.maxLength,
-      disabled: this.props.disabled,
-      autoComplete: this.props.autoComplete,
-      onFocus: this.handleOnFocus,
-      onBlur: this.handleOnBlur,
-      onPaste: this.handleOnPaste,
-      onKeyDown: this.handleOnKeyDown,
-      onChange: this.handleOnChange,
-      onCut: this.handleOnCut,
-    });
-  }
-}
-
-export default WithDisplayFormat;

package/src/withDisplayFormat/index.ts

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