@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

package/components/dialog/dialog.js

@@ -1,183 +0,0 @@
-import React, {PureComponent} from 'react';
-import {createPortal} from 'react-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close';
-
-import {AdaptiveIsland} from '../island/island';
-import getUID from '../global/get-uid';
-import dataTests from '../global/data-tests';
-import Shortcuts from '../shortcuts/shortcuts';
-import TabTrap from '../tab-trap/tab-trap';
-import Button from '../button/button';
-
-import {PopupTarget} from '../popup/popup.target';
-
-import {preventerFactory as scrollPreventerFactory} from './dialog__body-scroll-preventer';
-import styles from './dialog.css';
-
-/**
- * @name Dialog
- */
-
-function noop() {}
-
-export default class Dialog extends PureComponent {
-  static propTypes = {
-    label: PropTypes.string,
-    className: PropTypes.string,
-    contentClassName: PropTypes.string,
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-    ]),
-    show: PropTypes.bool.isRequired,
-    showCloseButton: PropTypes.bool,
-    closeButtonInside: PropTypes.bool,
-    onOverlayClick: PropTypes.func,
-    onEscPress: PropTypes.func,
-    onCloseClick: PropTypes.func,
-    // onCloseAttempt is a common callback for ESC pressing and overlay clicking.
-    // Use it if you don't need different behaviors for this cases.
-    onCloseAttempt: PropTypes.func,
-    // focusTrap may break popups inside dialog, so use it carefully
-    trapFocus: PropTypes.bool,
-    portalTarget: PropTypes.instanceOf(HTMLElement),
-    autoFocusFirst: PropTypes.bool,
-    'data-test': PropTypes.string
-  };
-
-  static defaultProps = {
-    label: 'Dialog',
-    onOverlayClick: noop,
-    onEscPress: noop,
-    onCloseClick: noop,
-    onCloseAttempt: noop,
-    showCloseButton: false,
-    closeButtonInside: false,
-    trapFocus: false,
-    autoFocusFirst: true
-  };
-
-  state = {
-    shortcutsScope: getUID('ring-dialog-')
-  };
-
-  componentDidMount() {
-    this.toggleScrollPreventer();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.show !== this.props.show) {
-      this.toggleScrollPreventer();
-    }
-  }
-
-  componentWillUnmount() {
-    this.scrollPreventer.reset();
-  }
-
-  scrollPreventer = scrollPreventerFactory(getUID('preventer-'));
-
-  uid = getUID('dialog-');
-
-  toggleScrollPreventer() {
-    if (this.props.show) {
-      this.scrollPreventer.prevent();
-    } else {
-      this.scrollPreventer.reset();
-    }
-  }
-
-  handleClick = event => {
-    this.props.onOverlayClick(event);
-    this.props.onCloseAttempt(event);
-  };
-
-  onCloseClick = event => {
-    this.props.onCloseClick(event);
-    this.props.onCloseAttempt(event);
-  };
-
-  getShortcutsMap = () => {
-    const onEscape = event => {
-      if (this.props.show) {
-        this.props.onEscPress(event);
-        this.props.onCloseAttempt(event);
-      }
-    };
-
-    return {
-      esc: onEscape
-    };
-  };
-
-  dialogRef = tabTrap => {
-    this.dialog = tabTrap && tabTrap.node;
-  };
-
-  render() {
-    const {show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick,
-      children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside,
-      portalTarget, label, ...restProps} = this.props;
-    const classes = classNames(styles.container, className);
-    const shortcutsMap = this.getShortcutsMap();
-
-    return show && createPortal(
-      <PopupTarget id={this.uid} className={styles.popupTarget}>
-        {
-          target => (
-            <TabTrap
-              trapDisabled={!trapFocus}
-              data-test={dataTests('ring-dialog-container', dataTest)}
-              ref={this.dialogRef}
-              className={classes}
-              role="presentation"
-              {...restProps}
-            >
-              <Shortcuts
-                map={shortcutsMap}
-                scope={this.state.shortcutsScope}
-              />
-              {(onOverlayClick !== noop || onCloseAttempt !== noop) && (
-                <div
-                  // click handler is duplicated in close button
-                  role="presentation"
-                  className={styles.clickableOverlay}
-                  onClick={this.handleClick}
-                />
-              )}
-              <div className={styles.innerContainer}>
-                <AdaptiveIsland
-                  className={classNames(styles.content, contentClassName)}
-                  data-test="ring-dialog"
-                  role="dialog"
-                  aria-label={label}
-                >
-                  {children}
-                  {showCloseButton &&
-                    (
-                      <Button
-                        icon={closeIcon}
-                        data-test="ring-dialog-close-button"
-                        className={classNames(styles.closeButton, {
-                          [styles.closeButtonOutside]: !closeButtonInside,
-                          [styles.closeButtonInside]: closeButtonInside
-                        })}
-                        iconClassName={styles.closeIcon}
-                        onClick={this.onCloseClick}
-                        aria-label="close dialog"
-                      />
-                    )
-                  }
-                </AdaptiveIsland>
-              </div>
-              {target}
-            </TabTrap>
-          )
-        }
-      </PopupTarget>,
-      portalTarget instanceof HTMLElement ? portalTarget : document.body
-    );
-  }
-}

