Generalize compose dropdown for re-use
This commit is contained in:
parent
a7be86e875
commit
118fe224ff
|
@ -47,11 +47,9 @@ import PropTypes from 'prop-types';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import { injectIntl, defineMessages } from 'react-intl';
|
import { injectIntl, defineMessages } from 'react-intl';
|
||||||
|
|
||||||
// Mastodon imports //
|
|
||||||
import IconButton from '../../../../mastodon/components/icon_button';
|
|
||||||
|
|
||||||
// Our imports //
|
// Our imports //
|
||||||
import ComposeAdvancedOptionsToggle from './toggle';
|
import ComposeAdvancedOptionsToggle from './toggle';
|
||||||
|
import ComposeDropdown from '../dropdown/index';
|
||||||
|
|
||||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
@ -77,11 +75,6 @@ const messages = defineMessages({
|
||||||
{ id: 'advanced_options.icon_title', defaultMessage: 'Advanced options' },
|
{ id: 'advanced_options.icon_title', defaultMessage: 'Advanced options' },
|
||||||
});
|
});
|
||||||
|
|
||||||
const iconStyle = {
|
|
||||||
height : null,
|
|
||||||
lineHeight : '27px',
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
Implementation:
|
Implementation:
|
||||||
|
@ -100,67 +93,6 @@ export default class ComposeAdvancedOptions extends React.PureComponent {
|
||||||
intl : PropTypes.object.isRequired,
|
intl : PropTypes.object.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
|
||||||
open: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
### `onToggleDropdown()`
|
|
||||||
|
|
||||||
This function toggles the opening and closing of the advanced options
|
|
||||||
dropdown.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
onToggleDropdown = () => {
|
|
||||||
this.setState({ open: !this.state.open });
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
### `onGlobalClick(e)`
|
|
||||||
|
|
||||||
This function closes the advanced options dropdown if you click
|
|
||||||
anywhere else on the screen.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
onGlobalClick = (e) => {
|
|
||||||
if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) {
|
|
||||||
this.setState({ open: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
### `componentDidMount()`, `componentWillUnmount()`
|
|
||||||
|
|
||||||
This function closes the advanced options dropdown if you click
|
|
||||||
anywhere else on the screen.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
componentDidMount () {
|
|
||||||
window.addEventListener('click', this.onGlobalClick);
|
|
||||||
window.addEventListener('touchstart', this.onGlobalClick);
|
|
||||||
}
|
|
||||||
componentWillUnmount () {
|
|
||||||
window.removeEventListener('click', this.onGlobalClick);
|
|
||||||
window.removeEventListener('touchstart', this.onGlobalClick);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
### `setRef(c)`
|
|
||||||
|
|
||||||
`setRef()` stores a reference to the dropdown's `<div> in `this.node`.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
setRef = (c) => {
|
|
||||||
this.node = c;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
|
@ -171,7 +103,6 @@ anywhere else on the screen.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { open } = this.state;
|
|
||||||
const { intl, values } = this.props;
|
const { intl, values } = this.props;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -218,23 +149,14 @@ toggle as its `key` so that React can keep track of it.
|
||||||
Finally, we can render our component.
|
Finally, we can render our component.
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'open' : ''} ${anyEnabled ? 'active' : ''} `}>
|
<ComposeDropdown
|
||||||
<div className='advanced-options-dropdown__value'>
|
title={intl.formatMessage(messages.advanced_options_icon_title)}
|
||||||
<IconButton
|
icon='ellipsis-h'
|
||||||
className='advanced-options-dropdown__value'
|
highlight={anyEnabled}
|
||||||
title={intl.formatMessage(messages.advanced_options_icon_title)}
|
>
|
||||||
icon='ellipsis-h' active={open || anyEnabled}
|
{optionElems}
|
||||||
size={18}
|
</ComposeDropdown>
|
||||||
style={iconStyle}
|
|
||||||
onClick={this.onToggleDropdown}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className='advanced-options-dropdown__dropdown'>
|
|
||||||
{optionElems}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
74
app/javascript/glitch/components/compose/dropdown/index.js
Normal file
74
app/javascript/glitch/components/compose/dropdown/index.js
Normal file
|
@ -0,0 +1,74 @@
|
||||||
|
// Package imports //
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
import IconButton from '../../../../mastodon/components/icon_button';
|
||||||
|
|
||||||
|
const iconStyle = {
|
||||||
|
height : null,
|
||||||
|
lineHeight : '27px',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class ComposeDropdown extends React.PureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
title: PropTypes.string.isRequired,
|
||||||
|
icon: PropTypes.string,
|
||||||
|
highlight: PropTypes.bool,
|
||||||
|
children: PropTypes.arrayOf(PropTypes.node).isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
open: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
onGlobalClick = (e) => {
|
||||||
|
if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) {
|
||||||
|
this.setState({ open: false });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount () {
|
||||||
|
window.addEventListener('click', this.onGlobalClick);
|
||||||
|
window.addEventListener('touchstart', this.onGlobalClick);
|
||||||
|
}
|
||||||
|
componentWillUnmount () {
|
||||||
|
window.removeEventListener('click', this.onGlobalClick);
|
||||||
|
window.removeEventListener('touchstart', this.onGlobalClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
onToggleDropdown = () => {
|
||||||
|
this.setState({ open: !this.state.open });
|
||||||
|
};
|
||||||
|
|
||||||
|
setRef = (c) => {
|
||||||
|
this.node = c;
|
||||||
|
};
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { open } = this.state;
|
||||||
|
let { highlight, title, icon } = this.props;
|
||||||
|
|
||||||
|
if (!icon) icon = 'ellipsis-h';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'open' : ''} ${highlight ? 'active' : ''} `}>
|
||||||
|
<div className='advanced-options-dropdown__value'>
|
||||||
|
<IconButton
|
||||||
|
className='advanced-options-dropdown__value'
|
||||||
|
title={title}
|
||||||
|
icon={icon} active={open || highlight}
|
||||||
|
size={18}
|
||||||
|
style={iconStyle}
|
||||||
|
onClick={this.onToggleDropdown}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='advanced-options-dropdown__dropdown'>
|
||||||
|
{this.props.children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Reference in a new issue