@khanacademy/wonder-blocks-layout 3.1.9 → 3.1.10
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 +8 -0
- package/dist/es/index.js +7 -219
- package/dist/index.js +7 -222
- package/package.json +3 -4
package/CHANGELOG.md
CHANGED
package/dist/es/index.js
CHANGED
|
@@ -1,231 +1,19 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { InitialFallback, View } from '@khanacademy/wonder-blocks-core';
|
|
4
4
|
import { spacing } from '@khanacademy/wonder-blocks-tokens';
|
|
5
5
|
import { StyleSheet } from 'aphrodite';
|
|
6
6
|
|
|
7
|
-
const VALID_MEDIA_SIZES
|
|
8
|
-
const mediaDefaultSpecLargeMarginWidth = spacing.large_24;
|
|
9
|
-
const MEDIA_DEFAULT_SPEC = {
|
|
10
|
-
small: {
|
|
11
|
-
query: "(max-width: 767px)",
|
|
12
|
-
totalColumns: 4,
|
|
13
|
-
gutterWidth: spacing.medium_16,
|
|
14
|
-
marginWidth: spacing.medium_16
|
|
15
|
-
},
|
|
16
|
-
medium: {
|
|
17
|
-
query: "(min-width: 768px) and (max-width: 1023px)",
|
|
18
|
-
totalColumns: 8,
|
|
19
|
-
gutterWidth: spacing.xLarge_32,
|
|
20
|
-
marginWidth: spacing.large_24
|
|
21
|
-
},
|
|
22
|
-
large: {
|
|
23
|
-
query: "(min-width: 1024px)",
|
|
24
|
-
totalColumns: 12,
|
|
25
|
-
gutterWidth: spacing.xLarge_32,
|
|
26
|
-
marginWidth: mediaDefaultSpecLargeMarginWidth,
|
|
27
|
-
maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
const MEDIA_INTERNAL_SPEC = {
|
|
31
|
-
large: {
|
|
32
|
-
query: "(min-width: 1px)",
|
|
33
|
-
totalColumns: 12,
|
|
34
|
-
gutterWidth: spacing.xLarge_32,
|
|
35
|
-
marginWidth: spacing.medium_16
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
const MEDIA_MODAL_SPEC = {
|
|
39
|
-
small: {
|
|
40
|
-
query: "(max-width: 767px)",
|
|
41
|
-
totalColumns: 4,
|
|
42
|
-
gutterWidth: spacing.medium_16,
|
|
43
|
-
marginWidth: spacing.medium_16
|
|
44
|
-
},
|
|
45
|
-
large: {
|
|
46
|
-
query: "(min-width: 768px)",
|
|
47
|
-
totalColumns: 12,
|
|
48
|
-
gutterWidth: spacing.xLarge_32,
|
|
49
|
-
marginWidth: spacing.xxLarge_48
|
|
50
|
-
}
|
|
51
|
-
};
|
|
7
|
+
const VALID_MEDIA_SIZES=["small","medium","large"];const mediaDefaultSpecLargeMarginWidth=spacing.large_24;const MEDIA_DEFAULT_SPEC={small:{query:"(max-width: 767px)",totalColumns:4,gutterWidth:spacing.medium_16,marginWidth:spacing.medium_16},medium:{query:"(min-width: 768px) and (max-width: 1023px)",totalColumns:8,gutterWidth:spacing.xLarge_32,marginWidth:spacing.large_24},large:{query:"(min-width: 1024px)",totalColumns:12,gutterWidth:spacing.xLarge_32,marginWidth:mediaDefaultSpecLargeMarginWidth,maxWidth:1120+mediaDefaultSpecLargeMarginWidth*2}};const MEDIA_INTERNAL_SPEC={large:{query:"(min-width: 1px)",totalColumns:12,gutterWidth:spacing.xLarge_32,marginWidth:spacing.medium_16}};const MEDIA_MODAL_SPEC={small:{query:"(max-width: 767px)",totalColumns:4,gutterWidth:spacing.medium_16,marginWidth:spacing.medium_16},large:{query:"(min-width: 768px)",totalColumns:12,gutterWidth:spacing.xLarge_32,marginWidth:spacing.xxLarge_48}};
|
|
52
8
|
|
|
53
|
-
const defaultContext =
|
|
54
|
-
ssrSize: "large",
|
|
55
|
-
mediaSpec: MEDIA_DEFAULT_SPEC
|
|
56
|
-
};
|
|
57
|
-
const MediaLayoutContext = React.createContext(defaultContext);
|
|
58
|
-
MediaLayoutContext.displayName = "MediaLayoutContext";
|
|
9
|
+
const defaultContext={ssrSize:"large",mediaSpec:MEDIA_DEFAULT_SPEC};const MediaLayoutContext=React.createContext(defaultContext);MediaLayoutContext.displayName="MediaLayoutContext";
|
|
59
10
|
|
|
60
|
-
const mediaQueryLists = {};
|
|
61
|
-
const DEFAULT_SIZE = "large";
|
|
62
|
-
class MediaLayoutInternal extends React.Component {
|
|
63
|
-
constructor(props) {
|
|
64
|
-
super(props);
|
|
65
|
-
this.cleanupThunks = void 0;
|
|
66
|
-
this.state = {
|
|
67
|
-
size: undefined
|
|
68
|
-
};
|
|
69
|
-
this.cleanupThunks = [];
|
|
70
|
-
}
|
|
71
|
-
componentDidMount() {
|
|
72
|
-
const entries = Object.entries(this.props.mediaSpec);
|
|
73
|
-
for (const [size, spec] of entries) {
|
|
74
|
-
const mql = mediaQueryLists[spec.query];
|
|
75
|
-
if (!mql) {
|
|
76
|
-
continue;
|
|
77
|
-
}
|
|
78
|
-
const listener = e => {
|
|
79
|
-
if (e.matches) {
|
|
80
|
-
this.setState({
|
|
81
|
-
size
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
mql.addListener(listener);
|
|
86
|
-
this.cleanupThunks.push(() => mql.removeListener(listener));
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
componentWillUnmount() {
|
|
90
|
-
this.cleanupThunks.forEach(cleaup => cleaup());
|
|
91
|
-
}
|
|
92
|
-
getCurrentSize(spec) {
|
|
93
|
-
if (this.state.size) {
|
|
94
|
-
return this.state.size;
|
|
95
|
-
} else {
|
|
96
|
-
const entries = Object.entries(this.props.mediaSpec);
|
|
97
|
-
for (const [size, _spec] of entries) {
|
|
98
|
-
const mql = mediaQueryLists[_spec.query];
|
|
99
|
-
if (mql.matches) {
|
|
100
|
-
return size;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
return DEFAULT_SIZE;
|
|
105
|
-
}
|
|
106
|
-
isUnsupportedEnvironment() {
|
|
107
|
-
return typeof window === "undefined" || !window.matchMedia;
|
|
108
|
-
}
|
|
109
|
-
getMockStyleSheet(mediaSize) {
|
|
110
|
-
const {
|
|
111
|
-
styleSheets
|
|
112
|
-
} = this.props;
|
|
113
|
-
const mockStyleSheet = {};
|
|
114
|
-
if (!styleSheets) {
|
|
115
|
-
return mockStyleSheet;
|
|
116
|
-
}
|
|
117
|
-
for (const styleSize of Object.keys(styleSheets)) {
|
|
118
|
-
const styleSheet = styleSheets[styleSize];
|
|
119
|
-
if (!styleSheet) {
|
|
120
|
-
continue;
|
|
121
|
-
}
|
|
122
|
-
for (const name of Object.keys(styleSheet)) {
|
|
123
|
-
if (Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
|
|
124
|
-
continue;
|
|
125
|
-
}
|
|
126
|
-
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]]];
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
return mockStyleSheet;
|
|
130
|
-
}
|
|
131
|
-
renderContent(initialRender) {
|
|
132
|
-
const {
|
|
133
|
-
children,
|
|
134
|
-
mediaSpec,
|
|
135
|
-
ssrSize,
|
|
136
|
-
overrideSize
|
|
137
|
-
} = this.props;
|
|
138
|
-
const queries = [...Object.values(MEDIA_DEFAULT_SPEC).map(spec => spec.query), ...Object.values(MEDIA_INTERNAL_SPEC).map(spec => spec.query), ...Object.values(MEDIA_MODAL_SPEC).map(spec => spec.query), ...Object.values(mediaSpec).map(spec => spec.query)];
|
|
139
|
-
if (!initialRender) {
|
|
140
|
-
for (const query of queries.filter(query => !mediaQueryLists[query])) {
|
|
141
|
-
mediaQueryLists[query] = window.matchMedia(query);
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
const mediaSize = overrideSize || initialRender && ssrSize || this.getCurrentSize(mediaSpec);
|
|
145
|
-
const styles = this.getMockStyleSheet(mediaSize);
|
|
146
|
-
return children({
|
|
147
|
-
mediaSize,
|
|
148
|
-
mediaSpec,
|
|
149
|
-
styles
|
|
150
|
-
});
|
|
151
|
-
}
|
|
152
|
-
render() {
|
|
153
|
-
return React.createElement(InitialFallback, {
|
|
154
|
-
fallback: () => this.renderContent(true)
|
|
155
|
-
}, () => this.renderContent(this.isUnsupportedEnvironment()));
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
class MediaLayout extends React.Component {
|
|
159
|
-
render() {
|
|
160
|
-
return React.createElement(MediaLayoutContext.Consumer, null, ({
|
|
161
|
-
overrideSize,
|
|
162
|
-
ssrSize,
|
|
163
|
-
mediaSpec
|
|
164
|
-
}) => React.createElement(MediaLayoutInternal, _extends({}, this.props, {
|
|
165
|
-
overrideSize: overrideSize,
|
|
166
|
-
ssrSize: ssrSize,
|
|
167
|
-
mediaSpec: mediaSpec
|
|
168
|
-
})));
|
|
169
|
-
}
|
|
170
|
-
}
|
|
11
|
+
const mediaQueryLists={};const DEFAULT_SIZE="large";class MediaLayoutInternal extends React.Component{componentDidMount(){const entries=Object.entries(this.props.mediaSpec);for(const[size,spec]of entries){const mql=mediaQueryLists[spec.query];if(!mql){continue}const listener=e=>{if(e.matches){this.setState({size});}};mql.addListener(listener);this.cleanupThunks.push(()=>mql.removeListener(listener));}}componentWillUnmount(){this.cleanupThunks.forEach(cleaup=>cleaup());}getCurrentSize(spec){if(this.state.size){return this.state.size}else {const entries=Object.entries(this.props.mediaSpec);for(const[size,spec]of entries){const mql=mediaQueryLists[spec.query];if(mql.matches){return size}}}return DEFAULT_SIZE}isUnsupportedEnvironment(){return typeof window==="undefined"||!window.matchMedia}getMockStyleSheet(mediaSize){const{styleSheets}=this.props;const mockStyleSheet={};if(!styleSheets){return mockStyleSheet}for(const styleSize of Object.keys(styleSheets)){const styleSheet=styleSheets[styleSize];if(!styleSheet){continue}for(const name of Object.keys(styleSheet)){if(Object.prototype.hasOwnProperty.call(mockStyleSheet,name)){continue}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]]];}}return mockStyleSheet}renderContent(initialRender){const{children,mediaSpec,ssrSize,overrideSize}=this.props;const queries=[...Object.values(MEDIA_DEFAULT_SPEC).map(spec=>spec.query),...Object.values(MEDIA_INTERNAL_SPEC).map(spec=>spec.query),...Object.values(MEDIA_MODAL_SPEC).map(spec=>spec.query),...Object.values(mediaSpec).map(spec=>spec.query)];if(!initialRender){for(const query of queries.filter(query=>!mediaQueryLists[query])){mediaQueryLists[query]=window.matchMedia(query);}}const mediaSize=overrideSize||initialRender&&ssrSize||this.getCurrentSize(mediaSpec);const styles=this.getMockStyleSheet(mediaSize);return children({mediaSize,mediaSpec,styles})}render(){return jsx(InitialFallback,{fallback:()=>this.renderContent(true),children:()=>this.renderContent(this.isUnsupportedEnvironment())})}constructor(props){super(props);this.state={size:undefined};this.cleanupThunks=[];}}class MediaLayout extends React.Component{render(){return jsx(MediaLayoutContext.Consumer,{children:({overrideSize,ssrSize,mediaSpec})=>jsx(MediaLayoutInternal,{...this.props,overrideSize:overrideSize,ssrSize:ssrSize,mediaSpec:mediaSpec})})}}
|
|
171
12
|
|
|
172
|
-
class Spring extends React.Component {
|
|
173
|
-
render() {
|
|
174
|
-
const {
|
|
175
|
-
style
|
|
176
|
-
} = this.props;
|
|
177
|
-
return React.createElement(View, {
|
|
178
|
-
"aria-hidden": "true",
|
|
179
|
-
style: [styles.grow, style]
|
|
180
|
-
});
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
const styles = StyleSheet.create({
|
|
184
|
-
grow: {
|
|
185
|
-
flexGrow: 1
|
|
186
|
-
}
|
|
187
|
-
});
|
|
13
|
+
class Spring extends React.Component{render(){const{style}=this.props;return jsx(View,{"aria-hidden":"true",style:[styles.grow,style]})}}const styles=StyleSheet.create({grow:{flexGrow:1}});
|
|
188
14
|
|
|
189
|
-
class Strut extends React.Component {
|
|
190
|
-
render() {
|
|
191
|
-
const {
|
|
192
|
-
size,
|
|
193
|
-
style
|
|
194
|
-
} = this.props;
|
|
195
|
-
return React.createElement(View, {
|
|
196
|
-
"aria-hidden": "true",
|
|
197
|
-
style: [strutStyle(size), style]
|
|
198
|
-
});
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
const strutStyle = size => {
|
|
202
|
-
return {
|
|
203
|
-
width: size,
|
|
204
|
-
MsFlexBasis: size,
|
|
205
|
-
MsFlexPreferredSize: size,
|
|
206
|
-
WebkitFlexBasis: size,
|
|
207
|
-
flexBasis: size,
|
|
208
|
-
flexShrink: 0
|
|
209
|
-
};
|
|
210
|
-
};
|
|
15
|
+
class Strut extends React.Component{render(){const{size,style}=this.props;return jsx(View,{"aria-hidden":"true",style:[strutStyle(size),style]})}}const strutStyle=size=>{return {width:size,MsFlexBasis:size,MsFlexPreferredSize:size,WebkitFlexBasis:size,flexBasis:size,flexShrink:0}};
|
|
211
16
|
|
|
212
|
-
const queryMatchesSize
|
|
213
|
-
switch (mediaQuery) {
|
|
214
|
-
case "all":
|
|
215
|
-
return true;
|
|
216
|
-
case "small":
|
|
217
|
-
return mediaSize === "small";
|
|
218
|
-
case "mdOrSmaller":
|
|
219
|
-
return mediaSize === "medium" || mediaSize === "small";
|
|
220
|
-
case "medium":
|
|
221
|
-
return mediaSize === "medium";
|
|
222
|
-
case "mdOrLarger":
|
|
223
|
-
return mediaSize === "medium" || mediaSize === "large";
|
|
224
|
-
case "large":
|
|
225
|
-
return mediaSize === "large";
|
|
226
|
-
default:
|
|
227
|
-
throw new Error(`Unsupported mediaSize: ${mediaSize}`);
|
|
228
|
-
}
|
|
229
|
-
};
|
|
17
|
+
const queryMatchesSize=(mediaQuery,mediaSize)=>{switch(mediaQuery){case"all":return true;case"small":return mediaSize==="small";case"mdOrSmaller":return mediaSize==="medium"||mediaSize==="small";case"medium":return mediaSize==="medium";case"mdOrLarger":return mediaSize==="medium"||mediaSize==="large";case"large":return mediaSize==="large";default:throw new Error(`Unsupported mediaSize: ${mediaSize}`)}};
|
|
230
18
|
|
|
231
19
|
export { MEDIA_DEFAULT_SPEC, MEDIA_INTERNAL_SPEC, MEDIA_MODAL_SPEC, MediaLayout, MediaLayoutContext, Spring, Strut, VALID_MEDIA_SIZES, queryMatchesSize };
|
package/dist/index.js
CHANGED
|
@@ -2,14 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
|
|
8
8
|
var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
|
|
9
9
|
var aphrodite = require('aphrodite');
|
|
10
10
|
|
|
11
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
|
-
|
|
13
11
|
function _interopNamespace(e) {
|
|
14
12
|
if (e && e.__esModule) return e;
|
|
15
13
|
var n = Object.create(null);
|
|
@@ -28,232 +26,19 @@ function _interopNamespace(e) {
|
|
|
28
26
|
return Object.freeze(n);
|
|
29
27
|
}
|
|
30
28
|
|
|
31
|
-
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
32
29
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
33
30
|
|
|
34
|
-
const VALID_MEDIA_SIZES
|
|
35
|
-
const mediaDefaultSpecLargeMarginWidth = wonderBlocksTokens.spacing.large_24;
|
|
36
|
-
const MEDIA_DEFAULT_SPEC = {
|
|
37
|
-
small: {
|
|
38
|
-
query: "(max-width: 767px)",
|
|
39
|
-
totalColumns: 4,
|
|
40
|
-
gutterWidth: wonderBlocksTokens.spacing.medium_16,
|
|
41
|
-
marginWidth: wonderBlocksTokens.spacing.medium_16
|
|
42
|
-
},
|
|
43
|
-
medium: {
|
|
44
|
-
query: "(min-width: 768px) and (max-width: 1023px)",
|
|
45
|
-
totalColumns: 8,
|
|
46
|
-
gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
|
|
47
|
-
marginWidth: wonderBlocksTokens.spacing.large_24
|
|
48
|
-
},
|
|
49
|
-
large: {
|
|
50
|
-
query: "(min-width: 1024px)",
|
|
51
|
-
totalColumns: 12,
|
|
52
|
-
gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
|
|
53
|
-
marginWidth: mediaDefaultSpecLargeMarginWidth,
|
|
54
|
-
maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
const MEDIA_INTERNAL_SPEC = {
|
|
58
|
-
large: {
|
|
59
|
-
query: "(min-width: 1px)",
|
|
60
|
-
totalColumns: 12,
|
|
61
|
-
gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
|
|
62
|
-
marginWidth: wonderBlocksTokens.spacing.medium_16
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
const MEDIA_MODAL_SPEC = {
|
|
66
|
-
small: {
|
|
67
|
-
query: "(max-width: 767px)",
|
|
68
|
-
totalColumns: 4,
|
|
69
|
-
gutterWidth: wonderBlocksTokens.spacing.medium_16,
|
|
70
|
-
marginWidth: wonderBlocksTokens.spacing.medium_16
|
|
71
|
-
},
|
|
72
|
-
large: {
|
|
73
|
-
query: "(min-width: 768px)",
|
|
74
|
-
totalColumns: 12,
|
|
75
|
-
gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
|
|
76
|
-
marginWidth: wonderBlocksTokens.spacing.xxLarge_48
|
|
77
|
-
}
|
|
78
|
-
};
|
|
31
|
+
const VALID_MEDIA_SIZES=["small","medium","large"];const mediaDefaultSpecLargeMarginWidth=wonderBlocksTokens.spacing.large_24;const MEDIA_DEFAULT_SPEC={small:{query:"(max-width: 767px)",totalColumns:4,gutterWidth:wonderBlocksTokens.spacing.medium_16,marginWidth:wonderBlocksTokens.spacing.medium_16},medium:{query:"(min-width: 768px) and (max-width: 1023px)",totalColumns:8,gutterWidth:wonderBlocksTokens.spacing.xLarge_32,marginWidth:wonderBlocksTokens.spacing.large_24},large:{query:"(min-width: 1024px)",totalColumns:12,gutterWidth:wonderBlocksTokens.spacing.xLarge_32,marginWidth:mediaDefaultSpecLargeMarginWidth,maxWidth:1120+mediaDefaultSpecLargeMarginWidth*2}};const MEDIA_INTERNAL_SPEC={large:{query:"(min-width: 1px)",totalColumns:12,gutterWidth:wonderBlocksTokens.spacing.xLarge_32,marginWidth:wonderBlocksTokens.spacing.medium_16}};const MEDIA_MODAL_SPEC={small:{query:"(max-width: 767px)",totalColumns:4,gutterWidth:wonderBlocksTokens.spacing.medium_16,marginWidth:wonderBlocksTokens.spacing.medium_16},large:{query:"(min-width: 768px)",totalColumns:12,gutterWidth:wonderBlocksTokens.spacing.xLarge_32,marginWidth:wonderBlocksTokens.spacing.xxLarge_48}};
|
|
79
32
|
|
|
80
|
-
const defaultContext =
|
|
81
|
-
ssrSize: "large",
|
|
82
|
-
mediaSpec: MEDIA_DEFAULT_SPEC
|
|
83
|
-
};
|
|
84
|
-
const MediaLayoutContext = React__namespace.createContext(defaultContext);
|
|
85
|
-
MediaLayoutContext.displayName = "MediaLayoutContext";
|
|
33
|
+
const defaultContext={ssrSize:"large",mediaSpec:MEDIA_DEFAULT_SPEC};const MediaLayoutContext=React__namespace.createContext(defaultContext);MediaLayoutContext.displayName="MediaLayoutContext";
|
|
86
34
|
|
|
87
|
-
const mediaQueryLists = {};
|
|
88
|
-
const DEFAULT_SIZE = "large";
|
|
89
|
-
class MediaLayoutInternal extends React__namespace.Component {
|
|
90
|
-
constructor(props) {
|
|
91
|
-
super(props);
|
|
92
|
-
this.cleanupThunks = void 0;
|
|
93
|
-
this.state = {
|
|
94
|
-
size: undefined
|
|
95
|
-
};
|
|
96
|
-
this.cleanupThunks = [];
|
|
97
|
-
}
|
|
98
|
-
componentDidMount() {
|
|
99
|
-
const entries = Object.entries(this.props.mediaSpec);
|
|
100
|
-
for (const [size, spec] of entries) {
|
|
101
|
-
const mql = mediaQueryLists[spec.query];
|
|
102
|
-
if (!mql) {
|
|
103
|
-
continue;
|
|
104
|
-
}
|
|
105
|
-
const listener = e => {
|
|
106
|
-
if (e.matches) {
|
|
107
|
-
this.setState({
|
|
108
|
-
size
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
};
|
|
112
|
-
mql.addListener(listener);
|
|
113
|
-
this.cleanupThunks.push(() => mql.removeListener(listener));
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
componentWillUnmount() {
|
|
117
|
-
this.cleanupThunks.forEach(cleaup => cleaup());
|
|
118
|
-
}
|
|
119
|
-
getCurrentSize(spec) {
|
|
120
|
-
if (this.state.size) {
|
|
121
|
-
return this.state.size;
|
|
122
|
-
} else {
|
|
123
|
-
const entries = Object.entries(this.props.mediaSpec);
|
|
124
|
-
for (const [size, _spec] of entries) {
|
|
125
|
-
const mql = mediaQueryLists[_spec.query];
|
|
126
|
-
if (mql.matches) {
|
|
127
|
-
return size;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
return DEFAULT_SIZE;
|
|
132
|
-
}
|
|
133
|
-
isUnsupportedEnvironment() {
|
|
134
|
-
return typeof window === "undefined" || !window.matchMedia;
|
|
135
|
-
}
|
|
136
|
-
getMockStyleSheet(mediaSize) {
|
|
137
|
-
const {
|
|
138
|
-
styleSheets
|
|
139
|
-
} = this.props;
|
|
140
|
-
const mockStyleSheet = {};
|
|
141
|
-
if (!styleSheets) {
|
|
142
|
-
return mockStyleSheet;
|
|
143
|
-
}
|
|
144
|
-
for (const styleSize of Object.keys(styleSheets)) {
|
|
145
|
-
const styleSheet = styleSheets[styleSize];
|
|
146
|
-
if (!styleSheet) {
|
|
147
|
-
continue;
|
|
148
|
-
}
|
|
149
|
-
for (const name of Object.keys(styleSheet)) {
|
|
150
|
-
if (Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
|
|
151
|
-
continue;
|
|
152
|
-
}
|
|
153
|
-
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]]];
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
return mockStyleSheet;
|
|
157
|
-
}
|
|
158
|
-
renderContent(initialRender) {
|
|
159
|
-
const {
|
|
160
|
-
children,
|
|
161
|
-
mediaSpec,
|
|
162
|
-
ssrSize,
|
|
163
|
-
overrideSize
|
|
164
|
-
} = this.props;
|
|
165
|
-
const queries = [...Object.values(MEDIA_DEFAULT_SPEC).map(spec => spec.query), ...Object.values(MEDIA_INTERNAL_SPEC).map(spec => spec.query), ...Object.values(MEDIA_MODAL_SPEC).map(spec => spec.query), ...Object.values(mediaSpec).map(spec => spec.query)];
|
|
166
|
-
if (!initialRender) {
|
|
167
|
-
for (const query of queries.filter(query => !mediaQueryLists[query])) {
|
|
168
|
-
mediaQueryLists[query] = window.matchMedia(query);
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
const mediaSize = overrideSize || initialRender && ssrSize || this.getCurrentSize(mediaSpec);
|
|
172
|
-
const styles = this.getMockStyleSheet(mediaSize);
|
|
173
|
-
return children({
|
|
174
|
-
mediaSize,
|
|
175
|
-
mediaSpec,
|
|
176
|
-
styles
|
|
177
|
-
});
|
|
178
|
-
}
|
|
179
|
-
render() {
|
|
180
|
-
return React__namespace.createElement(wonderBlocksCore.InitialFallback, {
|
|
181
|
-
fallback: () => this.renderContent(true)
|
|
182
|
-
}, () => this.renderContent(this.isUnsupportedEnvironment()));
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
class MediaLayout extends React__namespace.Component {
|
|
186
|
-
render() {
|
|
187
|
-
return React__namespace.createElement(MediaLayoutContext.Consumer, null, ({
|
|
188
|
-
overrideSize,
|
|
189
|
-
ssrSize,
|
|
190
|
-
mediaSpec
|
|
191
|
-
}) => React__namespace.createElement(MediaLayoutInternal, _extends__default["default"]({}, this.props, {
|
|
192
|
-
overrideSize: overrideSize,
|
|
193
|
-
ssrSize: ssrSize,
|
|
194
|
-
mediaSpec: mediaSpec
|
|
195
|
-
})));
|
|
196
|
-
}
|
|
197
|
-
}
|
|
35
|
+
const mediaQueryLists={};const DEFAULT_SIZE="large";class MediaLayoutInternal extends React__namespace.Component{componentDidMount(){const entries=Object.entries(this.props.mediaSpec);for(const[size,spec]of entries){const mql=mediaQueryLists[spec.query];if(!mql){continue}const listener=e=>{if(e.matches){this.setState({size});}};mql.addListener(listener);this.cleanupThunks.push(()=>mql.removeListener(listener));}}componentWillUnmount(){this.cleanupThunks.forEach(cleaup=>cleaup());}getCurrentSize(spec){if(this.state.size){return this.state.size}else {const entries=Object.entries(this.props.mediaSpec);for(const[size,spec]of entries){const mql=mediaQueryLists[spec.query];if(mql.matches){return size}}}return DEFAULT_SIZE}isUnsupportedEnvironment(){return typeof window==="undefined"||!window.matchMedia}getMockStyleSheet(mediaSize){const{styleSheets}=this.props;const mockStyleSheet={};if(!styleSheets){return mockStyleSheet}for(const styleSize of Object.keys(styleSheets)){const styleSheet=styleSheets[styleSize];if(!styleSheet){continue}for(const name of Object.keys(styleSheet)){if(Object.prototype.hasOwnProperty.call(mockStyleSheet,name)){continue}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]]];}}return mockStyleSheet}renderContent(initialRender){const{children,mediaSpec,ssrSize,overrideSize}=this.props;const queries=[...Object.values(MEDIA_DEFAULT_SPEC).map(spec=>spec.query),...Object.values(MEDIA_INTERNAL_SPEC).map(spec=>spec.query),...Object.values(MEDIA_MODAL_SPEC).map(spec=>spec.query),...Object.values(mediaSpec).map(spec=>spec.query)];if(!initialRender){for(const query of queries.filter(query=>!mediaQueryLists[query])){mediaQueryLists[query]=window.matchMedia(query);}}const mediaSize=overrideSize||initialRender&&ssrSize||this.getCurrentSize(mediaSpec);const styles=this.getMockStyleSheet(mediaSize);return children({mediaSize,mediaSpec,styles})}render(){return jsxRuntime.jsx(wonderBlocksCore.InitialFallback,{fallback:()=>this.renderContent(true),children:()=>this.renderContent(this.isUnsupportedEnvironment())})}constructor(props){super(props);this.state={size:undefined};this.cleanupThunks=[];}}class MediaLayout extends React__namespace.Component{render(){return jsxRuntime.jsx(MediaLayoutContext.Consumer,{children:({overrideSize,ssrSize,mediaSpec})=>jsxRuntime.jsx(MediaLayoutInternal,{...this.props,overrideSize:overrideSize,ssrSize:ssrSize,mediaSpec:mediaSpec})})}}
|
|
198
36
|
|
|
199
|
-
class Spring extends React__namespace.Component {
|
|
200
|
-
render() {
|
|
201
|
-
const {
|
|
202
|
-
style
|
|
203
|
-
} = this.props;
|
|
204
|
-
return React__namespace.createElement(wonderBlocksCore.View, {
|
|
205
|
-
"aria-hidden": "true",
|
|
206
|
-
style: [styles.grow, style]
|
|
207
|
-
});
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
const styles = aphrodite.StyleSheet.create({
|
|
211
|
-
grow: {
|
|
212
|
-
flexGrow: 1
|
|
213
|
-
}
|
|
214
|
-
});
|
|
37
|
+
class Spring extends React__namespace.Component{render(){const{style}=this.props;return jsxRuntime.jsx(wonderBlocksCore.View,{"aria-hidden":"true",style:[styles.grow,style]})}}const styles=aphrodite.StyleSheet.create({grow:{flexGrow:1}});
|
|
215
38
|
|
|
216
|
-
class Strut extends React__namespace.Component {
|
|
217
|
-
render() {
|
|
218
|
-
const {
|
|
219
|
-
size,
|
|
220
|
-
style
|
|
221
|
-
} = this.props;
|
|
222
|
-
return React__namespace.createElement(wonderBlocksCore.View, {
|
|
223
|
-
"aria-hidden": "true",
|
|
224
|
-
style: [strutStyle(size), style]
|
|
225
|
-
});
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
const strutStyle = size => {
|
|
229
|
-
return {
|
|
230
|
-
width: size,
|
|
231
|
-
MsFlexBasis: size,
|
|
232
|
-
MsFlexPreferredSize: size,
|
|
233
|
-
WebkitFlexBasis: size,
|
|
234
|
-
flexBasis: size,
|
|
235
|
-
flexShrink: 0
|
|
236
|
-
};
|
|
237
|
-
};
|
|
39
|
+
class Strut extends React__namespace.Component{render(){const{size,style}=this.props;return jsxRuntime.jsx(wonderBlocksCore.View,{"aria-hidden":"true",style:[strutStyle(size),style]})}}const strutStyle=size=>{return {width:size,MsFlexBasis:size,MsFlexPreferredSize:size,WebkitFlexBasis:size,flexBasis:size,flexShrink:0}};
|
|
238
40
|
|
|
239
|
-
const queryMatchesSize
|
|
240
|
-
switch (mediaQuery) {
|
|
241
|
-
case "all":
|
|
242
|
-
return true;
|
|
243
|
-
case "small":
|
|
244
|
-
return mediaSize === "small";
|
|
245
|
-
case "mdOrSmaller":
|
|
246
|
-
return mediaSize === "medium" || mediaSize === "small";
|
|
247
|
-
case "medium":
|
|
248
|
-
return mediaSize === "medium";
|
|
249
|
-
case "mdOrLarger":
|
|
250
|
-
return mediaSize === "medium" || mediaSize === "large";
|
|
251
|
-
case "large":
|
|
252
|
-
return mediaSize === "large";
|
|
253
|
-
default:
|
|
254
|
-
throw new Error(`Unsupported mediaSize: ${mediaSize}`);
|
|
255
|
-
}
|
|
256
|
-
};
|
|
41
|
+
const queryMatchesSize=(mediaQuery,mediaSize)=>{switch(mediaQuery){case"all":return true;case"small":return mediaSize==="small";case"mdOrSmaller":return mediaSize==="medium"||mediaSize==="small";case"medium":return mediaSize==="medium";case"mdOrLarger":return mediaSize==="medium"||mediaSize==="large";case"large":return mediaSize==="large";default:throw new Error(`Unsupported mediaSize: ${mediaSize}`)}};
|
|
257
42
|
|
|
258
43
|
exports.MEDIA_DEFAULT_SPEC = MEDIA_DEFAULT_SPEC;
|
|
259
44
|
exports.MEDIA_INTERNAL_SPEC = MEDIA_INTERNAL_SPEC;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-layout",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.10",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -10,12 +10,11 @@
|
|
|
10
10
|
"module": "dist/es/index.js",
|
|
11
11
|
"types": "dist/index.d.ts",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@babel/runtime": "^7.24.5",
|
|
14
13
|
"@khanacademy/wonder-blocks-core": "12.2.1",
|
|
15
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
14
|
+
"@khanacademy/wonder-blocks-tokens": "10.0.0"
|
|
16
15
|
},
|
|
17
16
|
"devDependencies": {
|
|
18
|
-
"@khanacademy/wb-dev-build-settings": "
|
|
17
|
+
"@khanacademy/wb-dev-build-settings": "3.0.0"
|
|
19
18
|
},
|
|
20
19
|
"peerDependencies": {
|
|
21
20
|
"aphrodite": "^1.2.5",
|