@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/hub-source/hub-source.js

@@ -0,0 +1,130 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+
+const defaultOptions = {
+  searchMax: 20,
+  searchSideThreshold: 100,
+  queryFormatter: query => `${query} or ${query}*`
+};
+/**
+ * HubSource is designed to speed up search requests for small installations.
+ * If there are less than "searchSideThreshold" items, it uses client-side filtering
+ * of cached results to greatly increase search speed. Useful for completion and
+ * select data source.
+ */
+
+class HubSource {
+  constructor(auth, relativeUrl, options) {
+    this.http = auth.http;
+    this.relativeUrl = relativeUrl;
+    this.options = Object.assign({}, defaultOptions, options);
+    this.storedData = null;
+    this.isClientSideSearch = null;
+    this.filterFn = null;
+  }
+
+  makeRequest(queryParams) {
+    return this.http.get(this.relativeUrl, {
+      query: queryParams
+    });
+  }
+
+  async makeCachedRequest(params) {
+    if (this.storedData) {
+      return this.storedData;
+    }
+
+    const res = await this.makeRequest(params);
+    this.storedData = res;
+    return res;
+  }
+
+  static mergeParams(params, toMerge) {
+    return Object.assign({}, params, toMerge);
+  }
+
+  checkIsClientSideSearch(res) {
+    return res.total <= this.options.searchSideThreshold;
+  }
+
+  getDefaultFilterFn(query) {
+    if (!query) {
+      return () => true;
+    }
+
+    return it => it.name.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+  }
+
+  formatQuery(query) {
+    return query ? this.options.queryFormatter(query) : '';
+  }
+
+  static validateInputParams(params) {
+    if (params.top) {
+      throw new Error('HubSource: params.top should not be filled, configure "options.searchMax" instead');
+    }
+
+    if (params.query) {
+      throw new Error('HubSource: params.query should not be filled, configure "options.queryFormatter" instead');
+    }
+  }
+
+  processResults(res) {
+    const items = res[this.relativeUrl] || [];
+
+    if (this.isClientSideSearch) {
+      return items.filter(it => this.filterFn(it)).slice(0, this.options.searchMax);
+    }
+
+    return items;
+  }
+
+  async sideDetectionRequest(params, query) {
+    const res = await this.makeCachedRequest(HubSource.mergeParams(params, {
+      $top: this.options.searchSideThreshold
+    }));
+    this.isClientSideSearch = this.checkIsClientSideSearch(res);
+
+    if (!this.isClientSideSearch) {
+      return this.doServerSideSearch(params, query);
+    }
+
+    return res;
+  }
+
+  doClientSideSearch(params) {
+    return this.makeCachedRequest(HubSource.mergeParams(params, {
+      $top: this.constructor.TOP_ALL
+    }));
+  }
+
+  doServerSideSearch(params, query) {
+    return this.makeRequest(HubSource.mergeParams(params, {
+      query: this.formatQuery(query),
+      $top: this.options.searchMax
+    }));
+  }
+
+  getValueFromSuitableSource(query, params) {
+    if (this.isClientSideSearch === null) {
+      return this.sideDetectionRequest(params, query);
+    }
+
+    if (this.isClientSideSearch) {
+      return this.doClientSideSearch(params);
+    }
+
+    return this.doServerSideSearch(params, query);
+  }
+
+  async get(query, params, filterFn) {
+    HubSource.validateInputParams(params);
+    this.filterFn = filterFn || this.getDefaultFilterFn(query);
+    const res = await this.getValueFromSuitableSource(query, params);
+    return this.processResults(res);
+  }
+
+}
+
+_defineProperty(HubSource, "TOP_ALL", -1);
+
+export { HubSource as default };

package/dist/hub-source/hub-source__user.js

