@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

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';

package/components/panel/panel.js

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

package/components/permissions/permissions.js

@@ -1,193 +0,0 @@
-import PermissionCache from './permissions__cache';
-
-/**
- * <code>
- *   const permissions = new Permissions(auth, {prefix: 'jetbrains.jetpass.', services: [auth.serviceId]})
- *   permissions.load().then(function (p) {
- *     const canReadUser = p.has('read-user');
- *     ...
- *   });
- *
- *   permissions.check('read-user').then(function(canReadUser) {
- *     ...
- *   });
- * </code>
- *
- * @param {Auth} auth instance of well configured Auth object
- * @param {{
- *   prefix: string?,
- *   namesConverter: function?
- *   serviceId: string?
- * }=} config permissions loaded configuration.
- * <code>prefix</code> if provided then this prefix is removed from the permissions names.
- * <code>namesConverter</code> if provided it maps permission names used on server-side to client-side permission names. It is used only if prefix is undefined.
- * <code>serviceId</code> if provided then permissions only for the service are loaded.
- * @constructor
- */
-export default class Permissions {
-  /**
-   * @const {string}
-   */
-  static API_PERMISSION_CACHE_PATH = 'permissions/cache';
-
-  constructor(auth, config = {}) {
-    this.query = Permissions.getPermissionQuery(config.services);
-    this.namesConverter = config.prefix
-      ? Permissions.getDefaultNamesConverter(config.prefix)
-      : config.namesConverter;
-
-    if (!auth) {
-      throw new Error('Parameter auth is required');
-    }
-
-    this._auth = auth;
-    this._datasource = config.datasource || this._defaultDatasource;
-    this._promise = null;
-    this._subscribed = false;
-    this._permissionCache = new PermissionCache(null, this.namesConverter);
-  }
-
-  _defaultDatasource = query => (
-    this._auth.http.get(Permissions.API_PERMISSION_CACHE_PATH, {
-      query: {
-        fields: 'permission/key,global,projects(id)',
-        query
-      }
-    })
-  );
-
-  /**
-   * Returns function, which cuts off prefix from server-side permission name
-   *
-   * @param {string} prefix
-   * @returns {Function}
-   */
-  static getDefaultNamesConverter(prefix) {
-    return storedName => {
-      if (storedName.indexOf(prefix) !== 0) {
-        return storedName;
-      } else {
-        return storedName.substr(prefix.length);
-      }
-    };
-  }
-
-  static getPermissionQuery(services) {
-    if (!services || !services.length) {
-      return undefined;
-    }
-    return services.map(service => `service:{${service}}`).join(' or ');
-  }
-
-  set(cachedPermissions) {
-    this._permissionCache.set(cachedPermissions);
-    this._setCache(Promise.resolve(this._permissionCache));
-    return this._permissionCache;
-  }
-
-  get() {
-    return this._permissionCache.get();
-  }
-
-  _setCache(value) {
-    this._promise = value;
-    return value;
-  }
-
-  _getCache() {
-    return this._promise;
-  }
-
-  _resetCache() {
-    this._setCache(null);
-  }
-
-  /**
-   * Loads logged-in user permissions.
-   * @param {object?} options
-   * @return {Promise.<Permissions>} promise that is resolved when the permissions are loaded
-   */
-  load(options) {
-    if (this._subscribed === false) {
-      this._auth.addListener('userChange', () => {
-        this.reload();
-      });
-      this._subscribed = true;
-    }
-
-    if (!hasCacheControl('NO_CACHE', options) && this._getCache()) {
-      return this._getCache();
-    }
-
-    if (hasCacheControl('NO_STORE', options)) {
-      return this._loadPermissions().
-        then(cachedPermissions => new PermissionCache(cachedPermissions, this.namesConverter));
-    }
-
-    return this._setCache(
-      this._loadPermissions().
-        then(cachedPermissions => this.set(cachedPermissions))
-    );
-
-    function hasCacheControl(value, _options) {
-      if (_options && _options.cacheControl) {
-        return _options.cacheControl[value];
-      }
-      return false;
-    }
-  }
-
-  _loadPermissions() {
-    return this._datasource(this.query);
-  }
-
-  /**
-   * Reloads permission cache from server
-   * @returns {Promise.<Permissions>} promise that is resolved when the permissions are reloaded
-   */
-  reload() {
-    this._resetCache();
-    return this.load();
-  }
-
-  /**
-   * Waits till the permission cache is loaded then checks if the current user has the
-   * given permissions in the project with the given id.
-   *
-   * @param {string} permissions  space separated list of permissions
-   * @param {string=} projectId     optional projectId. If absent the method checks
-   *  if the given permission is granted in any project.
-   *
-   * @return {Promise.<boolean>}
-   */
-  check(permissions, projectId) {
-    return this.load().then(permissionCache => permissionCache.has(permissions, projectId));
-  }
-
-  /**
-   * Binds a property with the name <code>propertyName</code> of the <code>object</code>
-   * to a boolean value that is true if user has the permissions and false if she doesn't.
-   *
-   * @example
-   * <code>
-   *   userPermissions.bindVariable($scope, 'canReadRole', 'role-read')
-   * </code>
-   *
-   * @param {object} object       an object which property should be bound
-   * @param {string} propertyName a name of a property to bind
-   * @param {string} permissions  space separated list of permissions
-   * @param {string=} projectId     optional projectId. If absent the method checks
-   *  if the given permissions are granted in any project.
-   *
-   * @return {Promise.<boolean>}
-   */
-  bindVariable(object, propertyName, permissions, projectId) {
-    object[propertyName] = false;
-
-    return this.check(permissions, projectId).
-      then(permitted => {
-        object[propertyName] = permitted;
-        return permitted;
-      });
-  }
-}