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

package/components/data-list/item.tsx

@@ -0,0 +1,247 @@
+import React, {PureComponent, ReactNode, ComponentType} from 'react';
+import PropTypes from 'prop-types';
+import chevronRightIcon from '@jetbrains/icons/chevron-right';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
+
+import Link from '../link/link';
+import Text from '../text/text';
+import LoaderInline from '../loader-inline/loader-inline';
+
+import Button from '../button/button';
+
+import Selection, {SelectionItem} from '../table/selection';
+
+import Title from './title';
+
+import styles from './data-list.css';
+
+export enum moreLessButtonStates {
+  UNUSED,
+  MORE,
+  MORE_LOADING,
+  LESS,
+}
+
+const ITEM_LEFT_OFFSET = 32;
+const LIST_LEFT_OFFSET = 24;
+
+export interface BaseFormattedItem<T> {
+  items?: readonly T[]
+  title?: ReactNode
+  collapsible?: boolean | null | undefined
+  collapsed?: boolean | null | undefined
+  onCollapse?: () => void
+  onExpand?: () => void
+  selectable?: boolean | undefined
+}
+
+export interface FormattedItem<T> extends BaseFormattedItem<T> {
+  key?: string | null | undefined
+  id?: string | number | null | undefined
+}
+
+export interface ItemProps<T extends SelectionItem> extends BaseFormattedItem<T> {
+  item: T
+  onFocus: (item: T) => void
+  onSelect: (item: T, selected: boolean) => void
+  itemFormatter: (item: T) => FormattedItem<T>
+  level: number
+  parentShift: number
+  showMoreLessButton: moreLessButtonStates
+  onItemMoreLess: (item: T, more: boolean) => void
+  className?: string | null | undefined
+  showFocus?: boolean | undefined
+  selection: Selection<T>
+  selected?: boolean | undefined
+}
+
+export default class Item<T extends SelectionItem> extends PureComponent<ItemProps<T>> {
+  static defaultProps = {
+    items: [],
+    level: 0,
+    parentShift: 0,
+    showMoreLessButton: moreLessButtonStates.UNUSED,
+    onItemMoreLess: () => {}
+  };
+
+
+  onShowMore = () => {
+    const {onItemMoreLess, item} = this.props;
+    onItemMoreLess(item, true);
+  };
+
+  onShowLess = () => {
+    const {onItemMoreLess, item} = this.props;
+    onItemMoreLess(item, false);
+  };
+
+  onFocus = () => {
+    const {onFocus, item} = this.props;
+    onFocus(item);
+  };
+
+  onSelect = (selected: boolean) => {
+    const {onSelect, item} = this.props;
+    onSelect(item, selected);
+  };
+
+  renderItem = (model: T, parentShift: number) => {
+    const {
+      onFocus, onSelect, selection, level,
+      itemFormatter
+    } = this.props;
+
+    const item = itemFormatter(model);
+
+    return (
+      <Item
+        key={item.key || item.id}
+        item={model}
+        title={item.title}
+        items={item.items}
+        level={level + 1}
+        parentShift={parentShift}
+
+        itemFormatter={itemFormatter}
+
+        collapsible={item.collapsible}
+        collapsed={item.collapsed}
+        onCollapse={item.onCollapse}
+        onExpand={item.onExpand}
+
+        showFocus={selection.isFocused(model)}
+        onFocus={onFocus}
+
+        selection={selection}
+        selectable={item.selectable}
+        selected={selection.isSelected(model)}
+        onSelect={onSelect}
+      />
+    );
+  };
+
+  render() {
+    const {
+      title, items, showMoreLessButton,
+      level, parentShift, showFocus,
+      selectable, selected,
+      collapsible, collapsed, onCollapse, onExpand
+    } = this.props;
+
+    let moreLessButton;
+    if (showMoreLessButton === moreLessButtonStates.MORE ||
+      showMoreLessButton === moreLessButtonStates.MORE_LOADING) {
+      moreLessButton = (
+        <Text info>
+          <Link
+            inherit
+            pseudo
+            onClick={this.onShowMore}
+          >{'Show more'}</Link>
+          {showMoreLessButton === moreLessButtonStates.MORE_LOADING &&
+            <LoaderInline className={styles.showMoreLoader}/>
+          }
+        </Text>
+      );
+    } else if (showMoreLessButton === moreLessButtonStates.LESS) {
+      moreLessButton = (
+        <Text info>
+          <Link
+            inherit
+            pseudo
+            onClick={this.onShowLess}
+          >{'Show less'}</Link>
+        </Text>
+      );
+    }
+
+    let collapserExpander = null;
+    if (collapsible) {
+      if (collapsed) {
+        collapserExpander = (
+          <Button
+            title="Expand"
+            onClick={onExpand}
+            icon={chevronRightIcon}
+            className={styles.collapseButton}
+            iconClassName={styles.collapseIcon}
+            data-test="ring-data-list-expand"
+          />
+        );
+      } else {
+        collapserExpander = (
+          <Button
+            title="Collapse"
+            onClick={onCollapse}
+            icon={chevronDownIcon}
+            className={styles.collapseButton}
+            iconClassName={styles.collapseIcon}
+            data-test="ring-data-list-collapse"
+          />
+        );
+      }
+    }
+
+    const itemIsEmpty = !items?.length || (collapsible && collapsed);
+    const offset = level * LIST_LEFT_OFFSET + ITEM_LEFT_OFFSET + parentShift;
+
+    return (
+      <li>
+        <Title
+          title={title}
+          focused={showFocus}
+          showFocus={showFocus}
+          selectable={selectable}
+          selected={selected}
+          collapserExpander={collapserExpander}
+          onFocus={this.onFocus}
+          onSelect={this.onSelect}
+          offset={offset}
+        />
+
+        {!itemIsEmpty
+          ? (
+            <ul className={styles.itemContent}>
+              {items.map(model => this.renderItem(model, parentShift))}
+
+              {showMoreLessButton !== moreLessButtonStates.UNUSED
+                ? <li className={styles.showMore}>{moreLessButton}</li>
+                : null
+              }
+            </ul>
+          )
+          : null}
+      </li>
+    );
+  }
+}
+
+type ItemAttrs<T extends SelectionItem> = JSX.LibraryManagedAttributes<typeof Item, ItemProps<T>>
+(Item as ComponentType<ItemAttrs<SelectionItem>>).propTypes = {
+  item: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+  }).isRequired,
+  title: PropTypes.node,
+  items: PropTypes.array,
+  className: PropTypes.string,
+  level: PropTypes.number,
+  parentShift: PropTypes.number,
+
+  itemFormatter: PropTypes.func.isRequired,
+
+  collapsible: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  onCollapse: PropTypes.func,
+  onExpand: PropTypes.func,
+
+  showFocus: PropTypes.bool,
+  onFocus: PropTypes.func.isRequired,
+
+  selection: PropTypes.instanceOf(Selection).isRequired,
+  selectable: PropTypes.bool,
+  selected: PropTypes.bool,
+  onSelect: PropTypes.func.isRequired,
+
+  showMoreLessButton: PropTypes.number,
+  onItemMoreLess: PropTypes.func
+};

