@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/message-bundle-ng/message-bundle-ng.js

@@ -0,0 +1,67 @@
+import angular from 'angular';
+/**
+ * This service is used by directive to correctly show messages.
+ * You can decorate this service to provide your own localized messages.
+ */
+const angularModule = angular.module('Ring.message-bundle', []);
+
+/**
+ * Empty i18n function. If project supports localization, it should decorate i18n
+ * with translating function
+ */
+function emptyI18n() {
+  return str => str;
+}
+
+function RingMessageBundle(ringI18n) {
+  const i18n = ringI18n;
+
+  /* eslint-disable camelcase */
+  this.form_required = () => i18n('Value is required');
+  this.form_invalid = () => i18n('Value is invalid');
+  this.form_url = () => i18n('Should be a valid URL');
+  this.form_email = () => i18n('Should be a valid email');
+  this.form_number = () => i18n('Should be a number');
+  this.form_maxlength = () => i18n('Is too long');
+  this.form_minlength = () => i18n('Is too short');
+  this.form_pattern = () => i18n('Doesn\'t match the pattern');
+  this.form_equalvalue = () => i18n('Is not the same');
+  this.form_unique = () => i18n('Is not unique');
+  this.form_max = () => i18n('Is out of range');
+  this.form_min = () => i18n('Is out of range');
+  this.form_save = () => i18n('Save');
+  this.form_saved = () => i18n('Saved');
+  this.form_cancel = () => i18n('Cancel');
+  this.avatareditor_nosupport = () => i18n('Sorry, your browser doesn\'t support File API');
+  this.avatareditor_noselected = () => i18n('No image file was selected');
+  this.avatareditor_delete = () => i18n('Delete Image');
+  this.avatareditor_add = () => i18n('Add Image');
+  this.errorpage_seriouslywrong = () => i18n('Oh-oh... Something went seriously wrong.');
+  this.errorpage_offline = () => i18n('There\'s nothing we can do: The server seems to be offline.');
+  this.errorpage_disconnected = () => i18n('Disconnected');
+  this.errorpage_disconnectedmsg = () => i18n('No, no one\'s there.');
+  this.errorpage_401 = () => i18n('Authorization required');
+  this.errorpage_401msg = () => i18n('You have requested access to a page that requires authorization, but the request is missing valid authentication credentials. It can also mean that your account has been banned.');
+  this.errorpage_403 = () => i18n('Woah, you can\'t touch this!');
+  this.errorpage_403msg = () => i18n('Unfortunately, you are not allowed to access the page you\'ve requested. It seems you don\'t have sufficient permissions.');
+  this.errorpage_404 = () => i18n('Nope, can\'t find it!');
+  this.errorpage_404msg = () => i18n('Despite our best efforts, there\'s nothing here to show you with the URL you requested. Most likely the URL is invalid or you don\'t have permissions to access the page.');
+  this.errorpage_500 = () => i18n('Oh-oh... Something went seriously wrong');
+  this.errorpage_500msg = () => i18n('Despite our best efforts, the server is not working properly.');
+  this.select_options_not_found = () => i18n('No options found');
+  this.select_loading = () => i18n('Loading...');
+  this.select_label = () => i18n('Select an option');
+  this.previous_page = () => i18n('previous');
+  this.next_page = () => i18n('next page');
+  this.first_page = () => i18n('First page');
+  this.last_page = () => i18n('Last page');
+  this.items_per_page = () => i18n('per page');
+  this.confirmation_ok = () => i18n('Ok');
+  this.confirmation_cancel = () => i18n('Cancel');
+/* eslint-enable camelcase */
+}
+
+angularModule.factory('ringI18n', emptyI18n);
+angularModule.service('RingMessageBundle', ['ringI18n', RingMessageBundle]);
+
+export default angularModule.name;

package/components/old-browsers-message/old-browsers-message.css

