@elastic/eui 12.2.0 → 12.4.0

package/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js

@@ -1,205 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import moment from 'moment';
-import dateMath from '@elastic/datemath';
-
-import { EuiButton, EuiButtonIcon } from '../../../button';
-import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
-import { EuiTitle } from '../../../title';
-import { EuiSpacer } from '../../../spacer';
-import { EuiFormRow, EuiSelect, EuiFieldNumber } from '../../../form';
-import { EuiToolTip } from '../../../tool_tip';
-import { EuiHorizontalRule } from '../../../horizontal_rule';
-
-import { timeUnits } from '../time_units';
-
-const LAST = 'last';
-const NEXT = 'next';
-
-const timeTenseOptions = [
-  { value: LAST, text: 'Last' },
-  { value: NEXT, text: 'Next' },
-];
-const timeUnitsOptions = Object.keys(timeUnits).map(key => {
-  return { value: key, text: `${timeUnits[key]}s` };
-});
-
-export class EuiQuickSelect extends Component {
-  constructor(props) {
-    super(props);
-
-    const { timeTense, timeValue, timeUnits } = this.props.prevQuickSelect;
-    this.state = {
-      timeTense: timeTense ? timeTense : LAST,
-      timeValue: timeValue ? timeValue : 15,
-      timeUnits: timeUnits ? timeUnits : 'm',
-    };
-  }
-
-  onTimeTenseChange = evt => {
-    this.setState({
-      timeTense: evt.target.value,
-    });
-  };
-
-  onTimeValueChange = evt => {
-    const sanitizedValue = parseInt(evt.target.value, 10);
-    this.setState({
-      timeValue: isNaN(sanitizedValue) ? '' : sanitizedValue,
-    });
-  };
-
-  onTimeUnitsChange = evt => {
-    this.setState({
-      timeUnits: evt.target.value,
-    });
-  };
-
-  applyQuickSelect = () => {
-    const { timeTense, timeValue, timeUnits } = this.state;
-
-    if (timeTense === NEXT) {
-      this.props.applyTime({
-        start: 'now',
-        end: `now+${timeValue}${timeUnits}`,
-        quickSelect: { ...this.state },
-      });
-      return;
-    }
-
-    this.props.applyTime({
-      start: `now-${timeValue}${timeUnits}`,
-      end: 'now',
-      quickSelect: { ...this.state },
-    });
-  };
-
-  getBounds = () => {
-    const startMoment = dateMath.parse(this.props.start);
-    const endMoment = dateMath.parse(this.props.end, { roundUp: true });
-    return {
-      min:
-        startMoment && startMoment.isValid()
-          ? startMoment
-          : moment().subtract(15, 'minute'),
-      max: endMoment && endMoment.isValid() ? endMoment : moment(),
-    };
-  };
-
-  stepForward = () => {
-    const { min, max } = this.getBounds();
-    const diff = max.diff(min);
-    this.props.applyTime({
-      start: moment(max)
-        .add(1, 'ms')
-        .toISOString(),
-      end: moment(max)
-        .add(diff + 1, 'ms')
-        .toISOString(),
-      keepPopoverOpen: true,
-    });
-  };
-
-  stepBackward = () => {
-    const { min, max } = this.getBounds();
-    const diff = max.diff(min);
-    this.props.applyTime({
-      start: moment(min)
-        .subtract(diff + 1, 'ms')
-        .toISOString(),
-      end: moment(min)
-        .subtract(1, 'ms')
-        .toISOString(),
-      keepPopoverOpen: true,
-    });
-  };
-
-  render() {
-    return (
-      <Fragment>
-        <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
-          <EuiFlexItem>
-            <EuiTitle size="xxxs">
-              <span>Quick select</span>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiToolTip content="Previous time window">
-              <EuiButtonIcon
-                aria-label="Previous time window"
-                iconType="arrowLeft"
-                onClick={this.stepBackward}
-              />
-            </EuiToolTip>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiToolTip content="Next time window">
-              <EuiButtonIcon
-                aria-label="Next time window"
-                iconType="arrowRight"
-                onClick={this.stepForward}
-              />
-            </EuiToolTip>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer size="s" />
-        <EuiFlexGroup gutterSize="s" responsive={false}>
-          <EuiFlexItem>
-            <EuiFormRow compressed>
-              <EuiSelect
-                aria-label="Quick time tense"
-                value={this.state.timeTense}
-                options={timeTenseOptions}
-                onChange={this.onTimeTenseChange}
-              />
-            </EuiFormRow>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFormRow compressed>
-              <EuiFieldNumber
-                aria-label="Quick time value"
-                value={this.state.timeValue}
-                onChange={this.onTimeValueChange}
-              />
-            </EuiFormRow>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFormRow compressed>
-              <EuiSelect
-                aria-label="Quick time units"
-                value={this.state.timeUnits}
-                options={timeUnitsOptions}
-                onChange={this.onTimeUnitsChange}
-              />
-            </EuiFormRow>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiFormRow>
-              <EuiButton
-                className="euiQuickSelect__applyButton"
-                size="s"
-                onClick={this.applyQuickSelect}
-                disabled={
-                  this.state.timeValue === '' || this.state.timeValue <= 0
-                }>
-                Apply
-              </EuiButton>
-            </EuiFormRow>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiHorizontalRule margin="s" />
-      </Fragment>
-    );
-  }
-}
-
-EuiQuickSelect.propTypes = {
-  applyTime: PropTypes.func.isRequired,
-  start: PropTypes.string.isRequired,
-  end: PropTypes.string.isRequired,
-  prevQuickSelect: PropTypes.object,
-};
-
-EuiQuickSelect.defaultProps = {
-  prevQuickSelect: {},
-};

