@jetbrains/ring-ui 4.2.7 → 4.2.10

package/dist/date-picker/month-names.js

@@ -0,0 +1,100 @@
+import { a as _extends, _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+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.js';
+import MonthSlider from './month-slider.js';
+import { dateType, YEAR, MIDDLE_DAY, yearScrollSpeed, HALF } from './consts.js';
+import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import 'date-fns/addYears';
+import 'date-fns/subYears';
+import 'date-fns/add';
+
+class MonthName extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "handleClick", () => {
+      const end = endOfMonth(this.props.month);
+      this.props.onScrollChange((+this.props.month + +end) * HALF);
+    });
+  }
+
+  render() {
+    const {
+      month,
+      locale
+    } = this.props;
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classNames(modules_0c7b7d96.monthName, {
+        [modules_0c7b7d96.today]: isThisMonth(month)
+      }),
+      onClick: this.handleClick
+    }, format(month, 'LLL', {
+      locale
+    }));
+  }
+
+}
+
+MonthName.propTypes = {
+  month: dateType,
+  onScrollChange: PropTypes.func,
+  locale: PropTypes.string
+};
+function MonthNames(props) {
+  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, startOfYear(scrollDate), yearScrollSpeed);
+  let top = 0;
+  let bottom = 0;
+
+  if (props.currentRange) {
+    [top, bottom] = props.currentRange.map(date => Math.floor(pxToDate.x(date)));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: modules_0c7b7d96.monthNames
+  }, months.map(month => /*#__PURE__*/React.createElement(MonthName, {
+    key: +month,
+    month: month,
+    onScrollChange: props.onScrollChange,
+    locale: locale
+  })), props.currentRange && /*#__PURE__*/React.createElement("div", {
+    className: modules_0c7b7d96.range,
+    style: {
+      top: top - 1,
+      height: bottom + 1 - (top - 1)
+    }
+  }), /*#__PURE__*/React.createElement(MonthSlider, _extends({}, props, {
+    pxToDate: pxToDate
+  })));
+}
+MonthNames.propTypes = {
+  scrollDate: dateType,
+  onScrollChange: PropTypes.func,
+  currentRange: PropTypes.arrayOf(dateType),
+  locale: PropTypes.string
+};
+
+export { MonthNames as default };

package/dist/date-picker/month-slider.js

@@ -0,0 +1,84 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import addYears from 'date-fns/addYears';
+import startOfDay from 'date-fns/startOfDay';
+import subYears from 'date-fns/subYears';
+import linearFunction from '../global/linear-function.js';
+import units, { dateType, yearScrollSpeed } from './consts.js';
+import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import 'date-fns/add';
+
+const COVERYEARS = 3;
+class MonthSlider extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      dragging: false
+    });
+
+    _defineProperty(this, "onMouseDown", () => {
+      this.setState({
+        dragging: true
+      });
+    });
+
+    _defineProperty(this, "onMouseUp", () => {
+      this.setState({
+        dragging: false
+      });
+    });
+
+    _defineProperty(this, "onMouseMove", e => {
+      this.props.onScroll(linearFunction(0, this.props.scrollDate, yearScrollSpeed).y(e.movementY));
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.dragging && !prevState.dragging) {
+      window.addEventListener('mousemove', this.onMouseMove);
+      window.addEventListener('mouseup', this.onMouseUp);
+    } else if (!this.state.dragging && prevState.dragging) {
+      window.removeEventListener('mousemove', this.onMouseMove);
+      window.removeEventListener('mouseup', this.onMouseUp);
+    }
+  }
+
+  render() {
+    let year = subYears(startOfDay(this.props.scrollDate), 1);
+    const years = [year];
+
+    for (let i = 0; i <= COVERYEARS; i++) {
+      year = addYears(year, 1);
+      years.push(year);
+    }
+
+    const classes = classNames(modules_0c7b7d96.monthSlider, {
+      [modules_0c7b7d96.dragging]: this.state.dragging
+    });
+    return /*#__PURE__*/React.createElement("div", null, years.map(date => /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      key: +date,
+      className: classes,
+      style: {
+        top: Math.floor(this.props.pxToDate.x(date) - units.cellSize)
+      },
+      onMouseDown: this.onMouseDown
+    })));
+  }
+
+}
+
+_defineProperty(MonthSlider, "propTypes", {
+  scrollDate: dateType,
+  onScroll: PropTypes.func,
+  pxToDate: PropTypes.shape({
+    x: PropTypes.func,
+    y: PropTypes.func
+  })
+});
+
+export { MonthSlider as default };

package/dist/date-picker/month.js

