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

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

@@ -0,0 +1,466 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import isSameDay from 'date-fns/isSameDay';
+import startOfDay from 'date-fns/startOfDay';
+import calendarIcon from '@jetbrains/icons/calendar';
+
+import Icon from '../icon/icon';
+import memoize from '../global/memoize';
+
+import DateInput from './date-input';
+import Months from './months';
+import Years from './years';
+import Weekdays from './weekdays';
+import {
+  Dates,
+  DatePickerChange,
+  DatePopupBaseProps, DateSpecificPopupProps,
+  DatePopupState,
+  dateType,
+  parseTime, RangeSpecificPopupProps, TimeSpecificPopupProps,
+  Field,
+  CalendarProps
+} from './consts';
+import styles from './date-picker.css';
+
+const scrollExpDelay = 10;
+
+export type DatePopupProps = DatePopupBaseProps &
+  (DateSpecificPopupProps | TimeSpecificPopupProps | RangeSpecificPopupProps)
+
+export default class DatePopup extends Component<DatePopupProps, DatePopupState> {
+
+  static sameDay(next: Date | number | null, prev: Date | number | null) {
+    if (next && prev) {
+      return isSameDay(next, prev);
+    }
+
+    return next === prev;
+  }
+
+  static propTypes = {
+    className: PropTypes.string,
+    date: dateType,
+    range: PropTypes.bool,
+    withTime: PropTypes.bool,
+    time: PropTypes.string,
+    from: dateType,
+    to: dateType,
+    renderAfterCalendar: PropTypes.func,
+    displayFormat: PropTypes.func,
+    parseDateInput: PropTypes.func,
+    onChange: PropTypes.func,
+    onComplete: PropTypes.func,
+    onClear: PropTypes.func,
+    minDate: dateType,
+    maxDate: dateType,
+    hidden: PropTypes.bool,
+    fromPlaceholder: PropTypes.string,
+    toPlaceholder: PropTypes.string,
+    timePlaceholder: PropTypes.string,
+    locale: PropTypes.object
+  };
+
+  static defaultProps = {
+    onChange() {}
+  };
+
+  constructor(props: DatePopupProps) {
+    super(props);
+    const defaultState = {
+      text: null,
+      hoverDate: null,
+      scrollDate: null
+    };
+    const {range, withTime} = props;
+
+    if (!range) {
+      const parsedDate = this.parse(props.date, 'date');
+      const active = withTime && parsedDate && !props.time ? 'time' : 'date';
+
+      this.state = {...defaultState, active};
+    } else if (props.from && !props.to) {
+      this.state = {...defaultState, active: 'to'};
+    } else {
+      this.state = {...defaultState, active: 'from'};
+    }
+  }
+
+  componentDidMount() {
+    if (this.componentRef.current) {
+      this.componentRef.current.addEventListener('wheel', this.handleWheel, {passive: true});
+    }
+  }
+
+  componentDidUpdate(prevProps: DatePopupBaseProps, prevState: DatePopupState) {
+    if (this.state.active !== prevState.active) {
+      if (this.state.text && prevState.active) {
+        this.confirm(prevState.active);
+      }
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({text: null});
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.componentRef.current) {
+      this.componentRef.current.removeEventListener('wheel', this.handleWheel);
+    }
+  }
+
+  private _scrollDate?: number | null;
+  private _scrollTS?: number | null;
+
+  isInTimeMode = () => !this.props.range && this.props.withTime || false;
+
+  componentRef = React.createRef<HTMLDivElement>();
+
+  handleWheel = (e: WheelEvent) => {
+    e.preventDefault();
+  };
+
+  parse(text: string | null | undefined, type: 'time'): string
+  parse(text: Date | number | string | null | undefined, type?: 'date' | 'from' | 'to'): Date
+  parse(text: Date | number | string | null | undefined, type?: Field) {
+    if (type === 'time') {
+      return parseTime(String(text));
+    }
+    return this.props.parseDateInput(text);
+  }
+
+  select(changes: DatePickerChange) {
+    const {range, withTime} = this.props;
+    const prevActive = this.state.active;
+
+    if (!range && !withTime) {
+      this.setState({
+        text: null,
+        scrollDate: null
+      });
+      this.props.onChange(changes.date);
+      this.props.onComplete();
+    } else if (!range && withTime) {
+      const date = this.parse(this.props.date, 'date');
+      const time = this.parse(this.props.time, 'time');
+      const changeToSubmit = {
+        date: changes.date || date,
+        time: changes.time || time
+      };
+
+      this.setState({
+        active: changes.date ? 'time' : 'date',
+        text: null,
+        scrollDate: null
+      });
+
+      this.props.onChange(changeToSubmit);
+      if (
+        !changes.date && prevActive === 'time' &&
+        changeToSubmit.date && changeToSubmit.time
+      ) {
+        this.props.onComplete();
+      }
+    } else {
+      let {from, to} = {
+        ...this.props,
+        ...changes
+      };
+      from = this.parse(from, 'from');
+      to = this.parse(to, 'to');
+
+      // proceed to setting the end by default
+      let active: Field = 'to';
+      let complete = false;
+
+      // end is before beginning
+      if (from && to && isAfter(startOfDay(from), startOfDay(to))) {
+        // ignore the old end when beginning is changed
+        if (changes.from) {
+          to = null;
+
+          // treat range as reverse when end is changed
+        } else if (changes.to) {
+          to = from;
+          from = changes.to;
+        }
+      } else if (changes.to) {
+        active = 'from';
+        complete = !!from;
+      }
+
+      this.setState({
+        active,
+        hoverDate: null,
+        text: null
+      });
+      this.props.onChange({from, to});
+      if (complete) {
+        this.props.onComplete();
+      }
+    }
+  }
+
+  confirm(name: Field) {
+    const text = this.state.text;
+
+    let result;
+    if (name === 'time') {
+      result = this.parse(text, name);
+      const time = this.parse('time' in this.props ? this.props.time : '', 'time');
+
+      const emptyCase = this.state.active === 'time' ? '00:00' : null;
+      result = result || time || emptyCase;
+    } else {
+      result = this.parse(text, name);
+      if (!this.isValidDate(result)) {
+        result = this.parse(name in this.props ? this.props[name] : '', name);
+      }
+    }
+
+    this.select({
+      [name]: result
+    });
+  }
+
+  isValidDate = (parsedText: Date) => {
+    const minDate = this.parse(this.props.minDate, 'date');
+    const maxDate = this.parse(this.props.maxDate, 'date');
+
+    if (parsedText) {
+      return (!(
+        minDate && isBefore(parsedText, minDate) ||
+        maxDate && isAfter(parsedText, maxDate)
+      ));
+    }
+    return false;
+  };
+
+  scheduleScroll = () => {
+    const current =
+      this.state.scrollDate && this.parse(this.state.scrollDate, 'date') ||
+      this.parse(this.props[this.state.active], 'date') ||
+      new Date();
+    const goal = this._scrollDate;
+    if (!current ||
+      !goal ||
+      DatePopup.sameDay(goal, current)
+    ) {
+      this._scrollDate = null;
+      this._scrollTS = null;
+      return;
+    }
+
+    if (this._scrollTS) {
+      const diff = goal - Number(current);
+      const dt = Date.now() - this._scrollTS;
+      const next = goal - diff * (Math.E ** (-dt / scrollExpDelay));
+      this.setState({scrollDate: next});
+    }
+
+    this._scrollTS = Date.now();
+    window.requestAnimationFrame(this.scheduleScroll);
+  };
+
+  scrollTo = (scrollDate: number) => {
+    this._scrollDate = scrollDate;
+    if (!this._scrollTS) {
+      this.scheduleScroll();
+    }
+  };
+
+  hoverHandler = (hoverDate: Date) => this.setState({hoverDate});
+
+  handleActivate = memoize((name: Field) => () => this.setState({active: name}));
+
+  handleInput = (text: string, name: Field) => {
+    if (name !== 'time') {
+      const parsed = this.parse(text, name);
+      if (this.isValidDate(parsed)) {
+        this.scrollTo(Number(parsed));
+      }
+    }
+    this.setState({
+      text,
+      hoverDate: null
+    });
+  };
+
+  handleConfirm = memoize((name: Field) => () => this.confirm(name));
+
+  selectHandler = (date: Date) => {
+    if (this.isInTimeMode()) {
+      this.setState({
+        active: 'time'
+      }, () => this.select({date}));
+    } else {
+      this.select({[this.state.active]: date});
+    }
+  };
+
+  handleScroll = (scrollDate: number) => this.setState({scrollDate});
+
+  onClear = (e: React.MouseEvent<HTMLButtonElement>) => {
+    let changes;
+
+    if (this.props.range) {
+      changes = {
+        from: null,
+        to: null
+      };
+
+    } else {
+      changes = {
+        date: null
+      };
+    }
+
+    this.select(changes);
+    this.props.onClear?.(e);
+  };
+
+  render() {
+    const {range, hidden, withTime, locale} = this.props;
+    const {from, to, date, time, ...restProps} = this.props;
+    const parsedDate = this.parse(this.props.date, 'date');
+    const parsedTo = this.parse(this.props.to, 'to');
+
+    const names: ('from' | 'to' | 'date')[] = range ? ['from', 'to'] : ['date'];
+    const dates: Dates = names.reduce((obj, key) => {
+      const value = this.props[key];
+      return {
+        ...obj,
+        [key]: this.parse(value, key)
+      };
+    }, {});
+
+    const activeDate = this.state.active !== 'time'
+      ? this.state.hoverDate ||
+        (this.state.text != null ? this.parse(this.state.text, 'date') : null)
+      : this.state.hoverDate || null;
+
+    const currentRange: [Date, Date] | null =
+      range && dates.from && dates.to && [dates.from, dates.to] || null;
+    let activeRange: [Date, Date] | null = null;
+    if (range && activeDate) {
+      switch (this.state.active) {
+        case 'from':
+          if (dates.to && isAfter(startOfDay(activeDate), startOfDay(dates.to))) {
+            activeRange = [activeDate, dates.to];
+          }
+
+          break;
+        case 'to':
+          if (!dates.from) {
+            break;
+          }
+          if (isBefore(startOfDay(activeDate), startOfDay(dates.from))) {
+            activeRange = [activeDate, dates.from];
+          } else {
+            activeRange = [dates.from, activeDate];
+          }
+
+          break;
+        default:
+          break;
+      }
+    }
+
+    const scrollDate = withTime && !range
+      ? this.state.scrollDate || dates.date || new Date()
+      : this.state.scrollDate || dates[this.state.active] || new Date();
+
+    const calendarProps: CalendarProps = {
+      ...restProps,
+      ...dates,
+      scrollDate,
+      activeDate,
+      currentRange,
+      activeRange,
+      onScroll: this.handleScroll,
+      onScrollChange: this.scrollTo
+    };
+
+    const clearable = Boolean(this.props.onClear);
+
+    return (
+      <div
+        className={styles.datePopup}
+        data-test="ring-date-popup"
+        ref={this.componentRef}
+      >
+        <div className={styles.filterWrapper}>
+          <Icon
+            glyph={calendarIcon}
+            className={styles.filterIcon}
+          />
+
+          {names.map(name => {
+            let onClear;
+
+            if (clearable && name !== 'from' && !this.isInTimeMode()) {
+              onClear = this.onClear.bind(this);
+            }
+
+            return (
+              <DateInput
+                {...this.props}
+                {...this.state}
+                divider={name === 'from' && (dates[name] != null || parsedTo != null)}
+                name={name}
+                key={name}
+                date={dates[name]}
+                active={this.state.active === name}
+                hidden={hidden}
+                onActivate={this.handleActivate(name)}
+                onInput={this.handleInput}
+                onConfirm={this.handleConfirm(name)}
+                onClear={onClear}
+                locale={locale}
+              />
+            );
+          })}
+
+          {
+            this.isInTimeMode()
+              ? (
+                <DateInput
+                  {...this.props}
+                  text={this.state.text}
+                  divider={!!parsedDate}
+                  hoverDate={null}
+                  name={'time'}
+                  key={'time'}
+                  date={null}
+                  time={time}
+                  active={this.state.active === 'time'}
+                  hidden={hidden}
+                  onActivate={this.handleActivate('time')}
+                  onInput={this.handleInput}
+                  onConfirm={this.handleConfirm('time')}
+                  onClear={clearable && this.onClear || undefined}
+                  locale={locale}
+                />
+              )
+              : ('')
+          }
+        </div>
+        <Weekdays locale={locale}/>
+        <div
+          className={styles.calendar}
+        >
+          <Months
+            {...calendarProps}
+            onHover={this.hoverHandler}
+            onSelect={this.selectHandler}
+            locale={locale}
+          />
+          <Years {...calendarProps}/>
+        </div>
+
+        {this.props.renderAfterCalendar && this.props.renderAfterCalendar(this.state)}
+      </div>
+    );
+  }
+}