package/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { EuiQuickSelect } from './quick_select';
-
-const noop = () => {};
-const defaultProps = {
-  applyTime: noop,
-  start: 'now-15m',
-  end: 'now',
-};
-describe('EuiQuickSelect', () => {
-  test('is rendered', () => {
-    const component = shallow(<EuiQuickSelect {...defaultProps} />);
-
-    expect(component).toMatchSnapshot();
-  });
-
-  test('prevQuickSelect', () => {
-    const component = shallow(
-      <EuiQuickSelect
-        {...defaultProps}
-        prevQuickSelect={{
-          timeTense: 'Next',
-          timeValue: 32,
-          timeUnits: 'M',
-        }}
-      />
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-});

package/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -1,156 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import {
-  commonlyUsedRangeShape,
-  recentlyUsedRangeShape,
-  quickSelectPanelShape,
-} from '../types';
-
-import { EuiButtonEmpty } from '../../../button';
-import { EuiIcon } from '../../../icon';
-import { EuiPopover } from '../../../popover';
-import { EuiTitle } from '../../../title';
-import { EuiSpacer } from '../../../spacer';
-import { EuiHorizontalRule } from '../../../horizontal_rule';
-import { EuiText } from '../../../text';
-
-import { EuiQuickSelect } from './quick_select';
-import { EuiCommonlyUsedTimeRanges } from './commonly_used_time_ranges';
-import { EuiRecentlyUsed } from './recently_used';
-import { EuiRefreshInterval } from './refresh_interval';
-
-export class EuiQuickSelectPopover extends Component {
-  state = {
-    isOpen: false,
-  };
-
-  closePopover = () => {
-    this.setState({ isOpen: false });
-  };
-
-  togglePopover = () => {
-    this.setState(prevState => ({
-      isOpen: !prevState.isOpen,
-    }));
-  };
-
-  applyTime = ({ start, end, quickSelect, keepPopoverOpen = false }) => {
-    this.props.applyTime({
-      start,
-      end,
-    });
-    if (quickSelect) {
-      this.setState({ prevQuickSelect: quickSelect });
-    }
-    if (!keepPopoverOpen) {
-      this.closePopover();
-    }
-  };
-
-  renderDateTimeSections = () => {
-    if (this.props.isAutoRefreshOnly) {
-      return null;
-    }
-
-    return (
-      <Fragment>
-        <EuiQuickSelect
-          applyTime={this.applyTime}
-          start={this.props.start}
-          end={this.props.end}
-          prevQuickSelect={this.state.prevQuickSelect}
-        />
-        <EuiCommonlyUsedTimeRanges
-          applyTime={this.applyTime}
-          commonlyUsedRanges={this.props.commonlyUsedRanges}
-        />
-        <EuiRecentlyUsed
-          applyTime={this.applyTime}
-          commonlyUsedRanges={this.props.commonlyUsedRanges}
-          dateFormat={this.props.dateFormat}
-          recentlyUsedRanges={this.props.recentlyUsedRanges}
-        />
-        {this.renderCustomQuickSelectPanels()}
-      </Fragment>
-    );
-  };
-
-  renderCustomQuickSelectPanels = () => {
-    if (!this.props.customQuickSelectPanels) {
-      return null;
-    }
-
-    return this.props.customQuickSelectPanels.map(({ title, content }) => {
-      return (
-        <Fragment key={title}>
-          <EuiTitle size="xxxs">
-            <span>{title}</span>
-          </EuiTitle>
-          <EuiSpacer size="s" />
-          <EuiText size="s" className="euiQuickSelectPopover__section">
-            {React.cloneElement(content, { applyTime: this.applyTime })}
-          </EuiText>
-          <EuiHorizontalRule margin="s" />
-        </Fragment>
-      );
-    });
-  };
-
-  render() {
-    const quickSelectButton = (
-      <EuiButtonEmpty
-        className="euiFormControlLayout__prepend"
-        textProps={{ className: 'euiQuickSelectPopover__buttonText' }}
-        onClick={this.togglePopover}
-        aria-label="Date quick select"
-        size="xs"
-        iconType="arrowDown"
-        iconSide="right"
-        data-test-subj="superDatePickerToggleQuickMenuButton">
-        <EuiIcon
-          type={
-            !this.props.isAutoRefreshOnly && this.props.isPaused
-              ? 'calendar'
-              : 'clock'
-          }
-        />
-      </EuiButtonEmpty>
-    );
-
-    return (
-      <EuiPopover
-        id="QuickSelectPopover"
-        button={quickSelectButton}
-        isOpen={this.state.isOpen}
-        closePopover={this.closePopover}
-        anchorPosition="downLeft"
-        ownFocus>
-        <div
-          className="euiQuickSelectPopover__content"
-          data-test-subj="superDatePickerQuickMenu">
-          {this.renderDateTimeSections()}
-          <EuiRefreshInterval
-            applyRefreshInterval={this.props.applyRefreshInterval}
-            isPaused={this.props.isPaused}
-            refreshInterval={this.props.refreshInterval}
-          />
-        </div>
-      </EuiPopover>
-    );
-  }
-}
-
-EuiQuickSelectPopover.propTypes = {
-  applyTime: PropTypes.func.isRequired,
-  start: PropTypes.string.isRequired,
-  end: PropTypes.string.isRequired,
-  applyRefreshInterval: PropTypes.func,
-  isPaused: PropTypes.bool.isRequired,
-  refreshInterval: PropTypes.number.isRequired,
-  commonlyUsedRanges: PropTypes.arrayOf(commonlyUsedRangeShape).isRequired,
-  dateFormat: PropTypes.string.isRequired,
-  recentlyUsedRanges: PropTypes.arrayOf(recentlyUsedRangeShape).isRequired,
-  isAutoRefreshOnly: PropTypes.bool.isRequired,
-  isAutoRefreshOnly: PropTypes.bool.isRequired,
-  customQuickSelectPanels: PropTypes.arrayOf(quickSelectPanelShape),
-};

package/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { EuiQuickSelectPopover } from './quick_select_popover';
-
-const noop = () => {};
-
-const defaultProps = {
-  applyTime: noop,
-  applyRefreshInterval: noop,
-  start: 'now-15m',
-  end: 'now',
-  isPaused: true,
-  refreshInterval: 0,
-  commonlyUsedRanges: [{ start: 'now/d', end: 'now/d', label: 'Today' }],
-  dateFormat: 'MMM D, YYYY @ HH:mm:ss.SSS',
-  recentlyUsedRanges: [{ start: 'now/d', end: 'now/d', label: 'Today' }],
-  isAutoRefreshOnly: false,
-};
-
-describe('EuiQuickSelectPopover', () => {
-  test('is rendered', () => {
-    const component = shallow(<EuiQuickSelectPopover {...defaultProps} />);
-
-    expect(component).toMatchSnapshot();
-  });
-
-  test('isAutoRefreshOnly', () => {
-    const component = shallow(
-      <EuiQuickSelectPopover {...defaultProps} isAutoRefreshOnly={true} />
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-});

package/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.js

@@ -1,61 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Fragment } from 'react';
-import { commonlyUsedRangeShape, recentlyUsedRangeShape } from '../types';
-import { prettyDuration } from '../pretty_duration';
-
-import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
-import { EuiTitle } from '../../../title';
-import { EuiSpacer } from '../../../spacer';
-import { EuiLink } from '../../../link';
-import { EuiText } from '../../../text';
-import { EuiHorizontalRule } from '../../../horizontal_rule';
-
-export function EuiRecentlyUsed({
-  applyTime,
-  commonlyUsedRanges,
-  dateFormat,
-  recentlyUsedRanges,
-}) {
-  if (recentlyUsedRanges.length === 0) {
-    return null;
-  }
-
-  const links = recentlyUsedRanges.map(({ start, end }) => {
-    const applyRecentlyUsed = () => {
-      applyTime({ start, end });
-    };
-    return (
-      <EuiFlexItem grow={false} key={`${start}-${end}`}>
-        <EuiLink onClick={applyRecentlyUsed}>
-          {prettyDuration(start, end, commonlyUsedRanges, dateFormat)}
-        </EuiLink>
-      </EuiFlexItem>
-    );
-  });
-
-  return (
-    <Fragment>
-      <EuiTitle size="xxxs">
-        <span>Recently used date ranges</span>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <EuiText size="s" className="euiQuickSelectPopover__section">
-        <EuiFlexGroup gutterSize="s" direction="column">
-          {links}
-        </EuiFlexGroup>
-      </EuiText>
-      <EuiHorizontalRule margin="s" />
-    </Fragment>
-  );
-}
-
-EuiRecentlyUsed.propTypes = {
-  applyTime: PropTypes.func.isRequired,
-  commonlyUsedRanges: PropTypes.arrayOf(commonlyUsedRangeShape).isRequired,
-  dateFormat: PropTypes.string.isRequired,
-  recentlyUsedRanges: PropTypes.arrayOf(recentlyUsedRangeShape),
-};
-
-EuiRecentlyUsed.defaultProps = {
-  recentlyUsedRanges: [],
-};

package/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js

@@ -1,168 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import { timeUnits, timeUnitsPlural } from '../time_units';
-
-import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
-import { EuiTitle } from '../../../title';
-import { EuiSpacer } from '../../../spacer';
-import { EuiFormRow, EuiSelect, EuiFieldNumber } from '../../../form';
-import { EuiButton } from '../../../button';
-
-const refreshUnitsOptions = Object.keys(timeUnits)
-  .filter(timeUnit => {
-    return timeUnit === 'h' || timeUnit === 'm' || timeUnit === 's';
-  })
-  .map(timeUnit => {
-    return { value: timeUnit, text: timeUnitsPlural[timeUnit] };
-  });
-
-const MILLISECONDS_IN_SECOND = 1000;
-const MILLISECONDS_IN_MINUTE = MILLISECONDS_IN_SECOND * 60;
-const MILLISECONDS_IN_HOUR = MILLISECONDS_IN_MINUTE * 60;
-
-function fromMilliseconds(milliseconds) {
-  function round(value) {
-    return parseFloat(value.toFixed(2));
-  }
-  if (milliseconds > MILLISECONDS_IN_HOUR) {
-    return {
-      units: 'h',
-      value: round(milliseconds / MILLISECONDS_IN_HOUR),
-    };
-  }
-
-  if (milliseconds > MILLISECONDS_IN_MINUTE) {
-    return {
-      units: 'm',
-      value: round(milliseconds / MILLISECONDS_IN_MINUTE),
-    };
-  }
-
-  return {
-    units: 's',
-    value: round(milliseconds / MILLISECONDS_IN_SECOND),
-  };
-}
-
-function toMilliseconds(units, value) {
-  switch (units) {
-    case 'h':
-      return Math.round(value * MILLISECONDS_IN_HOUR);
-    case 'm':
-      return Math.round(value * MILLISECONDS_IN_MINUTE);
-    case 's':
-    default:
-      return Math.round(value * MILLISECONDS_IN_SECOND);
-  }
-}
-
-export class EuiRefreshInterval extends Component {
-  constructor(props) {
-    super(props);
-
-    const { value, units } = fromMilliseconds(props.refreshInterval);
-    this.state = {
-      value,
-      units,
-    };
-  }
-
-  onValueChange = evt => {
-    const sanitizedValue = parseFloat(evt.target.value);
-    this.setState(
-      {
-        value: isNaN(sanitizedValue) ? '' : sanitizedValue,
-      },
-      this.applyRefreshInterval
-    );
-  };
-
-  onUnitsChange = evt => {
-    this.setState(
-      {
-        units: evt.target.value,
-      },
-      this.applyRefreshInterval
-    );
-  };
-
-  applyRefreshInterval = () => {
-    if (this.state.value === '') {
-      return;
-    }
-
-    const valueInMilliSeconds = toMilliseconds(
-      this.state.units,
-      this.state.value
-    );
-
-    this.props.applyRefreshInterval({
-      refreshInterval: valueInMilliSeconds,
-      isPaused: valueInMilliSeconds <= 0 ? true : this.props.isPaused,
-    });
-  };
-
-  toogleRefresh = () => {
-    this.props.applyRefreshInterval({
-      refreshInterval: toMilliseconds(this.state.units, this.state.value),
-      isPaused: !this.props.isPaused,
-    });
-  };
-
-  render() {
-    if (!this.props.applyRefreshInterval) {
-      return null;
-    }
-
-    return (
-      <Fragment>
-        <EuiTitle size="xxxs">
-          <span>Refresh every</span>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiFlexGroup gutterSize="s" responsive={false}>
-          <EuiFlexItem>
-            <EuiFormRow compressed>
-              <EuiFieldNumber
-                value={this.state.value}
-                onChange={this.onValueChange}
-                aria-label="Refresh interval value"
-                data-test-subj="superDatePickerRefreshIntervalInput"
-              />
-            </EuiFormRow>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFormRow compressed>
-              <EuiSelect
-                aria-label="Refresh interval units"
-                value={this.state.units}
-                options={refreshUnitsOptions}
-                onChange={this.onUnitsChange}
-                data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
-              />
-            </EuiFormRow>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiFormRow>
-              <EuiButton
-                className="euiRefreshInterval__startButton"
-                iconType={this.props.isPaused ? 'play' : 'stop'}
-                size="s"
-                onClick={this.toogleRefresh}
-                disabled={this.state.value === '' || this.state.value <= 0}
-                data-test-subj="superDatePickerToggleRefreshButton">
-                {this.props.isPaused ? 'Start' : 'Stop'}
-              </EuiButton>
-            </EuiFormRow>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </Fragment>
-    );
-  }
-}
-
-EuiRefreshInterval.propTypes = {
-  applyRefreshInterval: PropTypes.func,
-  isPaused: PropTypes.bool.isRequired,
-  refreshInterval: PropTypes.number.isRequired,
-};

package/src/components/date_picker/super_date_picker/relative_options.test.ts

@@ -1,18 +0,0 @@
-import { relativeUnitsFromLargestToSmallest } from './relative_options';
-
-describe('relativeUnitsFromLargestToSmallest', () => {
-  test('relativeUnitsFromLargestToSmallest length', () => {
-    expect(relativeUnitsFromLargestToSmallest.length).toBe(7);
-  });
-  test('relativeUnitsFromLargestToSmallest order', () => {
-    expect(relativeUnitsFromLargestToSmallest).toEqual([
-      'y',
-      'M',
-      'w',
-      'd',
-      'h',
-      'm',
-      's',
-    ]);
-  });
-});