2017-12-23 22:16:45 -08:00
|
|
|
// Package imports.
|
|
|
|
import PropTypes from 'prop-types';
|
2023-05-28 05:18:23 -07:00
|
|
|
import { PureComponent } from 'react';
|
2023-05-28 07:38:10 -07:00
|
|
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
2023-01-11 12:58:46 -08:00
|
|
|
import Overlay from 'react-overlays/Overlay';
|
2017-12-23 22:16:45 -08:00
|
|
|
|
|
|
|
// Components.
|
2023-05-08 18:11:56 -07:00
|
|
|
import { IconButton } from 'flavours/glitch/components/icon_button';
|
2023-05-28 07:38:10 -07:00
|
|
|
|
2019-04-21 08:17:10 -07:00
|
|
|
import DropdownMenu from './dropdown_menu';
|
2017-12-23 22:16:45 -08:00
|
|
|
|
2019-08-06 04:57:45 -07:00
|
|
|
// The component.
|
2023-05-28 05:18:23 -07:00
|
|
|
export default class ComposerOptionsDropdown extends PureComponent {
|
2017-12-23 22:16:45 -08:00
|
|
|
|
2019-08-06 04:57:45 -07:00
|
|
|
static propTypes = {
|
2022-11-22 02:26:14 -08:00
|
|
|
isUserTouching: PropTypes.func,
|
2019-08-06 04:57:45 -07:00
|
|
|
disabled: PropTypes.bool,
|
|
|
|
icon: PropTypes.string,
|
|
|
|
items: PropTypes.arrayOf(PropTypes.shape({
|
|
|
|
icon: PropTypes.string,
|
2022-02-09 05:39:12 -08:00
|
|
|
meta: PropTypes.string,
|
2019-08-06 04:57:45 -07:00
|
|
|
name: PropTypes.string.isRequired,
|
2022-02-09 05:39:12 -08:00
|
|
|
text: PropTypes.string,
|
2019-08-06 04:57:45 -07:00
|
|
|
})).isRequired,
|
|
|
|
onModalOpen: PropTypes.func,
|
|
|
|
onModalClose: PropTypes.func,
|
|
|
|
title: PropTypes.string,
|
|
|
|
value: PropTypes.string,
|
|
|
|
onChange: PropTypes.func,
|
2021-02-10 15:53:12 -08:00
|
|
|
container: PropTypes.func,
|
2022-02-09 05:39:12 -08:00
|
|
|
renderItemContents: PropTypes.func,
|
|
|
|
closeOnChange: PropTypes.bool,
|
|
|
|
};
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
closeOnChange: true,
|
2019-08-06 04:57:45 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
state = {
|
|
|
|
open: false,
|
2019-08-06 05:18:09 -07:00
|
|
|
openedViaKeyboard: undefined,
|
2019-08-06 04:57:45 -07:00
|
|
|
placement: 'bottom',
|
|
|
|
};
|
2017-12-23 22:16:45 -08:00
|
|
|
|
2019-08-06 04:57:45 -07:00
|
|
|
// Toggles opening and closing the dropdown.
|
2023-01-11 12:58:46 -08:00
|
|
|
handleToggle = ({ type }) => {
|
2022-02-09 04:49:49 -08:00
|
|
|
const { onModalOpen } = this.props;
|
2019-08-06 04:57:45 -07:00
|
|
|
const { open } = this.state;
|
|
|
|
|
2022-11-22 02:26:14 -08:00
|
|
|
if (this.props.isUserTouching && this.props.isUserTouching()) {
|
2023-05-07 12:43:25 -07:00
|
|
|
if (open) {
|
2019-08-06 04:57:45 -07:00
|
|
|
this.props.onModalClose();
|
|
|
|
} else {
|
|
|
|
const modal = this.handleMakeModal();
|
|
|
|
if (modal && onModalOpen) {
|
|
|
|
onModalOpen(modal);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
2023-05-07 12:43:25 -07:00
|
|
|
if (open && this.activeElement) {
|
2020-08-21 05:14:28 -07:00
|
|
|
this.activeElement.focus({ preventScroll: true });
|
2019-08-06 05:18:09 -07:00
|
|
|
}
|
2023-05-07 12:43:25 -07:00
|
|
|
this.setState({ open: !open, openedViaKeyboard: type !== 'click' });
|
2019-08-06 04:57:45 -07:00
|
|
|
}
|
2023-02-03 11:52:07 -08:00
|
|
|
};
|
2019-08-06 04:57:45 -07:00
|
|
|
|
|
|
|
handleKeyDown = (e) => {
|
|
|
|
switch (e.key) {
|
2017-12-23 22:16:45 -08:00
|
|
|
case 'Escape':
|
2019-08-06 04:57:45 -07:00
|
|
|
this.handleClose();
|
2017-12-23 22:16:45 -08:00
|
|
|
break;
|
|
|
|
}
|
2023-02-03 11:52:07 -08:00
|
|
|
};
|
2019-08-06 04:57:45 -07:00
|
|
|
|
2019-08-06 05:18:09 -07:00
|
|
|
handleMouseDown = () => {
|
|
|
|
if (!this.state.open) {
|
|
|
|
this.activeElement = document.activeElement;
|
|
|
|
}
|
2023-02-03 11:52:07 -08:00
|
|
|
};
|
2019-08-06 05:18:09 -07:00
|
|
|
|
|
|
|
handleButtonKeyDown = (e) => {
|
|
|
|
switch(e.key) {
|
|
|
|
case ' ':
|
|
|
|
case 'Enter':
|
|
|
|
this.handleMouseDown();
|
|
|
|
break;
|
|
|
|
}
|
2023-02-03 11:52:07 -08:00
|
|
|
};
|
2019-08-06 05:18:09 -07:00
|
|
|
|
|
|
|
handleKeyPress = (e) => {
|
|
|
|
switch(e.key) {
|
|
|
|
case ' ':
|
|
|
|
case 'Enter':
|
|
|
|
this.handleToggle(e);
|
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
|
|
|
break;
|
|
|
|
}
|
2023-02-03 11:52:07 -08:00
|
|
|
};
|
2019-08-06 05:18:09 -07:00
|
|
|
|
2019-08-06 04:57:45 -07:00
|
|
|
handleClose = () => {
|
2019-08-06 05:18:09 -07:00
|
|
|
if (this.state.open && this.activeElement) {
|
2020-08-21 05:14:28 -07:00
|
|
|
this.activeElement.focus({ preventScroll: true });
|
2019-08-06 05:18:09 -07:00
|
|
|
}
|
2019-08-06 04:57:45 -07:00
|
|
|
this.setState({ open: false });
|
2023-02-03 11:52:07 -08:00
|
|
|
};
|
2017-12-23 22:16:45 -08:00
|
|
|
|
2022-02-09 05:39:12 -08:00
|
|
|
handleItemClick = (e) => {
|
|
|
|
const {
|
|
|
|
items,
|
|
|
|
onChange,
|
|
|
|
onModalClose,
|
|
|
|
closeOnChange,
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
const i = Number(e.currentTarget.getAttribute('data-index'));
|
|
|
|
|
2022-02-09 08:15:36 -08:00
|
|
|
const { name } = items[i];
|
2022-02-09 05:39:12 -08:00
|
|
|
|
|
|
|
e.preventDefault(); // Prevents focus from changing
|
|
|
|
if (closeOnChange) onModalClose();
|
|
|
|
onChange(name);
|
|
|
|
};
|
|
|
|
|
2018-01-03 12:36:21 -08:00
|
|
|
// Creates an action modal object.
|
2019-08-06 04:57:45 -07:00
|
|
|
handleMakeModal = () => {
|
2017-12-23 22:16:45 -08:00
|
|
|
const {
|
|
|
|
items,
|
|
|
|
onChange,
|
|
|
|
onModalOpen,
|
2018-01-03 12:36:21 -08:00
|
|
|
onModalClose,
|
2017-12-23 22:16:45 -08:00
|
|
|
value,
|
|
|
|
} = this.props;
|
2018-01-03 12:36:21 -08:00
|
|
|
|
|
|
|
// Required props.
|
|
|
|
if (!(onChange && onModalOpen && onModalClose && items)) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
// The object.
|
|
|
|
return {
|
2022-02-09 05:39:12 -08:00
|
|
|
renderItemContents: this.props.renderItemContents,
|
|
|
|
onClick: this.handleItemClick,
|
2018-01-03 12:36:21 -08:00
|
|
|
actions: items.map(
|
|
|
|
({
|
|
|
|
name,
|
|
|
|
...rest
|
|
|
|
}) => ({
|
|
|
|
...rest,
|
|
|
|
active: value && name === value,
|
|
|
|
name,
|
2023-02-03 11:52:07 -08:00
|
|
|
}),
|
2018-01-03 12:36:21 -08:00
|
|
|
),
|
|
|
|
};
|
2023-02-03 11:52:07 -08:00
|
|
|
};
|
2017-12-23 22:16:45 -08:00
|
|
|
|
2023-01-11 12:58:46 -08:00
|
|
|
setTargetRef = c => {
|
|
|
|
this.target = c;
|
2023-02-03 11:52:07 -08:00
|
|
|
};
|
2023-01-11 12:58:46 -08:00
|
|
|
|
|
|
|
findTarget = () => {
|
|
|
|
return this.target;
|
2023-02-03 11:52:07 -08:00
|
|
|
};
|
2023-01-11 12:58:46 -08:00
|
|
|
|
|
|
|
handleOverlayEnter = (state) => {
|
|
|
|
this.setState({ placement: state.placement });
|
2023-02-03 11:52:07 -08:00
|
|
|
};
|
2023-01-11 12:58:46 -08:00
|
|
|
|
2017-12-23 22:16:45 -08:00
|
|
|
// Rendering.
|
|
|
|
render () {
|
|
|
|
const {
|
|
|
|
disabled,
|
|
|
|
title,
|
|
|
|
icon,
|
|
|
|
items,
|
|
|
|
onChange,
|
|
|
|
value,
|
2021-02-10 15:53:12 -08:00
|
|
|
container,
|
2022-02-09 05:39:12 -08:00
|
|
|
renderItemContents,
|
|
|
|
closeOnChange,
|
2017-12-23 22:16:45 -08:00
|
|
|
} = this.props;
|
2018-04-10 11:04:55 -07:00
|
|
|
const { open, placement } = this.state;
|
2017-12-23 22:16:45 -08:00
|
|
|
|
2022-11-06 04:30:37 -08:00
|
|
|
const active = value && items.findIndex(({ name }) => name === value) === (placement === 'bottom' ? 0 : (items.length - 1));
|
|
|
|
|
2017-12-23 22:16:45 -08:00
|
|
|
return (
|
|
|
|
<div
|
2022-11-06 04:30:37 -08:00
|
|
|
className={classNames('privacy-dropdown', placement, { active: open })}
|
2019-08-06 04:57:45 -07:00
|
|
|
onKeyDown={this.handleKeyDown}
|
2023-01-11 12:58:46 -08:00
|
|
|
ref={this.setTargetRef}
|
2017-12-23 22:16:45 -08:00
|
|
|
>
|
2022-11-06 04:30:37 -08:00
|
|
|
<div className={classNames('privacy-dropdown__value', { active })}>
|
|
|
|
<IconButton
|
|
|
|
active={open}
|
|
|
|
className='privacy-dropdown__value-icon'
|
|
|
|
disabled={disabled}
|
|
|
|
icon={icon}
|
|
|
|
inverted
|
|
|
|
onClick={this.handleToggle}
|
|
|
|
onMouseDown={this.handleMouseDown}
|
|
|
|
onKeyDown={this.handleButtonKeyDown}
|
|
|
|
onKeyPress={this.handleKeyPress}
|
|
|
|
size={18}
|
|
|
|
style={{
|
|
|
|
height: null,
|
|
|
|
lineHeight: '27px',
|
|
|
|
}}
|
|
|
|
title={title}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
2017-12-23 22:16:45 -08:00
|
|
|
<Overlay
|
2018-01-03 12:36:21 -08:00
|
|
|
containerPadding={20}
|
2018-04-10 11:04:55 -07:00
|
|
|
placement={placement}
|
2017-12-23 22:16:45 -08:00
|
|
|
show={open}
|
2023-01-11 12:58:46 -08:00
|
|
|
flip
|
|
|
|
target={this.findTarget}
|
2021-02-10 15:53:12 -08:00
|
|
|
container={container}
|
2023-01-11 12:58:46 -08:00
|
|
|
popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}
|
2017-12-23 22:16:45 -08:00
|
|
|
>
|
2023-01-11 12:58:46 -08:00
|
|
|
{({ props, placement }) => (
|
2023-01-12 07:43:02 -08:00
|
|
|
<div {...props}>
|
2023-01-11 12:58:46 -08:00
|
|
|
<div className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}>
|
|
|
|
<DropdownMenu
|
|
|
|
items={items}
|
|
|
|
renderItemContents={renderItemContents}
|
|
|
|
onChange={onChange}
|
|
|
|
onClose={this.handleClose}
|
|
|
|
value={value}
|
|
|
|
openedViaKeyboard={this.state.openedViaKeyboard}
|
|
|
|
closeOnChange={closeOnChange}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
2017-12-23 22:16:45 -08:00
|
|
|
</Overlay>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|