@@ -0,0 +1,28 @@
+import HTTP from '../http/http.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'es6-error';
+import '../global/url.js';
+
+const DEFAULT_FIELDS = 'id,name,login,banned,banReason,profile(email/email,avatar/url)';
+function convertUserForCard(hubUser) {
+  let serverUri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return {
+    name: hubUser.name,
+    login: hubUser.login,
+    banned: hubUser.banned,
+    banReason: hubUser.banReason,
+    email: hubUser.profile.email && hubUser.profile.email.email,
+    avatarUrl: hubUser.profile.avatar.url,
+    href: `${serverUri}users/${hubUser.id}`
+  };
+}
+function createHubUserCardSource(auth, userId) {
+  let fields = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_FIELDS;
+  const http = new HTTP(auth);
+  return async function getHubUser() {
+    const hubUser = await http.get(`${auth.config.serverUri}api/rest/users/${userId}?fields=${fields}`);
+    return convertUserForCard(hubUser, auth.config.serverUri);
+  };
+}
+
+export { convertUserForCard, createHubUserCardSource };

package/dist/hub-source/hub-source__users-groups.js

@@ -0,0 +1,62 @@
+import HubSource from './hub-source.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+
+const defaultOptions = {
+  searchMax: 20,
+  searchSideThreshold: 200
+};
+class HubSourceUsersGroups {
+  constructor(auth, options) {
+    this.auth = auth;
+    this.options = Object.assign({}, defaultOptions, options);
+    this.usersSource = new HubSource(auth, 'users', {
+      searchMax: this.options.searchMax,
+      searchSideThreshold: this.options.searchSideThreshold,
+      queryFormatter: query => `nameStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)} or loginStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)}`
+    });
+    this.groupsSource = new HubSource(auth, 'usergroups', {
+      searchMax: this.options.searchMax,
+      searchSideThreshold: this.options.searchSideThreshold
+    });
+  }
+
+  static wrapMultiwordQuery(query) {
+    if (query && query.indexOf(' ') !== -1) {
+      return `{${query}}`;
+    }
+
+    return query;
+  }
+
+  createUsersFilterFn(query) {
+    if (!query) {
+      return () => true;
+    }
+
+    const normalizedQuery = query.toLowerCase();
+    return it => it.name.toLowerCase().indexOf(normalizedQuery) !== -1 || it.login.toLowerCase().indexOf(normalizedQuery) !== -1;
+  }
+
+  getUsers() {
+    let query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return this.usersSource.get(query, {
+      fields: 'id,name,login,total,profile/avatar/url',
+      orderBy: 'name'
+    }, this.createUsersFilterFn(query));
+  }
+
+  getGroups() {
+    let query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return this.groupsSource.get(query, {
+      fields: 'id,name,total,userCount,iconUrl',
+      orderBy: 'name'
+    });
+  }
+
+  getUserAndGroups(query) {
+    return Promise.all([this.getUsers(query), this.getGroups(query)]);
+  }
+
+}
+
+export { HubSourceUsersGroups as default };

package/dist/icon/icon.js

