diff options
author | Starfall <us@starfall.systems> | 2023-04-14 19:22:47 -0500 |
---|---|---|
committer | Starfall <us@starfall.systems> | 2023-04-14 19:22:47 -0500 |
commit | 4fe1689de43f4404eb9530fcfbcbfb26d6c1c13a (patch) | |
tree | 6811b845bb7f4966b10dcefa3dea404246f161c7 /app/javascript/flavours/glitch/features/interaction_modal/index.js | |
parent | 65c1e53a32cabcdbb7bca57002bb0f6acdebe07e (diff) | |
parent | bed63f6dae0879ac840066b031229e0d139089cd (diff) |
Diffstat (limited to 'app/javascript/flavours/glitch/features/interaction_modal/index.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/interaction_modal/index.js | 161 |
1 files changed, 0 insertions, 161 deletions
diff --git a/app/javascript/flavours/glitch/features/interaction_modal/index.js b/app/javascript/flavours/glitch/features/interaction_modal/index.js deleted file mode 100644 index b71c041c9..000000000 --- a/app/javascript/flavours/glitch/features/interaction_modal/index.js +++ /dev/null @@ -1,161 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { FormattedMessage } from 'react-intl'; -import { registrationsOpen } from 'flavours/glitch/initial_state'; -import { connect } from 'react-redux'; -import Icon from 'flavours/glitch/components/icon'; -import classNames from 'classnames'; -import { openModal, closeModal } from 'flavours/glitch/actions/modal'; - -const mapStateToProps = (state, { accountId }) => ({ - displayNameHtml: state.getIn(['accounts', accountId, 'display_name_html']), -}); - -const mapDispatchToProps = (dispatch) => ({ - onSignupClick() { - dispatch(closeModal()); - dispatch(openModal('CLOSED_REGISTRATIONS')); - }, -}); - -class Copypaste extends React.PureComponent { - - static propTypes = { - value: PropTypes.string, - }; - - state = { - copied: false, - }; - - setRef = c => { - this.input = c; - } - - handleInputClick = () => { - this.setState({ copied: false }); - this.input.focus(); - this.input.select(); - this.input.setSelectionRange(0, this.input.value.length); - } - - handleButtonClick = () => { - const { value } = this.props; - navigator.clipboard.writeText(value); - this.input.blur(); - this.setState({ copied: true }); - this.timeout = setTimeout(() => this.setState({ copied: false }), 700); - } - - componentWillUnmount () { - if (this.timeout) clearTimeout(this.timeout); - } - - render () { - const { value } = this.props; - const { copied } = this.state; - - return ( - <div className={classNames('copypaste', { copied })}> - <input - type='text' - ref={this.setRef} - value={value} - readOnly - onClick={this.handleInputClick} - /> - - <button className='button' onClick={this.handleButtonClick}> - {copied ? <FormattedMessage id='copypaste.copied' defaultMessage='Copied' /> : <FormattedMessage id='copypaste.copy' defaultMessage='Copy' />} - </button> - </div> - ); - } - -} - -export default @connect(mapStateToProps, mapDispatchToProps) -class InteractionModal extends React.PureComponent { - - static propTypes = { - displayNameHtml: PropTypes.string, - url: PropTypes.string, - type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow']), - onSignupClick: PropTypes.func.isRequired, - }; - - handleSignupClick = () => { - this.props.onSignupClick(); - } - - render () { - const { url, type, displayNameHtml } = this.props; - - const name = <bdi dangerouslySetInnerHTML={{ __html: displayNameHtml }} />; - - let title, actionDescription, icon; - - switch(type) { - case 'reply': - icon = <Icon id='reply' />; - title = <FormattedMessage id='interaction_modal.title.reply' defaultMessage="Reply to {name}'s post" values={{ name }} />; - actionDescription = <FormattedMessage id='interaction_modal.description.reply' defaultMessage='With an account on Mastodon, you can respond to this post.' />; - break; - case 'reblog': - icon = <Icon id='retweet' />; - title = <FormattedMessage id='interaction_modal.title.reblog' defaultMessage="Boost {name}'s post" values={{ name }} />; - actionDescription = <FormattedMessage id='interaction_modal.description.reblog' defaultMessage='With an account on Mastodon, you can boost this post to share it with your own followers.' />; - break; - case 'favourite': - icon = <Icon id='star' />; - title = <FormattedMessage id='interaction_modal.title.favourite' defaultMessage="Favourite {name}'s post" values={{ name }} />; - actionDescription = <FormattedMessage id='interaction_modal.description.favourite' defaultMessage='With an account on Mastodon, you can favourite this post to let the author know you appreciate it and save it for later.' />; - break; - case 'follow': - icon = <Icon id='user-plus' />; - title = <FormattedMessage id='interaction_modal.title.follow' defaultMessage='Follow {name}' values={{ name }} />; - actionDescription = <FormattedMessage id='interaction_modal.description.follow' defaultMessage='With an account on Mastodon, you can follow {name} to receive their posts in your home feed.' values={{ name }} />; - break; - } - - let signupButton; - - if (registrationsOpen) { - signupButton = ( - <a href='/auth/sign_up' className='button button--block button-tertiary'> - <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /> - </a> - ); - } else { - signupButton = ( - <button className='button button--block button-tertiary' onClick={this.handleSignupClick}> - <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /> - </button> - ); - } - - return ( - <div className='modal-root__modal interaction-modal'> - <div className='interaction-modal__lead'> - <h3><span className='interaction-modal__icon'>{icon}</span> {title}</h3> - <p>{actionDescription} <FormattedMessage id='interaction_modal.preamble' defaultMessage="Since Mastodon is decentralized, you can use your existing account hosted by another Mastodon server or compatible platform if you don't have an account on this one." /></p> - </div> - - <div className='interaction-modal__choices'> - <div className='interaction-modal__choices__choice'> - <h3><FormattedMessage id='interaction_modal.on_this_server' defaultMessage='On this server' /></h3> - <a href='/auth/sign_in' className='button button--block'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a> - {signupButton} - </div> - - <div className='interaction-modal__choices__choice'> - <h3><FormattedMessage id='interaction_modal.on_another_server' defaultMessage='On a different server' /></h3> - <p><FormattedMessage id='interaction_modal.other_server_instructions' defaultMessage='Copy and paste this URL into the search field of your favourite Mastodon app or the web interface of your Mastodon server.' /></p> - <Copypaste value={url} /> - </div> - </div> - </div> - ); - } - -} |