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

package/components/popup/position.js

@@ -1,252 +0,0 @@
-import {
-  getDocumentScrollLeft,
-  getDocumentScrollTop,
-  getRect,
-  getWindowHeight,
-  isMounted
-} from '../global/dom';
-
-import {Dimension, Directions, MaxHeight, MinWidth} from './popup.consts';
-
-export {Dimension, Directions, MaxHeight, MinWidth};
-
-function getScrollingCoordinates(container) {
-  if (container !== null) {
-    return {
-      top: container.scrollTop,
-      left: container.scrollLeft
-    };
-  }
-
-  return {
-    top: getDocumentScrollTop(),
-    left: getDocumentScrollLeft()
-  };
-}
-
-function getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset) {
-  const popupWidth = popup.clientWidth;
-  const popupHeight = popup.clientHeight;
-
-  const anchorBottom = anchorTop + anchorRect.height;
-  const anchorRight = anchorLeft + anchorRect.width;
-
-  const popupLeft = anchorLeft - popupWidth;
-  const popupTop = anchorTop - popupHeight;
-  const popupRightToLeft = anchorRight - popupWidth;
-  const popupHorizontalCenter = anchorLeft + anchorRect.width / 2 - popupWidth / 2;
-  const popupVerticalCenter = anchorTop + anchorRect.height / 2 - popupHeight / 2;
-  const popupBottomToTop = anchorBottom - popupHeight;
-
-  return {
-    [Directions.BOTTOM_RIGHT]: {left: anchorLeft, top: anchorBottom + offset},
-    [Directions.BOTTOM_LEFT]: {left: popupRightToLeft, top: anchorBottom + offset},
-    [Directions.BOTTOM_CENTER]: {left: popupHorizontalCenter, top: anchorBottom + offset},
-    [Directions.TOP_RIGHT]: {left: anchorLeft, top: popupTop - offset},
-    [Directions.TOP_LEFT]: {left: popupRightToLeft, top: popupTop - offset},
-    [Directions.TOP_CENTER]: {left: popupHorizontalCenter, top: popupTop - offset},
-    [Directions.LEFT_BOTTOM]: {left: popupLeft - offset, top: anchorTop},
-    [Directions.LEFT_TOP]: {left: popupLeft - offset, top: popupBottomToTop},
-    [Directions.LEFT_CENTER]: {left: popupLeft - offset, top: popupVerticalCenter},
-    [Directions.RIGHT_BOTTOM]: {left: anchorRight + offset, top: anchorTop},
-    [Directions.RIGHT_TOP]: {left: anchorRight + offset, top: popupBottomToTop},
-    [Directions.RIGHT_CENTER]: {left: anchorRight + offset, top: popupVerticalCenter}
-  };
-}
-
-function verticalOverflow(styles, scrollingCoordinates, attrs) {
-  const containerHeight = attrs.container !== null
-    ? attrs.container.clientHeight
-    : getWindowHeight();
-  const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
-  const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
-
-  const topOverflow = Math.max(viewportMinX - styles.top, 0);
-
-  const popupHeight = attrs.popup.clientHeight;
-  const verticalDiff = styles.top + popupHeight - viewportMaxX;
-  const bottomOverflow = Math.max(verticalDiff, 0);
-
-  return topOverflow + bottomOverflow;
-}
-
-function horizontalOverflow(styles, scrollingCoordinates, attrs) {
-  const containerWidth = attrs.container !== null ? attrs.container.clientWidth : window.innerWidth;
-  const viewportMinY = scrollingCoordinates.left + attrs.sidePadding;
-  const viewportMaxY = scrollingCoordinates.left + containerWidth - attrs.sidePadding;
-
-  const leftOverflow = Math.max(viewportMinY - styles.left, 0);
-
-  const popupWidth = attrs.popup.clientWidth;
-  const horizontalDiff = styles.left + popupWidth - viewportMaxY;
-  const rightOverflow = Math.max(horizontalDiff, 0);
-
-  return leftOverflow + rightOverflow;
-}
-
-export const positionPropKeys = [
-  'directions',
-  'autoPositioning',
-  'autoCorrectTopOverflow',
-  'sidePadding',
-  'top',
-  'left',
-  'offset',
-  'maxHeight',
-  'minWidth'
-];
-
-const defaultcontainerRect = {
-  top: 0,
-  left: 0
-};
-
-function handleTopOffScreen({
-  sidePadding, styles, anchorRect, maxHeight, popupScrollHeight, direction, scroll
-}) {
-  const BORDER_COMPENSATION = 1;
-  const {TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP} = Directions;
-
-  const openedToTop = [TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP].includes(direction);
-
-  if (!openedToTop) {
-    return styles;
-  }
-
-  const isAttachedToAnchorTop = [TOP_LEFT, TOP_CENTER, TOP_RIGHT].includes(direction);
-  const attachingPointY = (isAttachedToAnchorTop ? anchorRect.top : anchorRect.bottom);
-
-  const effectiveHeight = maxHeight ? Math.min(popupScrollHeight, maxHeight) : popupScrollHeight;
-  const hypotheticalTop = attachingPointY - effectiveHeight;
-
-  if (hypotheticalTop <= sidePadding) {
-    styles.top = sidePadding + scroll.top;
-    styles.maxHeight = attachingPointY - sidePadding + BORDER_COMPENSATION;
-  }
-
-  return styles;
-}
-
-
-export function maxHeightForDirection(direction, anchorNode, containerNode) {
-  const container = containerNode || document.documentElement;
-  const domRect = anchorNode.getBoundingClientRect();
-  const containerRect = container.getBoundingClientRect();
-  const topMaxHeight = Math.max(domRect.top - containerRect.top, 0);
-  const containerHeight = Math.max(containerRect.height,
-    // XXX
-    // If container is the document element
-    // then we check client height too because we may have situation when
-    // "height" from "getBoundingClientRect" less then "clientHeight".
-    container === document.documentElement ? container.clientHeight : 0);
-  const bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
-  switch (direction) {
-    case Directions.TOP_LEFT:
-    case Directions.TOP_CENTER:
-    case Directions.TOP_RIGHT:
-      return topMaxHeight;
-    case Directions.BOTTOM_LEFT:
-    case Directions.BOTTOM_CENTER:
-    case Directions.BOTTOM_RIGHT:
-      return bottomMaxHeight;
-    case Directions.LEFT_BOTTOM:
-    case Directions.RIGHT_BOTTOM:
-      return domRect.height + bottomMaxHeight;
-    case Directions.LEFT_TOP:
-    case Directions.RIGHT_TOP:
-      return domRect.height + topMaxHeight;
-    case Directions.RIGHT_CENTER:
-    case Directions.LEFT_CENTER:
-      return (domRect.height / 2) + Math.min(bottomMaxHeight / 2, topMaxHeight / 2);
-    default:
-      return null;
-  }
-}
-
-export default function position(attrs) {
-  const {
-    popup,
-    anchor,
-    container,
-    directions,
-    autoPositioning,
-    sidePadding,
-    top,
-    left,
-    offset,
-    maxHeight,
-    minWidth,
-    autoCorrectTopOverflow = true
-  } = attrs;
-
-  let styles = {
-    top: 0,
-    left: 0
-  };
-  let chosenDirection = null;
-
-  const containerRect = container !== null ? getRect(container) : defaultcontainerRect;
-  const defaultAnchor = container !== null ? container : document.body;
-  const anchorRect = getRect(isMounted(anchor) ? anchor : defaultAnchor);
-  const scroll = getScrollingCoordinates(container);
-  const anchorLeft = anchorRect.left + scroll.left + left - containerRect.left;
-  const anchorTop = anchorRect.top + scroll.top + top - containerRect.top;
-
-  if (popup) {
-    const directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
-    if (!autoPositioning || directions.length === 1) {
-      styles = directionsMatrix[directions[0]];
-      chosenDirection = directions[0];
-    } else {
-      const sortedByIncreasingOverflow = directions.
-        // Fall back to the first option
-        concat(directions[0]).filter(direction => directionsMatrix[direction]).
-        map(direction => ({styles: directionsMatrix[direction], direction})).
-        sort(({styles: stylesA}, {styles: stylesB}) => {
-          const overflowA =
-            verticalOverflow(stylesA, scroll, attrs) +
-            horizontalOverflow(stylesA, scroll, attrs);
-          const overflowB =
-            verticalOverflow(stylesB, scroll, attrs) +
-            horizontalOverflow(stylesB, scroll, attrs);
-          return overflowA - overflowB;
-        });
-      styles = sortedByIncreasingOverflow[0].styles;
-      chosenDirection = sortedByIncreasingOverflow[0].direction;
-    }
-
-    // because of the anchor negative margin top and left also may become negative
-    ['left', 'top'].forEach(key => {
-      if (styles[key] < 0) {
-        styles[key] = 0;
-      }
-    });
-  }
-
-  if (maxHeight === MaxHeight.SCREEN || maxHeight === 'screen') {
-    // this feature works properly only when direction is BOTTOM_* or *_BOTTOM
-    styles.maxHeight = window.innerHeight + scroll.top - styles.top - Dimension.MARGIN;
-  } else if (maxHeight) {
-    styles.maxHeight = maxHeight;
-  }
-
-  if (autoCorrectTopOverflow) {
-    styles = handleTopOffScreen({
-      sidePadding,
-      styles,
-      anchorRect,
-      maxHeight,
-      direction: chosenDirection,
-      popupScrollHeight: popup.scrollHeight,
-      scroll
-    });
-  }
-
-  if (minWidth === MinWidth.TARGET || minWidth === 'target') {
-    styles.minWidth = anchorRect.width;
-  } else if (minWidth) {
-    styles.minWidth = anchorRect.width < minWidth ? minWidth : anchorRect.width;
-  }
-
-  return {styles, direction: chosenDirection};
-}