@@ -0,0 +1,105 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import deprecate from 'util-deprecate';
+import { Color, Size } from './icon__constants.js';
+export { Size } from './icon__constants.js';
+import { m as modules_29747b80 } from '../_helpers/icon.js';
+import IconSVG from './icon__svg.js';
+import '../global/memoize.js';
+
+const warnSize = deprecate(() => {}, `\`size\`, \`width\` and \`height\` props are not recommended to use in Ring UI \`Icon\` component. The intrinsic sizes of SVG icon (\`width\` and \`height\` SVG attributes) are used instead.
+
+We strongly recommend to use icons handcrafted for particular sizes. If your icon doesn't exist in the desired size, please ask your designer to draw one. "Responsive" checkmark should be unchecked when exporting icon.'`);
+class Icon extends PureComponent {
+  warnSize() {
+    if (this.props.suppressSizeWarning) {
+      return;
+    }
+
+    warnSize();
+  }
+
+  getStyle() {
+    const {
+      size,
+      width,
+      height
+    } = this.props;
+
+    if (width || height) {
+      this.warnSize();
+      return {
+        width,
+        height
+      };
+    }
+
+    if (size) {
+      this.warnSize();
+      return {
+        width: size,
+        height: size
+      };
+    }
+
+    return null;
+  }
+
+  render() {
+    const {
+      className,
+      size,
+      color,
+      loading,
+      glyph: Glyph,
+      width,
+      height,
+      suppressSizeWarning,
+      ...restProps
+    } = this.props;
+
+    if (!Glyph) {
+      return null;
+    }
+
+    const classes = classNames(modules_29747b80.icon, {
+      [modules_29747b80[color]]: !!color,
+      [modules_29747b80.loading]: loading
+    }, className);
+    return /*#__PURE__*/React.createElement("span", _extends({}, restProps, {
+      className: classes
+    }), typeof Glyph === 'string' ? /*#__PURE__*/React.createElement(IconSVG, {
+      src: Glyph,
+      style: this.getStyle()
+    }) : /*#__PURE__*/React.createElement(Glyph, {
+      className: modules_29747b80.glyph,
+      style: this.getStyle()
+    }));
+  }
+
+}
+
+_defineProperty(Icon, "propTypes", {
+  className: PropTypes.string,
+  color: PropTypes.string,
+  glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]).isRequired,
+  height: PropTypes.number,
+  size: PropTypes.number,
+  width: PropTypes.number,
+  loading: PropTypes.bool,
+  suppressSizeWarning: PropTypes.bool
+});
+
+_defineProperty(Icon, "defaultProps", {
+  className: '',
+  color: Color.DEFAULT,
+  glyph: ''
+});
+
+_defineProperty(Icon, "Color", Color);
+
+_defineProperty(Icon, "Size", Size);
+
+export { Icon as default };

package/dist/icon/icon__constants.js

@@ -0,0 +1,33 @@
+/**
+ * Commonly used icon colors.
+ * @enum {string}
+ */
+const Color = {
+  BLUE: 'blue',
+  DEFAULT: '',
+  GRAY: 'gray',
+  GREEN: 'green',
+  MAGENTA: 'magenta',
+  RED: 'red',
+  WHITE: 'white'
+};
+/**
+ * @enum {number}
+ */
+
+const Size = {
+  Size12: 12,
+  Size14: 14,
+  Size16: 16,
+  Size18: 18,
+  Size20: 20,
+  Size24: 24,
+  Size32: 32,
+  Size40: 40,
+  Size48: 48,
+  Size64: 64,
+  Size96: 96,
+  Size128: 128
+};
+
+export { Color, Size };

package/dist/icon/icon__svg.js

@@ -0,0 +1,81 @@
+import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { memo } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import memoize from '../global/memoize.js';
+import { m as modules_29747b80 } from '../_helpers/icon.js';
+
+function convertReactSVGDOMProperty(str) {
+  return str.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());
+}
+
+function serializeAttrs(map) {
+  const res = {};
+
+  for (let i = 0; i < map.length; i++) {
+    const key = map[i].name;
+    let prop = key;
+
+    if (key === 'class') {
+      prop = 'className';
+    } else if (!key.startsWith('data-')) {
+      prop = convertReactSVGDOMProperty(key);
+    }
+
+    res[prop] = map[i].value;
+  }
+
+  return res;
+}
+
+function extractSVGProps(svgNode) {
+  const map = svgNode.attributes;
+  return map.length > 0 ? serializeAttrs(map) : null;
+}
+
+const getSVGFromSource = memoize(src => {
+  const svgContainer = document.createElement('div');
+  svgContainer.innerHTML = src;
+  const svg = svgContainer.firstElementChild;
+  svg.remove ? svg.remove() : svgContainer.removeChild(svg);
+  return {
+    props: extractSVGProps(svg),
+    html: svg.innerHTML
+  };
+});
+
+function isCompatibilityMode(iconSrc) {
+  const hasWidth = /width="[\d\.]+"/ig.test(iconSrc);
+  const hasHeight = /height="[\d\.]+"/ig.test(iconSrc);
+  return !hasWidth || !hasHeight;
+}
+
+function IconSVG(_ref) {
+  let {
+    src,
+    className,
+    ...rest
+  } = _ref;
+  const glyphClasses = classNames(modules_29747b80.glyph, {
+    [modules_29747b80.compatibilityMode]: isCompatibilityMode(src)
+  }, className);
+  const {
+    props,
+    html
+  } = getSVGFromSource(src);
+  return /*#__PURE__*/React.createElement("svg", _extends({}, props, rest, {
+    className: glyphClasses,
+    dangerouslySetInnerHTML: {
+      __html: html
+    }
+  }));
+}
+
+IconSVG.propTypes = {
+  className: PropTypes.string,
+  src: PropTypes.string.isRequired,
+  style: PropTypes.object
+};
+var IconSVG$1 = /*#__PURE__*/memo(IconSVG);
+
+export { IconSVG$1 as default };

