post/nas
1
0
Fork 0
forked from gitea/nas
Code Pull requests Activity

Change reactiondeck to draggable, add-removable

Browse source
This commit is contained in:
KMY 2023-05-26 20:42:36 +09:00
parent c4efa4d986
commit b9dab37eac
8 changed files with 200 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

29
app/javascript/mastodon/features/reaction_deck/components/reaction_emoji.jsx
View file

@ -2,12 +2,10 @@ import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { updateReactionDeck, removeReactionDeck } from 'mastodon/actions/reaction_deck';
import Button from 'mastodon/components/button';
import EmojiPickerDropdownContainer from 'mastodon/features/compose/containers/emoji_picker_dropdown_container';
import emojify from 'mastodon/features/emoji/emoji';
@ -17,19 +15,10 @@ const messages = defineMessages({
remove: { id: 'reaction_deck.remove', defaultMessage: 'Remove' },
});
const MapStateToProps = (state, { emojiId, emojiMap }) => ({
emoji: (state.get('reaction_deck', ImmutableList()).toArray().find(em => em.get('id') === emojiId) || ImmutableMap({ emoji: { shortcode: '' } })).get('name'),
emojiMap,
});
const mapDispatchToProps = (dispatch, { emojiId }) => ({
onChange: (emoji) => dispatch(updateReactionDeck(emojiId, emoji)),
onRemove: () => dispatch(removeReactionDeck(emojiId)),
});
class ReactionEmoji extends ImmutablePureComponent {
static propTypes = {
index: PropTypes.number,
emoji: PropTypes.string,
emojiMap: ImmutablePropTypes.map.isRequired,
onChange: PropTypes.func.isRequired,
@ -40,8 +29,16 @@ class ReactionEmoji extends ImmutablePureComponent {
emoji: '',
};
handleChange = (emoji) => {
this.props.onChange(this.props.index, emoji);
};
handleRemove = () => {
this.props.onRemove(this.props.index);
};
render () {
const { intl, emojiMap, emoji, onChange, onRemove } = this.props;
const { intl, emojiMap, emoji } = this.props;
let content = null;
@ -69,13 +66,13 @@ class ReactionEmoji extends ImmutablePureComponent {
<div className='reaction_deck__emoji'>
<div className='reaction_deck__emoji__wrapper'>
<div className='reaction_deck__emoji__wrapper__content'>
<EmojiPickerDropdownContainer onPickEmoji={onChange} />
<EmojiPickerDropdownContainer onPickEmoji={this.handleChange} />
<div>
{content}
</div>
</div>
<div className='reaction_deck__emoji__wrapper__options'>
<Button secondary text={intl.formatMessage(messages.remove)} onClick={onRemove} />
<Button secondary text={intl.formatMessage(messages.remove)} onClick={this.handleRemove} />
</div>
</div>
</div>
@ -84,4 +81,4 @@ class ReactionEmoji extends ImmutablePureComponent {
}
export default connect(MapStateToProps, mapDispatchToProps)(injectIntl(ReactionEmoji));
export default connect(injectIntl(ReactionEmoji));