Skip to content
This repository was archived by the owner on Jan 31, 2023. It is now read-only.

Frequently used #55

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Frequently used #55

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4f6d9c9
Add frequently used
r0stig Feb 13, 2017
002f9f3
Show only 21 items and use 5 as max for frequently used or else some …
r0stig Feb 13, 2017
1a78511
Remove unused dependency
r0stig Feb 20, 2017
f156828
Render one more emoji per row to match header
r0stig Feb 20, 2017
2e4f8dd
Merge remote-tracking branch 'upstream/master' into frequently-used
r0stig Feb 20, 2017
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
2 changes: 1 addition & 1 deletion css/picker.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.emoji-dialog {
width: 276px;
width: 308px;
height: 220px;
background: #fff;
box-sizing: border-box;
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"devDependencies": {
"babel-cli": "^6.7.5",
"babel-eslint": "^7.1.1",
"babel-plugin-transform-object-rest-spread": "6.22.0",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This devDependency shouldn't be needed - the object-rest-spread transform is included in the stage 3 preset, which is a transitive dependency of the stage 0 preset already in place. Does the build complete without this new dependency?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I get this error without the dependency:

Error: Cannot find module 'babel-plugin-transform-object-rest-spread' (While processing preset: "[path...]/emojione-picker/node_modules/babel-preset-stage-0/lib/index.js")

Am I doing something else wrong?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure - I don't see that error locally with node 7.5.0 and npm 4.2.0. Maybe try wiping out node_modules and reinstalling? If that doesn't work please post your node/npm versions.

"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
Expand Down
4 changes: 4 additions & 0 deletions src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
export const defaultCategories = { // eslint-disable-line
frequentlyUsed: {
title: 'Frequently used',
emoji: 'clock3'
},
people: {
title: 'People',
emoji: 'smile',
Expand Down
44 changes: 42 additions & 2 deletions src/picker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default class Picker extends Component {

state = {
modifier: store.get("emoji-modifier") || "0",
frequentlyUsed: store.get('emoji-frequently-used') || [],
category: false,
term: this.props.search !== true ? this.props.search : ""
};
Expand All @@ -44,7 +45,11 @@ export default class Picker extends Component {
each(this.props.emojione, (value, key) => {
emojione[key] = value;
});
this.setState({ emojis: createEmojisFromStrategy(strategy) });
this.setState({ emojis: {
...createEmojisFromStrategy(strategy),
...this.getFromFrequentlyUsed(strategy, this.state.frequentlyUsed)
}
});
}

componentDidMount() {
Expand All @@ -57,6 +62,41 @@ export default class Picker extends Component {
}
}

getFromFrequentlyUsed (strategy, frequentlyUsed) {
const emojis = {}
emojis['frequentlyUsed'] = {}

frequentlyUsed.sort((a, b) => b.used - a.used).slice(0, 21).forEach(frequentlyUsed => {
emojis['frequentlyUsed'][frequentlyUsed.strategyName] = [strategy[frequentlyUsed.strategyName]]
})
return emojis
}

addToFrequentlyUsed (shortname) {
const strategyName = shortname.replace(/:/g, '')
const currentFrequentlyUsed = store.get('emoji-frequently-used') || []
const newFrequentlyUsed = [
...currentFrequentlyUsed.filter(f => f.strategyName !== strategyName),
{
strategyName: strategyName,
used: (currentFrequentlyUsed.find(f => f.strategyName === strategyName) || {used: 0}).used + 1 % 6
}
]
store.set('emoji-frequently-used', newFrequentlyUsed)
this.setState({
frequentlyUsed: newFrequentlyUsed,
emojis: {
...this.state.emojis,
...this.getFromFrequentlyUsed(strategy, newFrequentlyUsed)
}
})
}

onChange = (data) => {
this.addToFrequentlyUsed(data.shortname)
this.props.onChange(data)
}

setFocus = ev => {
if (ev.target.id === "flags") {
this.categories[this.state.category].children[0].focus();
Expand Down Expand Up @@ -98,7 +138,7 @@ export default class Picker extends Component {
rows={rows}
modifier={this.state.modifier}
onActiveCategoryChange={this._onActiveCategoryChange}
onChange={this.props.onChange}
onChange={this.onChange}
onModifierChange={this._onModifierChange}
/>
</div>
Expand Down