package/components/data-list/selection.ts

@@ -0,0 +1,107 @@
+import TableSelection, {CloneWithConfig, SelectionItem} from '../table/selection';
+
+export default class Selection<T extends SelectionItem> extends TableSelection<T> {
+  protected _buildData(data: T[]) {
+    return new Set(this._getDescendants(data));
+  }
+
+  protected _buildSelected(data: Set<T>, selected: Set<T>) {
+    const _selected = new Set(selected);
+
+    [...data].forEach(item => {
+      if (_selected.has(item)) {
+        this._selectDescendants(item, _selected);
+      }
+    });
+
+    return _selected;
+  }
+
+  private _getDescendants(items: readonly T[]) {
+    let result: T[] = [];
+
+    items.forEach(item => {
+      result.push(item);
+      result = [...result, ...this._getDescendants(this._getChildren(item))];
+    });
+
+    return result;
+  }
+
+  private _getAncestors(item: T) {
+    let result: T[] = [];
+
+    const parent = [...this._data].find(it => this._getChildren(it).includes(item));
+    if (parent) {
+      result = [parent, ...this._getAncestors(parent)];
+    }
+
+    return result;
+  }
+
+  private _selectDescendants(item: T, selected: Set<T>) {
+    this._getDescendants(this._getChildren(item)).
+      forEach(it => selected.add(it));
+  }
+
+  private _deselectDescendants(item: T, selected: Set<T>) {
+    this._getDescendants(this._getChildren(item)).
+      forEach(it => selected.delete(it));
+  }
+
+  private _selectAncestors(item: T, selected: Set<T>) {
+    this._getAncestors(item).forEach(ancestor => {
+      const groupIsSelected = this._getChildren(ancestor).
+        filter(it => this._isItemSelectable(it)).
+        every(it => selected.has(it));
+
+      if (groupIsSelected) {
+        selected.add(ancestor);
+      }
+    });
+  }
+
+  private _deselectAncestors(item: T, selected: Set<T>) {
+    this._getAncestors(item).forEach(it => selected.delete(it));
+  }
+
+  select(value = this._focused): Selection<T> {
+    if (!value || !this._isItemSelectable(value)) {
+      return this;
+    }
+
+    const selected = new Set(this._selected);
+    selected.add(value);
+
+    this._selectDescendants(value, selected);
+    this._selectAncestors(value, selected);
+
+    return this.cloneWith({selected});
+  }
+
+  focus(value: T | null | undefined) {
+    return super.focus(value) as Selection<T>;
+  }
+
+  resetSelection() {
+    return super.resetSelection() as Selection<T>;
+  }
+
+  cloneWith(config: CloneWithConfig<T>): Selection<T> {
+    return super.cloneWith(config) as Selection<T>;
+  }
+
+  deselect(value = this._focused) {
+    if (!value || !this._isItemSelectable(value)) {
+      return this;
+    }
+
+    const selected = new Set(this._selected);
+    selected.delete(value);
+
+    this._deselectDescendants(value, selected);
+    this._deselectAncestors(value, selected);
+
+    return this.cloneWith({selected});
+  }
+}

