@khanacademy/wonder-blocks-layout 1.4.12 → 1.4.13
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 +9 -0
- package/package.json +3 -3
- package/src/components/__tests__/media-layout-context.test.js +6 -7
- package/src/components/__tests__/media-layout.test.js +60 -37
- package/src/components/media-layout.js +0 -1
- package/dist/index.js +0 -591
- package/dist/index.js.flow +0 -2
- package/docs.md +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-layout
|
|
2
2
|
|
|
3
|
+
## 1.4.13
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [b561425a]
|
|
8
|
+
- Updated dependencies [a566e232]
|
|
9
|
+
- Updated dependencies [d2b21a6e]
|
|
10
|
+
- @khanacademy/wonder-blocks-core@4.6.0
|
|
11
|
+
|
|
3
12
|
## 1.4.12
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-layout",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.13",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@babel/runtime": "^7.18.6",
|
|
17
|
-
"@khanacademy/wonder-blocks-core": "^4.
|
|
17
|
+
"@khanacademy/wonder-blocks-core": "^4.6.0",
|
|
18
18
|
"@khanacademy/wonder-blocks-spacing": "^3.0.5"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"wb-dev-build-settings": "^0.
|
|
21
|
+
"wb-dev-build-settings": "^0.5.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"aphrodite": "^1.2.5",
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
// @flow
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import {View} from "@khanacademy/wonder-blocks-core";
|
|
4
|
-
import {
|
|
5
|
-
import "jest-enzyme";
|
|
4
|
+
import {render} from "@testing-library/react";
|
|
6
5
|
|
|
7
6
|
import MediaLayout from "../media-layout.js";
|
|
8
7
|
import MediaLayoutContext from "../media-layout-context.js";
|
|
@@ -26,7 +25,7 @@ describe("MediaLayoutContext", () => {
|
|
|
26
25
|
|
|
27
26
|
// Act
|
|
28
27
|
const args = await new Promise((resolve, reject) => {
|
|
29
|
-
|
|
28
|
+
render(
|
|
30
29
|
<MediaLayoutContext.Provider
|
|
31
30
|
value={{
|
|
32
31
|
overrideSize: "small",
|
|
@@ -54,7 +53,7 @@ describe("MediaLayoutContext", () => {
|
|
|
54
53
|
// Arrange
|
|
55
54
|
delete window.matchMedia;
|
|
56
55
|
const promise = new Promise((resolve, reject) => {
|
|
57
|
-
|
|
56
|
+
render(
|
|
58
57
|
<MediaLayout styleSheets={{}}>
|
|
59
58
|
{({mediaSize, mediaSpec, styles}) => {
|
|
60
59
|
resolve({mediaSize, mediaSpec, styles});
|
|
@@ -77,7 +76,7 @@ describe("MediaLayoutContext", () => {
|
|
|
77
76
|
|
|
78
77
|
// Act
|
|
79
78
|
const args = await new Promise((resolve, reject) => {
|
|
80
|
-
|
|
79
|
+
render(
|
|
81
80
|
<MediaLayoutContext.Provider
|
|
82
81
|
value={{
|
|
83
82
|
overrideSize: undefined,
|
|
@@ -107,7 +106,7 @@ describe("MediaLayoutContext", () => {
|
|
|
107
106
|
|
|
108
107
|
// Act
|
|
109
108
|
const args = await new Promise((resolve, reject) => {
|
|
110
|
-
|
|
109
|
+
render(
|
|
111
110
|
<MediaLayoutContext.Provider
|
|
112
111
|
value={{
|
|
113
112
|
overrideSize: undefined,
|
|
@@ -135,7 +134,7 @@ describe("MediaLayoutContext", () => {
|
|
|
135
134
|
|
|
136
135
|
// Act
|
|
137
136
|
const args = await new Promise((resolve, reject) => {
|
|
138
|
-
|
|
137
|
+
render(
|
|
139
138
|
<MediaLayoutContext.Provider
|
|
140
139
|
value={{
|
|
141
140
|
overrideSize: undefined,
|
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import {StyleSheet} from "aphrodite";
|
|
4
4
|
import {View} from "@khanacademy/wonder-blocks-core";
|
|
5
|
-
import {
|
|
6
|
-
import "jest-enzyme";
|
|
5
|
+
import {render, screen} from "@testing-library/react";
|
|
7
6
|
|
|
8
7
|
import MediaLayout from "../media-layout.js";
|
|
9
8
|
import {resizeWindow, matchMedia} from "../../util/test-util.js";
|
|
@@ -20,7 +19,7 @@ describe("MediaLayout", () => {
|
|
|
20
19
|
|
|
21
20
|
// Act
|
|
22
21
|
const args = await new Promise((resolve, reject) => {
|
|
23
|
-
|
|
22
|
+
render(
|
|
24
23
|
<MediaLayout>
|
|
25
24
|
{({mediaSize, mediaSpec, styles}) => {
|
|
26
25
|
resolve({mediaSize, mediaSpec, styles});
|
|
@@ -42,7 +41,7 @@ describe("MediaLayout", () => {
|
|
|
42
41
|
|
|
43
42
|
// Act
|
|
44
43
|
const args = await new Promise((resolve, reject) => {
|
|
45
|
-
|
|
44
|
+
render(
|
|
46
45
|
<MediaLayout>
|
|
47
46
|
{({mediaSize, mediaSpec, styles}) => {
|
|
48
47
|
resolve({mediaSize, mediaSpec, styles});
|
|
@@ -64,7 +63,7 @@ describe("MediaLayout", () => {
|
|
|
64
63
|
|
|
65
64
|
// Act
|
|
66
65
|
const args = await new Promise((resolve, reject) => {
|
|
67
|
-
|
|
66
|
+
render(
|
|
68
67
|
<MediaLayout>
|
|
69
68
|
{({mediaSize, mediaSpec, styles}) => {
|
|
70
69
|
resolve({mediaSize, mediaSpec, styles});
|
|
@@ -101,16 +100,18 @@ describe("MediaLayout", () => {
|
|
|
101
100
|
resizeWindow(size);
|
|
102
101
|
|
|
103
102
|
// Act
|
|
104
|
-
|
|
103
|
+
render(
|
|
105
104
|
<MediaLayout styleSheets={styleSheets}>
|
|
106
105
|
{({mediaSize, mediaSpec, styles}) => {
|
|
107
106
|
return (
|
|
108
|
-
<View style={styles.test}>
|
|
107
|
+
<View testId="styled-view" style={styles.test}>
|
|
108
|
+
Hello, world!
|
|
109
|
+
</View>
|
|
109
110
|
);
|
|
110
111
|
}}
|
|
111
112
|
</MediaLayout>,
|
|
112
113
|
);
|
|
113
|
-
const style =
|
|
114
|
+
const style = screen.getByTestId("styled-view").style;
|
|
114
115
|
|
|
115
116
|
// Assert
|
|
116
117
|
expect(style.color).toBe("blue");
|
|
@@ -140,16 +141,18 @@ describe("MediaLayout", () => {
|
|
|
140
141
|
}[size];
|
|
141
142
|
|
|
142
143
|
// Act
|
|
143
|
-
|
|
144
|
+
render(
|
|
144
145
|
<MediaLayout styleSheets={styleSheets}>
|
|
145
146
|
{({mediaSize, mediaSpec, styles}) => {
|
|
146
147
|
return (
|
|
147
|
-
<View style={styles.test}>
|
|
148
|
+
<View testId="styled-view" style={styles.test}>
|
|
149
|
+
Hello, world!
|
|
150
|
+
</View>
|
|
148
151
|
);
|
|
149
152
|
}}
|
|
150
153
|
</MediaLayout>,
|
|
151
154
|
);
|
|
152
|
-
const style =
|
|
155
|
+
const style = screen.getByTestId("styled-view").style;
|
|
153
156
|
|
|
154
157
|
// Assert
|
|
155
158
|
expect(style.color).toBe(expectedColor);
|
|
@@ -179,16 +182,18 @@ describe("MediaLayout", () => {
|
|
|
179
182
|
}[size];
|
|
180
183
|
|
|
181
184
|
// Act
|
|
182
|
-
|
|
185
|
+
render(
|
|
183
186
|
<MediaLayout styleSheets={styleSheets}>
|
|
184
187
|
{({mediaSize, mediaSpec, styles}) => {
|
|
185
188
|
return (
|
|
186
|
-
<View style={styles.test}>
|
|
189
|
+
<View testId="styled-view" style={styles.test}>
|
|
190
|
+
Hello, world!
|
|
191
|
+
</View>
|
|
187
192
|
);
|
|
188
193
|
}}
|
|
189
194
|
</MediaLayout>,
|
|
190
195
|
);
|
|
191
|
-
const style =
|
|
196
|
+
const style = screen.getByTestId("styled-view").style;
|
|
192
197
|
|
|
193
198
|
// Assert
|
|
194
199
|
expect(style.color).toBe(expectedColor);
|
|
@@ -226,16 +231,18 @@ describe("MediaLayout", () => {
|
|
|
226
231
|
}[size];
|
|
227
232
|
|
|
228
233
|
// Act
|
|
229
|
-
|
|
234
|
+
render(
|
|
230
235
|
<MediaLayout styleSheets={styleSheets}>
|
|
231
236
|
{({mediaSize, mediaSpec, styles}) => {
|
|
232
237
|
return (
|
|
233
|
-
<View style={styles.test}>
|
|
238
|
+
<View testId="styled-view" style={styles.test}>
|
|
239
|
+
Hello, world!
|
|
240
|
+
</View>
|
|
234
241
|
);
|
|
235
242
|
}}
|
|
236
243
|
</MediaLayout>,
|
|
237
244
|
);
|
|
238
|
-
const style =
|
|
245
|
+
const style = screen.getByTestId("styled-view").style;
|
|
239
246
|
|
|
240
247
|
// Assert
|
|
241
248
|
expect(style.color).toEqual(expectedColor);
|
|
@@ -269,16 +276,18 @@ describe("MediaLayout", () => {
|
|
|
269
276
|
}[size];
|
|
270
277
|
|
|
271
278
|
// Act
|
|
272
|
-
|
|
279
|
+
render(
|
|
273
280
|
<MediaLayout styleSheets={styleSheets}>
|
|
274
281
|
{({mediaSize, mediaSpec, styles}) => {
|
|
275
282
|
return (
|
|
276
|
-
<View style={styles.test}>
|
|
283
|
+
<View testId="styled-view" style={styles.test}>
|
|
284
|
+
Hello, world!
|
|
285
|
+
</View>
|
|
277
286
|
);
|
|
278
287
|
}}
|
|
279
288
|
</MediaLayout>,
|
|
280
289
|
);
|
|
281
|
-
const style =
|
|
290
|
+
const style = screen.getByTestId("styled-view").style;
|
|
282
291
|
|
|
283
292
|
// Assert
|
|
284
293
|
expect(style.color).toEqual(expectedColor);
|
|
@@ -312,16 +321,18 @@ describe("MediaLayout", () => {
|
|
|
312
321
|
}[size];
|
|
313
322
|
|
|
314
323
|
// Act
|
|
315
|
-
|
|
324
|
+
render(
|
|
316
325
|
<MediaLayout styleSheets={styleSheets}>
|
|
317
326
|
{({mediaSize, mediaSpec, styles}) => {
|
|
318
327
|
return (
|
|
319
|
-
<View style={styles.test}>
|
|
328
|
+
<View testId="styled-view" style={styles.test}>
|
|
329
|
+
Hello, world!
|
|
330
|
+
</View>
|
|
320
331
|
);
|
|
321
332
|
}}
|
|
322
333
|
</MediaLayout>,
|
|
323
334
|
);
|
|
324
|
-
const style =
|
|
335
|
+
const style = screen.getByTestId("styled-view").style;
|
|
325
336
|
|
|
326
337
|
// Assert
|
|
327
338
|
expect(style.color).toEqual(expectedColor);
|
|
@@ -345,20 +356,26 @@ describe("MediaLayout", () => {
|
|
|
345
356
|
}),
|
|
346
357
|
};
|
|
347
358
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
const wrapper = mount(
|
|
359
|
+
const UnderTest = () => (
|
|
351
360
|
<MediaLayout styleSheets={styleSheets}>
|
|
352
361
|
{({mediaSize, mediaSpec, styles}) => {
|
|
353
|
-
return
|
|
362
|
+
return (
|
|
363
|
+
<View testId="styled-view" style={styles.test}>
|
|
364
|
+
Hello, world!
|
|
365
|
+
</View>
|
|
366
|
+
);
|
|
354
367
|
}}
|
|
355
|
-
</MediaLayout
|
|
368
|
+
</MediaLayout>
|
|
356
369
|
);
|
|
357
370
|
|
|
371
|
+
resizeWindow("large");
|
|
372
|
+
|
|
373
|
+
const wrapper = render(<UnderTest />);
|
|
374
|
+
|
|
358
375
|
// Act
|
|
359
376
|
resizeWindow("small");
|
|
360
|
-
wrapper.
|
|
361
|
-
const style =
|
|
377
|
+
wrapper.rerender(<UnderTest />);
|
|
378
|
+
const style = screen.getByTestId("styled-view").style;
|
|
362
379
|
|
|
363
380
|
// Assert
|
|
364
381
|
expect(style.color).toBe("orange");
|
|
@@ -379,20 +396,26 @@ describe("MediaLayout", () => {
|
|
|
379
396
|
}),
|
|
380
397
|
};
|
|
381
398
|
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
const wrapper = mount(
|
|
399
|
+
const UnderTest = () => (
|
|
385
400
|
<MediaLayout styleSheets={styleSheets}>
|
|
386
401
|
{({mediaSize, mediaSpec, styles}) => {
|
|
387
|
-
return
|
|
402
|
+
return (
|
|
403
|
+
<View testId="styled-view" style={styles.test}>
|
|
404
|
+
Hello, world!
|
|
405
|
+
</View>
|
|
406
|
+
);
|
|
388
407
|
}}
|
|
389
|
-
</MediaLayout
|
|
408
|
+
</MediaLayout>
|
|
390
409
|
);
|
|
391
410
|
|
|
411
|
+
resizeWindow("small");
|
|
412
|
+
|
|
413
|
+
const wrapper = render(<UnderTest />);
|
|
414
|
+
|
|
392
415
|
// Act
|
|
393
416
|
resizeWindow("large");
|
|
394
|
-
wrapper.
|
|
395
|
-
const style =
|
|
417
|
+
wrapper.rerender(<UnderTest />);
|
|
418
|
+
const style = screen.getByTestId("styled-view").style;
|
|
396
419
|
|
|
397
420
|
// Assert
|
|
398
421
|
expect(style.color).toBe("blue");
|
|
@@ -233,7 +233,6 @@ class MediaLayoutInternal extends React.Component<CombinedProps, State> {
|
|
|
233
233
|
}
|
|
234
234
|
}
|
|
235
235
|
|
|
236
|
-
// gen-snapshot-tests.js only understands `export default class ...`
|
|
237
236
|
/**
|
|
238
237
|
* ***NOTE: The MediaLayout component is being deprecated. Do not use this!!***
|
|
239
238
|
*
|
package/dist/index.js
DELETED
|
@@ -1,591 +0,0 @@
|
|
|
1
|
-
module.exports =
|
|
2
|
-
/******/ (function(modules) { // webpackBootstrap
|
|
3
|
-
/******/ // The module cache
|
|
4
|
-
/******/ var installedModules = {};
|
|
5
|
-
/******/
|
|
6
|
-
/******/ // The require function
|
|
7
|
-
/******/ function __webpack_require__(moduleId) {
|
|
8
|
-
/******/
|
|
9
|
-
/******/ // Check if module is in cache
|
|
10
|
-
/******/ if(installedModules[moduleId]) {
|
|
11
|
-
/******/ return installedModules[moduleId].exports;
|
|
12
|
-
/******/ }
|
|
13
|
-
/******/ // Create a new module (and put it into the cache)
|
|
14
|
-
/******/ var module = installedModules[moduleId] = {
|
|
15
|
-
/******/ i: moduleId,
|
|
16
|
-
/******/ l: false,
|
|
17
|
-
/******/ exports: {}
|
|
18
|
-
/******/ };
|
|
19
|
-
/******/
|
|
20
|
-
/******/ // Execute the module function
|
|
21
|
-
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
|
22
|
-
/******/
|
|
23
|
-
/******/ // Flag the module as loaded
|
|
24
|
-
/******/ module.l = true;
|
|
25
|
-
/******/
|
|
26
|
-
/******/ // Return the exports of the module
|
|
27
|
-
/******/ return module.exports;
|
|
28
|
-
/******/ }
|
|
29
|
-
/******/
|
|
30
|
-
/******/
|
|
31
|
-
/******/ // expose the modules object (__webpack_modules__)
|
|
32
|
-
/******/ __webpack_require__.m = modules;
|
|
33
|
-
/******/
|
|
34
|
-
/******/ // expose the module cache
|
|
35
|
-
/******/ __webpack_require__.c = installedModules;
|
|
36
|
-
/******/
|
|
37
|
-
/******/ // define getter function for harmony exports
|
|
38
|
-
/******/ __webpack_require__.d = function(exports, name, getter) {
|
|
39
|
-
/******/ if(!__webpack_require__.o(exports, name)) {
|
|
40
|
-
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
|
41
|
-
/******/ }
|
|
42
|
-
/******/ };
|
|
43
|
-
/******/
|
|
44
|
-
/******/ // define __esModule on exports
|
|
45
|
-
/******/ __webpack_require__.r = function(exports) {
|
|
46
|
-
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
47
|
-
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
48
|
-
/******/ }
|
|
49
|
-
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
50
|
-
/******/ };
|
|
51
|
-
/******/
|
|
52
|
-
/******/ // create a fake namespace object
|
|
53
|
-
/******/ // mode & 1: value is a module id, require it
|
|
54
|
-
/******/ // mode & 2: merge all properties of value into the ns
|
|
55
|
-
/******/ // mode & 4: return value when already ns object
|
|
56
|
-
/******/ // mode & 8|1: behave like require
|
|
57
|
-
/******/ __webpack_require__.t = function(value, mode) {
|
|
58
|
-
/******/ if(mode & 1) value = __webpack_require__(value);
|
|
59
|
-
/******/ if(mode & 8) return value;
|
|
60
|
-
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
|
61
|
-
/******/ var ns = Object.create(null);
|
|
62
|
-
/******/ __webpack_require__.r(ns);
|
|
63
|
-
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
|
64
|
-
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
|
65
|
-
/******/ return ns;
|
|
66
|
-
/******/ };
|
|
67
|
-
/******/
|
|
68
|
-
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
69
|
-
/******/ __webpack_require__.n = function(module) {
|
|
70
|
-
/******/ var getter = module && module.__esModule ?
|
|
71
|
-
/******/ function getDefault() { return module['default']; } :
|
|
72
|
-
/******/ function getModuleExports() { return module; };
|
|
73
|
-
/******/ __webpack_require__.d(getter, 'a', getter);
|
|
74
|
-
/******/ return getter;
|
|
75
|
-
/******/ };
|
|
76
|
-
/******/
|
|
77
|
-
/******/ // Object.prototype.hasOwnProperty.call
|
|
78
|
-
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
|
79
|
-
/******/
|
|
80
|
-
/******/ // __webpack_public_path__
|
|
81
|
-
/******/ __webpack_require__.p = "";
|
|
82
|
-
/******/
|
|
83
|
-
/******/
|
|
84
|
-
/******/ // Load entry module and return exports
|
|
85
|
-
/******/ return __webpack_require__(__webpack_require__.s = 11);
|
|
86
|
-
/******/ })
|
|
87
|
-
/************************************************************************/
|
|
88
|
-
/******/ ([
|
|
89
|
-
/* 0 */
|
|
90
|
-
/***/ (function(module, exports) {
|
|
91
|
-
|
|
92
|
-
module.exports = require("react");
|
|
93
|
-
|
|
94
|
-
/***/ }),
|
|
95
|
-
/* 1 */
|
|
96
|
-
/***/ (function(module, exports) {
|
|
97
|
-
|
|
98
|
-
module.exports = require("@khanacademy/wonder-blocks-spacing");
|
|
99
|
-
|
|
100
|
-
/***/ }),
|
|
101
|
-
/* 2 */
|
|
102
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
103
|
-
|
|
104
|
-
"use strict";
|
|
105
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return VALID_MEDIA_SIZES; });
|
|
106
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return MEDIA_DEFAULT_SPEC; });
|
|
107
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return MEDIA_INTERNAL_SPEC; });
|
|
108
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return MEDIA_MODAL_SPEC; });
|
|
109
|
-
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
|
|
110
|
-
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0__);
|
|
111
|
-
|
|
112
|
-
// All possible valid media sizes
|
|
113
|
-
const VALID_MEDIA_SIZES = ["small", "medium", "large"];
|
|
114
|
-
const mediaDefaultSpecLargeMarginWidth = _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.large_24; // The default spec for media layout, currently available in
|
|
115
|
-
// three different settings (roughly mobile, tablet, and desktop).
|
|
116
|
-
|
|
117
|
-
const MEDIA_DEFAULT_SPEC = {
|
|
118
|
-
small: {
|
|
119
|
-
query: "(max-width: 767px)",
|
|
120
|
-
totalColumns: 4,
|
|
121
|
-
gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16,
|
|
122
|
-
marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16
|
|
123
|
-
},
|
|
124
|
-
medium: {
|
|
125
|
-
query: "(min-width: 768px) and (max-width: 1023px)",
|
|
126
|
-
totalColumns: 8,
|
|
127
|
-
gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xLarge_32,
|
|
128
|
-
marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.large_24
|
|
129
|
-
},
|
|
130
|
-
large: {
|
|
131
|
-
query: "(min-width: 1024px)",
|
|
132
|
-
totalColumns: 12,
|
|
133
|
-
gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xLarge_32,
|
|
134
|
-
marginWidth: mediaDefaultSpecLargeMarginWidth,
|
|
135
|
-
maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
|
|
136
|
-
}
|
|
137
|
-
}; // Used for internal tools
|
|
138
|
-
|
|
139
|
-
const MEDIA_INTERNAL_SPEC = {
|
|
140
|
-
large: {
|
|
141
|
-
query: "(min-width: 1px)",
|
|
142
|
-
totalColumns: 12,
|
|
143
|
-
gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xLarge_32,
|
|
144
|
-
marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16
|
|
145
|
-
}
|
|
146
|
-
}; // The default used for modals
|
|
147
|
-
|
|
148
|
-
const MEDIA_MODAL_SPEC = {
|
|
149
|
-
small: {
|
|
150
|
-
query: "(max-width: 767px)",
|
|
151
|
-
totalColumns: 4,
|
|
152
|
-
gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16,
|
|
153
|
-
marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16
|
|
154
|
-
},
|
|
155
|
-
large: {
|
|
156
|
-
query: "(min-width: 768px)",
|
|
157
|
-
totalColumns: 12,
|
|
158
|
-
gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xLarge_32,
|
|
159
|
-
marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xxLarge_48
|
|
160
|
-
}
|
|
161
|
-
};
|
|
162
|
-
|
|
163
|
-
/***/ }),
|
|
164
|
-
/* 3 */
|
|
165
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
166
|
-
|
|
167
|
-
"use strict";
|
|
168
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
|
|
169
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
170
|
-
/* harmony import */ var _util_specs_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
const defaultContext = {
|
|
174
|
-
ssrSize: "large",
|
|
175
|
-
mediaSpec: _util_specs_js__WEBPACK_IMPORTED_MODULE_1__[/* MEDIA_DEFAULT_SPEC */ "a"]
|
|
176
|
-
};
|
|
177
|
-
/* harmony default export */ __webpack_exports__["a"] = (/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"](defaultContext));
|
|
178
|
-
|
|
179
|
-
/***/ }),
|
|
180
|
-
/* 4 */
|
|
181
|
-
/***/ (function(module, exports) {
|
|
182
|
-
|
|
183
|
-
module.exports = require("@khanacademy/wonder-blocks-core");
|
|
184
|
-
|
|
185
|
-
/***/ }),
|
|
186
|
-
/* 5 */
|
|
187
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
188
|
-
|
|
189
|
-
"use strict";
|
|
190
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return MediaLayout; });
|
|
191
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
|
|
192
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
193
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
194
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
195
|
-
/* harmony import */ var _media_layout_context_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
|
|
196
|
-
/* harmony import */ var _util_specs_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
const queries = [].concat(Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_3__[/* MEDIA_DEFAULT_SPEC */ "a"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_3__[/* MEDIA_INTERNAL_SPEC */ "b"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_3__[/* MEDIA_MODAL_SPEC */ "c"]).map(spec => spec.query));
|
|
202
|
-
const mediaQueryLists = {}; // eslint-disable-next-line ft-flow/require-exact-type
|
|
203
|
-
|
|
204
|
-
// If for some reason we're not able to resolve the current media size we
|
|
205
|
-
// fall back to this state.
|
|
206
|
-
const DEFAULT_SIZE = "large";
|
|
207
|
-
|
|
208
|
-
/**
|
|
209
|
-
* `MediaLayout` is responsible for changing the rendering of contents at
|
|
210
|
-
* differently sized viewports. `MediaLayoutContext.Provider` can be used
|
|
211
|
-
* to specify different breakpoint configurations. By default it uses
|
|
212
|
-
* `MEDIA_DEFAULT_SPEC`. See media-layout-context.js for additiional options.
|
|
213
|
-
*/
|
|
214
|
-
class MediaLayoutInternal extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
215
|
-
// A collection of thunks that's used to clean up event listeners
|
|
216
|
-
// when the component is unmounted.
|
|
217
|
-
constructor(props) {
|
|
218
|
-
super(props);
|
|
219
|
-
this.state = {
|
|
220
|
-
size: undefined
|
|
221
|
-
};
|
|
222
|
-
this.cleanupThunks = [];
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
componentDidMount() {
|
|
226
|
-
// TODO(WB-534): handle changes to mediaSpec prop
|
|
227
|
-
const entries = Object.entries(this.props.mediaSpec);
|
|
228
|
-
|
|
229
|
-
for (const [size, spec] of entries) {
|
|
230
|
-
const mql = mediaQueryLists[spec.query]; // during SSR there are no MediaQueryLists
|
|
231
|
-
|
|
232
|
-
if (!mql) {
|
|
233
|
-
continue;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
const listener = e => {
|
|
237
|
-
if (e.matches) {
|
|
238
|
-
this.setState({
|
|
239
|
-
size
|
|
240
|
-
});
|
|
241
|
-
}
|
|
242
|
-
};
|
|
243
|
-
|
|
244
|
-
mql.addListener(listener);
|
|
245
|
-
this.cleanupThunks.push(() => mql.removeListener(listener));
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
componentWillUnmount() {
|
|
250
|
-
// Remove our listeners.
|
|
251
|
-
this.cleanupThunks.forEach(cleaup => cleaup());
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
getCurrentSize(spec) {
|
|
255
|
-
// If we have a state with the current size in it then we always want
|
|
256
|
-
// to use that. This will happen if the viewport changes sizes after
|
|
257
|
-
// we've already initialized.
|
|
258
|
-
if (this.state.size) {
|
|
259
|
-
return this.state.size;
|
|
260
|
-
} else {
|
|
261
|
-
const entries = Object.entries(this.props.mediaSpec);
|
|
262
|
-
|
|
263
|
-
for (const [size, spec] of entries) {
|
|
264
|
-
const mql = mediaQueryLists[spec.query];
|
|
265
|
-
|
|
266
|
-
if (mql.matches) {
|
|
267
|
-
return size;
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
return DEFAULT_SIZE;
|
|
273
|
-
} // We assume that we're running on the server (or, at least, an unsupported
|
|
274
|
-
// environment) if there is no window object or matchMedia function
|
|
275
|
-
// available.
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
isServerSide() {
|
|
279
|
-
return typeof window === "undefined" || !window.matchMedia;
|
|
280
|
-
} // Generate a mock Aphrodite StyleSheet based upon the current mediaSize
|
|
281
|
-
// We do this by looking at all of the stylesheets specified in the
|
|
282
|
-
// styleSheets prop and then all of the individual styles. We merge the
|
|
283
|
-
// styles together
|
|
284
|
-
// TODO(WB-533): move to util.js to make it easier to test
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
getMockStyleSheet(mediaSize) {
|
|
288
|
-
const {
|
|
289
|
-
styleSheets
|
|
290
|
-
} = this.props;
|
|
291
|
-
const mockStyleSheet = {}; // If no stylesheets were specified then we just return an empty object
|
|
292
|
-
|
|
293
|
-
if (!styleSheets) {
|
|
294
|
-
return mockStyleSheet;
|
|
295
|
-
} // Go through all of the stylesheets that were specified
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
for (const styleSize of Object.keys(styleSheets)) {
|
|
299
|
-
const styleSheet = styleSheets[styleSize];
|
|
300
|
-
|
|
301
|
-
if (!styleSheet) {
|
|
302
|
-
continue;
|
|
303
|
-
} // And then through each key of each stylesheet
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
for (const name of Object.keys(styleSheet)) {
|
|
307
|
-
if ( // $FlowIgnore[method-unbinding]
|
|
308
|
-
Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
|
|
309
|
-
continue;
|
|
310
|
-
} // We create an entry that combines the values from all of
|
|
311
|
-
// the stylesheets together in least-specific to most-specific
|
|
312
|
-
// priority (thus small/medium/large styles will always have
|
|
313
|
-
// precedence over "all" or mdOrSmaller/mdOrLarger/etc.).
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
mockStyleSheet[name] = [styleSheets.all && styleSheets.all[name], mediaSize === "small" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.small && styleSheets.small[name]], mediaSize === "medium" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.medium && styleSheets.medium[name]], mediaSize === "large" && [styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.large && styleSheets.large[name]]];
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
return mockStyleSheet;
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
render() {
|
|
324
|
-
const {
|
|
325
|
-
children,
|
|
326
|
-
mediaSpec,
|
|
327
|
-
ssrSize,
|
|
328
|
-
overrideSize
|
|
329
|
-
} = this.props; // We need to create the MediaQueryLists during the first render in order
|
|
330
|
-
// to query whether any of them match.
|
|
331
|
-
|
|
332
|
-
if (!this.isServerSide()) {
|
|
333
|
-
for (const query of queries.filter(query => !mediaQueryLists[query])) {
|
|
334
|
-
mediaQueryLists[query] = window.matchMedia(query);
|
|
335
|
-
}
|
|
336
|
-
} // We need to figure out what the current media size is
|
|
337
|
-
// If an override has been specified, we use that.
|
|
338
|
-
// If we're rendering on the server then we use the default
|
|
339
|
-
// SSR rendering size.
|
|
340
|
-
// Otherwise we attempt to get the current size based on
|
|
341
|
-
// the current MediaSpec.
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec); // Generate a mock stylesheet
|
|
345
|
-
|
|
346
|
-
const styles = this.getMockStyleSheet(mediaSize);
|
|
347
|
-
return children({
|
|
348
|
-
mediaSize,
|
|
349
|
-
mediaSpec,
|
|
350
|
-
styles
|
|
351
|
-
});
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
} // gen-snapshot-tests.js only understands `export default class ...`
|
|
355
|
-
|
|
356
|
-
/**
|
|
357
|
-
* ***NOTE: The MediaLayout component is being deprecated. Do not use this!!***
|
|
358
|
-
*
|
|
359
|
-
* MediaLayout is a container component that accepts a `styleSheets` object,
|
|
360
|
-
* whose keys are media sizes. It listens for changes to the current media
|
|
361
|
-
* size and passes the current `mediaSize`, `mediaSpec`, and `styles` to
|
|
362
|
-
* `children`, which is a render function taking those three values as an
|
|
363
|
-
* object.
|
|
364
|
-
*
|
|
365
|
-
* Valid keys for the `styleSheets` object are (in order of precedence):
|
|
366
|
-
* - `small`, `medium`, `large`
|
|
367
|
-
* - `mdOrSmaller`, `mdOrLarger`
|
|
368
|
-
* - `all`
|
|
369
|
-
*
|
|
370
|
-
* `MediaLayout` will merge style rules from multiple styles that match the
|
|
371
|
-
* current media query, e.g. `"(min-width: 1024px)"`.
|
|
372
|
-
*
|
|
373
|
-
* The `mediaSpec` is an object with one or more of the following keys:
|
|
374
|
-
* `small`, `medium`, or `large`. Each value contains the following data:
|
|
375
|
-
* - `query: string` e.g. "(min-width: 1024px)"
|
|
376
|
-
* - `totalColumns: number`
|
|
377
|
-
* - `gutterWidth: number`
|
|
378
|
-
* - `marginWidth: number`
|
|
379
|
-
* - `maxWidth: number`
|
|
380
|
-
*/
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
class MediaLayout extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
384
|
-
render() {
|
|
385
|
-
// We listen to the MediaLayoutContext to see what defaults we're
|
|
386
|
-
// being given (this can be overriden by wrapping this component in
|
|
387
|
-
// a MediaLayoutContext.Consumer).
|
|
388
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_media_layout_context_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].Consumer, null, ({
|
|
389
|
-
overrideSize,
|
|
390
|
-
ssrSize,
|
|
391
|
-
mediaSpec
|
|
392
|
-
}) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](MediaLayoutInternal, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, this.props, {
|
|
393
|
-
overrideSize: overrideSize,
|
|
394
|
-
ssrSize: ssrSize,
|
|
395
|
-
mediaSpec: mediaSpec
|
|
396
|
-
})));
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
/***/ }),
|
|
402
|
-
/* 6 */
|
|
403
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
404
|
-
|
|
405
|
-
"use strict";
|
|
406
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Spring; });
|
|
407
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
|
|
408
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
409
|
-
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
|
|
410
|
-
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
|
|
411
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
|
|
412
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
/**
|
|
418
|
-
* Expands to fill space between sibling components.
|
|
419
|
-
*
|
|
420
|
-
* Assumes parent is a View.
|
|
421
|
-
*/
|
|
422
|
-
class Spring extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
423
|
-
render() {
|
|
424
|
-
const {
|
|
425
|
-
style
|
|
426
|
-
} = this.props;
|
|
427
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
|
|
428
|
-
"aria-hidden": "true",
|
|
429
|
-
style: [styles.grow, style]
|
|
430
|
-
});
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
}
|
|
434
|
-
const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
|
|
435
|
-
grow: {
|
|
436
|
-
flexGrow: 1
|
|
437
|
-
}
|
|
438
|
-
});
|
|
439
|
-
|
|
440
|
-
/***/ }),
|
|
441
|
-
/* 7 */
|
|
442
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
443
|
-
|
|
444
|
-
"use strict";
|
|
445
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Strut; });
|
|
446
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
|
|
447
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
448
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
|
|
449
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
/**
|
|
454
|
-
* A component for inserting fixed space between components.
|
|
455
|
-
*
|
|
456
|
-
* Assumes parent is a View.
|
|
457
|
-
*/
|
|
458
|
-
class Strut extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
459
|
-
render() {
|
|
460
|
-
const {
|
|
461
|
-
size,
|
|
462
|
-
style
|
|
463
|
-
} = this.props;
|
|
464
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["View"], {
|
|
465
|
-
"aria-hidden": "true",
|
|
466
|
-
style: [strutStyle(size), style]
|
|
467
|
-
});
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
}
|
|
471
|
-
|
|
472
|
-
const strutStyle = size => {
|
|
473
|
-
return {
|
|
474
|
-
width: size,
|
|
475
|
-
MsFlexBasis: size,
|
|
476
|
-
MsFlexPreferredSize: size,
|
|
477
|
-
WebkitFlexBasis: size,
|
|
478
|
-
flexBasis: size,
|
|
479
|
-
flexShrink: 0
|
|
480
|
-
};
|
|
481
|
-
};
|
|
482
|
-
|
|
483
|
-
/***/ }),
|
|
484
|
-
/* 8 */
|
|
485
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
486
|
-
|
|
487
|
-
"use strict";
|
|
488
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return queryMatchesSize; });
|
|
489
|
-
/**
|
|
490
|
-
* Return where a media size matches a media query.
|
|
491
|
-
*
|
|
492
|
-
* examples:
|
|
493
|
-
* - `queryMatchesSize("all", "small")` returns `true`
|
|
494
|
-
* - `queryMatchesSize("mdOrLarger", "small")` returns `false`
|
|
495
|
-
*
|
|
496
|
-
* @param {MediaQuery} mediaQuery
|
|
497
|
-
* @param {MediaSize} mediaSize
|
|
498
|
-
*/
|
|
499
|
-
const queryMatchesSize = (mediaQuery, mediaSize) => {
|
|
500
|
-
switch (mediaQuery) {
|
|
501
|
-
case "all":
|
|
502
|
-
return true;
|
|
503
|
-
|
|
504
|
-
case "small":
|
|
505
|
-
return mediaSize === "small";
|
|
506
|
-
|
|
507
|
-
case "mdOrSmaller":
|
|
508
|
-
return mediaSize === "medium" || mediaSize === "small";
|
|
509
|
-
|
|
510
|
-
case "medium":
|
|
511
|
-
return mediaSize === "medium";
|
|
512
|
-
|
|
513
|
-
case "mdOrLarger":
|
|
514
|
-
return mediaSize === "medium" || mediaSize === "large";
|
|
515
|
-
|
|
516
|
-
case "large":
|
|
517
|
-
return mediaSize === "large";
|
|
518
|
-
|
|
519
|
-
default:
|
|
520
|
-
throw new Error(`Unsupported mediaSize: ${mediaSize}`);
|
|
521
|
-
}
|
|
522
|
-
};
|
|
523
|
-
|
|
524
|
-
/***/ }),
|
|
525
|
-
/* 9 */
|
|
526
|
-
/***/ (function(module, exports) {
|
|
527
|
-
|
|
528
|
-
function _extends() {
|
|
529
|
-
module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
530
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
531
|
-
var source = arguments[i];
|
|
532
|
-
|
|
533
|
-
for (var key in source) {
|
|
534
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
535
|
-
target[key] = source[key];
|
|
536
|
-
}
|
|
537
|
-
}
|
|
538
|
-
}
|
|
539
|
-
|
|
540
|
-
return target;
|
|
541
|
-
}, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
|
542
|
-
return _extends.apply(this, arguments);
|
|
543
|
-
}
|
|
544
|
-
|
|
545
|
-
module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
|
546
|
-
|
|
547
|
-
/***/ }),
|
|
548
|
-
/* 10 */
|
|
549
|
-
/***/ (function(module, exports) {
|
|
550
|
-
|
|
551
|
-
module.exports = require("aphrodite");
|
|
552
|
-
|
|
553
|
-
/***/ }),
|
|
554
|
-
/* 11 */
|
|
555
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
556
|
-
|
|
557
|
-
"use strict";
|
|
558
|
-
__webpack_require__.r(__webpack_exports__);
|
|
559
|
-
/* harmony import */ var _components_media_layout_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
|
|
560
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MediaLayout", function() { return _components_media_layout_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
|
|
561
|
-
|
|
562
|
-
/* harmony import */ var _components_media_layout_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
|
|
563
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MediaLayoutContext", function() { return _components_media_layout_context_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
|
|
564
|
-
|
|
565
|
-
/* harmony import */ var _components_spring_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
|
|
566
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Spring", function() { return _components_spring_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
|
|
567
|
-
|
|
568
|
-
/* harmony import */ var _components_strut_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7);
|
|
569
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Strut", function() { return _components_strut_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
|
|
570
|
-
|
|
571
|
-
/* harmony import */ var _util_specs_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
|
|
572
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VALID_MEDIA_SIZES", function() { return _util_specs_js__WEBPACK_IMPORTED_MODULE_4__["d"]; });
|
|
573
|
-
|
|
574
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MEDIA_DEFAULT_SPEC", function() { return _util_specs_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
|
|
575
|
-
|
|
576
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MEDIA_INTERNAL_SPEC", function() { return _util_specs_js__WEBPACK_IMPORTED_MODULE_4__["b"]; });
|
|
577
|
-
|
|
578
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MEDIA_MODAL_SPEC", function() { return _util_specs_js__WEBPACK_IMPORTED_MODULE_4__["c"]; });
|
|
579
|
-
|
|
580
|
-
/* harmony import */ var _util_util_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8);
|
|
581
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "queryMatchesSize", function() { return _util_util_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
/***/ })
|
|
591
|
-
/******/ ]);
|
package/dist/index.js.flow
DELETED