Skip to content

Commit 45c4403

Browse files
kravets-levkokravets-levko
committed
Build
1 parent 0933878 commit 45c4403

8 files changed

+6174
-4139
lines changed

‎build/GridItem.js

+604
Large diffs are not rendered by default.

‎build/ReactGridLayout.js

+737
Large diffs are not rendered by default.

‎build/ResponsiveReactGridLayout.js

+374
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,374 @@
1+
"use strict";
2+
3+
exports.__esModule = true;
4+
5+
var _extends =
6+
Object.assign ||
7+
function(target) {
8+
for (var i = 1; i < arguments.length; i++) {
9+
var source = arguments[i];
10+
for (var key in source) {
11+
if (Object.prototype.hasOwnProperty.call(source, key)) {
12+
target[key] = source[key];
13+
}
14+
}
15+
}
16+
return target;
17+
};
18+
19+
var _react = require("react");
20+
21+
var _react2 = _interopRequireDefault(_react);
22+
23+
var _propTypes = require("prop-types");
24+
25+
var _propTypes2 = _interopRequireDefault(_propTypes);
26+
27+
var _lodash = require("lodash.isequal");
28+
29+
var _lodash2 = _interopRequireDefault(_lodash);
30+
31+
var _utils = require("./utils");
32+
33+
var _responsiveUtils = require("./responsiveUtils");
34+
35+
var _ReactGridLayout = require("./ReactGridLayout");
36+
37+
var _ReactGridLayout2 = _interopRequireDefault(_ReactGridLayout);
38+
39+
function _interopRequireDefault(obj) {
40+
return obj && obj.__esModule ? obj : { default: obj };
41+
}
42+
43+
function _objectWithoutProperties(obj, keys) {
44+
var target = {};
45+
for (var i in obj) {
46+
if (keys.indexOf(i) >= 0) continue;
47+
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
48+
target[i] = obj[i];
49+
}
50+
return target;
51+
}
52+
53+
function _classCallCheck(instance, Constructor) {
54+
if (!(instance instanceof Constructor)) {
55+
throw new TypeError("Cannot call a class as a function");
56+
}
57+
}
58+
59+
function _possibleConstructorReturn(self, call) {
60+
if (!self) {
61+
throw new ReferenceError(
62+
"this hasn't been initialised - super() hasn't been called"
63+
);
64+
}
65+
return call && (typeof call === "object" || typeof call === "function")
66+
? call
67+
: self;
68+
}
69+
70+
function _inherits(subClass, superClass) {
71+
if (typeof superClass !== "function" && superClass !== null) {
72+
throw new TypeError(
73+
"Super expression must either be null or a function, not " +
74+
typeof superClass
75+
);
76+
}
77+
subClass.prototype = Object.create(superClass && superClass.prototype, {
78+
constructor: {
79+
value: subClass,
80+
enumerable: false,
81+
writable: true,
82+
configurable: true
83+
}
84+
});
85+
if (superClass)
86+
Object.setPrototypeOf
87+
? Object.setPrototypeOf(subClass, superClass)
88+
: (subClass.__proto__ = superClass);
89+
}
90+
91+
var type = function type(obj) {
92+
return Object.prototype.toString.call(obj);
93+
};
94+
95+
var ResponsiveReactGridLayout = (function(_React$Component) {
96+
_inherits(ResponsiveReactGridLayout, _React$Component);
97+
98+
function ResponsiveReactGridLayout() {
99+
var _temp, _this, _ret;
100+
101+
_classCallCheck(this, ResponsiveReactGridLayout);
102+
103+
for (
104+
var _len = arguments.length, args = Array(_len), _key = 0;
105+
_key < _len;
106+
_key++
107+
) {
108+
args[_key] = arguments[_key];
109+
}
110+
111+
return (
112+
(_ret = ((_temp = ((_this = _possibleConstructorReturn(
113+
this,
114+
_React$Component.call.apply(_React$Component, [this].concat(args))
115+
)),
116+
_this)),
117+
(_this.state = _this.generateInitialState()),
118+
(_this.onLayoutChange = function(layout) {
119+
var _extends2;
120+
121+
_this.props.onLayoutChange(
122+
layout,
123+
_extends(
124+
{},
125+
_this.props.layouts,
126+
((_extends2 = {}),
127+
(_extends2[_this.state.breakpoint] = layout),
128+
_extends2)
129+
)
130+
);
131+
}),
132+
_temp)),
133+
_possibleConstructorReturn(_this, _ret)
134+
);
135+
}
136+
// This should only include propTypes needed in this code; RGL itself
137+
// will do validation of the rest props passed to it.
138+
139+
ResponsiveReactGridLayout.prototype.generateInitialState = function generateInitialState() {
140+
var _props = this.props,
141+
width = _props.width,
142+
breakpoints = _props.breakpoints,
143+
layouts = _props.layouts,
144+
cols = _props.cols;
145+
146+
var breakpoint = (0, _responsiveUtils.getBreakpointFromWidth)(
147+
breakpoints,
148+
width
149+
);
150+
var colNo = (0, _responsiveUtils.getColsFromBreakpoint)(breakpoint, cols);
151+
// verticalCompact compatibility, now deprecated
152+
var compactType =
153+
this.props.verticalCompact === false ? null : this.props.compactType;
154+
// Get the initial layout. This can tricky; we try to generate one however possible if one doesn't exist
155+
// for this layout.
156+
var initialLayout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(
157+
layouts,
158+
breakpoints,
159+
breakpoint,
160+
breakpoint,
161+
colNo,
162+
compactType
163+
);
164+
165+
return {
166+
layout: initialLayout,
167+
breakpoint: breakpoint,
168+
cols: colNo
169+
};
170+
};
171+
172+
ResponsiveReactGridLayout.prototype.componentWillReceiveProps = function componentWillReceiveProps(
173+
nextProps
174+
) {
175+
// Allow parent to set width or breakpoint directly.
176+
if (
177+
nextProps.width != this.props.width ||
178+
nextProps.breakpoint !== this.props.breakpoint ||
179+
!(0, _lodash2.default)(nextProps.breakpoints, this.props.breakpoints) ||
180+
!(0, _lodash2.default)(nextProps.cols, this.props.cols)
181+
) {
182+
this.onWidthChange(nextProps);
183+
} else if (!(0, _lodash2.default)(nextProps.layouts, this.props.layouts)) {
184+
// Allow parent to set layouts directly.
185+
var _state = this.state,
186+
_breakpoint = _state.breakpoint,
187+
_cols = _state.cols;
188+
189+
// Since we're setting an entirely new layout object, we must generate a new responsive layout
190+
// if one does not exist.
191+
192+
var newLayout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(
193+
nextProps.layouts,
194+
nextProps.breakpoints,
195+
_breakpoint,
196+
_breakpoint,
197+
_cols,
198+
nextProps.compactType
199+
);
200+
this.setState({ layout: newLayout });
201+
}
202+
};
203+
204+
// wrap layouts so we do not need to pass layouts to child
205+
206+
/**
207+
* When the width changes work through breakpoints and reset state with the new width & breakpoint.
208+
* Width changes are necessary to figure out the widget widths.
209+
*/
210+
ResponsiveReactGridLayout.prototype.onWidthChange = function onWidthChange(
211+
nextProps
212+
) {
213+
var breakpoints = nextProps.breakpoints,
214+
cols = nextProps.cols,
215+
layouts = nextProps.layouts,
216+
compactType = nextProps.compactType;
217+
218+
var newBreakpoint =
219+
nextProps.breakpoint ||
220+
(0, _responsiveUtils.getBreakpointFromWidth)(
221+
nextProps.breakpoints,
222+
nextProps.width
223+
);
224+
225+
var lastBreakpoint = this.state.breakpoint;
226+
var newCols = (0, _responsiveUtils.getColsFromBreakpoint)(
227+
newBreakpoint,
228+
cols
229+
);
230+
231+
// Breakpoint change
232+
if (
233+
lastBreakpoint !== newBreakpoint ||
234+
this.props.breakpoints !== breakpoints ||
235+
this.props.cols !== cols
236+
) {
237+
// Preserve the current layout if the current breakpoint is not present in the next layouts.
238+
if (!(lastBreakpoint in layouts))
239+
layouts[lastBreakpoint] = (0, _utils.cloneLayout)(this.state.layout);
240+
241+
// Find or generate a new layout.
242+
var _layout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(
243+
layouts,
244+
breakpoints,
245+
newBreakpoint,
246+
lastBreakpoint,
247+
newCols,
248+
compactType
249+
);
250+
251+
// This adds missing items.
252+
_layout = (0, _utils.synchronizeLayoutWithChildren)(
253+
_layout,
254+
nextProps.children,
255+
newCols,
256+
compactType
257+
);
258+
259+
// Store the new layout.
260+
layouts[newBreakpoint] = _layout;
261+
262+
// callbacks
263+
this.props.onLayoutChange(_layout, layouts);
264+
this.props.onBreakpointChange(newBreakpoint, newCols);
265+
266+
this.setState({
267+
breakpoint: newBreakpoint,
268+
layout: _layout,
269+
cols: newCols
270+
});
271+
}
272+
//call onWidthChange on every change of width, not only on breakpoint changes
273+
this.props.onWidthChange(
274+
nextProps.width,
275+
nextProps.margin,
276+
newCols,
277+
nextProps.containerPadding
278+
);
279+
};
280+
281+
ResponsiveReactGridLayout.prototype.render = function render() {
282+
/* eslint-disable no-unused-vars */
283+
var _props2 = this.props,
284+
breakpoint = _props2.breakpoint,
285+
breakpoints = _props2.breakpoints,
286+
cols = _props2.cols,
287+
layouts = _props2.layouts,
288+
onBreakpointChange = _props2.onBreakpointChange,
289+
onLayoutChange = _props2.onLayoutChange,
290+
onWidthChange = _props2.onWidthChange,
291+
other = _objectWithoutProperties(_props2, [
292+
"breakpoint",
293+
"breakpoints",
294+
"cols",
295+
"layouts",
296+
"onBreakpointChange",
297+
"onLayoutChange",
298+
"onWidthChange"
299+
]);
300+
/* eslint-enable no-unused-vars */
301+
302+
return _react2.default.createElement(
303+
_ReactGridLayout2.default,
304+
_extends({}, other, {
305+
onLayoutChange: this.onLayoutChange,
306+
layout: this.state.layout,
307+
cols: this.state.cols
308+
})
309+
);
310+
};
311+
312+
return ResponsiveReactGridLayout;
313+
})(_react2.default.Component);
314+
315+
ResponsiveReactGridLayout.propTypes = {
316+
//
317+
// Basic props
318+
//
319+
320+
// Optional, but if you are managing width yourself you may want to set the breakpoint
321+
// yourself as well.
322+
breakpoint: _propTypes2.default.string,
323+
324+
// {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
325+
breakpoints: _propTypes2.default.object,
326+
327+
// # of cols. This is a breakpoint -> cols map
328+
cols: _propTypes2.default.object,
329+
330+
// layouts is an object mapping breakpoints to layouts.
331+
// e.g. {lg: Layout, md: Layout, ...}
332+
layouts: function layouts(props, propName) {
333+
if (type(props[propName]) !== "[object Object]") {
334+
throw new Error(
335+
"Layout property must be an object. Received: " + type(props[propName])
336+
);
337+
}
338+
Object.keys(props[propName]).forEach(function(key) {
339+
if (!(key in props.breakpoints)) {
340+
throw new Error(
341+
"Each key in layouts must align with a key in breakpoints."
342+
);
343+
}
344+
(0, _utils.validateLayout)(props.layouts[key], "layouts." + key);
345+
});
346+
},
347+
348+
// The width of this component.
349+
// Required in this propTypes stanza because generateInitialState() will fail without it.
350+
width: _propTypes2.default.number.isRequired,
351+
352+
//
353+
// Callbacks
354+
//
355+
356+
// Calls back with breakpoint and new # cols
357+
onBreakpointChange: _propTypes2.default.func,
358+
359+
// Callback so you can save the layout.
360+
// Calls back with (currentLayout, allLayouts). allLayouts are keyed by breakpoint.
361+
onLayoutChange: _propTypes2.default.func,
362+
363+
// Calls back with (containerWidth, margin, cols, containerPadding)
364+
onWidthChange: _propTypes2.default.func
365+
};
366+
ResponsiveReactGridLayout.defaultProps = {
367+
breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
368+
cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
369+
layouts: {},
370+
onBreakpointChange: _utils.noop,
371+
onLayoutChange: _utils.noop,
372+
onWidthChange: _utils.noop
373+
};
374+
exports.default = ResponsiveReactGridLayout;

0 commit comments

Comments
 (0)