92 lines
1.9 KiB
JavaScript
92 lines
1.9 KiB
JavaScript
// Package imports.
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { defineMessages, FormattedMessage } from 'react-intl';
|
|
|
|
// Components.
|
|
import Collapsable from 'flavours/glitch/components/collapsable';
|
|
|
|
// Utils.
|
|
import {
|
|
assignHandlers,
|
|
hiddenComponent,
|
|
} from 'flavours/glitch/util/react_helpers';
|
|
|
|
// Messages.
|
|
const messages = defineMessages({
|
|
placeholder: {
|
|
defaultMessage: 'Write your warning here',
|
|
id: 'compose_form.spoiler_placeholder',
|
|
},
|
|
});
|
|
|
|
// Handlers.
|
|
const handlers = {
|
|
|
|
// Handles a keypress.
|
|
keyDown ({
|
|
ctrlKey,
|
|
keyCode,
|
|
metaKey,
|
|
}) {
|
|
const { onSubmit } = this.props;
|
|
|
|
// We submit the status on control/meta + enter.
|
|
if (onSubmit && keyCode === 13 && (ctrlKey || metaKey)) {
|
|
onSubmit();
|
|
}
|
|
},
|
|
};
|
|
|
|
// The component.
|
|
export default class ComposerSpoiler extends React.PureComponent {
|
|
|
|
// Constructor.
|
|
constructor (props) {
|
|
super(props);
|
|
assignHandlers(this, handlers);
|
|
}
|
|
|
|
// Rendering.
|
|
render () {
|
|
const { keyDown } = this.handlers;
|
|
const {
|
|
hidden,
|
|
intl,
|
|
onChange,
|
|
text,
|
|
} = this.props;
|
|
|
|
// The result.
|
|
return (
|
|
<Collapsable
|
|
isVisible={!hidden}
|
|
fullHeight={50}
|
|
>
|
|
<label className='composer--spoiler'>
|
|
<span {...hiddenComponent}>
|
|
<FormattedMessage {...messages.placeholder} />
|
|
</span>
|
|
<input
|
|
id='glitch.composer.spoiler.input'
|
|
onChange={onChange}
|
|
onKeyDown={keyDown}
|
|
placeholder={intl.formatMessage(messages.placeholder)}
|
|
type='text'
|
|
value={text}
|
|
/>
|
|
</label>
|
|
</Collapsable>
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
// Props.
|
|
ComposerSpoiler.propTypes = {
|
|
hidden: PropTypes.bool,
|
|
intl: PropTypes.object.isRequired,
|
|
onChange: PropTypes.func,
|
|
onSubmit: PropTypes.func,
|
|
text: PropTypes.string,
|
|
};
|