@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/date-picker/date-input.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import Input from '../input/input';
+
+import {DatePopupBaseProps, dateType, Field} from './consts';
+import styles from './date-picker.css';
+
+export interface UpdateInputConfig {
+  active: boolean
+  text: string | null
+}
+
+export interface DateInputProps extends DatePopupBaseProps, UpdateInputConfig {
+  divider: boolean
+  name: Field
+  hoverDate: Date | null
+  date: Date | null | undefined
+  time?: string | null | undefined
+  onInput: (value: string, name: Field) => void
+  onActivate: () => void
+  onConfirm: () => void
+}
+
+export default class DateInput extends React.PureComponent<DateInputProps> {
+  static propTypes = {
+    active: PropTypes.bool,
+    divider: PropTypes.bool,
+    name: PropTypes.string,
+    text: PropTypes.string,
+    hoverDate: dateType,
+    date: dateType,
+    time: PropTypes.string,
+    displayFormat: PropTypes.func,
+    hidden: PropTypes.bool,
+    translations: PropTypes.object,
+    fromPlaceholder: PropTypes.string,
+    toPlaceholder: PropTypes.string,
+    timePlaceholder: PropTypes.string,
+    onInput: PropTypes.func,
+    onActivate: PropTypes.func,
+    onConfirm: PropTypes.func,
+    onClear: PropTypes.func,
+    locale: PropTypes.object
+  };
+
+  static defaultProps = {
+    fromPlaceholder: null,
+    toPlaceholder: null,
+    timePlaceholder: null,
+    translations: {
+      addFirstDate: 'Add first date',
+      addSecondDate: 'Add second date',
+      addTime: 'Add time',
+      selectName: 'Select %name%'
+    }
+  };
+
+  componentDidUpdate(prevProps: DateInputProps) {
+    const {hidden, text, active} = this.props;
+    if (!hidden && prevProps.hidden || text !== prevProps.text || active !== prevProps.active) {
+      this.updateInput({text, active});
+    }
+  }
+
+  input?: HTMLInputElement | null;
+  inputRef = (el: HTMLInputElement | null) => {
+    this.input = el;
+    this.updateInput(this.props);
+  };
+
+  updateInput({text, active}: UpdateInputConfig) {
+    const el = this.input;
+    if (!el) {
+      return;
+    }
+
+    if (active) {
+      el.focus();
+      if (!text) {
+        el.select();
+      }
+    } else {
+      el.blur();
+    }
+  }
+
+  handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    this.props.onInput(e.currentTarget.value, e.currentTarget.dataset.name as Field);
+
+  handleKeyDown = (e: React.KeyboardEvent) => e.key === 'Enter' && this.props.onConfirm();
+
+  render() {
+    const {
+      active, divider, text,
+      time, name, hoverDate,
+      date, displayFormat, translations,
+      onActivate, onClear,
+      fromPlaceholder, toPlaceholder, timePlaceholder, locale
+    } = this.props;
+
+    let displayText = '';
+    if (active && hoverDate) {
+      displayText = displayFormat(hoverDate, locale);
+    } else if (active && text != null) {
+      displayText = text;
+    } else if (date) {
+      displayText = displayFormat(date, locale);
+    } else if (name === 'time') {
+      displayText = time || '';
+    }
+
+    const placeholder = (() => {
+      switch (name) {
+        case 'from':
+          return fromPlaceholder || translations.addFirstDate;
+        case 'to':
+          return toPlaceholder || translations.addSecondDate;
+        case 'time':
+          return timePlaceholder || translations.addTime;
+        default:
+          return translations.selectName.replace('%name%', name);
+      }
+    })();
+
+    const classes = classNames(
+      styles.filter,
+      styles[`${name}Input`],
+      divider && styles[`${name}InputWithDivider`],
+      'ring-js-shortcuts'
+    );
+
+    return (
+      <Input
+        autoComplete="off"
+        borderless
+        data-name={name}
+        inputRef={this.inputRef}
+        className={classes}
+        value={displayText}
+        onChange={this.handleChange}
+        onFocus={onActivate}
+        onKeyDown={this.handleKeyDown}
+        onClear={onClear}
+        placeholder={placeholder}
+      />
+    );
+  }
+}

package/components/date-picker/date-picker.examples.tsx

