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

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

@@ -0,0 +1,91 @@
+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, {LinearFunction} from '../global/linear-function';
+
+
+import units, {MonthsProps, dateType, yearScrollSpeed} from './consts';
+import styles from './date-picker.css';
+
+const COVERYEARS = 3;
+
+export interface MonthSliderProps extends MonthsProps {
+  pxToDate: LinearFunction
+}
+
+interface MonthSliderState {
+  dragging: boolean
+}
+
+export default class MonthSlider extends PureComponent<MonthSliderProps> {
+  static propTypes = {
+    scrollDate: dateType,
+    onScroll: PropTypes.func,
+    pxToDate: PropTypes.shape({
+      x: PropTypes.func,
+      y: PropTypes.func
+    })
+  };
+
+  state = {
+    dragging: false
+  };
+
+  componentDidUpdate(prevProps: MonthSliderProps, prevState: MonthSliderState) {
+    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: MouseEvent) => {
+    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>
+    );
+  }
+}

package/components/date-picker/month.tsx

@@ -0,0 +1,52 @@
+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 {MonthsProps, dateType, WEEK, weekdays} from './consts';
+import styles from './date-picker.css';
+
+export interface MonthProps extends MonthsProps {
+  month: Date
+}
+
+export default function Month(props: MonthProps) {
+  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.tsx

@@ -0,0 +1,113 @@
+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, MonthsProps, 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: Date | number) {
+  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: Date | number) {
+  const monthStart = startOfMonth(date);
+  const monthEnd = endOfMonth(date);
+  return (Number(monthEnd) - Number(monthStart)) / monthHeight(monthStart);
+}
+
+const scrollSchedule = scheduleRAF();
+let dy = 0;
+export default function Months(props: MonthsProps) {
+  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, Number(scrollDate), currentSpeed);
+  const offset = pxToDate.x(Number(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.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import classNames from 'classnames';
+import type {Locale} from 'date-fns';
+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';
+
+interface WeekdaysProps {
+  locale: Locale | undefined
+}
+
+export default function Weekdays(props: WeekdaysProps) {
+  const days = Object.values(weekdays).
+    map(value => startOfDay(setDay(new Date(), value)));
+
+  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.tsx

@@ -0,0 +1,116 @@
+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, {CalendarProps, dateType, DOUBLE, HALF, yearDuration} from './consts';
+
+const {yearHeight, calHeight} = units;
+
+let scrollTO: number | null;
+
+const YEARSBACK = 5;
+const scrollDelay = 100;
+
+interface YearsState {
+  scrollDate: Date | null
+}
+
+export default class Years extends PureComponent<CalendarProps> {
+  static propTypes = {
+    scrollDate: dateType,
+    onScroll: PropTypes.func,
+    onScrollChange: PropTypes.func
+  };
+
+  state = {scrollDate: null};
+
+  componentDidUpdate(prevProps: CalendarProps, prevState: YearsState) {
+    this.stoppedScrolling = prevState.scrollDate != null && !this.state.scrollDate;
+  }
+
+  stoppedScrolling?: boolean;
+  setYear(date: number) {
+    if (scrollTO) {
+      window.clearTimeout(scrollTO);
+      scrollTO = null;
+    }
+
+    this.setState({scrollDate: null});
+
+    this.props.onScroll(
+      Number(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, Number(years[0]), yearDuration / yearHeight);
+
+    const handleWheel = (e: React.WheelEvent) => {
+      e.preventDefault();
+      const newScrollDate = linearFunction(0, Number(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(Number(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(
+                Number(setYear(scrollDate, getYear(item)))
+              );
+            }}
+          >
+            {format(item, 'yyyy')}
+          </button>
+        ))}
+      </div>
+    );
+  }
+}

package/components/dialog/dialog.examples.tsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import {useState} from '@storybook/client-api';
+import type {Story} from '@storybook/react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import {Header, Content} from '../island/island';
+import Button from '../button/button';
+import Input from '../input/input';
+import Group from '../group/group';
+import Toggle from '../toggle/toggle';
+import Panel from '../panel/panel';
+
+import Dialog from './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]'}
+  }
+};
+
+interface Args {
+  onAction(action: string): void
+}
+
+export const basic: Story<Args> = ({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: Story<Args> = ({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]'}
+    ]
+  }
+};

package/components/dialog/dialog.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {mount} from 'enzyme';
+
+import Dialog, {DialogAttrs} from './dialog';
+import styles from './dialog.css';
+
+describe('Dialog', () => {
+  const children = <div/>;
+  const mountDialog = (props: DialogAttrs) =>
+    mount<Dialog>(<Dialog label="Dialog" {...props} trapFocus={false}/>);
+
+  it('should create component', () => {
+    mountDialog({show: true, children}).should.have.type(Dialog);
+  });
+
+  it('should wrap children with dialog wrapper', () => {
+    const {dialog} = mountDialog({show: true, children}).instance();
+    should.exist(dialog);
+    dialog?.should.match(`.${styles.container}`);
+  });
+
+  it('should use passed className', () => {
+    const {dialog} = mountDialog({show: true, children, className: 'test-class'}).instance();
+    should.exist(dialog);
+    dialog?.should.match('.test-class');
+  });
+
+  it('should call onOverlayClick and onCloseAttempt callbacks on click by overlay', () => {
+    const closeSpy = sandbox.spy();
+    const clickSpy = sandbox.spy();
+    const instance = mountDialog({
+      show: true,
+      children,
+      onOverlayClick: clickSpy,
+      onCloseAttempt: closeSpy
+    }).instance();
+    should.exist(instance.dialog);
+    instance.handleClick({target: instance.dialog} as never);
+
+    closeSpy.should.have.been.called;
+    clickSpy.should.have.been.called;
+  });
+
+  it('should call onEscPress and onCloseAttempt callbacks on click by overlay', () => {
+    const closeSpy = sandbox.spy();
+    const escSpy = sandbox.spy();
+    const instance = mountDialog({
+      show: true,
+      children,
+      onEscPress: escSpy,
+      onCloseAttempt: closeSpy
+    }).instance();
+
+    instance.getShortcutsMap().esc({} as KeyboardEvent);
+
+    closeSpy.should.have.been.called;
+    escSpy.should.have.been.called;
+  });
+
+  it('should not call onEscPress if is hidden', () => {
+    const escSpy = sandbox.spy();
+    const instance = mountDialog({show: false, children, onEscPress: escSpy}).instance();
+    instance.getShortcutsMap().esc({} as KeyboardEvent);
+
+    escSpy.should.not.have.been.called;
+  });
+});