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

ComposeForm: convert buttons to ComposeFormButton component

Browse source
This commit is contained in:
Alex Gleason 2022-03-21 17:04:44 -05:00
parent c9a4087108
commit 890299ead0
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
6 changed files with 66 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/soapbox/features/compose/components/compose_form_button.tsx Normal file
View file

@ -0,0 +1,34 @@
import classNames from 'classnames';
import React from 'react';
import { IconButton } from 'soapbox/components/ui';
interface IComposeFormButton {
icon: string,
title?: string,
active?: boolean,
disabled?: boolean,
onClick: () => void,
}
const ComposeFormButton: React.FC<IComposeFormButton> = ({
icon,
title,
active,
disabled,
onClick,
}) => {
return (
<div>
<IconButton
className={classNames('text-gray-400 hover:text-gray-600', { 'text-gray-600': active })}
src={icon}
title={title}
disabled={disabled}
onClick={onClick}
/>
</div>
);
};
export default ComposeFormButton;

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

@ -1,9 +1,8 @@
import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import IconButton from '../../../components/icon_button'; import ComposeFormButton from './compose_form_button';
const messages = defineMessages({ const messages = defineMessages({
marked: { id: 'compose_form.markdown.marked', defaultMessage: 'Post markdown enabled' }, marked: { id: 'compose_form.markdown.marked', defaultMessage: 'Post markdown enabled' },
@ -27,14 +26,12 @@ class MarkdownButton extends React.PureComponent {
const { intl, active } = this.props; const { intl, active } = this.props;
return ( return (
<div className='compose-form__markdown-button'> <ComposeFormButton
<IconButton icon={require('@tabler/icons/icons/markdown.svg')}
className={classNames('compose-form__markdown-button-icon', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
src={require('@tabler/icons/icons/markdown.svg')} active={active}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)} onClick={this.handleClick}
onClick={this.handleClick} />
/>
</div>
); );
} }

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

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import IconButton from '../../../components/icon_button'; import ComposeFormButton from './compose_form_button';
const messages = defineMessages({ const messages = defineMessages({
add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' }, add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
@ -33,15 +33,13 @@ class PollButton extends React.PureComponent {
} }
return ( return (
<div className='compose-form__poll-button'> <ComposeFormButton
<IconButton icon={require('@tabler/icons/icons/chart-bar.svg')}
className={`compose-form__poll-button-icon ${active ? 'active' : ''}`} title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
src={require('@tabler/icons/icons/chart-bar.svg')} active={active}
title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)} disabled={disabled}
disabled={disabled} onClick={this.handleClick}
onClick={this.handleClick} />
/>
</div>
); );
} }

4
app/soapbox/features/compose/components/privacy_dropdown.js
View file

@ -8,7 +8,7 @@ import Overlay from 'react-overlays/lib/Overlay';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import IconButton from '../../../components/icon_button'; import { IconButton } from '../../../components/ui';
import Motion from '../../ui/util/optional_motion'; import Motion from '../../ui/util/optional_motion';
const messages = defineMessages({ const messages = defineMessages({
@ -253,7 +253,7 @@ class PrivacyDropdown extends React.PureComponent {
<div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={this.handleKeyDown}> <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={this.handleKeyDown}>
<div className={classNames('privacy-dropdown__value', { active: this.options.indexOf(valueOption) === 0 })}> <div className={classNames('privacy-dropdown__value', { active: this.options.indexOf(valueOption) === 0 })}>
<IconButton <IconButton
className='privacy-dropdown__value-icon' className='text-gray-400 hover:text-gray-600'
src={valueOption.icon} src={valueOption.icon}
title={intl.formatMessage(messages.change_privacy)} title={intl.formatMessage(messages.change_privacy)}
expanded={open} expanded={open}

19
app/soapbox/features/compose/components/schedule_button.js
View file

@ -1,9 +1,8 @@
import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import IconButton from '../../../components/icon_button'; import ComposeFormButton from './compose_form_button';
const messages = defineMessages({ const messages = defineMessages({
add_schedule: { id: 'schedule_button.add_schedule', defaultMessage: 'Schedule post for later' }, add_schedule: { id: 'schedule_button.add_schedule', defaultMessage: 'Schedule post for later' },
@ -29,15 +28,13 @@ class ScheduleButton extends React.PureComponent {
const { intl, active, disabled } = this.props; const { intl, active, disabled } = this.props;
return ( return (
<div className='compose-form__schedule-button'> <ComposeFormButton
<IconButton icon={require('@tabler/icons/icons/calendar-stats.svg')}
className={classNames('compose-form__schedule-button-icon', { active })} title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
src={require('@tabler/icons/icons/calendar-stats.svg')} active={active}
title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)} disabled={disabled}
disabled={disabled} onClick={this.handleClick}
onClick={this.handleClick} />
/>
</div>
); );
} }

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

@ -1,9 +1,8 @@
import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import IconButton from '../../../components/icon_button'; import ComposeFormButton from './compose_form_button';
const messages = defineMessages({ const messages = defineMessages({
marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' }, marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
@ -27,14 +26,12 @@ class SpoilerButton extends React.PureComponent {
const { intl, active } = this.props; const { intl, active } = this.props;
return ( return (
<div className='compose-form__spoiler-button'> <ComposeFormButton
<IconButton icon={require('@tabler/icons/icons/alert-triangle.svg')}
className={classNames('compose-form__spoiler-button-icon', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
src={require('@tabler/icons/icons/alert-triangle.svg')} active={active}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)} onClick={this.handleClick}
onClick={this.handleClick} />
/>
</div>
); );
} }