package/components/date-picker/day.tsx

@@ -0,0 +1,129 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import addDays from 'date-fns/addDays';
+import format from 'date-fns/format';
+import getDay from 'date-fns/getDay';
+import getDate from 'date-fns/getDate';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import isSameDay from 'date-fns/isSameDay';
+import isToday from 'date-fns/isToday';
+import startOfDay from 'date-fns/startOfDay';
+
+import {MonthsProps, dateType, weekdays} from './consts';
+import styles from './date-picker.css';
+
+export interface DayProps extends MonthsProps {
+  day: Date
+  empty: boolean
+}
+
+let hoverTO: number | null;
+export default class Day extends Component<DayProps> {
+  static propTypes = {
+    day: dateType,
+    from: dateType,
+    currentRange: PropTypes.arrayOf(dateType),
+    activeRange: PropTypes.arrayOf(dateType),
+    empty: PropTypes.bool,
+    onSelect: PropTypes.func,
+    parseDateInput: PropTypes.func,
+    onHover: PropTypes.func,
+    minDate: dateType,
+    maxDate: dateType
+  };
+
+  handleClick = () => this.props.onSelect(this.props.day);
+
+  handleMouseOver = () => {
+    if (hoverTO) {
+      window.clearTimeout(hoverTO);
+      hoverTO = null;
+    }
+
+    this.props.onHover(this.props.day);
+  };
+
+  handleMouseOut = () => {
+    hoverTO = window.setTimeout(this.props.onHover, 0);
+  };
+
+  isDay = (date: Date) => isSameDay(this.props.day, date);
+
+  is = (name: 'date' | 'from' | 'to' | 'activeDate') => {
+    const value = this.props[name];
+    return value != null && this.isDay(value);
+  };
+
+  inRange = (range: [Date, Date] | null) => range &&
+    isAfter(startOfDay(this.props.day), startOfDay(range[0])) &&
+    isBefore(startOfDay(this.props.day), startOfDay(range[1]));
+
+  isDisabled = (date: Date) => {
+    const min = this.parse(this.props.minDate);
+    const max = this.parse(this.props.maxDate);
+    return (min != null && isBefore(startOfDay(date), startOfDay(min))) ||
+      (max != null && isAfter(startOfDay(date), startOfDay(max)));
+  };
+
+  parse(text: string | null | undefined) {
+    return this.props.parseDateInput(text);
+  }
+
+  render() {
+    const {
+      day,
+      from,
+      currentRange,
+      activeRange,
+      empty
+    } = this.props;
+
+    const reverse = activeRange && activeRange[1] === from;
+
+    function makeSpreadRange(range: [Date, Date] | null): [Date, Date] | null {
+      return range && [range[0], addDays(range[1], 1)];
+    }
+
+    const spreadRange = makeSpreadRange(currentRange);
+    const disabled = this.isDisabled(day);
+    const activeSpreadRange = makeSpreadRange(activeRange); return (
+      // TODO make keyboard navigation actually work
+      <button
+        type="button"
+        className={classNames(
+          styles.day,
+          styles[format(day, 'EEEE')],
+          {
+            [styles.current]: (['date', 'from', 'to'] as const).some(this.is),
+            [styles.active]: !disabled && this.is('activeDate'),
+            [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),
+            [styles.empty]: empty,
+            [styles.from]: (currentRange && this.isDay(currentRange[0]) && !reverse ||
+              activeRange && this.isDay(activeRange[0])),
+            [styles.to]: (currentRange && this.isDay(currentRange[1])) ||
+              activeRange && this.isDay(activeRange[1]),
+            [styles.between]: this.inRange(currentRange),
+            [styles.activeBetween]: !disabled && this.inRange(activeRange),
+            [styles.first]: getDate(day) === 1,
+            [styles.spread]: this.inRange(spreadRange),
+            [styles.activeSpread]: !disabled && this.inRange(activeSpreadRange),
+            [styles.disabled]: disabled
+          },
+        )}
+        onClick={this.handleClick}
+        onMouseOver={this.handleMouseOver}
+        onFocus={this.handleMouseOver}
+        onMouseOut={this.handleMouseOut}
+        onBlur={this.handleMouseOut}
+        disabled={disabled}
+      >
+        {empty || (
+          <span className={classNames({[styles.today]: isToday(day)})}>
+            {format(day, 'd')}</span>
+        )}
+      </button>
+    );
+  }
+}