package/components/popup/position.test.js

@@ -1,192 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import {maxHeightForDirection} from './position';
-import {Directions} from './popup.consts';
-
-describe('position', () => {
-  describe('maxHeightForDirection', () => {
-    it('should return max height for specified direction relative to container', () => {
-      const containerNode = createNode({},
-        createClientRectMock({
-          top: 10,
-          left: 10,
-          width: 30,
-          height: 40
-        })
-      );
-
-      const topMaxHeight = 20;
-      const bottomMaxHeight = 10;
-
-      const anchorNode = createNode({},
-        createClientRectMock({
-          top: containerNode.getBoundingClientRect().top + topMaxHeight,
-          left: containerNode.getBoundingClientRect().left + 10,
-          width: 10,
-          height: 10
-        })
-      );
-
-      checkMaxHeight(anchorNode, containerNode, [
-        topMaxHeight,
-        bottomMaxHeight
-      ]);
-    });
-
-
-    it('should NOT include scroll height when calculate max height', () => {
-      const containerNode = createNode(
-        {
-          scrollTop: 10,
-          scrollHeight: 50
-        },
-        createClientRectMock({
-          top: 10,
-          left: 10,
-          width: 30,
-          height: 30
-        })
-      );
-
-      const anchorNode = createNode({
-        getBoundingClientRect: () => (createClientRectMock({
-          top: containerNode.getBoundingClientRect().top + 10,
-          left: containerNode.getBoundingClientRect().left + 10,
-          width: 10,
-          height: 10
-        }))
-      });
-
-      const topMaxHeight = 10;
-      const bottomMaxHeight = 10;
-      checkMaxHeight(anchorNode, containerNode, [
-        topMaxHeight,
-        bottomMaxHeight
-      ]);
-    });
-
-
-    it('should handle case when both element out of the top border of viewport', () => {
-      const containerNode = createNode({},
-        createClientRectMock({
-          top: -50,
-          left: 10,
-          width: 30,
-          height: 30
-        })
-      );
-
-      const anchorNode = createNode({},
-        createClientRectMock({
-          top: containerNode.getBoundingClientRect().top + 10,
-          left: containerNode.getBoundingClientRect().left + 10,
-          width: 10,
-          height: 10
-        })
-      );
-
-      const topMaxHeight = 10;
-      const bottomMaxHeight = 10;
-      checkMaxHeight(anchorNode, containerNode, [
-        topMaxHeight,
-        bottomMaxHeight
-      ]);
-    });
-
-
-    it('should cover all defined directions', () => {
-      const anchorNode = createNode();
-      Object.keys(Directions).forEach(key => {
-        maxHeightForDirection(Directions[key], anchorNode).
-          should.not.be.undefined;
-      });
-    });
-  });
-
-
-  function checkMaxHeight(anchorNode, containerNode, [topMaxHeight, bottomMaxHeight]) {
-    const expectedValues = [
-      topMaxHeight,
-      bottomMaxHeight,
-      bottomMaxHeight + anchorNode.getBoundingClientRect().height,
-      topMaxHeight + anchorNode.getBoundingClientRect().height,
-      Math.min(bottomMaxHeight / 2, topMaxHeight / 2) +
-        anchorNode.getBoundingClientRect().height / 2
-    ];
-
-    [
-      [
-        Directions.TOP_LEFT,
-        Directions.TOP_RIGHT,
-        Directions.TOP_CENTER
-      ],
-      [
-        Directions.BOTTOM_LEFT,
-        Directions.BOTTOM_RIGHT,
-        Directions.BOTTOM_CENTER
-      ],
-      [
-        Directions.RIGHT_BOTTOM,
-        Directions.LEFT_BOTTOM
-      ],
-      [
-        Directions.RIGHT_TOP,
-        Directions.LEFT_TOP
-      ],
-      [
-        Directions.RIGHT_CENTER,
-        Directions.LEFT_CENTER
-      ]
-    ].forEach((directions, i) => {
-      directions.forEach(d => {
-        maxHeightForDirection(d, anchorNode, containerNode).
-          should.
-          be.
-          equal(expectedValues[i]);
-      });
-    });
-  }
-
-
-  function createNode(data, domRect = {}) {
-    if (
-      domRect.hasOwnProperty('height') &&
-      !data.hasOwnProperty('scrollHeight')) {
-      data.scrollHeight = domRect.height;
-    }
-
-    return {
-      scrollTop: 0,
-      getBoundingClientRect: sandbox.stub().returns(domRect),
-      ...data
-    };
-  }
-
-
-  function createClientRectMock(data = {}) {
-    if (
-      data.hasOwnProperty('left') &&
-      data.hasOwnProperty('width') &&
-      !data.hasOwnProperty('right')
-    ) {
-      data.right = data.left + data.width;
-    }
-
-    if (
-      data.hasOwnProperty('top') &&
-      data.hasOwnProperty('height') &&
-      !data.hasOwnProperty('bottom')
-    ) {
-      data.bottom = data.top + data.height;
-    }
-
-    return {
-      height: 0,
-      width: 0,
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      ...data
-    };
-  }
-});

