1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
6 |
|
7 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
8 |
|
9 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
10 |
|
11 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
12 |
|
13 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
14 |
|
15 | var _inherits3 = _interopRequireDefault(_inherits2);
|
16 |
|
17 | var _extends2 = require('babel-runtime/helpers/extends');
|
18 |
|
19 | var _extends3 = _interopRequireDefault(_extends2);
|
20 |
|
21 | var _typeof2 = require('babel-runtime/helpers/typeof');
|
22 |
|
23 | var _typeof3 = _interopRequireDefault(_typeof2);
|
24 |
|
25 | var _class, _temp;
|
26 |
|
27 | var _react = require('react');
|
28 |
|
29 | var _react2 = _interopRequireDefault(_react);
|
30 |
|
31 | var _propTypes = require('prop-types');
|
32 |
|
33 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
34 |
|
35 | var _classnames = require('classnames');
|
36 |
|
37 | var _classnames2 = _interopRequireDefault(_classnames);
|
38 |
|
39 | var _configProvider = require('../config-provider');
|
40 |
|
41 | var _configProvider2 = _interopRequireDefault(_configProvider);
|
42 |
|
43 | var _box = require('../box');
|
44 |
|
45 | var _box2 = _interopRequireDefault(_box);
|
46 |
|
47 | var _util = require('../util');
|
48 |
|
49 | var _createStyle = require('./create-style');
|
50 |
|
51 | var _createStyle2 = _interopRequireDefault(_createStyle);
|
52 |
|
53 | var _cell = require('./cell');
|
54 |
|
55 | var _cell2 = _interopRequireDefault(_cell);
|
56 |
|
57 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
58 |
|
59 | var ieVersion = _util.env.ieVersion;
|
60 | var pickOthers = _util.obj.pickOthers,
|
61 | isReactFragment = _util.obj.isReactFragment;
|
62 |
|
63 |
|
64 | var createChildren = function createChildren(children, device, gap) {
|
65 | var array = _react2.default.Children.toArray(children);
|
66 | if (!children) {
|
67 | return null;
|
68 | }
|
69 |
|
70 | return array.map(function (child) {
|
71 | if (isReactFragment(child)) {
|
72 | return createChildren(child.props.children, device, gap);
|
73 | }
|
74 |
|
75 | if (_react2.default.isValidElement(child) && ['function', 'object'].indexOf((0, _typeof3.default)(child.type)) > -1 && ['form_item', 'responsive_grid_cell'].indexOf(child.type._typeMark) > -1) {
|
76 | return _react2.default.cloneElement(child, {
|
77 | style: (0, _extends3.default)({}, (0, _createStyle.getGridChildProps)(child.props, device, gap), child.props.style || {})
|
78 | });
|
79 | }
|
80 |
|
81 | return child;
|
82 | });
|
83 | };
|
84 |
|
85 | var getStyle = function getStyle() {
|
86 | var style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
87 | var props = arguments[1];
|
88 |
|
89 | return (0, _extends3.default)({}, (0, _createStyle2.default)((0, _extends3.default)({ display: 'grid' }, props)), style);
|
90 | };
|
91 |
|
92 |
|
93 |
|
94 |
|
95 | var ResponsiveGrid = (_temp = _class = function (_Component) {
|
96 | (0, _inherits3.default)(ResponsiveGrid, _Component);
|
97 |
|
98 | function ResponsiveGrid() {
|
99 | (0, _classCallCheck3.default)(this, ResponsiveGrid);
|
100 | return (0, _possibleConstructorReturn3.default)(this, _Component.apply(this, arguments));
|
101 | }
|
102 |
|
103 | ResponsiveGrid.prototype.render = function render() {
|
104 | var _classNames;
|
105 |
|
106 | var _props = this.props,
|
107 | prefix = _props.prefix,
|
108 | View = _props.component,
|
109 | style = _props.style,
|
110 | className = _props.className,
|
111 | children = _props.children,
|
112 | device = _props.device,
|
113 | rows = _props.rows,
|
114 | columns = _props.columns,
|
115 | gap = _props.gap,
|
116 | rowSpan = _props.rowSpan,
|
117 | colSpan = _props.colSpan,
|
118 | component = _props.component,
|
119 | dense = _props.dense;
|
120 |
|
121 | var styleProps = {
|
122 | rows: rows,
|
123 | columns: columns,
|
124 | gap: gap,
|
125 | device: device,
|
126 | rowSpan: rowSpan,
|
127 | colSpan: colSpan,
|
128 | component: component,
|
129 | dense: dense
|
130 | };
|
131 |
|
132 | var others = pickOthers(Object.keys(ResponsiveGrid.propTypes), this.props);
|
133 |
|
134 | var styleSheet = getStyle(style, styleProps);
|
135 |
|
136 | var cls = (0, _classnames2.default)((_classNames = {}, _classNames[prefix + 'responsive-grid'] = true, _classNames[prefix + 'responsive-grid-ie'] = ieVersion, _classNames), className);
|
137 |
|
138 | return ieVersion ? _react2.default.createElement(_box2.default, (0, _extends3.default)({}, this.props, { direction: 'row', wrap: true, spacing: gap, children: createChildren(children, device, gap) })) : _react2.default.createElement(
|
139 | View,
|
140 | (0, _extends3.default)({ style: styleSheet, className: cls }, others),
|
141 | createChildren(children, device, gap)
|
142 | );
|
143 | };
|
144 |
|
145 | return ResponsiveGrid;
|
146 | }(_react.Component), _class._typeMark = 'responsive_grid', _class.propTypes = {
|
147 | prefix: _propTypes2.default.string,
|
148 | className: _propTypes2.default.any,
|
149 | |
150 |
|
151 |
|
152 |
|
153 | device: _propTypes2.default.oneOf(['phone', 'tablet', 'desktop']),
|
154 | rows: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
|
155 | |
156 |
|
157 |
|
158 | columns: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
|
159 | |
160 |
|
161 |
|
162 | gap: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.number), _propTypes2.default.number]),
|
163 | |
164 |
|
165 |
|
166 | component: _propTypes2.default.elementType,
|
167 | |
168 |
|
169 |
|
170 | dense: _propTypes2.default.bool,
|
171 | style: _propTypes2.default.object
|
172 | }, _class.defaultProps = {
|
173 | prefix: 'next-',
|
174 | component: 'div',
|
175 | device: 'desktop',
|
176 | dense: false
|
177 | }, _temp);
|
178 | ResponsiveGrid.displayName = 'ResponsiveGrid';
|
179 |
|
180 |
|
181 | ResponsiveGrid.Cell = _cell2.default;
|
182 |
|
183 | exports.default = _configProvider2.default.config(ResponsiveGrid);
|
184 | module.exports = exports['default']; |
\ | No newline at end of file |