@khanacademy/wonder-blocks-layout 2.0.5 → 2.0.6

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 CHANGED
@@ -1,5 +1,13 @@
1
1
  # @khanacademy/wonder-blocks-layout
2
2
 
3
+ ## 2.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - c20f48f3: Don't transpile classes when building bundles
8
+ - Updated dependencies [c20f48f3]
9
+ - @khanacademy/wonder-blocks-core@5.0.4
10
+
3
11
  ## 2.0.5
4
12
 
5
13
  ## 2.0.4
package/dist/es/index.js CHANGED
@@ -18,20 +18,6 @@ function _extends() {
18
18
  return _extends.apply(this, arguments);
19
19
  }
20
20
 
21
- function _setPrototypeOf(o, p) {
22
- _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
23
- o.__proto__ = p;
24
- return o;
25
- };
26
- return _setPrototypeOf(o, p);
27
- }
28
-
29
- function _inheritsLoose(subClass, superClass) {
30
- subClass.prototype = Object.create(superClass.prototype);
31
- subClass.prototype.constructor = subClass;
32
- _setPrototypeOf(subClass, superClass);
33
- }
34
-
35
21
  const VALID_MEDIA_SIZES = ["small", "medium", "large"];
36
22
  const mediaDefaultSpecLargeMarginWidth = Spacing.large_24;
37
23
  const MEDIA_DEFAULT_SPEC = {
@@ -84,23 +70,19 @@ const defaultContext = {
84
70
  };
85
71
  var MediaLayoutContext = React.createContext(defaultContext);
86
72
 
87
- const queries = [].concat(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));
73
+ 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)];
88
74
  const mediaQueryLists = {};
89
75
  const DEFAULT_SIZE = "large";
