Skip to content

Commit

Permalink
Issue #705 (#707)
Browse files Browse the repository at this point in the history
* ✨ Added open and hideMenu prop, added onClickOutside

* 💄 Added fontSize

* 📝 Updated docs to match new api

* 📝 Docgen

* Added handleKeyDown to EmojiMenu.
  • Loading branch information
Sjaak Luthart authored Jun 23, 2017

Verified

This commit was signed with the committer’s verified signature.
dtolnay David Tolnay
1 parent e45a819 commit cf9a230
Showing 5 changed files with 131 additions and 43 deletions.
18 changes: 18 additions & 0 deletions docs/components.json
Original file line number Diff line number Diff line change
@@ -1552,6 +1552,24 @@
"computed": false
}
},
"open": {
"type": {
"name": "bool"
},
"required": false,
"description": "Toggle the EmojiMenu's visibility",
"defaultValue": {
"value": "false",
"computed": false
}
},
"hideMenu": {
"type": {
"name": "func"
},
"required": true,
"description": "Function to hide the menu"
},
"color": {
"type": {
"name": "string"
107 changes: 69 additions & 38 deletions docs/src/components/emoji-menu.jsx
Original file line number Diff line number Diff line change
@@ -1,49 +1,80 @@
import React from 'react';
import React, { Component } from 'react';
import ReactMarkdown from 'react-markdown';
import _ from 'underscore';
import emojione from 'emojione';
import EmojiMenu from '../../../dist/emoji-menu';
import Button from '../../../dist/button';
import Props from './props';
import components from '../../components.json';
import Paper from '../../../dist/paper';

const usage = '```js\n import EmojiMenu from \'anchor-ui/emoji-menu\';';

const EmojiMenuDoc = () => {
const componentData = _.find(components, component => component.displayName === 'EmojiMenu');
const style = {
paper: {
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
margin: 0,
padding: '20px'
},
emojiMenu: { margin: '10px' }
};

return (
<article className="doc">
<h1>EmojiMenu</h1>
<section>
<h1>Description</h1>
<p>{componentData.description}</p>
</section>
<section>
<h1>Usage</h1>
<ReactMarkdown source={usage} className="markdown" />
</section>
<section>
<h1>Examples</h1>
<Paper style={style.paper}>
<EmojiMenu
sendEmoji={() => {}}
style={style.emojiMenu}
/>
</Paper>
</section>
<Props props={componentData.props} />
</article>
);
};
class EmojiMenuDoc extends Component {
static createMarkup = text => ({
__html: emojione.toImage(text)
})

constructor() {
super();

this.state = {
open: false,
emoji: ''
};
}

toggleMenu = () => this.setState({ open: !this.state.open })

sendEmoji = ({ shortname }) => this.setState({ emoji: shortname })

render() {
const componentData = _.find(components, component => component.displayName === 'EmojiMenu');
const style = {
paper: {
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
margin: 0,
padding: '20px'
},
emojiMenu: { margin: '10px' }
};

return (
<article className="doc">
<h1>EmojiMenu</h1>
<section>
<h1>Description</h1>
<p>{componentData.description}</p>
</section>
<section>
<h1>Usage</h1>
<ReactMarkdown source={usage} className="markdown" />
</section>
<section>
<h1>Examples</h1>
<Paper style={style.paper}>
{
this.state.emoji
? <span style={style.emojiMenu} className="emojione" dangerouslySetInnerHTML={EmojiMenuDoc.createMarkup(this.state.emoji)} />
: null
}
<EmojiMenu
sendEmoji={this.sendEmoji}
style={style.emojiMenu}
open={this.state.open}
hideMenu={this.toggleMenu}
/>
<Button style={style.emojiMenu} onClick={this.toggleMenu}>
Toggle EmojiMenu
</Button>
</Paper>
</section>
<Props props={componentData.props} />
</article>
);
}
}

export default EmojiMenuDoc;
5 changes: 5 additions & 0 deletions docs/src/index.css
Original file line number Diff line number Diff line change
@@ -154,3 +154,8 @@ code {
tbody tr td:nth-of-type(2) {
text-transform: capitalize;
}

.emojione {
width: 32px;
height: 32px;
}
41 changes: 37 additions & 4 deletions src/emoji-menu/index.jsx
Original file line number Diff line number Diff line change
@@ -2,9 +2,10 @@ 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 EventListener from 'react-event-listener';
import emojis from './emoji';
import EmojiCategory from './emoji-category';
import EmojiModifiers from './emoji-modifiers';
@@ -38,6 +39,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 +54,8 @@ class EmojiMenu extends Component {
categoryStyle: {},
emojiStyle: {},
footerStyle: {},
iconStyle: {}
iconStyle: {},
open: false
}

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

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

hideMenu(event);
}

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

if (event.which === 27) {
hideMenu(event);
}
}

changeTone(tone) {
this.setState({
tone
@@ -112,9 +132,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) => {
@@ -164,15 +196,16 @@ class EmojiMenu extends Component {
style={footerStyle}
iconStyle={iconStyle}
/>
<EventListener target="window" onKeyUp={this.handleKeyUp} />
</section>
);
}
}

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

export default enhance(EmojiMenu);
3 changes: 2 additions & 1 deletion src/emoji-menu/styles.js
Original file line number Diff line number Diff line change
@@ -35,7 +35,8 @@ export default {
marginTop: '0',
fontWeight: 'bolder',
textTransform: 'capitalize',
marginBottom: '10px'
marginBottom: '10px',
fontSize: '16px'
},
emojiContainer: {
display: 'flex',

0 comments on commit cf9a230

Please sign in to comment.