@@ -0,0 +1,346 @@
+import React, {Component} from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import DatePicker from './date-picker';
+import {DatePickerChange} from './consts';
+
+export default {
+  title: 'Components/Date Picker',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes:
+      'Allows picking a date or a date range. Uses [date-fns](https://date-fns.org) under the hood.',
+
+    hermione: {
+      actions: [
+        {type: 'click', selector: '[data-test-ring-dropdown-anchor]'},
+        {
+          type: 'capture',
+          name: 'datePickerPopup',
+          selector: ['[data-test~=ring-dropdown]', '[data-test~=ring-popup]']
+        }
+      ]
+    }
+  }
+};
+
+export const singleDate = () => {
+  class DatePickerExample extends Component {
+    state = {date: '01.01.18'};
+
+    setDate = (date: Date | null | undefined) => {
+      this.setState({date});
+    };
+
+    render() {
+      return (
+        <div>
+          <DatePicker date={this.state.date} onChange={this.setDate}/>
+        </div>
+      );
+    }
+  }
+
+  return <DatePickerExample/>;
+};
+
+singleDate.storyName = 'single date';
+
+export const singleDateAndTime = () => {
+  class DatePickerExample extends Component {
+    state = {
+      date: '8 January 2020, 9:45'
+    };
+
+    setDate = (date: Date | null | undefined) => {
+      this.setState({date});
+    };
+
+    render() {
+      return (
+        <div>
+          <DatePicker
+            date={this.state.date}
+            onChange={this.setDate}
+            withTime
+            clear
+          />
+        </div>
+      );
+    }
+  }
+
+  return <DatePickerExample/>;
+};
+
+singleDateAndTime.parameters = {
+  hermione: {skip: true}
+};
+
+singleDateAndTime.storyName = 'single date and time';
+
+export const range = () => {
+  class DatePickerExample extends Component {
+    state = {
+      from: '1 January 2018',
+      to: '15 February 2018'
+    };
+
+    setRange = ({from, to}: DatePickerChange) => {
+      this.setState({from, to});
+    };
+
+    render() {
+      return (
+        <div>
+          <DatePicker from={this.state.from} to={this.state.to} onChange={this.setRange} range/>
+        </div>
+      );
+    }
+  }
+  return <DatePickerExample/>;
+};
+
+range.storyName = 'range';
+
+export const clearable = () => {
+  class DatePickerExample extends Component {
+    state = {date: '01.01.18'};
+
+    setDate = (date: Date | null | undefined) => {
+      this.setState({date});
+    };
+
+    render() {
+      return (
+        <div>
+          <DatePicker date={this.state.date} onChange={this.setDate} clear/>
+        </div>
+      );
+    }
+  }
+
+  return <DatePickerExample/>;
+};
+
+clearable.storyName = 'clearable';
+
+export const singleWithMinMax = () => {
+  class DatePickerExample extends Component {
+    state = {date: '01.02.18'};
+
+    setDate = (date: Date | null | undefined) => {
+      this.setState({date});
+    };
+
+    render() {
+      return (
+        <div>
+          <DatePicker
+            date={this.state.date}
+            onChange={this.setDate}
+            clear
+            minDate="25 January 2018"
+            maxDate="5 February 2018"
+          />
+        </div>
+      );
+    }
+  }
+
+  return <DatePickerExample/>;
+};
+
+singleWithMinMax.storyName = 'single with min-max dates';
+
+export const singleWithMin = () => {
+  class DatePickerExample extends Component {
+    state = {date: '01.02.18'};
+
+    setDate = (date: Date | null | undefined) => {
+      this.setState({date});
+    };
+
+    render() {
+      return (
+        <div>
+          <DatePicker
+            date={this.state.date}
+            onChange={this.setDate}
+            clear
+            minDate="25 January 2018"
+          />
+        </div>
+      );
+    }
+  }
+
+  return <DatePickerExample/>;
+};
+
+singleWithMin.storyName = 'single with min date';
+
+export const singleWithMax = () => {
+  class DatePickerExample extends Component {
+    state = {date: '01.02.18'};
+
+    setDate = (date: Date | null | undefined) => {
+      this.setState({date});
+    };
+
+    render() {
+      return (
+        <div>
+          <DatePicker
+            date={this.state.date}
+            onChange={this.setDate}
+            clear
+            maxDate="5 February 2018"
+          />
+        </div>
+      );
+    }
+  }
+
+  return <DatePickerExample/>;
+};
+
+singleWithMax.storyName = 'single with max date';
+
+export const rangeWithMinMax = () => {
+  class DatePickerExample extends Component {
+    state = {
+      from: '27 January 2018',
+      to: '4 February 2018'
+    };
+
+    setRange = ({from, to}: DatePickerChange) => {
+      this.setState({from, to});
+    };
+
+    render() {
+      return (
+        <div>
+          <DatePicker
+            from={this.state.from}
+            to={this.state.to}
+            onChange={this.setRange}
+            clear
+            minDate="25 January 2018"
+            maxDate="5 February 2018"
+            range
+          />
+        </div>
+      );
+    }
+  }
+
+  return <DatePickerExample/>;
+};
+
+rangeWithMinMax.storyName = 'range with min-max dates';
+
+export const rangeWithMin = () => {
+  class DatePickerExample extends Component {
+    state = {
+      from: '27 January 2018',
+      to: '4 February 2018'
+    };
+
+    setRange = ({from, to}: DatePickerChange) => {
+      this.setState({from, to});
+    };
+
+    render() {
+      return (
+        <div>
+          <DatePicker
+            from={this.state.from}
+            to={this.state.to}
+            onChange={this.setRange}
+            clear
+            minDate="25 January 2018"
+            range
+          />
+        </div>
+      );
+    }
+  }
+
+  return <DatePickerExample/>;
+};
+
+rangeWithMin.storyName = 'range with min date';
+
+export const rangeWithMax = () => {
+  class DatePickerExample extends Component {
+    state = {
+      from: '27 January 2018',
+      to: '4 February 2018'
+    };
+
+    setRange = ({from, to}: DatePickerChange) => {
+      this.setState({from, to});
+    };
+
+    render() {
+      return (
+        <div>
+          <DatePicker
+            from={this.state.from}
+            to={this.state.to}
+            onChange={this.setRange}
+            clear
+            maxDate="5 February 2018"
+            range
+          />
+        </div>
+      );
+    }
+  }
+
+  return <DatePickerExample/>;
+};
+
+rangeWithMax.storyName = 'range with max date';
+
+export const rangeWithCustomPlaceholders = () => {
+  class DatePickerExample extends Component {
+    state = {
+      from: undefined,
+      to: undefined
+    };
+
+    setRange = ({from, to}: DatePickerChange) => {
+      this.setState({from, to});
+    };
+
+    render() {
+      return (
+        <div>
+          <DatePicker
+            from={this.state.from}
+            to={this.state.to}
+            onChange={this.setRange}
+            fromPlaceholder="From"
+            toPlaceholder="To"
+            rangePlaceholder="Set range"
+            clear
+            range
+          />
+        </div>
+      );
+    }
+  }
+
+  return <DatePickerExample/>;
+};
+
+rangeWithCustomPlaceholders.storyName = 'range with customized placeholders';
+
+rangeWithCustomPlaceholders.parameters = {
+  hermione: {skip: true}
+};
+

