catchup-library-web 2.7.0 → 2.7.2
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.d.mts +1 -34
- package/dist/index.d.ts +1 -34
- package/dist/index.js +171 -288
- package/dist/index.mjs +138 -255
- package/package.json +1 -1
- package/src/components/groups/InputGroup.tsx +75 -222
- package/src/properties/TextProperties.ts +1 -1
- package/src/utilization/ManagementUtilization.ts +38 -28
package/package.json
CHANGED
|
@@ -1,49 +1,13 @@
|
|
|
1
1
|
import Select from "react-select";
|
|
2
2
|
import Switch from "react-switch";
|
|
3
3
|
import i18n from "../../language/i18n";
|
|
4
|
-
import { useEffect, useRef, useState
|
|
4
|
+
import { useEffect, useRef, useState } from "react";
|
|
5
5
|
import { IInputGroupProps } from "../../properties/GroupProperties";
|
|
6
6
|
import BaseImage from "../images/BaseImage";
|
|
7
7
|
import { IOptionProps } from "../../properties/CommonProperties";
|
|
8
|
-
import { MathfieldElement } from "mathlive";
|
|
9
8
|
import BaseModal from "../modals/BaseModal";
|
|
10
|
-
import
|
|
9
|
+
import InputWithSpecialExpression from "../texts/InputWithSpecialExpression";
|
|
11
10
|
|
|
12
|
-
declare global {
|
|
13
|
-
namespace JSX {
|
|
14
|
-
interface IntrinsicElements {
|
|
15
|
-
"math-field": React.DetailedHTMLProps<
|
|
16
|
-
React.HTMLAttributes<MathfieldElement>,
|
|
17
|
-
MathfieldElement
|
|
18
|
-
> & {
|
|
19
|
-
value?: string;
|
|
20
|
-
disabled?: boolean;
|
|
21
|
-
readonly?: boolean;
|
|
22
|
-
"virtual-keyboard-mode"?: "manual" | "onfocus" | "off";
|
|
23
|
-
"virtual-keyboard-theme"?: "material" | "apple";
|
|
24
|
-
"math-mode-space"?: string;
|
|
25
|
-
"letter-shape-style"?: "tex" | "french" | "iso" | "upright" | "auto";
|
|
26
|
-
"min-font-scale"?: number;
|
|
27
|
-
"max-font-scale"?: number;
|
|
28
|
-
"smart-fence"?: boolean;
|
|
29
|
-
"smart-mode"?: boolean;
|
|
30
|
-
"smart-superscript"?: boolean;
|
|
31
|
-
"inline-shortcut-timeout"?: number;
|
|
32
|
-
"keybinding-mode"?: "default" | "vim" | "emacs";
|
|
33
|
-
"speech-engine"?: "local" | "amazon" | "google";
|
|
34
|
-
"speech-engine-voice"?: string;
|
|
35
|
-
"speech-engine-rate"?: string;
|
|
36
|
-
"read-only"?: boolean;
|
|
37
|
-
"remove-extraneous-parentheses"?: boolean;
|
|
38
|
-
"script-depth"?: number;
|
|
39
|
-
placeholder?: string;
|
|
40
|
-
"default-mode"?: "math" | "text";
|
|
41
|
-
"fonts-directory"?: string;
|
|
42
|
-
"sounds-directory"?: string;
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
11
|
|
|
48
12
|
const InputGroup = ({
|
|
49
13
|
type,
|
|
@@ -70,12 +34,8 @@ const InputGroup = ({
|
|
|
70
34
|
description,
|
|
71
35
|
}: IInputGroupProps) => {
|
|
72
36
|
const textAreaRef = useRef<HTMLTextAreaElement>(null);
|
|
73
|
-
const latexTextAreaRef = useRef<HTMLTextAreaElement>(null);
|
|
74
37
|
const [showMathConstructor, setShowMathConstructor] =
|
|
75
38
|
useState<boolean>(false);
|
|
76
|
-
const [showCheatSheet, setShowCheatSheet] = useState<boolean>(false);
|
|
77
|
-
const [mathValue, setMathValue] = useState<string>("");
|
|
78
|
-
const mathFieldRef = useRef<MathfieldElement>(null);
|
|
79
39
|
|
|
80
40
|
useEffect(() => {
|
|
81
41
|
if (!textAreaRef) return;
|
|
@@ -87,24 +47,6 @@ const InputGroup = ({
|
|
|
87
47
|
}
|
|
88
48
|
}, [textAreaRef, value]);
|
|
89
49
|
|
|
90
|
-
useEffect(() => {
|
|
91
|
-
if (!latexTextAreaRef) return;
|
|
92
|
-
if (!latexTextAreaRef.current) return;
|
|
93
|
-
if (value) {
|
|
94
|
-
latexTextAreaRef.current.style.height = `${latexTextAreaRef.current.scrollHeight}px`;
|
|
95
|
-
} else {
|
|
96
|
-
latexTextAreaRef.current.style.height = `44px`;
|
|
97
|
-
}
|
|
98
|
-
}, [latexTextAreaRef, value]);
|
|
99
|
-
|
|
100
|
-
useEffect(() => {
|
|
101
|
-
if (!useMath) return;
|
|
102
|
-
import("mathlive").then(({ MathfieldElement }) => {
|
|
103
|
-
if (!customElements.get("math-field")) {
|
|
104
|
-
customElements.define("math-field", MathfieldElement);
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
}, [useMath]);
|
|
108
50
|
|
|
109
51
|
const retrieveNullableOptionList = () => {
|
|
110
52
|
if (!optionList) return [];
|
|
@@ -146,28 +88,7 @@ const InputGroup = ({
|
|
|
146
88
|
}
|
|
147
89
|
};
|
|
148
90
|
|
|
149
|
-
const handleMathFieldChange = useCallback(() => {
|
|
150
|
-
if (!mathFieldRef.current) return;
|
|
151
|
-
const latexValue = mathFieldRef.current.value;
|
|
152
|
-
const wasFocused = mathFieldRef.current === document.activeElement;
|
|
153
|
-
const cursorPosition = mathFieldRef.current.position;
|
|
154
|
-
setMathValue(latexValue);
|
|
155
|
-
if (wasFocused) {
|
|
156
|
-
setTimeout(() => {
|
|
157
|
-
if (mathFieldRef.current) {
|
|
158
|
-
mathFieldRef.current.focus();
|
|
159
|
-
mathFieldRef.current.position = cursorPosition;
|
|
160
|
-
}
|
|
161
|
-
}, 0);
|
|
162
|
-
}
|
|
163
|
-
}, []);
|
|
164
|
-
|
|
165
|
-
const handleCopyLatex = () => {
|
|
166
|
-
navigator.clipboard.writeText(`$$${mathValue}$$`);
|
|
167
|
-
};
|
|
168
|
-
|
|
169
91
|
const handleOpenMathConstructor = () => {
|
|
170
|
-
setMathValue("");
|
|
171
92
|
setShowMathConstructor(true);
|
|
172
93
|
};
|
|
173
94
|
|
|
@@ -183,148 +104,80 @@ const InputGroup = ({
|
|
|
183
104
|
}}
|
|
184
105
|
>
|
|
185
106
|
<div className="bg-catchup-white rounded-lg overflow-hidden">
|
|
186
|
-
<div className="
|
|
187
|
-
<
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
onInput={handleMathFieldChange}
|
|
193
|
-
placeholder={i18n.t("expression")}
|
|
194
|
-
virtual-keyboard-mode="onfocus"
|
|
195
|
-
smart-fence={true}
|
|
196
|
-
smart-mode={true}
|
|
197
|
-
smart-superscript={true}
|
|
198
|
-
style={{
|
|
199
|
-
fontSize: "14px",
|
|
200
|
-
paddingRight: "16px",
|
|
201
|
-
paddingLeft: "16px",
|
|
202
|
-
paddingTop: "8px",
|
|
203
|
-
paddingBottom: "8px",
|
|
204
|
-
border: "none",
|
|
205
|
-
outline: "none",
|
|
206
|
-
width: "100%",
|
|
207
|
-
backgroundColor: "transparent",
|
|
208
|
-
borderRadius: "16px",
|
|
209
|
-
fontFamily: "inherit",
|
|
210
|
-
}}
|
|
211
|
-
/>
|
|
212
|
-
</div>
|
|
213
|
-
</div>
|
|
214
|
-
|
|
215
|
-
<div>
|
|
216
|
-
<p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
|
|
217
|
-
{i18n.t("latex_output")}
|
|
218
|
-
</p>
|
|
219
|
-
<div className="relative">
|
|
220
|
-
<textarea
|
|
221
|
-
ref={latexTextAreaRef}
|
|
222
|
-
readOnly
|
|
223
|
-
value={mathValue ? `$$${mathValue}$$` : ""}
|
|
224
|
-
className="w-full h-[44px] py-2 px-4 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large resize-none focus:outline-none"
|
|
225
|
-
placeholder={i18n.t("latex_will_appear_here")}
|
|
226
|
-
/>
|
|
227
|
-
<button
|
|
228
|
-
onClick={handleCopyLatex}
|
|
229
|
-
className="absolute top-2 right-2 bg-catchup-blue-400 text-white px-3 py-1 rounded-md text-md hover:bg-catchup-blue-500 transition-colors"
|
|
230
|
-
disabled={!mathValue}
|
|
231
|
-
>
|
|
232
|
-
{i18n.t("copy")}
|
|
233
|
-
</button>
|
|
234
|
-
</div>
|
|
235
|
-
</div>
|
|
236
|
-
|
|
237
|
-
<div>
|
|
238
|
-
<button
|
|
239
|
-
onClick={() => setShowCheatSheet(!showCheatSheet)}
|
|
240
|
-
className="flex items-center gap-x-1 text-md font-semibold pl-2 py-1 text-catchup-blue-400 hover:text-catchup-blue-500 transition-colors"
|
|
241
|
-
type="button"
|
|
242
|
-
>
|
|
107
|
+
<div className="space-y-6">
|
|
108
|
+
<p className="text-md text-catchup-gray-400 pl-2">
|
|
109
|
+
{i18n.t("write_equation_in_double_dollars")}
|
|
110
|
+
</p>
|
|
111
|
+
<div className="bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large p-4">
|
|
112
|
+
<p className="text-md font-semibold pl-2 py-1 text-catchup-blue-400">
|
|
243
113
|
{i18n.t("latex_cheat_sheet")}
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
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
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
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
|
-
</tr>
|
|
312
|
-
<tr>
|
|
313
|
-
<td className="py-1">{"\\pm \\times \\div"}</td>
|
|
314
|
-
<td className="py-1">± × ÷</td>
|
|
315
|
-
</tr>
|
|
316
|
-
<tr>
|
|
317
|
-
<td className="py-1">{"\\log_{a}{b}"}</td>
|
|
318
|
-
<td className="py-1">log</td>
|
|
319
|
-
</tr>
|
|
320
|
-
<tr>
|
|
321
|
-
<td className="py-1">{"\\sin \\cos \\tan"}</td>
|
|
322
|
-
<td className="py-1">sin cos tan</td>
|
|
323
|
-
</tr>
|
|
324
|
-
</tbody>
|
|
325
|
-
</table>
|
|
326
|
-
</div>
|
|
327
|
-
)}
|
|
114
|
+
</p>
|
|
115
|
+
<table className="w-full text-md">
|
|
116
|
+
<thead>
|
|
117
|
+
<tr className="text-left text-catchup-gray-400">
|
|
118
|
+
<th className="pb-2 font-semibold">LaTeX</th>
|
|
119
|
+
<th className="pb-2 font-semibold"></th>
|
|
120
|
+
</tr>
|
|
121
|
+
</thead>
|
|
122
|
+
<tbody className="font-mono text-catchup-gray-400">
|
|
123
|
+
<tr>
|
|
124
|
+
<td className="py-1">{"\\frac{a}{b}"}</td>
|
|
125
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\frac{a}{b}$$"} /></td>
|
|
126
|
+
</tr>
|
|
127
|
+
<tr>
|
|
128
|
+
<td className="py-1">{"x^{2}"}</td>
|
|
129
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$x^{2}$$"} /></td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr>
|
|
132
|
+
<td className="py-1">{"x_{i}"}</td>
|
|
133
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$x_{i}$$"} /></td>
|
|
134
|
+
</tr>
|
|
135
|
+
<tr>
|
|
136
|
+
<td className="py-1">{"\\sqrt{x}"}</td>
|
|
137
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\sqrt{x}$$"} /></td>
|
|
138
|
+
</tr>
|
|
139
|
+
<tr>
|
|
140
|
+
<td className="py-1">{"\\sqrt[3]{x}"}</td>
|
|
141
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\sqrt[3]{x}$$"} /></td>
|
|
142
|
+
</tr>
|
|
143
|
+
<tr>
|
|
144
|
+
<td className="py-1">{"\\sum_{i=1}^{n}"}</td>
|
|
145
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\sum_{i=1}^{n}$$"} /></td>
|
|
146
|
+
</tr>
|
|
147
|
+
<tr>
|
|
148
|
+
<td className="py-1">{"\\int_{a}^{b}"}</td>
|
|
149
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\int_{a}^{b}$$"} /></td>
|
|
150
|
+
</tr>
|
|
151
|
+
<tr>
|
|
152
|
+
<td className="py-1">{"\\infty"}</td>
|
|
153
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\infty$$"} /></td>
|
|
154
|
+
</tr>
|
|
155
|
+
<tr>
|
|
156
|
+
<td className="py-1">{"\\pi"}</td>
|
|
157
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\pi$$"} /></td>
|
|
158
|
+
</tr>
|
|
159
|
+
<tr>
|
|
160
|
+
<td className="py-1">{"\\alpha \\beta \\gamma"}</td>
|
|
161
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\alpha \\beta \\gamma$$"} /></td>
|
|
162
|
+
</tr>
|
|
163
|
+
<tr>
|
|
164
|
+
<td className="py-1">{"\\leq \\geq \\neq"}</td>
|
|
165
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\leq \\geq \\neq$$"} /></td>
|
|
166
|
+
</tr>
|
|
167
|
+
<tr>
|
|
168
|
+
<td className="py-1">{"\\pm \\times \\div"}</td>
|
|
169
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\pm \\times \\div$$"} /></td>
|
|
170
|
+
</tr>
|
|
171
|
+
<tr>
|
|
172
|
+
<td className="py-1">{"\\log_{a}{b}"}</td>
|
|
173
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\log_{a}{b}$$"} /></td>
|
|
174
|
+
</tr>
|
|
175
|
+
<tr>
|
|
176
|
+
<td className="py-1">{"\\sin \\cos \\tan"}</td>
|
|
177
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\sin \\cos \\tan$$"} /></td>
|
|
178
|
+
</tr>
|
|
179
|
+
</tbody>
|
|
180
|
+
</table>
|
|
328
181
|
</div>
|
|
329
182
|
</div>
|
|
330
183
|
</div>
|
|
@@ -119,46 +119,56 @@ export const retrieveBrandDTOOptionList = (brandDTOList: any) => {
|
|
|
119
119
|
};
|
|
120
120
|
|
|
121
121
|
export const retrieveCampusDTOOptionList = (campusDTOList: any) => {
|
|
122
|
-
return campusDTOList
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
122
|
+
return campusDTOList
|
|
123
|
+
.map((campusDTO: any) => ({
|
|
124
|
+
value: campusDTO.id,
|
|
125
|
+
text: `${campusDTO.name} (${campusDTO.brandDTO.name})`,
|
|
126
|
+
fullValue: campusDTO,
|
|
127
|
+
}))
|
|
128
|
+
.sort((a: any, b: any) => a.text.localeCompare(b.text, undefined, { numeric: true }));
|
|
127
129
|
};
|
|
128
130
|
|
|
129
131
|
export const retrieveInstitutionDTOOptionList = (institutionDTOList: any) => {
|
|
130
|
-
return institutionDTOList
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
132
|
+
return institutionDTOList
|
|
133
|
+
.map((institutionDTO: any) => ({
|
|
134
|
+
value: institutionDTO.id,
|
|
135
|
+
text: `${institutionDTO.name} (${institutionDTO.campusDTO.name} - ${institutionDTO.campusDTO.brandDTO.name})`,
|
|
136
|
+
fullValue: institutionDTO,
|
|
137
|
+
}))
|
|
138
|
+
.sort((a: any, b: any) => a.text.localeCompare(b.text, undefined, { numeric: true }));
|
|
135
139
|
};
|
|
136
140
|
|
|
137
141
|
export const retrieveSeasonDTOOptionList = (seasonDTOList: any) => {
|
|
138
|
-
return seasonDTOList
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
142
|
+
return seasonDTOList
|
|
143
|
+
.map((seasonDTO: any) => ({
|
|
144
|
+
value: seasonDTO.id,
|
|
145
|
+
text: `${seasonDTO.name} (${seasonDTO.institutionDTO.name})`,
|
|
146
|
+
fullValue: seasonDTO,
|
|
147
|
+
// text: `${seasonDTO.name} (${seasonDTO.institutionDTO.name} - ${seasonDTO.institutionDTO.campusDTO.name}/${seasonDTO.institutionDTO.campusDTO.brandDTO.name})`,
|
|
148
|
+
}))
|
|
149
|
+
.sort((a: any, b: any) => a.text.localeCompare(b.text, undefined, { numeric: true }));
|
|
144
150
|
};
|
|
145
151
|
|
|
146
152
|
export const retrieveGradeDTOOptionList = (gradeDTOList: any) => {
|
|
147
|
-
return gradeDTOList
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
+
return gradeDTOList
|
|
154
|
+
.map((gradeDTO: any) => ({
|
|
155
|
+
value: gradeDTO.id,
|
|
156
|
+
text: `${gradeDTO.name} (${gradeDTO.seasonDTO.name} - ${gradeDTO.seasonDTO.institutionDTO.name})`,
|
|
157
|
+
fullValue: gradeDTO,
|
|
158
|
+
// text: `${gradeDTO.name} (${gradeDTO.seasonDTO.name} ${gradeDTO.seasonDTO.institutionDTO.name} - ${gradeDTO.seasonDTO.institutionDTO.campusDTO.name}/${gradeDTO.seasonDTO.institutionDTO.campusDTO.brandDTO.name})`,
|
|
159
|
+
}))
|
|
160
|
+
.sort((a: any, b: any) => a.text.localeCompare(b.text, undefined, { numeric: true }));
|
|
153
161
|
};
|
|
154
162
|
|
|
155
163
|
export const retrieveBranchDTOOptionList = (branchDTOList: any) => {
|
|
156
|
-
return branchDTOList
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
164
|
+
return branchDTOList
|
|
165
|
+
.map((branchDTO: any) => ({
|
|
166
|
+
value: branchDTO.id,
|
|
167
|
+
text: `${branchDTO.name} (${branchDTO.gradeDTO.name} - ${branchDTO.gradeDTO.seasonDTO.name}/${branchDTO.gradeDTO.seasonDTO.institutionDTO.name})`,
|
|
168
|
+
fullValue: branchDTO,
|
|
169
|
+
// text: `${branchDTO.name} (${branchDTO.gradeDTO.name} - ${branchDTO.gradeDTO.seasonDTO.name}/${branchDTO.gradeDTO.seasonDTO.institutionDTO.name}/${branchDTO.gradeDTO.seasonDTO.institutionDTO.campusDTO.name}/${branchDTO.gradeDTO.seasonDTO.institutionDTO.campusDTO.brandDTO.name})`,
|
|
170
|
+
}))
|
|
171
|
+
.sort((a: any, b: any) => a.text.localeCompare(b.text, undefined, { numeric: true }));
|
|
162
172
|
};
|
|
163
173
|
|
|
164
174
|
export const retrieveCampusDTOByUserProfileOptionList = (
|