@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/data-list/item.js

@@ -0,0 +1,227 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } 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.js';
+import Text from '../text/text.js';
+import LoaderInline from '../loader-inline/loader-inline.js';
+import Button from '../button/button.js';
+import { m as modules_09d014b4, T as Title } from '../_helpers/title.js';
+import 'focus-visible';
+import 'classnames';
+import '../global/memoize.js';
+import '../global/data-tests.js';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+import '../global/theme.js';
+import '../_helpers/inject-styles.js';
+import '../global/conic-gradient.js';
+import 'conic-gradient';
+import '../global/supports-css.js';
+import '../global/inject-styles.js';
+import '../global/radial-gradient-mask.js';
+import '../global/get-uid.js';
+import '@jetbrains/icons/chevron-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../_helpers/button__classes.js';
+import '../global/focus-sensor-hoc.js';
+import '../global/composeRefs.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../_helpers/checkbox.js';
+
+const moreLessButtonStates = {
+  UNUSED: 0,
+  MORE: 1,
+  MORE_LOADING: 2,
+  LESS: 3
+};
+const ITEM_LEFT_OFFSET = 32;
+const LIST_LEFT_OFFSET = 24;
+class Item extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "onShowMore", () => {
+      const {
+        onItemMoreLess,
+        item
+      } = this.props;
+      onItemMoreLess(item, true);
+    });
+
+    _defineProperty(this, "onShowLess", () => {
+      const {
+        onItemMoreLess,
+        item
+      } = this.props;
+      onItemMoreLess(item, false);
+    });
+
+    _defineProperty(this, "onFocus", () => {
+      const {
+        onFocus,
+        item
+      } = this.props;
+      onFocus(item);
+    });
+
+    _defineProperty(this, "onSelect", selected => {
+      const {
+        onSelect,
+        item
+      } = this.props;
+      onSelect(item, selected);
+    });
+
+    _defineProperty(this, "renderItem", (model, parentShift) => {
+      const {
+        onFocus,
+        onSelect,
+        selection,
+        level,
+        itemFormatter
+      } = this.props;
+      const item = itemFormatter(model);
+      return /*#__PURE__*/React.createElement(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,
+        focused: selection.isFocused(model),
+        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 = /*#__PURE__*/React.createElement(Text, {
+        info: true
+      }, /*#__PURE__*/React.createElement(Link, {
+        inherit: true,
+        pseudo: true,
+        onClick: this.onShowMore
+      }, 'Show more'), showMoreLessButton === moreLessButtonStates.MORE_LOADING && /*#__PURE__*/React.createElement(LoaderInline, {
+        className: modules_09d014b4.showMoreLoader
+      }));
+    } else if (showMoreLessButton === moreLessButtonStates.LESS) {
+      moreLessButton = /*#__PURE__*/React.createElement(Text, {
+        info: true
+      }, /*#__PURE__*/React.createElement(Link, {
+        inherit: true,
+        pseudo: true,
+        onClick: this.onShowLess
+      }, 'Show less'));
+    }
+
+    let collapserExpander = null;
+
+    if (collapsible) {
+      if (collapsed) {
+        collapserExpander = /*#__PURE__*/React.createElement(Button, {
+          title: "Expand",
+          onClick: onExpand,
+          icon: chevronRightIcon,
+          className: modules_09d014b4.collapseButton,
+          iconClassName: modules_09d014b4.collapseIcon,
+          "data-test": "ring-data-list-expand"
+        });
+      } else {
+        collapserExpander = /*#__PURE__*/React.createElement(Button, {
+          title: "Collapse",
+          onClick: onCollapse,
+          icon: chevronDownIcon,
+          className: modules_09d014b4.collapseButton,
+          iconClassName: modules_09d014b4.collapseIcon,
+          "data-test": "ring-data-list-collapse"
+        });
+      }
+    }
+
+    const itemIsEmpty = !items.length || collapsible && collapsed;
+    const offset = level * LIST_LEFT_OFFSET + ITEM_LEFT_OFFSET + parentShift;
+    return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Title, {
+      title: title,
+      focused: showFocus,
+      showFocus: showFocus,
+      selectable: selectable,
+      selected: selected,
+      collapserExpander: collapserExpander,
+      onFocus: this.onFocus,
+      onSelect: this.onSelect,
+      offset: offset
+    }), !itemIsEmpty ? /*#__PURE__*/React.createElement("ul", {
+      className: modules_09d014b4.itemContent
+    }, items.map(model => this.renderItem(model, parentShift)), showMoreLessButton !== moreLessButtonStates.UNUSED ? /*#__PURE__*/React.createElement("li", {
+      className: modules_09d014b4.showMore
+    }, moreLessButton) : null) : null);
+  }
+
+}
+
+_defineProperty(Item, "propTypes", {
+  item: PropTypes.object,
+  title: PropTypes.node,
+  items: PropTypes.array,
+  className: PropTypes.string,
+  level: PropTypes.number,
+  parentShift: PropTypes.number,
+  itemFormatter: PropTypes.func,
+  collapsible: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  onCollapse: PropTypes.func,
+  onExpand: PropTypes.func,
+  showFocus: PropTypes.bool,
+  onFocus: PropTypes.func,
+  selection: PropTypes.object,
+  selectable: PropTypes.bool,
+  selected: PropTypes.bool,
+  onSelect: PropTypes.func,
+  showMoreLessButton: PropTypes.number,
+  onItemMoreLess: PropTypes.func
+});
+
+_defineProperty(Item, "defaultProps", {
+  items: [],
+  level: 0,
+  parentShift: 0,
+  showMoreLessButton: moreLessButtonStates.UNUSED,
+  onItemMoreLess: () => {}
+});
+
+export { Item as default, moreLessButtonStates };

