@jetbrains/ring-ui 4.2.7 → 4.2.10

package/dist/alert/alert.js

@@ -0,0 +1,262 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import exceptionIcon from '@jetbrains/icons/exception';
+import checkmarkIcon from '@jetbrains/icons/checkmark';
+import warningIcon from '@jetbrains/icons/warning';
+import closeIcon from '@jetbrains/icons/close';
+import Icon from '../icon/icon.js';
+import LoaderInline from '../loader-inline/loader-inline.js';
+import { getRect } from '../global/dom.js';
+import joinDataTestAttributes from '../global/data-tests.js';
+export { default as Container } from './container.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
+import '../global/memoize.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 'react-dom';
+
+var modules_e02b3280 = {"unit":"8px","animation-duration":"300ms","animation-easing":"ease-out","alert":"alert_rui_2b32","alertInline":"alertInline_rui_2b32","error":"error_rui_2b32","icon":"icon_rui_2b32","caption":"caption_rui_2b32","link":"link_rui_2b32","withCloseButton":"withCloseButton_rui_2b32","badge":"badge_rui_2b32","loader":"loader_rui_2b32","close":"close_rui_2b32","animationOpen":"animationOpen_rui_2b32","show":"show_rui_2b32","animationClosing":"animationClosing_rui_2b32","animationShaking":"animationShaking_rui_2b32","shaking":"shaking_rui_2b32"};
+
+const ANIMATION_TIME = 500;
+/**
+ * @name Alert
+ */
+
+/**
+ * List of available alert types.
+ * @enum {string}
+ */
+
+const Type = {
+  ERROR: 'error',
+  MESSAGE: 'message',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  LOADING: 'loading'
+};
+/**
+ * Lookup table of alert type to icon modifier.
+ * @type {Object.<Type, string>}
+ */
+
+const TypeToIcon = {
+  [Type.ERROR]: exceptionIcon,
+  [Type.SUCCESS]: checkmarkIcon,
+  [Type.WARNING]: warningIcon
+};
+/**
+ * Lookup table of alert type to icon color.
+ * @type {Object.<Type, Icon.Color>}
+ */
+
+const TypeToIconColor = {
+  [Type.ERROR]: Icon.Color.RED,
+  [Type.SUCCESS]: Icon.Color.GREEN,
+  [Type.WARNING]: Icon.Color.WHITE
+};
+/**
+ * @constructor
+ * @name Alert
+ * @extends {ReactComponent}
+ */
+
+/**
+ * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
+ */
+
+class Alert extends PureComponent {
+  constructor() {
+    var _this;
+
+    super(...arguments);
+    _this = this;
+
+    _defineProperty(this, "state", {
+      height: null
+    });
+
+    _defineProperty(this, "closeRequest", function () {
+      _this.startCloseAnimation();
+
+      return _this.props.onCloseRequest(...arguments);
+    });
+
+    _defineProperty(this, "startCloseAnimation", () => {
+      const height = getRect(this.node).height;
+      this.setState({
+        height
+      });
+    });
+
+    _defineProperty(this, "_handleCaptionsLinksClick", evt => {
+      if (evt.target.matches('a')) {
+        this.closeRequest(evt);
+      }
+    });
+
+    _defineProperty(this, "storeAlertRef", node => {
+      this.node = node;
+    });
+  }
+
+  componentDidMount() {
+    if (this.props.timeout > 0) {
+      this.hideTimeout = setTimeout(this.closeRequest, this.props.timeout);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.isClosing) {
+      this._close();
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.hideTimeout);
+  }
+
+  _close() {
+    this.startCloseAnimation();
+    setTimeout(() => {
+      this.props.onClose();
+    }, ANIMATION_TIME);
+  }
+  /**
+   * @param {SyntheticEvent} evt
+   * @private
+   */
+
+
+  /**
+   * @private
+   */
+  _getCaption() {
+    return /*#__PURE__*/React.createElement("span", {
+      className: classNames(modules_e02b3280.caption, this.props.captionClassName, {
+        [modules_e02b3280.withCloseButton]: this.props.closeable
+      }),
+      onClick: this._handleCaptionsLinksClick // We only process clicks on `a` elements, see above
+      ,
+      role: "presentation"
+    }, this.props.children);
+  }
+  /**
+   * @private
+   * @return {XML|string}
+   */
+
+
+  _getIcon() {
+    const glyph = TypeToIcon[this.props.type];
+
+    if (glyph) {
+      return /*#__PURE__*/React.createElement(Icon, {
+        glyph: glyph,
+        className: modules_e02b3280.icon,
+        color: TypeToIconColor[this.props.type] || Icon.Color.DEFAULT
+      });
+    } else if (this.props.type === Type.LOADING) {
+      return /*#__PURE__*/React.createElement(LoaderInline, {
+        className: modules_e02b3280.loader,
+        theme: LoaderInline.Theme.DARK
+      });
+    }
+
+    return '';
+  }
+
+  render() {
+    const {
+      type,
+      inline,
+      isClosing,
+      isShaking,
+      closeButtonClassName,
+      showWithAnimation,
+      className,
+      'data-test': dataTest
+    } = this.props;
+    const classes = classNames(className, {
+      [modules_e02b3280.alert]: true,
+      [modules_e02b3280.animationOpen]: showWithAnimation,
+      [modules_e02b3280.error]: type === 'error',
+      [modules_e02b3280.alertInline]: inline,
+      [modules_e02b3280.animationClosing]: isClosing,
+      [modules_e02b3280.animationShaking]: isShaking
+    });
+    const style = this.state.height ? {
+      marginBottom: -this.state.height
+    } : null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes,
+      "data-test": joinDataTestAttributes('alert', dataTest),
+      "data-test-type": type,
+      style: style,
+      ref: this.storeAlertRef
+    }, this._getIcon(), this._getCaption(), this.props.closeable ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classNames(modules_e02b3280.close, closeButtonClassName),
+      "data-test": "alert-close",
+      "aria-label": "close alert",
+      onClick: this.closeRequest
+    }, /*#__PURE__*/React.createElement(Icon, {
+      glyph: closeIcon
+    })) : '');
+  }
+
+}
+
+_defineProperty(Alert, "propTypes", {
+  timeout: PropTypes.number,
+
+  /**
+   * Fires when alert starts closing if timeout is out or user clicks "Close" button
+   */
+  onCloseRequest: PropTypes.func,
+  onClose: PropTypes.func,
+  isShaking: PropTypes.bool,
+  isClosing: PropTypes.bool,
+
+  /**
+   * Whether an alert is rendered inside an **Alerts** container
+   * or standalone.
+   */
+  inline: PropTypes.bool,
+  showWithAnimation: PropTypes.bool,
+  closeable: PropTypes.bool,
+  type: PropTypes.oneOf(Object.values(Type)),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  captionClassName: PropTypes.string,
+  closeButtonClassName: PropTypes.string,
+  'data-test': PropTypes.string
+});
+
+_defineProperty(Alert, "defaultProps", {
+  closeable: true,
+  showWithAnimation: true,
+  type: Type.MESSAGE,
+  inline: true,
+  isClosing: false,
+  isShaking: false,
+  timeout: 0,
+  onClose: () => {},
+  onCloseRequest: () => {}
+});
+
+_defineProperty(Alert, "Type", Type);
+
+export { ANIMATION_TIME, Alert as default };

