emoji-picker-react 4.0.0-rc.1 → 4.0.0-rc.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/context/PickerContext.d.ts +1 -1
- package/dist/components/emoji/Emoji.d.ts +1 -1
- package/dist/config/categoryConfig.d.ts +2 -11
- package/dist/config/cdnUrls.d.ts +1 -1
- package/dist/config/config.d.ts +1 -14
- package/dist/config/useConfig.d.ts +1 -3
- package/dist/data/skinToneVariations.d.ts +1 -8
- package/dist/dataUtils/emojiSelectors.d.ts +1 -2
- package/dist/dataUtils/recentlyUsed.d.ts +1 -1
- package/dist/emoji-picker-react.cjs.development.js +50 -59
- package/dist/emoji-picker-react.cjs.development.js.map +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js.map +1 -1
- package/dist/emoji-picker-react.esm.js +23 -24
- package/dist/emoji-picker-react.esm.js.map +1 -1
- package/dist/hooks/preloadEmoji.d.ts +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/types/exposedTypes.d.ts +31 -2
- package/package.json +5 -5
- package/src/components/context/PickerContext.tsx +1 -1
- package/src/components/emoji/Emoji.tsx +1 -1
- package/src/components/main/PickerMain.tsx +1 -1
- package/src/config/categoryConfig.ts +3 -11
- package/src/config/cdnUrls.ts +1 -1
- package/src/config/config.ts +1 -15
- package/src/config/useConfig.ts +1 -3
- package/src/data/skinToneVariations.ts +1 -8
- package/src/dataUtils/emojiSelectors.ts +2 -2
- package/src/dataUtils/recentlyUsed.ts +1 -2
- package/src/hooks/preloadEmoji.ts +1 -1
- package/src/hooks/useMouseDownHandlers.ts +3 -4
- package/src/index.tsx +2 -1
- package/src/types/exposedTypes.ts +35 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { SkinTones } from '../../data/skinToneVariations';
|
|
3
2
|
import { DataEmoji } from '../../dataUtils/DataTypes';
|
|
4
3
|
import { FilterDict } from '../../hooks/useFilter';
|
|
4
|
+
import { SkinTones } from '../../types/exposedTypes';
|
|
5
5
|
export declare function PickerContextProvider({ children }: Props): JSX.Element;
|
|
6
6
|
declare type ReactState<T> = [T, React.Dispatch<React.SetStateAction<T>>];
|
|
7
7
|
declare type Props = Readonly<{
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { EmojiStyle } from '../../config/config';
|
|
3
2
|
import { DataEmoji } from '../../dataUtils/DataTypes';
|
|
3
|
+
import { EmojiStyle } from '../../types/exposedTypes';
|
|
4
4
|
import './Emoji.css';
|
|
5
5
|
declare type Props = Readonly<{
|
|
6
6
|
hidden?: boolean;
|
|
@@ -1,14 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
SMILEYS_PEOPLE = "smileys_people",
|
|
4
|
-
ANIMALS_NATURE = "animals_nature",
|
|
5
|
-
FOOD_DRINK = "food_drink",
|
|
6
|
-
TRAVEL_PLACES = "travel_places",
|
|
7
|
-
ACTIVITIES = "activities",
|
|
8
|
-
OBJECTS = "objects",
|
|
9
|
-
SYMBOLS = "symbols",
|
|
10
|
-
FLAGS = "flags"
|
|
11
|
-
}
|
|
1
|
+
import { Categories } from '../types/exposedTypes';
|
|
2
|
+
export { Categories };
|
|
12
3
|
export declare const baseCategoriesConfig: CategoryConfig[];
|
|
13
4
|
export declare function categoryFromCategoryConfig(category: CategoryConfig): Categories;
|
|
14
5
|
export declare function categoryNameFromCategoryConfig(category: CategoryConfig): string;
|
package/dist/config/cdnUrls.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { EmojiStyle } from
|
|
1
|
+
import { EmojiStyle } from "../types/exposedTypes";
|
|
2
2
|
export declare function cdnUrl(emojiStyle: EmojiStyle): string;
|
package/dist/config/config.d.ts
CHANGED
|
@@ -1,18 +1,5 @@
|
|
|
1
|
-
import { SkinTones } from '../
|
|
2
|
-
import { EmojiClickData } from '../types/exposedTypes';
|
|
1
|
+
import { EmojiClickData, EmojiStyle, SkinTones, Theme } from '../types/exposedTypes';
|
|
3
2
|
import { CategoriesConfig } from './categoryConfig';
|
|
4
|
-
export declare enum EmojiStyle {
|
|
5
|
-
NATIVE = "native",
|
|
6
|
-
APPLE = "apple",
|
|
7
|
-
TWITTER = "twitter",
|
|
8
|
-
GOOGLE = "google",
|
|
9
|
-
FACEBOOK = "facebook"
|
|
10
|
-
}
|
|
11
|
-
export declare enum Theme {
|
|
12
|
-
DARK = "dark",
|
|
13
|
-
LIGHT = "light",
|
|
14
|
-
AUTO = "auto"
|
|
15
|
-
}
|
|
16
3
|
export declare function mergeConfig(userConfig?: PickerConfig): {
|
|
17
4
|
categories: CategoriesConfig;
|
|
18
5
|
searchPlaceHolder: string;
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import { SkinTones } from '../
|
|
2
|
-
import { EmojiClickData } from '../types/exposedTypes';
|
|
1
|
+
import { EmojiClickData, EmojiStyle, SkinTones } from '../types/exposedTypes';
|
|
3
2
|
import { CategoriesConfig } from './categoryConfig';
|
|
4
|
-
import { EmojiStyle } from './config';
|
|
5
3
|
export declare function useSearchPlaceHolderConfig(): string;
|
|
6
4
|
export declare function useDefaultSkinToneConfig(): SkinTones;
|
|
7
5
|
export declare function useSkinTonesDisabledConfig(): boolean;
|
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
NEUTRAL = "neutral",
|
|
3
|
-
LIGHT = "1f3fb",
|
|
4
|
-
MEDIUM_LIGHT = "1f3fc",
|
|
5
|
-
MEDIUM = "1f3fd",
|
|
6
|
-
MEDIUM_DARK = "1f3fe",
|
|
7
|
-
DARK = "1f3ff"
|
|
8
|
-
}
|
|
1
|
+
import { SkinTones } from '../types/exposedTypes';
|
|
9
2
|
declare const skinToneVariations: SkinTones[];
|
|
10
3
|
export default skinToneVariations;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Categories } from './../config/categoryConfig';
|
|
2
|
-
import { EmojiStyle } from '../config/config';
|
|
3
2
|
import { DataEmoji, DataEmojis } from './DataTypes';
|
|
4
|
-
import { SkinTones } from '../
|
|
3
|
+
import { EmojiStyle, SkinTones } from '../types/exposedTypes';
|
|
5
4
|
export declare function emojiNames(emoji: DataEmoji): string[];
|
|
6
5
|
export declare function emojiName(emoji: DataEmoji): string;
|
|
7
6
|
export declare function emojiUrl(emojiStyle: EmojiStyle, emoji: DataEmoji, skinTone?: string): string;
|
|
@@ -83,7 +83,19 @@ function categoryNameFromDom($category) {
|
|
|
83
83
|
return (_$category$getAttribu = $category == null ? void 0 : $category.getAttribute('data-name')) != null ? _$category$getAttribu : null;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
|
|
86
|
+
(function (EmojiStyle) {
|
|
87
|
+
EmojiStyle["NATIVE"] = "native";
|
|
88
|
+
EmojiStyle["APPLE"] = "apple";
|
|
89
|
+
EmojiStyle["TWITTER"] = "twitter";
|
|
90
|
+
EmojiStyle["GOOGLE"] = "google";
|
|
91
|
+
EmojiStyle["FACEBOOK"] = "facebook";
|
|
92
|
+
})(exports.EmojiStyle || (exports.EmojiStyle = {}));
|
|
93
|
+
|
|
94
|
+
(function (Theme) {
|
|
95
|
+
Theme["DARK"] = "dark";
|
|
96
|
+
Theme["LIGHT"] = "light";
|
|
97
|
+
Theme["AUTO"] = "auto";
|
|
98
|
+
})(exports.Theme || (exports.Theme = {}));
|
|
87
99
|
|
|
88
100
|
(function (SkinTones) {
|
|
89
101
|
SkinTones["NEUTRAL"] = "neutral";
|
|
@@ -92,13 +104,7 @@ var SkinTones;
|
|
|
92
104
|
SkinTones["MEDIUM"] = "1f3fd";
|
|
93
105
|
SkinTones["MEDIUM_DARK"] = "1f3fe";
|
|
94
106
|
SkinTones["DARK"] = "1f3ff";
|
|
95
|
-
})(SkinTones || (SkinTones = {}));
|
|
96
|
-
|
|
97
|
-
var skinToneVariations = [SkinTones.NEUTRAL, SkinTones.LIGHT, SkinTones.MEDIUM_LIGHT, SkinTones.MEDIUM, SkinTones.MEDIUM_DARK, SkinTones.DARK];
|
|
98
|
-
|
|
99
|
-
var _configByCategory;
|
|
100
|
-
|
|
101
|
-
var Categories;
|
|
107
|
+
})(exports.SkinTones || (exports.SkinTones = {}));
|
|
102
108
|
|
|
103
109
|
(function (Categories) {
|
|
104
110
|
Categories["RECENTLY_USED"] = "recently_used";
|
|
@@ -110,35 +116,36 @@ var Categories;
|
|
|
110
116
|
Categories["OBJECTS"] = "objects";
|
|
111
117
|
Categories["SYMBOLS"] = "symbols";
|
|
112
118
|
Categories["FLAGS"] = "flags";
|
|
113
|
-
})(Categories || (Categories = {}));
|
|
119
|
+
})(exports.Categories || (exports.Categories = {}));
|
|
114
120
|
|
|
115
|
-
var
|
|
116
|
-
var
|
|
117
|
-
|
|
121
|
+
var _configByCategory;
|
|
122
|
+
var categoriesOrdered = [exports.Categories.RECENTLY_USED, exports.Categories.SMILEYS_PEOPLE, exports.Categories.ANIMALS_NATURE, exports.Categories.FOOD_DRINK, exports.Categories.TRAVEL_PLACES, exports.Categories.ACTIVITIES, exports.Categories.OBJECTS, exports.Categories.SYMBOLS, exports.Categories.FLAGS];
|
|
123
|
+
var configByCategory = (_configByCategory = {}, _configByCategory[exports.Categories.RECENTLY_USED] = {
|
|
124
|
+
category: exports.Categories.RECENTLY_USED,
|
|
118
125
|
name: 'Recently Used'
|
|
119
|
-
}, _configByCategory[Categories.SMILEYS_PEOPLE] = {
|
|
120
|
-
category: Categories.SMILEYS_PEOPLE,
|
|
126
|
+
}, _configByCategory[exports.Categories.SMILEYS_PEOPLE] = {
|
|
127
|
+
category: exports.Categories.SMILEYS_PEOPLE,
|
|
121
128
|
name: 'Smileys & People'
|
|
122
|
-
}, _configByCategory[Categories.ANIMALS_NATURE] = {
|
|
123
|
-
category: Categories.ANIMALS_NATURE,
|
|
129
|
+
}, _configByCategory[exports.Categories.ANIMALS_NATURE] = {
|
|
130
|
+
category: exports.Categories.ANIMALS_NATURE,
|
|
124
131
|
name: 'Animals & Nature'
|
|
125
|
-
}, _configByCategory[Categories.FOOD_DRINK] = {
|
|
126
|
-
category: Categories.FOOD_DRINK,
|
|
132
|
+
}, _configByCategory[exports.Categories.FOOD_DRINK] = {
|
|
133
|
+
category: exports.Categories.FOOD_DRINK,
|
|
127
134
|
name: 'Food & Drink'
|
|
128
|
-
}, _configByCategory[Categories.TRAVEL_PLACES] = {
|
|
129
|
-
category: Categories.TRAVEL_PLACES,
|
|
135
|
+
}, _configByCategory[exports.Categories.TRAVEL_PLACES] = {
|
|
136
|
+
category: exports.Categories.TRAVEL_PLACES,
|
|
130
137
|
name: 'Travel & Places'
|
|
131
|
-
}, _configByCategory[Categories.ACTIVITIES] = {
|
|
132
|
-
category: Categories.ACTIVITIES,
|
|
138
|
+
}, _configByCategory[exports.Categories.ACTIVITIES] = {
|
|
139
|
+
category: exports.Categories.ACTIVITIES,
|
|
133
140
|
name: 'Activities'
|
|
134
|
-
}, _configByCategory[Categories.OBJECTS] = {
|
|
135
|
-
category: Categories.OBJECTS,
|
|
141
|
+
}, _configByCategory[exports.Categories.OBJECTS] = {
|
|
142
|
+
category: exports.Categories.OBJECTS,
|
|
136
143
|
name: 'Objects'
|
|
137
|
-
}, _configByCategory[Categories.SYMBOLS] = {
|
|
138
|
-
category: Categories.SYMBOLS,
|
|
144
|
+
}, _configByCategory[exports.Categories.SYMBOLS] = {
|
|
145
|
+
category: exports.Categories.SYMBOLS,
|
|
139
146
|
name: 'Symbols'
|
|
140
|
-
}, _configByCategory[Categories.FLAGS] = {
|
|
141
|
-
category: Categories.FLAGS,
|
|
147
|
+
}, _configByCategory[exports.Categories.FLAGS] = {
|
|
148
|
+
category: exports.Categories.FLAGS,
|
|
142
149
|
name: 'Flags'
|
|
143
150
|
}, _configByCategory);
|
|
144
151
|
var baseCategoriesConfig = /*#__PURE__*/categoriesOrdered.map(function (category) {
|
|
@@ -176,24 +183,6 @@ function getBaseConfigByCategory(category) {
|
|
|
176
183
|
return configByCategory[category];
|
|
177
184
|
}
|
|
178
185
|
|
|
179
|
-
var EmojiStyle;
|
|
180
|
-
|
|
181
|
-
(function (EmojiStyle) {
|
|
182
|
-
EmojiStyle["NATIVE"] = "native";
|
|
183
|
-
EmojiStyle["APPLE"] = "apple";
|
|
184
|
-
EmojiStyle["TWITTER"] = "twitter";
|
|
185
|
-
EmojiStyle["GOOGLE"] = "google";
|
|
186
|
-
EmojiStyle["FACEBOOK"] = "facebook";
|
|
187
|
-
})(EmojiStyle || (EmojiStyle = {}));
|
|
188
|
-
|
|
189
|
-
var Theme;
|
|
190
|
-
|
|
191
|
-
(function (Theme) {
|
|
192
|
-
Theme["DARK"] = "dark";
|
|
193
|
-
Theme["LIGHT"] = "light";
|
|
194
|
-
Theme["AUTO"] = "auto";
|
|
195
|
-
})(Theme || (Theme = {}));
|
|
196
|
-
|
|
197
186
|
function mergeConfig(userConfig) {
|
|
198
187
|
if (userConfig === void 0) {
|
|
199
188
|
userConfig = {};
|
|
@@ -208,15 +197,15 @@ function basePickerConfig() {
|
|
|
208
197
|
return {
|
|
209
198
|
autoFocusSearch: true,
|
|
210
199
|
categories: baseCategoriesConfig,
|
|
211
|
-
defaultSkinTone: SkinTones.NEUTRAL,
|
|
212
|
-
emojiStyle: EmojiStyle.APPLE,
|
|
200
|
+
defaultSkinTone: exports.SkinTones.NEUTRAL,
|
|
201
|
+
emojiStyle: exports.EmojiStyle.APPLE,
|
|
213
202
|
onEmojiClick: function defaultOnClickHandler( // @ts-ignore
|
|
214
203
|
event, // @ts-ignore
|
|
215
204
|
emoji) {},
|
|
216
205
|
searchPlaceHolder: 'Search',
|
|
217
206
|
showPreview: true,
|
|
218
207
|
skinTonesDisabled: false,
|
|
219
|
-
theme: Theme.LIGHT
|
|
208
|
+
theme: exports.Theme.LIGHT
|
|
220
209
|
};
|
|
221
210
|
}
|
|
222
211
|
|
|
@@ -396,7 +385,7 @@ function PickerContextProvider(_ref) {
|
|
|
396
385
|
var PickerContext = /*#__PURE__*/React.createContext({
|
|
397
386
|
searchTerm: ['', function () {}],
|
|
398
387
|
activeCategoryState: [null, function () {}],
|
|
399
|
-
activeSkinTone: [SkinTones.NEUTRAL, function () {}],
|
|
388
|
+
activeSkinTone: [exports.SkinTones.NEUTRAL, function () {}],
|
|
400
389
|
emojisThatFailedToLoadState: [/*#__PURE__*/new Set(), function () {}],
|
|
401
390
|
isPastInitialLoad: true,
|
|
402
391
|
emojiVariationPickerState: [null, function () {}],
|
|
@@ -530,16 +519,16 @@ var CDN_URL_TWITTER = 'https://cdn.jsdelivr.net/npm/emoji-datasource-twitter/img
|
|
|
530
519
|
var CDN_URL_GOOGLE = 'https://cdn.jsdelivr.net/npm/emoji-datasource-google/img/google/64/';
|
|
531
520
|
function cdnUrl(emojiStyle) {
|
|
532
521
|
switch (emojiStyle) {
|
|
533
|
-
case EmojiStyle.TWITTER:
|
|
522
|
+
case exports.EmojiStyle.TWITTER:
|
|
534
523
|
return CDN_URL_TWITTER;
|
|
535
524
|
|
|
536
|
-
case EmojiStyle.GOOGLE:
|
|
525
|
+
case exports.EmojiStyle.GOOGLE:
|
|
537
526
|
return CDN_URL_GOOGLE;
|
|
538
527
|
|
|
539
|
-
case EmojiStyle.FACEBOOK:
|
|
528
|
+
case exports.EmojiStyle.FACEBOOK:
|
|
540
529
|
return CDN_URL_FACEBOOK;
|
|
541
530
|
|
|
542
|
-
case EmojiStyle.APPLE:
|
|
531
|
+
case exports.EmojiStyle.APPLE:
|
|
543
532
|
default:
|
|
544
533
|
return CDN_URL_APPLE;
|
|
545
534
|
}
|
|
@@ -6284,6 +6273,8 @@ var emojis = {
|
|
|
6284
6273
|
}]
|
|
6285
6274
|
};
|
|
6286
6275
|
|
|
6276
|
+
var skinToneVariations = [exports.SkinTones.NEUTRAL, exports.SkinTones.LIGHT, exports.SkinTones.MEDIUM_LIGHT, exports.SkinTones.MEDIUM, exports.SkinTones.MEDIUM_DARK, exports.SkinTones.DARK];
|
|
6277
|
+
|
|
6287
6278
|
var _window;
|
|
6288
6279
|
var EmojiProperties;
|
|
6289
6280
|
|
|
@@ -6870,7 +6861,7 @@ function Emoji(_ref) {
|
|
|
6870
6861
|
}),
|
|
6871
6862
|
"data-unified": unified,
|
|
6872
6863
|
"data-original": emojiUnified(emoji)
|
|
6873
|
-
}, emojiStyle === EmojiStyle.NATIVE ? React.createElement(NativeEmoji, Object.assign({}, base)) : React.createElement(EmojiImg, Object.assign({}, base, {
|
|
6864
|
+
}, emojiStyle === exports.EmojiStyle.NATIVE ? React.createElement(NativeEmoji, Object.assign({}, base)) : React.createElement(EmojiImg, Object.assign({}, base, {
|
|
6874
6865
|
emoji: emoji,
|
|
6875
6866
|
emojiStyle: emojiStyle
|
|
6876
6867
|
})));
|
|
@@ -6970,7 +6961,7 @@ function EmojiList() {
|
|
|
6970
6961
|
}, categories.map(function (categoryConfig, index) {
|
|
6971
6962
|
var category = categoryFromCategoryConfig(categoryConfig);
|
|
6972
6963
|
|
|
6973
|
-
if (category === Categories.RECENTLY_USED) {
|
|
6964
|
+
if (category === exports.Categories.RECENTLY_USED) {
|
|
6974
6965
|
return React.createElement(RecentlyUsed, {
|
|
6975
6966
|
key: category,
|
|
6976
6967
|
categoryConfig: categoryConfig
|
|
@@ -7411,15 +7402,15 @@ function PickerRootElement(_ref2) {
|
|
|
7411
7402
|
return React.createElement("aside", {
|
|
7412
7403
|
className: clsx('EmojiPickerReact', 'epr-main', {
|
|
7413
7404
|
'epr-search-active': searchModeActive,
|
|
7414
|
-
'epr-dark-theme': theme === Theme.DARK
|
|
7405
|
+
'epr-dark-theme': theme === exports.Theme.DARK
|
|
7415
7406
|
}),
|
|
7416
7407
|
ref: PickerMainRef
|
|
7417
7408
|
}, children);
|
|
7418
7409
|
}
|
|
7419
7410
|
|
|
7420
|
-
function
|
|
7411
|
+
function EmojiPicker(props) {
|
|
7421
7412
|
return React.createElement(ElementRefContextProvider, null, React.createElement(PickerConfigProvider, Object.assign({}, props), React.createElement(PickerMain, null, React.createElement(Header, null), React.createElement(Body, null), React.createElement(Preview, null))));
|
|
7422
7413
|
}
|
|
7423
7414
|
|
|
7424
|
-
exports.
|
|
7415
|
+
exports.EmojiPicker = EmojiPicker;
|
|
7425
7416
|
//# sourceMappingURL=emoji-picker-react.cjs.development.js.map
|