123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357 |
- import React from 'react';
- import PropTypes from 'prop-types';
- import ImmutablePropTypes from 'react-immutable-proptypes';
- import IconButton from './icon_button';
- import Overlay from 'react-overlays/lib/Overlay';
- import Motion from '../features/ui/util/optional_motion';
- import spring from 'react-motion/lib/spring';
- import { supportsPassiveEvents } from 'detect-passive-events';
- import classNames from 'classnames';
- import { CircularProgress } from 'mastodon/components/loading_indicator';
- const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
- let id = 0;
- class DropdownMenu extends React.PureComponent {
- static contextTypes = {
- router: PropTypes.object,
- };
- static propTypes = {
- items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]).isRequired,
- loading: PropTypes.bool,
- scrollable: PropTypes.bool,
- onClose: PropTypes.func.isRequired,
- style: PropTypes.object,
- placement: PropTypes.string,
- arrowOffsetLeft: PropTypes.string,
- arrowOffsetTop: PropTypes.string,
- openedViaKeyboard: PropTypes.bool,
- renderItem: PropTypes.func,
- renderHeader: PropTypes.func,
- onItemClick: PropTypes.func.isRequired,
- };
- static defaultProps = {
- style: {},
- placement: 'bottom',
- };
- state = {
- mounted: false,
- };
- handleDocumentClick = e => {
- if (this.node && !this.node.contains(e.target)) {
- this.props.onClose();
- }
- }
- componentDidMount () {
- document.addEventListener('click', this.handleDocumentClick, false);
- document.addEventListener('keydown', this.handleKeyDown, false);
- document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
- if (this.focusedItem && this.props.openedViaKeyboard) {
- this.focusedItem.focus({ preventScroll: true });
- }
- this.setState({ mounted: true });
- }
- componentWillUnmount () {
- document.removeEventListener('click', this.handleDocumentClick, false);
- document.removeEventListener('keydown', this.handleKeyDown, false);
- document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
- }
- setRef = c => {
- this.node = c;
- }
- setFocusRef = c => {
- this.focusedItem = c;
- }
- handleKeyDown = e => {
- const items = Array.from(this.node.querySelectorAll('a, button'));
- const index = items.indexOf(document.activeElement);
- let element = null;
- switch(e.key) {
- case 'ArrowDown':
- element = items[index+1] || items[0];
- break;
- case 'ArrowUp':
- element = items[index-1] || items[items.length-1];
- break;
- case 'Tab':
- if (e.shiftKey) {
- element = items[index-1] || items[items.length-1];
- } else {
- element = items[index+1] || items[0];
- }
- break;
- case 'Home':
- element = items[0];
- break;
- case 'End':
- element = items[items.length-1];
- break;
- case 'Escape':
- this.props.onClose();
- break;
- }
- if (element) {
- element.focus();
- e.preventDefault();
- e.stopPropagation();
- }
- }
- handleItemKeyPress = e => {
- if (e.key === 'Enter' || e.key === ' ') {
- this.handleClick(e);
- }
- }
- handleClick = e => {
- const { onItemClick } = this.props;
- onItemClick(e);
- }
- renderItem = (option, i) => {
- if (option === null) {
- return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
- }
- const { text, href = '#', target = '_blank', method } = option;
- return (
- <li className='dropdown-menu__item' key={`${text}-${i}`}>
- <a href={href} target={target} data-method={method} rel='noopener noreferrer' role='button' tabIndex='0' ref={i === 0 ? this.setFocusRef : null} onClick={this.handleClick} onKeyPress={this.handleItemKeyPress} data-index={i}>
- {text}
- </a>
- </li>
- );
- }
- render () {
- const { items, style, placement, arrowOffsetLeft, arrowOffsetTop, scrollable, renderHeader, loading } = this.props;
- const { mounted } = this.state;
- let renderItem = this.props.renderItem || this.renderItem;
- return (
- <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
- {({ opacity, scaleX, scaleY }) => (
- // It should not be transformed when mounting because the resulting
- // size will be used to determine the coordinate of the menu by
- // react-overlays
- <div className={`dropdown-menu ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null }} ref={this.setRef}>
- <div className={`dropdown-menu__arrow ${placement}`} style={{ left: arrowOffsetLeft, top: arrowOffsetTop }} />
- <div className={classNames('dropdown-menu__container', { 'dropdown-menu__container--loading': loading })}>
- {loading && (
- <CircularProgress size={30} strokeWidth={3.5} />
- )}
- {!loading && renderHeader && (
- <div className='dropdown-menu__container__header'>
- {renderHeader(items)}
- </div>
- )}
- {!loading && (
- <ul className={classNames('dropdown-menu__container__list', { 'dropdown-menu__container__list--scrollable': scrollable })}>
- {items.map((option, i) => renderItem(option, i, { onClick: this.handleClick, onKeyPress: this.handleItemKeyPress }))}
- </ul>
- )}
- </div>
- </div>
- )}
- </Motion>
- );
- }
- }
- export default class Dropdown extends React.PureComponent {
- static contextTypes = {
- router: PropTypes.object,
- };
- static propTypes = {
- children: PropTypes.node,
- icon: PropTypes.string,
- items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]).isRequired,
- loading: PropTypes.bool,
- size: PropTypes.number,
- title: PropTypes.string,
- disabled: PropTypes.bool,
- scrollable: PropTypes.bool,
- status: ImmutablePropTypes.map,
- isUserTouching: PropTypes.func,
- onOpen: PropTypes.func.isRequired,
- onClose: PropTypes.func.isRequired,
- dropdownPlacement: PropTypes.string,
- openDropdownId: PropTypes.number,
- openedViaKeyboard: PropTypes.bool,
- renderItem: PropTypes.func,
- renderHeader: PropTypes.func,
- onItemClick: PropTypes.func,
- };
- static defaultProps = {
- title: 'Menu',
- };
- state = {
- id: id++,
- };
- handleClick = ({ target, type }) => {
- if (this.state.id === this.props.openDropdownId) {
- this.handleClose();
- } else {
- const { top } = target.getBoundingClientRect();
- const placement = top * 2 < innerHeight ? 'bottom' : 'top';
- this.props.onOpen(this.state.id, this.handleItemClick, placement, type !== 'click');
- }
- }
- handleClose = () => {
- if (this.activeElement) {
- this.activeElement.focus({ preventScroll: true });
- this.activeElement = null;
- }
- this.props.onClose(this.state.id);
- }
- handleMouseDown = () => {
- if (!this.state.open) {
- this.activeElement = document.activeElement;
- }
- }
- handleButtonKeyDown = (e) => {
- switch(e.key) {
- case ' ':
- case 'Enter':
- this.handleMouseDown();
- break;
- }
- }
- handleKeyPress = (e) => {
- switch(e.key) {
- case ' ':
- case 'Enter':
- this.handleClick(e);
- e.stopPropagation();
- e.preventDefault();
- break;
- }
- }
- handleItemClick = e => {
- const { onItemClick } = this.props;
- const i = Number(e.currentTarget.getAttribute('data-index'));
- const item = this.props.items[i];
- this.handleClose();
- if (typeof onItemClick === 'function') {
- e.preventDefault();
- onItemClick(item, i);
- } else if (item && typeof item.action === 'function') {
- e.preventDefault();
- item.action();
- } else if (item && item.to) {
- e.preventDefault();
- this.context.router.history.push(item.to);
- }
- }
- setTargetRef = c => {
- this.target = c;
- }
- findTarget = () => {
- return this.target;
- }
- componentWillUnmount = () => {
- if (this.state.id === this.props.openDropdownId) {
- this.handleClose();
- }
- }
- close = () => {
- this.handleClose();
- }
- render () {
- const {
- icon,
- items,
- size,
- title,
- disabled,
- loading,
- scrollable,
- dropdownPlacement,
- openDropdownId,
- openedViaKeyboard,
- children,
- renderItem,
- renderHeader,
- } = this.props;
- const open = this.state.id === openDropdownId;
- const button = children ? React.cloneElement(React.Children.only(children), {
- ref: this.setTargetRef,
- onClick: this.handleClick,
- onMouseDown: this.handleMouseDown,
- onKeyDown: this.handleButtonKeyDown,
- onKeyPress: this.handleKeyPress,
- }) : (
- <IconButton
- icon={icon}
- title={title}
- active={open}
- disabled={disabled}
- size={size}
- ref={this.setTargetRef}
- onClick={this.handleClick}
- onMouseDown={this.handleMouseDown}
- onKeyDown={this.handleButtonKeyDown}
- onKeyPress={this.handleKeyPress}
- />
- );
- return (
- <React.Fragment>
- {button}
- <Overlay show={open} placement={dropdownPlacement} target={this.findTarget}>
- <DropdownMenu
- items={items}
- loading={loading}
- scrollable={scrollable}
- onClose={this.handleClose}
- openedViaKeyboard={openedViaKeyboard}
- renderItem={renderItem}
- renderHeader={renderHeader}
- onItemClick={this.handleItemClick}
- />
- </Overlay>
- </React.Fragment>
- );
- }
- }
|