package/components/popup-menu/popup-menu.examples.js

@@ -1,38 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import PopupMenu, {ListProps} from '@jetbrains/ring-ui/components/popup-menu/popup-menu';
-
-export default {
-  title: 'Components/PopupMenu',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a popup menu.',
-    hermione: {captureSelector: '*[data-test~=ring-popup]'},
-    a11y: {element: '*[data-test~=ring-popup]'}
-  }
-};
-
-export const basic = () => {
-  const data = [
-    {label: 'Item'},
-    {label: 'Link to jetbrains.com', href: 'http://www.jetbrains.com'},
-    {rgItemType: ListProps.Type.SEPARATOR},
-    {rgItemType: ListProps.Type.LINK, label: 'Link Item'},
-    {
-      rgItemType: ListProps.Type.LINK,
-      label: 'Link Item With Additional Class',
-      className: 'test'
-    },
-    {rgItemType: ListProps.Type.SEPARATOR, description: 'Separator With Description'},
-    {rgItemType: ListProps.Type.TITLE, label: 'Title'},
-    {rgItemType: ListProps.Type.ITEM, label: '1 Element in group'},
-    {rgItemType: ListProps.Type.ITEM, label: '2 Element in group'}
-  ];
-
-  return <PopupMenu data={data}/>;
-};
-
-basic.storyName = 'PopupMenu';

