Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue #705 #707

Merged
merged 5 commits into from
Jun 23, 2017
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
✨ Added open and hideMenu prop, added onClickOutside
  • Loading branch information
Sjaak Luthart committed Jun 14, 2017
commit 46f9ee20f66d30a7bbc9fba15e456de5c020e872
31 changes: 27 additions & 4 deletions src/emoji-menu/index.jsx
Original file line number Diff line number Diff line change
@@ -2,9 +2,9 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import emojione from 'emojione';
import _ from 'lodash';
import pure from 'recompose/pure';
import Radium from 'radium';
import compose from 'recompose/compose';
import onClickOutside from 'react-onclickoutside';
import emojis from './emoji';
import EmojiCategory from './emoji-category';
import EmojiModifiers from './emoji-modifiers';
@@ -38,6 +38,10 @@ class EmojiMenu extends Component {
footerStyle: PropTypes.instanceOf(Object),
/** Override the styles of the footer icons */
iconStyle: PropTypes.instanceOf(Object),
/** Toggle the EmojiMenu's visibility */
open: PropTypes.bool,
/** Function to hide the menu */
hideMenu: PropTypes.func.isRequired,
color: PropTypes.string.isRequired
}

@@ -49,7 +53,8 @@ class EmojiMenu extends Component {
categoryStyle: {},
emojiStyle: {},
footerStyle: {},
iconStyle: {}
iconStyle: {},
open: false
}

constructor(props) {
@@ -74,6 +79,12 @@ class EmojiMenu extends Component {
this.sendEmoji = this.sendEmoji.bind(this);
}

handleClickOutside = () => {
const { hideMenu } = this.props;

hideMenu();
}

changeTone(tone) {
this.setState({
tone
@@ -112,9 +123,21 @@ class EmojiMenu extends Component {
sendEmoji, // eslint-disable-line no-unused-vars
svgSprites, // eslint-disable-line no-unused-vars
color,
open,
eventTypes, // eslint-disable-line no-unused-vars, react/prop-types
outsideClickIgnoreClass, // eslint-disable-line no-unused-vars, react/prop-types
preventDefault, // eslint-disable-line no-unused-vars, react/prop-types
stopPropagation, // eslint-disable-line no-unused-vars, react/prop-types
disableOnClickOutside, // eslint-disable-line no-unused-vars, react/prop-types
enableOnClickOutside, // eslint-disable-line no-unused-vars, react/prop-types
hideMenu, // eslint-disable-line no-unused-vars
...custom
} = this.props;

if (!open) {
return null;
}

const modifiers = _.filter(emojis, { category: 'modifier' });

const filteredEmoji = _.chain(emojis).filter({ category }).filter((emoji) => {
@@ -171,8 +194,8 @@ class EmojiMenu extends Component {

const enhance = compose(
themeable(),
Radium,
pure
onClickOutside,
Radium
);

export default enhance(EmojiMenu);