package/components/date-picker/month-names.tsx

@@ -0,0 +1,111 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import type {Locale} from 'date-fns';
+import endOfMonth from 'date-fns/endOfMonth';
+import format from 'date-fns/format';
+import isThisMonth from 'date-fns/isThisMonth';
+import set from 'date-fns/set';
+import startOfDay from 'date-fns/startOfDay';
+import startOfYear from 'date-fns/startOfYear';
+
+import linearFunction from '../global/linear-function';
+
+import MonthSlider from './month-slider';
+import {HALF, YEAR, MIDDLE_DAY, yearScrollSpeed, dateType, MonthsProps} from './consts';
+import styles from './date-picker.css';
+
+interface MonthNameProps {
+  month: Date
+  onScrollChange: (to: number) => void
+  locale: Locale | undefined
+}
+
+class MonthName extends PureComponent<MonthNameProps> {
+  static propTypes = {
+    month: dateType,
+    onScrollChange: PropTypes.func,
+    locale: PropTypes.string
+  };
+
+  handleClick = () => {
+    const end = endOfMonth(this.props.month);
+    this.props.onScrollChange((+this.props.month + +end) * HALF);
+  };
+
+  render() {
+    const {month, locale} = this.props;
+
+    return (
+      <button
+        type="button"
+        className={classNames(
+          styles.monthName,
+          {
+            [styles.today]: isThisMonth(month)
+          }
+        )}
+        onClick={this.handleClick}
+      >
+        {format(month, 'LLL', {locale})}
+      </button>
+    );
+  }
+}
+
+export default function MonthNames(props: MonthsProps) {
+  const {scrollDate, locale} = props;
+  const months = [];
+  for (let i = 0; i < YEAR; i++) {
+    const middleDay = set(scrollDate, {month: i, date: MIDDLE_DAY});
+    months.push(startOfDay(middleDay));
+  }
+
+  const pxToDate = linearFunction(
+    0,
+    Number(startOfYear(scrollDate)),
+    yearScrollSpeed
+  );
+
+  let top = 0;
+  let bottom = 0;
+  if (props.currentRange) {
+    [top, bottom] = props.currentRange.
+      map(date => Math.floor(pxToDate.x(Number(date))));
+  }
+
+  return (
+    <div className={styles.monthNames}>
+      {months.map(month => (
+        <MonthName
+          key={+month}
+          month={month}
+          onScrollChange={props.onScrollChange}
+          locale={locale}
+        />
+      ))}
+      {props.currentRange &&
+        (
+          <div
+            className={styles.range}
+            style={{
+              top: top - 1,
+              height: (bottom + 1) - (top - 1)
+            }}
+          />
+        )
+      }
+      <MonthSlider
+        {...props}
+        pxToDate={pxToDate}
+      />
+    </div>
+  );
+}
+
+MonthNames.propTypes = {
+  scrollDate: dateType,
+  onScrollChange: PropTypes.func,
+  currentRange: PropTypes.arrayOf(dateType),
+  locale: PropTypes.string
+};