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