@jetbrains/ring-ui 5.1.21 → 5.1.23

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

@@ -1,67 +0,0 @@
-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

@@ -1,28 +0,0 @@
-@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

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

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

@@ -1,83 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,21 +0,0 @@
-@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

@@ -1,78 +0,0 @@
-/**
- * @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

@@ -1,229 +0,0 @@
-/**
- * @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

@@ -1,7 +0,0 @@
-/**
- * @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

@@ -1,37 +0,0 @@
-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';