@@ -0,0 +1,55 @@
+import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import addDays from 'date-fns/addDays';
+import endOfMonth from 'date-fns/endOfMonth';
+import format from 'date-fns/format';
+import getDay from 'date-fns/getDay';
+import setDay from 'date-fns/setDay';
+import PropTypes from 'prop-types';
+import Day from './day.js';
+import { dateType, weekdays, WEEK } from './consts.js';
+import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'classnames';
+import 'date-fns/getDate';
+import 'date-fns/isAfter';
+import 'date-fns/isBefore';
+import 'date-fns/isSameDay';
+import 'date-fns/isToday';
+import 'date-fns/startOfDay';
+import 'date-fns/add';
+
+function Month(props) {
+  const start = props.month;
+  const end = endOfMonth(start);
+  const {
+    locale
+  } = props; // pad with empty cells starting from last friday
+
+  const weekday = getDay(start);
+  let day = setDay(start, weekday >= weekdays.FR ? weekdays.FR : weekdays.FR - WEEK);
+  const days = [];
+
+  while (day < end) {
+    days.push(day);
+    day = addDays(day, 1);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: modules_0c7b7d96.month
+  }, /*#__PURE__*/React.createElement("span", {
+    className: modules_0c7b7d96.monthTitle
+  }, format(props.month, 'LLLL', {
+    locale
+  })), days.map(date => /*#__PURE__*/React.createElement(Day, _extends({}, props, {
+    day: date,
+    empty: date < start,
+    key: +date
+  }))));
+}
+Month.propTypes = {
+  month: dateType,
+  locale: PropTypes.string
+};
+
+export { Month as default };

package/dist/date-picker/months.js

@@ -0,0 +1,122 @@
+import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import PropTypes from 'prop-types';
+import addMonths from 'date-fns/addMonths';
+import getDay from 'date-fns/getDay';
+import getDaysInMonth from 'date-fns/getDaysInMonth';
+import set from 'date-fns/set';
+import startOfHour from 'date-fns/startOfHour';
+import startOfMonth from 'date-fns/startOfMonth';
+import subMonths from 'date-fns/subMonths';
+import endOfMonth from 'date-fns/endOfMonth';
+import scheduleRAF from '../global/schedule-raf.js';
+import linearFunction from '../global/linear-function.js';
+import Month from './month.js';
+import MonthNames from './month-names.js';
+import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import units, { dateType, DOUBLE, HALF, WEEK, weekdays } from './consts.js';
+import 'date-fns/addDays';
+import 'date-fns/format';
+import 'date-fns/setDay';
+import './day.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'classnames';
+import 'date-fns/getDate';
+import 'date-fns/isAfter';
+import 'date-fns/isBefore';
+import 'date-fns/isSameDay';
+import 'date-fns/isToday';
+import 'date-fns/startOfDay';
+import 'date-fns/isThisMonth';
+import 'date-fns/startOfYear';
+import './month-slider.js';
+import 'date-fns/addYears';
+import 'date-fns/subYears';
+import 'date-fns/add';
+
+const {
+  unit,
+  cellSize,
+  calHeight
+} = units;
+const FridayToSunday = WEEK + weekdays.SU - weekdays.FR;
+const FIVELINES = 31;
+const TALLMONTH = 6;
+const SHORTMONTH = 5;
+const PADDING = 2;
+const MONTHSBACK = 2;
+
+function monthHeight(date) {
+  const monthStart = startOfMonth(date);
+  const daysSinceLastFriday = (getDay(monthStart) + FridayToSunday) % WEEK;
+  const monthLines = daysSinceLastFriday + getDaysInMonth(monthStart) > FIVELINES ? TALLMONTH : SHORTMONTH;
+  return monthLines * cellSize + unit * PADDING;
+} // in milliseconds per pixel
+
+
+function scrollSpeed(date) {
+  const monthStart = startOfMonth(date);
+  const monthEnd = endOfMonth(date);
+  return (monthEnd - monthStart) / monthHeight(monthStart);
+}
+
+const scrollSchedule = scheduleRAF();
+let dy = 0;
+function Months(props) {
+  const {
+    scrollDate
+  } = props; // prevent switching from april to march because of daylight saving time
+
+  const monthStart = startOfHour(set(scrollDate, {
+    date: 1,
+    hours: 1
+  }));
+  let month = subMonths(monthStart, MONTHSBACK);
+  const months = [month];
+
+  for (let i = 0; i < MONTHSBACK * DOUBLE; i++) {
+    month = addMonths(month, 1);
+    months.push(month);
+  }
+
+  const currentSpeed = scrollSpeed(scrollDate);
+  const pxToDate = linearFunction(0, scrollDate, currentSpeed);
+  const offset = pxToDate.x(monthStart); // is a negative number
+
+  const bottomOffset = monthHeight(scrollDate) + offset;
+  return /*#__PURE__*/React.createElement("div", {
+    className: modules_0c7b7d96.months,
+    onWheel: function handleWheel(e) {
+      e.preventDefault();
+      dy += e.deltaY;
+      scrollSchedule(() => {
+        let date; // adjust scroll speed to prevent glitches
+
+        if (dy < offset) {
+          date = pxToDate.y(offset) + (dy - offset) * scrollSpeed(months[1]);
+        } else if (dy > bottomOffset) {
+          date = pxToDate.y(bottomOffset) + (dy - bottomOffset) * scrollSpeed(months[MONTHSBACK + 1]);
+        } else {
+          date = pxToDate.y(dy);
+        }
+
+        props.onScroll(date);
+        dy = 0;
+      });
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      top: Math.floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset)
+    },
+    className: modules_0c7b7d96.days
+  }, months.map(date => /*#__PURE__*/React.createElement(Month, _extends({}, props, {
+    month: date,
+    key: +date
+  })))), /*#__PURE__*/React.createElement(MonthNames, props));
+}
+Months.propTypes = {
+  onScroll: PropTypes.func,
+  scrollDate: dateType
+};
+
+export { Months as default };