package/dist/alert/container.js

@@ -0,0 +1,48 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent, Children, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+var modules_fc8df42d = {"unit":"8px","alertContainer":"alertContainer_rui_a9a3","alertInContainer":"alertInContainer_rui_a9a3 alert_rui_2b32"};
+
+/**
+ * @name Alert Container
+ * @description Displays a stack of alerts on top of the page.
+ * @extends {PureComponent}
+ */
+
+class Alerts extends PureComponent {
+  render() {
+    const {
+      children,
+      className,
+      ...restProps
+    } = this.props;
+    const classes = classNames(modules_fc8df42d.alertContainer, className);
+    const show = Children.count(children) > 0;
+
+    if (!show) {
+      return null;
+    }
+
+    return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
+      "data-test": "alert-container",
+      className: classes,
+      "aria-live": "polite"
+    }, restProps), Children.map(children, child => {
+      const alertClassNames = classNames(modules_fc8df42d.alertInContainer, child.props.className);
+      return /*#__PURE__*/cloneElement(child, {
+        className: alertClassNames
+      });
+    })), document.body);
+  }
+
+}
+
+_defineProperty(Alerts, "propTypes", {
+  children: PropTypes.node,
+  className: PropTypes.string
+});
+
+export { Alerts as default };

package/dist/alert-service/alert-service.js

