@khanacademy/wonder-blocks-grid 1.0.34 → 1.0.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js
DELETED
|
@@ -1,1402 +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 = 9);
|
|
86
|
-
/******/ })
|
|
87
|
-
/************************************************************************/
|
|
88
|
-
/******/ ([
|
|
89
|
-
/* 0 */
|
|
90
|
-
/***/ (function(module, exports) {
|
|
91
|
-
|
|
92
|
-
module.exports = require("react");
|
|
93
|
-
|
|
94
|
-
/***/ }),
|
|
95
|
-
/* 1 */
|
|
96
|
-
/***/ (function(module, exports, __webpack_require__) {
|
|
97
|
-
|
|
98
|
-
module.exports =
|
|
99
|
-
/******/
|
|
100
|
-
function (modules) {
|
|
101
|
-
// webpackBootstrap
|
|
102
|
-
|
|
103
|
-
/******/
|
|
104
|
-
// The module cache
|
|
105
|
-
|
|
106
|
-
/******/
|
|
107
|
-
var installedModules = {};
|
|
108
|
-
/******/
|
|
109
|
-
|
|
110
|
-
/******/
|
|
111
|
-
// The require function
|
|
112
|
-
|
|
113
|
-
/******/
|
|
114
|
-
|
|
115
|
-
function __webpack_require__(moduleId) {
|
|
116
|
-
/******/
|
|
117
|
-
|
|
118
|
-
/******/
|
|
119
|
-
// Check if module is in cache
|
|
120
|
-
|
|
121
|
-
/******/
|
|
122
|
-
if (installedModules[moduleId]) {
|
|
123
|
-
/******/
|
|
124
|
-
return installedModules[moduleId].exports;
|
|
125
|
-
/******/
|
|
126
|
-
}
|
|
127
|
-
/******/
|
|
128
|
-
// Create a new module (and put it into the cache)
|
|
129
|
-
|
|
130
|
-
/******/
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
var module = installedModules[moduleId] = {
|
|
134
|
-
/******/
|
|
135
|
-
i: moduleId,
|
|
136
|
-
|
|
137
|
-
/******/
|
|
138
|
-
l: false,
|
|
139
|
-
|
|
140
|
-
/******/
|
|
141
|
-
exports: {}
|
|
142
|
-
/******/
|
|
143
|
-
|
|
144
|
-
};
|
|
145
|
-
/******/
|
|
146
|
-
|
|
147
|
-
/******/
|
|
148
|
-
// Execute the module function
|
|
149
|
-
|
|
150
|
-
/******/
|
|
151
|
-
|
|
152
|
-
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
|
153
|
-
/******/
|
|
154
|
-
|
|
155
|
-
/******/
|
|
156
|
-
// Flag the module as loaded
|
|
157
|
-
|
|
158
|
-
/******/
|
|
159
|
-
|
|
160
|
-
module.l = true;
|
|
161
|
-
/******/
|
|
162
|
-
|
|
163
|
-
/******/
|
|
164
|
-
// Return the exports of the module
|
|
165
|
-
|
|
166
|
-
/******/
|
|
167
|
-
|
|
168
|
-
return module.exports;
|
|
169
|
-
/******/
|
|
170
|
-
}
|
|
171
|
-
/******/
|
|
172
|
-
|
|
173
|
-
/******/
|
|
174
|
-
|
|
175
|
-
/******/
|
|
176
|
-
// expose the modules object (__webpack_modules__)
|
|
177
|
-
|
|
178
|
-
/******/
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
__webpack_require__.m = modules;
|
|
182
|
-
/******/
|
|
183
|
-
|
|
184
|
-
/******/
|
|
185
|
-
// expose the module cache
|
|
186
|
-
|
|
187
|
-
/******/
|
|
188
|
-
|
|
189
|
-
__webpack_require__.c = installedModules;
|
|
190
|
-
/******/
|
|
191
|
-
|
|
192
|
-
/******/
|
|
193
|
-
// define getter function for harmony exports
|
|
194
|
-
|
|
195
|
-
/******/
|
|
196
|
-
|
|
197
|
-
__webpack_require__.d = function (exports, name, getter) {
|
|
198
|
-
/******/
|
|
199
|
-
if (!__webpack_require__.o(exports, name)) {
|
|
200
|
-
/******/
|
|
201
|
-
Object.defineProperty(exports, name, {
|
|
202
|
-
enumerable: true,
|
|
203
|
-
get: getter
|
|
204
|
-
});
|
|
205
|
-
/******/
|
|
206
|
-
}
|
|
207
|
-
/******/
|
|
208
|
-
|
|
209
|
-
};
|
|
210
|
-
/******/
|
|
211
|
-
|
|
212
|
-
/******/
|
|
213
|
-
// define __esModule on exports
|
|
214
|
-
|
|
215
|
-
/******/
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
__webpack_require__.r = function (exports) {
|
|
219
|
-
/******/
|
|
220
|
-
if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
221
|
-
/******/
|
|
222
|
-
Object.defineProperty(exports, Symbol.toStringTag, {
|
|
223
|
-
value: 'Module'
|
|
224
|
-
});
|
|
225
|
-
/******/
|
|
226
|
-
}
|
|
227
|
-
/******/
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
Object.defineProperty(exports, '__esModule', {
|
|
231
|
-
value: true
|
|
232
|
-
});
|
|
233
|
-
/******/
|
|
234
|
-
};
|
|
235
|
-
/******/
|
|
236
|
-
|
|
237
|
-
/******/
|
|
238
|
-
// create a fake namespace object
|
|
239
|
-
|
|
240
|
-
/******/
|
|
241
|
-
// mode & 1: value is a module id, require it
|
|
242
|
-
|
|
243
|
-
/******/
|
|
244
|
-
// mode & 2: merge all properties of value into the ns
|
|
245
|
-
|
|
246
|
-
/******/
|
|
247
|
-
// mode & 4: return value when already ns object
|
|
248
|
-
|
|
249
|
-
/******/
|
|
250
|
-
// mode & 8|1: behave like require
|
|
251
|
-
|
|
252
|
-
/******/
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
__webpack_require__.t = function (value, mode) {
|
|
256
|
-
/******/
|
|
257
|
-
if (mode & 1) value = __webpack_require__(value);
|
|
258
|
-
/******/
|
|
259
|
-
|
|
260
|
-
if (mode & 8) return value;
|
|
261
|
-
/******/
|
|
262
|
-
|
|
263
|
-
if (mode & 4 && typeof value === 'object' && value && value.__esModule) return value;
|
|
264
|
-
/******/
|
|
265
|
-
|
|
266
|
-
var ns = Object.create(null);
|
|
267
|
-
/******/
|
|
268
|
-
|
|
269
|
-
__webpack_require__.r(ns);
|
|
270
|
-
/******/
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
Object.defineProperty(ns, 'default', {
|
|
274
|
-
enumerable: true,
|
|
275
|
-
value: value
|
|
276
|
-
});
|
|
277
|
-
/******/
|
|
278
|
-
|
|
279
|
-
if (mode & 2 && typeof value != 'string') for (var key in value) __webpack_require__.d(ns, key, function (key) {
|
|
280
|
-
return value[key];
|
|
281
|
-
}.bind(null, key));
|
|
282
|
-
/******/
|
|
283
|
-
|
|
284
|
-
return ns;
|
|
285
|
-
/******/
|
|
286
|
-
};
|
|
287
|
-
/******/
|
|
288
|
-
|
|
289
|
-
/******/
|
|
290
|
-
// getDefaultExport function for compatibility with non-harmony modules
|
|
291
|
-
|
|
292
|
-
/******/
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
__webpack_require__.n = function (module) {
|
|
296
|
-
/******/
|
|
297
|
-
var getter = module && module.__esModule ?
|
|
298
|
-
/******/
|
|
299
|
-
function getDefault() {
|
|
300
|
-
return module['default'];
|
|
301
|
-
} :
|
|
302
|
-
/******/
|
|
303
|
-
function getModuleExports() {
|
|
304
|
-
return module;
|
|
305
|
-
};
|
|
306
|
-
/******/
|
|
307
|
-
|
|
308
|
-
__webpack_require__.d(getter, 'a', getter);
|
|
309
|
-
/******/
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
return getter;
|
|
313
|
-
/******/
|
|
314
|
-
};
|
|
315
|
-
/******/
|
|
316
|
-
|
|
317
|
-
/******/
|
|
318
|
-
// Object.prototype.hasOwnProperty.call
|
|
319
|
-
|
|
320
|
-
/******/
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
__webpack_require__.o = function (object, property) {
|
|
324
|
-
return Object.prototype.hasOwnProperty.call(object, property);
|
|
325
|
-
};
|
|
326
|
-
/******/
|
|
327
|
-
|
|
328
|
-
/******/
|
|
329
|
-
// __webpack_public_path__
|
|
330
|
-
|
|
331
|
-
/******/
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
__webpack_require__.p = "";
|
|
335
|
-
/******/
|
|
336
|
-
|
|
337
|
-
/******/
|
|
338
|
-
|
|
339
|
-
/******/
|
|
340
|
-
// Load entry module and return exports
|
|
341
|
-
|
|
342
|
-
/******/
|
|
343
|
-
|
|
344
|
-
return __webpack_require__(__webpack_require__.s = 11);
|
|
345
|
-
/******/
|
|
346
|
-
}
|
|
347
|
-
/************************************************************************/
|
|
348
|
-
|
|
349
|
-
/******/
|
|
350
|
-
([
|
|
351
|
-
/* 0 */
|
|
352
|
-
|
|
353
|
-
/***/
|
|
354
|
-
function (module, exports) {
|
|
355
|
-
module.exports = __webpack_require__(0);
|
|
356
|
-
/***/
|
|
357
|
-
},
|
|
358
|
-
/* 1 */
|
|
359
|
-
|
|
360
|
-
/***/
|
|
361
|
-
function (module, exports) {
|
|
362
|
-
module.exports = __webpack_require__(10);
|
|
363
|
-
/***/
|
|
364
|
-
},
|
|
365
|
-
/* 2 */
|
|
366
|
-
|
|
367
|
-
/***/
|
|
368
|
-
function (module, __webpack_exports__, __webpack_require__) {
|
|
369
|
-
"use strict";
|
|
370
|
-
/* harmony export (binding) */
|
|
371
|
-
|
|
372
|
-
__webpack_require__.d(__webpack_exports__, "d", function () {
|
|
373
|
-
return VALID_MEDIA_SIZES;
|
|
374
|
-
});
|
|
375
|
-
/* harmony export (binding) */
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
__webpack_require__.d(__webpack_exports__, "a", function () {
|
|
379
|
-
return MEDIA_DEFAULT_SPEC;
|
|
380
|
-
});
|
|
381
|
-
/* harmony export (binding) */
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
__webpack_require__.d(__webpack_exports__, "b", function () {
|
|
385
|
-
return MEDIA_INTERNAL_SPEC;
|
|
386
|
-
});
|
|
387
|
-
/* harmony export (binding) */
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
__webpack_require__.d(__webpack_exports__, "c", function () {
|
|
391
|
-
return MEDIA_MODAL_SPEC;
|
|
392
|
-
});
|
|
393
|
-
/* harmony import */
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
|
|
397
|
-
/* harmony import */
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0__); // All possible valid media sizes
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
const VALID_MEDIA_SIZES = ["small", "medium", "large"];
|
|
404
|
-
const mediaDefaultSpecLargeMarginWidth = _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.large_24; // The default spec for media layout, currently available in
|
|
405
|
-
// three different settings (roughly mobile, tablet, and desktop).
|
|
406
|
-
|
|
407
|
-
const MEDIA_DEFAULT_SPEC = {
|
|
408
|
-
small: {
|
|
409
|
-
query: "(max-width: 767px)",
|
|
410
|
-
totalColumns: 4,
|
|
411
|
-
gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16,
|
|
412
|
-
marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16
|
|
413
|
-
},
|
|
414
|
-
medium: {
|
|
415
|
-
query: "(min-width: 768px) and (max-width: 1023px)",
|
|
416
|
-
totalColumns: 8,
|
|
417
|
-
gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xLarge_32,
|
|
418
|
-
marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.large_24
|
|
419
|
-
},
|
|
420
|
-
large: {
|
|
421
|
-
query: "(min-width: 1024px)",
|
|
422
|
-
totalColumns: 12,
|
|
423
|
-
gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xLarge_32,
|
|
424
|
-
marginWidth: mediaDefaultSpecLargeMarginWidth,
|
|
425
|
-
maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
|
|
426
|
-
}
|
|
427
|
-
}; // Used for internal tools
|
|
428
|
-
|
|
429
|
-
const MEDIA_INTERNAL_SPEC = {
|
|
430
|
-
large: {
|
|
431
|
-
query: "(min-width: 1px)",
|
|
432
|
-
totalColumns: 12,
|
|
433
|
-
gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xLarge_32,
|
|
434
|
-
marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16
|
|
435
|
-
}
|
|
436
|
-
}; // The default used for modals
|
|
437
|
-
|
|
438
|
-
const MEDIA_MODAL_SPEC = {
|
|
439
|
-
small: {
|
|
440
|
-
query: "(max-width: 767px)",
|
|
441
|
-
totalColumns: 4,
|
|
442
|
-
gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16,
|
|
443
|
-
marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.medium_16
|
|
444
|
-
},
|
|
445
|
-
large: {
|
|
446
|
-
query: "(min-width: 768px)",
|
|
447
|
-
totalColumns: 12,
|
|
448
|
-
gutterWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xLarge_32,
|
|
449
|
-
marginWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xxLarge_48
|
|
450
|
-
}
|
|
451
|
-
};
|
|
452
|
-
/***/
|
|
453
|
-
},
|
|
454
|
-
/* 3 */
|
|
455
|
-
|
|
456
|
-
/***/
|
|
457
|
-
function (module, __webpack_exports__, __webpack_require__) {
|
|
458
|
-
"use strict";
|
|
459
|
-
/* harmony import */
|
|
460
|
-
|
|
461
|
-
var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
|
|
462
|
-
/* harmony import */
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
466
|
-
/* harmony import */
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
var _util_specs_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
|
|
470
|
-
|
|
471
|
-
const defaultContext = {
|
|
472
|
-
ssrSize: "large",
|
|
473
|
-
mediaSpec: _util_specs_js__WEBPACK_IMPORTED_MODULE_1__[
|
|
474
|
-
/* MEDIA_DEFAULT_SPEC */
|
|
475
|
-
"a"]
|
|
476
|
-
};
|
|
477
|
-
/* harmony default export */
|
|
478
|
-
|
|
479
|
-
__webpack_exports__["a"] = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createContext"](defaultContext);
|
|
480
|
-
/***/
|
|
481
|
-
},
|
|
482
|
-
/* 4 */
|
|
483
|
-
|
|
484
|
-
/***/
|
|
485
|
-
function (module, exports) {
|
|
486
|
-
module.exports = __webpack_require__(3);
|
|
487
|
-
/***/
|
|
488
|
-
},
|
|
489
|
-
/* 5 */
|
|
490
|
-
|
|
491
|
-
/***/
|
|
492
|
-
function (module, __webpack_exports__, __webpack_require__) {
|
|
493
|
-
"use strict";
|
|
494
|
-
/* harmony export (binding) */
|
|
495
|
-
|
|
496
|
-
__webpack_require__.d(__webpack_exports__, "a", function () {
|
|
497
|
-
return MediaLayout;
|
|
498
|
-
});
|
|
499
|
-
/* harmony import */
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
|
|
503
|
-
/* harmony import */
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
507
|
-
/* harmony import */
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
511
|
-
/* harmony import */
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
515
|
-
/* harmony import */
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
var _media_layout_context_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
|
|
519
|
-
/* harmony import */
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
var _util_specs_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
|
|
523
|
-
|
|
524
|
-
const queries = [].concat(Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_3__[
|
|
525
|
-
/* MEDIA_DEFAULT_SPEC */
|
|
526
|
-
"a"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_3__[
|
|
527
|
-
/* MEDIA_INTERNAL_SPEC */
|
|
528
|
-
"b"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_3__[
|
|
529
|
-
/* MEDIA_MODAL_SPEC */
|
|
530
|
-
"c"]).map(spec => spec.query));
|
|
531
|
-
const mediaQueryLists = {}; // eslint-disable-next-line ft-flow/require-exact-type
|
|
532
|
-
// If for some reason we're not able to resolve the current media size we
|
|
533
|
-
// fall back to this state.
|
|
534
|
-
|
|
535
|
-
const DEFAULT_SIZE = "large";
|
|
536
|
-
/**
|
|
537
|
-
* `MediaLayout` is responsible for changing the rendering of contents at
|
|
538
|
-
* differently sized viewports. `MediaLayoutContext.Provider` can be used
|
|
539
|
-
* to specify different breakpoint configurations. By default it uses
|
|
540
|
-
* `MEDIA_DEFAULT_SPEC`. See media-layout-context.js for additiional options.
|
|
541
|
-
*/
|
|
542
|
-
|
|
543
|
-
class MediaLayoutInternal extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
544
|
-
// A collection of thunks that's used to clean up event listeners
|
|
545
|
-
// when the component is unmounted.
|
|
546
|
-
constructor(props) {
|
|
547
|
-
super(props);
|
|
548
|
-
this.state = {
|
|
549
|
-
size: undefined
|
|
550
|
-
};
|
|
551
|
-
this.cleanupThunks = [];
|
|
552
|
-
}
|
|
553
|
-
|
|
554
|
-
componentDidMount() {
|
|
555
|
-
// TODO(WB-534): handle changes to mediaSpec prop
|
|
556
|
-
const entries = Object.entries(this.props.mediaSpec);
|
|
557
|
-
|
|
558
|
-
for (const [size, spec] of entries) {
|
|
559
|
-
const mql = mediaQueryLists[spec.query]; // during SSR there are no MediaQueryLists
|
|
560
|
-
|
|
561
|
-
if (!mql) {
|
|
562
|
-
continue;
|
|
563
|
-
}
|
|
564
|
-
|
|
565
|
-
const listener = e => {
|
|
566
|
-
if (e.matches) {
|
|
567
|
-
this.setState({
|
|
568
|
-
size
|
|
569
|
-
});
|
|
570
|
-
}
|
|
571
|
-
};
|
|
572
|
-
|
|
573
|
-
mql.addListener(listener);
|
|
574
|
-
this.cleanupThunks.push(() => mql.removeListener(listener));
|
|
575
|
-
}
|
|
576
|
-
}
|
|
577
|
-
|
|
578
|
-
componentWillUnmount() {
|
|
579
|
-
// Remove our listeners.
|
|
580
|
-
this.cleanupThunks.forEach(cleaup => cleaup());
|
|
581
|
-
}
|
|
582
|
-
|
|
583
|
-
getCurrentSize(spec) {
|
|
584
|
-
// If we have a state with the current size in it then we always want
|
|
585
|
-
// to use that. This will happen if the viewport changes sizes after
|
|
586
|
-
// we've already initialized.
|
|
587
|
-
if (this.state.size) {
|
|
588
|
-
return this.state.size;
|
|
589
|
-
} else {
|
|
590
|
-
const entries = Object.entries(this.props.mediaSpec);
|
|
591
|
-
|
|
592
|
-
for (const [size, spec] of entries) {
|
|
593
|
-
const mql = mediaQueryLists[spec.query];
|
|
594
|
-
|
|
595
|
-
if (mql.matches) {
|
|
596
|
-
return size;
|
|
597
|
-
}
|
|
598
|
-
}
|
|
599
|
-
}
|
|
600
|
-
|
|
601
|
-
return DEFAULT_SIZE;
|
|
602
|
-
} // We assume that we're running on the server (or, at least, an unsupported
|
|
603
|
-
// environment) if there is no window object or matchMedia function
|
|
604
|
-
// available.
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
isServerSide() {
|
|
608
|
-
return typeof window === "undefined" || !window.matchMedia;
|
|
609
|
-
} // Generate a mock Aphrodite StyleSheet based upon the current mediaSize
|
|
610
|
-
// We do this by looking at all of the stylesheets specified in the
|
|
611
|
-
// styleSheets prop and then all of the individual styles. We merge the
|
|
612
|
-
// styles together
|
|
613
|
-
// TODO(WB-533): move to util.js to make it easier to test
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
getMockStyleSheet(mediaSize) {
|
|
617
|
-
const {
|
|
618
|
-
styleSheets
|
|
619
|
-
} = this.props;
|
|
620
|
-
const mockStyleSheet = {}; // If no stylesheets were specified then we just return an empty object
|
|
621
|
-
|
|
622
|
-
if (!styleSheets) {
|
|
623
|
-
return mockStyleSheet;
|
|
624
|
-
} // Go through all of the stylesheets that were specified
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
for (const styleSize of Object.keys(styleSheets)) {
|
|
628
|
-
const styleSheet = styleSheets[styleSize];
|
|
629
|
-
|
|
630
|
-
if (!styleSheet) {
|
|
631
|
-
continue;
|
|
632
|
-
} // And then through each key of each stylesheet
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
for (const name of Object.keys(styleSheet)) {
|
|
636
|
-
if ( // $FlowIgnore[method-unbinding]
|
|
637
|
-
Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
|
|
638
|
-
continue;
|
|
639
|
-
} // We create an entry that combines the values from all of
|
|
640
|
-
// the stylesheets together in least-specific to most-specific
|
|
641
|
-
// priority (thus small/medium/large styles will always have
|
|
642
|
-
// precedence over "all" or mdOrSmaller/mdOrLarger/etc.).
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
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]]];
|
|
646
|
-
}
|
|
647
|
-
}
|
|
648
|
-
|
|
649
|
-
return mockStyleSheet;
|
|
650
|
-
}
|
|
651
|
-
|
|
652
|
-
render() {
|
|
653
|
-
const {
|
|
654
|
-
children,
|
|
655
|
-
mediaSpec,
|
|
656
|
-
ssrSize,
|
|
657
|
-
overrideSize
|
|
658
|
-
} = this.props; // We need to create the MediaQueryLists during the first render in order
|
|
659
|
-
// to query whether any of them match.
|
|
660
|
-
|
|
661
|
-
if (!this.isServerSide()) {
|
|
662
|
-
for (const query of queries.filter(query => !mediaQueryLists[query])) {
|
|
663
|
-
mediaQueryLists[query] = window.matchMedia(query);
|
|
664
|
-
}
|
|
665
|
-
} // We need to figure out what the current media size is
|
|
666
|
-
// If an override has been specified, we use that.
|
|
667
|
-
// If we're rendering on the server then we use the default
|
|
668
|
-
// SSR rendering size.
|
|
669
|
-
// Otherwise we attempt to get the current size based on
|
|
670
|
-
// the current MediaSpec.
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec); // Generate a mock stylesheet
|
|
674
|
-
|
|
675
|
-
const styles = this.getMockStyleSheet(mediaSize);
|
|
676
|
-
return children({
|
|
677
|
-
mediaSize,
|
|
678
|
-
mediaSpec,
|
|
679
|
-
styles
|
|
680
|
-
});
|
|
681
|
-
}
|
|
682
|
-
|
|
683
|
-
} // gen-snapshot-tests.js only understands `export default class ...`
|
|
684
|
-
|
|
685
|
-
/**
|
|
686
|
-
* ***NOTE: The MediaLayout component is being deprecated. Do not use this!!***
|
|
687
|
-
*
|
|
688
|
-
* MediaLayout is a container component that accepts a `styleSheets` object,
|
|
689
|
-
* whose keys are media sizes. It listens for changes to the current media
|
|
690
|
-
* size and passes the current `mediaSize`, `mediaSpec`, and `styles` to
|
|
691
|
-
* `children`, which is a render function taking those three values as an
|
|
692
|
-
* object.
|
|
693
|
-
*
|
|
694
|
-
* Valid keys for the `styleSheets` object are (in order of precedence):
|
|
695
|
-
* - `small`, `medium`, `large`
|
|
696
|
-
* - `mdOrSmaller`, `mdOrLarger`
|
|
697
|
-
* - `all`
|
|
698
|
-
*
|
|
699
|
-
* `MediaLayout` will merge style rules from multiple styles that match the
|
|
700
|
-
* current media query, e.g. `"(min-width: 1024px)"`.
|
|
701
|
-
*
|
|
702
|
-
* The `mediaSpec` is an object with one or more of the following keys:
|
|
703
|
-
* `small`, `medium`, or `large`. Each value contains the following data:
|
|
704
|
-
* - `query: string` e.g. "(min-width: 1024px)"
|
|
705
|
-
* - `totalColumns: number`
|
|
706
|
-
* - `gutterWidth: number`
|
|
707
|
-
* - `marginWidth: number`
|
|
708
|
-
* - `maxWidth: number`
|
|
709
|
-
*/
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
class MediaLayout extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
713
|
-
render() {
|
|
714
|
-
// We listen to the MediaLayoutContext to see what defaults we're
|
|
715
|
-
// being given (this can be overriden by wrapping this component in
|
|
716
|
-
// a MediaLayoutContext.Consumer).
|
|
717
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_media_layout_context_js__WEBPACK_IMPORTED_MODULE_2__[
|
|
718
|
-
/* default */
|
|
719
|
-
"a"].Consumer, null, ({
|
|
720
|
-
overrideSize,
|
|
721
|
-
ssrSize,
|
|
722
|
-
mediaSpec
|
|
723
|
-
}) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](MediaLayoutInternal, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, this.props, {
|
|
724
|
-
overrideSize: overrideSize,
|
|
725
|
-
ssrSize: ssrSize,
|
|
726
|
-
mediaSpec: mediaSpec
|
|
727
|
-
})));
|
|
728
|
-
}
|
|
729
|
-
|
|
730
|
-
}
|
|
731
|
-
/***/
|
|
732
|
-
|
|
733
|
-
},
|
|
734
|
-
/* 6 */
|
|
735
|
-
|
|
736
|
-
/***/
|
|
737
|
-
function (module, __webpack_exports__, __webpack_require__) {
|
|
738
|
-
"use strict";
|
|
739
|
-
/* harmony export (binding) */
|
|
740
|
-
|
|
741
|
-
__webpack_require__.d(__webpack_exports__, "a", function () {
|
|
742
|
-
return Spring;
|
|
743
|
-
});
|
|
744
|
-
/* harmony import */
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
|
|
748
|
-
/* harmony import */
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
752
|
-
/* harmony import */
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
|
|
756
|
-
/* harmony import */
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
|
|
760
|
-
/* harmony import */
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
|
|
764
|
-
/* harmony import */
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
|
|
768
|
-
/**
|
|
769
|
-
* Expands to fill space between sibling components.
|
|
770
|
-
*
|
|
771
|
-
* Assumes parent is a View.
|
|
772
|
-
*/
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
class Spring extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
776
|
-
render() {
|
|
777
|
-
const {
|
|
778
|
-
style
|
|
779
|
-
} = this.props;
|
|
780
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
|
|
781
|
-
"aria-hidden": "true",
|
|
782
|
-
style: [styles.grow, style]
|
|
783
|
-
});
|
|
784
|
-
}
|
|
785
|
-
|
|
786
|
-
}
|
|
787
|
-
|
|
788
|
-
const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
|
|
789
|
-
grow: {
|
|
790
|
-
flexGrow: 1
|
|
791
|
-
}
|
|
792
|
-
});
|
|
793
|
-
/***/
|
|
794
|
-
},
|
|
795
|
-
/* 7 */
|
|
796
|
-
|
|
797
|
-
/***/
|
|
798
|
-
function (module, __webpack_exports__, __webpack_require__) {
|
|
799
|
-
"use strict";
|
|
800
|
-
/* harmony export (binding) */
|
|
801
|
-
|
|
802
|
-
__webpack_require__.d(__webpack_exports__, "a", function () {
|
|
803
|
-
return Strut;
|
|
804
|
-
});
|
|
805
|
-
/* harmony import */
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
|
|
809
|
-
/* harmony import */
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
813
|
-
/* harmony import */
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
|
|
817
|
-
/* harmony import */
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
|
|
821
|
-
/**
|
|
822
|
-
* A component for inserting fixed space between components.
|
|
823
|
-
*
|
|
824
|
-
* Assumes parent is a View.
|
|
825
|
-
*/
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
class Strut extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
829
|
-
render() {
|
|
830
|
-
const {
|
|
831
|
-
size,
|
|
832
|
-
style
|
|
833
|
-
} = this.props;
|
|
834
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["View"], {
|
|
835
|
-
"aria-hidden": "true",
|
|
836
|
-
style: [strutStyle(size), style]
|
|
837
|
-
});
|
|
838
|
-
}
|
|
839
|
-
|
|
840
|
-
}
|
|
841
|
-
|
|
842
|
-
const strutStyle = size => {
|
|
843
|
-
return {
|
|
844
|
-
width: size,
|
|
845
|
-
MsFlexBasis: size,
|
|
846
|
-
MsFlexPreferredSize: size,
|
|
847
|
-
WebkitFlexBasis: size,
|
|
848
|
-
flexBasis: size,
|
|
849
|
-
flexShrink: 0
|
|
850
|
-
};
|
|
851
|
-
};
|
|
852
|
-
/***/
|
|
853
|
-
|
|
854
|
-
},
|
|
855
|
-
/* 8 */
|
|
856
|
-
|
|
857
|
-
/***/
|
|
858
|
-
function (module, __webpack_exports__, __webpack_require__) {
|
|
859
|
-
"use strict";
|
|
860
|
-
/* harmony export (binding) */
|
|
861
|
-
|
|
862
|
-
__webpack_require__.d(__webpack_exports__, "a", function () {
|
|
863
|
-
return queryMatchesSize;
|
|
864
|
-
});
|
|
865
|
-
/**
|
|
866
|
-
* Return where a media size matches a media query.
|
|
867
|
-
*
|
|
868
|
-
* examples:
|
|
869
|
-
* - `queryMatchesSize("all", "small")` returns `true`
|
|
870
|
-
* - `queryMatchesSize("mdOrLarger", "small")` returns `false`
|
|
871
|
-
*
|
|
872
|
-
* @param {MediaQuery} mediaQuery
|
|
873
|
-
* @param {MediaSize} mediaSize
|
|
874
|
-
*/
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
const queryMatchesSize = (mediaQuery, mediaSize) => {
|
|
878
|
-
switch (mediaQuery) {
|
|
879
|
-
case "all":
|
|
880
|
-
return true;
|
|
881
|
-
|
|
882
|
-
case "small":
|
|
883
|
-
return mediaSize === "small";
|
|
884
|
-
|
|
885
|
-
case "mdOrSmaller":
|
|
886
|
-
return mediaSize === "medium" || mediaSize === "small";
|
|
887
|
-
|
|
888
|
-
case "medium":
|
|
889
|
-
return mediaSize === "medium";
|
|
890
|
-
|
|
891
|
-
case "mdOrLarger":
|
|
892
|
-
return mediaSize === "medium" || mediaSize === "large";
|
|
893
|
-
|
|
894
|
-
case "large":
|
|
895
|
-
return mediaSize === "large";
|
|
896
|
-
|
|
897
|
-
default:
|
|
898
|
-
throw new Error(`Unsupported mediaSize: ${mediaSize}`);
|
|
899
|
-
}
|
|
900
|
-
};
|
|
901
|
-
/***/
|
|
902
|
-
|
|
903
|
-
},
|
|
904
|
-
/* 9 */
|
|
905
|
-
|
|
906
|
-
/***/
|
|
907
|
-
function (module, exports) {
|
|
908
|
-
function _extends() {
|
|
909
|
-
module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
910
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
911
|
-
var source = arguments[i];
|
|
912
|
-
|
|
913
|
-
for (var key in source) {
|
|
914
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
915
|
-
target[key] = source[key];
|
|
916
|
-
}
|
|
917
|
-
}
|
|
918
|
-
}
|
|
919
|
-
|
|
920
|
-
return target;
|
|
921
|
-
}, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
|
922
|
-
return _extends.apply(this, arguments);
|
|
923
|
-
}
|
|
924
|
-
|
|
925
|
-
module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
|
926
|
-
/***/
|
|
927
|
-
},
|
|
928
|
-
/* 10 */
|
|
929
|
-
|
|
930
|
-
/***/
|
|
931
|
-
function (module, exports) {
|
|
932
|
-
module.exports = __webpack_require__(5);
|
|
933
|
-
/***/
|
|
934
|
-
},
|
|
935
|
-
/* 11 */
|
|
936
|
-
|
|
937
|
-
/***/
|
|
938
|
-
function (module, __webpack_exports__, __webpack_require__) {
|
|
939
|
-
"use strict";
|
|
940
|
-
|
|
941
|
-
__webpack_require__.r(__webpack_exports__);
|
|
942
|
-
/* harmony import */
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
var _components_media_layout_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
|
|
946
|
-
/* harmony reexport (safe) */
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
__webpack_require__.d(__webpack_exports__, "MediaLayout", function () {
|
|
950
|
-
return _components_media_layout_js__WEBPACK_IMPORTED_MODULE_0__["a"];
|
|
951
|
-
});
|
|
952
|
-
/* harmony import */
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
var _components_media_layout_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
|
|
956
|
-
/* harmony reexport (safe) */
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
__webpack_require__.d(__webpack_exports__, "MediaLayoutContext", function () {
|
|
960
|
-
return _components_media_layout_context_js__WEBPACK_IMPORTED_MODULE_1__["a"];
|
|
961
|
-
});
|
|
962
|
-
/* harmony import */
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
var _components_spring_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
|
|
966
|
-
/* harmony reexport (safe) */
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
__webpack_require__.d(__webpack_exports__, "Spring", function () {
|
|
970
|
-
return _components_spring_js__WEBPACK_IMPORTED_MODULE_2__["a"];
|
|
971
|
-
});
|
|
972
|
-
/* harmony import */
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
var _components_strut_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7);
|
|
976
|
-
/* harmony reexport (safe) */
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
__webpack_require__.d(__webpack_exports__, "Strut", function () {
|
|
980
|
-
return _components_strut_js__WEBPACK_IMPORTED_MODULE_3__["a"];
|
|
981
|
-
});
|
|
982
|
-
/* harmony import */
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
var _util_specs_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
|
|
986
|
-
/* harmony reexport (safe) */
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
__webpack_require__.d(__webpack_exports__, "VALID_MEDIA_SIZES", function () {
|
|
990
|
-
return _util_specs_js__WEBPACK_IMPORTED_MODULE_4__["d"];
|
|
991
|
-
});
|
|
992
|
-
/* harmony reexport (safe) */
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
__webpack_require__.d(__webpack_exports__, "MEDIA_DEFAULT_SPEC", function () {
|
|
996
|
-
return _util_specs_js__WEBPACK_IMPORTED_MODULE_4__["a"];
|
|
997
|
-
});
|
|
998
|
-
/* harmony reexport (safe) */
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
__webpack_require__.d(__webpack_exports__, "MEDIA_INTERNAL_SPEC", function () {
|
|
1002
|
-
return _util_specs_js__WEBPACK_IMPORTED_MODULE_4__["b"];
|
|
1003
|
-
});
|
|
1004
|
-
/* harmony reexport (safe) */
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
__webpack_require__.d(__webpack_exports__, "MEDIA_MODAL_SPEC", function () {
|
|
1008
|
-
return _util_specs_js__WEBPACK_IMPORTED_MODULE_4__["c"];
|
|
1009
|
-
});
|
|
1010
|
-
/* harmony import */
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
var _util_util_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8);
|
|
1014
|
-
/* harmony reexport (safe) */
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
__webpack_require__.d(__webpack_exports__, "queryMatchesSize", function () {
|
|
1018
|
-
return _util_util_js__WEBPACK_IMPORTED_MODULE_5__["a"];
|
|
1019
|
-
});
|
|
1020
|
-
/***/
|
|
1021
|
-
|
|
1022
|
-
}
|
|
1023
|
-
/******/
|
|
1024
|
-
]);
|
|
1025
|
-
|
|
1026
|
-
/***/ }),
|
|
1027
|
-
/* 2 */
|
|
1028
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
1029
|
-
|
|
1030
|
-
"use strict";
|
|
1031
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Cell; });
|
|
1032
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
|
|
1033
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
1034
|
-
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
|
|
1035
|
-
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__);
|
|
1036
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
|
|
1037
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
|
|
1038
|
-
/* harmony import */ var _util_styles_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
|
|
1039
|
-
/* harmony import */ var _util_utils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7);
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
/**
|
|
1047
|
-
* A Cell is a container whose width is set based on the width of the
|
|
1048
|
-
* specified columns at the current grid size. You will specify the number
|
|
1049
|
-
* of columns that you want this component to span at each grid size.
|
|
1050
|
-
* This component should only be used as a child of a [Row](#row).
|
|
1051
|
-
*
|
|
1052
|
-
* This component renders a [View](#view) that
|
|
1053
|
-
* uses Flex Box and has a [flex-basis](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis)
|
|
1054
|
-
* of the specified "width" and [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
|
|
1055
|
-
* of 0.
|
|
1056
|
-
*
|
|
1057
|
-
* By default (with no properties specified) it will display at all
|
|
1058
|
-
* grid sizes. If you specify the `smallCols`, `mediumCols`, `largeCols`, or
|
|
1059
|
-
* `cols` props then the component will only be shown at those grid sizes and
|
|
1060
|
-
* using the specified column width.
|
|
1061
|
-
*/
|
|
1062
|
-
class Cell extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
1063
|
-
static isClassOf(instance) {
|
|
1064
|
-
return instance && instance.type && instance.type.__IS_CELL__;
|
|
1065
|
-
}
|
|
1066
|
-
|
|
1067
|
-
static getCols(props, mediaSize) {
|
|
1068
|
-
// If no option was specified then we just return undefined,
|
|
1069
|
-
// components may handle this case differently.
|
|
1070
|
-
// We go through all the ways in which a fixed width can be
|
|
1071
|
-
// specified and find the one that matches our current grid size.
|
|
1072
|
-
if (!props.smallCols && !props.mediumCols && !props.largeCols && !props.cols) {
|
|
1073
|
-
return undefined;
|
|
1074
|
-
} else if (props.smallCols && mediaSize === "small") {
|
|
1075
|
-
return props.smallCols;
|
|
1076
|
-
} else if (props.mediumCols && mediaSize === "medium") {
|
|
1077
|
-
return props.mediumCols;
|
|
1078
|
-
} else if (props.largeCols && mediaSize === "large") {
|
|
1079
|
-
return props.largeCols;
|
|
1080
|
-
} else if (typeof props.cols === "function") {
|
|
1081
|
-
return props.cols(mediaSize);
|
|
1082
|
-
} else if (props.cols) {
|
|
1083
|
-
return props.cols;
|
|
1084
|
-
} // If nothing applies then we return null (usually resulting
|
|
1085
|
-
// in the component not being rendered)
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
return null;
|
|
1089
|
-
} // HACK(kevinb): we use a stack method here because we can't get a ref to
|
|
1090
|
-
// each cell in a row without cloning them all.
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
static shouldDisplay(props, mediaSize) {
|
|
1094
|
-
const cols = Cell.getCols(props, mediaSize);
|
|
1095
|
-
return cols !== null && cols !== 0;
|
|
1096
|
-
}
|
|
1097
|
-
|
|
1098
|
-
render() {
|
|
1099
|
-
const {
|
|
1100
|
-
children,
|
|
1101
|
-
style
|
|
1102
|
-
} = this.props;
|
|
1103
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__["MediaLayout"], null, ({
|
|
1104
|
-
mediaSize,
|
|
1105
|
-
mediaSpec
|
|
1106
|
-
}) => {
|
|
1107
|
-
const spec = mediaSpec[mediaSize];
|
|
1108
|
-
|
|
1109
|
-
if (!spec) {
|
|
1110
|
-
throw new Error(`mediaSpec.${mediaSize} is undefined`);
|
|
1111
|
-
} // Get the settings for this particular size of grid
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
const {
|
|
1115
|
-
totalColumns,
|
|
1116
|
-
gutterWidth,
|
|
1117
|
-
marginWidth
|
|
1118
|
-
} = spec;
|
|
1119
|
-
const cols = Cell.getCols(this.props, mediaSize); // If no columns are specified then we just don't render this cell
|
|
1120
|
-
|
|
1121
|
-
if (cols === undefined || cols === null || cols === 0) {
|
|
1122
|
-
return null;
|
|
1123
|
-
}
|
|
1124
|
-
|
|
1125
|
-
if (cols > totalColumns) {
|
|
1126
|
-
throw new Error(`Specified columns ${cols} is greater than the maximum ` + `${totalColumns} at the ${mediaSize} grid size.`);
|
|
1127
|
-
} // We need to start by calculating the total width of all the "content"
|
|
1128
|
-
// We do this by starting with the full width (100%) and then
|
|
1129
|
-
// subtracting all of the gutter spaces inbetween the cells
|
|
1130
|
-
// (gutterWidth * (totalColumns - 1)) and the width of the two margins
|
|
1131
|
-
// (marginWidth * 2).
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
const contentWidth = `(100% - ${gutterWidth * (totalColumns - 1)}px - ${marginWidth * 2}px)`; // Now that we have the full width we can calculate the width of this
|
|
1135
|
-
// particular cell by multiplying the full width (allCellWidth) by
|
|
1136
|
-
// the ratio of this cell (cols / totalColumns). But we then need to
|
|
1137
|
-
// add back in the missing gutter widths:
|
|
1138
|
-
// (gutterWidth * (cols - 1)). This gives us to full width of
|
|
1139
|
-
// this particular cell.
|
|
1140
|
-
|
|
1141
|
-
const calcWidth = `calc(${contentWidth} * ${cols / totalColumns} + ${gutterWidth * (cols - 1)}px)`; // If the contents are a function then we call it with the mediaSize,
|
|
1142
|
-
// totalColumns, and cols properties and render the return value.
|
|
1143
|
-
|
|
1144
|
-
const contents = typeof children === "function" ? children({
|
|
1145
|
-
mediaSize,
|
|
1146
|
-
totalColumns,
|
|
1147
|
-
cols
|
|
1148
|
-
}) : children; // Render a fixed-width cell (flex-basis: size, flex-shrink: 0)
|
|
1149
|
-
// that matches the intended width of the cell
|
|
1150
|
-
|
|
1151
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
|
|
1152
|
-
style: [_util_styles_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"].cellFixed, Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_4__[/* flexBasis */ "a"])(calcWidth), style]
|
|
1153
|
-
}, contents);
|
|
1154
|
-
});
|
|
1155
|
-
}
|
|
1156
|
-
|
|
1157
|
-
}
|
|
1158
|
-
Cell.defaultProps = {
|
|
1159
|
-
smallCols: 0,
|
|
1160
|
-
mediumCols: 0,
|
|
1161
|
-
largeCols: 0,
|
|
1162
|
-
cols: 0
|
|
1163
|
-
};
|
|
1164
|
-
Cell.__IS_CELL__ = true;
|
|
1165
|
-
|
|
1166
|
-
/***/ }),
|
|
1167
|
-
/* 3 */
|
|
1168
|
-
/***/ (function(module, exports) {
|
|
1169
|
-
|
|
1170
|
-
module.exports = require("@khanacademy/wonder-blocks-core");
|
|
1171
|
-
|
|
1172
|
-
/***/ }),
|
|
1173
|
-
/* 4 */
|
|
1174
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
1175
|
-
|
|
1176
|
-
"use strict";
|
|
1177
|
-
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
|
|
1178
|
-
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_0__);
|
|
1179
|
-
|
|
1180
|
-
const WIDE_SCREEN = "@media (min-width: 1168px)";
|
|
1181
|
-
const styles = aphrodite__WEBPACK_IMPORTED_MODULE_0__["StyleSheet"].create({
|
|
1182
|
-
row: {
|
|
1183
|
-
flexDirection: "row",
|
|
1184
|
-
alignItems: "center",
|
|
1185
|
-
width: "100%"
|
|
1186
|
-
},
|
|
1187
|
-
rowMaxWidth: {
|
|
1188
|
-
[WIDE_SCREEN]: {
|
|
1189
|
-
margin: "0 auto"
|
|
1190
|
-
}
|
|
1191
|
-
},
|
|
1192
|
-
cellGrow: {
|
|
1193
|
-
flexGrow: 1
|
|
1194
|
-
},
|
|
1195
|
-
cellFixed: {
|
|
1196
|
-
flexShrink: 0
|
|
1197
|
-
}
|
|
1198
|
-
});
|
|
1199
|
-
/* harmony default export */ __webpack_exports__["a"] = (styles);
|
|
1200
|
-
|
|
1201
|
-
/***/ }),
|
|
1202
|
-
/* 5 */
|
|
1203
|
-
/***/ (function(module, exports) {
|
|
1204
|
-
|
|
1205
|
-
module.exports = require("aphrodite");
|
|
1206
|
-
|
|
1207
|
-
/***/ }),
|
|
1208
|
-
/* 6 */
|
|
1209
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
1210
|
-
|
|
1211
|
-
"use strict";
|
|
1212
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Row; });
|
|
1213
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
|
|
1214
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
1215
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
|
|
1216
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
|
|
1217
|
-
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
|
|
1218
|
-
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__);
|
|
1219
|
-
/* harmony import */ var _util_styles_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
|
|
1220
|
-
/* harmony import */ var _gutter_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
|
|
1221
|
-
/* harmony import */ var _cell_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2);
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
/**
|
|
1230
|
-
* A Row holds all of the Cells that make up the contents of the grid. A row
|
|
1231
|
-
* also provides the margins on the sides and inserts the gutter spacing
|
|
1232
|
-
* in-between the cells. Typically this component will hold a [Cell](#cell),
|
|
1233
|
-
* but it can also include any elements that could fit in a
|
|
1234
|
-
* [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
|
|
1235
|
-
*
|
|
1236
|
-
* This component will automatically attempt to insert [Gutters](#gutter)
|
|
1237
|
-
* in-between all child elements. Additionally, it'll perform some basic checks
|
|
1238
|
-
* to ensure that no impossible layouts are accidentally generated.
|
|
1239
|
-
*
|
|
1240
|
-
* Typically this component will be used as a child of a [Grid](#grid-1),
|
|
1241
|
-
* but it's not a requirement, you can use it as a descendant, as well.
|
|
1242
|
-
*
|
|
1243
|
-
* By default (with no properties specified) it will display at all
|
|
1244
|
-
* grid sizes. If you specify the `small`, `medium`, or `large`
|
|
1245
|
-
* props then the component will only be shown at those grid sizes.
|
|
1246
|
-
*/
|
|
1247
|
-
class Row extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
1248
|
-
render() {
|
|
1249
|
-
const {
|
|
1250
|
-
style,
|
|
1251
|
-
children
|
|
1252
|
-
} = this.props;
|
|
1253
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["MediaLayout"], null, ({
|
|
1254
|
-
mediaSize,
|
|
1255
|
-
mediaSpec
|
|
1256
|
-
}) => {
|
|
1257
|
-
const spec = mediaSpec[mediaSize];
|
|
1258
|
-
|
|
1259
|
-
if (!spec) {
|
|
1260
|
-
throw new Error(`mediaSpec.${mediaSize} is undefined`);
|
|
1261
|
-
}
|
|
1262
|
-
|
|
1263
|
-
const {
|
|
1264
|
-
marginWidth,
|
|
1265
|
-
maxWidth,
|
|
1266
|
-
totalColumns
|
|
1267
|
-
} = spec;
|
|
1268
|
-
const shouldDisplay = Object(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["queryMatchesSize"])(this.props.mediaQuery, mediaSize); // Don't render the row if it's been disabled at this size
|
|
1269
|
-
|
|
1270
|
-
if (!shouldDisplay) {
|
|
1271
|
-
return null;
|
|
1272
|
-
} // If the contents are a function then we call it with the mediaSize and
|
|
1273
|
-
// totalColumns properties and render the return value.
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
const contents = typeof children === "function" ? children({
|
|
1277
|
-
mediaSize,
|
|
1278
|
-
totalColumns
|
|
1279
|
-
}) : children;
|
|
1280
|
-
const filteredContents = react__WEBPACK_IMPORTED_MODULE_0__["Children"].toArray(contents) // Go through all of the contents and pre-emptively remove anything
|
|
1281
|
-
// that shouldn't be rendered.
|
|
1282
|
-
.filter( // Flow doesn't let us check .type on a non-null React.Node so
|
|
1283
|
-
// we have to cast it to any.
|
|
1284
|
-
item => _cell_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].isClassOf(item) ? _cell_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].shouldDisplay(item.props, mediaSize) : true) // Intersperse Gutter elements between the cells.
|
|
1285
|
-
.reduce((acc, elem, index) => [].concat(acc, [elem, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_gutter_js__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"], {
|
|
1286
|
-
key: `gutter-${index}`
|
|
1287
|
-
})]), []) // We only want gutters between each cell in the row. The reduce
|
|
1288
|
-
// adds a gutter after every cell so we need to remove the last
|
|
1289
|
-
// element which is an unnecessary gutteer.
|
|
1290
|
-
.slice(0, -1);
|
|
1291
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["View"], {
|
|
1292
|
-
style: [_util_styles_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"].row, !!maxWidth && _util_styles_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"].rowMaxWidth, !!maxWidth && {
|
|
1293
|
-
maxWidth
|
|
1294
|
-
}, style]
|
|
1295
|
-
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["Strut"], {
|
|
1296
|
-
size: marginWidth
|
|
1297
|
-
}), filteredContents, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["Strut"], {
|
|
1298
|
-
size: marginWidth
|
|
1299
|
-
}));
|
|
1300
|
-
});
|
|
1301
|
-
}
|
|
1302
|
-
|
|
1303
|
-
}
|
|
1304
|
-
Row.defaultProps = {
|
|
1305
|
-
mediaQuery: "all"
|
|
1306
|
-
};
|
|
1307
|
-
|
|
1308
|
-
/***/ }),
|
|
1309
|
-
/* 7 */
|
|
1310
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
1311
|
-
|
|
1312
|
-
"use strict";
|
|
1313
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return flexBasis; });
|
|
1314
|
-
const flexBasis = size => {
|
|
1315
|
-
return {
|
|
1316
|
-
MsFlexBasis: size,
|
|
1317
|
-
MsFlexPreferredSize: size,
|
|
1318
|
-
WebkitFlexBasis: size,
|
|
1319
|
-
flexBasis: size
|
|
1320
|
-
};
|
|
1321
|
-
};
|
|
1322
|
-
|
|
1323
|
-
/***/ }),
|
|
1324
|
-
/* 8 */
|
|
1325
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
1326
|
-
|
|
1327
|
-
"use strict";
|
|
1328
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Gutter; });
|
|
1329
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
|
|
1330
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
1331
|
-
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
|
|
1332
|
-
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__);
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
/**
|
|
1337
|
-
* Gutter is a component whose width is set based on the size of grid currently
|
|
1338
|
-
* being displayed. Used for spacing out cells from each other. The gutter
|
|
1339
|
-
* itself doesn't hold any content, it just spaces it out.
|
|
1340
|
-
*
|
|
1341
|
-
* Gutters are inserted automatically inside of a [Row](#row) in-between Cells.
|
|
1342
|
-
* You may only need to use Gutters if you're manually building your own
|
|
1343
|
-
* sub-grid, or some-such (this should be relatively rare).
|
|
1344
|
-
*
|
|
1345
|
-
* By default (with no properties specified) it will display at all
|
|
1346
|
-
* grid sizes. If you specify the `small`, `medium`, or `large`
|
|
1347
|
-
* props then the component will only be shown at those grid sizes.
|
|
1348
|
-
*/
|
|
1349
|
-
class Gutter extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
1350
|
-
render() {
|
|
1351
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__["MediaLayout"], null, ({
|
|
1352
|
-
mediaSize,
|
|
1353
|
-
mediaSpec
|
|
1354
|
-
}) => {
|
|
1355
|
-
const spec = mediaSpec[mediaSize];
|
|
1356
|
-
|
|
1357
|
-
if (!spec) {
|
|
1358
|
-
throw new Error(`mediaSpec.${mediaSize} is undefined`);
|
|
1359
|
-
}
|
|
1360
|
-
|
|
1361
|
-
const {
|
|
1362
|
-
gutterWidth
|
|
1363
|
-
} = spec;
|
|
1364
|
-
|
|
1365
|
-
if (!Object(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__["queryMatchesSize"])(this.props.mediaQuery, mediaSize)) {
|
|
1366
|
-
return null;
|
|
1367
|
-
}
|
|
1368
|
-
|
|
1369
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_1__["Strut"], {
|
|
1370
|
-
size: gutterWidth
|
|
1371
|
-
});
|
|
1372
|
-
});
|
|
1373
|
-
}
|
|
1374
|
-
|
|
1375
|
-
}
|
|
1376
|
-
Gutter.defaultProps = {
|
|
1377
|
-
mediaQuery: "all"
|
|
1378
|
-
};
|
|
1379
|
-
|
|
1380
|
-
/***/ }),
|
|
1381
|
-
/* 9 */
|
|
1382
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
1383
|
-
|
|
1384
|
-
"use strict";
|
|
1385
|
-
__webpack_require__.r(__webpack_exports__);
|
|
1386
|
-
/* harmony import */ var _components_cell_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
|
|
1387
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Cell", function() { return _components_cell_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
|
|
1388
|
-
|
|
1389
|
-
/* harmony import */ var _components_row_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
|
|
1390
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Row", function() { return _components_row_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
/***/ }),
|
|
1396
|
-
/* 10 */
|
|
1397
|
-
/***/ (function(module, exports) {
|
|
1398
|
-
|
|
1399
|
-
module.exports = require("@khanacademy/wonder-blocks-spacing");
|
|
1400
|
-
|
|
1401
|
-
/***/ })
|
|
1402
|
-
/******/ ]);
|