@transferwise/components 0.0.0-experimental-47ae02a → 0.0.0-experimental-da6dbbf

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -25,12 +25,12 @@ export type EventType =
   | 'Delete'
   | 'Initial';
 
-interface WithDisplayFormatState<T extends HTMLTextElement> {
+interface WithDisplayFormatState {
   value: string;
   historyNavigator: HistoryNavigator;
   prevDisplayPattern: string;
   triggerType: EventType;
-  triggerEvent: React.KeyboardEvent<T> | null;
+  triggerEvent: React.KeyboardEvent<HTMLTextElement> | null;
   pastedLength: number;
   selectionStart: number;
   selectionEnd: number;
@@ -38,7 +38,7 @@ interface WithDisplayFormatState<T extends HTMLTextElement> {
 
 export interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps>
   extends Pick<
-    T,
+    TextElementProps,
     | 'className'
     | 'disabled'
     | 'id'
@@ -64,21 +64,19 @@ export interface WithDisplayFormatProps<T extends TextElementProps = TextElement
   render: (renderProps: T) => JSX.Element;
 }
 
-class WithDisplayFormat<
-  T extends TextElementProps = TextElementProps,
-  U extends HTMLTextElement = HTMLTextElement,
-> extends Component<WithDisplayFormatProps<T>, WithDisplayFormatState<U>> {
+class WithDisplayFormat<T extends TextElementProps> extends Component<
+  WithDisplayFormatProps<T>,
+  WithDisplayFormatState
+> {
   declare props: WithDisplayFormatProps<T> &
-    Required<
-      Pick<WithDisplayFormatProps<T>, keyof (typeof WithDisplayFormat<T, U>)['defaultProps']>
-    >;
+    Required<Pick<WithDisplayFormatProps<T>, keyof typeof WithDisplayFormat.defaultProps>>;
   static defaultProps = {
     autoComplete: 'off',
     displayPattern: '',
     value: '',
-  } satisfies Partial<WithDisplayFormatProps>;
+  };
 
-  constructor(props: WithDisplayFormat<T, U>['props']) {
+  constructor(props: WithDisplayFormatProps) {
     super(props);
     const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);
     this.state = {
@@ -94,8 +92,8 @@ class WithDisplayFormat<
   }
 
   static getDerivedStateFromProps(
-    { displayPattern }: WithDisplayFormat['props'],
-    { prevDisplayPattern = displayPattern, value, historyNavigator }: WithDisplayFormat['state'],
+    { displayPattern }: WithDisplayFormatProps,
+    { prevDisplayPattern = displayPattern, value, historyNavigator }: WithDisplayFormatState,
   ) {
     if (prevDisplayPattern !== displayPattern) {
       const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);
@@ -139,9 +137,10 @@ class WithDisplayFormat<
         return 'Backspace';
       }
       return triggerEvent.key;
+    } else {
+      // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
+      return 'Paste';
     }
-    // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
-    return 'Paste';
   };
 
   resetEvent = () => {
@@ -152,7 +151,7 @@ class WithDisplayFormat<
     });
   };
 