@@ -0,0 +1,173 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React from 'react';
+import { render } from '../global/react-render-adapter.js';
+import getUID from '../global/get-uid.js';
+import Alert, { ANIMATION_TIME } from '../alert/alert.js';
+import Alerts from '../alert/container.js';
+import 'react-dom';
+import 'classnames';
+import 'prop-types';
+import '@jetbrains/icons/exception';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/warning';
+import '@jetbrains/icons/close';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
+import '../global/memoize.js';
+import '../loader-inline/loader-inline.js';
+import '../global/theme.js';
+import '../global/data-tests.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/dom.js';
+
+/**
+ * @name Alert Service
+ */
+
+class AlertService {
+  constructor() {
+    _defineProperty(this, "defaultTimeout", 0);
+
+    _defineProperty(this, "showingAlerts", []);
+
+    _defineProperty(this, "containerElement", document.createElement('div'));
+  }
+
+  _getShowingAlerts() {
+    return [...this.showingAlerts];
+  }
+
+  renderAlertContainer(alerts) {
+    if (alerts.length === 0) {
+      return /*#__PURE__*/React.createElement("span", null);
+    }
+
+    return /*#__PURE__*/React.createElement(Alerts, null, alerts.map(alert => {
+      const {
+        message,
+        key,
+        ...rest
+      } = alert;
+      return /*#__PURE__*/React.createElement(Alert, _extends({
+        key: key
+      }, rest), message);
+    }));
+  }
+  /**
+   * Renders alert container into virtual node to skip maintaining container
+   */
+
+
+  renderAlerts() {
+    render(this.renderAlertContainer(this.showingAlerts), this.containerElement);
+  }
+
+  findSameAlert(message, type) {
+    return this.showingAlerts.filter(it => it.type === type && it.message === message)[0];
+  }
+
+  startAlertClosing(alert) {
+    alert.isClosing = true;
+    this.renderAlerts();
+  }
+
+  remove(key) {
+    const alertToClose = this.showingAlerts.filter(alert => alert.key === key)[0];
+
+    if (!alertToClose) {
+      return;
+    }
+
+    this.startAlertClosing(alertToClose);
+  }
+
+  removeWithoutAnimation(key) {
+    this.showingAlerts = this.showingAlerts.filter(alert => alert.key !== key);
+    this.renderAlerts();
+  }
+
+  stopShakingWhenAnimationDone(shakingAlert) {
+    setTimeout(() => {
+      shakingAlert.showWithAnimation = false;
+      shakingAlert.isShaking = false;
+      this.renderAlerts();
+    }, ANIMATION_TIME);
+  }
+
+  addAlert(message, type) {
+    let timeout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.defaultTimeout;
+    let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    const {
+      onCloseRequest,
+      onClose,
+      ...restOptions
+    } = options;
+    const sameAlert = this.findSameAlert(message, type);
+
+    if (sameAlert) {
+      sameAlert.isShaking = true;
+      this.renderAlerts();
+      this.stopShakingWhenAnimationDone(sameAlert);
+      return sameAlert.key;
+    }
+
+    const alert = {
+      key: getUID('alert-service-'),
+      message,
+      type,
+      timeout,
+      isClosing: false,
+      onCloseRequest: () => {
+        onCloseRequest && onCloseRequest();
+        this.startAlertClosing(alert);
+      },
+      onClose: () => {
+        onClose && onClose();
+        this.removeWithoutAnimation(alert.key);
+      },
+      ...restOptions
+    };
+    this.showingAlerts = [alert, ...this.showingAlerts];
+    this.renderAlerts();
+    return alert.key;
+  }
+
+  setDefaultTimeout(timeout) {
+    this.defaultTimeout = timeout;
+  }
+
+  error(message, timeout) {
+    return this.addAlert(message, Alert.Type.ERROR, timeout);
+  }
+
+  message(message, timeout) {
+    return this.addAlert(message, Alert.Type.MESSAGE, timeout);
+  }
+
+  warning(message, timeout) {
+    return this.addAlert(message, Alert.Type.WARNING, timeout);
+  }
+
+  successMessage(message, timeout) {
+    return this.addAlert(message, Alert.Type.SUCCESS, timeout);
+  }
+
+  loadingMessage(message, timeout) {
+    return this.addAlert(message, Alert.Type.LOADING, timeout);
+  }
+
+}
+
+const alertService = new AlertService();
+
+export { alertService as default };

