@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/autofocus-ng/autofocus-ng.test.js

@@ -0,0 +1,49 @@
+/* global inject */
+
+import 'angular';
+import 'angular-mocks';
+
+import RingSelect from '../select-ng/select-ng';
+
+import AutoFocus from './autofocus-ng';
+
+describe('Autofocus Ng', () => {
+  let element;
+  let $compile;
+  let $scope;
+
+  beforeEach(window.module(AutoFocus));
+  beforeEach(window.module(RingSelect));
+
+  beforeEach(inject((_$compile_, $rootScope) => {
+    $compile = _$compile_;
+    $scope = $rootScope.$new();
+    $scope.vm = {
+      focus: false
+    };
+    element = $compile('<input rg-autofocus="vm.focus"/>')($scope);
+
+  }));
+
+  it('Should focus when flag changed', () => {
+
+    sandbox.spy(element[0], 'focus');
+
+    $scope.vm.focus = true;
+    $scope.$digest();
+
+    element[0].focus.should.have.been.called;
+  });
+
+  it('Should focus on select button', () => {
+    element = $compile('<rg-select rg-autofocus="vm.focus" options="item in []"/>')($scope);
+    const selectButton = element[0].querySelector('[data-test*=ring-select__focus]');
+
+    sandbox.spy(selectButton, 'focus');
+
+    $scope.vm.focus = true;
+    $scope.$digest();
+
+    selectButton.focus.should.have.been.called;
+  });
+});

package/components/avatar/avatar-example-datauri.d.ts

@@ -0,0 +1 @@
+export declare const avatarDataUri: string;

package/components/avatar/avatar-example-datauri.js

@@ -0,0 +1,24 @@
+// Taken from https://hub.jetbrains.com/api/rest/avatar/default?username=Jet%20Brains&dpr=2&size=56
+export const avatarDataUri = `data:image/svg+xml,${encodeURIComponent(`
+<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
+            <stop stop-color="#D50F6B" offset="0"/>
+            <stop stop-color="#E73AE8" offset="1"/>
+        </linearGradient>
+    </defs>
+    <g>
+        <rect fill="url(#gradient)"
+              x="0" y="0" width="40" height="40"
+              rx="3" ry="3"/>
+        <text x="5" y="19"
+              font-family="Arial, Helvetica, sans-serif"
+              font-size="15px"
+              letter-spacing="1"
+              fill="#FFFFFF">
+            <tspan>JB</tspan>
+            <tspan x="6" y="28">_</tspan>
+        </text>
+    </g>
+</svg>
+`)}`;

package/components/avatar/avatar.css

@@ -0,0 +1,27 @@
+@import "../global/variables.css";
+
+.avatar {
+  display: inline-block;
+  object-fit: cover;
+  object-position: center;
+
+  /* This is a "graceful degradation" fallback, while the real value is controlled by JS */
+
+  border-radius: var(--ring-border-radius);
+}
+
+.subavatar {
+  position: absolute;
+  top: 15px;
+  left: 27px;
+
+  border: 1px var(--ring-content-background-color) solid;
+}
+
+.empty {
+  display: inline-block;
+
+  box-sizing: border-box;
+
+  border: 1px solid var(--ring-borders-color);
+}

package/components/avatar/avatar.d.ts

@@ -0,0 +1,52 @@
+import React, { PureComponent, ImgHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Avatar
+ */
+export declare enum Size {
+    Size18 = 18,
+    Size20 = 20,
+    Size24 = 24,
+    Size28 = 28,
+    Size32 = 32,
+    Size40 = 40,
+    Size48 = 48,
+    Size56 = 56
+}
+export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
+    dpr: number;
+    size: Size | number;
+    subavatarSize: number;
+    url?: string | null | undefined;
+    round?: boolean | null | undefined;
+    subavatar?: string | null | undefined;
+    username?: string | null | undefined;
+    skipParams?: boolean | null | undefined;
+}
+export default class Avatar extends PureComponent<AvatarProps> {
+    static propTypes: {
+        dpr: PropTypes.Requireable<number>;
+        className: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<number>;
+        style: PropTypes.Requireable<object>;
+        url: PropTypes.Requireable<string>;
+        round: PropTypes.Requireable<boolean>;
+        subavatar: PropTypes.Requireable<string>;
+        subavatarSize: PropTypes.Requireable<number>;
+        username: PropTypes.Requireable<string>;
+        skipParams: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        dpr: number;
+        size: Size;
+        subavatarSize: number;
+        style: {};
+    };
+    state: {
+        errorUrl: string;
+    };
+    handleError: () => void;
+    handleSuccess: () => void;
+    render(): React.JSX.Element;
+}
+export type AvatarAttrs = JSX.LibraryManagedAttributes<typeof Avatar, AvatarProps>;

