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

package/components/pager/pager.examples.js

@@ -1,291 +0,0 @@
-import React, {Component} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Pager from '@jetbrains/ring-ui/components/pager/pager';
-
-function getDataFromUrl(name, defaultValue) {
-  const params = new URLSearchParams(location.search);
-  const value = params.get(name);
-  return value ? parseInt(value, 10) : defaultValue;
-}
-
-function hrefGenerator(linkPageNumber, pageSize) {
-  const params = new URLSearchParams(location.search);
-  params.set('page', linkPageNumber);
-  if (pageSize) {
-    params.set('pageSize', pageSize);
-  }
-  return `${location.pathname}?${params}`;
-}
-
-export default {
-  title: 'Components/Pager',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a pager.',
-    hermione: {captureSelector: '*[data-test~=ring-pager]'}
-  }
-};
-
-export const basic = () => {
-  class PagerDemo extends Component {
-    state = {
-      total: 750,
-      currentPage: 1
-    };
-
-    render() {
-      const {total, currentPage} = this.state;
-      return (
-        <Pager
-          total={total}
-          currentPage={currentPage}
-          disablePageSizeSelector
-          onPageChange={cp => this.setState({currentPage: cp})}
-        />
-      );
-    }
-  }
-
-  return <PagerDemo/>;
-};
-
-basic.storyName = 'basic';
-
-export const customFrameSize = () => {
-  class PagerDemo extends Component {
-    state = {
-      total: 750,
-      currentPage: 1
-    };
-
-    render() {
-      const {total, currentPage} = this.state;
-      return (
-        <Pager
-          total={total}
-          currentPage={currentPage}
-          visiblePagesLimit={3}
-          disablePageSizeSelector
-          onPageChange={cp => this.setState({currentPage: cp})}
-        />
-      );
-    }
-  }
-
-  return <PagerDemo/>;
-};
-
-customFrameSize.storyName = 'custom frame size';
-customFrameSize.parameters = {hermione: {skip: true}};
-
-export const customFrameSize2 = () => {
-  class PagerDemo extends Component {
-    state = {
-      total: 250,
-      currentPage: 1
-    };
-
-    render() {
-      const {total, currentPage} = this.state;
-      return (
-        <Pager
-          total={total}
-          currentPage={currentPage}
-          visiblePagesLimit={5}
-          disablePageSizeSelector
-          onPageChange={cp => this.setState({currentPage: cp})}
-        />
-      );
-    }
-  }
-
-  return <PagerDemo/>;
-};
-
-customFrameSize2.storyName = 'custom frame size #2';
-customFrameSize2.parameters = {hermione: {skip: true}};
-
-export const customFrameSize3 = () => {
-  class PagerDemo extends Component {
-    state = {
-      total: 400,
-      currentPage: 1
-    };
-
-    render() {
-      const {total, currentPage} = this.state;
-      return (
-        <Pager
-          total={total}
-          currentPage={currentPage}
-          visiblePagesLimit={5}
-          disablePageSizeSelector
-          onPageChange={cp => this.setState({currentPage: cp})}
-        />
-      );
-    }
-  }
-
-  return <PagerDemo/>;
-};
-
-customFrameSize3.storyName = 'custom frame size #3';
-customFrameSize3.parameters = {hermione: {skip: true}};
-
-export const pageSizeSelector = () => {
-  class PagerDemo extends Component {
-    state = {
-      total: 300,
-      currentPage: 1,
-      pageSize: 50
-    };
-
-    render() {
-      const {total, currentPage, pageSize} = this.state;
-      return (
-        <Pager
-          total={total}
-          currentPage={currentPage}
-          pageSize={pageSize}
-          onPageChange={cp => this.setState({currentPage: cp})}
-          onPageSizeChange={ps => this.setState({pageSize: ps})}
-        />
-      );
-    }
-  }
-
-  return <PagerDemo/>;
-};
-
-pageSizeSelector.storyName = 'page size selector';
-
-export const openTotal = () => {
-  class PagerDemo extends Component {
-    state = {
-      total: 10,
-      currentPage: 1,
-      pageSize: 10
-    };
-
-    render() {
-      const {total, currentPage, pageSize} = this.state;
-      return (
-        <Pager
-          total={total}
-          currentPage={currentPage}
-          pageSize={pageSize}
-          openTotal={total < 100}
-          onPageChange={cp => this.setState({currentPage: cp})}
-          onLoadPage={cp => this.setState({currentPage: cp, total: total + 10})}
-          visiblePagesLimit={5}
-          disablePageSizeSelector
-        />
-      );
-    }
-  }
-
-  return <PagerDemo/>;
-};
-
-openTotal.storyName = 'open total';
-
-export const openTotalAndHistorySupport = () => {
-  class PagerDemo extends Component {
-    state = {
-      total: 999,
-      currentPage: getDataFromUrl('page', 1),
-      pageSize: getDataFromUrl('pageSize', 20)
-    };
-
-    componentDidMount() {
-      history.replaceState(
-        this.state,
-        '',
-        hrefGenerator(this.state.currentPage, this.state.pageSize)
-      );
-      window.addEventListener('popstate', this.onPopstate);
-    }
-
-    componentWillUnmount() {
-      window.removeEventListener('popstate', this.onPopstate);
-    }
-
-    onPopstate = () => {
-      if (
-        window.history.state &&
-        window.history.state.currentPage &&
-        window.history.state.pageSize
-      ) {
-        this.setState({
-          pageSize: window.history.state.pageSize,
-          currentPage: window.history.state.currentPage
-        });
-      }
-    };
-
-    handlePageChange(update) {
-      this.setState(update, () =>
-        history.pushState(
-          this.state,
-          '',
-          hrefGenerator(this.state.currentPage, this.state.pageSize)
-        )
-      );
-    }
-
-    render() {
-      const {total, currentPage, pageSize} = this.state;
-      return (
-        <Pager
-          total={total}
-          currentPage={currentPage}
-          pageSize={pageSize}
-          hrefFunc={hrefGenerator}
-          visiblePagesLimit={5}
-          openTotal={total < 2000}
-          onPageChange={cp => this.handlePageChange({currentPage: cp})}
-          onPageSizeChange={ps => this.handlePageChange({currentPage: 1, pageSize: ps})}
-          onLoadPage={cp =>
-            this.handlePageChange(prevState => ({currentPage: cp, total: prevState.total + 500}))
-          }
-        />
-      );
-    }
-  }
-
-  return <PagerDemo/>;
-};
-
-openTotalAndHistorySupport.storyName = 'open total and history support';
-openTotalAndHistorySupport.parameters = {hermione: {skip: true}};
-
-export const reloadOnCurrentPageChange = () => {
-  class PagerDemo extends Component {
-    state = {
-      total: 120,
-      currentPage: getDataFromUrl('page', 1),
-      pageSize: getDataFromUrl('pageSize', 20)
-    };
-
-    render() {
-      const {total, currentPage, pageSize} = this.state;
-      return (
-        <Pager
-          total={total}
-          currentPage={currentPage}
-          pageSize={pageSize}
-          hrefFunc={hrefGenerator}
-          visiblePagesLimit={5}
-        />
-      );
-    }
-  }
-
-  return <PagerDemo/>;
-};
-
-reloadOnCurrentPageChange.storyName = 'reload on current page change';
-reloadOnCurrentPageChange.parameters = {hermione: {skip: true}};