package/dist/analytics/analytics.js

@@ -0,0 +1,118 @@
+import 'core-js/modules/es.string.replace.js';
+
+/**
+ * @name Analytics
+ */
+class Analytics {
+  constructor() {
+    this._plugins = [];
+  }
+
+  config(plugins) {
+    this._plugins = plugins;
+  }
+
+  track(rawTrackingData,
+  /* optional */
+  additionalData) {
+    if (!rawTrackingData) {
+      return;
+    }
+
+    let splitIdx = rawTrackingData.indexOf(':');
+
+    if (splitIdx < 0) {
+      splitIdx = rawTrackingData.indexOf('_');
+    }
+
+    if (splitIdx < 0) {
+      splitIdx = rawTrackingData.length;
+    }
+
+    const category = rawTrackingData.substr(0, splitIdx);
+    const subcategory = rawTrackingData.substr(splitIdx + 1);
+    this.trackEvent(category, subcategory, additionalData);
+  }
+
+  trackPageView(path) {
+    this._plugins.forEach(plugin => {
+      plugin.trackPageView(path);
+    });
+  }
+
+  trackEvent(category, action,
+  /* optional */
+  additionalData) {
+    const subaction = additionalData ? action + this._buildSuffix(additionalData) : null;
+
+    this._plugins.forEach(plugin => {
+      if (plugin.serializeAdditionalInfo) {
+        plugin.trackEvent(category, action);
+
+        if (subaction) {
+          plugin.trackEvent(category, subaction);
+        }
+      } else {
+        plugin.trackEvent(category, action, additionalData);
+      }
+    });
+  }
+
+  trackShortcutEvent(category, action,
+  /* optional */
+  additionalData) {
+    this.trackEvent(category, action, additionalData);
+    this.trackEvent('ring-shortcut', "".concat(category, "$").concat(action), additionalData);
+  }
+
+  trackEntityProperties(entityName, entity, propertiesNames,
+  /* optional */
+  additionalData) {
+    for (let i = 0; i < propertiesNames.length; ++i) {
+      const keys = propertiesNames[i].split('.');
+      let value = entity;
+
+      if (!keys.length) {
+        continue;
+      }
+
+      for (let j = 0; j < keys.length; ++j) {
+        if (value.hasOwnProperty(keys[j])) {
+          value = value[keys[j]];
+        } else {
+          value = 'no-value';
+          break;
+        }
+      }
+
+      if (typeof value === 'string') {
+        value = value.toLowerCase().replace(/[._]+/g, '-');
+      }
+
+      const resultAction = "".concat(keys.join('-'), "__").concat(value);
+      this.trackEvent(entityName, resultAction, additionalData);
+    }
+  }
+
+  _buildSuffix(additionalData) {
+    if (!additionalData) {
+      return '';
+    }
+
+    let suffix = '';
+    let key;
+
+    for (key in additionalData) {
+      if (additionalData.hasOwnProperty(key)) {
+        suffix += "__".concat(key, "$").concat(additionalData[key]);
+      }
+    }
+
+    return suffix;
+  }
+
+}
+
+var analyticsInstance = new Analytics();
+
+export { analyticsInstance as default };