@@ -0,0 +1,28 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+:global(.ring-old-browsers-message) {
+  display: block;
+
+  margin-top: 15%;
+
+  text-align: center;
+
+  color: var(--ring-text-color);
+
+  font-family: -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", Arial, sans-serif;
+  font-size: var(--ring-font-size-larger);
+  line-height: calc(2.5 * unit);
+}
+
+:global(.ring-old-browsers-message_hidden) {
+  display: none;
+}
+
+:global(.ring-old-browsers-message__smile) {
+  cursor: pointer;
+  user-select: none;
+
+  font-size: calc(3 * unit);
+}

package/components/old-browsers-message/old-browsers-message.d.ts

@@ -0,0 +1,2 @@
+declare function stopOldBrowserDetector(): void;
+export { stopOldBrowserDetector as stop };

package/components/old-browsers-message/old-browsers-message.js

@@ -0,0 +1,83 @@
+import { isBrowserInWhiteList } from './white-list';
+/**
+ * @name Old Browsers Message
+ */
+/**
+  The list of versions which are definitely supported. "Browser is unsupported"
+  won't be displayed for those and higher versions even when a JS error occurs
+  on application start.
+ */
+let smileChanges = 0;
+const MAX_SMILE_CHANGES = 50;
+let previousWindowErrorHandler;
+function changeSmileClickListener(event) {
+    const eyes = ['O', 'o', '-', '>', '<'];
+    const target = (event.target || event.srcElement);
+    smileChanges++;
+    function rand(min, max) {
+        return Math.round((Math.random() * (max - min))) + min;
+    }
+    function getRandomEye() {
+        return eyes[rand(0, (eyes.length - 1))];
+    }
+    function getRandomSmile() {
+        if (smileChanges >= MAX_SMILE_CHANGES) {
+            return '\\\\ (x_x) //';
+        }
+        return `{{ (${getRandomEye()}_${getRandomEye()}) }}`;
+    }
+    target.innerHTML = getRandomSmile();
+}
+function attachSmileClickListener(smileNode) {
+    if (smileNode.addEventListener) {
+        smileNode.addEventListener('click', changeSmileClickListener);
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+    }
+    else if (smileNode.attachEvent) {
+        smileNode.attachEvent('onclick', changeSmileClickListener);
+        /* eslint-enable */
+    }
+}
+/**
+ * Listens to unhandled errors and displays passed node
+ */
+function startOldBrowsersDetector(onOldBrowserDetected) {
+    previousWindowErrorHandler = window.onerror;
+    window.onerror = function oldBrowsersMessageShower(errorMsg, url, lineNumber) {
+        if (onOldBrowserDetected) {
+            onOldBrowserDetected();
+        }
+        if (previousWindowErrorHandler) {
+            return previousWindowErrorHandler(errorMsg, url, lineNumber);
+        }
+        return false;
+    };
+}
+function stopOldBrowserDetector() {
+    window.onerror = previousWindowErrorHandler;
+}
+//Start javascript error detection
+startOldBrowsersDetector(() => {
+    const oldBrowsersMessageContainer = document.getElementById('ring-old-browsers-message');
+    const browserMessage = document.getElementById('ring-old-browsers-message__browser-message');
+    const errorMessage = document.getElementById('ring-old-browsers-message__error-message');
+    const smileNode = document.getElementById('ring-old-browsers-message__smile');
+    if (browserMessage != null && errorMessage != null) {
+        if (isBrowserInWhiteList()) {
+            browserMessage.style.display = 'none';
+            errorMessage.style.display = 'block';
+        }
+        else {
+            browserMessage.style.display = 'block';
+            errorMessage.style.display = 'none';
+        }
+    }
+    if (oldBrowsersMessageContainer) {
+        oldBrowsersMessageContainer.hidden = false;
+        oldBrowsersMessageContainer.style.display = 'block';
+    }
+    if (smileNode) {
+        attachSmileClickListener(smileNode);
+    }
+});
+export { stopOldBrowserDetector as stop };