package/components/popup-menu/popup-menu.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Popup from '../popup/popup';
-import List from '../list/list';
-
-const {children, ...popupPropTypes} = Popup.propTypes || {};
-
-/**
- * @name Popup Menu
- */
-export default class PopupMenu extends Popup {
-  static isItemType = List.isItemType;
-  static ListProps = List.ListProps;
-
-  static propTypes = {
-    ...popupPropTypes,
-    ...List.propTypes,
-    closeOnSelect: PropTypes.bool
-  };
-
-  static defaultProps = {
-    ...List.defaultProps,
-    ...Popup.defaultProps,
-    renderOptimization: false,
-    closeOnSelect: false
-  };
-
-  onSelect = (item, event) => {
-    if (this.props.closeOnSelect) {
-      this._onCloseAttempt(event);
-    }
-    this.props.onSelect(item, event);
-  };
-
-  listRef = el => {
-    this.list = el;
-  };
-
-  /** @override */
-  getInternalContent() {
-    const {className, ...props} = this.props;
-
-    return (
-      <div>
-        <List
-          ref={this.listRef}
-          {...props}
-          maxHeight={this.popup && this.popup.style.maxHeight}
-          shortcuts={this.shouldUseShortcuts()}
-          onSelect={this.onSelect}
-        />
-      </div>
-    );
-  }
-}
-
-export const {ListProps} = List;

