2017-12-24 15:16:45 +09:00
|
|
|
// Package imports.
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import React from 'react';
|
|
|
|
import Overlay from 'react-overlays/lib/Overlay';
|
|
|
|
|
|
|
|
// Components.
|
|
|
|
import IconButton from 'flavours/glitch/components/icon_button';
|
2019-04-22 00:17:10 +09:00
|
|
|
import DropdownMenu from './dropdown_menu';
|
2017-12-24 15:16:45 +09:00
|
|
|
|
|
|
|
// Utils.
|
|
|
|
import { isUserTouching } from 'flavours/glitch/util/is_mobile';
|
|
|
|
import { assignHandlers } from 'flavours/glitch/util/react_helpers';
|
|
|
|
|
2019-08-06 20:57:45 +09:00
|
|
|
// The component.
|
|
|
|
export default class ComposerOptionsDropdown extends React.PureComponent {
|
2017-12-24 15:16:45 +09:00
|
|
|
|
2019-08-06 20:57:45 +09:00
|
|
|
static propTypes = {
|
|
|
|
active: PropTypes.bool,
|
|
|
|
disabled: PropTypes.bool,
|
|
|
|
icon: PropTypes.string,
|
|
|
|
items: PropTypes.arrayOf(PropTypes.shape({
|
|
|
|
icon: PropTypes.string,
|
|
|
|
meta: PropTypes.node,
|
|
|
|
name: PropTypes.string.isRequired,
|
|
|
|
on: PropTypes.bool,
|
|
|
|
text: PropTypes.node,
|
|
|
|
})).isRequired,
|
|
|
|
onModalOpen: PropTypes.func,
|
|
|
|
onModalClose: PropTypes.func,
|
|
|
|
title: PropTypes.string,
|
|
|
|
value: PropTypes.string,
|
|
|
|
onChange: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
|
|
|
state = {
|
|
|
|
needsModalUpdate: false,
|
|
|
|
open: false,
|
|
|
|
placement: 'bottom',
|
|
|
|
};
|
2017-12-24 15:16:45 +09:00
|
|
|
|
2019-08-06 20:57:45 +09:00
|
|
|
// Toggles opening and closing the dropdown.
|
|
|
|
handleToggle = ({ target }) => {
|
|
|
|
const { onModalOpen } = this.props;
|
|
|
|
const { open } = this.state;
|
|
|
|
|
|
|
|
if (isUserTouching()) {
|
|
|
|
if (this.state.open) {
|
|
|
|
this.props.onModalClose();
|
|
|
|
} else {
|
|
|
|
const modal = this.handleMakeModal();
|
|
|
|
if (modal && onModalOpen) {
|
|
|
|
onModalOpen(modal);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
const { top } = target.getBoundingClientRect();
|
|
|
|
this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });
|
|
|
|
this.setState({ open: !this.state.open });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
handleKeyDown = (e) => {
|
|
|
|
switch (e.key) {
|
2017-12-24 15:16:45 +09:00
|
|
|
case 'Enter':
|
2019-08-06 20:57:45 +09:00
|
|
|
this.handleToggle(key);
|
2017-12-24 15:16:45 +09:00
|
|
|
break;
|
|
|
|
case 'Escape':
|
2019-08-06 20:57:45 +09:00
|
|
|
this.handleClose();
|
2017-12-24 15:16:45 +09:00
|
|
|
break;
|
|
|
|
}
|
2019-08-06 20:57:45 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
handleClose = () => {
|
|
|
|
this.setState({ open: false });
|
|
|
|
}
|
2017-12-24 15:16:45 +09:00
|
|
|
|
2018-01-04 05:36:21 +09:00
|
|
|
// Creates an action modal object.
|
2019-08-06 20:57:45 +09:00
|
|
|
handleMakeModal = () => {
|
2018-01-04 05:36:21 +09:00
|
|
|
const component = this;
|
2017-12-24 15:16:45 +09:00
|
|
|
const {
|
|
|
|
items,
|
|
|
|
onChange,
|
|
|
|
onModalOpen,
|
2018-01-04 05:36:21 +09:00
|
|
|
onModalClose,
|
2017-12-24 15:16:45 +09:00
|
|
|
value,
|
|
|
|
} = this.props;
|
2018-01-04 05:36:21 +09:00
|
|
|
|
|
|
|
// Required props.
|
|
|
|
if (!(onChange && onModalOpen && onModalClose && items)) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
// The object.
|
|
|
|
return {
|
|
|
|
actions: items.map(
|
|
|
|
({
|
|
|
|
name,
|
|
|
|
...rest
|
|
|
|
}) => ({
|
|
|
|
...rest,
|
|
|
|
active: value && name === value,
|
|
|
|
name,
|
|
|
|
onClick (e) {
|
|
|
|
e.preventDefault(); // Prevents focus from changing
|
|
|
|
onModalClose();
|
|
|
|
onChange(name);
|
|
|
|
},
|
|
|
|
onPassiveClick (e) {
|
|
|
|
e.preventDefault(); // Prevents focus from changing
|
|
|
|
onChange(name);
|
|
|
|
component.setState({ needsModalUpdate: true });
|
|
|
|
},
|
|
|
|
})
|
|
|
|
),
|
|
|
|
};
|
2019-08-06 20:57:45 +09:00
|
|
|
}
|
2017-12-24 15:16:45 +09:00
|
|
|
|
2018-01-04 05:36:21 +09:00
|
|
|
// If our modal is open and our props update, we need to also update
|
|
|
|
// the modal.
|
2019-08-06 20:57:45 +09:00
|
|
|
handleUpdate = () => {
|
2018-01-04 05:36:21 +09:00
|
|
|
const { onModalOpen } = this.props;
|
|
|
|
const { needsModalUpdate } = this.state;
|
|
|
|
|
|
|
|
// Gets our modal object.
|
2019-08-06 20:57:45 +09:00
|
|
|
const modal = this.handleMakeModal();
|
2018-01-04 05:36:21 +09:00
|
|
|
|
|
|
|
// Reopens the modal with the new object.
|
|
|
|
if (needsModalUpdate && modal && onModalOpen) {
|
|
|
|
onModalOpen(modal);
|
|
|
|
}
|
2017-12-24 15:16:45 +09:00
|
|
|
}
|
|
|
|
|
2018-01-04 05:36:21 +09:00
|
|
|
// Updates our modal as necessary.
|
|
|
|
componentDidUpdate (prevProps) {
|
|
|
|
const { items } = this.props;
|
|
|
|
const { needsModalUpdate } = this.state;
|
|
|
|
if (needsModalUpdate && items.find(
|
|
|
|
(item, i) => item.on !== prevProps.items[i].on
|
|
|
|
)) {
|
2019-08-06 20:57:45 +09:00
|
|
|
this.handleUpdate();
|
2018-01-04 05:36:21 +09:00
|
|
|
this.setState({ needsModalUpdate: false });
|
|
|
|
}
|
2017-12-24 15:16:45 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
// Rendering.
|
|
|
|
render () {
|
|
|
|
const {
|
|
|
|
active,
|
|
|
|
disabled,
|
|
|
|
title,
|
|
|
|
icon,
|
|
|
|
items,
|
|
|
|
onChange,
|
|
|
|
value,
|
|
|
|
} = this.props;
|
2018-04-11 03:04:55 +09:00
|
|
|
const { open, placement } = this.state;
|
2017-12-24 15:16:45 +09:00
|
|
|
const computedClass = classNames('composer--options--dropdown', {
|
|
|
|
active,
|
2018-01-04 05:36:21 +09:00
|
|
|
open,
|
2018-08-20 00:14:30 +09:00
|
|
|
top: placement === 'top',
|
2017-12-24 15:16:45 +09:00
|
|
|
});
|
|
|
|
|
|
|
|
// The result.
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={computedClass}
|
2019-08-06 20:57:45 +09:00
|
|
|
onKeyDown={this.handleKeyDown}
|
2017-12-24 15:16:45 +09:00
|
|
|
>
|
|
|
|
<IconButton
|
|
|
|
active={open || active}
|
|
|
|
className='value'
|
|
|
|
disabled={disabled}
|
|
|
|
icon={icon}
|
2019-08-05 21:25:48 +09:00
|
|
|
inverted
|
2019-08-06 20:57:45 +09:00
|
|
|
onClick={this.handleToggle}
|
2017-12-24 15:16:45 +09:00
|
|
|
size={18}
|
|
|
|
style={{
|
|
|
|
height: null,
|
|
|
|
lineHeight: '27px',
|
|
|
|
}}
|
|
|
|
title={title}
|
|
|
|
/>
|
|
|
|
<Overlay
|
2018-01-04 05:36:21 +09:00
|
|
|
containerPadding={20}
|
2018-04-11 03:04:55 +09:00
|
|
|
placement={placement}
|
2017-12-24 15:16:45 +09:00
|
|
|
show={open}
|
|
|
|
target={this}
|
|
|
|
>
|
2019-04-22 00:17:10 +09:00
|
|
|
<DropdownMenu
|
2018-01-04 05:36:21 +09:00
|
|
|
items={items}
|
|
|
|
onChange={onChange}
|
2019-08-06 20:57:45 +09:00
|
|
|
onClose={this.handleClose}
|
2018-01-04 05:36:21 +09:00
|
|
|
value={value}
|
|
|
|
/>
|
2017-12-24 15:16:45 +09:00
|
|
|
</Overlay>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|