package/components/avatar/avatar.js

@@ -0,0 +1,98 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { encodeURL, isDataURI, parseQueryString } from '../global/url';
+import { getPixelRatio } from '../global/dom';
+import styles from './avatar.css';
+import FallbackAvatar from './fallback-avatar';
+/**
+ * @name Avatar
+ */
+export var Size;
+(function (Size) {
+    Size[Size["Size18"] = 18] = "Size18";
+    Size[Size["Size20"] = 20] = "Size20";
+    Size[Size["Size24"] = 24] = "Size24";
+    Size[Size["Size28"] = 28] = "Size28";
+    Size[Size["Size32"] = 32] = "Size32";
+    Size[Size["Size40"] = 40] = "Size40";
+    Size[Size["Size48"] = 48] = "Size48";
+    Size[Size["Size56"] = 56] = "Size56";
+})(Size || (Size = {}));
+export default class Avatar extends PureComponent {
+    static propTypes = {
+        dpr: PropTypes.number,
+        className: PropTypes.string,
+        size: PropTypes.number,
+        style: PropTypes.object,
+        url: PropTypes.string,
+        round: PropTypes.bool,
+        subavatar: PropTypes.string,
+        subavatarSize: PropTypes.number,
+        username: PropTypes.string,
+        skipParams: PropTypes.bool
+    };
+    static defaultProps = {
+        dpr: getPixelRatio(),
+        size: Size.Size20,
+        subavatarSize: Size.Size20 / 2,
+        style: {}
+    };
+    state = {
+        errorUrl: ''
+    };
+    handleError = () => {
+        this.setState({ errorUrl: this.props.url });
+    };
+    handleSuccess = () => {
+        this.setState({ errorUrl: '' });
+    };
+    render() {
+        const { size, url, dpr, style, round, subavatar, subavatarSize, username, skipParams, ...restProps } = this.props;
+        const sizeString = `${size}px`;
+        const subavatarSizeString = `${subavatarSize}px`;
+        const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
+        const styleObj = {
+            borderRadius: round ? '50%' : borderRadius,
+            height: sizeString,
+            width: sizeString,
+            ...style
+        };
+        const styleObjGroup = {
+            borderRadius: '2px',
+            height: subavatarSizeString,
+            width: subavatarSizeString,
+            ...style
+        };
+        if (!url || this.state.errorUrl === url) {
+            return (<span {...restProps} data-test="avatar" className={classNames(styles.avatar, this.props.className, { [styles.empty]: username == null })} style={styleObj}>{username != null && (<FallbackAvatar size={size} round={round} username={username}/>)}</span>);
+        }
+        let src = url;
+        if (!skipParams && !isDataURI(url)) {
+            const [urlStart, query] = url.split('?');
+            const queryParams = {
+                ...parseQueryString(query),
+                dpr,
+                size
+            };
+            src = encodeURL(urlStart, queryParams);
+        }
+        let subavatarSrc = null;
+        if (subavatar && !isDataURI(subavatar)) {
+            const [urlStart, query] = subavatar.split('?');
+            const queryParams = {
+                ...parseQueryString(query),
+                dpr,
+                subavatarSizeString
+            };
+            subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
+            return (<div>
+          <img {...restProps} onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.avatar, this.props.className)} style={styleObj} src={src} alt="User avatar"/>
+          <img {...restProps} data-test="avatar" onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.subavatar)} style={styleObjGroup} src={subavatarSrc} alt="Subavatar"/>
+        </div>);
+        }
+        else {
+            return (<img {...restProps} data-test="avatar" onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.avatar, this.props.className)} style={styleObj} src={src} alt="User avatar"/>);
+        }
+    }
+}