package/components/date-picker/date-picker.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import {mount, shallow, render} from 'enzyme';
+
+import DatePicker, {DatePickerAttrs} from './date-picker';
+import styles from './date-picker.css';
+
+describe('Date Picker', () => {
+  const shallowDatePicker = (params?: DatePickerAttrs) => shallow(<DatePicker {...params}/>);
+  const mountDatePicker = (params?: DatePickerAttrs) => mount(<DatePicker {...params}/>);
+  const renderDatePicker = (params?: DatePickerAttrs) => render(<DatePicker {...params}/>);
+
+  it('should create component', () => {
+    mountDatePicker().should.have.type(DatePicker);
+  });
+
+  it('should render a div', () => {
+    shallowDatePicker().should.have.tagName('div');
+  });
+
+  it('should use passed className', () => {
+    shallowDatePicker({className: 'test-class'}).should.have.className('test-class');
+  });
+
+  it('should parse and display passed date', () => {
+    renderDatePicker({date: '01.11.16'}).should.have.text('1 Nov 2016');
+  });
+
+  it('should display a placeholder when date unspecified or invalid',
+    () => {
+      renderDatePicker({
+        datePlaceholder: 'set date pls',
+        date: 'hbkj'
+      }).should.have.text('set date pls');
+      renderDatePicker({datePlaceholder: 'set date pls'}).should.have.text('set date pls');
+    }
+  );
+
+  it('should parse and display passed date and time', () => {
+    renderDatePicker({
+      withTime: true,
+      date: '01.11.16, 09:45'
+    }).should.have.text('1 Nov 2016, 09:45');
+  });
+
+  it('should display a placeholder when date unspecified or invalid (in case of withTime=true)',
+    () => {
+      renderDatePicker({
+        dateTimePlaceholder: 'set date & time',
+        withTime: true,
+        date: 'hbkj'
+      }).should.have.text('set date & time');
+      renderDatePicker({
+        dateTimePlaceholder: 'set date & time',
+        withTime: true,
+        date: ''
+      }).should.have.text('set date & time');
+    }
+  );
+
+  it('should accept a Date instance', () => {
+    renderDatePicker({date: new Date(0)}).should.have.text('1 Jan 1970');
+  });
+
+  it('should render a popup on button click', () => {
+    const picker = mountDatePicker();
+    picker.simulate('click');
+    document.body.should.contain(`.${styles.datePopup}`);
+  });
+
+  it('should display in the popup the component passed through its render prop', () => {
+    function customComponent() {
+      return (
+        <button
+          className="btn-today"
+          type="button"
+        >
+          {'Today'}
+        </button>
+      );
+    }
+
+    const picker = mountDatePicker({
+      renderAfterCalendar: customComponent
+    });
+    picker.simulate('click');
+
+    const today = document.body.querySelector('.btn-today');
+    should.exist(today);
+    today?.should.have.text('Today');
+  });
+});