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

package/components/popup/popup.examples.tsx

@@ -0,0 +1,346 @@
+import React, {Component} from 'react';
+import classNames from 'classnames';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Popup from './popup';
+
+export default {
+  title: 'Components/Popup',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'Displays a popup.'
+  }
+};
+
+interface PopupDemoState {
+  topLeft?: boolean
+  topRight?: boolean
+  bottomLeft?: boolean
+  bottomRight?: boolean
+}
+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) as (keyof typeof directionMap)[];
+  const initialState = directionKeys.reduce((acc: PopupDemoState, key) => {
+    acc[key] = true;
+    return acc;
+  }, {});
+
+  class PopupDemo extends Component {
+    state = initialState;
+
+    renderPopup = (key: keyof PopupDemoState) => (
+      <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.target.tsx

@@ -0,0 +1,29 @@
+import React, {createContext, forwardRef, HTMLAttributes, Ref, ReactNode} from 'react';
+import PropTypes from 'prop-types';
+
+export const PopupTargetContext = createContext<string | undefined>(undefined);
+export interface PopupTargetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  children: ReactNode | ((target: ReactNode) => ReactNode)
+}
+export const PopupTarget = forwardRef(
+  function PopupTarget({id, children, ...restProps}: PopupTargetProps, ref: Ref<HTMLDivElement>) {
+    const target = (
+      <div
+        {...restProps}
+        data-portaltarget={id}
+        ref={ref}
+      >
+        {typeof children !== 'function' && children}
+      </div>
+    );
+    return (
+      <PopupTargetContext.Provider value={id}>
+        {typeof children === 'function' ? children(target) : target}
+      </PopupTargetContext.Provider>
+    );
+  }
+);
+PopupTarget.propTypes = {
+  id: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+};

package/components/popup/popup.test.tsx

@@ -0,0 +1,257 @@
+import * as Sinon from 'sinon';
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import {getRect, getStyles} from '../global/dom';
+import simulateCombo from '../../test-helpers/simulate-combo';
+
+import Popup, {PopupAttrs} from './popup';
+import {MinWidth} from './popup.consts';
+
+describe('Popup', () => {
+  const shallowPopup = (props?: Partial<PopupAttrs>) =>
+    shallow(<Popup {...{children: '', ...props}}/>);
+  const mountPopup = (props?: Partial<PopupAttrs>) =>
+    mount<Popup>(<Popup {...{children: '', ...props}}/>);
+
+  it('should create component', () => {
+    const popup = shallowPopup();
+    popup.should.exist;
+  });
+
+  it('should allow pass DOM node as a target', () => {
+    const targetNode = document.createElement('div');
+    const instance = mountPopup({target: targetNode}).instance();
+    const popupElement = instance.popup;
+    (popupElement != null && targetNode.contains(popupElement)).should.be.true;
+  });
+
+  it('should attempt to close by pressing esc', () => {
+    const onCloseAttempt = sandbox.stub();
+    mountPopup({onCloseAttempt});
+
+    simulateCombo('esc');
+
+    onCloseAttempt.should.have.been.called;
+  });
+
+  describe('close by pointer down', () => {
+    const downEvent = new PointerEvent('pointerdown', {
+      bubbles: true,
+      cancelable: false
+    });
+    let clock: Sinon.SinonFakeTimers;
+
+    beforeEach(() => {
+      clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
+    });
+
+    it('should attempt to close by pointer down outside the element', () => {
+      const onCloseAttempt = sandbox.stub();
+      mountPopup({onCloseAttempt});
+
+      clock.tick(0);
+      document.body.dispatchEvent(downEvent);
+      onCloseAttempt.should.have.been.called;
+    });
+
+    it('should pass event to onCloseAttempt callback when closing by document pointer down event', () => {
+      const onCloseAttempt = sandbox.stub();
+      mountPopup({onCloseAttempt});
+
+      clock.tick(0);
+      document.body.dispatchEvent(downEvent);
+      onCloseAttempt.should.have.been.calledWith(sinon.match({type: 'pointerdown'}));
+    });
+
+    it('should not close popup if popup hidden', () => {
+      const onCloseAttempt = sandbox.stub();
+      mountPopup({
+        hidden: true,
+        onCloseAttempt
+      });
+
+      clock.tick(0);
+      document.body.dispatchEvent(downEvent);
+      onCloseAttempt.should.not.have.been.called;
+    });
+
+    it('should be closed by pointer down event outside the element after show', () => {
+      const onCloseAttempt = sandbox.stub();
+      const wrapper = mountPopup({
+        onCloseAttempt
+      });
+
+      wrapper.setProps({hidden: false}, () => {
+        clock.tick(0);
+        document.body.dispatchEvent(downEvent);
+        onCloseAttempt.should.have.been.called;
+      });
+    });
+
+    it('shouldn\'t be closed by pointer down event inside the element', () => {
+      const onCloseAttempt = sandbox.stub();
+      const instance = mountPopup({onCloseAttempt}).instance();
+
+      clock.tick(0);
+      instance.popup?.dispatchEvent(downEvent);
+      onCloseAttempt.should.not.have.been.called;
+    });
+  });
+
+  describe('positioning', () => {
+    let element: HTMLElement;
+    beforeEach(() => {
+      sandbox.stub(window, 'requestAnimationFrame').callsFake(cb => {
+        cb(0);
+        return 0;
+      });
+    });
+
+    afterEach(() => {
+      if (element && element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    });
+
+    it('top-left direction', () => {
+      element = document.createElement('div');
+      element.setAttribute(
+        'style',
+        'position: absolute; top: 10px; left: 15px; width: 50px; height: 50px;'
+      );
+      document.body.append(element);
+
+      const instance = mountPopup({
+        directions: [Popup.PopupProps.Directions.TOP_LEFT],
+        anchorElement: element
+      }).instance();
+
+      should.exist(instance.popup);
+      const popupElement = instance.popup as HTMLElement;
+      const elementOffset = getRect(element);
+
+      parseInt(getStyles(popupElement).left, 10).
+        should.equal(elementOffset.left + elementOffset.width - popupElement.clientWidth);
+      parseInt(getStyles(popupElement).top, 10).
+        should.equal(elementOffset.top - popupElement.clientHeight);
+    });
+
+    it('should limit top by sidePadding if opens to the top', () => {
+      const SIDE_PADDING = 8;
+      element = document.createElement('div');
+      element.setAttribute(
+        'style',
+        'position: absolute; top: 10px; left: 15px; width: 50px; height: 50px;'
+      );
+      document.body.append(element);
+
+      const instance = mountPopup({
+        directions: [Popup.PopupProps.Directions.TOP_LEFT],
+        anchorElement: element,
+        sidePadding: SIDE_PADDING,
+        children: <div style={{height: '300px'}}>{'foo'}</div>
+      }).instance();
+
+      should.exist(instance.popup);
+      getStyles(instance.popup as HTMLElement).top.should.equal(`${SIDE_PADDING}px`);
+    });
+
+    it('bottom-right corner', () => {
+      element = document.createElement('div');
+      element.setAttribute(
+        'style',
+        'position: absolute; top: 10px; left: 15px; width: 50px; height: 50px;'
+      );
+      document.body.append(element);
+
+      const instance = mountPopup({
+        directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT],
+        anchorElement: element
+      }).instance();
+
+      should.exist(instance.popup);
+      const popupElement = instance.popup as HTMLElement;
+      const elementOffset = getRect(element);
+
+      parseInt(getStyles(popupElement).left, 10).
+        should.equal(elementOffset.left);
+      parseInt(getStyles(popupElement).top, 10).
+        should.equal(elementOffset.top + elementOffset.height);
+    });
+
+    it('should add specified offset', () => {
+      const OFFSET = 10;
+      element = document.createElement('div');
+      element.setAttribute(
+        'style',
+        'position: absolute; top: 10px; left: 15px; width: 50px; height: 50px;'
+      );
+      document.body.append(element);
+
+      const instance = mountPopup({
+        directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT],
+        anchorElement: element,
+        left: OFFSET,
+        top: OFFSET
+      }).instance();
+
+      should.exist(instance.popup);
+      const popupElement = instance.popup as HTMLElement;
+      const elementOffset = getRect(element);
+
+      parseInt(getStyles(popupElement).left, 10).
+        should.equal(elementOffset.left + OFFSET);
+      parseInt(getStyles(popupElement).top, 10).
+        should.equal(elementOffset.top + elementOffset.height + OFFSET);
+    });
+
+    it('Should support minWidth = MinWidth.TARGET', () => {
+      element = document.createElement('div');
+      element.setAttribute('style', 'width: 50px; padding-left: 20px;');
+      document.body.append(element);
+
+      const instance = mountPopup({
+        minWidth: MinWidth.TARGET,
+        anchorElement: element,
+        hidden: false
+      }).instance();
+
+      should.exist(instance.popup);
+      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      parseInt(getStyles(instance.popup as HTMLElement).minWidth, 10).should.equal(70);
+      element.remove();
+    });
+
+    it('Should support minWidth = number in pixels if anchor width is less than minWidth', () => {
+      element = document.createElement('div');
+      element.setAttribute('style', 'width: 50px;');
+      document.body.append(element);
+
+      const WIDTH = 345;
+      const instance = mountPopup({
+        minWidth: WIDTH, hidden: false, anchorElement: element
+      }).instance();
+
+      should.exist(instance.popup);
+      const popupElement = instance.popup as HTMLElement;
+      parseInt(popupElement.style.minWidth, 10).should.equal(WIDTH);
+    });
+
+    it('Should use width of anchor if it is bigger than minWidth', () => {
+      const WIDTH = 345;
+
+      element = document.createElement('div');
+      element.setAttribute('style', `width: ${WIDTH}px;`);
+      document.body.append(element);
+
+      const instance = mountPopup({
+        minWidth: 20, hidden: false, anchorElement: element
+      }).instance();
+
+      should.exist(instance.popup);
+      const popupElement = instance.popup as HTMLElement;
+      parseInt(popupElement.style.minWidth, 10).should.equal(WIDTH);
+    });
+  });
+});