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 classNames from 'classnames';
|
12 | import ConfigProvider from '../config-provider';
|
13 | import Box from '../box';
|
14 | import { obj, env } from '../util';
|
15 | import createStyle, { getGridChildProps } from './create-style';
|
16 | import Cell from './cell';
|
17 |
|
18 | var ieVersion = env.ieVersion;
|
19 | var pickOthers = obj.pickOthers,
|
20 | isReactFragment = obj.isReactFragment;
|
21 |
|
22 |
|
23 | var createChildren = function createChildren(children, device, gap) {
|
24 | var array = React.Children.toArray(children);
|
25 | if (!children) {
|
26 | return null;
|
27 | }
|
28 |
|
29 | return array.map(function (child) {
|
30 | if (isReactFragment(child)) {
|
31 | return createChildren(child.props.children, device, gap);
|
32 | }
|
33 |
|
34 | if (React.isValidElement(child) && ['function', 'object'].indexOf(_typeof(child.type)) > -1 && ['form_item', 'responsive_grid_cell'].indexOf(child.type._typeMark) > -1) {
|
35 | return React.cloneElement(child, {
|
36 | style: _extends({}, getGridChildProps(child.props, device, gap), child.props.style || {})
|
37 | });
|
38 | }
|
39 |
|
40 | return child;
|
41 | });
|
42 | };
|
43 |
|
44 | var getStyle = function getStyle() {
|
45 | var style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
46 | var props = arguments[1];
|
47 |
|
48 | return _extends({}, createStyle(_extends({ display: 'grid' }, props)), style);
|
49 | };
|
50 |
|
51 |
|
52 |
|
53 |
|
54 | var ResponsiveGrid = (_temp = _class = function (_Component) {
|
55 | _inherits(ResponsiveGrid, _Component);
|
56 |
|
57 | function ResponsiveGrid() {
|
58 | _classCallCheck(this, ResponsiveGrid);
|
59 |
|
60 | return _possibleConstructorReturn(this, _Component.apply(this, arguments));
|
61 | }
|
62 |
|
63 | ResponsiveGrid.prototype.render = function render() {
|
64 | var _classNames;
|
65 |
|
66 | var _props = this.props,
|
67 | prefix = _props.prefix,
|
68 | View = _props.component,
|
69 | style = _props.style,
|
70 | className = _props.className,
|
71 | children = _props.children,
|
72 | device = _props.device,
|
73 | rows = _props.rows,
|
74 | columns = _props.columns,
|
75 | gap = _props.gap,
|
76 | rowSpan = _props.rowSpan,
|
77 | colSpan = _props.colSpan,
|
78 | component = _props.component,
|
79 | dense = _props.dense;
|
80 |
|
81 | var styleProps = {
|
82 | rows: rows,
|
83 | columns: columns,
|
84 | gap: gap,
|
85 | device: device,
|
86 | rowSpan: rowSpan,
|
87 | colSpan: colSpan,
|
88 | component: component,
|
89 | dense: dense
|
90 | };
|
91 |
|
92 | var others = pickOthers(Object.keys(ResponsiveGrid.propTypes), this.props);
|
93 |
|
94 | var styleSheet = getStyle(style, styleProps);
|
95 |
|
96 | var cls = classNames((_classNames = {}, _classNames[prefix + 'responsive-grid'] = true, _classNames[prefix + 'responsive-grid-ie'] = ieVersion, _classNames), className);
|
97 |
|
98 | return ieVersion ? React.createElement(Box, _extends({}, this.props, { direction: 'row', wrap: true, spacing: gap, children: createChildren(children, device, gap) })) : React.createElement(
|
99 | View,
|
100 | _extends({ style: styleSheet, className: cls }, others),
|
101 | createChildren(children, device, gap)
|
102 | );
|
103 | };
|
104 |
|
105 | return ResponsiveGrid;
|
106 | }(Component), _class._typeMark = 'responsive_grid', _class.propTypes = {
|
107 | prefix: PropTypes.string,
|
108 | className: PropTypes.any,
|
109 | |
110 |
|
111 |
|
112 |
|
113 | device: PropTypes.oneOf(['phone', 'tablet', 'desktop']),
|
114 | rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
115 | |
116 |
|
117 |
|
118 | columns: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
119 | |
120 |
|
121 |
|
122 | gap: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
|
123 | |
124 |
|
125 |
|
126 | component: PropTypes.elementType,
|
127 | |
128 |
|
129 |
|
130 | dense: PropTypes.bool,
|
131 | style: PropTypes.object
|
132 | }, _class.defaultProps = {
|
133 | prefix: 'next-',
|
134 | component: 'div',
|
135 | device: 'desktop',
|
136 | dense: false
|
137 | }, _temp);
|
138 | ResponsiveGrid.displayName = 'ResponsiveGrid';
|
139 |
|
140 |
|
141 | ResponsiveGrid.Cell = Cell;
|
142 |
|
143 | export default ConfigProvider.config(ResponsiveGrid); |
\ | No newline at end of file |