package/components/dialog/dialog.test.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import {mount} from 'enzyme';
-
-import Dialog from './dialog';
-import styles from './dialog.css';
-
-describe('Dialog', () => {
-  const children = <div/>;
-  const mountDialog = props => mount(<Dialog label="Dialog" {...props} trapFocus={false}/>);
-
-  it('should create component', () => {
-    mountDialog({show: true, children}).should.have.type(Dialog);
-  });
-
-  it('should wrap children with dialog wrapper', () => {
-    mountDialog({show: true, children}).instance().dialog.should.match(`.${styles.container}`);
-  });
-
-  it('should use passed className', () => {
-    mountDialog({show: true, children, className: 'test-class'}).instance().dialog.should.
-      match('.test-class');
-  });
-
-  it('should call onOverlayClick and onCloseAttempt callbacks on click by overlay', () => {
-    const closeSpy = sandbox.spy();
-    const clickSpy = sandbox.spy();
-    const instance = mountDialog({
-      show: true,
-      children,
-      onOverlayClick: clickSpy,
-      onCloseAttempt: closeSpy
-    }).instance();
-    instance.handleClick({target: instance.dialog});
-
-    closeSpy.should.have.been.called;
-    clickSpy.should.have.been.called;
-  });
-
-  it('should call onEscPress and onCloseAttempt callbacks on click by overlay', () => {
-    const closeSpy = sandbox.spy();
-    const escSpy = sandbox.spy();
-    const instance = mountDialog({
-      show: true,
-      children,
-      onEscPress: escSpy,
-      onCloseAttempt: closeSpy
-    }).instance();
-
-    instance.getShortcutsMap().esc({});
-
-    closeSpy.should.have.been.called;
-    escSpy.should.have.been.called;
-  });
-
-  it('should not call onEscPress if is hidden', () => {
-    const escSpy = sandbox.spy();
-    const instance = mountDialog({show: false, children, onEscPress: escSpy}).instance();
-    instance.getShortcutsMap().esc({});
-
-    escSpy.should.not.have.been.called;
-  });
-});

package/components/dropdown/anchor.js

@@ -1,32 +0,0 @@
-import React, {memo} from 'react';
-import PropTypes from 'prop-types';
-import chevronDown from '@jetbrains/icons/chevron-10px';
-import classNames from 'classnames';
-
-import Icon from '../icon/icon';
-
-import Button from '../button/button';
-
-import styles from './dropdown.css';
-
-const Anchor = ({children, className, ...restProps}) => (
-  <Button
-    data-test-ring-dropdown-anchor
-    text
-    className={classNames(styles.anchor, className)}
-    {...restProps}
-  >
-    {children}
-    <Icon
-      glyph={chevronDown}
-      className={styles.chevron}
-    />
-  </Button>
-);
-
-Anchor.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-
-export default memo(Anchor);

package/components/dropdown/dropdown.examples.js

