[Glitch] Convert `<Button>` to Typescript

Port 9d45a444f9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Renaud Chaput 2023-10-23 09:43:00 +02:00 committed by Claire
parent 1138d44c7d
commit 9325cb5759
26 changed files with 88 additions and 131 deletions

View File

@ -1,53 +0,0 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import classNames from 'classnames';
export default class Button extends PureComponent {
static propTypes = {
text: PropTypes.node,
onClick: PropTypes.func,
disabled: PropTypes.bool,
block: PropTypes.bool,
secondary: PropTypes.bool,
className: PropTypes.string,
title: PropTypes.string,
children: PropTypes.node,
};
handleClick = (e) => {
if (!this.props.disabled) {
this.props.onClick(e);
}
};
setRef = (c) => {
this.node = c;
};
focus() {
this.node.focus();
}
render () {
let attrs = {
className: classNames('button', this.props.className, {
'button-secondary': this.props.secondary,
'button--block': this.props.block,
}),
disabled: this.props.disabled,
onClick: this.handleClick,
ref: this.setRef,
};
if (this.props.title) attrs.title = this.props.title;
return (
<button {...attrs}>
{this.props.text || this.props.children}
</button>
);
}
}

View File

@ -0,0 +1,58 @@
import { useCallback } from 'react';
import classNames from 'classnames';
interface BaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
block?: boolean;
secondary?: boolean;
text?: JSX.Element;
}
interface PropsWithChildren extends BaseProps {
text?: never;
}
interface PropsWithText extends BaseProps {
text: JSX.Element;
children: never;
}
type Props = PropsWithText | PropsWithChildren;
export const Button: React.FC<Props> = ({
text,
type = 'button',
onClick,
disabled,
block,
secondary,
className,
title,
children,
...props
}) => {
const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
(e) => {
if (!disabled && onClick) {
onClick(e);
}
},
[disabled, onClick],
);
return (
<button
className={classNames('button', className, {
'button-secondary': secondary,
'button--block': block,
})}
disabled={disabled}
onClick={handleClick}
title={title}
type={type}
{...props}
>
{text ?? children}
</button>
);
};

View File

@ -10,7 +10,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { Avatar } from 'flavours/glitch/components/avatar';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { Icon } from 'flavours/glitch/components/icon';
import { IconButton } from 'flavours/glitch/components/icon_button';
import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';

View File

