@khanacademy/math-input 16.1.0 → 16.1.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/CHANGELOG.md +27 -0
- package/README.md +1 -9
- package/dist/components/input/cursor-styles.d.ts +5 -0
- package/dist/components/input/scroll-into-view.d.ts +1 -0
- package/dist/enums.d.ts +0 -29
- package/dist/es/index.css +0 -66
- package/dist/es/index.js +18 -45
- package/dist/es/index.js.map +1 -1
- package/dist/index.css +0 -66
- package/dist/index.js +18 -45
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +1 -40
- package/less/main.less +0 -3
- package/package.json +6 -10
- package/src/components/input/cursor-handle.tsx +1 -1
- package/src/components/input/cursor-styles.ts +10 -0
- package/src/components/input/math-input.tsx +5 -7
- package/src/components/input/scroll-into-view.ts +4 -1
- package/src/data/key-configs.ts +0 -9
- package/src/enums.ts +0 -43
- package/src/types.ts +1 -54
- package/tsconfig-build.tsbuildinfo +1 -1
- package/dist/components/common-style.d.ts +0 -21
- package/index.html +0 -21
- package/less/echo.less +0 -56
- package/less/popover.less +0 -22
- package/less/tabbar.less +0 -6
- package/src/components/common-style.ts +0 -46
- package/tools/svg-to-react/convert.py +0 -111
- package/tools/svg-to-react/icons/math-keypad-icon-0.svg +0 -32
- package/tools/svg-to-react/icons/math-keypad-icon-1.svg +0 -32
- package/tools/svg-to-react/icons/math-keypad-icon-2.svg +0 -32
- package/tools/svg-to-react/icons/math-keypad-icon-3.svg +0 -32
- package/tools/svg-to-react/icons/math-keypad-icon-4.svg +0 -32
- package/tools/svg-to-react/icons/math-keypad-icon-5.svg +0 -32
- package/tools/svg-to-react/icons/math-keypad-icon-6.svg +0 -32
- package/tools/svg-to-react/icons/math-keypad-icon-7.svg +0 -32
- package/tools/svg-to-react/icons/math-keypad-icon-8.svg +0 -32
- package/tools/svg-to-react/icons/math-keypad-icon-9.svg +0 -32
- package/tools/svg-to-react/icons/math-keypad-icon-addition.svg +0 -34
- package/tools/svg-to-react/icons/math-keypad-icon-cos.svg +0 -38
- package/tools/svg-to-react/icons/math-keypad-icon-delete.svg +0 -36
- package/tools/svg-to-react/icons/math-keypad-icon-dismiss.svg +0 -36
- package/tools/svg-to-react/icons/math-keypad-icon-division.svg +0 -36
- package/tools/svg-to-react/icons/math-keypad-icon-equals-not.svg +0 -50
- package/tools/svg-to-react/icons/math-keypad-icon-equals.svg +0 -48
- package/tools/svg-to-react/icons/math-keypad-icon-exponent-2.svg +0 -38
- package/tools/svg-to-react/icons/math-keypad-icon-exponent-3.svg +0 -38
- package/tools/svg-to-react/icons/math-keypad-icon-exponent.svg +0 -38
- package/tools/svg-to-react/icons/math-keypad-icon-fraction.svg +0 -42
- package/tools/svg-to-react/icons/math-keypad-icon-greater-than.svg +0 -46
- package/tools/svg-to-react/icons/math-keypad-icon-jump-out-base.svg +0 -44
- package/tools/svg-to-react/icons/math-keypad-icon-jump-out-denominator.svg +0 -48
- package/tools/svg-to-react/icons/math-keypad-icon-jump-out-exponent.svg +0 -44
- package/tools/svg-to-react/icons/math-keypad-icon-jump-out-parentheses.svg +0 -44
- package/tools/svg-to-react/icons/math-keypad-icon-less-than.svg +0 -46
- package/tools/svg-to-react/icons/math-keypad-icon-log-10.svg +0 -36
- package/tools/svg-to-react/icons/math-keypad-icon-log-e.svg +0 -36
- package/tools/svg-to-react/icons/math-keypad-icon-log.svg +0 -38
- package/tools/svg-to-react/icons/math-keypad-icon-multiplication-cross.svg +0 -40
- package/tools/svg-to-react/icons/math-keypad-icon-multiplication-dot.svg +0 -38
- package/tools/svg-to-react/icons/math-keypad-icon-percent.svg +0 -42
- package/tools/svg-to-react/icons/math-keypad-icon-radical-2.svg +0 -36
- package/tools/svg-to-react/icons/math-keypad-icon-radical-3.svg +0 -38
- package/tools/svg-to-react/icons/math-keypad-icon-radical.svg +0 -38
- package/tools/svg-to-react/icons/math-keypad-icon-radix-character.svg +0 -32
- package/tools/svg-to-react/icons/math-keypad-icon-sin.svg +0 -38
- package/tools/svg-to-react/icons/math-keypad-icon-subtraction.svg +0 -32
- package/tools/svg-to-react/icons/math-keypad-icon-tan.svg +0 -38
- package/tools/svg-to-react/symbol_map.py +0 -41
package/dist/index.css
CHANGED
|
@@ -1,45 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Styles for managing the popover animations.
|
|
3
|
-
*
|
|
4
|
-
* Ideally, we'd be generating these styles with Aphrodite (along with
|
|
5
|
-
* CSSTransitionGroup's support for custom classnames), but the generated
|
|
6
|
-
* styles have issues on mobile Safari.
|
|
7
|
-
* See: https://github.com/Khan/aphrodite/issues/68.
|
|
8
|
-
*
|
|
9
|
-
* If the animation durations change, the corresponding values in
|
|
10
|
-
* echo-manager.js must change as well.
|
|
11
|
-
*/
|
|
12
|
-
.echo-slide-and-fade-enter {
|
|
13
|
-
opacity: 1 !important;
|
|
14
|
-
transform: translate3d(0, 0, 0) !important;
|
|
15
|
-
}
|
|
16
|
-
.echo-slide-and-fade-enter.echo-slide-and-fade-enter-active {
|
|
17
|
-
opacity: 0 !important;
|
|
18
|
-
transform: translate3d(0, -33%, 0) !important;
|
|
19
|
-
/**
|
|
20
|
-
* TODO(charlie): These times are intentionally different, which means
|
|
21
|
-
* that the animation really "ends" after 400ms
|
|
22
|
-
* cubic-bezier(1, 0, 0.9, 1) (since the opacity goes to 0), even though
|
|
23
|
-
* the transform doesn't complete. There's probably a way to achieve the
|
|
24
|
-
* same effect by manipulating the transform's Bezier curve and total
|
|
25
|
-
* displacement.
|
|
26
|
-
*/
|
|
27
|
-
transition: transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
|
|
28
|
-
}
|
|
29
|
-
.echo-fade-only-enter {
|
|
30
|
-
opacity: 1 !important;
|
|
31
|
-
}
|
|
32
|
-
.echo-fade-only-enter.echo-fade-only-enter-active {
|
|
33
|
-
opacity: 0 !important;
|
|
34
|
-
transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
|
|
35
|
-
}
|
|
36
|
-
.echo-long-fade-only-enter {
|
|
37
|
-
opacity: 1 !important;
|
|
38
|
-
}
|
|
39
|
-
.echo-long-fade-only-enter.echo-long-fade-only-enter-active {
|
|
40
|
-
opacity: 0 !important;
|
|
41
|
-
transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
|
|
42
|
-
}
|
|
43
1
|
.keypad-input {
|
|
44
2
|
outline: none !important;
|
|
45
3
|
}
|
|
@@ -120,24 +78,6 @@
|
|
|
120
78
|
color: white !important;
|
|
121
79
|
display: inline-block !important;
|
|
122
80
|
}
|
|
123
|
-
/**
|
|
124
|
-
* Styles for managing the popover animations.
|
|
125
|
-
*
|
|
126
|
-
* Ideally, we'd be generating these styles with Aphrodite (along with
|
|
127
|
-
* CSSTransitionGroup's support for custom classnames), but the generated
|
|
128
|
-
* styles have issues on mobile Safari.
|
|
129
|
-
* See: https://github.com/Khan/aphrodite/issues/68.
|
|
130
|
-
*
|
|
131
|
-
* If the animation durations change, the corresponding values in
|
|
132
|
-
* popover-manager.js must change as well.
|
|
133
|
-
*/
|
|
134
|
-
.popover-enter {
|
|
135
|
-
opacity: 0 !important;
|
|
136
|
-
}
|
|
137
|
-
.popover-enter.popover-enter-active {
|
|
138
|
-
opacity: 1 !important;
|
|
139
|
-
transition: opacity 200ms ease-out !important;
|
|
140
|
-
}
|
|
141
81
|
/*
|
|
142
82
|
* MathQuill v0.10.1 http://mathquill.com
|
|
143
83
|
* by Han, Jeanine, and Mary maintainers@mathquill.com
|
|
@@ -574,9 +514,3 @@
|
|
|
574
514
|
margin-top: -0.1em;
|
|
575
515
|
}
|
|
576
516
|
|
|
577
|
-
.tabbar_item {
|
|
578
|
-
background-color: red;
|
|
579
|
-
}
|
|
580
|
-
.tabbar_item:focus {
|
|
581
|
-
background-color: green;
|
|
582
|
-
}
|
package/dist/index.js
CHANGED
|
@@ -48,7 +48,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
|
48
48
|
|
|
49
49
|
// This file is processed by a Rollup plugin (replace) to inject the production
|
|
50
50
|
const libName = "@khanacademy/math-input";
|
|
51
|
-
const libVersion = "16.1.
|
|
51
|
+
const libVersion = "16.1.2";
|
|
52
52
|
perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
|
|
53
53
|
|
|
54
54
|
function _extends() {
|
|
@@ -134,11 +134,6 @@ class View extends React__namespace.Component {
|
|
|
134
134
|
/**
|
|
135
135
|
* Common parameters used to style components.
|
|
136
136
|
*/
|
|
137
|
-
const wonderBlocksBlue = Color__default["default"].blue;
|
|
138
|
-
const offBlack = Color__default["default"].offBlack;
|
|
139
|
-
Color__default["default"].offBlack32;
|
|
140
|
-
Color__default["default"].offBlack16;
|
|
141
|
-
Color__default["default"].offBlack8;
|
|
142
137
|
const cursorHandleRadiusPx = 11;
|
|
143
138
|
|
|
144
139
|
// The amount to multiply the radius by to get the distance from the
|
|
@@ -146,10 +141,6 @@ const cursorHandleRadiusPx = 11;
|
|
|
146
141
|
// one quadrant replace with a square. The hypotenuse of the square is
|
|
147
142
|
// 1.045 times the radius of the circle.
|
|
148
143
|
const cursorHandleDistanceMultiplier = 1.045;
|
|
149
|
-
// HACK(charlie): This should be injected by webapp somehow.
|
|
150
|
-
// TODO(charlie): Add a link to the webapp location as soon as the footer
|
|
151
|
-
// has settled down.
|
|
152
|
-
const toolbarHeightPx = 60;
|
|
153
144
|
|
|
154
145
|
/**
|
|
155
146
|
* Renders the green tear-shaped handle under the cursor.
|
|
@@ -1353,6 +1344,11 @@ class MathWrapper {
|
|
|
1353
1344
|
* TODO(charlie): Move this scroll logic out of our components and into a higher
|
|
1354
1345
|
* level in the component tree--perhaps even into webapp, beyond Perseus.
|
|
1355
1346
|
*/
|
|
1347
|
+
|
|
1348
|
+
// HACK(charlie): This should be injected by webapp somehow.
|
|
1349
|
+
// TODO(charlie): Add a link to the webapp location as soon as the footer
|
|
1350
|
+
// has settled down.
|
|
1351
|
+
const toolbarHeightPx = 60;
|
|
1356
1352
|
const scrollIntoView = (containerNode, keypadNode) => {
|
|
1357
1353
|
// TODO(charlie): There's no need for us to be reading the keypad bounds
|
|
1358
1354
|
// here, since they're pre-determined by logic in the store. We should
|
|
@@ -2070,7 +2066,7 @@ class MathInput extends React__namespace.Component {
|
|
|
2070
2066
|
...inlineStyles.innerContainer,
|
|
2071
2067
|
borderWidth: this.getBorderWidthPx(),
|
|
2072
2068
|
...(focused ? {
|
|
2073
|
-
borderColor:
|
|
2069
|
+
borderColor: Color__default["default"].blue
|
|
2074
2070
|
} : {}),
|
|
2075
2071
|
...style
|
|
2076
2072
|
};
|
|
@@ -2154,7 +2150,7 @@ const inlineStyles = {
|
|
|
2154
2150
|
borderStyle: "solid",
|
|
2155
2151
|
borderColor: Color__default["default"].offBlack50,
|
|
2156
2152
|
borderRadius: 4,
|
|
2157
|
-
color: offBlack
|
|
2153
|
+
color: Color__default["default"].offBlack
|
|
2158
2154
|
}
|
|
2159
2155
|
};
|
|
2160
2156
|
|
|
@@ -2393,33 +2389,6 @@ function Tabbar(props) {
|
|
|
2393
2389
|
})));
|
|
2394
2390
|
}
|
|
2395
2391
|
|
|
2396
|
-
/**
|
|
2397
|
-
* Constants that are shared between multiple files.
|
|
2398
|
-
*/
|
|
2399
|
-
|
|
2400
|
-
let KeypadType = /*#__PURE__*/function (KeypadType) {
|
|
2401
|
-
KeypadType["FRACTION"] = "FRACTION";
|
|
2402
|
-
KeypadType["EXPRESSION"] = "EXPRESSION";
|
|
2403
|
-
return KeypadType;
|
|
2404
|
-
}({});
|
|
2405
|
-
let BorderDirection = /*#__PURE__*/function (BorderDirection) {
|
|
2406
|
-
BorderDirection["LEFT"] = "LEFT";
|
|
2407
|
-
BorderDirection["BOTTOM"] = "BOTTOM";
|
|
2408
|
-
return BorderDirection;
|
|
2409
|
-
}({});
|
|
2410
|
-
({
|
|
2411
|
-
LEFT: [BorderDirection.LEFT],
|
|
2412
|
-
BOTTOM: [BorderDirection.BOTTOM],
|
|
2413
|
-
ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
|
|
2414
|
-
NONE: []
|
|
2415
|
-
});
|
|
2416
|
-
let IconType = /*#__PURE__*/function (IconType) {
|
|
2417
|
-
IconType["MATH"] = "MATH";
|
|
2418
|
-
IconType["SVG"] = "SVG";
|
|
2419
|
-
IconType["TEXT"] = "TEXT";
|
|
2420
|
-
return IconType;
|
|
2421
|
-
}({});
|
|
2422
|
-
|
|
2423
2392
|
/**
|
|
2424
2393
|
* This file contains configuration settings for the buttons in the keypad.
|
|
2425
2394
|
*/
|
|
@@ -2427,7 +2396,6 @@ const getDefaultOperatorFields = _ref => {
|
|
|
2427
2396
|
let {
|
|
2428
2397
|
key,
|
|
2429
2398
|
keyType = "OPERATOR",
|
|
2430
|
-
iconType = IconType.SVG,
|
|
2431
2399
|
ariaLabel = key,
|
|
2432
2400
|
data = key
|
|
2433
2401
|
} = _ref;
|
|
@@ -2436,7 +2404,6 @@ const getDefaultOperatorFields = _ref => {
|
|
|
2436
2404
|
type: keyType,
|
|
2437
2405
|
ariaLabel,
|
|
2438
2406
|
icon: {
|
|
2439
|
-
type: iconType,
|
|
2440
2407
|
data
|
|
2441
2408
|
}
|
|
2442
2409
|
};
|
|
@@ -2445,7 +2412,6 @@ const getDefaultValueFields = _ref2 => {
|
|
|
2445
2412
|
let {
|
|
2446
2413
|
key,
|
|
2447
2414
|
keyType = "VALUE",
|
|
2448
|
-
iconType = IconType.MATH,
|
|
2449
2415
|
ariaLabel = key,
|
|
2450
2416
|
data = key
|
|
2451
2417
|
} = _ref2;
|
|
@@ -2454,7 +2420,6 @@ const getDefaultValueFields = _ref2 => {
|
|
|
2454
2420
|
type: keyType,
|
|
2455
2421
|
ariaLabel,
|
|
2456
2422
|
icon: {
|
|
2457
|
-
type: iconType,
|
|
2458
2423
|
data
|
|
2459
2424
|
}
|
|
2460
2425
|
};
|
|
@@ -2464,7 +2429,6 @@ const getDefaultNumberFields = _ref3 => {
|
|
|
2464
2429
|
key,
|
|
2465
2430
|
data = key.replace("NUM_", ""),
|
|
2466
2431
|
keyType = "VALUE",
|
|
2467
|
-
iconType = IconType.TEXT,
|
|
2468
2432
|
ariaLabel = data
|
|
2469
2433
|
} = _ref3;
|
|
2470
2434
|
return {
|
|
@@ -2472,7 +2436,6 @@ const getDefaultNumberFields = _ref3 => {
|
|
|
2472
2436
|
type: keyType,
|
|
2473
2437
|
ariaLabel,
|
|
2474
2438
|
icon: {
|
|
2475
|
-
type: iconType,
|
|
2476
2439
|
data
|
|
2477
2440
|
}
|
|
2478
2441
|
};
|
|
@@ -5890,6 +5853,16 @@ const KeyArray = ["PLUS", "MINUS", "NEGATIVE", "TIMES", "DIVIDE", "DECIMAL", "PE
|
|
|
5890
5853
|
// Perseus' Expression MathInput
|
|
5891
5854
|
"PHI", "NTHROOT3", "POW", "LOG_B"];
|
|
5892
5855
|
|
|
5856
|
+
/**
|
|
5857
|
+
* Constants that are shared between multiple files.
|
|
5858
|
+
*/
|
|
5859
|
+
|
|
5860
|
+
let KeypadType = /*#__PURE__*/function (KeypadType) {
|
|
5861
|
+
KeypadType["FRACTION"] = "FRACTION";
|
|
5862
|
+
KeypadType["EXPRESSION"] = "EXPRESSION";
|
|
5863
|
+
return KeypadType;
|
|
5864
|
+
}({});
|
|
5865
|
+
|
|
5893
5866
|
exports.CursorContext = CursorContext;
|
|
5894
5867
|
exports.DesktopKeypad = Keypad;
|
|
5895
5868
|
exports.KeyArray = KeyArray;
|