@@ -1,151 +0,0 @@
-import React from 'react';
-import chevronDownIcon from '@jetbrains/icons/chevron-down';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import {ActiveItemContext} from '../list/list';
-
-import Popup from '@jetbrains/ring-ui/components/popup/popup';
-import PopupMenu from '@jetbrains/ring-ui/components/popup-menu/popup-menu';
-import Button from '@jetbrains/ring-ui/components/button/button';
-import Link from '@jetbrains/ring-ui/components/link/link';
-import {Input} from '@jetbrains/ring-ui/components/input/input';
-import getUID from '@jetbrains/ring-ui/components/global/get-uid';
-import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
-
-export default {
-  title: 'Components/Dropdown',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'A stateful popup with a clickable anchor.',
-
-    hermione: {
-      actions: [
-        {type: 'click', selector: '[data-test~=ring-dropdown]'},
-        {
-          type: 'capture',
-          name: 'dropdown',
-          selector: ['[data-test~=ring-dropdown]', '[data-test~=ring-popup]']
-        }
-      ]
-    }
-  }
-};
-
-export const basic = () => (
-  <Dropdown anchor="Click me">
-    <Popup>Popup content</Popup>
-  </Dropdown>
-);
-
-basic.storyName = 'basic';
-
-export const withCustomAnchorAndPopup = () => (
-  <Dropdown anchor={<Button delayed>Edit</Button>}>
-    <PopupMenu closeOnSelect data={['Cut', 'Copy', 'Paste'].map(label => ({label}))}/>
-  </Dropdown>
-);
-
-export const withCustomAnchorAndPopupAndContentAccessibilityHandling = () => {
-  const listId = getUID('popup-menu-list-id');
-
-  return (
-    <ActiveItemContext.Provider>
-      <Dropdown anchor={({active}) => (
-        <ActiveItemContext.ValueContext.Consumer>
-          {activeItemId => {
-            const anchorAriaProps = active && activeItemId
-              ? {'aria-owns': listId, 'aria-activedescendant': activeItemId}
-              : {};
-            return (
-              <Button
-                {...anchorAriaProps}
-                delayed
-              >Edit</Button>
-            );
-          }}
-        </ActiveItemContext.ValueContext.Consumer>
-      )}
-      >
-        <PopupMenu
-          id={listId}
-          ariaLabel="My options menu"
-          closeOnSelect
-          activateFirstItem
-          data={['Cut', 'Copy', 'Paste'].map(label => ({label, key: label.toLowerCase()}))}
-        />
-      </Dropdown>
-    </ActiveItemContext.Provider>
-  );
-};
-
-withCustomAnchorAndPopup.storyName = 'with custom anchor and popup';
-
-export const withActiveClassName = () => (
-  <Dropdown
-    className="chevron"
-    activeClassName="rotated"
-    anchor={<Button title="Details" icon={chevronDownIcon}/>}
-  >
-    <Popup>Popup content</Popup>
-  </Dropdown>
-);
-
-withActiveClassName.storyName = 'with activeClassName';
-
-withActiveClassName.parameters = {
-  storyStyles: `
-<style>
-  .chevron svg {
-    transition: transform 0.3s ease-out;
-    transform-origin: 50% 40%;
-    transform: rotate(0deg);
-  }
-
-  .rotated svg {
-    transform: rotate(180deg);
-  }
-</style>`
-};
-
-export const withHoverMode = () => (
-  <Dropdown anchor="Hover over me" hoverMode>
-    <Popup>
-      <div>Outer popup</div>
-    </Popup>
-  </Dropdown>
-);
-
-withHoverMode.storyName = 'with hover mode';
-
-export const withHoverModeAndDisabledClickMode = () => (
-  <Dropdown anchor={<Link href="">Hover over me</Link>} clickMode={false} hoverMode>
-    <Popup>Popup content</Popup>
-  </Dropdown>
-);
-
-withHoverModeAndDisabledClickMode.storyName = 'with hover mode and disabled click mode';
-withHoverModeAndDisabledClickMode.parameters = {hermione: {skip: true}};
-
-export const autofocusOnOpen = () => (
-  <div>
-    <div style={{height: '90vh'}}/>
-    <Dropdown anchor="Scroll and then click me">
-      <Popup trapFocus autoFocusFirst>
-        <Input className="ring-js-shortcuts"/>
-      </Popup>
-    </Dropdown>
-    <div style={{height: '50vh'}}/>
-  </div>
-);
-
-autofocusOnOpen.storyName = 'autofocus on open';
-autofocusOnOpen.parameters = {hermione: {skip: true}};
-
-export const renderProps = () => (
-  <Dropdown anchor="Click me">
-    {props => <Popup {...props}><Button onClick={props.onCloseAttempt} text>Close</Button></Popup>}
-  </Dropdown>
-);
-renderProps.parameters = {hermione: {skip: true}};

package/components/dropdown/dropdown.js

