@elastic/eui 12.2.0 → 12.4.0

package/src/components/toast/global_toast_list.tsx

@@ -1,267 +0,0 @@
-import React, { Component, ReactChild } from 'react';
-import classNames from 'classnames';
-
-import { CommonProps } from '../common';
-import { Timer } from '../../services/time';
-import { EuiGlobalToastListItem } from './global_toast_list_item';
-import { EuiToast, EuiToastProps } from './toast';
-
-export const TOAST_FADE_OUT_MS = 250;
-
-export interface Toast extends EuiToastProps {
-  id: string;
-  text?: ReactChild;
-  toastLifeTimeMs?: number;
-}
-
-export interface EuiGlobalToastListProps extends CommonProps {
-  toasts: Toast[];
-  dismissToast: (this: EuiGlobalToastList, toast: Toast) => void;
-  toastLifeTimeMs: number;
-}
-
-interface State {
-  toastIdToDismissedMap: {
-    [toastId: string]: boolean;
-  };
-}
-
-export class EuiGlobalToastList extends Component<
-  EuiGlobalToastListProps,
-  State
-> {
-  state: State = {
-    toastIdToDismissedMap: {},
-  };
-
-  dismissTimeoutIds: number[] = [];
-  toastIdToTimerMap: { [toastId: string]: Timer } = {};
-
-  isScrollingToBottom = false;
-  isScrolledToBottom = true;
-  isUserInteracting = false;
-
-  // See [Return Value](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame#Return_value)
-  // for information on initial value of 0
-  isScrollingAnimationFrame = 0;
-  startScrollingAnimationFrame = 0;
-
-  listElement: Element | null = null;
-
-  static defaultProps = {
-    toasts: [],
-  };
-
-  startScrollingToBottom() {
-    this.isScrollingToBottom = true;
-
-    const scrollToBottom = () => {
-      // Although we cancel the requestAnimationFrame in componentWillUnmount,
-      // it's possible for this.listElement to become null in the meantime
-      if (!this.listElement) {
-        return;
-      }
-
-      const position = this.listElement.scrollTop;
-      const destination =
-        this.listElement.scrollHeight - this.listElement.clientHeight;
-      const distanceToDestination = destination - position;
-
-      if (distanceToDestination < 5) {
-        this.listElement.scrollTop = destination;
-        this.isScrollingToBottom = false;
-        this.isScrolledToBottom = true;
-        return;
-      }
-
-      this.listElement.scrollTop = position + distanceToDestination * 0.25;
-
-      if (this.isScrollingToBottom) {
-        this.isScrollingAnimationFrame = window.requestAnimationFrame(
-          scrollToBottom
-        );
-      }
-    };
-
-    this.startScrollingAnimationFrame = window.requestAnimationFrame(
-      scrollToBottom
-    );
-  }
-
-  onMouseEnter = () => {
-    // Stop scrolling to bottom if we're in mid-scroll, because the user wants to interact with
-    // the list.
-    this.isScrollingToBottom = false;
-    this.isUserInteracting = true;
-
-    // Don't let toasts dismiss themselves while the user is interacting with them.
-    for (const toastId in this.toastIdToTimerMap) {
-      if (this.toastIdToTimerMap.hasOwnProperty(toastId)) {
-        const timer = this.toastIdToTimerMap[toastId];
-        timer.pause();
-      }
-    }
-  };
-
-  onMouseLeave = () => {
-    this.isUserInteracting = false;
-    for (const toastId in this.toastIdToTimerMap) {
-      if (this.toastIdToTimerMap.hasOwnProperty(toastId)) {
-        const timer = this.toastIdToTimerMap[toastId];
-        timer.resume();
-      }
-    }
-  };
-
-  onScroll = () => {
-    if (this.listElement) {
-      this.isScrolledToBottom =
-        this.listElement.scrollHeight - this.listElement.scrollTop ===
-        this.listElement.clientHeight;
-    }
-  };
-
-  scheduleAllToastsForDismissal = () => {
-    this.props.toasts.forEach(toast => {
-      if (!this.toastIdToTimerMap[toast.id]) {
-        this.scheduleToastForDismissal(toast);
-      }
-    });
-  };
-
-  scheduleToastForDismissal = (toast: Toast) => {
-    // Start fading the toast out once its lifetime elapses.
-    this.toastIdToTimerMap[toast.id] = new Timer(
-      this.dismissToast.bind(this, toast),
-      toast.toastLifeTimeMs != null
-        ? toast.toastLifeTimeMs
-        : this.props.toastLifeTimeMs
-    );
-  };
-
-  dismissToast = (toast: Toast) => {
-    // Remove the toast after it's done fading out.
-    this.dismissTimeoutIds.push(
-      window.setTimeout(() => {
-        // Because this is wrapped in a setTimeout, and because React does not guarantee when
-        // state updates happen, it is possible to double-dismiss a toast
-        // including by double-clicking the "x" button on the toast
-        // so, first check to make sure we haven't already dismissed this toast
-        if (this.toastIdToTimerMap.hasOwnProperty(toast.id)) {
-          this.props.dismissToast.apply(this, [toast]);
-          this.toastIdToTimerMap[toast.id].clear();
-          delete this.toastIdToTimerMap[toast.id];
-
-          this.setState(prevState => {
-            const toastIdToDismissedMap = {
-              ...prevState.toastIdToDismissedMap,
-            };
-            delete toastIdToDismissedMap[toast.id];
-
-            return {
-              toastIdToDismissedMap,
-            };
-          });
-        }
-      }, TOAST_FADE_OUT_MS)
-    );
-
-    this.setState(prevState => {
-      const toastIdToDismissedMap = {
-        ...prevState.toastIdToDismissedMap,
-        [toast.id]: true,
-      };
-
-      return {
-        toastIdToDismissedMap,
-      };
-    });
-  };
-
-  componentDidMount() {
-    if (this.listElement) {
-      this.listElement.addEventListener('scroll', this.onScroll);
-      this.listElement.addEventListener('mouseenter', this.onMouseEnter);
-      this.listElement.addEventListener('mouseleave', this.onMouseLeave);
-    }
-    this.scheduleAllToastsForDismissal();
-  }
-
-  componentDidUpdate(prevProps: EuiGlobalToastListProps) {
-    this.scheduleAllToastsForDismissal();
-
-    if (!this.isUserInteracting) {
-      // If the user has scrolled up the toast list then we don't want to annoy them by scrolling
-      // all the way back to the bottom.
-      if (this.isScrolledToBottom) {
-        if (prevProps.toasts.length < this.props.toasts.length) {
-          this.startScrollingToBottom();
-        }
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.isScrollingAnimationFrame !== 0) {
-      window.cancelAnimationFrame(this.isScrollingAnimationFrame);
-    }
-    if (this.startScrollingAnimationFrame !== 0) {
-      window.cancelAnimationFrame(this.startScrollingAnimationFrame);
-    }
-    if (this.listElement) {
-      this.listElement.removeEventListener('scroll', this.onScroll);
-      this.listElement.removeEventListener('mouseenter', this.onMouseEnter);
-      this.listElement.removeEventListener('mouseleave', this.onMouseLeave);
-    }
-    this.dismissTimeoutIds.forEach(clearTimeout);
-    for (const toastId in this.toastIdToTimerMap) {
-      if (this.toastIdToTimerMap.hasOwnProperty(toastId)) {
-        const timer = this.toastIdToTimerMap[toastId];
-        timer.clear();
-      }
-    }
-  }
-
-  render() {
-    const {
-      className,
-      toasts,
-      dismissToast,
-      toastLifeTimeMs,
-      ...rest
-    } = this.props;
-
-    const renderedToasts = toasts.map(toast => {
-      const { text, toastLifeTimeMs, ...rest } = toast;
-
-      return (
-        <EuiGlobalToastListItem
-          key={toast.id}
-          isDismissed={this.state.toastIdToDismissedMap[toast.id]}>
-          <EuiToast
-            onClose={this.dismissToast.bind(this, toast)}
-            onFocus={this.onMouseEnter}
-            onBlur={this.onMouseLeave}
-            {...rest}>
-            {text}
-          </EuiToast>
-        </EuiGlobalToastListItem>
-      );
-    });
-
-    const classes = classNames('euiGlobalToastList', className);
-
-    return (
-      <div
-        aria-live="polite"
-        role="region"
-        ref={element => {
-          this.listElement = element;
-        }}
-        className={classes}
-        {...rest}>
-        {renderedToasts}
-      </div>
-    );
-  }
-}

package/src/components/toast/global_toast_list_item.test.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-
-import { EuiGlobalToastListItem } from './global_toast_list_item';
-
-describe('EuiGlobalToastListItem', () => {
-  test('is rendered', () => {
-    const component = render(
-      <EuiGlobalToastListItem>
-        <div>Hi</div>
-      </EuiGlobalToastListItem>
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-});

package/src/components/toast/global_toast_list_item.tsx

@@ -1,28 +0,0 @@
-import { cloneElement, FunctionComponent, ReactElement } from 'react';
-import classNames from 'classnames';
-import { CommonProps } from '../common';
-
-export interface EuiGlobalToastListItemProps {
-  isDismissed?: boolean;
-  children?: ReactElement;
-}
-
-export const EuiGlobalToastListItem: FunctionComponent<
-  CommonProps & EuiGlobalToastListItemProps
-> = ({ children, isDismissed }) => {
-  if (!children) {
-    return null;
-  }
-  const classes = classNames(
-    'euiGlobalToastListItem',
-    children.props.className,
-    {
-      'euiGlobalToastListItem-isDismissed': isDismissed,
-    }
-  );
-
-  return cloneElement(children, {
-    ...children.props,
-    ...{ className: classes },
-  });
-};

package/src/components/toast/index.ts

@@ -1,8 +0,0 @@
-export { EuiToast } from './toast';
-
-export {
-  EuiGlobalToastList,
-  Toast as EuiGlobalToastListToast,
-} from './global_toast_list';
-
-export { EuiGlobalToastListItem } from './global_toast_list_item';

package/src/components/toast/toast.test.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { render, mount } from 'enzyme';
-import { findTestSubject, requiredProps } from '../../test';
-
-import { COLORS, EuiToast } from './toast';
-
-describe('EuiToast', () => {
-  test('is rendered', () => {
-    const component = render(
-      <EuiToast {...requiredProps} title="test title">
-        <p>Hi</p>
-      </EuiToast>
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
-  describe('Props', () => {
-    describe('title', () => {
-      test('is rendered', () => {
-        const component = <EuiToast title="toast title" />;
-        expect(mount(component)).toMatchSnapshot();
-      });
-    });
-
-    describe('color', () => {
-      COLORS.forEach(color => {
-        test(`${color} is rendered`, () => {
-          const component = <EuiToast color={color} title="test title" />;
-          expect(mount(component)).toMatchSnapshot();
-        });
-      });
-    });
-
-    describe('iconType', () => {
-      test('is rendered', () => {
-        const component = <EuiToast iconType="user" title="test title" />;
-        expect(mount(component)).toMatchSnapshot();
-      });
-    });
-
-    describe('onClose', () => {
-      test('is called when the close button is clicked', () => {
-        const onCloseHandler = jest.fn();
-
-        const component = mount(
-          <EuiToast onClose={onCloseHandler} title="test title" />
-        );
-        const closeButton = findTestSubject(component, 'toastCloseButton');
-        closeButton.simulate('click');
-
-        expect(onCloseHandler).toBeCalledTimes(1);
-      });
-    });
-  });
-});

package/src/components/toast/toast.tsx

@@ -1,125 +0,0 @@
-import React, {
-  FunctionComponent,
-  HTMLAttributes,
-  ReactElement,
-  ReactNode,
-} from 'react';
-import classNames from 'classnames';
-
-import { CommonProps, keysOf, Omit } from '../common';
-import { EuiScreenReaderOnly } from '../accessibility';
-import { EuiI18n } from '../i18n';
-
-import { IconType, EuiIcon } from '../icon';
-
-import { EuiText } from '../text';
-
-type ToastColor = 'primary' | 'success' | 'warning' | 'danger';
-
-const colorToClassNameMap: { [color in ToastColor]: string } = {
-  primary: 'euiToast--primary',
-  success: 'euiToast--success',
-  warning: 'euiToast--warning',
-  danger: 'euiToast--danger',
-};
-
-export const COLORS = keysOf(colorToClassNameMap);
-
-export interface EuiToastProps
-  extends CommonProps,
-    Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  title?: ReactNode;
-  color?: ToastColor;
-  iconType?: IconType;
-  onClose?: () => void;
-}
-
-export const EuiToast: FunctionComponent<EuiToastProps> = ({
-  title,
-  color,
-  iconType,
-  onClose,
-  children,
-  className,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiToast',
-    color ? colorToClassNameMap[color] : null,
-    className
-  );
-  const headerClasses = classNames('euiToastHeader', {
-    'euiToastHeader--withBody': children,
-  });
-
-  let headerIcon: ReactElement;
-
-  if (iconType) {
-    headerIcon = (
-      <EuiIcon
-        className="euiToastHeader__icon"
-        type={iconType}
-        size="m"
-        aria-hidden="true"
-      />
-    );
-  }
-
-  let closeButton;
-
-  if (onClose) {
-    closeButton = (
-      <EuiI18n token="euiToast.dismissToast" default="Dismiss toast">
-        {(dismissToast: string) => (
-          <button
-            type="button"
-            className="euiToast__closeButton"
-            aria-label={dismissToast}
-            onClick={onClose}
-            data-test-subj="toastCloseButton">
-            <EuiIcon type="cross" size="m" aria-hidden="true" />
-          </button>
-        )}
-      </EuiI18n>
-    );
-  }
-
-  let optionalBody;
-
-  if (children) {
-    optionalBody = (
-      <EuiText size="s" className="euiToastBody">
-        {children}
-      </EuiText>
-    );
-  }
-
-  return (
-    <div className={classes} {...rest}>
-      <EuiScreenReaderOnly>
-        <p>
-          <EuiI18n
-            token="euiToast.newNotification"
-            default="A new notification appears"
-          />
-        </p>
-      </EuiScreenReaderOnly>
-
-      <EuiI18n token="euiToast.notification" default="Notification">
-        {(notification: string) => (
-          <div
-            className={headerClasses}
-            aria-label={notification}
-            data-test-subj="euiToastHeader">
-            {headerIcon}
-
-            <span className="euiToastHeader__title">{title}</span>
-          </div>
-        )}
-      </EuiI18n>
-
-      {closeButton}
-      {optionalBody}
-    </div>
-  );
-};

package/src/components/toggle/__snapshots__/toggle.test.tsx.snap

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiToggle is rendered 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiToggle testClass1 testClass2"
-  data-test-subj="test subject string"
->
-  <input
-    aria-label="Is toggle on?"
-    class="euiToggle__input"
-    type="checkbox"
-  />
-</div>
-`;

package/src/components/toggle/index.ts

@@ -1 +0,0 @@
-export { EuiToggle, ToggleType, TYPES as TOGGLE_TYPES } from './toggle';

package/src/components/toggle/toggle.test.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-
-import { EuiToggle } from './toggle';
-
-describe('EuiToggle', () => {
-  test('is rendered', () => {
-    const component = render(
-      <EuiToggle label="Is toggle on?" {...requiredProps} />
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-});

package/src/components/toggle/toggle.tsx

@@ -1,87 +0,0 @@
-import React, { ChangeEventHandler, HTMLAttributes } from 'react';
-import classNames from 'classnames';
-import { CommonProps } from '../common';
-
-const typeToInputTypeMap = {
-  single: 'radio',
-  multi: 'checkbox',
-};
-
-export const TYPES = Object.keys(typeToInputTypeMap);
-
-export type ToggleType = keyof typeof typeToInputTypeMap;
-
-export type EuiToggleProps = HTMLAttributes<HTMLDivElement> &
-  CommonProps & {
-    id?: string;
-    /**
-     * Initial state of the toggle
-     */
-    checked?: boolean;
-    /**
-     * For handling the onChange event of the input
-     */
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    isDisabled?: boolean;
-    name?: string;
-    /**
-     * Determines the input type based on multiple or single item(s)
-     */
-    type?: ToggleType;
-    /**
-     * What would typically be the input's label. Required for accessibility.
-     */
-    label: string;
-    /**
-     * Additional classNames for the input itself
-     */
-    inputClassName?: string;
-    value?: string | number;
-  };
-
-export const EuiToggle: React.SFC<EuiToggleProps> = ({
-  id,
-  className,
-  checked,
-  children,
-  inputClassName,
-  isDisabled,
-  label,
-  name,
-  onChange,
-  title,
-  type,
-  value,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiToggle',
-    { 'euiToggle--checked': checked },
-    className
-  );
-
-  const inputClasses = classNames('euiToggle__input', inputClassName);
-
-  return (
-    <div className={classes} {...rest}>
-      <input
-        id={id}
-        className={inputClasses}
-        aria-label={label}
-        checked={checked}
-        disabled={isDisabled}
-        name={name}
-        onChange={onChange}
-        title={title}
-        type={type ? typeToInputTypeMap[type] : undefined}
-        value={value}
-      />
-
-      {children}
-    </div>
-  );
-};
-
-EuiToggle.defaultProps = {
-  type: 'multi',
-};