@khanacademy/math-input 17.0.3 → 17.0.5
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/es/index.js +2 -2
- package/dist/es/index.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +5 -2
- package/.eslintrc.js +0 -18
- package/CHANGELOG.md +0 -654
- package/less/main.less +0 -2
- package/less/overrides.less +0 -122
- package/src/components/__tests__/integration.test.tsx +0 -300
- package/src/components/aphrodite-css-transition-group/index.tsx +0 -78
- package/src/components/aphrodite-css-transition-group/transition-child.tsx +0 -192
- package/src/components/aphrodite-css-transition-group/types.ts +0 -20
- package/src/components/aphrodite-css-transition-group/util.ts +0 -97
- package/src/components/input/__tests__/context-tracking.test.ts +0 -176
- package/src/components/input/__tests__/mathquill-helpers.test.ts +0 -105
- package/src/components/input/__tests__/mathquill.test.ts +0 -747
- package/src/components/input/__tests__/test-math-wrapper.ts +0 -29
- package/src/components/input/cursor-contexts.ts +0 -37
- package/src/components/input/cursor-handle.tsx +0 -137
- package/src/components/input/cursor-styles.ts +0 -10
- package/src/components/input/drag-listener.ts +0 -79
- package/src/components/input/math-input.tsx +0 -1036
- package/src/components/input/math-wrapper.ts +0 -189
- package/src/components/input/mathquill-helpers.ts +0 -262
- package/src/components/input/mathquill-instance.ts +0 -106
- package/src/components/input/mathquill-types.ts +0 -32
- package/src/components/input/scroll-into-view.ts +0 -65
- package/src/components/key-handlers/__tests__/handle-jump-out.test.ts +0 -94
- package/src/components/key-handlers/handle-arrow.ts +0 -70
- package/src/components/key-handlers/handle-backspace.ts +0 -277
- package/src/components/key-handlers/handle-exponent.ts +0 -53
- package/src/components/key-handlers/handle-jump-out.ts +0 -107
- package/src/components/key-handlers/key-translator.ts +0 -222
- package/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap +0 -1913
- package/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap +0 -600
- package/src/components/keypad/__tests__/keypad-button.test.tsx +0 -84
- package/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx +0 -304
- package/src/components/keypad/__tests__/keypad-v2.cypress.ts +0 -16
- package/src/components/keypad/__tests__/keypad.test.tsx +0 -321
- package/src/components/keypad/__tests__/mobile-keypad.test.tsx +0 -115
- package/src/components/keypad/__tests__/test-data-tabs.ts +0 -21
- package/src/components/keypad/button-assets.tsx +0 -1880
- package/src/components/keypad/index.tsx +0 -2
- package/src/components/keypad/keypad-button.stories.tsx +0 -81
- package/src/components/keypad/keypad-button.tsx +0 -124
- package/src/components/keypad/keypad-mathquill.stories.tsx +0 -109
- package/src/components/keypad/keypad-pages/extras-page.tsx +0 -35
- package/src/components/keypad/keypad-pages/fractions-page.tsx +0 -125
- package/src/components/keypad/keypad-pages/geometry-page.tsx +0 -34
- package/src/components/keypad/keypad-pages/keypad-pages.stories.tsx +0 -37
- package/src/components/keypad/keypad-pages/numbers-page.tsx +0 -94
- package/src/components/keypad/keypad-pages/operators-page.tsx +0 -117
- package/src/components/keypad/keypad.tsx +0 -233
- package/src/components/keypad/mobile-keypad-internals.tsx +0 -240
- package/src/components/keypad/mobile-keypad.tsx +0 -24
- package/src/components/keypad/navigation-button.tsx +0 -127
- package/src/components/keypad/navigation-pad.stories.tsx +0 -26
- package/src/components/keypad/navigation-pad.tsx +0 -67
- package/src/components/keypad/shared-keys.tsx +0 -109
- package/src/components/keypad/utils.ts +0 -34
- package/src/components/keypad-context.tsx +0 -70
- package/src/components/prop-types.ts +0 -16
- package/src/components/tabbar/__tests__/tabbar.test.tsx +0 -105
- package/src/components/tabbar/icons.tsx +0 -122
- package/src/components/tabbar/index.ts +0 -1
- package/src/components/tabbar/item.tsx +0 -146
- package/src/components/tabbar/tabbar.stories.tsx +0 -83
- package/src/components/tabbar/tabbar.tsx +0 -65
- package/src/data/key-configs.ts +0 -770
- package/src/data/keys.ts +0 -123
- package/src/enums.ts +0 -27
- package/src/fake-react-native-web/index.ts +0 -11
- package/src/fake-react-native-web/text.tsx +0 -55
- package/src/fake-react-native-web/view.tsx +0 -91
- package/src/full-keypad.stories.tsx +0 -142
- package/src/full-mobile-input.stories.tsx +0 -115
- package/src/index.ts +0 -52
- package/src/types.ts +0 -70
- package/src/utils.test.ts +0 -33
- package/src/utils.ts +0 -61
- package/src/version.ts +0 -10
- package/tsconfig-build.json +0 -11
- package/tsconfig-build.tsbuildinfo +0 -1
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
import type {KeypadPageType} from "../../types";
|
|
4
|
-
|
|
5
|
-
type Props = {
|
|
6
|
-
tintColor: string;
|
|
7
|
-
type: KeypadPageType;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
const IconAsset = function ({tintColor, type}: Props): React.ReactElement {
|
|
11
|
-
switch (type) {
|
|
12
|
-
case "Geometry": {
|
|
13
|
-
return (
|
|
14
|
-
<svg
|
|
15
|
-
width="32"
|
|
16
|
-
height="32"
|
|
17
|
-
viewBox="0 0 32 32"
|
|
18
|
-
fill="none"
|
|
19
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
20
|
-
>
|
|
21
|
-
<path
|
|
22
|
-
fillRule="evenodd"
|
|
23
|
-
clipRule="evenodd"
|
|
24
|
-
d="M7.57584 7.09442c.35139-.16458.76626-.11103 1.06434.13737L26.6402 22.2318c.3234.2695.4434.7128.3001 1.1086C26.7969 23.7363 26.421 24 26 24H8c-.55228 0-1-.4477-1-1V8.00001c0-.38802.22446-.74101.57584-.90559zM9 10.1351V17h4c.5523 0 1 .4477 1 1v4h9.238L9 10.1351zM12 22v-3H9v3h3z"
|
|
25
|
-
fill={tintColor}
|
|
26
|
-
/>
|
|
27
|
-
</svg>
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
|
-
case "Operators": {
|
|
31
|
-
return (
|
|
32
|
-
<svg
|
|
33
|
-
width="32"
|
|
34
|
-
height="32"
|
|
35
|
-
viewBox="0 0 32 32"
|
|
36
|
-
fill="none"
|
|
37
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
38
|
-
>
|
|
39
|
-
<path
|
|
40
|
-
fillRule="evenodd"
|
|
41
|
-
clipRule="evenodd"
|
|
42
|
-
d="M29 6h1v1h-1V6zm-2 0c0-1.10457.8954-2 2-2h1c1.1046 0 2 .89543 2 2v1c0 1.10457-.8954 2-2 2h-1c-1.1046 0-2-.89543-2-2V6zm-15.8682.50386C11.3098 6.19229 11.6411 6 12 6h2c.5523 0 1 .44772 1 1s-.4477 1-1 1h-1.4197l-3.71206 6.4961c-.18297.3202-.52733.5137-.89599.5035-.36865-.0102-.70175-.2225-.86668-.5524l-2-4c-.24699-.49396-.04676-1.09464.44722-1.34163.49397-.24699 1.09465-.04676 1.34164.44722L8.0588 11.8815l3.073-5.37764zM7.70676 16.2925c.39072.3904.39103 1.0235.00069 1.4143-.42202.4224-.86362 1.0235-1.19588 1.659C6.17039 20.0184 6 20.601 6 21c0 .3789.17235.9897.51638 1.6649.33677.661.7685 1.2472 1.15148 1.5908.41106.3689.44528 1.0011.07643 1.4122-.36885.411-1.00109.4452-1.41215.0764-.61604-.5528-1.18431-1.3599-1.5978-2.1715C4.32813 22.7755 3.99999 21.8345 4 21c.00001-.8609.3301-1.7783.73917-2.5608.41798-.7995.97637-1.5684 1.55338-2.146.39033-.3907 1.0235-.391 1.41421-.0007zm3.58644 0c.3908-.3903 1.0239-.39 1.4143.0007.577.5776 1.1353 1.3465 1.5533 2.146C14.6699 19.2217 15 20.1391 15 21c0 .8345-.3281 1.7755-.7343 2.5728-.4135.8116-.9818 1.6187-1.5978 2.1715-.4111.3688-1.0433.3346-1.4122-.0764-.3688-.4111-.3346-1.0433.0764-1.4122.383-.3436.8148-.9298 1.1515-1.5908.344-.6752.5164-1.286.5164-1.6649 0-.399-.1704-.9816-.5116-1.6342-.3322-.6355-.7738-1.2366-1.1959-1.659-.3903-.3908-.39-1.0239.0007-1.4143zm16.6431 1.3564c.1939.5171-.0681 1.0935-.5852 1.2874L21.848 21l5.5031 2.0637c.5171.1939.7791.7703.5852 1.2874-.1939.5171-.7703.7791-1.2874.5852l-8-3C18.2586 21.79 18 21.4168 18 21c0-.4168.2586-.79.6489-.9363l8-3c.5171-.1939 1.0935.0681 1.2874.5852zM21 8v5h3V8h-3zm-1-2c-.5523 0-1 .44772-1 1v7c0 .5523.4477 1 1 1h5c.5523 0 1-.4477 1-1V7c0-.55228-.4477-1-1-1h-5z"
|
|
43
|
-
fill={tintColor}
|
|
44
|
-
/>
|
|
45
|
-
</svg>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
case "Numbers": {
|
|
49
|
-
return (
|
|
50
|
-
<svg
|
|
51
|
-
width="32"
|
|
52
|
-
height="32"
|
|
53
|
-
viewBox="0 0 32 32"
|
|
54
|
-
fill="none"
|
|
55
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
56
|
-
>
|
|
57
|
-
<path
|
|
58
|
-
d="M10.4123 19.5794v1.421H4.71434v-1.421h2.016v-5.558c0-.1213.00233-.245.007-.371.00466-.126.01166-.2543.021-.385l-1.33 1.106c-.09334.07-.18434.1144-.273.133-.08867.0187-.17267.021-.252.007-.07934-.0186-.14934-.0466-.21-.084-.06067-.042-.10734-.084-.14-.126l-.609-.819 3.122-2.646h1.589v8.743h1.75696zm8.3801-.35c.21 0 .3734.0584.49.175.1214.1167.182.2707.182.462v1.134h-7.042v-.63c0-.1213.0257-.252.077-.392.0514-.1446.1377-.2753.259-.392l3.01-3.017c.2567-.2566.483-.5016.679-.735.196-.238.3594-.469.49-.693.1307-.2286.2287-.4596.294-.693.0654-.2333.098-.4783.098-.735 0-.4526-.1166-.7956-.35-1.029-.2333-.238-.5623-.357-.987-.357-.1866 0-.3593.028-.518.084-.154.0514-.294.1237-.42.217-.1213.0934-.2263.203-.315.329-.0886.126-.154.2637-.196.413-.084.2334-.1983.3897-.343.469-.14.0747-.3406.091-.602.049l-1.022-.182c.0747-.4946.2147-.9286.42-1.302.2054-.3733.462-.6836.77-.931.308-.2473.6604-.4316 1.057-.553.3967-.126.8237-.189 1.281-.189.4807 0 .917.0724 1.309.217.3967.14.735.3384 1.015.595.28.252.497.5577.651.917.154.3594.231.756.231 1.19 0 .3734-.0536.7187-.161 1.036-.1073.3174-.2543.6207-.441.91-.182.2847-.3943.5624-.637.833-.2426.2707-.4993.5437-.77.819l-2.156 2.205c.238-.07.4737-.1236.707-.161.2334-.042.4527-.063.658-.063h2.282zm2.6611-5.523c.0747-.4946.2147-.9286.42-1.302.2054-.3733.462-.6836.77-.931.308-.2473.658-.4316 1.05-.553.3967-.126.8237-.189 1.281-.189.4854 0 .9194.07 1.302.21.3874.1354.714.322.98.56.266.238.469.5157.609.833.1447.3174.217.658.217 1.022 0 .322-.035.6067-.105.854-.0653.2427-.1656.455-.301.637-.1306.182-.294.336-.49.462-.1913.126-.413.231-.665.315 1.1667.3827 1.75 1.1597 1.75 2.331 0 .518-.0956.9754-.287 1.372-.1913.392-.448.721-.77.987s-.6976.4667-1.127.602c-.4246.1307-.8703.196-1.337.196-.4946 0-.931-.056-1.309-.168-.378-.112-.7116-.28-1.001-.504-.2846-.224-.5296-.504-.735-.84-.2053-.3406-.385-.7373-.539-1.19l.854-.35c.224-.0933.4317-.119.623-.077.196.042.336.1447.42.308.0934.1774.1914.3407.294.49.1074.1494.2264.28.357.392.1307.1074.2777.1914.441.252.168.0607.3594.091.574.091.2707 0 .5064-.0443.707-.133.2007-.0886.3687-.203.504-.343.1354-.1446.2357-.3056.301-.483.07-.182.105-.3616.105-.539 0-.2333-.021-.4433-.063-.63-.042-.1913-.14-.3523-.294-.483-.1493-.1353-.3733-.238-.672-.308-.294-.0746-.6953-.112-1.204-.112v-1.358c.4247 0 .7724-.035 1.043-.105.2707-.07.483-.168.637-.294.154-.126.259-.2776.315-.455.0607-.1773.091-.371.091-.581 0-.4433-.1166-.7816-.35-1.015-.2286-.2333-.5553-.35-.98-.35-.1866 0-.3593.028-.518.084-.154.0514-.294.1237-.42.217-.1213.0934-.2263.203-.315.329-.0886.126-.154.2637-.196.413-.0886.2334-.203.3897-.343.469-.14.0747-.343.091-.609.049l-1.015-.182z"
|
|
59
|
-
fill={tintColor}
|
|
60
|
-
/>
|
|
61
|
-
</svg>
|
|
62
|
-
);
|
|
63
|
-
}
|
|
64
|
-
case "Extras": {
|
|
65
|
-
return (
|
|
66
|
-
<svg
|
|
67
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
68
|
-
width="32"
|
|
69
|
-
height="32"
|
|
70
|
-
fill="none"
|
|
71
|
-
viewBox="0 0 32 32"
|
|
72
|
-
>
|
|
73
|
-
<g clipPath="url(#a)">
|
|
74
|
-
<path
|
|
75
|
-
fill={tintColor}
|
|
76
|
-
fillRule="evenodd"
|
|
77
|
-
d="M6.127 10.454c.224-.032.403-.05.53-.05.591 0 1.137.153 1.63.459.398.239.713.529.94.872l.188-.248.005-.007.006-.006c.619-.703 1.347-1.07 2.178-1.07.691 0 1.269.204 1.71.626.454.403.686.91.686 1.51 0 .533-.156.994-.476 1.37-.312.383-.738.574-1.254.574-.345 0-.643-.101-.878-.317a1.1 1.1 0 0 1-.353-.843c0-.405.11-.76.342-1.051.153-.193.354-.352.596-.479a1.416 1.416 0 0 0-.492-.07c-.195 0-.316.016-.38.035-.53.226-.938.694-1.208 1.445l-.001.003c-.02.05-.085.289-.202.74-.115.443-.275 1.077-.481 1.901-.414 1.641-.633 2.547-.662 2.74l-.002.01a3.423 3.423 0 0 0-.067.673c0 .337.097.581.272.756.176.177.413.272.733.272.6 0 1.15-.247 1.657-.768.518-.549.864-1.146 1.044-1.791l.001-.004a1.2 1.2 0 0 1 .088-.224.368.368 0 0 1 .161-.164.564.564 0 0 1 .198-.056 2.19 2.19 0 0 1 .276-.014c.159 0 .305.016.42.064.059.025.12.063.167.122.05.063.073.137.073.213 0 .023-.004.048-.005.057a12.52 12.52 0 0 1-.046.245l-.004.015c-.281 1.026-.86 1.917-1.73 2.67l-.007.007c-.776.611-1.605.925-2.484.925-1.08 0-1.93-.45-2.53-1.33-.453.605-1.015 1.024-1.685 1.248l-.01.003-.011.002a3.23 3.23 0 0 1-.664.053c-.974 0-1.703-.35-2.13-1.078A2.05 2.05 0 0 1 2 19.437c0-.52.158-.975.478-1.349.326-.38.749-.572 1.252-.572.372 0 .69.091.913.31.224.218.318.531.318.898 0 .327-.078.621-.241.874a1.706 1.706 0 0 1-.707.597l-.018.009c.158.063.331.095.52.095.467 0 .902-.285 1.295-.966l.002-.005c.071-.115.185-.417.341-.938.154-.51.341-1.209.563-2.096v-.002c.095-.364.198-.767.31-1.21.11-.444.188-.78.235-1.014l.002-.013c.058-.216.098-.36.119-.425.077-.42.113-.709.113-.877 0-.342-.092-.588-.254-.762-.159-.171-.384-.267-.704-.267-.652 0-1.217.251-1.704.768l-.002.002A4.215 4.215 0 0 0 3.79 14.28a1.084 1.084 0 0 1-.065.207.41.41 0 0 1-.14.176l-.01.007-.012.006a.35.35 0 0 1-.104.03 1.16 1.16 0 0 1-.095.01 5.04 5.04 0 0 1-.275.006H2.67l-.061-.061c-.109-.11-.204-.247-.204-.41v-.015l.003-.015c.07-.472.335-1.05.768-1.723l.001-.002c.771-1.165 1.754-1.857 2.949-2.042h.002Z"
|
|
78
|
-
clipRule="evenodd"
|
|
79
|
-
/>
|
|
80
|
-
<path
|
|
81
|
-
fill={tintColor}
|
|
82
|
-
d="M21.084 10.284c.932-.008 2.301-.013 4.107-.013 1.325 0 2.327.003 3.007.007a75.812 75.812 0 0 1 .99.013c.025 0 .047.002.065.003h.002c.01 0 .04.003.067.01l.01.002.011.004c.201.07.37.183.488.347a.966.966 0 0 1 .169.574c0 .3-.078.568-.248.79-.168.221-.411.377-.708.479h-.002a1.01 1.01 0 0 1-.221.034 8.213 8.213 0 0 1-.35.016c-.29.008-.696.012-1.219.012h-1.39l-.038.223v.001c-.198 1.185-.295 2.156-.295 2.916 0 1.446.251 2.746.75 3.905l.004.007c.059.153.105.284.137.393.03.103.053.205.053.29 0 .359-.16.68-.44.961-.278.296-.63.445-1.041.445-.255 0-.492-.03-.654-.139l-.009-.006-.008-.006c-.126-.101-.236-.274-.338-.477l-.006-.012c-.331-.768-.49-1.722-.49-2.852 0-.595.007-1.002.025-1.212v-.005c.118-1.157.377-2.551.776-4.18v-.002c.024-.096.045-.18.061-.25h-1.948c-.008.038-.02.086-.034.143l-.002.007a35.14 35.14 0 0 0-.146.537c-.05.232-.1.448-.15.648v.001a230.673 230.673 0 0 1-1.312 4.936 41.285 41.285 0 0 1-.411 1.384c-.104.322-.19.557-.256.681-.115.262-.28.473-.5.617-.225.146-.49.212-.783.212-.449 0-.807-.173-1.006-.549l-.006-.011-.005-.012a1.37 1.37 0 0 1-.067-.486v-.326l.346-.745c1.24-2.61 2.136-4.858 2.695-6.747l.002-.008.094-.281h-.463c-.662 0-1.105.025-1.346.07-.198.04-.47.173-.824.43l-.007.005-.007.005c-.366.228-.69.542-.97.947-.044.069-.085.13-.125.18a.651.651 0 0 1-.141.136l-.027.017-.03.01a.8.8 0 0 1-.19.03c-.07.005-.156.008-.258.008-.17 0-.335-.021-.465-.09a.437.437 0 0 1-.216-.546c.014-.042.034-.086.057-.132.047-.093.113-.208.198-.343l.003-.005c1.147-1.745 2.311-2.774 3.508-2.96a2.345 2.345 0 0 1 .158-.015 60.295 60.295 0 0 1 1.369-.026Z"
|
|
83
|
-
/>
|
|
84
|
-
</g>
|
|
85
|
-
<defs>
|
|
86
|
-
<clipPath id="a">
|
|
87
|
-
<path
|
|
88
|
-
fill="#fff"
|
|
89
|
-
d="M0 0h28v11.457H0z"
|
|
90
|
-
transform="translate(2 10.271)"
|
|
91
|
-
/>
|
|
92
|
-
</clipPath>
|
|
93
|
-
</defs>
|
|
94
|
-
</svg>
|
|
95
|
-
);
|
|
96
|
-
}
|
|
97
|
-
case "Dismiss": {
|
|
98
|
-
return (
|
|
99
|
-
<svg
|
|
100
|
-
width="44"
|
|
101
|
-
height="44"
|
|
102
|
-
viewBox="0 0 44 44"
|
|
103
|
-
fill="none"
|
|
104
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
105
|
-
>
|
|
106
|
-
<path
|
|
107
|
-
fillRule="evenodd"
|
|
108
|
-
clipRule="evenodd"
|
|
109
|
-
d="M28.7071 15.2929C28.3166 14.9024 27.6834 14.9024 27.2929 15.2929L22 20.5858L16.7071 15.2929C16.3166 14.9024 15.6834 14.9024 15.2929 15.2929C14.9024 15.6834 14.9024 16.3166 15.2929 16.7071L20.5858 22L15.2929 27.2929C14.9024 27.6834 14.9024 28.3166 15.2929 28.7071C15.6834 29.0976 16.3166 29.0976 16.7071 28.7071L22 23.4142L27.2929 28.7071C27.6834 29.0976 28.3166 29.0976 28.7071 28.7071C29.0976 28.3166 29.0976 27.6834 28.7071 27.2929L23.4142 22L28.7071 16.7071C29.0976 16.3166 29.0976 15.6834 28.7071 15.2929Z"
|
|
110
|
-
fill={tintColor}
|
|
111
|
-
/>
|
|
112
|
-
</svg>
|
|
113
|
-
);
|
|
114
|
-
}
|
|
115
|
-
default: {
|
|
116
|
-
// type as never;
|
|
117
|
-
throw new Error("Invalid icon type");
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
export default IconAsset;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {default} from "./tabbar";
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
import Clickable from "@khanacademy/wonder-blocks-clickable";
|
|
2
|
-
import Color from "@khanacademy/wonder-blocks-color";
|
|
3
|
-
import {View} from "@khanacademy/wonder-blocks-core";
|
|
4
|
-
import {StyleSheet} from "aphrodite";
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
|
|
7
|
-
import IconAsset from "./icons";
|
|
8
|
-
|
|
9
|
-
import type {KeypadPageType} from "../../types";
|
|
10
|
-
|
|
11
|
-
const styles = StyleSheet.create({
|
|
12
|
-
base: {
|
|
13
|
-
display: "flex",
|
|
14
|
-
width: 44,
|
|
15
|
-
height: 38,
|
|
16
|
-
boxSizing: "border-box",
|
|
17
|
-
borderRadius: 3,
|
|
18
|
-
border: `1px solid transparent`,
|
|
19
|
-
marginRight: 1,
|
|
20
|
-
marginLeft: 1,
|
|
21
|
-
},
|
|
22
|
-
hovered: {
|
|
23
|
-
background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
|
|
24
|
-
border: "1px solid #1865F2",
|
|
25
|
-
},
|
|
26
|
-
pressed: {
|
|
27
|
-
background: "#1B50B3",
|
|
28
|
-
},
|
|
29
|
-
focused: {
|
|
30
|
-
outline: "none",
|
|
31
|
-
border: `2px solid ${Color.blue}`,
|
|
32
|
-
},
|
|
33
|
-
innerBox: {
|
|
34
|
-
boxSizing: "border-box",
|
|
35
|
-
border: `1px solid transparent`,
|
|
36
|
-
borderRadius: 2,
|
|
37
|
-
display: "flex",
|
|
38
|
-
flex: 1,
|
|
39
|
-
justifyContent: "center",
|
|
40
|
-
alignItems: "center",
|
|
41
|
-
},
|
|
42
|
-
innerBoxPressed: {
|
|
43
|
-
border: `1px solid ${Color.white}`,
|
|
44
|
-
},
|
|
45
|
-
activeIndicator: {
|
|
46
|
-
position: "absolute",
|
|
47
|
-
boxSizing: "border-box",
|
|
48
|
-
bottom: 3,
|
|
49
|
-
width: 36,
|
|
50
|
-
height: 3,
|
|
51
|
-
marginLeft: 3,
|
|
52
|
-
},
|
|
53
|
-
clickable: {
|
|
54
|
-
":focus": {
|
|
55
|
-
outline: `none`,
|
|
56
|
-
},
|
|
57
|
-
},
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
function imageTintColor(
|
|
61
|
-
itemState: ItemState,
|
|
62
|
-
hovered: boolean,
|
|
63
|
-
focused: boolean,
|
|
64
|
-
pressed: boolean,
|
|
65
|
-
): string {
|
|
66
|
-
if (itemState === "disabled") {
|
|
67
|
-
return Color.offBlack64;
|
|
68
|
-
} else if (pressed) {
|
|
69
|
-
return Color.white;
|
|
70
|
-
} else if (itemState === "active") {
|
|
71
|
-
return Color.blue;
|
|
72
|
-
} else if (hovered) {
|
|
73
|
-
return Color.blue;
|
|
74
|
-
}
|
|
75
|
-
return Color.offBlack64;
|
|
76
|
-
}
|
|
77
|
-
export type ItemState = "active" | "inactive" | "disabled";
|
|
78
|
-
type Props = {
|
|
79
|
-
onClick: () => void;
|
|
80
|
-
itemState: ItemState;
|
|
81
|
-
itemType: KeypadPageType;
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
class TabbarItem extends React.Component<Props> {
|
|
85
|
-
render(): React.ReactNode {
|
|
86
|
-
const {onClick, itemType, itemState} = this.props;
|
|
87
|
-
return (
|
|
88
|
-
<Clickable
|
|
89
|
-
onClick={onClick}
|
|
90
|
-
disabled={itemState === "disabled"}
|
|
91
|
-
aria-label={itemType}
|
|
92
|
-
style={styles.clickable}
|
|
93
|
-
aria-selected={itemState === "active"}
|
|
94
|
-
role="tab"
|
|
95
|
-
>
|
|
96
|
-
{({hovered, focused, pressed}) => {
|
|
97
|
-
const tintColor = imageTintColor(
|
|
98
|
-
itemState,
|
|
99
|
-
hovered,
|
|
100
|
-
focused,
|
|
101
|
-
pressed,
|
|
102
|
-
);
|
|
103
|
-
|
|
104
|
-
return (
|
|
105
|
-
<View
|
|
106
|
-
style={[
|
|
107
|
-
styles.base,
|
|
108
|
-
itemState !== "disabled" &&
|
|
109
|
-
hovered &&
|
|
110
|
-
styles.hovered,
|
|
111
|
-
focused && styles.focused,
|
|
112
|
-
pressed && styles.pressed,
|
|
113
|
-
]}
|
|
114
|
-
>
|
|
115
|
-
<View
|
|
116
|
-
style={[
|
|
117
|
-
styles.innerBox,
|
|
118
|
-
pressed && styles.innerBoxPressed,
|
|
119
|
-
]}
|
|
120
|
-
>
|
|
121
|
-
<IconAsset
|
|
122
|
-
type={itemType}
|
|
123
|
-
tintColor={tintColor}
|
|
124
|
-
/>
|
|
125
|
-
</View>
|
|
126
|
-
{itemState === "active" && (
|
|
127
|
-
<View
|
|
128
|
-
style={[
|
|
129
|
-
styles.activeIndicator,
|
|
130
|
-
{
|
|
131
|
-
backgroundColor: tintColor,
|
|
132
|
-
},
|
|
133
|
-
]}
|
|
134
|
-
/>
|
|
135
|
-
)}
|
|
136
|
-
</View>
|
|
137
|
-
);
|
|
138
|
-
}}
|
|
139
|
-
</Clickable>
|
|
140
|
-
);
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
export const TabbarItemForTesting = TabbarItem;
|
|
145
|
-
|
|
146
|
-
export default TabbarItem;
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import {action} from "@storybook/addon-actions";
|
|
2
|
-
import {withKnobs, select, array} from "@storybook/addon-knobs";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
|
|
5
|
-
import {TabbarItemForTesting as TabbarItem} from "./item";
|
|
6
|
-
import Tabbar from "./tabbar";
|
|
7
|
-
|
|
8
|
-
import type {KeypadPageType} from "../../types";
|
|
9
|
-
|
|
10
|
-
export default {
|
|
11
|
-
title: "math-input/components/Tab Bar",
|
|
12
|
-
decorators: [withKnobs],
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
export const InactiveBarItem = () => (
|
|
16
|
-
<TabbarItem
|
|
17
|
-
itemState="inactive"
|
|
18
|
-
itemType={select(
|
|
19
|
-
"Item Type",
|
|
20
|
-
{
|
|
21
|
-
Numbers: "Numbers",
|
|
22
|
-
Geometry: "Geometry",
|
|
23
|
-
Operators: "Operators",
|
|
24
|
-
},
|
|
25
|
-
"Numbers",
|
|
26
|
-
)}
|
|
27
|
-
onClick={action("onClick")}
|
|
28
|
-
/>
|
|
29
|
-
);
|
|
30
|
-
export const ActiveBarItem = () => (
|
|
31
|
-
<TabbarItem
|
|
32
|
-
itemType={select(
|
|
33
|
-
"Item Type",
|
|
34
|
-
{
|
|
35
|
-
Numbers: "Numbers",
|
|
36
|
-
Geometry: "Geometry",
|
|
37
|
-
Operators: "Operators",
|
|
38
|
-
},
|
|
39
|
-
"Numbers",
|
|
40
|
-
)}
|
|
41
|
-
itemState="active"
|
|
42
|
-
onClick={action("onClick")}
|
|
43
|
-
/>
|
|
44
|
-
);
|
|
45
|
-
export const DisabledBarItem = () => (
|
|
46
|
-
<TabbarItem
|
|
47
|
-
itemType={select(
|
|
48
|
-
"Item Type",
|
|
49
|
-
{
|
|
50
|
-
Numbers: "Numbers",
|
|
51
|
-
Geometry: "Geometry",
|
|
52
|
-
Operators: "Operators",
|
|
53
|
-
},
|
|
54
|
-
"Numbers",
|
|
55
|
-
)}
|
|
56
|
-
itemState="disabled"
|
|
57
|
-
onClick={action("onClick")}
|
|
58
|
-
/>
|
|
59
|
-
);
|
|
60
|
-
|
|
61
|
-
function StatefulTabbarWrapper() {
|
|
62
|
-
const [selectedItem, setSelectedItem] =
|
|
63
|
-
React.useState<KeypadPageType>("Numbers");
|
|
64
|
-
|
|
65
|
-
return (
|
|
66
|
-
<Tabbar
|
|
67
|
-
items={
|
|
68
|
-
array("items", [
|
|
69
|
-
"Numbers",
|
|
70
|
-
"Geometry",
|
|
71
|
-
"Operators",
|
|
72
|
-
]) as ReadonlyArray<KeypadPageType>
|
|
73
|
-
}
|
|
74
|
-
selectedItem={selectedItem}
|
|
75
|
-
onSelectItem={(selection) => {
|
|
76
|
-
setSelectedItem(selection);
|
|
77
|
-
action("selected-item");
|
|
78
|
-
}}
|
|
79
|
-
/>
|
|
80
|
-
);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
export const FullTabbar = () => <StatefulTabbarWrapper />;
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import {View} from "@khanacademy/wonder-blocks-core";
|
|
2
|
-
import {StyleSheet} from "aphrodite";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
|
|
5
|
-
import TabbarItem from "./item";
|
|
6
|
-
|
|
7
|
-
import type {KeypadPageType} from "../../types";
|
|
8
|
-
import type {StyleType} from "@khanacademy/wonder-blocks-core";
|
|
9
|
-
|
|
10
|
-
const styles = StyleSheet.create({
|
|
11
|
-
tabbar: {
|
|
12
|
-
display: "flex",
|
|
13
|
-
flexDirection: "row",
|
|
14
|
-
justifyContent: "space-between",
|
|
15
|
-
paddingTop: 2,
|
|
16
|
-
paddingBottom: 2,
|
|
17
|
-
},
|
|
18
|
-
pages: {
|
|
19
|
-
display: "flex",
|
|
20
|
-
flexDirection: "row",
|
|
21
|
-
},
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
type Props = {
|
|
25
|
-
items: ReadonlyArray<KeypadPageType>;
|
|
26
|
-
selectedItem: KeypadPageType;
|
|
27
|
-
onClickClose?: () => void;
|
|
28
|
-
onSelectItem: (item: KeypadPageType) => void;
|
|
29
|
-
style?: StyleType;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
function Tabbar(props: Props): React.ReactElement {
|
|
33
|
-
const {items, onClickClose, selectedItem, onSelectItem, style} = props;
|
|
34
|
-
|
|
35
|
-
return (
|
|
36
|
-
<View style={[styles.tabbar, style]} role="tablist">
|
|
37
|
-
<View style={[styles.pages]}>
|
|
38
|
-
{items.map((item) => (
|
|
39
|
-
<TabbarItem
|
|
40
|
-
key={`tabbar-item-${item}`}
|
|
41
|
-
itemState={
|
|
42
|
-
item === selectedItem ? "active" : "inactive"
|
|
43
|
-
}
|
|
44
|
-
itemType={item}
|
|
45
|
-
onClick={() => {
|
|
46
|
-
onSelectItem(item);
|
|
47
|
-
}}
|
|
48
|
-
/>
|
|
49
|
-
))}
|
|
50
|
-
</View>
|
|
51
|
-
|
|
52
|
-
<View>
|
|
53
|
-
{onClickClose && (
|
|
54
|
-
<TabbarItem
|
|
55
|
-
itemState="inactive"
|
|
56
|
-
itemType="Dismiss"
|
|
57
|
-
onClick={onClickClose}
|
|
58
|
-
/>
|
|
59
|
-
)}
|
|
60
|
-
</View>
|
|
61
|
-
</View>
|
|
62
|
-
);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
export default Tabbar;
|