@transferwise/components 0.0.0-experimental-778ee44 → 0.0.0-experimental-ae2a4e7

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

@@ -1,4 +1,5 @@
-import { Component, KeyboardEvent, ClipboardEvent, ChangeEvent, FocusEvent } from 'react';
+import PropTypes from 'prop-types';
+import { Component } from 'react';
 
 import { HistoryNavigator } from '../common';
 import {
@@ -9,65 +10,14 @@ 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: '',
-  };
 
-  constructor(props: Props) {
+class WithDisplayFormat extends Component {
+  constructor(props) {
     super(props);
-    const unformattedValue = unformatWithPattern(props.value, props.displayPattern);
+    const { value, displayPattern } = props;
+    const unformattedValue = unformatWithPattern(value, displayPattern);
     this.state = {
-      value: formatWithPattern(unformattedValue, props.displayPattern),
+      value: formatWithPattern(unformattedValue, displayPattern),
       historyNavigator: new HistoryNavigator(),
       prevDisplayPattern: props.displayPattern,
       triggerType: null,
@@ -75,11 +25,12 @@ class WithDisplayFormat extends Component<Props, State> {
     };
   }
 
-  static getDerivedStateFromProps(
-    { displayPattern }: Props,
-    { prevDisplayPattern = displayPattern, value, historyNavigator }: State,
-  ) {
-    if (prevDisplayPattern !== displayPattern) {
+  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();
 
@@ -94,37 +45,32 @@ class WithDisplayFormat extends Component<Props, State> {
     return null;
   }
 
-  getUserAction = (unformattedValue: string): EventType => {
+  getUserAction = (unformattedValue) => {
     const { triggerEvent, triggerType, value } = this.state;
     const { displayPattern } = this.props;
 
-    if (triggerEvent) {
-      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
+    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' &&
-        unformattedValue.length <= unformatWithPattern(value, displayPattern).length
-      ) {
+    // Android Fix.
+    if (typeof triggerEvent.key === 'undefined') {
+      if (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 = () => {
@@ -135,7 +81,7 @@ class WithDisplayFormat extends Component<Props, State> {
     });
   };
 
-  detectUndoRedo = (event: KeyboardEvent<HTMLInputElement>) => {
+  detectUndoRedo = (event) => {
     const charCode = String.fromCharCode(event.which).toLowerCase();
     if ((event.ctrlKey || event.metaKey) && charCode === 'z') {
       return event.shiftKey ? 'Redo' : 'Undo';
@@ -143,9 +89,9 @@ class WithDisplayFormat extends Component<Props, State> {
     return null;
   };
 
-  handleOnKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+  handleOnKeyDown = (event) => {
     event.persist();
-    const { selectionStart, selectionEnd } = event.target as HTMLInputElement;
+    const { selectionStart, selectionEnd } = event.target;
     const { historyNavigator } = this.state;
     const { displayPattern } = this.props;
 
@@ -168,7 +114,7 @@ class WithDisplayFormat extends Component<Props, State> {
     }
   };
 
-  handleOnPaste = (event: ClipboardEvent<HTMLInputElement>) => {
+  handleOnPaste = (event) => {
     const { displayPattern } = this.props;
     const pastedLength = unformatWithPattern(
       event.clipboardData.getData('Text'),
@@ -182,19 +128,23 @@ class WithDisplayFormat extends Component<Props, State> {
     this.setState({ triggerType: 'Cut' });
   };
 
-  isKeyAllowed = (action: EventType) => {
+  isKeyAllowed = (action) => {
     const { displayPattern } = this.props;
     const symbolsInPattern = displayPattern.split('').filter((character) => character !== '*');
 
-    return !symbolsInPattern.includes(action as string);
+    return !symbolsInPattern.includes(action);
   };
 
-  handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { historyNavigator, triggerType } = this.state;
+  handleOnChange = (event) => {
+    const { historyNavigator, triggerEvent, triggerType } = this.state;
     const { displayPattern, onChange } = this.props;
     const { value } = event.target;
     let unformattedValue = unformatWithPattern(value, displayPattern);
-    const action = this.getUserAction(unformattedValue);
+    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;
     }
@@ -208,20 +158,19 @@ class WithDisplayFormat extends Component<Props, State> {
 
     this.handleCursorPositioning(action);
 
-    this.setState({ value: newFormattedValue }, () => {
-      this.resetEvent();
-      if (onChange) {
-        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
-        onChange(broadcastValue);
-      }
-    });
+    const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
+
+    this.setState({ value: newFormattedValue }, this.resetEvent(), onChange(broadcastValue));
   };
 
-  handleOnBlur = (event: FocusEvent<HTMLInputElement>) => {
-    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
+  handleOnBlur = (event) => {
+    const { displayPattern, onBlur } = this.props;
+    if (onBlur) {
+      onBlur(unformatWithPattern(event.target.value, displayPattern));
+    }
   };
 
-  handleOnFocus = (event: FocusEvent<HTMLInputElement>) => {
+  handleOnFocus = (event) => {
     const { displayPattern, onFocus } = this.props;
     if (onFocus) {
       this.handleOnChange(event);
@@ -229,14 +178,13 @@ class WithDisplayFormat extends Component<Props, State> {
     }
   };
 
-  handleDelete = (unformattedValue: string, action: EventType) => {
+  handleDelete = (unformattedValue, action) => {
     const { displayPattern } = this.props;
     const { selectionStart, selectionEnd } = this.state;
     const newStack = [...unformattedValue];
     if (selectionStart === selectionEnd) {
       let startPosition =
-        (selectionStart as number) -
-        getCountOfSymbolsInSelection(0, selectionStart, displayPattern);
+        selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);
       let toDelete = 0;
 
       let count = getDistanceToNextSymbol(selectionStart, displayPattern);
@@ -255,21 +203,21 @@ class WithDisplayFormat extends Component<Props, State> {
     return newStack.join('');
   };
 
-  handleCursorPositioning = (action: EventType) => {
+  handleCursorPositioning = (action) => {
     const { displayPattern } = this.props;
     const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;
 
     const cursorPosition = getCursorPositionAfterKeystroke(
       action,
-      selectionStart as number,
-      selectionEnd as number,
+      selectionStart,
+      selectionEnd,
       displayPattern,
-      pastedLength as number,
+      pastedLength,
     );
 
     setTimeout(() => {
       if (triggerEvent) {
-        (triggerEvent.target as HTMLInputElement).setSelectionRange(cursorPosition, cursorPosition);
+        triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
       }
       this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });
     }, 0);
@@ -316,4 +264,49 @@ class WithDisplayFormat extends Component<Props, State> {
   }
 }
 
+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/build/types/phoneNumberInput/utils/filterOptionsForQuery/index.d.ts

@@ -1,2 +0,0 @@
-export function filterOptionsForQuery(options: any, query: any): any;
-//# sourceMappingURL=index.d.ts.map

package/build/types/phoneNumberInput/utils/filterOptionsForQuery/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/filterOptionsForQuery/index.js"],"names":[],"mappings":"AASO,qEAC0D"}

package/build/types/phoneNumberInput/utils/isOptionAndFitsQuery/index.d.ts

@@ -1,2 +0,0 @@
-export { isOptionAndFitsQuery, startsWith } from "./isOptionAndFitsQuery";
-//# sourceMappingURL=index.d.ts.map

package/build/types/phoneNumberInput/utils/isOptionAndFitsQuery/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isOptionAndFitsQuery/index.js"],"names":[],"mappings":""}

package/build/types/phoneNumberInput/utils/isOptionAndFitsQuery/isOptionAndFitsQuery.d.ts

@@ -1,3 +0,0 @@
-export function isOptionAndFitsQuery(option: object, query: string): boolean;
-export function startsWith(property: any, query: any): boolean;
-//# sourceMappingURL=isOptionAndFitsQuery.d.ts.map

package/build/types/phoneNumberInput/utils/isOptionAndFitsQuery/isOptionAndFitsQuery.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"isOptionAndFitsQuery.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isOptionAndFitsQuery/isOptionAndFitsQuery.js"],"names":[],"mappings":"AAQO,6CAJI,MAAM,SACN,MAAM,GACJ,OAAO,CAMa;AAE1B,+DAQN"}

package/src/common/locale/index.js

@@ -1,139 +0,0 @@
-import { Direction } from '..';
-
-/**
- * Default language
- *
- * @type {string}
- */
-export const DEFAULT_LANG = 'en';
-
-/**
- * Default locale
- *
- * @type {string}
- */
-export const DEFAULT_LOCALE = 'en-GB';
-
-/**
- * Array of languages that are written from the right to the left
- *
- * @type {string[]}
- */
-export const RTL_LANGUAGES = ['ar', 'he'];
-
-/**
- * @deprecated The source of truth for supported languages lives in Crab.
- * @type {string[]}
- */
-export const SUPPORTED_LANGUAGES = [
-  DEFAULT_LANG,
-  'de',
-  'es',
-  'fr',
-  'hu',
-  'id',
-  'it',
-  'ja',
-  'pl',
-  'pt',
-  'ro',
-  'ru',
-  'th',
-  'tr',
-  'uk',
-  'zh',
-];
-
-/**
- * Verifies and adjusts locale (replace `_` with `-`)
- * Returns null if locale is unrecognized by {Intl.Locale}
- *
- * @param {string} locale (`es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {string|null}
- */
-export function adjustLocale(locale) {
-  if (!locale || locale.trim().length === 0) {
-    return null;
-  }
-  try {
-    const { baseName } = new Intl.Locale(locale.trim().replace('_', '-'));
-    return baseName;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return null;
-  }
-}
-
-/**
- * Provides corresponding lang (iso2) for provided locale
- * if locale is invalid or language is unsupported returns null
- *
- * @deprecated The use of this function almost always breaks language variants
- * e.g. Simplified and Traditional Chinese.
- * There should be no use case for this function.
- * To select the correct translations from a translations object, pass the
- * locale directly into Crab's getLocalisedMessages.
- * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {string|null} two-letter ISO639-1 language
- */
-export function getLangFromLocale(locale) {
-  const adjustedLocale = adjustLocale(locale);
-  if (adjustedLocale === null) {
-    return null;
-  }
-  try {
-    const { language } = new Intl.Locale(adjustedLocale);
-
-    if (SUPPORTED_LANGUAGES.includes(language)) {
-      return language;
-    }
-    return null;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return null;
-  }
-}
-
-/**
- * Provides corresponding country code (iso2) for locales code with explicit region value (`es-ES`, `en-GB`, `ja-JP` etc.)
- * if the value is invalid or missing region it returns null
- *
- * @param {string} locale
- * @returns {string|null}
- */
-export function getCountryFromLocale(locale) {
-  const adjustedLocale = adjustLocale(locale);
-  if (adjustedLocale === null) {
-    return null;
-  }
-  try {
-    const { region } = new Intl.Locale(adjustedLocale);
-    return region ?? null;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return null;
-  }
-}
-
-/**
- * Provides the layout direction for a given locale.
- * If locale is invalid or language is unsupported returns Direction.LTR
- *
- * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {Direction} The layout direction based on the locale
- */
-export function getDirectionFromLocale(locale) {
-  try {
-    const adjustedLocale = adjustLocale(locale);
-    const { language } = new Intl.Locale(adjustedLocale);
-
-    return RTL_LANGUAGES.includes(language) ? Direction.RTL : Direction.LTR;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return Direction.LTR;
-  }
-}

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