package/components/old-browsers-message/old-browsers-message__stop.d.ts

@@ -0,0 +1 @@
+export { stop as default } from './old-browsers-message';

package/components/old-browsers-message/old-browsers-message__stop.js

@@ -0,0 +1,2 @@
+// Re-export for backward compatibility
+export { stop as default } from './old-browsers-message';

package/components/old-browsers-message/white-list.d.ts

@@ -0,0 +1,2 @@
+export declare const WHITE_LIST: Record<string, number>;
+export declare function isBrowserInWhiteList(): boolean;

package/components/old-browsers-message/white-list.js

@@ -0,0 +1,25 @@
+import sniffer from '../global/sniffer';
+const MAJOR_VERSION_INDEX = 0;
+/**
+ * SUPPORTED_BROWSERS are defined by Babel plugin, see babel config
+ */
+if (!SUPPORTED_BROWSERS) {
+    // eslint-disable-next-line no-console
+    console.warn('Ring UI: no SUPPORTED_BROWSERS passed. Please check babel config.');
+}
+const SUPPORTED = SUPPORTED_BROWSERS || [];
+const WHITE_LISTED_BROWSERS = ['chrome', 'firefox', 'safari', 'edge'];
+export const WHITE_LIST = SUPPORTED.
+    reduce((acc, item) => {
+    const [, browserName, version] = item.match(/(\S+)\s(\S+)/) ?? [];
+    if (!WHITE_LISTED_BROWSERS.includes(browserName)) {
+        return acc;
+    }
+    return {
+        ...acc,
+        [browserName]: parseInt(version, 10)
+    };
+}, {});
+export function isBrowserInWhiteList() {
+    return sniffer.browser.version[MAJOR_VERSION_INDEX] >= WHITE_LIST[sniffer.browser.name];
+}

package/components/pager/pager.css

@@ -0,0 +1,21 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+.pager {
+  user-select: none;
+}
+
+.links {
+  margin-bottom: calc(unit * 2);
+}
+
+.link {
+  display: inline-block;
+
+  margin-right: calc(unit * 2);
+}
+
+.linkDisabled {
+  color: var(--ring-secondary-color);
+}