package/dist/data-list/selection.js

@@ -0,0 +1,101 @@
+import Selection$1 from '../table/selection.js';
+
+class Selection extends Selection$1 {
+  _buildData(data) {
+    return new Set(this._getDescendants(data));
+  }
+
+  _buildSelected(data, selected) {
+    const _selected = new Set(selected);
+
+    [...data].forEach(item => {
+      if (_selected.has(item)) {
+        this._selectDescendants(item, _selected);
+      }
+    });
+    return _selected;
+  }
+
+  _getDescendants(items) {
+    let result = [];
+    items.forEach(item => {
+      result.push(item);
+      result = [...result, ...this._getDescendants(this._getChildren(item))];
+    });
+    return result;
+  }
+
+  _getAncestors(item) {
+    let result = [];
+    const parent = [...this._data].find(it => this._getChildren(it).includes(item));
+
+    if (parent) {
+      result = [parent, ...this._getAncestors(parent)];
+    }
+
+    return result;
+  }
+
+  _selectDescendants(item, selected) {
+    this._getDescendants(this._getChildren(item)).forEach(it => selected.add(it));
+  }
+
+  _deselectDescendants(item, selected) {
+    this._getDescendants(this._getChildren(item)).forEach(it => selected.delete(it));
+  }
+
+  _selectAncestors(item, selected) {
+    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);
+      }
+    });
+  }
+
+  _deselectAncestors(item, selected) {
+    this._getAncestors(item).forEach(it => selected.delete(it));
+  }
+
+  select() {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._focused;
+
+    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
+    });
+  }
+
+  deselect() {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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
+    });
+  }
+
+}
+
+export { Selection as default };

package/dist/data-list/title.js

@@ -0,0 +1,18 @@
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'react';
+import 'prop-types';
+import 'classnames';
+import '../global/focus-sensor-hoc.js';
+import '../checkbox/checkbox.js';
+import '../global/get-uid.js';
+export { T as default } from '../_helpers/title.js';
+import '../global/composeRefs.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+import '../_helpers/checkbox.js';

package/dist/data-list-ng/data-list-ng.js

@@ -0,0 +1,59 @@
+import angularComponentFactory from '../global/angular-component-factory.js';
+import DataList from '../data-list/data-list.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'angular';
+import 'react';
+import 'react-dom';
+import '../global/ring-angular-component.js';
+import '../global/react-dom-renderer.js';
+import 'prop-types';
+import 'classnames';
+import '../global/focus-sensor-hoc.js';
+import '../global/composeRefs.js';
+import '../table/selection-shortcuts-hoc.js';
+import '../table/selection.js';
+import '../table/disable-hover-hoc.js';
+import '../global/get-uid.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../loader/loader.js';
+import '../global/data-tests.js';
+import '../loader/loader__core.js';
+import '../global/dom.js';
+import '../data-list/item.js';
+import '@jetbrains/icons/chevron-right';
+import '@jetbrains/icons/chevron-down';
+import '../link/link.js';
+import 'focus-visible';
+import '../global/memoize.js';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+import '../text/text.js';
+import '../loader-inline/loader-inline.js';
+import '../global/theme.js';
+import '../_helpers/inject-styles.js';
+import '../global/conic-gradient.js';
+import 'conic-gradient';
+import '../global/supports-css.js';
+import '../global/inject-styles.js';
+import '../global/radial-gradient-mask.js';
+import '../button/button.js';
+import '@jetbrains/icons/chevron-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../_helpers/button__classes.js';
+import '../_helpers/title.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../_helpers/checkbox.js';
+
+var dataListNg = angularComponentFactory(DataList, 'DataList').name;
+
+export { dataListNg as default };

package/dist/date-picker/consts.js