@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { revealAccount } from 'flavours/glitch/actions/accounts';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { domain } from 'flavours/glitch/initial_state';
const mapDispatchToProps = (dispatch, { accountId }) => ({

View File

@ -8,7 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { length } from 'stringz';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { Icon } from 'flavours/glitch/components/icon';
import { maxChars } from 'flavours/glitch/initial_state';

View File

@ -16,7 +16,7 @@ import {
} from 'flavours/glitch/actions/accounts';
import { openModal } from 'flavours/glitch/actions/modal';
import { Avatar } from 'flavours/glitch/components/avatar';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { DisplayName } from 'flavours/glitch/components/display_name';
import { IconButton } from 'flavours/glitch/components/icon_button';
import Permalink from 'flavours/glitch/components/permalink';

View File

@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { toServerSideType } from 'flavours/glitch/utils/filters';
const mapStateToProps = (state, { filterId }) => ({

View File

@ -13,7 +13,7 @@ import { requestBrowserPermission } from 'flavours/glitch/actions/notifications'
import { changeSetting, saveSettings } from 'flavours/glitch/actions/settings';
import { fetchSuggestions } from 'flavours/glitch/actions/suggestions';
import { markAsPartial } from 'flavours/glitch/actions/timelines';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import Column from 'flavours/glitch/features/ui/components/column';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
import imageGreeting from 'mastodon/../images/elephant_ui_greeting.svg';

View File

@ -4,7 +4,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { ShortNumber } from 'flavours/glitch/components/short_number';
const messages = defineMessages({

View File

@ -11,7 +11,7 @@ import { throttle, escapeRegExp } from 'lodash';
import { openModal, closeModal } from 'flavours/glitch/actions/modal';
import api from 'flavours/glitch/api';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { Icon } from 'flavours/glitch/components/icon';
import { registrationsOpen, sso_redirect } from 'flavours/glitch/initial_state';

View File

@ -7,7 +7,7 @@ import { connect } from 'react-redux';
import { requestBrowserPermission } from 'flavours/glitch/actions/notifications';
import { changeSetting } from 'flavours/glitch/actions/settings';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { Icon } from 'flavours/glitch/components/icon';
import { IconButton } from 'flavours/glitch/components/icon_button';

View File

@ -7,7 +7,7 @@ import { List as ImmutableList } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import Option from './components/option';

View File

@ -11,7 +11,7 @@ import { createSelector } from 'reselect';
import Toggle from 'react-toggle';
import { fetchAccount } from 'flavours/glitch/actions/accounts';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
const messages = defineMessages({

View File

@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import Option from './components/option';

View File

@ -7,7 +7,7 @@ import { OrderedSet } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import StatusCheckBox from 'flavours/glitch/features/report/containers/status_check_box_container';

View File

@ -11,7 +11,7 @@ import {
muteAccount,
blockAccount,
} from 'flavours/glitch/actions/accounts';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
const mapStateToProps = () => ({});

View File

@ -9,7 +9,7 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { followAccount } from 'flavours/glitch/actions/accounts';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { IconButton } from 'flavours/glitch/components/icon_button';
import Option from 'flavours/glitch/features/report/components/option';
import { languages as preloadedLanguages } from 'flavours/glitch/initial_state';

View File

@ -8,7 +8,7 @@ import { connect } from 'react-redux';
import { blockAccount } from '../../../actions/accounts';
import { closeModal } from '../../../actions/modal';
import { initReport } from '../../../actions/reports';
import Button from '../../../components/button';
import { Button } from '../../../components/button';
import { makeGetAccount } from '../../../selectors';
@ -52,10 +52,6 @@ class BlockModal extends PureComponent {
intl: PropTypes.object.isRequired,
};
componentDidMount() {
this.button.focus();
}
handleClick = () => {
this.props.onClose();
this.props.onConfirm(this.props.account);
@ -70,10 +66,6 @@ class BlockModal extends PureComponent {
this.props.onClose();
};
setRef = (c) => {
this.button = c;
};
render () {
const { account } = this.props;
@ -96,7 +88,7 @@ class BlockModal extends PureComponent {
<Button onClick={this.handleSecondary} className='confirmation-modal__secondary-button'>
<FormattedMessage id='confirmations.block.block_and_report' defaultMessage='Block & Report' />
</Button>
<Button onClick={this.handleClick} ref={this.setRef}>
<Button onClick={this.handleClick} autoFocus>
<FormattedMessage id='confirmations.block.confirm' defaultMessage='Block' />
</Button>
</div>

View File

@ -12,7 +12,7 @@ import { connect } from 'react-redux';
import { changeBoostPrivacy } from 'flavours/glitch/actions/boosts';
import AttachmentList from 'flavours/glitch/components/attachment_list';
import { Avatar } from 'flavours/glitch/components/avatar';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { DisplayName } from 'flavours/glitch/components/display_name';
import { Icon } from 'flavours/glitch/components/icon';
import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
@ -50,10 +50,6 @@ class BoostModal extends ImmutablePureComponent {
...WithRouterPropTypes,
};
componentDidMount() {
this.button.focus();
}
handleReblog = () => {
this.props.onReblog(this.props.status, this.props.privacy);
this.props.onClose();
@ -71,10 +67,6 @@ class BoostModal extends ImmutablePureComponent {
return document.getElementsByClassName('modal-root__container')[0];
};
setRef = (c) => {
this.button = c;
};
render () {
const { status, missingMediaDescription, privacy, intl } = this.props;
const buttonText = status.get('reblogged') ? messages.cancel_reblog : messages.reblog;
@ -127,7 +119,7 @@ class BoostModal extends ImmutablePureComponent {
onChange={this.props.onChangeBoostPrivacy}
/>
)}
<Button text={intl.formatMessage(buttonText)} onClick={this.handleReblog} ref={this.setRef} />
<Button text={intl.formatMessage(buttonText)} onClick={this.handleReblog} autoFocus />
</div>
</div>
);

View File

@ -7,7 +7,7 @@ import classNames from 'classnames';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import Column from 'flavours/glitch/components/column';
import { autoPlayGif } from 'flavours/glitch/initial_state';

View File

@ -3,7 +3,7 @@ import { PureComponent } from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
class ConfirmationModal extends PureComponent {
@ -23,10 +23,6 @@ class ConfirmationModal extends PureComponent {
closeWhenConfirm: true,
};
componentDidMount() {
this.button.focus();
}
handleClick = () => {
if (this.props.closeWhenConfirm) {
this.props.onClose();
@ -46,10 +42,6 @@ class ConfirmationModal extends PureComponent {
this.props.onClose();
};
setRef = (c) => {
this.button = c;
};
setDoNotAskRef = (c) => {
this.doNotAskCheckbox = c;
};
@ -79,7 +71,7 @@ class ConfirmationModal extends PureComponent {
{secondary !== undefined && (
<Button text={secondary} onClick={this.handleSecondary} className='confirmation-modal__secondary-button' />
)}
<Button text={confirm} onClick={this.handleClick} ref={this.setRef} />
<Button text={confirm} onClick={this.handleClick} autoFocus />
</div>
</div>
</div>

View File

@ -5,7 +5,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { Icon } from 'flavours/glitch/components/icon';
import illustration from 'flavours/glitch/images/logo_warn_glitch.svg';
import { preferenceLink } from 'flavours/glitch/utils/backend_links';
@ -25,19 +25,11 @@ class DeprecatedSettingsModal extends PureComponent {
intl: PropTypes.object.isRequired,
};
componentDidMount() {
this.button.focus();
}
handleClick = () => {
this.props.onConfirm();
this.props.onClose();
};
setRef = (c) => {
this.button = c;
};
render () {
const { settings, intl } = this.props;
@ -78,7 +70,7 @@ class DeprecatedSettingsModal extends PureComponent {
<div>
<div className='confirmation-modal__action-bar'>
<div />
<Button text={intl.formatMessage(messages.discardChanges)} onClick={this.handleClick} ref={this.setRef} />
<Button text={intl.formatMessage(messages.discardChanges)} onClick={this.handleClick} autoFocus />
</div>
</div>
</div>

View File

@ -10,7 +10,7 @@ import Atrament from 'atrament'; // the doodling library
import { debounce, mapValues } from 'lodash';
import { doodleSet, uploadCompose } from 'flavours/glitch/actions/compose';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { IconButton } from 'flavours/glitch/components/icon_button';
// palette nicked from MyPaint, CC0
const palette = [

View File

@ -10,7 +10,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import AttachmentList from 'flavours/glitch/components/attachment_list';
import { Avatar } from 'flavours/glitch/components/avatar';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { DisplayName } from 'flavours/glitch/components/display_name';
import { Icon } from 'flavours/glitch/components/icon';
import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
@ -32,10 +32,6 @@ class FavouriteModal extends ImmutablePureComponent {
...WithRouterPropTypes,
};
componentDidMount() {
this.button.focus();
}
handleFavourite = () => {
this.props.onFavourite(this.props.status);
this.props.onClose();
@ -49,10 +45,6 @@ class FavouriteModal extends ImmutablePureComponent {
}
};
setRef = (c) => {
this.button = c;
};
render () {
const { status, intl } = this.props;
@ -91,7 +83,7 @@ class FavouriteModal extends ImmutablePureComponent {
<div className='boost-modal__action-bar'>
<div><FormattedMessage id='favourite_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='star' /></span> }} /></div>
<Button text={intl.formatMessage(messages.favourite)} onClick={this.handleFavourite} ref={this.setRef} />
<Button text={intl.formatMessage(messages.favourite)} onClick={this.handleFavourite} autoFocus />
</div>
</div>
);

View File

@ -16,7 +16,7 @@ import tesseractWorkerPath from 'tesseract.js/dist/worker.min.js';
// eslint-disable-next-line import/no-extraneous-dependencies
import tesseractCorePath from 'tesseract.js-core/tesseract-core.wasm.js';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
import { GIFV } from 'flavours/glitch/components/gifv';
import { IconButton } from 'flavours/glitch/components/icon_button';
import Audio from 'flavours/glitch/features/audio';

View File

@ -10,7 +10,7 @@ import Toggle from 'react-toggle';
import { muteAccount } from 'flavours/glitch/actions/accounts';
import { closeModal } from 'flavours/glitch/actions/modal';
import { toggleHideNotifications, changeMuteDuration } from 'flavours/glitch/actions/mutes';
import Button from 'flavours/glitch/components/button';
import { Button } from 'flavours/glitch/components/button';
const messages = defineMessages({
minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
@ -63,10 +63,6 @@ class MuteModal extends PureComponent {
onChangeMuteDuration: PropTypes.func.isRequired,
};
componentDidMount() {
this.button.focus();
}
handleClick = () => {
this.props.onClose();
this.props.onConfirm(this.props.account, this.props.notifications, this.props.muteDuration);
@ -76,10 +72,6 @@ class MuteModal extends PureComponent {
this.props.onClose();
};
setRef = (c) => {
this.button = c;
};
toggleNotifications = () => {
this.props.onToggleNotifications();
};
@ -134,7 +126,7 @@ class MuteModal extends PureComponent {
<Button onClick={this.handleCancel} className='mute-modal__cancel-button'>
<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
</Button>
<Button onClick={this.handleClick} ref={this.setRef}>
<Button onClick={this.handleClick} autoFocus>
<FormattedMessage id='confirmations.mute.confirm' defaultMessage='Mute' />
</Button>
</div>