package/components/data-list/title.tsx

@@ -0,0 +1,112 @@
+import React, {PureComponent, ReactNode, ComponentType} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import focusSensorHOC, {FocusSensorAddProps} from '../global/focus-sensor-hoc';
+import Checkbox from '../checkbox/checkbox';
+
+import getUID from '../global/get-uid';
+
+import {refObject} from '../global/prop-types';
+
+import styles from './data-list.css';
+
+
+export interface TitleProps extends FocusSensorAddProps<HTMLDivElement> {
+  onSelect: (selected: boolean) => void
+  selectable?: boolean | undefined
+  selected?: boolean | undefined
+  showFocus?: boolean | undefined
+  offset?: number | undefined
+  className?: string | null | undefined
+  title?: ReactNode
+  collapserExpander?: ReactNode
+}
+
+class Title extends PureComponent<TitleProps> {
+  static defaultProps = {
+    selectable: false,
+    selected: false,
+    showFocus: false
+  };
+
+  id = getUID('data-list-title');
+
+  onCheckboxFocus = () => {
+    this.props.onFocusRestore();
+  };
+
+  onCheckboxChange = () => {
+    this.toggleSelection();
+  };
+
+  toggleSelection() {
+    const {selectable, selected, onSelect} = this.props;
+    if (selectable) {
+      onSelect(!selected);
+    }
+  }
+
+  render() {
+    const {
+      className, title, offset, showFocus, innerRef,
+      selectable, selected, collapserExpander
+    } = this.props;
+
+    const classes = classNames(className, {
+      [styles.title]: true,
+      [styles.titleFocused]: showFocus,
+      [styles.titleSelected]: selected
+    });
+
+    return (
+      <div
+        id={this.id}
+        className={classes}
+        style={{paddingLeft: offset}}
+        ref={innerRef}
+      >
+        <div className={styles.boxes}>
+          {selectable &&
+            (
+              <div className={styles.checkboxBox}>
+                <Checkbox
+                  aria-labelledby={this.id}
+                  className={showFocus ? 'ring-checkbox_focus' : ''}
+                  checked={selected}
+                  onFocus={this.onCheckboxFocus}
+                  onChange={this.onCheckboxChange}
+                  tabIndex={-1}
+                />
+              </div>
+            )
+          }
+
+          {collapserExpander}
+        </div>
+
+        {title}
+      </div>
+    );
+  }
+}
+
+(Title as ComponentType<unknown>).propTypes = {
+  className: PropTypes.string,
+  title: PropTypes.node,
+  offset: PropTypes.number,
+  selectable: PropTypes.bool,
+  selected: PropTypes.bool,
+  onSelect: PropTypes.func.isRequired,
+  showFocus: PropTypes.bool,
+  collapserExpander: PropTypes.node,
+  innerRef: PropTypes.oneOfType([
+    refObject(PropTypes.instanceOf(HTMLDivElement)),
+    PropTypes.func
+  ]),
+
+  // focusSensorHOC
+  onFocusRestore: PropTypes.func.isRequired
+};
+
+export default focusSensorHOC<HTMLDivElement, TitleProps, typeof Title>(Title);

package/components/data-list-ng/data-list-ng.examples.js