package/dist/date-picker/weekdays.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import classNames from 'classnames';
+import getDay from 'date-fns/getDay';
+import format from 'date-fns/format';
+import setDay from 'date-fns/setDay';
+import startOfDay from 'date-fns/startOfDay';
+import PropTypes from 'prop-types';
+import { weekdays } from './consts.js';
+import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import 'date-fns/add';
+
+function Weekdays(props) {
+  const days = Object.keys(weekdays).map(key => startOfDay(setDay(new Date(), weekdays[key])));
+  const {
+    locale
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: modules_0c7b7d96.weekdays
+  }, days.map(day => /*#__PURE__*/React.createElement("span", {
+    className: classNames(modules_0c7b7d96.weekday, {
+      [modules_0c7b7d96.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day))
+    }),
+    key: +day
+  }, format(day, 'EEEEEE', {
+    locale
+  }))));
+}
+Weekdays.propTypes = {
+  locale: PropTypes.string
+};
+
+export { Weekdays as default };

package/dist/date-picker/years.js

@@ -0,0 +1,110 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import addYears from 'date-fns/addYears';
+import getYear from 'date-fns/getYear';
+import format from 'date-fns/format';
+import isSameYear from 'date-fns/isSameYear';
+import isThisYear from 'date-fns/isThisYear';
+import setYear from 'date-fns/setYear';
+import startOfYear from 'date-fns/startOfYear';
+import subYears from 'date-fns/subYears';
+import linearFunction from '../global/linear-function.js';
+import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import units, { dateType, DOUBLE, HALF, yearDuration } from './consts.js';
+import 'date-fns/add';
+
+const {
+  yearHeight,
+  calHeight
+} = units;
+let scrollTO;
+const YEARSBACK = 5;
+const scrollDelay = 100;
+class Years extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      scrollDate: null
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    this.stoppedScrolling = prevState.scrollDate && !this.state.scrollDate;
+  }
+
+  setYear(date) {
+    if (scrollTO) {
+      window.clearTimeout(scrollTO);
+      scrollTO = null;
+    }
+
+    this.setState({
+      scrollDate: null
+    });
+    this.props.onScroll(setYear(this.props.scrollDate, getYear(date)));
+  }
+
+  render() {
+    const {
+      onScrollChange,
+      scrollDate
+    } = this.props;
+    const date = this.state.scrollDate || scrollDate;
+    const yearStart = startOfYear(date);
+    let year = subYears(yearStart, YEARSBACK);
+    const years = [year];
+
+    for (let i = 0; i < YEARSBACK * DOUBLE; i++) {
+      year = addYears(year, 1);
+      years.push(year);
+    }
+
+    const pxToDate = linearFunction(0, years[0], yearDuration / yearHeight);
+
+    const handleWheel = e => {
+      e.preventDefault();
+      const newScrollDate = linearFunction(0, date, yearDuration / yearHeight).y(e.deltaY);
+      this.setState({
+        scrollDate: newScrollDate
+      });
+
+      if (scrollTO) {
+        window.clearTimeout(scrollTO);
+      }
+
+      scrollTO = window.setTimeout(() => this.setYear(newScrollDate), scrollDelay);
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: modules_0c7b7d96.years,
+      onWheel: handleWheel,
+      style: {
+        transition: this.stoppedScrolling ? 'top .2s ease-out 0s' : 'none',
+        top: Math.floor(calHeight * HALF - pxToDate.x(date))
+      }
+    }, years.map(item => /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      key: +item,
+      className: classNames(modules_0c7b7d96.year, {
+        [modules_0c7b7d96.currentYear]: isSameYear(item, date),
+        [modules_0c7b7d96.today]: isThisYear(item)
+      }),
+      onClick: function handleClick() {
+        onScrollChange(setYear(scrollDate, getYear(item)));
+      }
+    }, format(item, 'yyyy'))));
+  }
+
+}
+
+_defineProperty(Years, "propTypes", {
+  scrollDate: dateType,
+  onScroll: PropTypes.func,
+  onScrollChange: PropTypes.func
+});
+
+export { Years as default };