@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

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

@@ -1,83 +0,0 @@
-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 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);
-    }
-  }
-
-  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);
-    }
-
-    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.js

@@ -1,48 +0,0 @@
-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';
-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}>
-      <span className={styles.monthTitle}>
-        {format(props.month, 'LLLL', {locale})}
-      </span>
-      {days.map(date => (
-        <Day
-          {...props}
-          day={date}
-          empty={date < start}
-          key={+date}
-        />
-      ))}
-    </div>
-  );
-}
-
-Month.propTypes = {
-  month: dateType,
-  locale: PropTypes.string
-};

package/components/date-picker/months.js

@@ -1,113 +0,0 @@
-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';
-import linearFunction from '../global/linear-function';
-
-import Month from './month';
-import MonthNames from './month-names';
-import styles from './date-picker.css';
-import units, {dateType, DOUBLE, HALF, WEEK, weekdays} from './consts';
-
-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;
-export default 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 (
-    <div
-      className={styles.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;
-        });
-      }}
-    >
-      <div
-        style={{
-          top: Math.
-            floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset)
-        }}
-        className={styles.days}
-      >
-        {months.map(date => (
-          <Month
-            {...props}
-            month={date}
-            key={+date}
-          />
-        ))}
-      </div>
-      <MonthNames {...props}/>
-    </div>
-  );
-}
-
-Months.propTypes = {
-  onScroll: PropTypes.func,
-  scrollDate: dateType
-};

package/components/date-picker/weekdays.js

@@ -1,40 +0,0 @@
-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';
-import styles from './date-picker.css';
-
-export default function Weekdays(props) {
-  const days = Object.keys(weekdays).
-    map(key => startOfDay(setDay(new Date(), weekdays[key])));
-
-  const {locale} = props;
-
-  return (
-    <div className={styles.weekdays}>
-      {days.map(day => (
-        <span
-          className={classNames(
-            styles.weekday,
-            {
-              [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day))
-            }
-          )}
-          key={+day}
-        >
-          {format(day, 'EEEEEE', {locale})}
-        </span>
-      ))}
-    </div>
-  );
-}
-
-Weekdays.propTypes = {
-  locale: PropTypes.string
-};

package/components/date-picker/years.js

@@ -1,111 +0,0 @@
-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';
-
-
-import styles from './date-picker.css';
-import units, {dateType, DOUBLE, HALF, yearDuration} from './consts';
-
-const {yearHeight, calHeight} = units;
-
-let scrollTO;
-
-const YEARSBACK = 5;
-const scrollDelay = 100;
-
-export default class Years extends PureComponent {
-  static propTypes = {
-    scrollDate: dateType,
-    onScroll: PropTypes.func,
-    onScrollChange: PropTypes.func
-  };
-
-  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 (
-      <div
-        className={styles.years}
-        onWheel={handleWheel}
-
-        style={{
-          transition: this.stoppedScrolling ? 'top .2s ease-out 0s' : 'none',
-          top: Math.floor(calHeight * HALF - pxToDate.x(date))
-        }}
-      >
-        {years.map(item => (
-          <button
-            type="button"
-            key={+item}
-            className={classNames(
-              styles.year,
-              {
-                [styles.currentYear]: isSameYear(item, date),
-                [styles.today]: isThisYear(item)
-              }
-            )}
-            onClick={function handleClick() {
-              onScrollChange(
-                setYear(scrollDate, getYear(item))
-              );
-            }}
-          >
-            {format(item, 'yyyy')}
-          </button>
-        ))}
-      </div>
-    );
-  }
-}

package/components/dialog/dialog.examples.js