package/components/pager/pager.js

@@ -1,337 +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 style from './pager.css';
-
-export default class Pager extends PureComponent {
-  static 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
-  };
-
-  static defaultProps = {
-    currentPage: 1,
-    pageSize: 50,
-    // eslint-disable-next-line 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 => {
-    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 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>
-    );
-  }
-}

package/components/pager/pager.test.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import ButtonToolbar from '../button-toolbar/button-toolbar';
-
-import Pager from './pager';
-import styles from './pager.css';
-
-describe('Pager', () => {
-  const props = {total: 100, currentPage: 1, onPageChange: () => {}};
-  const shallowPager = params => shallow(<Pager {...{...props, ...params}}/>);
-  const mountPager = params => mount(<Pager {...{...props, ...params}}/>);
-
-  it('should create component', () => {
-    mountPager().should.have.type(Pager);
-  });
-
-  it('should render page buttons when total is more than pageSize', () => {
-    const wrapper = shallowPager({
-      total: 2,
-      pageSize: 1
-    });
-    wrapper.should.have.descendants(ButtonToolbar);
-    wrapper.should.descendants(`div.${styles.links}`);
-  });
-
-  it('should not render page buttons when total is less than 1', () => {
-    const wrapper = shallowPager({total: 1});
-    wrapper.should.not.have.descendants(ButtonToolbar);
-    wrapper.should.not.descendants(`div.${styles.links}`);
-  });
-
-  it('should render page size selector even when total is less than 2', () => {
-    const wrapper = shallowPager({total: 1});
-    wrapper.should.have.data('test', 'ring-pager');
-    wrapper.childAt(0).should.have.data('test', 'ring-pager-page-size-selector');
-  });
-
-  it('should wrap children with div', () => {
-    shallowPager().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowPager({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should render page buttons even when currentPage==total if openTotal is true', () => {
-    const wrapper = shallowPager({
-      total: 10,
-      pageSize: 10,
-      currentPage: 1,
-      openTotal: true
-    });
-    wrapper.should.have.descendants(ButtonToolbar);
-  });
-});

package/components/panel/panel.examples.js

@@ -1,33 +0,0 @@
-import React, {Component} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-
-import Panel from '@jetbrains/ring-ui/components/panel/panel';
-
-export default {
-  title: 'Components/Panel',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a button panel.'
-  }
-};
-
-export const basic = () => {
-  class PanelDemo extends Component {
-    render() {
-      return (
-        <Panel>
-          <Button primary>{'Apply changes'}</Button>
-          <Button>{'Cancel'}</Button>
-        </Panel>
-      );
-    }
-  }
-
-  return <PanelDemo/>;
-};
-
-basic.storyName = 'Panel';