@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

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

@@ -1,99 +1,83 @@
-import {isBrowserInWhiteList} from './white-list';
-
+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) //';
+    const eyes = ['O', 'o', '-', '>', '<'];
+    const target = (event.target || event.srcElement);
+    smileChanges++;
+    function rand(min, max) {
+        return Math.round((Math.random() * (max - min))) + min;
     }
-
-    return `{{ (${getRandomEye()}_${getRandomEye()}) }}`;
-  }
-
-  target.innerHTML = getRandomSmile();
+    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);
-  } else if (smileNode.attachEvent) {
-    smileNode.attachEvent('onclick', changeSmileClickListener);
-  }
+    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;
-  };
+    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;
+    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 (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);
-  }
+    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};
+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

@@ -1,2 +1,2 @@
 // Re-export for backward compatibility
-export {stop as default} from './old-browsers-message';
+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

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

package/components/pager/pager.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @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;
+    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;
+        translations: {
+            perPage: string;
+            firstPage: string;
+            lastPage: string;
+            nextPage: string;
+            previousPage: string;
+        };
+        loader: boolean;
+        loaderNavigation: boolean;
+        onPageSizeChange: () => void;
+        onLoadPage: () => void;
+    };
+    getSelectOptions(): {
+        selected: SelectItem<PagerSizeItem> | undefined;
+        data: SelectItem<PagerSizeItem>[];
+    };
+    getTotal(): 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): 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 | JSX.Element;
+    getPagerLinks(): JSX.Element;
+    generateHref(page: number): string | undefined;
+    getPagerContent(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export declare type PagerAttrs = JSX.LibraryManagedAttributes<typeof Pager, PagerProps>;
+export {};

package/components/pager/pager.jsx

@@ -0,0 +1,236 @@
+/**
+ * @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 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,
+        translations: {
+            perPage: 'per page',
+            firstPage: 'First page',
+            lastPage: 'Last page',
+            nextPage: 'Next page',
+            previousPage: 'Previous'
+        },
+        loader: false,
+        loaderNavigation: false,
+        onPageSizeChange: () => { },
+        onLoadPage: () => { }
+    };
+    getSelectOptions() {
+        const { pageSize, pageSizes } = this.props;
+        const data = pageSizes.map(size => ({
+            key: size,
+            label: `${size} ${this.props.translations.perPage}`
+        }));
+        const selected = data.find(it => it.key === pageSize);
+        return { selected, data };
+    }
+    getTotal() {
+        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.getTotal();
+        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 prevLinkAvailable = this.props.currentPage !== 1;
+        const nextLinkAvailable = this.props.openTotal || this.props.currentPage !== this.getTotal();
+        const nextIcon = (<Icon glyph={chevronRightIcon} key="icon"/>);
+        const prevIcon = (<Icon glyph={chevronLeftIcon} key="icon"/>);
+        const prevText = this.props.translations.previousPage;
+        const nextText = this.props.translations.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.getTotal();
+        if (totalPages < 2 && !this.props.openTotal) {
+            return null;
+        }
+        let start = 1;
+        let end = totalPages;
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        if (totalPages >= visiblePagesLimit + 6) {
+            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 &&
+                (<ButtonGroup>
+            {this.getButton(1, this.props.translations.firstPage)}
+          </ButtonGroup>)}
+
+          <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 &&
+                (<ButtonGroup>
+            {this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations.lastPage)}
+          </ButtonGroup>)}
+        </ButtonToolbar>
+
+        {this.getPageSizeSelector()}
+
+      </div>);
+    }
+    render() {
+        const classes = classNames(style.pager, this.props.className);
+        return (<div data-test="ring-pager" className={classes}>
+        {this.props.total > 1
+                ? 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.examples.js

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import RingPager from '@jetbrains/ring-ui/components/pager-ng/pager-ng';
+import RingPager from './pager-ng';
 
 export default {
   title: 'Legacy Angular/Pager Ng',

package/components/palette/palette.examples.js

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import '@jetbrains/ring-ui/components/palette/palette.css';
+import './palette.css';
 
 export default {
   title: 'Style-only/Color fields palette',

package/components/panel/panel.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Panel
+ */
+export default class Panel extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}

package/components/panel/panel.jsx

@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './panel.css';
+/**
+ * @name Panel
+ */
+export default class Panel extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { className, children, ...props } = this.props;
+        const classes = classNames(styles.panel, className);
+        return (<div {...props} className={classes}>
+        {children}
+      </div>);
+    }
+}