Skip to content

Commit 3d5d3a3

Browse files
ealushealush
committed
1.2.10 debounced filter display
1 parent 6198614 commit 3d5d3a3

11 files changed

+5709
-74
lines changed

‎docs/iframe.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<body>
1717
<div id="root"></div>
1818
<div id="error-display"></div>
19-
<script src="static/preview.a957e0c941890c90a182.bundle.js"></script>
19+
<script src="static/preview.56b6191e94ff97cdc1bf.bundle.js"></script>
2020
</body>
2121
</html>
2222

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
</head>
3939
<body style="margin: 0;">
4040
<div id="root"></div>
41-
<script src="static/manager.884c8229838f0c89fa25.bundle.js"></script>
41+
<script src="static/manager.d6a42eb6d12b67ebe0b2.bundle.js"></script>
4242
</body>
4343
</html>
4444

‎docs/static/manager.884c8229838f0c89fa25.bundle.js renamed to ‎docs/static/manager.d6a42eb6d12b67ebe0b2.bundle.js

Lines changed: 12 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/manager.884c8229838f0c89fa25.bundle.js.map renamed to ‎docs/static/manager.d6a42eb6d12b67ebe0b2.bundle.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/preview.a957e0c941890c90a182.bundle.js renamed to ‎docs/static/preview.56b6191e94ff97cdc1bf.bundle.js

Lines changed: 18 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/preview.56b6191e94ff97cdc1bf.bundle.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/preview.a957e0c941890c90a182.bundle.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
22
"name": "emoji-picker-react",
3-
"version": "1.2.9",
3+
"version": "1.2.10",
44
"description": "React emoji-picker component",
55
"main": "./dist/index.js",
66
"scripts": {
77
"prepublish": "npm run build",
88
"test": "echo \"Error: no test specified\" && exit 1",
9-
"storybook": "start-storybook -s ./assets -p 9001",
9+
"storybook": "start-storybook -p 9001",
1010
"build-storybook": "build-storybook",
1111
"build": "NODE_ENV=production webpack --config webpack.config.prod.js",
1212
"build:watch": "NODE_ENV=production webpack --config webpack.config.prod.js --watch",

‎src/SearchBar/index.js

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import React, { Component } from 'react';
2+
import { debounce } from 'throttle-debounce';
23
import PropTypes from 'prop-types';
34
import { stackFilter, textIndexInStack, reduceEmojis, filterStack } from './helpers';
4-
import { ALL_KEYWORDS, KEYWORDS_SINGLE } from '../constants';
5+
import { ALL_KEYWORDS, KEYWORDS_SINGLE, FILTER_UPDATE_DEBOUNCE } from '../constants';
56
import './style.scss';
67

78
class SearchBar extends Component {
89
constructor(props) {
910
super(props);
1011

11-
this.onChange = props.onChange;
12+
this.onChange = debounce(FILTER_UPDATE_DEBOUNCE, props.onChange);
1213
this.filterStack = [];
1314

14-
this.filterKeywords = this.filterKeywords.bind(this);
15+
this.filterKeywords = debounce(50, this.filterKeywords.bind(this));
1516
}
1617

1718
addToStack(currentFilter) {
@@ -25,59 +26,56 @@ class SearchBar extends Component {
2526
this.filterStack.push(currentFilter);
2627
}
2728

28-
filterKeywords(e) {
29-
e.persist();
29+
filterKeywords() {
3030

31-
setTimeout(() => {
32-
const text = e.target.value.trim();
31+
const text = this._input.value.trim();
3332

34-
if (!text) {
35-
this.filterStack = [];
36-
return this.onChange(null);
37-
}
33+
if (!text) {
34+
this.filterStack = [];
35+
return this.onChange(null);
36+
}
3837

39-
this.filterStack = this.filterStack || [];
38+
this.filterStack = this.filterStack || [];
4039

41-
const textLength = text.length;
40+
const textLength = text.length;
4241

43-
if (this.filterStack.length > textLength) {
44-
this.filterStack = this.filterStack.slice(0, textLength);
45-
}
42+
if (this.filterStack.length > textLength) {
43+
this.filterStack = this.filterStack.slice(0, textLength);
44+
}
4645

47-
const stackIndex = textIndexInStack(text, this.filterStack);
46+
const stackIndex = textIndexInStack(text, this.filterStack);
4847

49-
let matches;
48+
let matches;
5049

51-
if (stackIndex > -1) {
52-
matches = stackFilter(stackIndex, text, this.filterStack);
53-
this.addToStack({ text, matches });
54-
return this.onChange(matches);
55-
} else {
56-
this.filterStack = [];
57-
}
50+
if (stackIndex > -1) {
51+
matches = stackFilter(stackIndex, text, this.filterStack);
52+
this.addToStack({ text, matches });
53+
return this.onChange(matches);
54+
} else {
55+
this.filterStack = [];
56+
}
5857

59-
if (KEYWORDS_SINGLE.hasOwnProperty(text)) {
60-
matches = KEYWORDS_SINGLE[text];
61-
} else {
62-
matches = ALL_KEYWORDS.filter((keyword) => keyword.indexOf(text) > -1);
63-
}
58+
if (KEYWORDS_SINGLE.hasOwnProperty(text)) {
59+
matches = KEYWORDS_SINGLE[text];
60+
} else {
61+
matches = ALL_KEYWORDS.filter((keyword) => keyword.indexOf(text) > -1);
62+
}
6463

65-
if (!matches.length) {
66-
return this.onChange({});
67-
}
64+
if (!matches.length) {
65+
return this.onChange({});
66+
}
6867

69-
matches = reduceEmojis(matches);
68+
matches = reduceEmojis(matches);
7069

71-
this.filterStack.push({ text, matches });
72-
this.onChange(matches);
73-
});
70+
this.filterStack.push({ text, matches });
71+
this.onChange(matches);
7472
}
7573

7674
render() {
7775

7876
return (
7977
<div className="search-bar">
80-
<input type="text" placeholder="Emoji Search" onChange={this.filterKeywords}/>
78+
<input type="text" placeholder="Emoji Search" onChange={this.filterKeywords} ref={(_input) => this._input = _input}/>
8179
<i/>
8280
</div>
8381
);

‎src/constants/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import keywordsSingleChar from '../SearchBar/helpers/init_keywords_single';
44
export const Header_Height = 25;
55
export const OPEN_DIVERSITIES_TIMEOUT = 1000;
66
export const HIDE_SCROLL_DEBOUNCE = 550;
7+
export const FILTER_UPDATE_DEBOUNCE = 200;
78
export const DEFAULt_CDN_PATH = 'https://cdn.jsdelivr.net/emojione/assets/3.0/png';
89
export const DEFAULT_IMAGE_RESOLUTION = '32';
910
export const ALL_KEYWORDS = Object.keys(keywords);

0 commit comments

Comments
 (0)