@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types';
+import add from 'date-fns/add';
+
+const unit = 8; // px;
+
+const units = {
+  unit,
+
+  /* eslint-disable no-magic-numbers */
+  cellSize: unit * 3,
+  calHeight: unit * 36,
+  yearHeight: unit * 4
+  /* eslint-enable */
+
+};
+const YEAR = 12;
+const WEEK = 7;
+const weekdays = {
+  MO: 1,
+  TU: 2,
+  WE: 3,
+  TH: 4,
+  FR: 5,
+  SA: 6,
+  SU: 0
+};
+const MIDDLE_DAY = 15;
+
+const durationToMillis = duration => +add(0, duration);
+
+const yearDuration = durationToMillis({
+  years: 1
+});
+const yearScrollSpeed = yearDuration / (YEAR * units.cellSize);
+const DOUBLE = 2;
+const HALF = 0.5;
+function linear(x0, y0, a) {
+  return {
+    y(x) {
+      return +y0 + (x - x0) * a;
+    },
+
+    x(y) {
+      return +x0 + (y - y0) / a;
+    }
+
+  };
+}
+const deprecatedPropType = replacement => (props, propName) => {
+  if (propName in props) {
+    return new Error(`"${propName}" prop is deprecated and will be removed in 5.0. ${replacement} instead. See https://github.com/JetBrains/ring-ui/blob/master/CHANGELOG.md#310 for details`);
+  }
+
+  return undefined;
+};
+const dateType = PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]);
+function parseTime(time) {
+  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 { DOUBLE, HALF, MIDDLE_DAY, WEEK, YEAR, dateType, units as default, deprecatedPropType, linear, parseTime, weekdays, yearDuration, yearScrollSpeed };

package/dist/date-picker/date-input.js

@@ -0,0 +1,173 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Input from '../input/input.js';
+import { dateType } from './consts.js';
+import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import '@jetbrains/icons/close';
+import '../global/theme.js';
+import '../button/button.js';
+import 'focus-visible';
+import '@jetbrains/icons/chevron-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import '../global/get-uid.js';
+import '../_helpers/input.js';
+import 'date-fns/add';
+
+class DateInput extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "inputRef", el => {
+      this.input = el;
+      this.updateInput(this.props);
+    });
+
+    _defineProperty(this, "handleChange", e => this.props.onInput(e.target.value, e.target.dataset.name));
+
+    _defineProperty(this, "handleKeyDown", e => e.key === 'Enter' && this.props.onConfirm());
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      hidden,
+      text,
+      active
+    } = this.props;
+
+    if (!hidden && prevProps.hidden || text !== prevProps.text || active !== prevProps.active) {
+      this.updateInput({
+        text,
+        active
+      });
+    }
+  }
+
+  updateInput(_ref) {
+    let {
+      text,
+      active
+    } = _ref;
+    const el = this.input;
+
+    if (!el) {
+      return;
+    }
+
+    if (active) {
+      el.focus();
+
+      if (!text) {
+        el.select();
+      }
+    } else {
+      el.blur();
+    }
+  }
+
+  render() {
+    const {
+      active,
+      divider,
+      text,
+      time,
+      name,
+      hoverDate,
+      date,
+      displayFormat,
+      translations,
+      onActivate,
+      onClear,
+      fromPlaceholder,
+      toPlaceholder,
+      timePlaceholder,
+      locale
+    } = this.props;
+    let displayText = '';
+
+    if (active && hoverDate) {
+      displayText = displayFormat(hoverDate, locale);
+    } else if (active && text != null) {
+      displayText = text;
+    } else if (date) {
+      displayText = displayFormat(date, locale);
+    } else if (name === 'time') {
+      displayText = time || '';
+    }
+
+    const placeholder = (() => {
+      switch (name) {
+        case 'from':
+          return fromPlaceholder || translations.addFirstDate;
+
+        case 'to':
+          return toPlaceholder || translations.addSecondDate;
+
+        case 'time':
+          return timePlaceholder || translations.addTime;
+
+        default:
+          return translations.selectName.replace('%name%', name);
+      }
+    })();
+
+    const classes = classNames(modules_0c7b7d96.filter, modules_0c7b7d96[`${name}Input`], divider && modules_0c7b7d96[`${name}InputWithDivider`], 'ring-js-shortcuts');
+    return /*#__PURE__*/React.createElement(Input, {
+      autoComplete: "off",
+      borderless: true,
+      "data-name": name,
+      inputRef: this.inputRef,
+      className: classes,
+      value: displayText,
+      onChange: this.handleChange,
+      onFocus: onActivate,
+      onKeyDown: this.handleKeyDown,
+      onClear: onClear,
+      placeholder: placeholder
+    });
+  }
+
+}
+
+_defineProperty(DateInput, "propTypes", {
+  active: PropTypes.bool,
+  divider: PropTypes.bool,
+  name: PropTypes.string,
+  text: PropTypes.string,
+  hoverDate: dateType,
+  date: dateType,
+  time: PropTypes.string,
+  displayFormat: PropTypes.func,
+  hidden: PropTypes.bool,
+  translations: PropTypes.object,
+  fromPlaceholder: PropTypes.string,
+  toPlaceholder: PropTypes.string,
+  timePlaceholder: PropTypes.string,
+  onInput: PropTypes.func,
+  onActivate: PropTypes.func,
+  onConfirm: PropTypes.func,
+  onClear: PropTypes.func,
+  locale: PropTypes.object
+});
+
+_defineProperty(DateInput, "defaultProps", {
+  fromPlaceholder: null,
+  toPlaceholder: null,
+  timePlaceholder: null,
+  translations: {
+    addFirstDate: 'Add first date',
+    addSecondDate: 'Add second date',
+    addTime: 'Add time',
+    selectName: 'Select %name%'
+  }
+});
+
+export { DateInput as default };