package/components/popup-menu/popup-menu.test.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import PopupMenu from './popup-menu';
-
-describe('Popup Menu', () => {
-  const shallowPopupMenu = props => shallow(<PopupMenu {...props}/>);
-  const mountPopupMenu = props => mount(<PopupMenu {...props}/>);
-
-  it('should create component', () => {
-    shallowPopupMenu().should.exist;
-  });
-
-  it('should have List', () => {
-    const list = mountPopupMenu().instance().list;
-    list.should.exist;
-
-    // We need it to maintain compatibility between Popup Menu and List
-    list.props.data.length.should.equal(0);
-  });
-
-  it('should pass params to List', () => {
-    const wrapper = mountPopupMenu({data: [
-      {}
-    ]});
-
-    shallow(wrapper.instance().list.renderItem({index: 1})).should.exist;
-  });
-});

package/components/progress-bar/progress-bar.examples.js

@@ -1,56 +0,0 @@
-import React, {Component} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Theme from '@jetbrains/ring-ui/components/global/theme';
-
-import ProgressBar from '@jetbrains/ring-ui/components/progress-bar/progress-bar';
-
-const disableAnimations = window.location.search.includes('block-animations');
-
-export default {
-  title: 'Components/Progress Bar',
-  decorators: [reactDecorator()]
-};
-
-export const basic = () => {
-  class ProgressBarDemo extends Component {
-    state = {
-      value: disableAnimations ? 0.5 : 0
-    };
-
-    componentDidMount() {
-      if (disableAnimations) {
-        return;
-      }
-      setInterval(
-        () => this.setState(({value}) => ({value: value >= 1 ? 0 : value + 0.1})),
-        500
-      );
-    }
-
-    render() {
-      const {value} = this.state;
-
-      return (
-        <div>
-          <div style={{height: '25px', paddingTop: '25px'}}>
-            <ProgressBar label="Progress" value={value} style={{width: 288}}/>
-          </div>
-
-          <div style={{height: '25px', paddingTop: '25px', background: '#000'}}>
-            <ProgressBar label="Progress" value={value} theme={Theme.DARK} style={{width: 288}}/>
-          </div>
-
-          <div style={{height: '25px', paddingTop: '25px', background: '#F0F0F0'}}>
-            <ProgressBar label="Progress" value={value} style={{width: 288}}/>
-          </div>
-        </div>
-      );
-    }
-  }
-
-  return <ProgressBarDemo/>;
-};
-
-basic.storyName = 'Progress Bar';