bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ComposeForm: convert some buttons into TSX

Browse source
This commit is contained in:
Alex Gleason 2022-03-21 17:28:57 -05:00
parent 890299ead0
commit 61fd48204b
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
7 changed files with 99 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
app/soapbox/features/compose/components/markdown_button.js
View file

@ -1,38 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import ComposeFormButton from './compose_form_button';
const messages = defineMessages({
marked: { id: 'compose_form.markdown.marked', defaultMessage: 'Post markdown enabled' },
unmarked: { id: 'compose_form.markdown.unmarked', defaultMessage: 'Post markdown disabled' },
});
export default @injectIntl
class MarkdownButton extends React.PureComponent {
static propTypes = {
active: PropTypes.bool,
onClick: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
handleClick = () => {
this.props.onClick();
}
render() {
const { intl, active } = this.props;
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/markdown.svg')}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
active={active}
onClick={this.handleClick}
/>
);
}
}

30
app/soapbox/features/compose/components/markdown_button.tsx Normal file
View file

@ -0,0 +1,30 @@
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import ComposeFormButton from './compose_form_button';
const messages = defineMessages({
marked: { id: 'compose_form.markdown.marked', defaultMessage: 'Post markdown enabled' },
unmarked: { id: 'compose_form.markdown.unmarked', defaultMessage: 'Post markdown disabled' },
});
interface IMarkdownButton {
active?: boolean,
onClick: () => void,
}
const MarkdownButton: React.FC<IMarkdownButton> = ({ active, onClick }) => {
const intl = useIntl();
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/markdown.svg')}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
active={active}
onClick={onClick}
/>
);
};
export default MarkdownButton;

46
app/soapbox/features/compose/components/poll_button.js
View file

@ -1,46 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import ComposeFormButton from './compose_form_button';
const messages = defineMessages({
add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' },
});
export default
@injectIntl
class PollButton extends React.PureComponent {
static propTypes = {
disabled: PropTypes.bool,
unavailable: PropTypes.bool,
active: PropTypes.bool,
onClick: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
handleClick = () => {
this.props.onClick();
}
render() {
const { intl, active, unavailable, disabled } = this.props;
if (unavailable) {
return null;
}
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/chart-bar.svg')}
title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
active={active}
disabled={disabled}
onClick={this.handleClick}
/>
);
}
}

36
app/soapbox/features/compose/components/poll_button.tsx Normal file
View file

@ -0,0 +1,36 @@
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import ComposeFormButton from './compose_form_button';
const messages = defineMessages({
add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' },
});
interface IPollButton {
disabled?: boolean,
unavailable?: boolean,
active?: boolean,
onClick: () => void,
}
const PollButton: React.FC<IPollButton> = ({ active, unavailable, disabled, onClick }) => {
const intl = useIntl();
if (unavailable) {
return null;
}
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/chart-bar.svg')}
title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
active={active}
disabled={disabled}
onClick={onClick}
/>
);
};
export default PollButton;

38
app/soapbox/features/compose/components/spoiler_button.js
View file

@ -1,38 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import ComposeFormButton from './compose_form_button';
const messages = defineMessages({
marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
});
export default @injectIntl
class SpoilerButton extends React.PureComponent {
static propTypes = {
active: PropTypes.bool,
onClick: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
handleClick = () => {
this.props.onClick();
}
render() {
const { intl, active } = this.props;
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/alert-triangle.svg')}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
active={active}
onClick={this.handleClick}
/>
);
}
}

29
app/soapbox/features/compose/components/spoiler_button.tsx Normal file
View file

@ -0,0 +1,29 @@
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import ComposeFormButton from './compose_form_button';
const messages = defineMessages({
marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
});
interface ISpoilerButton {
active?: boolean,
onClick: () => void,
}
const SpoilerButton: React.FC<ISpoilerButton> = ({ active, onClick }) => {
const intl = useIntl();
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/alert-triangle.svg')}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
active={active}
onClick={onClick}
/>
);
};
export default SpoilerButton;

5
app/soapbox/features/compose/containers/markdown_button_container.js
View file

@ -12,7 +12,10 @@ const mapStateToProps = (state, { intl }) => {
const mapDispatchToProps = dispatch => ({
onClick() {
dispatch(changeComposeContentType(this.active ? 'text/plain' : 'text/markdown'));
dispatch((_, getState) => {
const active = getState().getIn(['compose', 'content_type']) === 'text/markdown';
dispatch(changeComposeContentType(active ? 'text/plain' : 'text/markdown'));
});
},
});