@@ -72,4 +81,4 @@ class ReactionEmoji extends ImmutablePureComponent {
}
-export default connect(MapStateToProps, mapDispatchToProps)(injectIntl(ReactionEmoji));
+export default connect()(injectIntl(ReactionEmoji));
diff --git a/app/javascript/mastodon/features/reaction_deck/index.jsx b/app/javascript/mastodon/features/reaction_deck/index.jsx
index a457272da5..b1bc4ccfb9 100644
--- a/app/javascript/mastodon/features/reaction_deck/index.jsx
+++ b/app/javascript/mastodon/features/reaction_deck/index.jsx
@@ -1,4 +1,5 @@
import PropTypes from 'prop-types';
+import { useEffect, useState } from "react";
import { defineMessages, injectIntl } from 'react-intl';
@@ -10,20 +11,41 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+
+import { updateReactionDeck } from 'mastodon/actions/reaction_deck';
+import Button from 'mastodon/components/button';
import ColumnHeader from 'mastodon/components/column_header';
import LoadingIndicator from 'mastodon/components/loading_indicator';
import ScrollableList from 'mastodon/components/scrollable_list';
import Column from 'mastodon/features/ui/components/column';
+
import ReactionEmoji from './components/reaction_emoji';
-const DECK_SIZE = 16;
+// https://medium.com/@wbern/getting-react-18s-strict-mode-to-work-with-react-beautiful-dnd-47bc909348e4
+/* eslint react/prop-types: 0 */
+const StrictModeDroppable = ({ children, ...props }) => {
+ const [enabled, setEnabled] = useState(false);
+ useEffect(() => {
+ const animation = requestAnimationFrame(() => setEnabled(true));
+ return () => {
+ cancelAnimationFrame(animation);
+ setEnabled(false);
+ };
+ }, []);
+ if (!enabled) {
+ return null;
+ }
+ return
{children};
+};
+/* eslint react/prop-types: 0 */
const customEmojiMap = createSelector([state => state.get('custom_emojis')], items => items.reduce((map, emoji) => map.set(emoji.get('shortcode'), emoji), ImmutableMap()));
const messages = defineMessages({
- refresh: { id: 'refresh', defaultMessage: 'Refresh' },
+ reaction_deck_add: { id: 'reaction_deck.add', defaultMessage: 'Add' },
heading: { id: 'column.reaction_deck', defaultMessage: 'Reaction deck' },
});
@@ -33,17 +55,52 @@ const mapStateToProps = (state, props) => ({
emojiMap: customEmojiMap(state),
});
+const mapDispatchToProps = (dispatch) => ({
+ onChange: (emojis) => dispatch(updateReactionDeck(emojis)),
+});
+
class ReactionDeck extends ImmutablePureComponent {
static propTypes = {
params: PropTypes.object.isRequired,
- dispatch: PropTypes.func.isRequired,
deck: ImmutablePropTypes.list,
emojiMap: ImmutablePropTypes.map,
multiColumn: PropTypes.bool,
intl: PropTypes.object.isRequired,
+ onChange: PropTypes.func.isRequired,
};
+ deckToArray = () => {
+ const { deck } = this.props;
+
+ return deck.map((item) => item.get('name')).toArray();
+ };
+
+ handleReorder = (result) => {
+ const newDeck = this.deckToArray();
+ const deleted = newDeck.splice(result.source.index, 1);
+ newDeck.splice(result.destination.index, 0, deleted[0]);
+ this.props.onChange(newDeck);
+ };
+
+ handleChange = (index, emoji) => {
+ const newDeck = this.deckToArray();
+ newDeck[index] = emoji.native || emoji.id.replace(':', '');
+ this.props.onChange(newDeck);
+ };
+
+ handleRemove = (index) => {
+ const newDeck = this.deckToArray();
+ newDeck.splice(index, 1);
+ this.props.onChange(newDeck);
+ };
+
+ handleAdd = () => {
+ const newDeck = this.deckToArray();
+ newDeck.push('👍');
+ this.props.onChange(newDeck);
+ }
+
render () {
const { intl, deck, emojiMap, multiColumn } = this.props;
@@ -69,9 +126,31 @@ class ReactionDeck extends ImmutablePureComponent {
scrollKey='reaction_deck'
bindToDocument={!multiColumn}
>
- {[...Array(DECK_SIZE).keys()].map(emojiId =>
-
- )}
+
+
+ {(provided) => (
+
+ {deck.map((emoji, index) => (
+
+ {(provided2) => (
+
+
+
+ )}
+
+ ))}
+ {provided.placeholder}
+
+
+
{signedIn && (
-