-  detectUndoRedo = (event: React.KeyboardEvent<U>) => {
+  detectUndoRedo = (event: React.KeyboardEvent<HTMLTextElement>) => {
     const charCode = String.fromCharCode(event.which).toLowerCase();
     if ((event.ctrlKey || event.metaKey) && charCode === 'z') {
       return event.shiftKey ? 'Redo' : 'Undo';
@@ -160,7 +159,7 @@ class WithDisplayFormat<
     return null;
   };
 
-  handleOnKeyDown: React.KeyboardEventHandler<U> = (event) => {
+  handleOnKeyDown: React.KeyboardEventHandler<HTMLTextElement> = (event) => {
     event.persist();
     const { selectionStart, selectionEnd } = event.currentTarget;
     const { historyNavigator } = this.state;
@@ -185,7 +184,7 @@ class WithDisplayFormat<
     }
   };
 
-  handleOnPaste: React.ClipboardEventHandler<U> = (event) => {
+  handleOnPaste: React.ClipboardEventHandler<HTMLTextElement> = (event) => {
     const { displayPattern } = this.props;
     const pastedLength = unformatWithPattern(
       event.clipboardData.getData('Text'),
@@ -195,7 +194,7 @@ class WithDisplayFormat<
     this.setState({ triggerType: 'Paste', pastedLength });
   };
 
-  handleOnCut: React.ClipboardEventHandler<U> = () => {
+  handleOnCut: React.ClipboardEventHandler<HTMLTextElement> = () => {
     this.setState({ triggerType: 'Cut' });
   };
 
@@ -206,7 +205,7 @@ class WithDisplayFormat<
     return !symbolsInPattern.includes(action);
   };
 
-  handleOnChange: React.ChangeEventHandler<U> = (event) => {
+  handleOnChange: React.ChangeEventHandler<HTMLTextElement> = (event) => {
     const { historyNavigator, triggerType } = this.state;
     const { displayPattern, onChange } = this.props;
     const { value } = event.target;
@@ -234,11 +233,11 @@ class WithDisplayFormat<
     });
   };
 
-  handleOnBlur: React.FocusEventHandler<U> = (event) => {
+  handleOnBlur: React.FocusEventHandler<HTMLTextElement> = (event) => {
     this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
   };
 
-  handleOnFocus: React.FocusEventHandler<U> = (event) => {
+  handleOnFocus: React.FocusEventHandler<HTMLTextElement> = (event) => {
     const { displayPattern, onFocus } = this.props;
     if (onFocus) {
       this.handleOnChange(event);
@@ -274,7 +273,6 @@ class WithDisplayFormat<
   handleCursorPositioning = (action: string) => {
     const { displayPattern } = this.props;
     const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;
-    const target = triggerEvent?.currentTarget;
 
     const cursorPosition = getCursorPositionAfterKeystroke(
       action,
@@ -285,7 +283,9 @@ class WithDisplayFormat<
     );
 
     setTimeout(() => {
-      target?.setSelectionRange(cursorPosition, cursorPosition);
+      if (triggerEvent) {
+        (triggerEvent.target as HTMLTextElement).setSelectionRange(cursorPosition, cursorPosition);
+      }
       this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });
     }, 0);
   };
@@ -305,7 +305,7 @@ class WithDisplayFormat<
       autoComplete,
     } = this.props;
     const { value } = this.state;
-    const renderProps = {
+    const renderProps: TextElementProps = {
       inputMode,
       className,
       id,
@@ -324,8 +324,8 @@ class WithDisplayFormat<
       onKeyDown: this.handleOnKeyDown,
       onChange: this.handleOnChange,
       onCut: this.handleOnCut,
-    } as T;
-    return this.props.render(renderProps);
+    };
+    return this.props.render(renderProps as T);
   }
 }
 

package/src/processIndicator/ProcessIndicator.rtl.spec.tsx

@@ -1,45 +0,0 @@
-import { act } from 'react';
-
-import { render, screen } from '../test-utils';
-import ProcessIndicator, { ProcessIndicatorProps } from './ProcessIndicator';
-
-describe('ProcessIndicator', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(async () => {
-    await jest.runOnlyPendingTimersAsync();
-    jest.useRealTimers();
-  });
-
-  it('supports transitioning between states', async () => {
-    const handleAnimationCompleted = jest.fn();
-    const initialProps = {
-      'data-testid': 'process-indicator',
-      onAnimationCompleted: handleAnimationCompleted,
-    } satisfies ProcessIndicatorProps;
-    const view = render(<ProcessIndicator {...initialProps} />);
-
-    expect(screen.getByTestId('process-indicator')).not.toHaveClass('process-success');
-    expect(screen.getByTestId('process-indicator')).not.toHaveClass('process-xl');
-
-    const updatedProps = {
-      status: 'succeeded',
-      size: 'xl',
-    } satisfies ProcessIndicatorProps;
-    view.rerender(<ProcessIndicator {...initialProps} {...updatedProps} />);
-    await act(async () => {
-      await jest.runOnlyPendingTimersAsync();
-    });
-
-    expect(screen.getByTestId('process-indicator')).toHaveClass('process-success');
-    expect(screen.getByTestId('process-indicator')).toHaveClass('process-xl');
-    expect(handleAnimationCompleted).not.toHaveBeenCalled();
-
-    await jest.runOnlyPendingTimersAsync();
-
-    expect(handleAnimationCompleted).toHaveBeenCalledWith(updatedProps.status);
-    expect(handleAnimationCompleted).toHaveBeenCalledTimes(1);
-  });
-});

package/src/processIndicator/ProcessIndicator.tsx

@@ -1,110 +0,0 @@
-import classNames from 'classnames';
-import { Component } from 'react';
-
-import { Status, Size } from '../common';
-
-const radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };
-
-const ANIMATION_DURATION_IN_MS = 1500;
-
-type ProcessIndicatorStatus =
-  `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;
-
-export interface ProcessIndicatorProps {
-  status?: ProcessIndicatorStatus;
-  size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;
-  className?: string;
-  'data-testid'?: string;
-  onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;
-}
-
-type ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;
-
-export default class ProcessIndicator extends Component<
-  ProcessIndicatorProps,
-  ProcessIndicatorState
-> {
-  declare props: ProcessIndicatorProps &
-    Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;
-
-  static defaultProps = {
-    status: 'processing',
-    size: 'sm',
-  } satisfies Partial<ProcessIndicatorProps>;
-
-  interval = 0;
-  timeout = 0;
-
-  constructor(props: ProcessIndicator['props']) {
-    super(props);
-    this.state = {
-      status: props.status,
-      size: props.size,
-    };
-  }
-
-  /**
-   * Create interval for animation duration (1500ms)
-   * Update state only at the end of every interval
-   * (end of animation loop) if props changed before end of animation
-   */
-  componentDidMount() {
-    this.interval = window.setInterval(() => {
-      const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;
-      const { status: currentStatus, size: currentSize } = this.state;
-
-      if (currentStatus !== targetStatus) {
-        this.setState({ status: targetStatus }, () => {
-          if (onAnimationCompleted) {
-            this.timeout = window.setTimeout(() => {
-              onAnimationCompleted(targetStatus);
-            }, ANIMATION_DURATION_IN_MS);
-          }
-        });
-      }
-
-      if (currentSize !== targetSize) {
-        this.setState({ size: targetSize });
-      }
-    }, ANIMATION_DURATION_IN_MS);
-  }
-
-  /**
-   * Only trigger render if comopnent's state got
-   * updated from interval callback
-   */
-  shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {
-    const isSameStatus = nextProps.status === nextState.status;
-    const isSameSize = nextProps.size === nextState.size;
-
-    return isSameStatus && isSameSize;
-  }
-
-  // Clear interval before destroying component
-  componentWillUnmount() {
-    window.clearInterval(this.interval);
-    window.clearTimeout(this.timeout);
-  }
-
-  render() {
-    const { className, 'data-testid': dataTestId } = this.props;
-    const { size, status } = this.state;
-    const classes = classNames(`process process-${size}`, className, {
-      [`process-danger`]: status === Status.FAILED,
-      [`process-stopped`]: status === Status.HIDDEN,
-      [`process-success`]: status === Status.SUCCEEDED,
-    });
-
-    return (
-      <span className={classes} data-testid={dataTestId}>
-        <span className="process-icon-container">
-          <span className="process-icon-horizontal" />
-          <span className="process-icon-vertical" />
-        </span>
-        <svg xmlns="http://www.w3.org/2000/svg">
-          <circle className="process-circle" cx="50%" cy="50%" r={radius[size]} fillOpacity="0.0" />
-        </svg>
-      </span>
-    );
-  }
-}