90
- let MediaLayoutInternal = function (_React$Component) {
91
- _inheritsLoose(MediaLayoutInternal, _React$Component);
92
- function MediaLayoutInternal(props) {
93
- var _this;
94
- _this = _React$Component.call(this, props) || this;
95
- _this.cleanupThunks = void 0;
96
- _this.state = {
76
+ class MediaLayoutInternal extends React.Component {
77
+ constructor(props) {
78
+ super(props);
79
+ this.cleanupThunks = void 0;
80
+ this.state = {
97
81
  size: undefined
98
82
  };
99
- _this.cleanupThunks = [];
100
- return _this;
83
+ this.cleanupThunks = [];
101
84
  }
102
- var _proto = MediaLayoutInternal.prototype;
103
- _proto.componentDidMount = function componentDidMount() {
85
+ componentDidMount() {
104
86
  const entries = Object.entries(this.props.mediaSpec);
105
87
  for (const [size, spec] of entries) {
106
88
  const mql = mediaQueryLists[spec.query];
@@ -117,11 +99,11 @@ let MediaLayoutInternal = function (_React$Component) {
117
99
  mql.addListener(listener);
118
100
  this.cleanupThunks.push(() => mql.removeListener(listener));
119
101
  }
120
- };
121
- _proto.componentWillUnmount = function componentWillUnmount() {
102
+ }
103
+ componentWillUnmount() {
122
104
  this.cleanupThunks.forEach(cleaup => cleaup());
123
- };
124
- _proto.getCurrentSize = function getCurrentSize(spec) {
105
+ }
106
+ getCurrentSize(spec) {
125
107
  if (this.state.size) {
126
108
  return this.state.size;
127
109
  } else {
@@ -134,11 +116,11 @@ let MediaLayoutInternal = function (_React$Component) {
134
116
  }
135
117
  }
136
118
  return DEFAULT_SIZE;
137
- };
138
- _proto.isServerSide = function isServerSide() {
119
+ }
120
+ isServerSide() {
139
121
  return typeof window === "undefined" || !window.matchMedia;
140
- };
141
- _proto.getMockStyleSheet = function getMockStyleSheet(mediaSize) {
122
+ }
123
+ getMockStyleSheet(mediaSize) {
142
124
  const {
143
125
  styleSheets
144
126
  } = this.props;
@@ -159,8 +141,8 @@ let MediaLayoutInternal = function (_React$Component) {
159
141
  }
160
142
  }
161
143
  return mockStyleSheet;
162
- };
163
- _proto.render = function render() {
144
+ }
145
+ render() {
164
146
  const {
165
147
  children,
166
148
  mediaSpec,
@@ -179,16 +161,10 @@ let MediaLayoutInternal = function (_React$Component) {
179
161
  mediaSpec,
180
162
  styles
181
163
  });
182
- };
183
- return MediaLayoutInternal;
184
- }(React.Component);
185
- let MediaLayout = function (_React$Component2) {
186
- _inheritsLoose(MediaLayout, _React$Component2);
187
- function MediaLayout() {
188
- return _React$Component2.apply(this, arguments) || this;
189
164
  }
190
- var _proto2 = MediaLayout.prototype;
191
- _proto2.render = function render() {
165
+ }
166
+ class MediaLayout extends React.Component {
167
+ render() {
192
168
  return React.createElement(MediaLayoutContext.Consumer, null, ({
193
169
  overrideSize,
194
170
  ssrSize,
@@ -198,17 +174,11 @@ let MediaLayout = function (_React$Component2) {
198
174
  ssrSize: ssrSize,
199
175
  mediaSpec: mediaSpec
200
176
  })));
201
- };
202
- return MediaLayout;
203
- }(React.Component);
204
-
205
- let Spring = function (_React$Component) {
206
- _inheritsLoose(Spring, _React$Component);
207
- function Spring() {
208
- return _React$Component.apply(this, arguments) || this;
209
177
  }
210
- var _proto = Spring.prototype;
211
- _proto.render = function render() {
178
+ }
179
+
180
+ class Spring extends React.Component {
181
+ render() {
212
182
  const {
213
183
  style
214
184
  } = this.props;
@@ -216,22 +186,16 @@ let Spring = function (_React$Component) {
216
186
  "aria-hidden": "true",
217
187
  style: [styles.grow, style]
218
188
  });
219
- };
220
- return Spring;
221
- }(React.Component);
189
+ }
190
+ }
222
191
  const styles = StyleSheet.create({
223
192
  grow: {
224
193
  flexGrow: 1
225
194
  }
226
195
  });
227
196
 
228
- let Strut = function (_React$Component) {
229
- _inheritsLoose(Strut, _React$Component);
230
- function Strut() {
231
- return _React$Component.apply(this, arguments) || this;
232
- }
233
- var _proto = Strut.prototype;
234
- _proto.render = function render() {
197
+ class Strut extends React.Component {
198
+ render() {
235
199
  const {
236
200
  size,
237
201
  style
@@ -240,9 +204,8 @@ let Strut = function (_React$Component) {
240
204
  "aria-hidden": "true",
241
205
  style: [strutStyle(size), style]
242
206
  });
243
- };
244
- return Strut;
245
- }(React.Component);
207
+ }
208
+ }
246
209
  const strutStyle = size => {
247
210
  return {
248
211
  width: size,
package/dist/index.js CHANGED
@@ -45,20 +45,6 @@ function _extends() {
45
45
  return _extends.apply(this, arguments);
46
46
  }
47
47
 
48
- function _setPrototypeOf(o, p) {
49
- _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
50
- o.__proto__ = p;
51
- return o;
52
- };
53
- return _setPrototypeOf(o, p);
54
- }
55
-
56
- function _inheritsLoose(subClass, superClass) {
57
- subClass.prototype = Object.create(superClass.prototype);
58
- subClass.prototype.constructor = subClass;
59
- _setPrototypeOf(subClass, superClass);
60
- }
61
-
62
48
  const VALID_MEDIA_SIZES = ["small", "medium", "large"];
63
49
  const mediaDefaultSpecLargeMarginWidth = Spacing__default["default"].large_24;
64
50
  const MEDIA_DEFAULT_SPEC = {
@@ -111,23 +97,19 @@ const defaultContext = {
111
97
  };
112
98
  var MediaLayoutContext = React__namespace.createContext(defaultContext);
113
99
 
114
- const queries = [].concat(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));
100
+ 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)];
115
101
  const mediaQueryLists = {};
116
102
  const DEFAULT_SIZE = "large";
117
- let MediaLayoutInternal = function (_React$Component) {
118
- _inheritsLoose(MediaLayoutInternal, _React$Component);
119
- function MediaLayoutInternal(props) {
120
- var _this;
121
- _this = _React$Component.call(this, props) || this;
122
- _this.cleanupThunks = void 0;
123
- _this.state = {
103
+ class MediaLayoutInternal extends React__namespace.Component {
104
+ constructor(props) {
105
+ super(props);
106
+ this.cleanupThunks = void 0;
107
+ this.state = {
124
108
  size: undefined
125
109
  };
126
- _this.cleanupThunks = [];
127
- return _this;
110
+ this.cleanupThunks = [];
128
111
  }
129
- var _proto = MediaLayoutInternal.prototype;
130
- _proto.componentDidMount = function componentDidMount() {
112
+ componentDidMount() {
131
113
  const entries = Object.entries(this.props.mediaSpec);
132
114
  for (const [size, spec] of entries) {
133
115
  const mql = mediaQueryLists[spec.query];
@@ -144,11 +126,11 @@ let MediaLayoutInternal = function (_React$Component) {
144
126
  mql.addListener(listener);
145
127
  this.cleanupThunks.push(() => mql.removeListener(listener));
146
128
  }
147
- };
148
- _proto.componentWillUnmount = function componentWillUnmount() {
129
+ }
130
+ componentWillUnmount() {
149
131
  this.cleanupThunks.forEach(cleaup => cleaup());
150
- };
151
- _proto.getCurrentSize = function getCurrentSize(spec) {
132
+ }
133
+ getCurrentSize(spec) {
152
134
  if (this.state.size) {
153
135
  return this.state.size;
154
136
  } else {
@@ -161,11 +143,11 @@ let MediaLayoutInternal = function (_React$Component) {
161
143
  }
162
144
  }
163
145
  return DEFAULT_SIZE;
164
- };
165
- _proto.isServerSide = function isServerSide() {
146
+ }
147
+ isServerSide() {
166
148
  return typeof window === "undefined" || !window.matchMedia;
167
- };
168
- _proto.getMockStyleSheet = function getMockStyleSheet(mediaSize) {
149
+ }
150
+ getMockStyleSheet(mediaSize) {
169
151
  const {
170
152
  styleSheets
171
153
  } = this.props;
@@ -186,8 +168,8 @@ let MediaLayoutInternal = function (_React$Component) {
186
168
  }
187
169
  }
188
170
  return mockStyleSheet;
189
- };
190
- _proto.render = function render() {
171
+ }
172
+ render() {
191
173
  const {
192
174
  children,
193
175
  mediaSpec,
@@ -206,16 +188,10 @@ let MediaLayoutInternal = function (_React$Component) {
206
188
  mediaSpec,
207
189
  styles
208
190
  });
209
- };
210
- return MediaLayoutInternal;
211
- }(React__namespace.Component);
212
- let MediaLayout = function (_React$Component2) {
213
- _inheritsLoose(MediaLayout, _React$Component2);
214
- function MediaLayout() {
215
- return _React$Component2.apply(this, arguments) || this;
216
191
  }
217
- var _proto2 = MediaLayout.prototype;
218
- _proto2.render = function render() {
192
+ }
193
+ class MediaLayout extends React__namespace.Component {
194
+ render() {
219
195
  return React__namespace.createElement(MediaLayoutContext.Consumer, null, ({
220
196
  overrideSize,
221
197
  ssrSize,
@@ -225,17 +201,11 @@ let MediaLayout = function (_React$Component2) {
225
201
  ssrSize: ssrSize,
226
202
  mediaSpec: mediaSpec
227
203
  })));
228
- };
229
- return MediaLayout;
230
- }(React__namespace.Component);
231
-
232
- let Spring = function (_React$Component) {
233
- _inheritsLoose(Spring, _React$Component);
234
- function Spring() {
235
- return _React$Component.apply(this, arguments) || this;
236
204
  }
237
- var _proto = Spring.prototype;
238
- _proto.render = function render() {
205
+ }
206
+
207
+ class Spring extends React__namespace.Component {
208
+ render() {
239
209
  const {
240
210
  style
241
211
  } = this.props;
@@ -243,22 +213,16 @@ let Spring = function (_React$Component) {
243
213
  "aria-hidden": "true",
244
214
  style: [styles.grow, style]
245
215
  });
246
- };
247
- return Spring;
248
- }(React__namespace.Component);
216
+ }
217
+ }
249
218
  const styles = aphrodite.StyleSheet.create({
250
219
  grow: {
251
220
  flexGrow: 1
252
221
  }
253
222
  });
254
223
 
255
- let Strut = function (_React$Component) {
256
- _inheritsLoose(Strut, _React$Component);
257
- function Strut() {
258
- return _React$Component.apply(this, arguments) || this;
259
- }
260
- var _proto = Strut.prototype;
261
- _proto.render = function render() {
224
+ class Strut extends React__namespace.Component {
225
+ render() {
262
226
  const {
263
227
  size,
264
228
  style
@@ -267,9 +231,8 @@ let Strut = function (_React$Component) {
267
231
  "aria-hidden": "true",
268
232
  style: [strutStyle(size), style]
269
233
  });
270
- };
271
- return Strut;
272
- }(React__namespace.Component);
234
+ }
235
+ }
273
236
  const strutStyle = size => {
274
237
  return {
275
238
  width: size,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-layout",
3
- "version": "2.0.5",
3
+ "version": "2.0.6",
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": "^5.0.3",
17
+ "@khanacademy/wonder-blocks-core": "^5.0.4",
18
18
  "@khanacademy/wonder-blocks-spacing": "^4.0.1"
19
19
  },
20
20
  "devDependencies": {
21
- "wb-dev-build-settings": "^0.9.4"
21
+ "wb-dev-build-settings": "^0.9.5"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "aphrodite": "^1.2.5",