@@ -2,10 +2,10 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import Selection from '@jetbrains/ring-ui/components/data-list/selection';
-import data from '@jetbrains/ring-ui/components/data-list/data-list.mock';
+import Selection from '../data-list/selection';
+import data from '../data-list/data-list.mock';
 
-import RingDataList from '@jetbrains/ring-ui/components/data-list-ng/data-list-ng';
+import RingDataList from './data-list-ng';
 
 export default {
   title: 'Legacy Angular/DataList Ng',

package/components/date-picker/consts.ts

@@ -0,0 +1,136 @@
+import {ReactNode} from 'react';
+import PropTypes from 'prop-types';
+import add from 'date-fns/add';
+import type {Duration, Locale} from 'date-fns';
+
+const unit = 8; // px;
+const units = {
+  unit,
+  /* eslint-disable @typescript-eslint/no-magic-numbers */
+  cellSize: unit * 3,
+  calHeight: unit * 36,
+  yearHeight: unit * 4
+  /* eslint-enable */
+};
+
+export default units;
+
+export const YEAR = 12;
+export const WEEK = 7;
+export const weekdays = {
+  MO: 1,
+  TU: 2,
+  WE: 3,
+  TH: 4,
+  FR: 5,
+  SA: 6,
+  SU: 0
+};
+export const MIDDLE_DAY = 15;
+
+const durationToMillis = (duration: Duration) => +add(0, duration);
+
+export const yearDuration = durationToMillis({years: 1});
+export const yearScrollSpeed = yearDuration / (YEAR * units.cellSize);
+
+export const DOUBLE = 2;
+export const HALF = 0.5;
+
+export const dateType = PropTypes.oneOfType([
+  PropTypes.instanceOf(Date),
+  PropTypes.string,
+  PropTypes.number
+]);
+
+export function parseTime(time: string) {
+  let result = null;
+  if (/^([01][0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
+    result = time;
+  } else if (/^([0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
+    result = `0${time}`;
+  }
+
+  return result;
+}
+
+export interface DateInputTranslations {
+  addFirstDate: string
+  addSecondDate: string
+  addTime: string
+  selectName: string
+}
+
+export interface DateSpecificPopupProps {
+  withTime?: false | undefined
+  range?: false | undefined
+  onChange: (date: Date | null | undefined) => void
+}
+
+export interface DatePickerChange {
+  from?: Date | null | undefined
+  to?: Date | null | undefined
+  date?: Date | null | undefined
+  time?: string | null | undefined
+}
+
+export interface TimeSpecificPopupProps {
+  withTime: true
+  range?: false | undefined
+  onChange: (change: DatePickerChange) => void
+}
+
+export interface RangeSpecificPopupProps {
+  withTime?: false | undefined
+  range: true
+  onChange: (change: DatePickerChange) => void
+}
+
+export interface DatePopupState {
+  active: Field
+  text: string | null
+  hoverDate: Date | null
+  scrollDate: number | null
+}
+export interface DatePopupBaseProps {
+  date?: Date | number | string | null | undefined
+  time?: string | null | undefined
+  from?: Date | number | string | null | undefined
+  to?: Date | number | string | null | undefined
+  minDate?: string | null | undefined
+  maxDate?: string | null | undefined
+  translations: DateInputTranslations
+  fromPlaceholder?: string | null | undefined
+  toPlaceholder?: string | null | undefined
+  timePlaceholder?: string | null | undefined
+  hidden: boolean
+  locale?: Locale | undefined
+  parseDateInput: (text: Date | number | string | null | undefined) => Date | null
+  displayFormat: (date: Date, locale: Locale | undefined) => string
+  onComplete: () => void
+  onClear?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | null | undefined
+  renderAfterCalendar?: ((state: DatePopupState) => ReactNode) | undefined
+}
+
+export interface Dates {
+  from?: Date | null | undefined
+  to?: Date | null | undefined
+  date?: Date | null | undefined
+  time?: never
+}
+
+export interface CalendarProps extends
+  Omit<DatePopupBaseProps, 'date' | 'from' | 'to' | 'time'>, Dates {
+  activeDate: Date | null
+  scrollDate: number | Date
+  currentRange: [Date, Date] | null
+  activeRange: [Date, Date] | null
+  onScroll: (to: number) => void
+  onScrollChange: (date: number) => void
+}
+
+export interface MonthsProps extends CalendarProps {
+  onSelect: (date: Date) => void
+  onHover: (date: Date) => void
+}
+
+export type Field = 'date' | 'time' | 'from' | 'to';