@transferwise/components 0.0.0-experimental-3fa5a2b → 0.0.0-experimental-47ae02a

package/src/processIndicator/ProcessIndicator.js

@@ -1,117 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-
-import { Status, Size } from '../common';
-
-const radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };
-export const ANIMATION_DURATION_IN_MS = 1500;
-
-class ProcessIndicator extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      status: props.status,
-      size: props.size,
-    };
-    this.interval = null;
-    this.timeout = null;
-  }
-
-  /**
-   * 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 = setInterval(() => {
-      const statusFromState = this.state.status;
-      const sizeFromState = this.state.size;
-
-      const statusFromProps = this.props.status;
-      const sizeFromProps = this.props.size;
-
-      if (statusFromState !== statusFromProps) {
-        this.setState({ status: statusFromProps }, this.runCallBack(statusFromProps));
-      }
-
-      if (sizeFromState !== sizeFromProps) {
-        this.setState({ size: sizeFromProps });
-      }
-    }, ANIMATION_DURATION_IN_MS);
-  }
-
-  /**
-   * Only trigger render if comopnent's state got
-   * updated from interval callback
-   *
-   * @param nextProps
-   * @param nextState
-   */
-  shouldComponentUpdate(nextProps, nextState) {
-    const isSameStatus = nextProps.status === nextState.status;
-    const isSameSize = nextProps.size === nextState.size;
-
-    return isSameStatus && isSameSize;
-  }
-
-  // Clear interval before destroying component
-  componentWillUnmount() {
-    clearInterval(this.interval);
-    clearTimeout(this.timeout);
-  }
-
-  runCallBack = (statusFromProps) => {
-    const { onAnimationCompleted } = this.props;
-    if (onAnimationCompleted) {
-      this.timeouts = setTimeout(() => {
-        onAnimationCompleted(statusFromProps);
-      }, ANIMATION_DURATION_IN_MS);
-    }
-  };
-
-  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[this.state.size]}
-            fillOpacity="0.0"
-          />
-        </svg>
-      </span>
-    );
-  }
-}
-ProcessIndicator.propTypes = {
-  status: PropTypes.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
-  size: PropTypes.oneOf(['xxs', 'xs', 'sm', 'xl']),
-  onAnimationCompleted: PropTypes.func,
-  className: PropTypes.string,
-  'data-testid': PropTypes.string,
-};
-
-ProcessIndicator.defaultProps = {
-  status: Status.PROCESSING,
-  size: Size.SMALL,
-  onAnimationCompleted: null,
-  className: undefined,
-  'data-testid': null,
-};
-
-export default ProcessIndicator;

package/src/processIndicator/ProcessIndicator.spec.js

@@ -1,101 +0,0 @@
-import { mount } from 'enzyme';
-
-import { Status, Size } from '../common';
-
-import ProcessIndicator from '.';
-
-describe('processIndicator', () => {
-  let wrapper;
-  const ANIMATION_DURATION = 1500;
-  const props = {
-    status: Status.PROCESSING,
-    size: Size.Small,
-    onAnimationCompleted: jest.fn(),
-  };
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-
-    wrapper = mount(<ProcessIndicator {...props} />);
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-    jest.clearAllMocks();
-    jest.clearAllTimers();
-  });
-
-  it('has right classes when rendered with provided props', () => {
-    expect(wrapper.find('.process')).toHaveLength(1);
-    expect(wrapper.find('.process-sm')).toHaveLength(1);
-
-    expect(wrapper.find('.process-lg')).toHaveLength(0);
-    expect(wrapper.find('.process-xs')).toHaveLength(0);
-    expect(wrapper.find('.process-danger')).toHaveLength(0);
-    expect(wrapper.find('.process-stopped')).toHaveLength(0);
-    expect(wrapper.find('.process-success')).toHaveLength(0);
-  });
-
-  it('updates component state with delay on props change to create smooth transition between CSS animations', () => {
-    expect(wrapper.state().status).toBe('processing');
-
-    wrapper.setProps({ status: 'succeeded' });
-    expect(wrapper.props().status).toBe('succeeded');
-    expect(wrapper.state().status).toBe('processing');
-
-    jest.advanceTimersByTime(ANIMATION_DURATION);
-    wrapper.update();
-
-    expect(wrapper.state().status).toBe('succeeded');
-  });
-
-  it('updates size classes with delay', () => {
-    expect(wrapper.find('.process-sm')).toHaveLength(1);
-    wrapper.setProps({ size: 'xl' });
-    expect(wrapper.find('.process-xl')).toHaveLength(0);
-
-    jest.advanceTimersByTime(ANIMATION_DURATION);
-    wrapper.update();
-
-    expect(wrapper.find('.process-xs')).toHaveLength(0);
-    expect(wrapper.find('.process-sm')).toHaveLength(0);
-    expect(wrapper.find('.process-xl')).toHaveLength(1);
-  });
-
-  it('properly updates status classes with delay', () => {
-    wrapper.setProps({ status: 'succeeded' });
-    expect(wrapper.find('.process-success')).toHaveLength(0);
-    jest.advanceTimersByTime(ANIMATION_DURATION);
-    wrapper.update();
-    expect(wrapper.find('.process-success')).toHaveLength(1);
-    expect(wrapper.find('.process-danger')).toHaveLength(0);
-    expect(wrapper.find('.process-stopped')).toHaveLength(0);
-
-    wrapper.setProps({ status: 'failed' });
-    expect(wrapper.find('.process-danger')).toHaveLength(0);
-    jest.advanceTimersByTime(ANIMATION_DURATION);
-    wrapper.update();
-    expect(wrapper.find('.process-success')).toHaveLength(0);
-    expect(wrapper.find('.process-danger')).toHaveLength(1);
-    expect(wrapper.find('.process-stopped')).toHaveLength(0);
-
-    wrapper.setProps({ status: 'hidden' });
-    expect(wrapper.find('.process-stopped')).toHaveLength(0);
-    jest.advanceTimersByTime(ANIMATION_DURATION);
-    wrapper.update();
-    expect(wrapper.find('.process-success')).toHaveLength(0);
-    expect(wrapper.find('.process-danger')).toHaveLength(0);
-    expect(wrapper.find('.process-stopped')).toHaveLength(1);
-  });
-
-  it('calls onAnimationCompleted with Delay', () => {
-    expect(props.onAnimationCompleted).not.toHaveBeenCalled();
-    wrapper.setProps({ status: Status.FAILED });
-    expect(props.onAnimationCompleted).not.toHaveBeenCalled();
-    jest.advanceTimersByTime(ANIMATION_DURATION * 2);
-    expect(props.onAnimationCompleted).toHaveBeenCalledWith(Status.FAILED);
-    wrapper.setProps({ status: Status.SUCCEEDED });
-    jest.advanceTimersByTime(ANIMATION_DURATION * 2);
-    expect(props.onAnimationCompleted).toHaveBeenCalledWith(Status.SUCCEEDED);
-  });
-});