1 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
2 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
3 | import _inherits from 'babel-runtime/helpers/inherits';
|
4 | import _extends from 'babel-runtime/helpers/extends';
|
5 | import _typeof from 'babel-runtime/helpers/typeof';
|
6 |
|
7 | var _class, _temp;
|
8 |
|
9 | import React, { Component } from 'react';
|
10 | import PropTypes from 'prop-types';
|
11 | import cx from 'classnames';
|
12 | import ConfigProvider from '../config-provider';
|
13 | import { obj } from '../util';
|
14 | import createStyle, { getMargin, getChildMargin, getSpacingHelperMargin, filterInnerStyle, filterHelperStyle, filterOuterStyle, getGridChildProps } from
|
15 |
|
16 | '../responsive-grid/create-style';
|
17 |
|
18 | var pickOthers = obj.pickOthers;
|
19 |
|
20 |
|
21 | var createChildren = function createChildren(children, _ref) {
|
22 | var spacing = _ref.spacing,
|
23 | direction = _ref.direction,
|
24 | wrap = _ref.wrap,
|
25 | device = _ref.device;
|
26 |
|
27 | var array = React.Children.toArray(children);
|
28 | if (!children) {
|
29 | return null;
|
30 | }
|
31 |
|
32 | return array.map(function (child, index) {
|
33 | var spacingMargin = {};
|
34 |
|
35 | spacingMargin = getChildMargin(spacing);
|
36 |
|
37 | if (!wrap) {
|
38 |
|
39 | var isNone = [index === 0, index === array.length - 1];
|
40 | var props = direction === 'row' ? ['marginLeft', 'marginRight'] : ['marginTop', 'marginBottom'];
|
41 |
|
42 | ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'].forEach(function (prop) {
|
43 | if (prop in spacingMargin && props.indexOf(prop) === -1) {
|
44 | spacingMargin[prop] = 0;
|
45 | }
|
46 |
|
47 | props.forEach(function (key, i) {
|
48 | if (key in spacingMargin && isNone[i]) {
|
49 | spacingMargin[key] = 0;
|
50 | }
|
51 | });
|
52 | });
|
53 | }
|
54 |
|
55 | if (React.isValidElement(child)) {
|
56 | var propsMargin = child.props.margin;
|
57 |
|
58 | var childPropsMargin = getMargin(propsMargin);
|
59 | var gridProps = {};
|
60 |
|
61 | if (['function', 'object'].indexOf(_typeof(child.type)) > -1 && child.type._typeMark === 'responsive_grid') {
|
62 | gridProps = createStyle(_extends({ display: 'grid' }, child.props));
|
63 | }
|
64 |
|
65 | return React.cloneElement(child, {
|
66 | style: _extends({}, spacingMargin, childPropsMargin, gridProps, child.props.style || {})
|
67 | });
|
68 | }
|
69 |
|
70 | return child;
|
71 | });
|
72 | };
|
73 |
|
74 | var getStyle = function getStyle() {
|
75 | var style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
76 | var props = arguments[1];
|
77 |
|
78 | return _extends({}, createStyle(_extends({ display: 'flex' }, props)), style);
|
79 | };
|
80 |
|
81 | var getOuterStyle = function getOuterStyle(style, styleProps) {
|
82 | var sheet = getStyle(style, styleProps);
|
83 |
|
84 | return filterOuterStyle(sheet);
|
85 | };
|
86 |
|
87 | var getHelperStyle = function getHelperStyle(style, styleProps) {
|
88 | var sheet = getStyle(style, styleProps);
|
89 |
|
90 | return filterHelperStyle(_extends({}, sheet, getSpacingHelperMargin(styleProps.spacing)));
|
91 | };
|
92 |
|
93 | var getInnerStyle = function getInnerStyle(style, styleProps) {
|
94 | var sheet = getStyle(style, styleProps);
|
95 |
|
96 | return filterInnerStyle(sheet);
|
97 | };
|
98 |
|
99 |
|
100 |
|
101 |
|
102 | var Box = (_temp = _class = function (_Component) {
|
103 | _inherits(Box, _Component);
|
104 |
|
105 | function Box() {
|
106 | _classCallCheck(this, Box);
|
107 |
|
108 | return _possibleConstructorReturn(this, _Component.apply(this, arguments));
|
109 | }
|
110 |
|
111 | Box.prototype.render = function render() {
|
112 | var _cx;
|
113 |
|
114 | var _props = this.props,
|
115 | prefix = _props.prefix,
|
116 | direction = _props.direction,
|
117 | justify = _props.justify,
|
118 | align = _props.align,
|
119 | wrap = _props.wrap,
|
120 | flex = _props.flex,
|
121 | spacing = _props.spacing,
|
122 | padding = _props.padding,
|
123 | margin = _props.margin,
|
124 | style = _props.style,
|
125 | className = _props.className,
|
126 | children = _props.children,
|
127 | device = _props.device,
|
128 | component = _props.component;
|
129 |
|
130 |
|
131 | var styleProps = {
|
132 | direction: direction,
|
133 | justify: justify,
|
134 | align: align,
|
135 | wrap: wrap,
|
136 | flex: flex,
|
137 | spacing: spacing,
|
138 | padding: padding,
|
139 | margin: margin
|
140 | };
|
141 | var View = component;
|
142 | var others = pickOthers(Object.keys(Box.propTypes), this.props);
|
143 | var styleSheet = getStyle(style, styleProps);
|
144 |
|
145 | var boxs = createChildren(children, {
|
146 | spacing: spacing,
|
147 | direction: direction,
|
148 | wrap: wrap,
|
149 | device: device
|
150 | });
|
151 |
|
152 | var cls = cx((_cx = {}, _cx[prefix + 'box'] = true, _cx), className);
|
153 | if (wrap && spacing) {
|
154 | var outerStyle = getOuterStyle(style, styleProps);
|
155 | var helperStyle = getHelperStyle(style, styleProps);
|
156 | var innerStyle = getInnerStyle(style, styleProps);
|
157 |
|
158 | return React.createElement(
|
159 | View,
|
160 | _extends({ style: outerStyle, className: cls }, others),
|
161 | React.createElement(
|
162 | 'div',
|
163 | { style: helperStyle },
|
164 | React.createElement(
|
165 | 'div',
|
166 | { style: innerStyle, className: prefix + 'box' },
|
167 | boxs
|
168 | )
|
169 | )
|
170 | );
|
171 | }
|
172 |
|
173 | return React.createElement(
|
174 | View,
|
175 | _extends({ style: styleSheet, className: cls }, others),
|
176 | boxs
|
177 | );
|
178 | };
|
179 |
|
180 | return Box;
|
181 | }(Component), _class.propTypes = {
|
182 | prefix: PropTypes.string,
|
183 | style: PropTypes.object,
|
184 | className: PropTypes.any,
|
185 | |
186 |
|
187 |
|
188 | flex: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number]),
|
189 | |
190 |
|
191 |
|
192 |
|
193 | direction: PropTypes.oneOf(['row', 'column', 'row-reverse']),
|
194 | |
195 |
|
196 |
|
197 | wrap: PropTypes.bool,
|
198 | |
199 |
|
200 |
|
201 | spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
|
202 | |
203 |
|
204 |
|
205 | margin: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
|
206 | |
207 |
|
208 |
|
209 | padding: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
|
210 | |
211 |
|
212 |
|
213 | justify: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),
|
214 | |
215 |
|
216 |
|
217 | align: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'baseline', 'stretch']),
|
218 | device: PropTypes.oneOf(['phone', 'tablet', 'desktop']),
|
219 | |
220 |
|
221 |
|
222 | component: PropTypes.string
|
223 | }, _class.defaultProps = {
|
224 | prefix: 'next-',
|
225 | direction: 'column',
|
226 | wrap: false,
|
227 | component: 'div'
|
228 | }, _temp);
|
229 | Box.displayName = 'Box';
|
230 |
|
231 |
|
232 | export default ConfigProvider.config(Box); |
\ | No newline at end of file |