@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/date-picker/day.d.ts

@@ -0,0 +1,30 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+export interface DayProps extends MonthsProps {
+    day: Date;
+    empty: boolean;
+}
+export default class Day extends Component<DayProps> {
+    static propTypes: {
+        day: PropTypes.Requireable<string | number | Date>;
+        from: PropTypes.Requireable<string | number | Date>;
+        currentRange: PropTypes.Requireable<(string | number | Date | null | undefined)[]>;
+        activeRange: PropTypes.Requireable<(string | number | Date | null | undefined)[]>;
+        empty: PropTypes.Requireable<boolean>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        parseDateInput: PropTypes.Requireable<(...args: any[]) => any>;
+        onHover: PropTypes.Requireable<(...args: any[]) => any>;
+        minDate: PropTypes.Requireable<string | number | Date>;
+        maxDate: PropTypes.Requireable<string | number | Date>;
+    };
+    handleClick: () => void;
+    handleMouseOver: () => void;
+    handleMouseOut: () => void;
+    isDay: (date: Date) => boolean;
+    is: (name: 'date' | 'from' | 'to' | 'activeDate') => boolean;
+    inRange: (range: [Date, Date] | null) => boolean | null;
+    isDisabled: (date: Date) => boolean;
+    parse(text: string | null | undefined): Date | null;
+    render(): JSX.Element;
+}

package/components/date-picker/day.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import addDays from 'date-fns/addDays';
@@ -10,112 +10,79 @@ 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 {dateType, weekdays} from './consts';
+import { dateType, weekdays } from './consts';
 import styles from './date-picker.css';
-
 let hoverTO;
 export default class Day extends Component {
-  handleClick = () => this.props.onSelect(this.props.day);
-
-  handleMouseOver = () => {
-    if (hoverTO) {
-      window.clearTimeout(hoverTO);
-      hoverTO = null;
+    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) => isSameDay(this.props.day, date);
+    is = (name) => {
+        const value = this.props[name];
+        return value != null && this.isDay(value);
+    };
+    inRange = (range) => range &&
+        isAfter(startOfDay(this.props.day), startOfDay(range[0])) &&
+        isBefore(startOfDay(this.props.day), startOfDay(range[1]));
+    isDisabled = (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) {
+        return this.props.parseDateInput(text);
     }
-
-    this.props.onHover(this.props.day);
-  };
-
-  handleMouseOut = () => {
-    hoverTO = window.setTimeout(this.props.onHover, 0);
-  };
-
-  isDay = date => isSameDay(this.props.day, date);
-
-  is = name => this.props[name] && this.isDay(this.props[name]);
-
-  inRange = range => range &&
-    isAfter(startOfDay(this.props.day), startOfDay(range[0])) &&
-    isBefore(startOfDay(this.props.day), startOfDay(range[1]));
-
-  isDisabled = date => {
-    const min = this.parse(this.props.minDate);
-    const max = this.parse(this.props.maxDate);
-    return (this.props.minDate && isBefore(startOfDay(date), startOfDay(min))) ||
-      (this.props.maxDate && isAfter(startOfDay(date), startOfDay(max)));
-  };
-
-  parse(text) {
-    return this.props.parseDateInput(text);
-  }
-
-  render() {
-    const {
-      day,
-      from,
-      currentRange,
-      activeRange,
-      empty
-    } = this.props;
-
-    const reverse = activeRange && activeRange[1] === from;
-
-    function makeSpreadRange(range) {
-      return range && [range[0], addDays(range[1], 1)];
+    render() {
+        const { day, from, currentRange, activeRange, empty } = this.props;
+        const reverse = activeRange && activeRange[1] === from;
+        function makeSpreadRange(range) {
+            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'].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>);
     }
-
-    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'].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>
-    );
-  }
 }
-
-Day.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
-};

package/components/date-picker/formats.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

package/components/date-picker/month-names.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+declare function MonthNames(props: MonthsProps): JSX.Element;
+declare namespace MonthNames {
+    var propTypes: {
+        scrollDate: PropTypes.Requireable<string | number | Date>;
+        onScrollChange: PropTypes.Requireable<(...args: any[]) => any>;
+        currentRange: PropTypes.Requireable<(string | number | Date | null | undefined)[]>;
+        locale: PropTypes.Requireable<string>;
+    };
+}
+export default MonthNames;

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

@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import endOfMonth from 'date-fns/endOfMonth';
@@ -7,98 +7,56 @@ 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} from './consts';
+import { HALF, YEAR, MIDDLE_DAY, yearScrollSpeed, dateType } from './consts';
 import styles from './date-picker.css';
-
 class MonthName extends PureComponent {
-  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>
-    );
-  }
+    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>);
+    }
 }
-
-MonthName.propTypes = {
-  month: dateType,
-  onScrollChange: PropTypes.func,
-  locale: PropTypes.string
-};
-
 export default 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 (
-    <div className={styles.monthNames}>
-      {months.map(month => (
-        <MonthName
-          key={+month}
-          month={month}
-          onScrollChange={props.onScrollChange}
-          locale={locale}
-        />
-      ))}
+    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>
-  );
+            (<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
+    scrollDate: dateType,
+    onScrollChange: PropTypes.func,
+    currentRange: PropTypes.arrayOf(dateType),
+    locale: PropTypes.string
 };

