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

package/components/popup/popup.examples.js

@@ -1,340 +0,0 @@
-import React, {Component} from 'react';
-import classNames from 'classnames';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Popup from '@jetbrains/ring-ui/components/popup/popup';
-
-export default {
-  title: 'Components/Popup',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a popup.'
-  }
-};
-
-export const basic = () => {
-  const {Directions} = Popup.PopupProps;
-
-  const directionMap = {
-    topLeft: Directions.BOTTOM_RIGHT,
-    topRight: Directions.BOTTOM_LEFT,
-    bottomLeft: Directions.TOP_RIGHT,
-    bottomRight: Directions.TOP_LEFT
-  };
-
-  const directionKeys = Object.keys(directionMap);
-  const initialState = directionKeys.reduce((acc, key) => {
-    acc[key] = true;
-    return acc;
-  }, {});
-
-  class PopupDemo extends Component {
-    state = initialState;
-
-    renderPopup = key => (
-      <div className={classNames('anchor', key)} key={key}>
-        <Popup
-          hidden={!this.state[key]}
-          onCloseAttempt={() => this.setState({[key]: false})}
-          directions={[directionMap[key]]}
-        >
-          <span>Hello, world!</span>
-        </Popup>
-      </div>
-    );
-
-    showAgain = () =>
-      setTimeout(() => {
-        this.setState({bottomLeft: true});
-      });
-
-    render() {
-      return (
-        <div>
-          {directionKeys.map(this.renderPopup)}
-          <button className="button" type="button" onClick={this.showAgain}>
-            Show again
-          </button>
-        </div>
-      );
-    }
-  }
-
-  return <PopupDemo/>;
-};
-
-basic.storyName = 'basic';
-
-basic.parameters = {
-  hermione: {captureSelector: ['.topLeft', '.topRight', '.bottomLeft', '.bottomRight']},
-  a11y: {element: '.topLeft,.topRight,.bottomLeft,.bottomRight'},
-  storyStyles: `
-<style>
-  body {
-    overflow: hidden;
-  }
-
-  .button {
-    position: absolute;
-    left: 50px;
-    bottom: 50px;
-  }
-
-  .anchor {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-  }
-
-  .topLeft {
-    left: 0;
-    top: 0;
-    background-color: red;
-  }
-
-  .topRight {
-    right: 0;
-    top: 0;
-    background-color: blue;
-  }
-
-  .bottomLeft {
-    left: 0;
-    bottom: 0;
-    background-color: green;
-  }
-
-  .bottomRight {
-    right: 0;
-    bottom: 0;
-    background-color: orange;
-  }
-</style>
-      `
-};
-
-export const autoPositioning = () => {
-  const Directions = Popup.PopupProps.Directions;
-
-  const content = <span className="popup">This is a popup</span>;
-  const PopupDemo = (
-    <div>
-      <div className="message">
-        Popup should change open direction when reaching window borders
-        <Popup directions={[Directions.TOP_CENTER]}>{content}</Popup>
-      </div>
-      <div className="message vert">
-        Popup should change open direction when reaching window borders
-        <Popup directions={[Directions.RIGHT_CENTER]}>{content}</Popup>
-      </div>
-      <div className="anchor left">
-        Left side open popup
-        <Popup directions={[Directions.LEFT_BOTTOM, Directions.RIGHT_BOTTOM]}>{content}</Popup>
-      </div>
-      <div className="anchor right">
-        Right side open popup
-        <Popup directions={[Directions.RIGHT_BOTTOM, Directions.LEFT_BOTTOM]}>{content}</Popup>
-      </div>
-      <div className="anchor bottom">
-        Downside open popup
-        <Popup directions={[Directions.BOTTOM_RIGHT, Directions.TOP_LEFT]}>{content}</Popup>
-      </div>
-      <div className="anchor top">
-        Upside open popup
-        <Popup directions={[Directions.TOP_LEFT, Directions.BOTTOM_RIGHT]}>{content}</Popup>
-      </div>
-    </div>
-  );
-
-  return PopupDemo;
-};
-
-autoPositioning.storyName = 'auto-positioning';
-
-autoPositioning.parameters = {
-  hermione: {captureSelector: ['.left', '.right', '.bottom', '.top']},
-  a11y: {element: '.left,.right,.bottom,.top'},
-  storyStyles: `
-<style>
-  .message {
-    position: absolute;
-
-    top: 50%;
-    left: 300px;
-  }
-
-  .vert {
-    top: 20%;
-    width: 150px;
-  }
-
-  .anchor {
-    position: absolute;
-  }
-
-  .left {
-    left: 0;
-    top: 50px;
-  }
-
-  .right {
-    right: 0;
-    top: 50px;
-  }
-
-  .bottom {
-    left: 150px;
-    bottom: 0;
-  }
-
-  .top {
-    right: 150px;
-    top: 0;
-  }
-</style>
-      `
-};
-
-export const popupInAPopup = () => {
-  class PopupBox extends Component {
-    state = {hidden: false};
-
-    render() {
-      return (
-        <Popup {...this.state} onCloseAttempt={() => this.setState({hidden: true})}>
-          {this.props.children}
-        </Popup>
-      );
-    }
-  }
-
-  const PopupDemo = (
-    <div>
-      Parent popup anchor
-      <PopupBox>
-        <div className="parent-popup">
-          This is a parent popup
-          <PopupBox>
-            <div className="child-popup">This is a child popup</div>
-          </PopupBox>
-        </div>
-      </PopupBox>
-    </div>
-  );
-
-  return PopupDemo;
-};
-
-popupInAPopup.storyName = 'popup in a popup';
-
-popupInAPopup.parameters = {
-  hermione: {captureSelector: 'body'},
-  storyStyles: `
-<style>
-  body {
-    min-height: 400px !important;
-  }
-
-  .parent-popup {
-    width: 100px;
-    height: 100px;
-    text-align: center;
-  }
-
-  .child-popup {
-    background-color: red;
-    text-align: center;
-    margin: 8px;
-  }
-</style>
-      `
-};
-
-export const insideAScrollableContainer = () => (
-  // Scrollable
-  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-  <div className="container" tabIndex={0}>
-    <div className="example">
-      <div className="anchor">
-        Popup anchor
-        <Popup>Popup content</Popup>
-      </div>
-    </div>
-  </div>
-);
-
-insideAScrollableContainer.storyName = 'inside a scrollable container';
-
-insideAScrollableContainer.parameters = {
-  hermione: {skip: true},
-  storyStyles: `
-<style>
-    body {
-      margin: 0 !important;
-    }
-
-    .container {
-      height: 100vh;
-      overflow: auto;
-    }
-
-    .example {
-      height: 200vh;
-      display: inline-block;
-    }
-
-    .anchor {
-      display: inline-block;
-    }
-</style>
-      `
-};
-
-export const fitsScreen = () => {
-  const PopupDemo = (
-    <div className="anchorBottom">
-      Popup anchor on bottom
-      <Popup maxHeight={1380}>
-        <div className="popupContent">
-          <div>Popup top</div>
-          <div>popup bottom</div>
-        </div>
-      </Popup>
-    </div>
-  );
-
-  return PopupDemo;
-};
-
-fitsScreen.storyName = 'fits screen';
-
-fitsScreen.parameters = {
-  hermione: {captureSelector: 'body'},
-  storyStyles: `
-<style>
-    body {
-      margin: 0 !important;
-    }
-
-    html,
-    body {
-      height: 100%;
-    }
-
-    .popupContent {
-      height: 1300px;
-      padding: 8px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-    }
-
-    .anchorBottom {
-      position: absolute;
-      bottom: 20px;
-    }
-</style>
-      `
-};