package/components/avatar/fallback-avatar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Size } from './avatar';
+export interface FallbackAvatarProps {
+    username: string;
+    size: Size;
+    round: boolean | null | undefined;
+}
+declare function FallbackAvatar({ username, size, round }: FallbackAvatarProps): React.JSX.Element;
+declare namespace FallbackAvatar {
+    var propTypes: {
+        username: PropTypes.Validator<string>;
+        size: PropTypes.Validator<number>;
+        round: PropTypes.Requireable<boolean>;
+    };
+}
+export default FallbackAvatar;

package/components/avatar/fallback-avatar.js

@@ -0,0 +1,113 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import getUID from '../global/get-uid';
+const colorPairs = [
+    ['#60A800', '#D5CA00'],
+    ['#21D370', '#03E9E1'],
+    ['#3BA1FF', '#36E97D'],
+    ['#00C243', '#00FFFF'],
+    ['#4BE098', '#627FFF'],
+    ['#168BFA', '#26F7C7'],
+    ['#9D4CFF', '#39D3C3'],
+    ['#0A81F6', '#0ACFF6'],
+    ['#765AF8', '#5A91F8'],
+    ['#9E54FF', '#0ACFF6'],
+    ['#B345F1', '#669DFF'],
+    ['#765AF8', '#C059EE'],
+    ['#9039D0', '#C239D0'],
+    ['#9F2AFF', '#FD56FD'],
+    ['#AB3AF2', '#E40568'],
+    ['#9F2AFF', '#E9A80B'],
+    ['#D50F6B', '#E73AE8'],
+    ['#ED5502', '#E73AE8'],
+    ['#ED358C', '#DBED18'],
+    ['#ED358C', '#F9902E'],
+    ['#FF7500', '#FFCA00']
+];
+const Sizes = {
+    18: {
+        radius: 2,
+        text: { x: 9, y: 13 },
+        fontSize: '11px',
+        textAnchor: 'middle'
+    },
+    24: {
+        radius: 3,
+        text: { x: 2, y: 13 },
+        fontSize: '11px',
+        underscore: { x: 3, y: 17 }
+    },
+    32: {
+        radius: 3,
+        text: { x: 3, y: 17 },
+        fontSize: '13px',
+        letterSpacing: 1,
+        underscore: { x: 4, y: 22 }
+    },
+    40: {
+        radius: 3,
+        text: { x: 5, y: 19 },
+        fontSize: '15px',
+        letterSpacing: 1,
+        underscore: { x: 6, y: 28 }
+    }
+};
+const sizeKeys = Object.keys(Sizes).map(Number);
+function extractLetters(name) {
+    const names = name.split(/[\s._]+/).filter(Boolean).map(word => Array.from(word));
+    if (names.length >= 2) {
+        return names[0][0].toUpperCase() + names[1][0].toUpperCase();
+    }
+    else if (names.length === 1) {
+        if (names[0].length >= 2) {
+            return names[0].slice(0, 2).join('').toUpperCase();
+        }
+        else {
+            return `${names[0][0].toUpperCase()}X`;
+        }
+    }
+    else {
+        return 'XX';
+    }
+}
+// https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0#gistcomment-2775538
+const BASE = 32;
+function hashCode(s) {
+    let h = 0;
+    for (let i = 0; i < s.length; i++) {
+        h = Math.imul(BASE - 1, h) + s.charCodeAt(i) | 0;
+    }
+    return h;
+}
+export default function FallbackAvatar({ username, size, round }) {
+    const hash = Math.abs(hashCode(username.toLowerCase()));
+    const [fromColor, toColor] = colorPairs[hash % colorPairs.length];
+    const possibleSizeKeys = sizeKeys.filter(key => key >= size);
+    const sizeKey = possibleSizeKeys.length > 0
+        ? Math.min(...possibleSizeKeys)
+        : Math.max(...sizeKeys);
+    const sizes = Sizes[sizeKey];
+    const radius = round ? '50%' : sizes.radius;
+    const gradientId = useMemo(() => getUID('gradient-'), []);
+    return (<svg viewBox={`0 0 ${sizeKey} ${sizeKey}`} xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop stopColor={fromColor} offset="0"/>
+          <stop stopColor={toColor} offset="1"/>
+        </linearGradient>
+      </defs>
+      <g>
+        <rect fill={`url(#${gradientId})`} x="0" y="0" width={sizeKey} height={sizeKey} rx={radius} ry={radius}/>
+        <text x={sizes.text.x} y={sizes.text.y} fontFamily="Arial, Helvetica, sans-serif" fontSize={sizes.fontSize} letterSpacing={sizes.letterSpacing} fill="#FFFFFF" textAnchor={sizes.textAnchor} cursor="default">
+          <tspan>{extractLetters(username)}</tspan>
+          {sizes.underscore && <tspan x={sizes.underscore.x} y={sizes.underscore.y}>{'_'}</tspan>}
+        </text>
+        <title>{username}</title>
+      </g>
+    </svg>);
+}
+FallbackAvatar.propTypes = {
+    username: PropTypes.string.isRequired,
+    size: PropTypes.number.isRequired,
+    round: PropTypes.bool
+};