package/components/date-picker/month-slider.d.ts

@@ -0,0 +1,29 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { LinearFunction } from '../global/linear-function';
+import { MonthsProps } from './consts';
+export interface MonthSliderProps extends MonthsProps {
+    pxToDate: LinearFunction;
+}
+interface MonthSliderState {
+    dragging: boolean;
+}
+export default class MonthSlider extends PureComponent<MonthSliderProps> {
+    static propTypes: {
+        scrollDate: PropTypes.Requireable<string | number | Date>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        pxToDate: PropTypes.Requireable<PropTypes.InferProps<{
+            x: PropTypes.Requireable<(...args: any[]) => any>;
+            y: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
+    };
+    state: {
+        dragging: boolean;
+    };
+    componentDidUpdate(prevProps: MonthSliderProps, prevState: MonthSliderState): void;
+    onMouseDown: () => void;
+    onMouseUp: () => void;
+    onMouseMove: (e: MouseEvent) => void;
+    render(): JSX.Element;
+}
+export {};

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

@@ -1,83 +1,56 @@
-import React, {PureComponent} from 'react';
+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';
-
-
-import units, {dateType, yearScrollSpeed} from './consts';
+import units, { dateType, yearScrollSpeed } from './consts';
 import styles from './date-picker.css';
-
 const COVERYEARS = 3;
-
 export default class MonthSlider extends PureComponent {
-  static propTypes = {
-    scrollDate: dateType,
-    onScroll: PropTypes.func,
-    pxToDate: PropTypes.shape({
-      x: PropTypes.func,
-      y: PropTypes.func
-    })
-  };
-
-  state = {
-    dragging: false
-  };
-
-  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);
+    static propTypes = {
+        scrollDate: dateType,
+        onScroll: PropTypes.func,
+        pxToDate: PropTypes.shape({
+            x: PropTypes.func,
+            y: PropTypes.func
+        })
+    };
+    state = {
+        dragging: false
+    };
+    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);
+        }
     }
-  }
-
-  onMouseDown = () => {
-    this.setState({dragging: true});
-  };
-
-  onMouseUp = () => {
-    this.setState({dragging: false});
-  };
-
-  onMouseMove = e => {
-    this.props.onScroll(
-      linearFunction(0, this.props.scrollDate, yearScrollSpeed).y(e.movementY)
-    );
-  };
-
-  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);
+    onMouseDown = () => {
+        this.setState({ dragging: true });
+    };
+    onMouseUp = () => {
+        this.setState({ dragging: false });
+    };
+    onMouseMove = (e) => {
+        this.props.onScroll(linearFunction(0, Number(this.props.scrollDate), yearScrollSpeed).y(e.movementY));
+    };
+    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(styles.monthSlider, { [styles.dragging]: this.state.dragging });
+        return (<div>
+        {years.map(date => (<button type="button" key={+date} className={classes} style={{
+                    top: Math.floor(this.props.pxToDate.x(Number(date)) - units.cellSize)
+                }} onMouseDown={this.onMouseDown}/>))}
+      </div>);
     }
-
-    const classes = classNames(
-      styles.monthSlider,
-      {[styles.dragging]: this.state.dragging}
-    );
-
-    return (
-      <div>
-        {years.map(date => (
-          <button
-            type="button"
-            key={+date}
-            className={classes}
-            style={{
-              top: Math.floor(this.props.pxToDate.x(date) - units.cellSize)
-            }}
-            onMouseDown={this.onMouseDown}
-          />
-        ))}
-      </div>
-    );
-  }
 }

package/components/date-picker/month.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+export interface MonthProps extends MonthsProps {
+    month: Date;
+}
+declare function Month(props: MonthProps): JSX.Element;
+declare namespace Month {
+    var propTypes: {
+        month: PropTypes.Requireable<string | number | Date>;
+        locale: PropTypes.Requireable<string>;
+    };
+}
+export default Month;

package/components/date-picker/month.js

@@ -4,45 +4,30 @@ 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';
-import {dateType, WEEK, weekdays} from './consts';
+import { dateType, WEEK, weekdays } from './consts';
 import styles from './date-picker.css';
-
 export default 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 (
-    <div className={styles.month}>
+    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 (<div className={styles.month}>
       <span className={styles.monthTitle}>
-        {format(props.month, 'LLLL', {locale})}
+        {format(props.month, 'LLLL', { locale })}
       </span>
-      {days.map(date => (
-        <Day
-          {...props}
-          day={date}
-          empty={date < start}
-          key={+date}
-        />
-      ))}
-    </div>
-  );
+      {days.map(date => (<Day {...props} day={date} empty={date < start} key={+date}/>))}
+    </div>);
 }
-
 Month.propTypes = {
-  month: dateType,
-  locale: PropTypes.string
+    month: dateType,
+    locale: PropTypes.string
 };

package/components/date-picker/months.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+declare function Months(props: MonthsProps): JSX.Element;
+declare namespace Months {
+    var propTypes: {
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        scrollDate: PropTypes.Requireable<string | number | Date>;
+    };
+}
+export default Months;