package/components/pager/pager.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @name Pager
+ */
+import React, { PureComponent, ReactNode } from 'react';
+import { SelectItem } from '../select/select';
+export interface PagerTranslations {
+    perPage: string;
+    firstPage: string;
+    lastPage: string;
+    nextPage: string;
+    previousPage: string;
+}
+export interface PagerProps {
+    total: number;
+    currentPage: number;
+    pageSize: number;
+    pageSizes: readonly number[];
+    visiblePagesLimit: number;
+    disablePageSizeSelector: boolean;
+    openTotal: boolean;
+    canLoadLastPageWithOpenTotal: boolean;
+    translations?: PagerTranslations | null | undefined;
+    loader: boolean;
+    loaderNavigation: boolean;
+    onPageSizeChange: (size: number) => void;
+    onLoadPage: (nextPage: number) => void;
+    onPageChange?: ((prevPage: number, event?: React.MouseEvent) => void) | null | undefined;
+    className?: string | null | undefined;
+    hrefFunc?: ((page: number, pageSize: number | undefined) => string) | undefined;
+}
+interface PagerSizeItem {
+    key: number;
+}
+export default class Pager extends PureComponent<PagerProps> {
+    static defaultProps: {
+        currentPage: number;
+        pageSize: number;
+        pageSizes: number[];
+        visiblePagesLimit: number;
+        disablePageSizeSelector: boolean;
+        openTotal: boolean;
+        canLoadLastPageWithOpenTotal: boolean;
+        loader: boolean;
+        loaderNavigation: boolean;
+        onPageSizeChange: () => void;
+        onLoadPage: () => void;
+    };
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof Pager.contextType>;
+    getSelectOptions(): {
+        selected: SelectItem<PagerSizeItem> | undefined;
+        data: SelectItem<PagerSizeItem>[];
+    };
+    getTotalPages(): number;
+    handlePageSizeChange: (item: PagerSizeItem | null) => void;
+    handlePrevClick: () => void;
+    handleNextClick: () => void;
+    handlePageChange: (arg: number) => (event: React.MouseEvent) => void;
+    handleLoadMore: (arg: number) => () => void;
+    getButton(page: number, content: ReactNode, key?: number, active?: boolean): React.JSX.Element;
+    getClickProps(onClick: (e: React.MouseEvent) => void): {
+        onPlainLeftClick?: undefined;
+        onClick?: undefined;
+    } | {
+        onPlainLeftClick: (e: React.MouseEvent) => void;
+        onClick?: undefined;
+    } | {
+        onClick: (e: React.MouseEvent) => void;
+        onPlainLeftClick?: undefined;
+    };
+    getPageSizeSelector(): false | React.JSX.Element;
+    getPagerLinks(): React.JSX.Element;
+    generateHref(page: number): string | undefined;
+    getPagerContent(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export type PagerAttrs = JSX.LibraryManagedAttributes<typeof Pager, PagerProps>;
+export {};

package/components/pager/pager.js

@@ -0,0 +1,229 @@
+/**
+ * @name Pager
+ */
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import chevronLeftIcon from '@jetbrains/icons/chevron-left';
+import chevronRightIcon from '@jetbrains/icons/chevron-right';
+import Button from '../button/button';
+import ButtonGroup from '../button-group/button-group';
+import ButtonToolbar from '../button-toolbar/button-toolbar';
+import Select from '../select/select';
+import memoize from '../global/memoize';
+import Link from '../link/link';
+import Icon from '../icon/icon';
+import { I18nContext } from '../i18n/i18n-context';
+import style from './pager.css';
+export default class Pager extends PureComponent {
+    static defaultProps = {
+        currentPage: 1,
+        pageSize: 50,
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        pageSizes: [20, 50, 100],
+        visiblePagesLimit: 7,
+        disablePageSizeSelector: false,
+        openTotal: false,
+        canLoadLastPageWithOpenTotal: false,
+        loader: false,
+        loaderNavigation: false,
+        onPageSizeChange: () => { },
+        onLoadPage: () => { }
+    };
+    static contextType = I18nContext;
+    getSelectOptions() {
+        const { pageSize, pageSizes } = this.props;
+        const { translate } = this.context;
+        const data = pageSizes.map(size => ({
+            key: size,
+            label: `${size} ${this.props.translations?.perPage ?? translate('perPage')}`
+        }));
+        const selected = data.find(it => it.key === pageSize);
+        return { selected, data };
+    }
+    getTotalPages() {
+        const { total, pageSize } = this.props;
+        return Math.ceil(total / pageSize);
+    }
+    handlePageSizeChange = (item) => {
+        if (item != null) {
+            this.props.onPageSizeChange(item.key);
+        }
+    };
+    handlePrevClick = () => {
+        const { currentPage } = this.props;
+        if (currentPage !== 1) {
+            const prevPage = currentPage - 1;
+            this.props.onPageChange?.(prevPage);
+        }
+    };
+    handleNextClick = () => {
+        const { currentPage, onLoadPage } = this.props;
+        const nextPage = currentPage + 1;
+        const total = this.getTotalPages();
+        if (currentPage !== total) {
+            this.props.onPageChange?.(nextPage);
+        }
+        else if (this.props.openTotal) {
+            onLoadPage(nextPage);
+        }
+    };
+    handlePageChange = memoize((i) => (event) => {
+        this.props.onPageChange?.(i, event);
+    });
+    handleLoadMore = memoize((i) => () => {
+        this.props.onLoadPage(i);
+    });
+    getButton(page, content, key, active) {
+        return (<Button href={this.generateHref(page)} key={key} active={active} disabled={this.props.loader && !active && !this.props.loaderNavigation} loader={this.props.loader && active} {...this.getClickProps(this.handlePageChange(page))}>
+        {content}
+      </Button>);
+    }
+    getClickProps(onClick) {
+        const { hrefFunc, onPageChange } = this.props;
+        if (!onPageChange) {
+            return {};
+        }
+        else if (hrefFunc) {
+            return { onPlainLeftClick: onClick };
+        }
+        else {
+            return { onClick };
+        }
+    }
+    getPageSizeSelector() {
+        const selectOptions = this.getSelectOptions();
+        return !this.props.disablePageSizeSelector &&
+            (<div data-test="ring-pager-page-size-selector" style={{ float: 'right' }}>
+          <Select data={selectOptions.data} selected={selectOptions.selected} onSelect={this.handlePageSizeChange} type={Select.Type.INLINE} disabled={this.props.loader}/>
+        </div>);
+    }
+    getPagerLinks() {
+        const { translate } = this.context;
+        const prevLinkAvailable = this.props.currentPage !== 1;
+        const nextLinkAvailable = this.props.openTotal ||
+            this.props.currentPage !== this.getTotalPages();
+        const nextIcon = (<Icon glyph={chevronRightIcon} key="icon"/>);
+        const prevIcon = (<Icon glyph={chevronLeftIcon} key="icon"/>);
+        const prevText = this.props.translations?.previousPage ?? translate('previousPage');
+        const nextText = this.props.translations?.nextPage ?? translate('nextPage');
+        const nextLinkContent = (WrapText) => [
+            <span key="text"><WrapText>{nextText}</WrapText></span>,
+            nextIcon
+        ];
+        const prevLinkContent = (WrapText) => [
+            prevIcon,
+            <span key="text"><WrapText>{prevText}</WrapText></span>
+        ];
+        const prevLinkHref = this.generateHref(this.props.currentPage - 1);
+        const nextLinkHref = this.generateHref(this.props.currentPage + 1);
+        const disabledLinkClasses = classNames({
+            [style.link]: true,
+            [style.linkDisabled]: true
+        });
+        return (<div className={style.links}>
+        {prevLinkAvailable && (!this.props.loader || this.props.loaderNavigation)
+                ? (<Link href={prevLinkHref} className={style.link} {...this.getClickProps(this.handlePrevClick)}>{prevLinkContent}</Link>)
+                : (<span className={disabledLinkClasses}>
+              {prevIcon}<span key="text">{prevText}</span>
+            </span>)}
+
+        {nextLinkAvailable && (!this.props.loader || this.props.loaderNavigation)
+                ? (<Link href={nextLinkHref} className={style.link} {...this.getClickProps(this.handleNextClick)}>{nextLinkContent}</Link>)
+                : (<span className={disabledLinkClasses}>
+              <span key="text">{nextText}</span>{nextIcon}
+            </span>)}
+      </div>);
+    }
+    generateHref(page) {
+        if (this.props.hrefFunc === undefined) {
+            return undefined;
+        }
+        const pageSize = this.props.disablePageSizeSelector ? undefined : this.props.pageSize;
+        return this.props.hrefFunc(page, pageSize);
+    }
+    getPagerContent() {
+        const { currentPage, visiblePagesLimit } = this.props;
+        const totalPages = this.getTotalPages();
+        const { translate } = this.context;
+        if (totalPages < this.props.currentPage) {
+            this.props.onPageChange?.(totalPages);
+        }
+        let start = 1;
+        let end = totalPages;
+        if (totalPages >= visiblePagesLimit) {
+            const leftHalfFrameSize = Math.ceil(visiblePagesLimit / 2) - 1;
+            const rightHalfFrameSize = visiblePagesLimit - leftHalfFrameSize - 1;
+            start = currentPage - leftHalfFrameSize;
+            end = currentPage + rightHalfFrameSize;
+            if (start < 1) {
+                const tail = 1 - start;
+                start += tail;
+                end += tail;
+            }
+            if (end > totalPages) {
+                const tail = end - totalPages;
+                start -= tail;
+                end -= tail;
+            }
+            if (start < 1) {
+                start += 1 - start;
+            }
+        }
+        const buttons = [];
+        for (let i = start; i <= end; i++) {
+            buttons.push(this.getButton(i, i, i, i === currentPage));
+        }
+        const lastPageButtonAvailable = (end < totalPages && !this.props.openTotal) ||
+            (this.props.openTotal && this.props.canLoadLastPageWithOpenTotal);
+        return (<div>
+        {this.getPagerLinks()}
+
+        <ButtonToolbar>
+          {start > 1 &&
+                this.getButton(1, this.props.translations?.firstPage ?? translate('firstPage'))}
+
+          <ButtonGroup>
+            {start > 1 && this.getButton(start - 1, '...')}
+
+            {buttons}
+
+            {end < totalPages && this.getButton(end + 1, '...')}
+
+            {end === totalPages && this.props.openTotal && (<Button href={this.generateHref(end + 1)} disabled={this.props.loader} {...this.getClickProps(this.handleLoadMore(end + 1))}>{'...'}</Button>)}
+          </ButtonGroup>
+
+          {lastPageButtonAvailable && this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations?.lastPage ?? translate('lastPage'))}
+        </ButtonToolbar>
+
+        {this.getPageSizeSelector()}
+
+      </div>);
+    }
+    render() {
+        const classes = classNames(style.pager, this.props.className);
+        return (<div data-test="ring-pager" className={classes}>
+        {this.getTotalPages() > 1 || this.props.openTotal
+                ? this.getPagerContent()
+                : this.getPageSizeSelector()}
+      </div>);
+    }
+}
+Pager.propTypes = {
+    total: PropTypes.number.isRequired,
+    currentPage: PropTypes.number,
+    pageSize: PropTypes.number,
+    pageSizes: PropTypes.arrayOf(PropTypes.number),
+    visiblePagesLimit: PropTypes.number,
+    disablePageSizeSelector: PropTypes.bool,
+    openTotal: PropTypes.bool,
+    canLoadLastPageWithOpenTotal: PropTypes.bool,
+    onPageChange: PropTypes.func,
+    onPageSizeChange: PropTypes.func,
+    onLoadPage: PropTypes.func,
+    className: PropTypes.string,
+    translations: PropTypes.object,
+    loader: PropTypes.bool,
+    loaderNavigation: PropTypes.bool,
+    hrefFunc: PropTypes.func //function which generates href for all pager's buttons based on pager state passed as a function parameter, either this function or onPageChange should be provided
+};

package/components/pager-ng/pager-ng.js

@@ -0,0 +1,7 @@
+/**
+ * @name Pager Ng
+ */
+import angularComponentFactory from '../global/angular-component-factory';
+import Pager from '../pager/pager';
+
+export default angularComponentFactory(Pager, 'Pager').name;

package/components/pager-ng/pager-ng.stories.js

@@ -0,0 +1,37 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import RingPager from './pager-ng';
+
+export default {
+  title: 'Legacy Angular/Pager Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Provides an Angular wrapper for Pager.'
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [RingPager]).controller('testCtrl', function controller() {
+    this.total = 750;
+    this.currentPage = 1;
+
+    this.onPageChange = page => {
+      this.currentPage = page;
+    };
+  });
+
+  return `
+      <div ng-controller="testCtrl as ctrl">
+        <rg-pager
+          total="ctrl.total"
+          current-page="ctrl.currentPage"
+          on-page-change="ctrl.onPageChange"
+        ></rg-pager>
+      </div>
+    `;
+};
+
+basic.storyName = 'Pager Ng';