@zzish/math-rich-input 0.1.4 → 0.1.6
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/index.js +355 -250
- package/dist/math-rich-input.css +383 -384
- package/package.json +1 -3
- package/rollup.config.js +4 -4
- package/src/AccentBar.css +50 -43
- package/src/AccentBar.jsx +1007 -617
- package/src/EquationEditor.css +95 -99
- package/src/EquationEditor.jsx +416 -368
- package/src/EquationEditorModal.css +59 -68
- package/src/MathRichInput.css +30 -23
- package/src/MathRichInput.jsx +1239 -978
- package/src/SymbolButton.css +31 -31
- package/src/SymbolButton.jsx +47 -49
- package/src/Toolbar.css +20 -30
- package/src/Toolbar.jsx +177 -145
package/src/AccentBar.jsx
CHANGED
|
@@ -1,116 +1,163 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from "react";
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import "./AccentBar.css";
|
|
4
4
|
|
|
5
|
-
const DEFAULT_TOP = -1
|
|
6
|
-
const DEFAULT_LEFT = -1
|
|
7
|
-
const TOP_MARGIN = 3
|
|
5
|
+
const DEFAULT_TOP = -1;
|
|
6
|
+
const DEFAULT_LEFT = -1;
|
|
7
|
+
const TOP_MARGIN = 3;
|
|
8
8
|
|
|
9
9
|
const ACCENTS_FOR_LETTER = {
|
|
10
|
-
a:["à","á","â","ä","æ","ã","å","ā"],
|
|
11
|
-
c:["ç","ć","č"],
|
|
12
|
-
e:["è","é","ê","ë","ē","ė","ę"],
|
|
13
|
-
i:["î","ï","í","ī","į","ì"],
|
|
14
|
-
l:["ł"],
|
|
15
|
-
n:["ñ","ń"],
|
|
16
|
-
o:["ô","ö","ò","ó","œ","ø","ō","õ"],
|
|
17
|
-
s:["ß","ś","š"],
|
|
18
|
-
u:["û","ü","ù","ú","ū"],
|
|
19
|
-
y:["ÿ"],
|
|
20
|
-
"?":["¿"],
|
|
21
|
-
"!":["¡"],
|
|
22
|
-
A:["À","Á","Â","Ä","Æ","Ã","Å","Ā"],
|
|
23
|
-
C:["ç","ć","č"],
|
|
24
|
-
E:["È","É","Ê","Ë","Ē","Ė","Ę"],
|
|
25
|
-
I:["Î","Ï","Í","Ī","Į","Ì"],
|
|
26
|
-
L:["Ł"],
|
|
27
|
-
N:["Ñ","Ń"],
|
|
28
|
-
O:["Ô","Ö","Ò","Ó","Œ","Ø","Ō","Õ"],
|
|
29
|
-
S:["Ś","Š"],
|
|
30
|
-
U:["Û","Ü","Ù","Ú","Ū"],
|
|
31
|
-
Y:["Ÿ"]
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
let GLOBAL_default_accents = []
|
|
10
|
+
a: ["à", "á", "â", "ä", "æ", "ã", "å", "ā"],
|
|
11
|
+
c: ["ç", "ć", "č"],
|
|
12
|
+
e: ["è", "é", "ê", "ë", "ē", "ė", "ę"],
|
|
13
|
+
i: ["î", "ï", "í", "ī", "į", "ì"],
|
|
14
|
+
l: ["ł"],
|
|
15
|
+
n: ["ñ", "ń"],
|
|
16
|
+
o: ["ô", "ö", "ò", "ó", "œ", "ø", "ō", "õ"],
|
|
17
|
+
s: ["ß", "ś", "š"],
|
|
18
|
+
u: ["û", "ü", "ù", "ú", "ū"],
|
|
19
|
+
y: ["ÿ"],
|
|
20
|
+
"?": ["¿"],
|
|
21
|
+
"!": ["¡"],
|
|
22
|
+
A: ["À", "Á", "Â", "Ä", "Æ", "Ã", "Å", "Ā"],
|
|
23
|
+
C: ["ç", "ć", "č"],
|
|
24
|
+
E: ["È", "É", "Ê", "Ë", "Ē", "Ė", "Ę"],
|
|
25
|
+
I: ["Î", "Ï", "Í", "Ī", "Į", "Ì"],
|
|
26
|
+
L: ["Ł"],
|
|
27
|
+
N: ["Ñ", "Ń"],
|
|
28
|
+
O: ["Ô", "Ö", "Ò", "Ó", "Œ", "Ø", "Ō", "Õ"],
|
|
29
|
+
S: ["Ś", "Š"],
|
|
30
|
+
U: ["Û", "Ü", "Ù", "Ú", "Ū"],
|
|
31
|
+
Y: ["Ÿ"],
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
let GLOBAL_default_accents = [];
|
|
36
35
|
|
|
37
36
|
function addCharactersFromString(characters, string) {
|
|
38
37
|
for (let i = 0; i < string.length; i++) {
|
|
39
|
-
characters.push(string.charAt(i))
|
|
38
|
+
characters.push(string.charAt(i));
|
|
40
39
|
}
|
|
41
|
-
return characters
|
|
42
|
-
}
|
|
40
|
+
return characters;
|
|
41
|
+
}
|
|
43
42
|
|
|
44
43
|
function addCharacters(characters, start, end) {
|
|
45
44
|
for (let c = start; c <= end; c++) {
|
|
46
|
-
characters.push(String.fromCharCode(c))
|
|
45
|
+
characters.push(String.fromCharCode(c));
|
|
47
46
|
}
|
|
48
|
-
return characters
|
|
49
|
-
}
|
|
47
|
+
return characters;
|
|
48
|
+
}
|
|
50
49
|
|
|
51
50
|
function buildGreekLowerCaseLetters() {
|
|
52
|
-
let characters = []
|
|
53
|
-
addCharacters(characters,
|
|
54
|
-
return characters
|
|
55
|
-
}
|
|
51
|
+
let characters = [];
|
|
52
|
+
addCharacters(characters, 0x03b1, 0x03c9);
|
|
53
|
+
return characters;
|
|
54
|
+
}
|
|
56
55
|
|
|
57
56
|
function buildGreekCapitaLetters() {
|
|
58
|
-
let characters = []
|
|
59
|
-
addCharactersFromString(characters, "ΓΔΘΛΞΠΣΦΨψΩ∇")
|
|
60
|
-
return characters
|
|
61
|
-
}
|
|
57
|
+
let characters = [];
|
|
58
|
+
addCharactersFromString(characters, "ΓΔΘΛΞΠΣΦΨψΩ∇");
|
|
59
|
+
return characters;
|
|
60
|
+
}
|
|
62
61
|
|
|
63
62
|
function buildCommonMathSymbols() {
|
|
64
|
-
let characters = []
|
|
65
|
-
const common = [
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
63
|
+
let characters = [];
|
|
64
|
+
const common = [
|
|
65
|
+
"+",
|
|
66
|
+
"-",
|
|
67
|
+
"×",
|
|
68
|
+
"÷",
|
|
69
|
+
"=",
|
|
70
|
+
"▢",
|
|
71
|
+
"±",
|
|
72
|
+
"⋅",
|
|
73
|
+
"≠",
|
|
74
|
+
"≈",
|
|
75
|
+
"→",
|
|
76
|
+
"<",
|
|
77
|
+
">",
|
|
78
|
+
"≤",
|
|
79
|
+
"≥",
|
|
80
|
+
"√",
|
|
81
|
+
"∛",
|
|
82
|
+
"∜",
|
|
83
|
+
"²",
|
|
84
|
+
"³",
|
|
85
|
+
"⁴",
|
|
86
|
+
"∞",
|
|
87
|
+
"π",
|
|
88
|
+
"°",
|
|
89
|
+
"∠",
|
|
90
|
+
];
|
|
91
|
+
const brackets = ["〈", "〉", "⌈", "⌉", "⌊", "⌋"];
|
|
92
|
+
|
|
93
|
+
characters.push(...common);
|
|
94
|
+
characters.push(...brackets);
|
|
95
|
+
return characters;
|
|
71
96
|
}
|
|
72
97
|
|
|
73
98
|
function buildLetterMathSymbols() {
|
|
74
|
-
let characters = []
|
|
75
|
-
addCharactersFromString(characters, "ℑℜℂℕℙℚℝℤ")
|
|
76
|
-
return characters
|
|
99
|
+
let characters = [];
|
|
100
|
+
addCharactersFromString(characters, "ℑℜℂℕℙℚℝℤ");
|
|
101
|
+
return characters;
|
|
77
102
|
}
|
|
78
103
|
|
|
79
104
|
function buildFractionMathSymbols() {
|
|
80
|
-
let characters = []
|
|
81
|
-
const fractions = [
|
|
82
|
-
|
|
83
|
-
|
|
105
|
+
let characters = [];
|
|
106
|
+
const fractions = [
|
|
107
|
+
"½",
|
|
108
|
+
"⅓",
|
|
109
|
+
"⅔",
|
|
110
|
+
"¼",
|
|
111
|
+
"¾",
|
|
112
|
+
"⅕",
|
|
113
|
+
"⅖",
|
|
114
|
+
"⅗",
|
|
115
|
+
"⅘",
|
|
116
|
+
"⅙",
|
|
117
|
+
"⅚",
|
|
118
|
+
"⅐",
|
|
119
|
+
"⅛",
|
|
120
|
+
"⅜",
|
|
121
|
+
"⅝",
|
|
122
|
+
"⅞",
|
|
123
|
+
"⅑",
|
|
124
|
+
"⅒",
|
|
125
|
+
];
|
|
126
|
+
characters.push(...fractions);
|
|
127
|
+
return characters;
|
|
84
128
|
}
|
|
85
129
|
|
|
86
130
|
function buildArrowSymbols() {
|
|
87
|
-
let characters = []
|
|
88
|
-
addCharacters(characters, 0x2190,
|
|
89
|
-
return characters
|
|
131
|
+
let characters = [];
|
|
132
|
+
addCharacters(characters, 0x2190, 0x21ff);
|
|
133
|
+
return characters;
|
|
90
134
|
}
|
|
91
135
|
|
|
92
136
|
function buildAdvancedMathSymbols() {
|
|
93
|
-
let characters = []
|
|
94
|
-
addCharacters(characters, 0x2200,
|
|
95
|
-
return characters
|
|
137
|
+
let characters = [];
|
|
138
|
+
addCharacters(characters, 0x2200, 0x22ff);
|
|
139
|
+
return characters;
|
|
96
140
|
}
|
|
97
141
|
|
|
98
142
|
function buildCurrencySymbols() {
|
|
99
|
-
let characters = []
|
|
100
|
-
addCharactersFromString(characters, "$¢£€￥₹₤฿₴₭₺₪₦₱₽₩")
|
|
101
|
-
return characters
|
|
143
|
+
let characters = [];
|
|
144
|
+
addCharactersFromString(characters, "$¢£€￥₹₤฿₴₭₺₪₦₱₽₩");
|
|
145
|
+
return characters;
|
|
102
146
|
}
|
|
103
147
|
|
|
104
148
|
function buildLatinSymbols() {
|
|
105
|
-
let characters = []
|
|
106
|
-
addCharactersFromString(
|
|
107
|
-
|
|
149
|
+
let characters = [];
|
|
150
|
+
addCharactersFromString(
|
|
151
|
+
characters,
|
|
152
|
+
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
|
|
153
|
+
);
|
|
154
|
+
return characters;
|
|
108
155
|
}
|
|
109
156
|
|
|
110
157
|
function buildNumbers() {
|
|
111
|
-
let characters = []
|
|
112
|
-
addCharactersFromString(characters, "0123456789\u20dd\u20de")
|
|
113
|
-
return characters
|
|
158
|
+
let characters = [];
|
|
159
|
+
addCharactersFromString(characters, "0123456789\u20dd\u20de");
|
|
160
|
+
return characters;
|
|
114
161
|
}
|
|
115
162
|
|
|
116
163
|
// function buildRomanNumerals() {
|
|
@@ -120,652 +167,995 @@ function buildNumbers() {
|
|
|
120
167
|
// }
|
|
121
168
|
|
|
122
169
|
function buildSymbols() {
|
|
123
|
-
let characters = []
|
|
124
|
-
addCharactersFromString(characters, "!@#%^&*|")
|
|
125
|
-
return characters
|
|
170
|
+
let characters = [];
|
|
171
|
+
addCharactersFromString(characters, "!@#%^&*|");
|
|
172
|
+
return characters;
|
|
126
173
|
}
|
|
127
174
|
|
|
128
175
|
function buildEmoticonsSmileys() {
|
|
129
|
-
let characters = []
|
|
130
|
-
characters.push(
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
176
|
+
let characters = [];
|
|
177
|
+
characters.push(
|
|
178
|
+
...[
|
|
179
|
+
"😀",
|
|
180
|
+
"😀",
|
|
181
|
+
"😁",
|
|
182
|
+
"😆",
|
|
183
|
+
"😅",
|
|
184
|
+
"😂",
|
|
185
|
+
"🤣",
|
|
186
|
+
"😊",
|
|
187
|
+
"😇",
|
|
188
|
+
"🙂",
|
|
189
|
+
"🙃",
|
|
190
|
+
"😉",
|
|
191
|
+
"😍",
|
|
192
|
+
"🥰",
|
|
193
|
+
"😘",
|
|
194
|
+
"😜",
|
|
195
|
+
"🤪",
|
|
196
|
+
"🤨",
|
|
197
|
+
"🤓",
|
|
198
|
+
"😎",
|
|
199
|
+
"🤩",
|
|
200
|
+
"🥳",
|
|
201
|
+
"🙁",
|
|
202
|
+
"🥺",
|
|
203
|
+
"😢",
|
|
204
|
+
"😭",
|
|
205
|
+
"😤",
|
|
206
|
+
"🤯",
|
|
207
|
+
"😳",
|
|
208
|
+
"🥶",
|
|
209
|
+
"😱",
|
|
210
|
+
"🤗",
|
|
211
|
+
"🤔",
|
|
212
|
+
"🤫",
|
|
213
|
+
"🤥",
|
|
214
|
+
"😶",
|
|
215
|
+
"😐",
|
|
216
|
+
"😴",
|
|
217
|
+
"🤐",
|
|
218
|
+
"🥴",
|
|
219
|
+
"🤠",
|
|
220
|
+
"😈",
|
|
221
|
+
"👹",
|
|
222
|
+
"👺",
|
|
223
|
+
"🤡",
|
|
224
|
+
"💩",
|
|
225
|
+
"👻",
|
|
226
|
+
"💀",
|
|
227
|
+
"☠️",
|
|
228
|
+
"👽",
|
|
229
|
+
"👾",
|
|
230
|
+
"🤖",
|
|
231
|
+
"🎃",
|
|
232
|
+
"😺",
|
|
233
|
+
"😸",
|
|
234
|
+
"😹",
|
|
235
|
+
"😻",
|
|
236
|
+
"😼",
|
|
237
|
+
"😽",
|
|
238
|
+
"🙀",
|
|
239
|
+
"😿",
|
|
240
|
+
"😾",
|
|
241
|
+
]
|
|
242
|
+
);
|
|
243
|
+
return characters;
|
|
135
244
|
}
|
|
136
245
|
|
|
137
246
|
function buildEmoticonsPeople() {
|
|
138
|
-
let characters = []
|
|
139
|
-
characters.push(
|
|
140
|
-
|
|
141
|
-
|
|
247
|
+
let characters = [];
|
|
248
|
+
characters.push(
|
|
249
|
+
...["✍️", "👏", "🤝", "👍", "👎", "🤞", "👆", "👇", "✋", "💪", "🙏"]
|
|
250
|
+
);
|
|
251
|
+
characters.push(
|
|
252
|
+
...[
|
|
253
|
+
"👂",
|
|
254
|
+
"👃",
|
|
255
|
+
"🧠",
|
|
256
|
+
"👁",
|
|
257
|
+
"👶",
|
|
258
|
+
"👧",
|
|
259
|
+
"👦",
|
|
260
|
+
"👩",
|
|
261
|
+
"👨",
|
|
262
|
+
"👳♂️",
|
|
263
|
+
"🧕",
|
|
264
|
+
"🙋♀️",
|
|
265
|
+
"🙋♂️",
|
|
266
|
+
"🙎♀️",
|
|
267
|
+
"🙎♂️",
|
|
268
|
+
"👩🎓",
|
|
269
|
+
"👨🎓",
|
|
270
|
+
"👩💻",
|
|
271
|
+
"👨💻",
|
|
272
|
+
"👩🏫",
|
|
273
|
+
"👨🏫",
|
|
274
|
+
]
|
|
275
|
+
);
|
|
276
|
+
return characters;
|
|
142
277
|
}
|
|
143
278
|
|
|
144
279
|
function buildEmoticonsAnimals() {
|
|
145
|
-
let characters = []
|
|
146
|
-
characters.push(
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
280
|
+
let characters = [];
|
|
281
|
+
characters.push(
|
|
282
|
+
...[
|
|
283
|
+
"🐶",
|
|
284
|
+
"🐱",
|
|
285
|
+
"🐭",
|
|
286
|
+
"🐹",
|
|
287
|
+
"🐰",
|
|
288
|
+
"🦊",
|
|
289
|
+
"🐻",
|
|
290
|
+
"🐼",
|
|
291
|
+
"🐨",
|
|
292
|
+
"🐯",
|
|
293
|
+
"🦁",
|
|
294
|
+
"🐮",
|
|
295
|
+
"🐷",
|
|
296
|
+
"🐽",
|
|
297
|
+
"🐸",
|
|
298
|
+
"🐵",
|
|
299
|
+
"🙈",
|
|
300
|
+
"🙉",
|
|
301
|
+
"🙊",
|
|
302
|
+
"🐔",
|
|
303
|
+
"🐧",
|
|
304
|
+
"🐦",
|
|
305
|
+
"🐤",
|
|
306
|
+
"🐣",
|
|
307
|
+
"🐥",
|
|
308
|
+
"🦆",
|
|
309
|
+
"🦅",
|
|
310
|
+
"🦉",
|
|
311
|
+
"🦇",
|
|
312
|
+
"🐺",
|
|
313
|
+
"🐗",
|
|
314
|
+
"🐴",
|
|
315
|
+
"🦄",
|
|
316
|
+
"🐝",
|
|
317
|
+
"🐛",
|
|
318
|
+
"🦋",
|
|
319
|
+
"🐌",
|
|
320
|
+
"🐞",
|
|
321
|
+
"🐜",
|
|
322
|
+
"🦟",
|
|
323
|
+
"🦗",
|
|
324
|
+
"🕷",
|
|
325
|
+
"🕸",
|
|
326
|
+
"🦂",
|
|
327
|
+
"🐢",
|
|
328
|
+
"🐍",
|
|
329
|
+
"🦎",
|
|
330
|
+
"🦖",
|
|
331
|
+
"🦕",
|
|
332
|
+
"🐙",
|
|
333
|
+
"🦑",
|
|
334
|
+
"🦐",
|
|
335
|
+
"🦞",
|
|
336
|
+
"🦀",
|
|
337
|
+
"🐡",
|
|
338
|
+
"🐠",
|
|
339
|
+
"🐟",
|
|
340
|
+
"🐬",
|
|
341
|
+
"🐳",
|
|
342
|
+
"🐋",
|
|
343
|
+
"🦈",
|
|
344
|
+
"🐊",
|
|
345
|
+
"🦍",
|
|
346
|
+
"🐘",
|
|
347
|
+
"🐅",
|
|
348
|
+
"🐆",
|
|
349
|
+
"🦓",
|
|
350
|
+
"🦛",
|
|
351
|
+
"🦏",
|
|
352
|
+
"🐪",
|
|
353
|
+
"🦒",
|
|
354
|
+
"🦘",
|
|
355
|
+
]
|
|
356
|
+
);
|
|
357
|
+
return characters;
|
|
152
358
|
}
|
|
153
359
|
|
|
154
360
|
function buildEmoticonsFood() {
|
|
155
|
-
let characters = []
|
|
156
|
-
characters.push(
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
361
|
+
let characters = [];
|
|
362
|
+
characters.push(
|
|
363
|
+
...[
|
|
364
|
+
"🍄",
|
|
365
|
+
"🌹",
|
|
366
|
+
"🌸",
|
|
367
|
+
"🌼",
|
|
368
|
+
"🌻",
|
|
369
|
+
"🌞",
|
|
370
|
+
"🌙",
|
|
371
|
+
"🌎",
|
|
372
|
+
"⭐️",
|
|
373
|
+
"🌟",
|
|
374
|
+
"✨",
|
|
375
|
+
"🍏",
|
|
376
|
+
"🍎",
|
|
377
|
+
"🍐",
|
|
378
|
+
"🍊",
|
|
379
|
+
"🍋",
|
|
380
|
+
"🍌",
|
|
381
|
+
"🍉",
|
|
382
|
+
"🍇",
|
|
383
|
+
"🍓",
|
|
384
|
+
"🍈",
|
|
385
|
+
"🍒",
|
|
386
|
+
"🍑",
|
|
387
|
+
"🥭",
|
|
388
|
+
"🍍",
|
|
389
|
+
"🥥",
|
|
390
|
+
"🥝",
|
|
391
|
+
"🍅",
|
|
392
|
+
"🥚",
|
|
393
|
+
"🧀",
|
|
394
|
+
"🥖",
|
|
395
|
+
"🥐",
|
|
396
|
+
"🍔",
|
|
397
|
+
"🍟",
|
|
398
|
+
"🍕",
|
|
399
|
+
"🥪",
|
|
400
|
+
"🍦",
|
|
401
|
+
"🥧",
|
|
402
|
+
"🧁",
|
|
403
|
+
"🍰",
|
|
404
|
+
"🍭",
|
|
405
|
+
"🍬",
|
|
406
|
+
"🍫",
|
|
407
|
+
"🍿",
|
|
408
|
+
"🍩",
|
|
409
|
+
"🍪",
|
|
410
|
+
"🥤",
|
|
411
|
+
"🥛",
|
|
412
|
+
]
|
|
413
|
+
);
|
|
414
|
+
return characters;
|
|
160
415
|
}
|
|
161
416
|
|
|
162
417
|
function buildEmoticonsGames() {
|
|
163
|
-
let characters = []
|
|
164
|
-
characters.push(
|
|
165
|
-
|
|
166
|
-
|
|
418
|
+
let characters = [];
|
|
419
|
+
characters.push(
|
|
420
|
+
...[
|
|
421
|
+
"⚽️",
|
|
422
|
+
"🏀",
|
|
423
|
+
"🏈",
|
|
424
|
+
"⚾️",
|
|
425
|
+
"🥎",
|
|
426
|
+
"🎾",
|
|
427
|
+
"🏐",
|
|
428
|
+
"🏉",
|
|
429
|
+
"🥏",
|
|
430
|
+
"🎱",
|
|
431
|
+
"🏏",
|
|
432
|
+
"🏆",
|
|
433
|
+
"🥇",
|
|
434
|
+
"🥈",
|
|
435
|
+
"🥉",
|
|
436
|
+
"🏅",
|
|
437
|
+
"🎖",
|
|
438
|
+
"🎲",
|
|
439
|
+
"🎨",
|
|
440
|
+
"🎬",
|
|
441
|
+
"🎤",
|
|
442
|
+
"🎹",
|
|
443
|
+
"🎷",
|
|
444
|
+
]
|
|
445
|
+
);
|
|
446
|
+
return characters;
|
|
167
447
|
}
|
|
168
448
|
|
|
169
449
|
function buildEmoticonsTransport() {
|
|
170
|
-
let characters = []
|
|
171
|
-
characters.push(
|
|
172
|
-
|
|
173
|
-
|
|
450
|
+
let characters = [];
|
|
451
|
+
characters.push(
|
|
452
|
+
...[
|
|
453
|
+
"🚗",
|
|
454
|
+
"🚕",
|
|
455
|
+
"🚙",
|
|
456
|
+
"🚌",
|
|
457
|
+
"🏎",
|
|
458
|
+
"🚓",
|
|
459
|
+
"🚑",
|
|
460
|
+
"🚒",
|
|
461
|
+
"🚐",
|
|
462
|
+
"🚚",
|
|
463
|
+
"🚜",
|
|
464
|
+
"🛴",
|
|
465
|
+
"🚲",
|
|
466
|
+
"🛵",
|
|
467
|
+
"🏍",
|
|
468
|
+
"🚂",
|
|
469
|
+
"🚋",
|
|
470
|
+
"✈️",
|
|
471
|
+
"🛸",
|
|
472
|
+
"🚁",
|
|
473
|
+
"🛶",
|
|
474
|
+
"⛵️",
|
|
475
|
+
"🚤",
|
|
476
|
+
]
|
|
477
|
+
);
|
|
478
|
+
return characters;
|
|
174
479
|
}
|
|
175
480
|
|
|
176
481
|
function buildEmoticonsMisc() {
|
|
177
|
-
let characters = []
|
|
178
|
-
characters.push(
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
482
|
+
let characters = [];
|
|
483
|
+
characters.push(
|
|
484
|
+
...[
|
|
485
|
+
"💰",
|
|
486
|
+
"💎",
|
|
487
|
+
"💣",
|
|
488
|
+
"🧨",
|
|
489
|
+
"⚗️",
|
|
490
|
+
"🔭",
|
|
491
|
+
"🔬",
|
|
492
|
+
"💉",
|
|
493
|
+
"🧬",
|
|
494
|
+
"🦠",
|
|
495
|
+
"🧫",
|
|
496
|
+
"🧪",
|
|
497
|
+
"🌡",
|
|
498
|
+
"🔑",
|
|
499
|
+
"🗝",
|
|
500
|
+
"🎁",
|
|
501
|
+
"🎈",
|
|
502
|
+
"📒",
|
|
503
|
+
"📗",
|
|
504
|
+
"📘",
|
|
505
|
+
"📙",
|
|
506
|
+
"📚",
|
|
507
|
+
"📖",
|
|
508
|
+
"📊",
|
|
509
|
+
"📈",
|
|
510
|
+
"🧮",
|
|
511
|
+
"❤️",
|
|
512
|
+
"🧡",
|
|
513
|
+
"💛",
|
|
514
|
+
"💚",
|
|
515
|
+
"💙",
|
|
516
|
+
"💜",
|
|
517
|
+
"🖤",
|
|
518
|
+
"⚪️",
|
|
519
|
+
"⚫️",
|
|
520
|
+
"🔴",
|
|
521
|
+
"🔵",
|
|
522
|
+
"🔺",
|
|
523
|
+
"🔻",
|
|
524
|
+
"🔸",
|
|
525
|
+
"🔹",
|
|
526
|
+
"🔶",
|
|
527
|
+
"🔷",
|
|
528
|
+
"♠️",
|
|
529
|
+
"♣️",
|
|
530
|
+
"♥️",
|
|
531
|
+
"♦️",
|
|
532
|
+
]
|
|
533
|
+
);
|
|
534
|
+
return characters;
|
|
182
535
|
}
|
|
183
536
|
|
|
184
|
-
const GREEK_CAPITAL_LETTERS = buildGreekCapitaLetters()
|
|
185
|
-
const GREEK_LOWER_CASE_LETTERS = buildGreekLowerCaseLetters()
|
|
537
|
+
const GREEK_CAPITAL_LETTERS = buildGreekCapitaLetters();
|
|
538
|
+
const GREEK_LOWER_CASE_LETTERS = buildGreekLowerCaseLetters();
|
|
186
539
|
|
|
187
|
-
const COMMON_MATH_SYMBOLS = buildCommonMathSymbols()
|
|
188
|
-
const LETTER_MATH_SYMBOLS = buildLetterMathSymbols()
|
|
189
|
-
const FRACTION_MATH_SYMBOLS = buildFractionMathSymbols()
|
|
190
|
-
const ADVANCE_MATH_SYMBOLS = buildAdvancedMathSymbols()
|
|
191
|
-
const ARROW_SYBOLS = buildArrowSymbols()
|
|
540
|
+
const COMMON_MATH_SYMBOLS = buildCommonMathSymbols();
|
|
541
|
+
const LETTER_MATH_SYMBOLS = buildLetterMathSymbols();
|
|
542
|
+
const FRACTION_MATH_SYMBOLS = buildFractionMathSymbols();
|
|
543
|
+
const ADVANCE_MATH_SYMBOLS = buildAdvancedMathSymbols();
|
|
544
|
+
const ARROW_SYBOLS = buildArrowSymbols();
|
|
192
545
|
|
|
193
|
-
const CURRENCY_SYMBOLS = buildCurrencySymbols()
|
|
194
|
-
const LATIN_LETTERS = buildLatinSymbols()
|
|
195
|
-
const NUMBER_SYMBOLS = buildNumbers()
|
|
196
|
-
const COMMON_SYMBOLS = buildSymbols()
|
|
546
|
+
const CURRENCY_SYMBOLS = buildCurrencySymbols();
|
|
547
|
+
const LATIN_LETTERS = buildLatinSymbols();
|
|
548
|
+
const NUMBER_SYMBOLS = buildNumbers();
|
|
549
|
+
const COMMON_SYMBOLS = buildSymbols();
|
|
197
550
|
// const ROMAN_NUMERALS = buildRomanNumerals()
|
|
198
551
|
|
|
199
|
-
const EMOTICONS_SMILEYS = buildEmoticonsSmileys()
|
|
200
|
-
const EMOTICONS_PEOPLE = buildEmoticonsPeople()
|
|
201
|
-
const EMOTICONS_ANIMALS = buildEmoticonsAnimals()
|
|
202
|
-
const EMOTICONS_FOOD = buildEmoticonsFood()
|
|
203
|
-
const EMOTICONS_GAMES = buildEmoticonsGames()
|
|
204
|
-
const EMOTICONS_TRANSPORT = buildEmoticonsTransport()
|
|
205
|
-
const EMOTICONS_MISC = buildEmoticonsMisc()
|
|
206
|
-
|
|
207
|
-
const TAB_NAMES = ["Accents", "Greek", "Math", "Emoticons", "More"]
|
|
208
|
-
let GLOBAL_last_selected_tab = TAB_NAMES[0]
|
|
552
|
+
const EMOTICONS_SMILEYS = buildEmoticonsSmileys();
|
|
553
|
+
const EMOTICONS_PEOPLE = buildEmoticonsPeople();
|
|
554
|
+
const EMOTICONS_ANIMALS = buildEmoticonsAnimals();
|
|
555
|
+
const EMOTICONS_FOOD = buildEmoticonsFood();
|
|
556
|
+
const EMOTICONS_GAMES = buildEmoticonsGames();
|
|
557
|
+
const EMOTICONS_TRANSPORT = buildEmoticonsTransport();
|
|
558
|
+
const EMOTICONS_MISC = buildEmoticonsMisc();
|
|
209
559
|
|
|
560
|
+
const TAB_NAMES = ["Accents", "Greek", "Math", "Emoticons", "More"];
|
|
561
|
+
let GLOBAL_last_selected_tab = TAB_NAMES[0];
|
|
210
562
|
|
|
211
563
|
export default class AccentBar extends React.Component {
|
|
212
564
|
constructor(props) {
|
|
213
565
|
super(props);
|
|
214
566
|
this.state = {
|
|
215
567
|
selectedTab: GLOBAL_last_selected_tab,
|
|
216
|
-
top:DEFAULT_TOP,
|
|
217
|
-
left:DEFAULT_LEFT,
|
|
218
|
-
}
|
|
219
|
-
this.suppliedClickHandler = null
|
|
220
|
-
this.handleButtonClick = this.handleButtonClick.bind(this)
|
|
221
|
-
this.letterForAccents = null
|
|
222
|
-
this.shouldUpdatePosition = true
|
|
223
|
-
this.shouldUpdateReplaceCharacters = true
|
|
224
|
-
this.isFullyMounted = false
|
|
225
|
-
|
|
226
|
-
if (GLOBAL_default_accents.length === 0)
|
|
568
|
+
top: DEFAULT_TOP,
|
|
569
|
+
left: DEFAULT_LEFT,
|
|
570
|
+
};
|
|
571
|
+
this.suppliedClickHandler = null;
|
|
572
|
+
this.handleButtonClick = this.handleButtonClick.bind(this);
|
|
573
|
+
this.letterForAccents = null;
|
|
574
|
+
this.shouldUpdatePosition = true;
|
|
575
|
+
this.shouldUpdateReplaceCharacters = true;
|
|
576
|
+
this.isFullyMounted = false;
|
|
577
|
+
|
|
578
|
+
if (GLOBAL_default_accents.length === 0)
|
|
227
579
|
for (let key in ACCENTS_FOR_LETTER) {
|
|
228
|
-
GLOBAL_default_accents.push(...ACCENTS_FOR_LETTER[key])
|
|
229
|
-
|
|
580
|
+
GLOBAL_default_accents.push(...ACCENTS_FOR_LETTER[key]);
|
|
581
|
+
}
|
|
230
582
|
}
|
|
231
583
|
|
|
232
|
-
handleButtonClick = (e, character, insert=false) => {
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
// console.log(insert)
|
|
237
|
-
if (insert)
|
|
238
|
-
this.suppliedClickHandler(e, null, character)
|
|
239
|
-
else
|
|
240
|
-
this.suppliedClickHandler(e, this.letterForAccents, character)
|
|
241
|
-
}
|
|
584
|
+
handleButtonClick = (e, character, insert = false) => {
|
|
585
|
+
if (insert) this.suppliedClickHandler(e, null, character);
|
|
586
|
+
else this.suppliedClickHandler(e, this.letterForAccents, character);
|
|
587
|
+
};
|
|
242
588
|
|
|
243
589
|
componentDidMount() {
|
|
244
|
-
|
|
245
590
|
// We render once to find out the component's preferred size and then render again to update it
|
|
246
591
|
|
|
247
592
|
if (this.shouldUpdatePosition) {
|
|
248
593
|
// Lets position the accent bar below the input field and left (compact mode) or right aligned
|
|
249
|
-
let thisBar = this.accentBar
|
|
250
|
-
let node = thisBar.parentNode
|
|
251
|
-
while
|
|
252
|
-
node
|
|
594
|
+
let thisBar = this.accentBar;
|
|
595
|
+
let node = thisBar.parentNode;
|
|
596
|
+
while (
|
|
597
|
+
node !== null &&
|
|
598
|
+
!node.classList.contains("MathRichInput-Container")
|
|
599
|
+
)
|
|
600
|
+
node = node.parentNode;
|
|
253
601
|
|
|
254
602
|
if (node === null) {
|
|
255
|
-
console.error(
|
|
256
|
-
|
|
603
|
+
console.error(
|
|
604
|
+
"Could not find ancestor MathRichInput-Container find parent"
|
|
605
|
+
);
|
|
606
|
+
return;
|
|
257
607
|
}
|
|
258
608
|
|
|
259
|
-
let inputBounds = node.getBoundingClientRect()
|
|
260
|
-
let thisBounds = thisBar.getBoundingClientRect()
|
|
609
|
+
let inputBounds = node.getBoundingClientRect();
|
|
610
|
+
let thisBounds = thisBar.getBoundingClientRect();
|
|
261
611
|
|
|
262
|
-
this.shouldUpdatePosition = false
|
|
612
|
+
this.shouldUpdatePosition = false;
|
|
263
613
|
|
|
264
614
|
// Vertically align below input field
|
|
265
|
-
let top = inputBounds.bottom + TOP_MARGIN
|
|
615
|
+
let top = inputBounds.bottom + TOP_MARGIN;
|
|
266
616
|
|
|
267
617
|
// Horizontally align to left or right of input field
|
|
268
|
-
let left = inputBounds.right - thisBounds.width // right align
|
|
269
|
-
if (this.props.compactMode)
|
|
270
|
-
left = inputBounds.left // left align
|
|
618
|
+
let left = inputBounds.right - thisBounds.width; // right align
|
|
619
|
+
if (this.props.compactMode) left = inputBounds.left; // left align
|
|
271
620
|
|
|
272
621
|
// Make sure it is on screen horizontally
|
|
273
622
|
if (thisBounds.width > inputBounds.width)
|
|
274
|
-
left = inputBounds.left - (thisBounds.width - inputBounds.width)/2
|
|
623
|
+
left = inputBounds.left - (thisBounds.width - inputBounds.width) / 2;
|
|
275
624
|
|
|
276
625
|
if (left + thisBounds.width > window.innerWidth)
|
|
277
|
-
left = window.innerWidth - thisBounds.width - 2
|
|
626
|
+
left = window.innerWidth - thisBounds.width - 2;
|
|
278
627
|
|
|
279
|
-
if (left < 0)
|
|
280
|
-
left = 0
|
|
628
|
+
if (left < 0) left = 0;
|
|
281
629
|
|
|
282
|
-
this.setState({left, top})
|
|
630
|
+
this.setState({ left, top });
|
|
283
631
|
} else {
|
|
284
|
-
this.shouldUpdatePosition = true
|
|
632
|
+
this.shouldUpdatePosition = true;
|
|
285
633
|
}
|
|
286
634
|
}
|
|
287
635
|
|
|
288
636
|
handleSelectTab = (tab) => {
|
|
289
|
-
GLOBAL_last_selected_tab = tab
|
|
290
|
-
this.setState({selectedTab:tab})
|
|
291
|
-
}
|
|
637
|
+
GLOBAL_last_selected_tab = tab;
|
|
638
|
+
this.setState({ selectedTab: tab });
|
|
639
|
+
};
|
|
292
640
|
|
|
293
|
-
componentDidUpdate =(prevProps) => {
|
|
641
|
+
componentDidUpdate = (prevProps) => {
|
|
294
642
|
// console.log("componentDidUpdate")
|
|
295
|
-
let accentKey = this.props.keyPressed
|
|
296
|
-
if (
|
|
643
|
+
let accentKey = this.props.keyPressed;
|
|
644
|
+
if (
|
|
645
|
+
accentKey === "Backspace" ||
|
|
646
|
+
accentKey === "ArrowLeft" ||
|
|
647
|
+
accentKey === "ArrowRight"
|
|
648
|
+
) {
|
|
297
649
|
if (this.shouldUpdateReplaceCharacters) {
|
|
298
|
-
this.shouldUpdateReplaceCharacters = false
|
|
299
|
-
let thisState = this.state
|
|
650
|
+
this.shouldUpdateReplaceCharacters = false;
|
|
651
|
+
let thisState = this.state;
|
|
300
652
|
setTimeout(() => {
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
100)
|
|
653
|
+
// console.log("Focing update")
|
|
654
|
+
this.setState(thisState);
|
|
655
|
+
}, 100);
|
|
305
656
|
} else {
|
|
306
|
-
this.shouldUpdateReplaceCharacters = true
|
|
657
|
+
this.shouldUpdateReplaceCharacters = true;
|
|
307
658
|
}
|
|
308
659
|
}
|
|
309
|
-
}
|
|
660
|
+
};
|
|
310
661
|
|
|
311
662
|
render() {
|
|
312
|
-
|
|
313
|
-
this.suppliedClickHandler = this.props.onButtonClick
|
|
663
|
+
this.suppliedClickHandler = this.props.onButtonClick;
|
|
314
664
|
|
|
315
|
-
let compactMode = false
|
|
665
|
+
let compactMode = false;
|
|
316
666
|
if (this.props.compactMode !== null && this.props.compactMode !== undefined)
|
|
317
|
-
compactMode = this.props.compactMode
|
|
667
|
+
compactMode = this.props.compactMode;
|
|
318
668
|
|
|
319
669
|
// Get the right accent letter for the replace functionality
|
|
320
|
-
let allAccents = GLOBAL_default_accents
|
|
321
|
-
|
|
322
|
-
if (!this.isFullyMounted)
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
670
|
+
let allAccents = GLOBAL_default_accents;
|
|
671
|
+
let accentKey = this.props.keyPressed;
|
|
672
|
+
if (!this.isFullyMounted) accentKey = this.props.fetchAccentLetter();
|
|
673
|
+
else if (
|
|
674
|
+
(accentKey === "Backspace" ||
|
|
675
|
+
accentKey === "ArrowLeft" ||
|
|
676
|
+
accentKey === "ArrowRight") &&
|
|
677
|
+
!this.shouldUpdateReplaceCharacters
|
|
678
|
+
)
|
|
679
|
+
// Yes, this should indeed be a NOT
|
|
680
|
+
accentKey = this.props.fetchAccentLetter();
|
|
327
681
|
|
|
328
682
|
// console.log("Accent key:"+accentKey)
|
|
329
683
|
|
|
330
|
-
let quickAccents = ACCENTS_FOR_LETTER[accentKey]
|
|
331
|
-
this.letterForAccents = accentKey
|
|
332
|
-
if (quickAccents === null || quickAccents === undefined)
|
|
333
|
-
quickAccents = []
|
|
684
|
+
let quickAccents = ACCENTS_FOR_LETTER[accentKey];
|
|
685
|
+
this.letterForAccents = accentKey;
|
|
686
|
+
if (quickAccents === null || quickAccents === undefined) quickAccents = [];
|
|
334
687
|
|
|
335
688
|
// Set className
|
|
336
|
-
let className= compactMode ?
|
|
689
|
+
let className = compactMode ? "AccentBar-compact" : "AccentBar";
|
|
337
690
|
if (this.props.className)
|
|
338
|
-
className = className + " " + this.props.className
|
|
691
|
+
className = className + " " + this.props.className;
|
|
339
692
|
|
|
340
693
|
// Set up the tranlation to place the accent bar where we want it
|
|
341
|
-
let style = {...this.props.style}
|
|
694
|
+
let style = { ...this.props.style };
|
|
342
695
|
if (this.state.left !== DEFAULT_LEFT || this.state.top !== DEFAULT_TOP) {
|
|
343
|
-
style.left = this.state.left + "px"
|
|
344
|
-
style.top = this.state.top + "px"
|
|
696
|
+
style.left = this.state.left + "px";
|
|
697
|
+
style.top = this.state.top + "px";
|
|
345
698
|
}
|
|
346
699
|
|
|
347
|
-
return
|
|
700
|
+
return (
|
|
348
701
|
<div
|
|
349
|
-
className={className}
|
|
702
|
+
className={className}
|
|
350
703
|
style={style}
|
|
351
|
-
ref={(r) => this.accentBar = r}
|
|
704
|
+
ref={(r) => (this.accentBar = r)}
|
|
352
705
|
onMouseDown={(e) => e.preventDefault()}
|
|
353
706
|
onMouseUp={(e) => e.preventDefault()}
|
|
354
707
|
onClick={(e) => e.preventDefault()}
|
|
355
708
|
>
|
|
356
|
-
|
|
357
|
-
{
|
|
358
|
-
{compactMode &&
|
|
709
|
+
{/* Compact mode */}
|
|
710
|
+
{compactMode && (
|
|
359
711
|
<div>
|
|
360
|
-
{
|
|
361
|
-
return (
|
|
712
|
+
{quickAccents.map((character, index) => {
|
|
713
|
+
return (
|
|
362
714
|
<button
|
|
363
715
|
className="AccentBar-button AB-narrow AB-compact"
|
|
364
|
-
key={"accent-button-"+index}
|
|
365
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
366
|
-
onMouseUp={(e) => this.handleButtonClick(e,character)}
|
|
367
|
-
onClick={(e) => e.preventDefault()}
|
|
368
|
-
>
|
|
369
|
-
{character}
|
|
370
|
-
</button>
|
|
371
|
-
)
|
|
372
|
-
})
|
|
373
|
-
}
|
|
374
|
-
</div>
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
{ /* Normal mode */}
|
|
378
|
-
{!compactMode &&
|
|
379
|
-
<div>
|
|
380
|
-
|
|
381
|
-
<div className="tabBar">
|
|
382
|
-
{ TAB_NAMES.map((tab, index) => {
|
|
383
|
-
return (
|
|
384
|
-
<span key={"tabBar-"+tab}>
|
|
385
|
-
{ this.state.selectedTab === tab
|
|
386
|
-
? <span className="tab-selected" selected={true}>{tab}</span>
|
|
387
|
-
: <span className="tab"
|
|
388
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
389
|
-
onMouseUp={(e) => e.preventDefault()}
|
|
390
|
-
onClick={(e) => this.handleSelectTab(tab)}
|
|
391
|
-
>{tab}</span>
|
|
392
|
-
} </span>
|
|
393
|
-
)})
|
|
394
|
-
}
|
|
395
|
-
</div>
|
|
396
|
-
|
|
397
|
-
<div className="AccentBar-outerContainer">
|
|
398
|
-
<div className="AccentBar-innerContainer">
|
|
399
|
-
|
|
400
|
-
{ /* Accents tab */}
|
|
401
|
-
{this.state.selectedTab === "Accents" &&
|
|
402
|
-
<div className="tabArea">
|
|
403
|
-
{quickAccents.length > -1 &&
|
|
404
|
-
<div className="replace-section">
|
|
405
|
-
<div className="section-label">
|
|
406
|
-
Replace
|
|
407
|
-
</div>
|
|
408
|
-
{quickAccents.length === 0 &&
|
|
409
|
-
<div className="type-a-letter">Type a vowel to show replacements</div>
|
|
410
|
-
|
|
411
|
-
}
|
|
412
|
-
{ quickAccents.map((character, index) => {
|
|
413
|
-
return (
|
|
414
|
-
<button
|
|
415
|
-
className="AccentBar-button AB-narrow"
|
|
416
|
-
key={"accent-button-"+index}
|
|
417
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
418
|
-
onMouseUp={(e) => this.handleButtonClick(e,character)}
|
|
419
|
-
onClick={(e) => e.preventDefault()}
|
|
420
|
-
>
|
|
421
|
-
{character}
|
|
422
|
-
</button>
|
|
423
|
-
)
|
|
424
|
-
})
|
|
425
|
-
}
|
|
426
|
-
</div>
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
<div className="section-label">
|
|
430
|
-
Insert
|
|
431
|
-
</div>
|
|
432
|
-
{ allAccents.map((character, index) => {
|
|
433
|
-
return (
|
|
434
|
-
<button
|
|
435
|
-
className="AccentBar-button AB-narrow"
|
|
436
|
-
key={"accent-button-"+index}
|
|
437
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
438
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
439
|
-
onClick={(e) => e.preventDefault()}
|
|
440
|
-
>
|
|
441
|
-
{character}
|
|
442
|
-
</button>
|
|
443
|
-
)})
|
|
444
|
-
}
|
|
445
|
-
</div>
|
|
446
|
-
}
|
|
447
|
-
|
|
448
|
-
{ /* Greek tab */}
|
|
449
|
-
{ this.state.selectedTab === "Greek" &&
|
|
450
|
-
<div className="tabArea">
|
|
451
|
-
<div className="section-label">
|
|
452
|
-
Lower case
|
|
453
|
-
</div>
|
|
454
|
-
{ GREEK_LOWER_CASE_LETTERS.map((character, index) => {
|
|
455
|
-
return (
|
|
456
|
-
<button
|
|
457
|
-
className="AccentBar-button AB-narrow"
|
|
458
|
-
key={"accent-button-"+index}
|
|
459
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
460
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
461
|
-
onClick={(e) => e.preventDefault()}
|
|
462
|
-
>
|
|
463
|
-
{character}
|
|
464
|
-
</button>
|
|
465
|
-
)})
|
|
466
|
-
}
|
|
467
|
-
<div className="section-label">
|
|
468
|
-
Capitals
|
|
469
|
-
</div>
|
|
470
|
-
{ GREEK_CAPITAL_LETTERS.map((character, index) => {
|
|
471
|
-
return (
|
|
472
|
-
<button
|
|
473
|
-
className="AccentBar-button AB-narrow"
|
|
474
|
-
key={"accent-button-"+index}
|
|
475
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
476
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
477
|
-
onClick={(e) => e.preventDefault()}
|
|
478
|
-
>
|
|
479
|
-
{character}
|
|
480
|
-
</button>
|
|
481
|
-
)})
|
|
482
|
-
}
|
|
483
|
-
</div>
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
{ /* Math tab */}
|
|
487
|
-
{ this.state.selectedTab === "Math" &&
|
|
488
|
-
<div className="tabArea">
|
|
489
|
-
<div className="section-label">
|
|
490
|
-
Common
|
|
491
|
-
</div>
|
|
492
|
-
{ COMMON_MATH_SYMBOLS.map((character, index) => {
|
|
493
|
-
return (
|
|
494
|
-
<button
|
|
495
|
-
className="AccentBar-button AB-narrow"
|
|
496
|
-
key={"accent-button-"+index}
|
|
716
|
+
key={"accent-button-" + index}
|
|
497
717
|
onMouseDown={(e) => e.preventDefault()}
|
|
498
|
-
onMouseUp={(e) => this.handleButtonClick(e, character
|
|
718
|
+
onMouseUp={(e) => this.handleButtonClick(e, character)}
|
|
499
719
|
onClick={(e) => e.preventDefault()}
|
|
500
720
|
>
|
|
501
|
-
|
|
502
|
-
</button>
|
|
503
|
-
)
|
|
721
|
+
{character}
|
|
722
|
+
</button>
|
|
723
|
+
);
|
|
504
724
|
})}
|
|
505
|
-
<div className="section-label">
|
|
506
|
-
Fractions
|
|
507
|
-
</div>
|
|
508
|
-
{ FRACTION_MATH_SYMBOLS.map((character, index) => {
|
|
509
|
-
return (
|
|
510
|
-
<button
|
|
511
|
-
className="AccentBar-button AB-narrow"
|
|
512
|
-
key={"accent-button-"+index}
|
|
513
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
514
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
515
|
-
onClick={(e) => e.preventDefault()}
|
|
516
|
-
>
|
|
517
|
-
{character}
|
|
518
|
-
</button>
|
|
519
|
-
)
|
|
520
|
-
})}
|
|
521
|
-
<div className="section-label">
|
|
522
|
-
Letters
|
|
523
|
-
</div>
|
|
524
|
-
{ LETTER_MATH_SYMBOLS.map((character, index) => {
|
|
525
|
-
return (
|
|
526
|
-
<button
|
|
527
|
-
className="AccentBar-button AB-narrow"
|
|
528
|
-
key={"accent-button-"+index}
|
|
529
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
530
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
531
|
-
onClick={(e) => e.preventDefault()}
|
|
532
|
-
>
|
|
533
|
-
{character}
|
|
534
|
-
</button>
|
|
535
|
-
)
|
|
536
|
-
})}
|
|
537
|
-
<div className="section-label">
|
|
538
|
-
Advanced
|
|
539
|
-
</div>
|
|
540
|
-
{ ADVANCE_MATH_SYMBOLS.map((character, index) => {
|
|
541
|
-
return (
|
|
542
|
-
<button
|
|
543
|
-
className="AccentBar-button AB-narrow"
|
|
544
|
-
key={"accent-button-"+index}
|
|
545
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
546
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
547
|
-
onClick={(e) => e.preventDefault()}
|
|
548
|
-
>
|
|
549
|
-
{character}
|
|
550
|
-
</button>
|
|
551
|
-
)
|
|
552
|
-
})}
|
|
553
|
-
<div className="section-label">
|
|
554
|
-
Arrows
|
|
555
|
-
</div>
|
|
556
|
-
{ ARROW_SYBOLS.map((character, index) => {
|
|
557
|
-
return (
|
|
558
|
-
<button
|
|
559
|
-
className="AccentBar-button AB-narrow"
|
|
560
|
-
key={"accent-button-"+index}
|
|
561
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
562
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
563
|
-
onClick={(e) => e.preventDefault()}
|
|
564
|
-
>
|
|
565
|
-
{character}
|
|
566
|
-
</button>
|
|
567
|
-
)
|
|
568
|
-
})}
|
|
569
725
|
</div>
|
|
570
|
-
}
|
|
571
|
-
|
|
572
|
-
{ /* Emoticons tab */}
|
|
573
|
-
{ this.state.selectedTab === "Emoticons" &&
|
|
574
|
-
<div className="tabArea">
|
|
575
|
-
<div className="section-label">
|
|
576
|
-
Smileys
|
|
577
|
-
</div>
|
|
578
|
-
{ EMOTICONS_SMILEYS.map((character, index) => {
|
|
579
|
-
return (
|
|
580
|
-
<button
|
|
581
|
-
className="AccentBar-button AB-narrow"
|
|
582
|
-
key={"accent-button-"+index}
|
|
583
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
584
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
585
|
-
onClick={(e) => e.preventDefault()}
|
|
586
|
-
>
|
|
587
|
-
{character}
|
|
588
|
-
</button>
|
|
589
|
-
)
|
|
590
|
-
})}
|
|
591
|
-
<div className="section-label">
|
|
592
|
-
People
|
|
593
|
-
</div>
|
|
594
|
-
{ EMOTICONS_PEOPLE.map((character, index) => {
|
|
595
|
-
return (
|
|
596
|
-
<button
|
|
597
|
-
className="AccentBar-button AB-narrow"
|
|
598
|
-
key={"accent-button-"+index}
|
|
599
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
600
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
601
|
-
onClick={(e) => e.preventDefault()}
|
|
602
|
-
>
|
|
603
|
-
{character}
|
|
604
|
-
</button>
|
|
605
|
-
)
|
|
606
|
-
})}
|
|
607
|
-
<div className="section-label">
|
|
608
|
-
Animals
|
|
609
|
-
</div>
|
|
610
|
-
{ EMOTICONS_ANIMALS.map((character, index) => {
|
|
611
|
-
return (
|
|
612
|
-
<button
|
|
613
|
-
className="AccentBar-button AB-narrow"
|
|
614
|
-
key={"accent-button-"+index}
|
|
615
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
616
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
617
|
-
onClick={(e) => e.preventDefault()}
|
|
618
|
-
>
|
|
619
|
-
{character}
|
|
620
|
-
</button>
|
|
621
|
-
)
|
|
622
|
-
})}
|
|
623
|
-
<div className="section-label">
|
|
624
|
-
Flowers and food
|
|
625
|
-
</div>
|
|
626
|
-
{ EMOTICONS_FOOD.map((character, index) => {
|
|
627
|
-
return (
|
|
628
|
-
<button
|
|
629
|
-
className="AccentBar-button AB-narrow"
|
|
630
|
-
key={"accent-button-"+index}
|
|
631
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
632
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
633
|
-
onClick={(e) => e.preventDefault()}
|
|
634
|
-
>
|
|
635
|
-
{character}
|
|
636
|
-
</button>
|
|
637
|
-
)
|
|
638
|
-
})}
|
|
639
|
-
<div className="section-label">
|
|
640
|
-
Fun
|
|
641
|
-
</div>
|
|
642
|
-
{ EMOTICONS_GAMES.map((character, index) => {
|
|
643
|
-
return (
|
|
644
|
-
<button
|
|
645
|
-
className="AccentBar-button AB-narrow"
|
|
646
|
-
key={"accent-button-"+index}
|
|
647
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
648
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
649
|
-
onClick={(e) => e.preventDefault()}
|
|
650
|
-
>
|
|
651
|
-
{character}
|
|
652
|
-
</button>
|
|
653
|
-
)
|
|
654
|
-
})}
|
|
655
|
-
<div className="section-label">
|
|
656
|
-
Transport
|
|
657
|
-
</div>
|
|
658
|
-
{ EMOTICONS_TRANSPORT.map((character, index) => {
|
|
659
|
-
return (
|
|
660
|
-
<button
|
|
661
|
-
className="AccentBar-button AB-narrow"
|
|
662
|
-
key={"accent-button-"+index}
|
|
663
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
664
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
665
|
-
onClick={(e) => e.preventDefault()}
|
|
666
|
-
>
|
|
667
|
-
{character}
|
|
668
|
-
</button>
|
|
669
|
-
)
|
|
670
|
-
})}
|
|
671
|
-
<div className="section-label">
|
|
672
|
-
Miscellaneous
|
|
673
|
-
</div>
|
|
674
|
-
{ EMOTICONS_MISC.map((character, index) => {
|
|
675
|
-
return (
|
|
676
|
-
<button
|
|
677
|
-
className="AccentBar-button AB-narrow"
|
|
678
|
-
key={"accent-button-"+index}
|
|
679
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
680
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
681
|
-
onClick={(e) => e.preventDefault()}
|
|
682
|
-
>
|
|
683
|
-
{character}
|
|
684
|
-
</button>
|
|
685
|
-
)
|
|
686
|
-
})}
|
|
726
|
+
)}
|
|
687
727
|
|
|
728
|
+
{/* Normal mode */}
|
|
729
|
+
{!compactMode && (
|
|
730
|
+
<div>
|
|
731
|
+
<div className="tabBar">
|
|
732
|
+
{TAB_NAMES.map((tab, index) => {
|
|
733
|
+
return (
|
|
734
|
+
<span key={"tabBar-" + tab}>
|
|
735
|
+
{this.state.selectedTab === tab ? (
|
|
736
|
+
<span className="tab-selected" selected={true}>
|
|
737
|
+
{tab}
|
|
738
|
+
</span>
|
|
739
|
+
) : (
|
|
740
|
+
<span
|
|
741
|
+
className="tab"
|
|
742
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
743
|
+
onMouseUp={(e) => e.preventDefault()}
|
|
744
|
+
onClick={(e) => this.handleSelectTab(tab)}
|
|
745
|
+
>
|
|
746
|
+
{tab}
|
|
747
|
+
</span>
|
|
748
|
+
)}{" "}
|
|
749
|
+
</span>
|
|
750
|
+
);
|
|
751
|
+
})}
|
|
752
|
+
</div>
|
|
753
|
+
|
|
754
|
+
<div className="AccentBar-outerContainer">
|
|
755
|
+
<div className="AccentBar-innerContainer">
|
|
756
|
+
{/* Accents tab */}
|
|
757
|
+
{this.state.selectedTab === "Accents" && (
|
|
758
|
+
<div className="tabArea">
|
|
759
|
+
{quickAccents.length > -1 && (
|
|
760
|
+
<div className="replace-section symbols-grid">
|
|
761
|
+
<div className="section-label">Replace</div>
|
|
762
|
+
{quickAccents.length === 0 && (
|
|
763
|
+
<div className="type-a-letter">
|
|
764
|
+
Type a vowel to show replacements
|
|
765
|
+
</div>
|
|
766
|
+
)}
|
|
767
|
+
|
|
768
|
+
{quickAccents.map((character, index) => {
|
|
769
|
+
return (
|
|
770
|
+
<button
|
|
771
|
+
className="AccentBar-button AB-narrow"
|
|
772
|
+
key={"accent-button-" + index}
|
|
773
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
774
|
+
onMouseUp={(e) =>
|
|
775
|
+
this.handleButtonClick(e, character)
|
|
776
|
+
}
|
|
777
|
+
onClick={(e) => e.preventDefault()}
|
|
778
|
+
>
|
|
779
|
+
{character}
|
|
780
|
+
</button>
|
|
781
|
+
);
|
|
782
|
+
})}
|
|
783
|
+
</div>
|
|
784
|
+
)}
|
|
785
|
+
|
|
786
|
+
<div className="section-label">Insert</div>
|
|
787
|
+
<div className="symbols-grid insert-grid">
|
|
788
|
+
{allAccents.map((character, index) => {
|
|
789
|
+
return (
|
|
790
|
+
<button
|
|
791
|
+
className="AccentBar-button AB-narrow"
|
|
792
|
+
key={"accent-button-" + index}
|
|
793
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
794
|
+
onMouseUp={(e) =>
|
|
795
|
+
this.handleButtonClick(e, character, true)
|
|
796
|
+
}
|
|
797
|
+
onClick={(e) => e.preventDefault()}
|
|
798
|
+
>
|
|
799
|
+
{character}
|
|
800
|
+
</button>
|
|
801
|
+
);
|
|
802
|
+
})}
|
|
803
|
+
</div>
|
|
804
|
+
</div>
|
|
805
|
+
)}
|
|
806
|
+
|
|
807
|
+
{/* Greek tab */}
|
|
808
|
+
{this.state.selectedTab === "Greek" && (
|
|
809
|
+
<div className="tabArea">
|
|
810
|
+
<div className="section-label">Lower case</div>
|
|
811
|
+
<div className="symbols-grid insert-grid">
|
|
812
|
+
{GREEK_LOWER_CASE_LETTERS.map((character, index) => {
|
|
813
|
+
return (
|
|
814
|
+
<button
|
|
815
|
+
className="AccentBar-button AB-narrow"
|
|
816
|
+
key={"accent-button-" + index}
|
|
817
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
818
|
+
onMouseUp={(e) =>
|
|
819
|
+
this.handleButtonClick(e, character, true)
|
|
820
|
+
}
|
|
821
|
+
onClick={(e) => e.preventDefault()}
|
|
822
|
+
>
|
|
823
|
+
{character}
|
|
824
|
+
</button>
|
|
825
|
+
);
|
|
826
|
+
})}
|
|
827
|
+
</div>
|
|
828
|
+
<div className="section-label">Capitals</div>
|
|
829
|
+
<div className="symbols-grid insert-grid">
|
|
830
|
+
{GREEK_CAPITAL_LETTERS.map((character, index) => {
|
|
831
|
+
return (
|
|
832
|
+
<button
|
|
833
|
+
className="AccentBar-button AB-narrow"
|
|
834
|
+
key={"accent-button-" + index}
|
|
835
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
836
|
+
onMouseUp={(e) =>
|
|
837
|
+
this.handleButtonClick(e, character, true)
|
|
838
|
+
}
|
|
839
|
+
onClick={(e) => e.preventDefault()}
|
|
840
|
+
>
|
|
841
|
+
{character}
|
|
842
|
+
</button>
|
|
843
|
+
);
|
|
844
|
+
})}
|
|
845
|
+
</div>
|
|
846
|
+
</div>
|
|
847
|
+
)}
|
|
848
|
+
|
|
849
|
+
{/* Math tab */}
|
|
850
|
+
{this.state.selectedTab === "Math" && (
|
|
851
|
+
<div className="tabArea">
|
|
852
|
+
<div className="section-label">Common</div>
|
|
853
|
+
<div className="symbols-grid insert-grid">
|
|
854
|
+
{COMMON_MATH_SYMBOLS.map((character, index) => {
|
|
855
|
+
return (
|
|
856
|
+
<button
|
|
857
|
+
className="AccentBar-button AB-narrow"
|
|
858
|
+
key={"accent-button-" + index}
|
|
859
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
860
|
+
onMouseUp={(e) =>
|
|
861
|
+
this.handleButtonClick(e, character, true)
|
|
862
|
+
}
|
|
863
|
+
onClick={(e) => e.preventDefault()}
|
|
864
|
+
>
|
|
865
|
+
{character}
|
|
866
|
+
</button>
|
|
867
|
+
);
|
|
868
|
+
})}
|
|
869
|
+
</div>
|
|
870
|
+
<div className="section-label">Fractions</div>
|
|
871
|
+
<div className="symbols-grid insert-grid">
|
|
872
|
+
{FRACTION_MATH_SYMBOLS.map((character, index) => {
|
|
873
|
+
return (
|
|
874
|
+
<button
|
|
875
|
+
className="AccentBar-button AB-narrow"
|
|
876
|
+
key={"accent-button-" + index}
|
|
877
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
878
|
+
onMouseUp={(e) =>
|
|
879
|
+
this.handleButtonClick(e, character, true)
|
|
880
|
+
}
|
|
881
|
+
onClick={(e) => e.preventDefault()}
|
|
882
|
+
>
|
|
883
|
+
{character}
|
|
884
|
+
</button>
|
|
885
|
+
);
|
|
886
|
+
})}
|
|
887
|
+
</div>
|
|
888
|
+
<div className="section-label">Letters</div>
|
|
889
|
+
<div className="symbols-grid insert-grid">
|
|
890
|
+
{LETTER_MATH_SYMBOLS.map((character, index) => {
|
|
891
|
+
return (
|
|
892
|
+
<button
|
|
893
|
+
className="AccentBar-button AB-narrow"
|
|
894
|
+
key={"accent-button-" + index}
|
|
895
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
896
|
+
onMouseUp={(e) =>
|
|
897
|
+
this.handleButtonClick(e, character, true)
|
|
898
|
+
}
|
|
899
|
+
onClick={(e) => e.preventDefault()}
|
|
900
|
+
>
|
|
901
|
+
{character}
|
|
902
|
+
</button>
|
|
903
|
+
);
|
|
904
|
+
})}
|
|
905
|
+
</div>
|
|
906
|
+
<div className="section-label">Advanced</div>
|
|
907
|
+
<div className="symbols-grid insert-grid">
|
|
908
|
+
{ADVANCE_MATH_SYMBOLS.map((character, index) => {
|
|
909
|
+
return (
|
|
910
|
+
<button
|
|
911
|
+
className="AccentBar-button AB-narrow"
|
|
912
|
+
key={"accent-button-" + index}
|
|
913
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
914
|
+
onMouseUp={(e) =>
|
|
915
|
+
this.handleButtonClick(e, character, true)
|
|
916
|
+
}
|
|
917
|
+
onClick={(e) => e.preventDefault()}
|
|
918
|
+
>
|
|
919
|
+
{character}
|
|
920
|
+
</button>
|
|
921
|
+
);
|
|
922
|
+
})}
|
|
923
|
+
</div>
|
|
924
|
+
<div className="section-label">Arrows</div>
|
|
925
|
+
<div className="symbols-grid insert-grid">
|
|
926
|
+
{ARROW_SYBOLS.map((character, index) => {
|
|
927
|
+
return (
|
|
928
|
+
<button
|
|
929
|
+
className="AccentBar-button AB-narrow"
|
|
930
|
+
key={"accent-button-" + index}
|
|
931
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
932
|
+
onMouseUp={(e) =>
|
|
933
|
+
this.handleButtonClick(e, character, true)
|
|
934
|
+
}
|
|
935
|
+
onClick={(e) => e.preventDefault()}
|
|
936
|
+
>
|
|
937
|
+
{character}
|
|
938
|
+
</button>
|
|
939
|
+
);
|
|
940
|
+
})}
|
|
941
|
+
</div>
|
|
942
|
+
</div>
|
|
943
|
+
)}
|
|
944
|
+
|
|
945
|
+
{/* Emoticons tab */}
|
|
946
|
+
{this.state.selectedTab === "Emoticons" && (
|
|
947
|
+
<div className="tabArea">
|
|
948
|
+
<div className="section-label">Smileys</div>
|
|
949
|
+
<div className="symbols-grid insert-grid">
|
|
950
|
+
{EMOTICONS_SMILEYS.map((character, index) => {
|
|
951
|
+
return (
|
|
952
|
+
<button
|
|
953
|
+
className="AccentBar-button AB-narrow"
|
|
954
|
+
key={"accent-button-" + index}
|
|
955
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
956
|
+
onMouseUp={(e) =>
|
|
957
|
+
this.handleButtonClick(e, character, true)
|
|
958
|
+
}
|
|
959
|
+
onClick={(e) => e.preventDefault()}
|
|
960
|
+
>
|
|
961
|
+
{character}
|
|
962
|
+
</button>
|
|
963
|
+
);
|
|
964
|
+
})}
|
|
965
|
+
</div>
|
|
966
|
+
<div className="section-label">People</div>
|
|
967
|
+
<div className="symbols-grid insert-grid">
|
|
968
|
+
{EMOTICONS_PEOPLE.map((character, index) => {
|
|
969
|
+
return (
|
|
970
|
+
<button
|
|
971
|
+
className="AccentBar-button AB-narrow"
|
|
972
|
+
key={"accent-button-" + index}
|
|
973
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
974
|
+
onMouseUp={(e) =>
|
|
975
|
+
this.handleButtonClick(e, character, true)
|
|
976
|
+
}
|
|
977
|
+
onClick={(e) => e.preventDefault()}
|
|
978
|
+
>
|
|
979
|
+
{character}
|
|
980
|
+
</button>
|
|
981
|
+
);
|
|
982
|
+
})}
|
|
983
|
+
</div>
|
|
984
|
+
<div className="section-label">Animals</div>
|
|
985
|
+
<div className="symbols-grid insert-grid">
|
|
986
|
+
{EMOTICONS_ANIMALS.map((character, index) => {
|
|
987
|
+
return (
|
|
988
|
+
<button
|
|
989
|
+
className="AccentBar-button AB-narrow"
|
|
990
|
+
key={"accent-button-" + index}
|
|
991
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
992
|
+
onMouseUp={(e) =>
|
|
993
|
+
this.handleButtonClick(e, character, true)
|
|
994
|
+
}
|
|
995
|
+
onClick={(e) => e.preventDefault()}
|
|
996
|
+
>
|
|
997
|
+
{character}
|
|
998
|
+
</button>
|
|
999
|
+
);
|
|
1000
|
+
})}
|
|
1001
|
+
</div>
|
|
1002
|
+
<div className="section-label">Flowers and food</div>
|
|
1003
|
+
<div className="symbols-grid insert-grid">
|
|
1004
|
+
{EMOTICONS_FOOD.map((character, index) => {
|
|
1005
|
+
return (
|
|
1006
|
+
<button
|
|
1007
|
+
className="AccentBar-button AB-narrow"
|
|
1008
|
+
key={"accent-button-" + index}
|
|
1009
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
1010
|
+
onMouseUp={(e) =>
|
|
1011
|
+
this.handleButtonClick(e, character, true)
|
|
1012
|
+
}
|
|
1013
|
+
onClick={(e) => e.preventDefault()}
|
|
1014
|
+
>
|
|
1015
|
+
{character}
|
|
1016
|
+
</button>
|
|
1017
|
+
);
|
|
1018
|
+
})}
|
|
1019
|
+
</div>
|
|
1020
|
+
<div className="section-label">Fun</div>
|
|
1021
|
+
<div className="symbols-grid insert-grid">
|
|
1022
|
+
{EMOTICONS_GAMES.map((character, index) => {
|
|
1023
|
+
return (
|
|
1024
|
+
<button
|
|
1025
|
+
className="AccentBar-button AB-narrow"
|
|
1026
|
+
key={"accent-button-" + index}
|
|
1027
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
1028
|
+
onMouseUp={(e) =>
|
|
1029
|
+
this.handleButtonClick(e, character, true)
|
|
1030
|
+
}
|
|
1031
|
+
onClick={(e) => e.preventDefault()}
|
|
1032
|
+
>
|
|
1033
|
+
{character}
|
|
1034
|
+
</button>
|
|
1035
|
+
);
|
|
1036
|
+
})}
|
|
1037
|
+
</div>
|
|
1038
|
+
<div className="section-label">Transport</div>
|
|
1039
|
+
<div className="symbols-grid insert-grid">
|
|
1040
|
+
{EMOTICONS_TRANSPORT.map((character, index) => {
|
|
1041
|
+
return (
|
|
1042
|
+
<button
|
|
1043
|
+
className="AccentBar-button AB-narrow"
|
|
1044
|
+
key={"accent-button-" + index}
|
|
1045
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
1046
|
+
onMouseUp={(e) =>
|
|
1047
|
+
this.handleButtonClick(e, character, true)
|
|
1048
|
+
}
|
|
1049
|
+
onClick={(e) => e.preventDefault()}
|
|
1050
|
+
>
|
|
1051
|
+
{character}
|
|
1052
|
+
</button>
|
|
1053
|
+
);
|
|
1054
|
+
})}
|
|
1055
|
+
</div>
|
|
1056
|
+
<div className="section-label">Miscellaneous</div>
|
|
1057
|
+
<div className="symbols-grid insert-grid">
|
|
1058
|
+
{EMOTICONS_MISC.map((character, index) => {
|
|
1059
|
+
return (
|
|
1060
|
+
<button
|
|
1061
|
+
className="AccentBar-button AB-narrow"
|
|
1062
|
+
key={"accent-button-" + index}
|
|
1063
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
1064
|
+
onMouseUp={(e) =>
|
|
1065
|
+
this.handleButtonClick(e, character, true)
|
|
1066
|
+
}
|
|
1067
|
+
onClick={(e) => e.preventDefault()}
|
|
1068
|
+
>
|
|
1069
|
+
{character}
|
|
1070
|
+
</button>
|
|
1071
|
+
);
|
|
1072
|
+
})}
|
|
1073
|
+
</div>
|
|
1074
|
+
</div>
|
|
1075
|
+
)}
|
|
1076
|
+
|
|
1077
|
+
{/* More tab */}
|
|
1078
|
+
{this.state.selectedTab === "More" && (
|
|
1079
|
+
<div className="tabArea">
|
|
1080
|
+
<div className="section-label">Symbols</div>
|
|
1081
|
+
<div className="symbols-grid insert-grid">
|
|
1082
|
+
{COMMON_SYMBOLS.map((character, index) => {
|
|
1083
|
+
return (
|
|
1084
|
+
<button
|
|
1085
|
+
className="AccentBar-button AB-narrow"
|
|
1086
|
+
key={"accent-button-" + index}
|
|
1087
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
1088
|
+
onMouseUp={(e) =>
|
|
1089
|
+
this.handleButtonClick(e, character, true)
|
|
1090
|
+
}
|
|
1091
|
+
onClick={(e) => e.preventDefault()}
|
|
1092
|
+
>
|
|
1093
|
+
{character}
|
|
1094
|
+
</button>
|
|
1095
|
+
);
|
|
1096
|
+
})}
|
|
1097
|
+
</div>
|
|
1098
|
+
<div className="section-label">Currency</div>
|
|
1099
|
+
<div className="symbols-grid insert-grid">
|
|
1100
|
+
{CURRENCY_SYMBOLS.map((character, index) => {
|
|
1101
|
+
return (
|
|
1102
|
+
<button
|
|
1103
|
+
className="AccentBar-button AB-narrow"
|
|
1104
|
+
key={"accent-button-" + index}
|
|
1105
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
1106
|
+
onMouseUp={(e) =>
|
|
1107
|
+
this.handleButtonClick(e, character, true)
|
|
1108
|
+
}
|
|
1109
|
+
onClick={(e) => e.preventDefault()}
|
|
1110
|
+
>
|
|
1111
|
+
{character}
|
|
1112
|
+
</button>
|
|
1113
|
+
);
|
|
1114
|
+
})}
|
|
1115
|
+
</div>
|
|
1116
|
+
<div className="section-label">Numbers</div>
|
|
1117
|
+
<div className="symbols-grid insert-grid">
|
|
1118
|
+
{NUMBER_SYMBOLS.map((character, index) => {
|
|
1119
|
+
return (
|
|
1120
|
+
<button
|
|
1121
|
+
className="AccentBar-button AB-narrow"
|
|
1122
|
+
key={"accent-button-" + index}
|
|
1123
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
1124
|
+
onMouseUp={(e) =>
|
|
1125
|
+
this.handleButtonClick(e, character, true)
|
|
1126
|
+
}
|
|
1127
|
+
onClick={(e) => e.preventDefault()}
|
|
1128
|
+
>
|
|
1129
|
+
{character}
|
|
1130
|
+
</button>
|
|
1131
|
+
);
|
|
1132
|
+
})}
|
|
1133
|
+
</div>
|
|
1134
|
+
<div className="section-label">Letters</div>
|
|
1135
|
+
<div className="symbols-grid insert-grid">
|
|
1136
|
+
{LATIN_LETTERS.map((character, index) => {
|
|
1137
|
+
return (
|
|
1138
|
+
<button
|
|
1139
|
+
className="AccentBar-button AB-narrow"
|
|
1140
|
+
key={"accent-button-" + index}
|
|
1141
|
+
onMouseDown={(e) => e.preventDefault()}
|
|
1142
|
+
onMouseUp={(e) =>
|
|
1143
|
+
this.handleButtonClick(e, character, true)
|
|
1144
|
+
}
|
|
1145
|
+
onClick={(e) => e.preventDefault()}
|
|
1146
|
+
>
|
|
1147
|
+
{character}
|
|
1148
|
+
</button>
|
|
1149
|
+
);
|
|
1150
|
+
})}
|
|
1151
|
+
</div>
|
|
1152
|
+
</div>
|
|
1153
|
+
)}
|
|
1154
|
+
</div>
|
|
1155
|
+
</div>
|
|
688
1156
|
</div>
|
|
689
|
-
}
|
|
690
|
-
|
|
691
|
-
{ /* More tab */}
|
|
692
|
-
{ this.state.selectedTab === "More" &&
|
|
693
|
-
<div className="tabArea">
|
|
694
|
-
<div className="section-label">
|
|
695
|
-
Symbols
|
|
696
|
-
</div>
|
|
697
|
-
{ COMMON_SYMBOLS.map((character, index) => {
|
|
698
|
-
return (
|
|
699
|
-
<button
|
|
700
|
-
className="AccentBar-button AB-narrow"
|
|
701
|
-
key={"accent-button-"+index}
|
|
702
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
703
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
704
|
-
onClick={(e) => e.preventDefault()}
|
|
705
|
-
>
|
|
706
|
-
{character}
|
|
707
|
-
</button>
|
|
708
|
-
)
|
|
709
|
-
})}
|
|
710
|
-
<div className="section-label">
|
|
711
|
-
Currency
|
|
712
|
-
</div>
|
|
713
|
-
{ CURRENCY_SYMBOLS.map((character, index) => {
|
|
714
|
-
return (
|
|
715
|
-
<button
|
|
716
|
-
className="AccentBar-button AB-narrow"
|
|
717
|
-
key={"accent-button-"+index}
|
|
718
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
719
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
720
|
-
onClick={(e) => e.preventDefault()}
|
|
721
|
-
>
|
|
722
|
-
{character}
|
|
723
|
-
</button>
|
|
724
|
-
)
|
|
725
|
-
})}
|
|
726
|
-
<div className="section-label">
|
|
727
|
-
Numbers
|
|
728
|
-
</div>
|
|
729
|
-
{ NUMBER_SYMBOLS.map((character, index) => {
|
|
730
|
-
return (
|
|
731
|
-
<button
|
|
732
|
-
className="AccentBar-button AB-narrow"
|
|
733
|
-
key={"accent-button-"+index}
|
|
734
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
735
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
736
|
-
onClick={(e) => e.preventDefault()}
|
|
737
|
-
>
|
|
738
|
-
{character}
|
|
739
|
-
</button>
|
|
740
|
-
)
|
|
741
|
-
})}
|
|
742
|
-
<div className="section-label">
|
|
743
|
-
Letters
|
|
744
|
-
</div>
|
|
745
|
-
{ LATIN_LETTERS.map((character, index) => {
|
|
746
|
-
return (
|
|
747
|
-
<button
|
|
748
|
-
className="AccentBar-button AB-narrow"
|
|
749
|
-
key={"accent-button-"+index}
|
|
750
|
-
onMouseDown={(e) => e.preventDefault()}
|
|
751
|
-
onMouseUp={(e) => this.handleButtonClick(e, character, true)}
|
|
752
|
-
onClick={(e) => e.preventDefault()}
|
|
753
|
-
>
|
|
754
|
-
{character}
|
|
755
|
-
</button>
|
|
756
|
-
)
|
|
757
|
-
})}
|
|
758
|
-
|
|
759
|
-
</div>
|
|
760
|
-
}
|
|
761
|
-
|
|
762
|
-
</div>
|
|
763
|
-
</div>
|
|
764
|
-
|
|
765
|
-
</div>
|
|
766
|
-
}
|
|
767
|
-
|
|
1157
|
+
)}
|
|
768
1158
|
</div>
|
|
769
|
-
)
|
|
1159
|
+
);
|
|
770
1160
|
}
|
|
771
|
-
}
|
|
1161
|
+
}
|