package/dist/icon/index.js

@@ -0,0 +1,10 @@
+export { default } from './icon.js';
+export { Size } from './icon__constants.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'react';
+import 'prop-types';
+import 'classnames';
+import 'util-deprecate';
+import '../_helpers/icon.js';
+import './icon__svg.js';
+import '../global/memoize.js';

package/dist/icon-ng/icon-ng.js

@@ -0,0 +1,89 @@
+import angular from 'angular';
+import { Color } from '../icon/icon__constants.js';
+import RingTemplateNg from '../template-ng/template-ng.js';
+import { m as modules_29747b80 } from '../_helpers/icon.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import '../global/ring-angular-component.js';
+
+/**
+ * @name Icon Ng
+ */
+
+const angularModule = angular.module('Ring.icon', [RingTemplateNg]);
+const BASE64_PREFIX = 'data:image/svg+xml;base64,';
+angularModule.directive('rgIcon', function rgIconDirective() {
+  return {
+    restrict: 'E',
+    scope: {
+      glyph: '@',
+      loading: '=?',
+      color: '@?',
+      size: '@?',
+      height: '@?',
+      width: '@?'
+    },
+    template: `<span class="${modules_29747b80.icon}" rg-template="normalizedGlyph" rg-template-class="${modules_29747b80.glyph}"></span>`,
+    controller: ["$scope", $scope => {
+      function decodeBase64IfNeeded(glyph) {
+        // This hack allows passing SVG content as string from angular templates like
+        // <rg-icon glyph="data:image/svg+xml;base64,PHN2ZyB4bWx...></rg-icon>
+        const isEncoded = glyph.indexOf(BASE64_PREFIX) === 0;
+        return isEncoded ? window.atob(glyph.replace(BASE64_PREFIX, '')) : glyph;
+      }
+
+      $scope.$watch('glyph', value => {
+        if (!value) {
+          return;
+        }
+
+        $scope.normalizedGlyph = decodeBase64IfNeeded(value);
+      });
+    }],
+    link: function link(scope, iElement, iAttrs) {
+      iAttrs.$addClass('ring-icon'); // TODO: We keep this class for now for compatibility reasons (styles overrides)
+
+      scope.$watch('loading', value => {
+        if (value) {
+          iAttrs.$addClass(modules_29747b80.loading);
+        } else {
+          iAttrs.$removeClass(modules_29747b80.loading);
+        }
+      });
+      scope.$watch(() => scope.color && Color[scope.color] && modules_29747b80[Color[scope.color]], (colorClass, prevColorClass) => {
+        if (colorClass) {
+          iAttrs.$addClass(colorClass); // Remove previous class, but don't remove initial one
+
+          if (prevColorClass && prevColorClass !== colorClass) {
+            iAttrs.$removeClass(prevColorClass);
+          }
+        }
+      });
+      scope.$watchGroup(['size', 'width', 'height'], _ref => {
+        let [size, width, height] = _ref;
+        const svgNode = iElement[0].querySelector('svg');
+
+        if (!svgNode) {
+          return;
+        }
+
+        if (size && !width && !height) {
+          const sizeString = `${size}px`;
+          const style = `width: ${sizeString}; height: ${sizeString};`;
+          svgNode.setAttribute('style', style);
+          return;
+        }
+
+        if (width) {
+          svgNode.setAttribute('style', `width: ${width}px;`);
+        }
+
+        if (height) {
+          svgNode.setAttribute('style', `height: ${height}px;`);
+        }
+      });
+    }
+  };
+});
+var IconNG = angularModule.name;
+
+export { IconNG as default };