1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 | exports.getGridChildProps = exports.filterHelperStyle = exports.filterOuterStyle = exports.filterInnerStyle = exports.getSpacingHelperMargin = exports.getSpacingMargin = exports.getChildMargin = exports.getMargin = undefined;
|
5 |
|
6 | var _typeof2 = require('babel-runtime/helpers/typeof');
|
7 |
|
8 | var _typeof3 = _interopRequireDefault(_typeof2);
|
9 |
|
10 | var _extends2 = require('babel-runtime/helpers/extends');
|
11 |
|
12 | var _extends3 = _interopRequireDefault(_extends2);
|
13 |
|
14 | var _util = require('./util');
|
15 |
|
16 | var _util2 = require('../util');
|
17 |
|
18 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
19 |
|
20 |
|
21 | var ieVersion = _util2.env.ieVersion;
|
22 |
|
23 | var getPadding = function getPadding(padding) {
|
24 | if (!Array.isArray(padding)) {
|
25 | return {
|
26 | padding: padding
|
27 | };
|
28 | }
|
29 |
|
30 | var attrs = ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'];
|
31 | var paddings = {};
|
32 | var value = void 0;
|
33 |
|
34 | attrs.forEach(function (attr, index) {
|
35 | switch (padding.length) {
|
36 | case 1:
|
37 | value = padding[0] || 0;
|
38 | break;
|
39 | case 2:
|
40 | value = padding[index] || padding[index - 2] || 0;
|
41 | break;
|
42 | case 3:
|
43 | value = index === 2 ? padding[2] : padding[index] || padding[index - 2] || 0;
|
44 | break;
|
45 | case 4:
|
46 | default:
|
47 | value = padding[index] || 0;
|
48 | break;
|
49 | }
|
50 | paddings[attr] = value;
|
51 | });
|
52 |
|
53 | return paddings;
|
54 | };
|
55 |
|
56 | var getMargin = function getMargin(size) {
|
57 | var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { isNegative: false, half: false },
|
58 | isNegative = _ref.isNegative,
|
59 | half = _ref.half;
|
60 |
|
61 | if (!size) {
|
62 | return {};
|
63 | }
|
64 | var attrs = ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'];
|
65 | var margins = {};
|
66 | var param = 1 * (isNegative ? -1 : 1) * (half ? 0.5 : 1);
|
67 | var value = void 0;
|
68 |
|
69 | attrs.forEach(function (attr, index) {
|
70 | if (!Array.isArray(size)) {
|
71 | value = param * size;
|
72 | } else {
|
73 | switch (size.length) {
|
74 | case 1:
|
75 | value = param * (size[0] || 0);
|
76 | break;
|
77 | case 2:
|
78 | value = param * (size[index] || size[index - 2] || 0);
|
79 | break;
|
80 | case 3:
|
81 | value = param * (index === 2 ? size[2] : size[index] || size[index - 2] || 0);
|
82 | break;
|
83 | case 4:
|
84 | default:
|
85 | value = param * (size[index] || 0);
|
86 | break;
|
87 | }
|
88 | }
|
89 |
|
90 | margins[attr] = value;
|
91 | });
|
92 |
|
93 | return margins;
|
94 | };
|
95 |
|
96 | var getChildMargin = function getChildMargin(spacing) {
|
97 | return getMargin(spacing, { half: true });
|
98 | };
|
99 |
|
100 | var getSpacingMargin = function getSpacingMargin(spacing) {
|
101 | return getMargin(spacing, { half: true });
|
102 | };
|
103 |
|
104 | var getSpacingHelperMargin = function getSpacingHelperMargin(spacing) {
|
105 | return getMargin(spacing, { isNegative: true, half: true });
|
106 | };
|
107 |
|
108 | var getFlexs = function getFlexs(flex) {
|
109 | if (!Array.isArray(flex)) {
|
110 | return {
|
111 | flex: flex
|
112 | };
|
113 | }
|
114 |
|
115 | var attrs = ['flexGrow', 'flexShrink', 'flexBasis'];
|
116 | var flexs = {};
|
117 |
|
118 | flex.forEach(function (val, index) {
|
119 | flexs[attrs[index]] = val;
|
120 | });
|
121 |
|
122 | return flexs;
|
123 | };
|
124 |
|
125 | var getGridGap = function getGridGap(gap) {
|
126 | if (!Array.isArray(gap)) {
|
127 | return {
|
128 | gap: gap
|
129 | };
|
130 | }
|
131 |
|
132 | var attrs = ['rowGap', 'columnGap'];
|
133 | var gaps = {};
|
134 |
|
135 | gap.forEach(function (val, index) {
|
136 | gaps[attrs[index]] = val;
|
137 | });
|
138 |
|
139 | return gaps;
|
140 | };
|
141 |
|
142 | var getTemplateCount = function getTemplateCount(counts) {
|
143 | if (!isNaN(counts) || typeof counts === 'string') {
|
144 | return 'repeat(' + counts + ', minmax(0,1fr))';
|
145 | }
|
146 |
|
147 | return counts;
|
148 | };
|
149 |
|
150 |
|
151 |
|
152 | var helperProps = ['margin', 'marginTop', 'marginLeft', 'marginRight', 'marginBottom'];
|
153 |
|
154 | var innerProps = ['flexDirection', 'flexWrap',
|
155 |
|
156 | 'alignContent', 'alignItems', 'display'];
|
157 |
|
158 | var filterOuterStyle = function filterOuterStyle(style) {
|
159 | var props = {};
|
160 |
|
161 | [].concat(innerProps).forEach(function (key) {
|
162 | props[key] = style[key];
|
163 | });
|
164 |
|
165 | return (0, _util.filterUndefinedValue)((0, _util.stripObject)(style, props));
|
166 | };
|
167 |
|
168 | var filterHelperStyle = function filterHelperStyle(style) {
|
169 | var props = {};
|
170 | helperProps.forEach(function (key) {
|
171 | props[key] = style[key];
|
172 | });
|
173 |
|
174 | return (0, _util.filterUndefinedValue)((0, _extends3.default)({}, props, {
|
175 | overflow: 'hidden'
|
176 | }));
|
177 | };
|
178 |
|
179 | var filterInnerStyle = function filterInnerStyle(style) {
|
180 | var props = {};
|
181 |
|
182 | innerProps.forEach(function (key) {
|
183 | props[key] = style[key];
|
184 | });
|
185 |
|
186 | return (0, _util.filterUndefinedValue)(props);
|
187 | };
|
188 |
|
189 | var getGridChildProps = function getGridChildProps(props, device, gap) {
|
190 | var _props$row = props.row,
|
191 | row = _props$row === undefined ? 'initial' : _props$row,
|
192 | _props$col = props.col,
|
193 | col = _props$col === undefined ? 'initial' : _props$col,
|
194 | _props$rowSpan = props.rowSpan,
|
195 | rowSpan = _props$rowSpan === undefined ? 1 : _props$rowSpan,
|
196 | _props$colSpan = props.colSpan,
|
197 | colSpan = _props$colSpan === undefined ? 1 : _props$colSpan;
|
198 |
|
199 |
|
200 | var totalSpan = 12;
|
201 | var newColSpan = (typeof colSpan === 'undefined' ? 'undefined' : (0, _typeof3.default)(colSpan)) === 'object' && 'desktop' in colSpan ? colSpan.desktop : colSpan;
|
202 |
|
203 | ['tablet', 'phone'].forEach(function (deviceKey) {
|
204 | if (deviceKey === device) {
|
205 | if ((typeof colSpan === 'undefined' ? 'undefined' : (0, _typeof3.default)(colSpan)) === 'object' && device in colSpan) {
|
206 | newColSpan = colSpan[device];
|
207 | } else {
|
208 | switch (deviceKey) {
|
209 | case 'tablet':
|
210 | totalSpan = 8;
|
211 | newColSpan = colSpan > 5 ? 8 : colSpan > 2 ? 4 : 2;
|
212 | break;
|
213 | case 'phone':
|
214 | totalSpan = 4;
|
215 | newColSpan = colSpan > 2 ? 4 : 2;
|
216 | break;
|
217 | }
|
218 | }
|
219 | }
|
220 | });
|
221 |
|
222 | var gapLeft = gap;
|
223 | if (Array.isArray(gap)) {
|
224 | gapLeft = gap[1];
|
225 | }
|
226 |
|
227 | var ieChildFix = ieVersion && !(rowSpan === 1 && colSpan === 1) ? {
|
228 | display: 'inline-block',
|
229 | width: gapLeft ? 'calc(' + newColSpan / totalSpan * 100 + '% - ' + gapLeft + 'px)' : newColSpan / totalSpan * 100 + '%'
|
230 | } : {};
|
231 |
|
232 | return (0, _util.filterUndefinedValue)((0, _extends3.default)({
|
233 | gridRowStart: row,
|
234 | gridRowEnd: 'span ' + rowSpan,
|
235 | gridColumnStart: col,
|
236 | gridColumnEnd: 'span ' + newColSpan
|
237 | }, ieChildFix));
|
238 | };
|
239 |
|
240 | var getBoxChildProps = function getBoxChildProps(props) {
|
241 | var alignSelf = props.alignSelf,
|
242 | flex = props.flex;
|
243 |
|
244 |
|
245 | return (0, _util.filterUndefinedValue)((0, _extends3.default)({
|
246 | alignSelf: alignSelf
|
247 | }, getFlexs(flex)));
|
248 | };
|
249 |
|
250 | exports.default = function (_ref2) {
|
251 | var device = _ref2.device,
|
252 | display = _ref2.display,
|
253 | gap = _ref2.gap,
|
254 | direction = _ref2.direction,
|
255 | dense = _ref2.dense,
|
256 | rowSpan = _ref2.rowSpan,
|
257 | colSpan = _ref2.colSpan,
|
258 | row = _ref2.row,
|
259 | col = _ref2.col,
|
260 | rows = _ref2.rows,
|
261 | columns = _ref2.columns,
|
262 | justify = _ref2.justify,
|
263 | align = _ref2.align,
|
264 | alignSelf = _ref2.alignSelf,
|
265 | wrap = _ref2.wrap,
|
266 | flex = _ref2.flex,
|
267 | padding = _ref2.padding,
|
268 | margin = _ref2.margin;
|
269 |
|
270 | var style = (0, _extends3.default)({}, getPadding(padding));
|
271 |
|
272 | var deviceColumns = 'auto';
|
273 |
|
274 | switch (device) {
|
275 | case 'phone':
|
276 | deviceColumns = 4;
|
277 | break;
|
278 | case 'tablet':
|
279 | deviceColumns = 8;
|
280 | break;
|
281 | case 'desktop':
|
282 | deviceColumns = 12;
|
283 | break;
|
284 | default:
|
285 | break;
|
286 | }
|
287 | var newColumns = !isNaN(columns) || typeof columns === 'string' ? columns : deviceColumns;
|
288 |
|
289 | switch (display) {
|
290 | case 'grid':
|
291 | style = (0, _extends3.default)({}, getGridGap(gap), {
|
292 | gridTemplateRows: getTemplateCount(rows),
|
293 | gridTemplateColumns: getTemplateCount(newColumns),
|
294 | gridAutoFlow: '' + (direction || '') + (dense && ' dense')
|
295 | }, getGridChildProps({
|
296 | row: row,
|
297 | rowSpan: rowSpan,
|
298 | col: col,
|
299 | colSpan: colSpan
|
300 |
|
301 |
|
302 | }, device), style);
|
303 | break;
|
304 | case 'flex':
|
305 | style = (0, _extends3.default)({
|
306 |
|
307 | msFlexDirection: direction,
|
308 | flexDirection: direction,
|
309 | msFlexWrap: wrap ? 'wrap' : 'none',
|
310 | flexWrap: wrap ? 'wrap' : 'nowrap',
|
311 | msFlexPack: justify,
|
312 | justifyContent: justify,
|
313 | msFlexAlign: align,
|
314 | alignItems: align
|
315 | }, getMargin(margin), getBoxChildProps({
|
316 | alignSelf: alignSelf,
|
317 | flex: flex
|
318 | }), style);
|
319 | break;
|
320 | default:
|
321 | break;
|
322 | }
|
323 |
|
324 |
|
325 | return (0, _util.filterUndefinedValue)(style);
|
326 | };
|
327 |
|
328 | exports.getMargin = getMargin;
|
329 | exports.getChildMargin = getChildMargin;
|
330 | exports.getSpacingMargin = getSpacingMargin;
|
331 | exports.getSpacingHelperMargin = getSpacingHelperMargin;
|
332 | exports.filterInnerStyle = filterInnerStyle;
|
333 | exports.filterOuterStyle = filterOuterStyle;
|
334 | exports.filterHelperStyle = filterHelperStyle;
|
335 | exports.getGridChildProps = getGridChildProps; |
\ | No newline at end of file |