package/components/avatar-editor-ng/avatar-editor-ng.css

@@ -0,0 +1,104 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+/* stylelint-disable selector-max-specificity */
+
+:global(.ring-avatar-editor) {
+  position: relative;
+
+  width: calc(unit * 5);
+  height: calc(unit * 5);
+  padding: 1px;
+
+  text-align: center;
+
+  &::after {
+    display: inline-block;
+
+    width: 0;
+    height: calc(unit * 5);
+
+    content: "";
+    vertical-align: middle;
+  }
+}
+
+:global(.ring-avatar-editor_right) {
+  float: right;
+}
+
+:global(.ring-avatar-editor:hover:not(:disabled, .ring-avatar-editor_controlled)) {
+  padding: 0;
+
+  border: 1px solid var(--ring-link-hover-color);
+
+  & :global(.ring-avatar-editor__icon) {
+    visibility: visible;
+  }
+
+  & :global(.ring-avatar-editor__img) {
+    outline: 0;
+  }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    content: "";
+
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+}
+
+:global(.ring-avatar-editor__img) {
+  max-width: calc(unit * 5);
+  max-height: calc(unit * 5);
+
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+:global(.ring-avatar-editor__file-input) {
+  position: absolute;
+  left: -10000px;
+
+  visibility: hidden;
+}
+
+:global(.ring-avatar-editor__icon) {
+  position: absolute;
+  top: 10px;
+  left: 0;
+
+  visibility: hidden;
+
+  width: 100%;
+
+  color: var(--ring-content-background-color);
+
+  line-height: 14px;
+}
+
+:global(.ring-avatar-editor__frame) {
+  display: inline-block;
+
+  padding: 0;
+
+  cursor: pointer;
+  vertical-align: top;
+
+  border: 1px solid var(--ring-disabled-color);
+}
+
+:global(.ring-avatar-editor__remove) {
+  display: inline-block;
+
+  margin-left: calc(unit * 2);
+
+  vertical-align: top;
+}

package/components/avatar-editor-ng/avatar-editor-ng.js

@@ -0,0 +1,133 @@
+import angular from 'angular';
+
+import pencilIcon from '@jetbrains/icons/pencil';
+
+import messageBundleNg from '../message-bundle-ng/message-bundle-ng';
+import alertService from '../alert-service/alert-service';
+import IconNG from '../icon-ng/icon-ng';
+
+import template from './avatar-editor-ng__template';
+import './avatar-editor-ng.css';
+
+const angularModule = angular.module('Ring.avatar-editor', [messageBundleNg, IconNG]);
+
+/**
+ * @name Avatar Editor Ng
+ */
+function rgAvatarEditor() {
+  return {
+    restrict: 'E',
+    scope: {
+      model: '=ngModel',
+      onSelect: '&',
+      default: '@',
+      ngDisabled: '=',
+      showDeleteButton: '=?',
+      showAddButton: '=?',
+      deleteLabel: '@',
+      addMessage: '@'
+    },
+    template,
+    transclude: true,
+    controller: [
+      '$scope', '$attrs', 'RingMessageBundle',
+      function controller($scope, $attrs, RingMessageBundle) {
+        let fileInput;
+        $scope.editIcon = pencilIcon;
+        $scope.showAddButton = 'showAddButton' in $scope ? $scope.showAddButton : true;
+        $scope.showDeleteButton = 'showDeleteButton' in $scope ? $scope.showDeleteButton : true;
+
+        if ('controls' in $attrs) {
+          $scope.controlled = true;
+        }
+
+        function createFileLoadListener(file) {
+          return readEvent => {
+            const data = readEvent.target.result;
+            const result = $scope.onSelect({name: file.name, data});
+            if (result && result.then) {
+              result.then(() => {
+                $scope.model = data;
+              });
+            } else if (result !== false) {
+              $scope.$apply(() => {
+                $scope.model = data;
+              });
+            }
+          };
+        }
+
+        this.registerFileInput = input => {
+          fileInput = input;
+          fileInput.addEventListener('change', e => {
+            let imageFileSelected = false;
+            for (let i = 0; i < e.target.files.length; i++) {
+              const file = e.target.files[i];
+              if (file.type.indexOf('image/') === 0) {
+                imageFileSelected = true;
+                const reader = new FileReader();
+                reader.onload = createFileLoadListener(file);
+                reader.readAsDataURL(file);
+                break;
+              }
+            }
+            if (e.target.files.length && !imageFileSelected) {
+              alertService.error(RingMessageBundle.avatareditor_noselected());
+            }
+          });
+        };
+
+        $scope.controls = {};
+
+        function onClick(e) {
+          e.stopPropagation();
+        }
+
+        $scope.controls.select = () => {
+          if (!FileReader) {
+            alertService.error(RingMessageBundle.avatareditor_nosupport());
+          } else {
+            fileInput.addEventListener('click', onClick);
+            fileInput.dispatchEvent(new MouseEvent('click'));
+            fileInput.removeEventListener('click', onClick);
+          }
+        };
+
+        $scope.controls.remove = () => {
+          const data = '';
+          const result = $scope.onSelect({name: data, data});
+          if (result && result.then) {
+            result.then(() => {
+              $scope.model = data;
+            });
+          } else if (result !== false) {
+            $scope.model = data;
+          }
+        };
+
+        $scope.getDeleteLabel = () => (
+          $scope.deleteLabel || RingMessageBundle.avatareditor_delete()
+        );
+
+        $scope.getAddMessage = () => (
+          $scope.addMessage || RingMessageBundle.avatareditor_add()
+        );
+      }
+    ]
+  };
+}
+
+function rgAvatarEditorFileInput() {
+  return {
+    restrict: 'A',
+    require: '^rgAvatarEditor',
+    link: function link(scope, iElement, iAttrs, avatarEditorCtrl) {
+      avatarEditorCtrl.registerFileInput(iElement[0]);
+    }
+  };
+}
+
+angularModule.directive('rgAvatarEditor', rgAvatarEditor);
+angularModule.directive('rgAvatarEditorFileInput', rgAvatarEditorFileInput);
+
+export default angularModule.name;

package/components/avatar-editor-ng/avatar-editor-ng.stories.js

@@ -0,0 +1,41 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import AvatarEditorNG from './avatar-editor-ng';
+
+export default {
+  title: 'Legacy Angular/Avatar Editor Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes:
+      'Allows to choose images to be uploaded as Data URI. On-select attribute will receive the * filename as `name` and the file contents as `data`.',
+    hermione: {skip: true}
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [AvatarEditorNG]).controller('testCtrl', function controller() {
+    this.data = `data:image/svg+xml;utf8,
+          <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="60" cy="60" r="50" style="fill: #00cc00"/>
+          </svg>
+        `;
+  });
+
+  return `
+      <div ng-controller="testCtrl as ctrl">
+        <rg-avatar-editor
+          on-select="ctrl.name = name"
+          delete-label="Clear"
+          ng-model="ctrl.data"
+        ></rg-avatar-editor>
+
+        <h3>{{ ctrl.name || 'No file name' }}</h3>
+        <img alt="Avatar" style="max-width: 300px; max-height: 300px;" ng-src="{{ctrl.data}}" />
+      </div>
+    `;
+};
+
+basic.storyName = 'Avatar Editor Ng';