@@ -1,185 +0,0 @@
-import React, {cloneElement, Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import dataTests from '../global/data-tests';
-
-import Anchor from './anchor';
-import styles from './dropdown.css';
-
-/**
- * @name Dropdown
- */
-
-export default class Dropdown extends Component {
-  static propTypes = {
-    /**
-     * Can be string, React element, or a function accepting an object with {active, pinned} properties and returning a React element
-     * React element should render some interactive HTML element like `button` or `a`
-     */
-    anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-    children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
-    initShown: PropTypes.bool,
-    className: PropTypes.string,
-    activeClassName: PropTypes.string,
-    clickMode: PropTypes.bool,
-    hoverMode: PropTypes.bool,
-    hoverShowTimeOut: PropTypes.number,
-    hoverHideTimeOut: PropTypes.number,
-    onShow: PropTypes.func,
-    onHide: PropTypes.func,
-    onMouseEnter: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    'data-test': PropTypes.string
-  };
-
-  static defaultProps = {
-    initShown: false,
-    clickMode: true,
-    hoverMode: false,
-    hoverShowTimeOut: 300,
-    hoverHideTimeOut: 600,
-    onShow: () => {},
-    onHide: () => {},
-    onMouseEnter: () => {},
-    onMouseLeave: () => {}
-  };
-
-  state = {
-    show: this.props.initShown,
-    pinned: false
-  };
-
-  onClick = () => {
-    const {show, pinned} = this.state;
-    let nextPinned = pinned;
-
-    if (this.props.hoverMode) {
-      if (!pinned) {
-        nextPinned = true;
-
-        if (show) {
-          this.setState({pinned: true});
-          return;
-        }
-      } else {
-        nextPinned = false;
-      }
-    }
-
-    this._toggle(!show, nextPinned);
-  };
-
-  onChildCloseAttempt = () => {
-    let nextPinned = this.state.pinned;
-    if (this.props.hoverMode) {
-      nextPinned = false;
-    }
-
-    this._toggle(false, nextPinned);
-  };
-
-  onMouseEnter = event => {
-    this._clearTimer();
-    this.props.onMouseEnter(event);
-
-    this.hoverTimer = setTimeout(() => {
-      if (!this.state.show) {
-        this._toggle(true);
-      }
-    }, this.props.hoverShowTimeOut);
-  };
-
-  onMouseLeave = event => {
-    this.props.onMouseLeave(event);
-    if (this.state.pinned) {
-      return;
-    }
-
-    this._clearTimer();
-
-    this.hoverTimer = setTimeout(() => {
-      if (this.state.show) {
-        this._toggle(false);
-      }
-    }, this.props.hoverHideTimeOut);
-  };
-
-  handlePopupInteraction = () => {
-    this.setState(({pinned}) => (pinned ? null : {pinned: true}));
-  };
-
-  toggle(show = !this.state.show) {
-    this._toggle(show);
-  }
-
-  _toggle(show, pinned = this.state.pinned) {
-    this.setState({show, pinned}, () => (show ? this.props.onShow() : this.props.onHide()));
-  }
-
-  _clearTimer() {
-    if (this.hoverTimer) {
-      clearTimeout(this.hoverTimer);
-      this.hoverTimer = null;
-    }
-  }
-
-  render() {
-    const {show, pinned} = this.state;
-    const {
-      initShown, onShow, onHide, hoverShowTimeOut, hoverHideTimeOut,
-      children, anchor, className, activeClassName, hoverMode, clickMode, 'data-test': dataTest,
-      ...restProps
-    } = this.props;
-
-    const classes = classNames(styles.dropdown, className, {
-      [activeClassName]: activeClassName != null && show
-    });
-
-    let anchorElement;
-
-    const active = hoverMode ? pinned : show;
-
-    switch (typeof anchor) {
-      case 'string':
-        anchorElement = (<Anchor active={active}>{anchor}</Anchor>);
-        break;
-      case 'function':
-        anchorElement = anchor({active: show, pinned});
-        break;
-
-      default:
-        if (typeof anchor.type === 'string' || Array.isArray(anchor)) {
-          anchorElement = anchor;
-        } else {
-          anchorElement = cloneElement(anchor, {active});
-        }
-    }
-
-    const childProps = {
-      hidden: !show,
-      onCloseAttempt: this.onChildCloseAttempt,
-      onMouseDown: hoverMode ? this.handlePopupInteraction : undefined,
-      onContextMenu: hoverMode ? this.handlePopupInteraction : undefined,
-      dontCloseOnAnchorClick: true
-    };
-
-    return (
-      <div
-        data-test={dataTests('ring-dropdown', dataTest)}
-        {...restProps}
-        onClick={clickMode ? this.onClick : undefined}
-        // anchorElement should be a `button` or an `a`
-        role="presentation"
-        onMouseEnter={hoverMode ? this.onMouseEnter : undefined}
-        onMouseLeave={hoverMode ? this.onMouseLeave : undefined}
-        className={classes}
-      >
-        {anchorElement}
-        {typeof children === 'function' ? children(childProps) : cloneElement(children, childProps)}
-      </div>
-    );
-  }
-}
-
-export {Anchor};