package/components/popup/popup.js

@@ -1,395 +0,0 @@
-/**
- * @name Popup
- */
-
-import React, {PureComponent} from 'react';
-import {createPortal} from 'react-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import getUID from '../global/get-uid';
-import scheduleRAF from '../global/schedule-raf';
-import {Listeners, getStyles} from '../global/dom';
-import Shortcuts from '../shortcuts/shortcuts';
-import dataTests from '../global/data-tests';
-
-import TabTrap from '../tab-trap/tab-trap';
-
-import position, {positionPropKeys} from './position';
-import styles from './popup.css';
-import {
-  DEFAULT_DIRECTIONS,
-  Dimension,
-  Directions,
-  Display,
-  MaxHeight,
-  MinWidth
-} from './popup.consts';
-import {PopupTargetContext, PopupTarget} from './popup.target';
-
-export {PopupTargetContext, PopupTarget};
-
-const stop = e => e.stopPropagation();
-
-export const getPopupContainer = target => (typeof target === 'string' ? document.querySelector(`[data-portaltarget=${target}]`) : target);
-
-/**
- * @constructor
- * @name Popup
- * @extends {ReactComponent}
- */
-export default class Popup extends PureComponent {
-  static propTypes = {
-    anchorElement: PropTypes.instanceOf(Node),
-    target: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Element)]),
-    className: PropTypes.string,
-    style: PropTypes.object,
-    hidden: PropTypes.bool.isRequired,
-    onOutsideClick: PropTypes.func,
-    onEscPress: PropTypes.func,
-    // onCloseAttempt is a common callback for ESC pressing and outside clicking.
-    // Use it if you don't need different behaviors for this cases.
-    onCloseAttempt: PropTypes.func,
-    children: PropTypes.node.isRequired,
-    dontCloseOnAnchorClick: PropTypes.bool,
-    shortcuts: PropTypes.bool,
-    keepMounted: PropTypes.bool, // pass this prop to preserve the popup's DOM state while hidden
-    'data-test': PropTypes.string,
-    client: PropTypes.bool, // true means that it's never used in SSR
-
-    directions: PropTypes.arrayOf(PropTypes.string),
-    autoPositioning: PropTypes.bool,
-    autoCorrectTopOverflow: PropTypes.bool,
-    left: PropTypes.number,
-    top: PropTypes.number,
-    maxHeight: PropTypes.number,
-    minWidth: PropTypes.number,
-    sidePadding: PropTypes.number,
-
-    attached: PropTypes.bool, // Popup adjacent to an input, without upper border and shadow
-
-    onMouseDown: PropTypes.func,
-    onMouseUp: PropTypes.func,
-    onMouseOver: PropTypes.func,
-    onMouseOut: PropTypes.func,
-    onContextMenu: PropTypes.func,
-    onDirectionChange: PropTypes.func,
-    onShow: PropTypes.func,
-    // set to true whenever popup contains focusable and scrollable content
-    trapFocus: PropTypes.bool,
-    autoFocusFirst: PropTypes.bool
-  };
-
-  static defaultProps = {
-    shortcuts: true,
-    hidden: false,
-    onOutsideClick() {},
-    onEscPress() {},
-    onCloseAttempt() {},
-    dontCloseOnAnchorClick: false,
-    keepMounted: false,
-
-    directions: DEFAULT_DIRECTIONS,
-    autoPositioning: true,
-    autoCorrectTopOverflow: true,
-    left: 0,
-    top: 0,
-    offset: 0,
-    sidePadding: 8,
-
-    attached: false,
-    trapFocus: false,
-    autoFocusFirst: false,
-
-    legacy: false
-  };
-
-  state = {
-    display: Display.SHOWING
-  };
-
-  componentDidMount() {
-    if (!this.props.client) {
-      // eslint-disable-next-line react/no-did-mount-set-state
-      this.setState({client: true});
-    }
-    if (!this.props.hidden) {
-      this._setListenersEnabled(true);
-    }
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const {hidden} = this.props;
-    if (this.props !== prevProps) {
-
-      if (prevProps.hidden !== hidden) {
-        this._setListenersEnabled(!hidden);
-      }
-
-      this._redraw();
-    }
-
-    if (
-      this.props.onShow &&
-      !hidden &&
-      this.state.display === Display.SHOWN &&
-      (prevProps.hidden || prevState.display !== Display.SHOWN)
-    ) {
-      this.props.onShow();
-    }
-  }
-
-  componentWillUnmount() {
-    this._setListenersEnabled(false);
-    this.popup = null;
-  }
-
-  shouldUseShortcuts() {
-    const {shortcuts, hidden} = this.props;
-    return shortcuts && !hidden;
-  }
-
-  listeners = new Listeners();
-  redrawScheduler = scheduleRAF(true);
-  uid = getUID('popup-');
-  calculateDisplay = prevState => ({
-    ...prevState,
-    display: this.props.hidden
-      ? Display.SHOWING
-      : Display.SHOWN
-  });
-
-  static PopupProps = {
-    Directions,
-    Dimension,
-    MinWidth,
-    MaxHeight
-  };
-
-  portalRef = el => {
-    this.node = el;
-    this.parent = el && el.parentElement;
-    if (el && this.getContainer()) {
-      this._redraw();
-    }
-  };
-
-  popupRef = el => {
-    this.popup = el;
-    this._redraw();
-  };
-
-  containerRef = el => {
-    this.container = el;
-  };
-
-  getContainer() {
-    const target = this.props.target || this.ringPopupTarget;
-    return target && getPopupContainer(target);
-  }
-
-  position() {
-    const positionProps = positionPropKeys.reduce((acc, key) => {
-      acc[key] = this.props[key];
-      return acc;
-    }, {});
-    const container = this.getContainer();
-
-    return position({
-      popup: this.popup,
-      container: container && getStyles(container).position !== 'static' ? container : null,
-      anchor: this._getAnchor(),
-      ...positionProps
-    });
-  }
-
-  _updateDirection = newDirection => {
-    if (this.state.direction !== newDirection) {
-      this.setState({direction: newDirection});
-      if (this.props.onDirectionChange) {
-        this.props.onDirectionChange(newDirection);
-      }
-    }
-  };
-
-  _updatePosition = () => {
-    if (this.popup) {
-      this.popup.style.position = 'absolute';
-      if (this.isVisible()) {
-        const {styles: style, direction} = this.position();
-        Object.keys(style).forEach(key => {
-          const value = style[key];
-          if (typeof value === 'number') {
-            this.popup.style[key] = `${value}px`;
-          } else {
-            this.popup.style[key] = value.toString();
-          }
-        });
-        this._updateDirection(direction);
-      }
-      this.setState(this.calculateDisplay);
-    }
-  };
-
-  _redraw = () => {
-    if (this.isVisible()) {
-      this.redrawScheduler(this._updatePosition);
-    }
-  };
-
-  _getAnchor() {
-    return this.props.anchorElement || this.parent;
-  }
-
-  /**
-   * @param {boolean} enable
-   * @private
-   */
-  _setListenersEnabled(enable) {
-    if (enable && !this._listenersEnabled) {
-      setTimeout(() => {
-        this._listenersEnabled = true;
-        this.listeners.add(window, 'resize', this._redraw);
-        this.listeners.add(window, 'scroll', this._redraw);
-        this.listeners.add(document, 'pointerdown', this._onDocumentClick, true);
-        let el = this._getAnchor();
-        while (el) {
-          this.listeners.add(el, 'scroll', this._redraw);
-          el = el.parentElement;
-        }
-      }, 0);
-
-      return;
-    }
-
-    if (!enable && this._listenersEnabled) {
-      this.listeners.removeAll();
-      this._listenersEnabled = false;
-    }
-  }
-
-  /**
-   * Returns visibility state
-   * @return {boolean}
-   */
-  isVisible() {
-    return !this.props.hidden;
-  }
-
-  _onCloseAttempt(evt, isEsc) {
-    this.props.onCloseAttempt(evt, isEsc);
-  }
-
-  _onEscPress = evt => {
-    this.props.onEscPress(evt);
-    this._onCloseAttempt(evt, true);
-  };
-
-  /**
-   * @param {jQuery.Event} evt
-   * @private
-   */
-  _onDocumentClick = evt => {
-    if (
-      this.container && this.container.contains(evt.target) ||
-      !this._listenersEnabled ||
-      (
-        this.props.dontCloseOnAnchorClick &&
-        this._getAnchor() &&
-        this._getAnchor().contains(evt.target)
-      )
-    ) {
-      return;
-    }
-
-    this.props.onOutsideClick(evt);
-    this._onCloseAttempt(evt, false);
-  };
-
-  getInternalContent() {
-    const {trapFocus, autoFocusFirst, children} = this.props;
-    return trapFocus
-      ? (
-        <TabTrap autoFocusFirst={autoFocusFirst} focusBackOnExit>
-          {children}
-        </TabTrap>
-      )
-      : children;
-  }
-
-  shortcutsScope = this.uid;
-  shortcutsMap = {
-    esc: this._onEscPress
-  };
-
-  render() {
-    const {
-      className, style, hidden, attached, keepMounted, client,
-      onMouseDown, onMouseUp, onMouseOver, onMouseOut, onContextMenu, 'data-test': dataTest
-    } = this.props;
-    const showing = this.state.display === Display.SHOWING;
-
-    const classes = classNames(className, styles.popup, {
-      [styles.attached]: attached,
-      [styles.hidden]: hidden,
-      [styles.showing]: showing
-    });
-
-    const direction = (this.state.direction || '').
-      toLowerCase().replace(/[_]/g, '-');
-
-    return (
-      <PopupTargetContext.Consumer>
-        {value => {
-          this.ringPopupTarget = value;
-          return (
-            <span
-              // prevent bubbling through portal
-              onClick={stop}
-              // This handler only blocks bubbling through React portal
-              role="presentation"
-              ref={this.portalRef}
-            >
-              {this.shouldUseShortcuts() &&
-              (
-                <Shortcuts
-                  map={this.shortcutsMap}
-                  scope={this.shortcutsScope}
-                />
-              )
-              }
-
-              {(client || this.state.client) && (keepMounted || !hidden) && createPortal(
-                <PopupTarget
-                  id={this.uid}
-                  ref={this.containerRef}
-                  onMouseOver={onMouseOver}
-                  onFocus={onMouseOver}
-                  onMouseOut={onMouseOut}
-                  onBlur={onMouseOut}
-                  onContextMenu={onContextMenu}
-                >
-                  <div
-                    data-test={dataTests('ring-popup', dataTest)}
-                    data-test-shown={!hidden && !showing}
-                    data-test-direction={direction}
-                    ref={this.popupRef}
-                    className={classes}
-                    style={style}
-                    onMouseDown={onMouseDown}
-                    onMouseUp={onMouseUp}
-                    // mouse handlers are used to track clicking on inner elements
-                    role="presentation"
-                  >
-                    {this.getInternalContent()}
-                  </div>
-                </PopupTarget>,
-                this.getContainer() || document.body
-              )}
-            </span>
-          );
-        }}
-      </PopupTargetContext.Consumer>
-    );
-  }
-}