@@ -1,209 +0,0 @@
-import React from 'react';
-import {useState} from '@storybook/client-api';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import {Header, Content} from '@jetbrains/ring-ui/components/island/island';
-import Button from '@jetbrains/ring-ui/components/button/button';
-import Input from '@jetbrains/ring-ui/components/input/input';
-import Group from '@jetbrains/ring-ui/components/group/group';
-import Toggle from '@jetbrains/ring-ui/components/toggle/toggle';
-import Panel from '@jetbrains/ring-ui/components/panel/panel';
-
-import Dialog from '@jetbrains/ring-ui/components/dialog/dialog';
-
-export default {
-  title: 'Components/Dialog',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'The Dialog component is a simple way to present content above an enclosing view.',
-    hermione: {captureSelector: '*[data-test~=ring-dialog]'},
-    a11y: {element: '#root,*[data-test~=ring-dialog]'}
-  }
-};
-
-export const basic = ({onAction}) => {
-  class DialogDemo extends React.Component {
-    state = {
-      show: true,
-      text: '',
-      autoFocusEnabled: true
-    };
-
-    doAction = () => {
-      onAction(`${this.state.text} performed`);
-      this.setState({show: false});
-    };
-
-    cancelDialog = () => {
-      this.setState({show: false});
-    };
-
-    render() {
-      const {show, text, autoFocusEnabled} = this.state;
-      return (
-        <div className="long-page">
-          <Group>
-            <Button onClick={() => this.setState({show: true})}>Show dialog</Button>
-            <Toggle
-              checked={this.state.autoFocusEnabled}
-              onChange={() => this.setState({autoFocusEnabled: !autoFocusEnabled})}
-            >
-              Autofocus
-            </Toggle>
-          </Group>
-
-          <Dialog
-            label="Dialog"
-            show={show}
-            onCloseAttempt={this.cancelDialog}
-            trapFocus
-            autoFocusFirst={autoFocusEnabled}
-            showCloseButton
-          >
-            <Header>Dialog title</Header>
-            <Content>
-              <Input
-                label="Enter action name"
-                value={text}
-                onChange={e => this.setState({text: e.target.value})}
-              />
-            </Content>
-            <Panel>
-              <Button primary onClick={this.doAction}>
-                OK
-              </Button>
-              <Button onClick={this.cancelDialog}>Cancel</Button>
-            </Panel>
-          </Dialog>
-        </div>
-      );
-    }
-  }
-  return <DialogDemo/>;
-};
-
-basic.storyName = 'basic';
-basic.argTypes = {onAction: {}};
-
-basic.parameters = {
-  storyStyles: `
-<style>
-  .long-page {
-    height: 200vh;
-  }
-</style>`
-};
-
-const lorem = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
-Ipsum has been the industry's standard dummy text ever since the 1500s, when an
-unknown printer took a galley of type and scrambled it to make a type specimen
-book. It has survived not only five centuries, but also the leap into electronic
-typesetting, remaining essentially unchanged.`;
-
-export const withScroll = ({onAction}) => {
-  class DialogDemo extends React.Component {
-    state = {
-      show: true
-    };
-
-    doAction = () => {
-      onAction('action performed');
-      this.setState({show: false});
-    };
-
-    cancelDialog = () => {
-      this.setState({show: false});
-    };
-
-    render() {
-      return (
-        <div>
-          <div>
-            <Button onClick={() => this.setState({show: true})}>Show dialog</Button>
-          </div>
-
-          <Dialog
-            label="Dialog"
-            show={this.state.show}
-            onCloseAttempt={this.cancelDialog}
-            trapFocus
-            showCloseButton
-          >
-            <Header>Dialog title</Header>
-            <Content>
-              <div>
-                <p>Dialog content (scrollable)</p>
-                <p>{lorem}</p>
-                <p>{lorem}</p>
-                <p>{lorem}</p>
-                <p>{lorem}</p>
-                <p>{lorem}</p>
-                <p>{lorem}</p>
-                <p>{lorem}</p>
-              </div>
-            </Content>
-            <Panel>
-              <Button primary onClick={this.doAction}>
-                OK
-              </Button>
-              <Button onClick={this.cancelDialog}>Cancel</Button>
-            </Panel>
-          </Dialog>
-        </div>
-      );
-    }
-  }
-
-  return <DialogDemo/>;
-};
-
-withScroll.storyName = 'with scroll';
-withScroll.argTypes = {onAction: {}};
-
-export const WithOverflowScrollOnHtml = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="container">
-      <div>Scroll down</div>
-      <Button className="button" onClick={() => setOpen(true)}>Show dialog</Button>
-      <Dialog label="Dialog" show={open} onCloseAttempt={() => setOpen(false)}>
-        <Header>Dialog title</Header>
-      </Dialog>
-    </div>
-  );
-};
-
-WithOverflowScrollOnHtml.parameters = {
-  storyStyles: `
-    <style>
-      html {
-        overflow-y: scroll;
-      }
-
-      html, body {
-        height: 100%;
-      }
-
-      body {
-        margin: 0 !important;
-      }
-
-      .container {
-        height: 200vh;
-      }
-
-      .button {
-        margin-top: 100vh;
-      }
-    </style>
-  `,
-  hermione: {
-    actions: [
-      {type: 'click', selector: '.button'},
-      {type: 'capture', selector: '*[data-test~=ring-dialog-container]'}
-    ]
-  }
-};