@hi-ui/grid 4.0.0 → 4.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/Grid.js +126 -18
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/esm/Grid.js +129 -21
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/types/Grid.d.ts +10 -7
- package/lib/types/types.d.ts +22 -0
- package/package.json +8 -8
package/lib/cjs/Grid.js
CHANGED
|
@@ -37,6 +37,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
37
37
|
|
|
38
38
|
var rowPrefix = classname.getPrefixCls('grid-row');
|
|
39
39
|
var gutterNameVar = classname.getPrefixStyleVar('grid-row-gutter');
|
|
40
|
+
var columnsNameVar = classname.getPrefixStyleVar('grid-row-columns');
|
|
40
41
|
var gapNameVar = classname.getPrefixStyleVar('grid-row-gap'); // Row 与 Row 默认间距
|
|
41
42
|
|
|
42
43
|
var DEFAULT_ROW_GAP = 16; // Row 内每项 Col 默认间距
|
|
@@ -81,10 +82,18 @@ var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
81
82
|
|
|
82
83
|
return 0;
|
|
83
84
|
}, [gutterProp]);
|
|
84
|
-
var
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
85
|
+
var justifyContentStyle = calcResponsiveGrid({
|
|
86
|
+
name: 'row-justify',
|
|
87
|
+
value: justifyContent,
|
|
88
|
+
defaultValue: 'flex-start',
|
|
89
|
+
allowSet: typeAssertion.isString,
|
|
90
|
+
setValue: function setValue(value) {
|
|
91
|
+
return value;
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
var style = Object.assign(justifyContent ? Object.assign(Object.assign(Object.assign({}, styleProp), {
|
|
95
|
+
display: 'flex'
|
|
96
|
+
}), justifyContentStyle) : Object.assign({}, styleProp), (_Object$assign = {}, _Object$assign[gutterNameVar] = gutter + "px", _Object$assign[gapNameVar] = rowGap + "px", _Object$assign[columnsNameVar] = "" + columns, _Object$assign));
|
|
88
97
|
var cls = classname.cx(prefixCls, className);
|
|
89
98
|
var providedContext = React.useMemo(function () {
|
|
90
99
|
return {
|
|
@@ -104,16 +113,22 @@ if (env.__DEV__) {
|
|
|
104
113
|
Row.displayName = 'Row';
|
|
105
114
|
}
|
|
106
115
|
|
|
107
|
-
var colPrefix = classname.getPrefixCls('grid-col');
|
|
108
|
-
|
|
109
|
-
|
|
116
|
+
var colPrefix = classname.getPrefixCls('grid-col'); // const spanNameVar = getPrefixStyleVar('grid-col-span')
|
|
117
|
+
// const offsetNameVar = getPrefixStyleVar('grid-col-offset')
|
|
118
|
+
|
|
119
|
+
var getGridStyleVar = function getGridStyleVar(prop, size) {
|
|
120
|
+
if (size) {
|
|
121
|
+
return classname.getPrefixStyleVar('grid-' + prop + '-' + size);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
return classname.getPrefixStyleVar('grid-' + prop);
|
|
125
|
+
};
|
|
110
126
|
/**
|
|
111
127
|
* TODO: What is Grid Col
|
|
112
128
|
*/
|
|
113
129
|
|
|
114
|
-
var Col = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
115
|
-
var _Object$assign2;
|
|
116
130
|
|
|
131
|
+
var Col = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
117
132
|
var _a$prefixCls2 = _a.prefixCls,
|
|
118
133
|
prefixCls = _a$prefixCls2 === void 0 ? colPrefix : _a$prefixCls2,
|
|
119
134
|
className = _a.className,
|
|
@@ -123,19 +138,59 @@ var Col = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
123
138
|
_a$offset = _a.offset,
|
|
124
139
|
offsetProp = _a$offset === void 0 ? 0 : _a$offset,
|
|
125
140
|
justifyContent = _a.justify,
|
|
126
|
-
|
|
141
|
+
order = _a.order,
|
|
142
|
+
rest = tslib.__rest(_a, ["prefixCls", "className", "children", "style", "span", "offset", "justify", "order"]);
|
|
127
143
|
|
|
128
144
|
var _useGridContext = context.useGridContext(),
|
|
129
145
|
_useGridContext$colum = _useGridContext.columns,
|
|
130
|
-
columns = _useGridContext$colum === void 0 ? 24 : _useGridContext$colum;
|
|
131
|
-
|
|
146
|
+
columns = _useGridContext$colum === void 0 ? 24 : _useGridContext$colum;
|
|
132
147
|
|
|
133
|
-
var
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
148
|
+
var spanStyle = calcResponsiveGrid({
|
|
149
|
+
name: 'col-span',
|
|
150
|
+
value: spanProp,
|
|
151
|
+
noneCallback: function noneCallback(style) {
|
|
152
|
+
style.flexBasis = 'auto';
|
|
153
|
+
style.maxWidth = '100%';
|
|
154
|
+
},
|
|
155
|
+
allowSet: typeAssertion.isNumeric,
|
|
156
|
+
setValue: function setValue(value) {
|
|
157
|
+
return setGridSpan(value, 0, columns, 'offset');
|
|
158
|
+
}
|
|
159
|
+
});
|
|
160
|
+
var offsetStyle = calcResponsiveGrid({
|
|
161
|
+
name: 'col-offset',
|
|
162
|
+
value: offsetProp,
|
|
163
|
+
defaultValue: 0,
|
|
164
|
+
allowSet: typeAssertion.isNumeric,
|
|
165
|
+
setValue: function setValue(value) {
|
|
166
|
+
return setGridSpan(value, 0, columns, 'offset');
|
|
167
|
+
}
|
|
168
|
+
});
|
|
169
|
+
var orderStyle = calcResponsiveGrid({
|
|
170
|
+
name: 'col-order',
|
|
171
|
+
value: order,
|
|
172
|
+
defaultValue: 0,
|
|
173
|
+
allowSet: typeAssertion.isNumeric,
|
|
174
|
+
setValue: function setValue(value) {
|
|
175
|
+
return Number(value);
|
|
176
|
+
}
|
|
177
|
+
});
|
|
178
|
+
var justifyContentStyle = calcResponsiveGrid({
|
|
179
|
+
name: 'col-justify',
|
|
180
|
+
value: justifyContent,
|
|
181
|
+
defaultValue: 'flex-start',
|
|
182
|
+
allowSet: typeAssertion.isString,
|
|
183
|
+
setValue: function setValue(value) {
|
|
184
|
+
return value;
|
|
185
|
+
}
|
|
186
|
+
});
|
|
187
|
+
var style = Object.assign(justifyContent ? Object.assign(Object.assign(Object.assign({}, styleProp), {
|
|
188
|
+
display: 'flex'
|
|
189
|
+
}), justifyContentStyle) : Object.assign({}, styleProp), spanStyle, offsetStyle, orderStyle // {
|
|
190
|
+
// [spanNameVar]: span === null ? 'unset' : `calc(${span} / ${columns} * 100%)`,
|
|
191
|
+
// [offsetNameVar]: `calc(${offset} / ${columns} * 100%)`,
|
|
192
|
+
// }
|
|
193
|
+
);
|
|
139
194
|
var cls = classname.cx(prefixCls, className);
|
|
140
195
|
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
141
196
|
ref: ref,
|
|
@@ -148,5 +203,58 @@ if (env.__DEV__) {
|
|
|
148
203
|
Col.displayName = 'Col';
|
|
149
204
|
}
|
|
150
205
|
|
|
206
|
+
var setGridSpan = function setGridSpan(value, min, max, propName) {
|
|
207
|
+
var nextValue = Number(value);
|
|
208
|
+
|
|
209
|
+
if (env.__DEV__) {
|
|
210
|
+
env.invariant(nextValue >= min && nextValue <= max, "Please set " + propName + " in the range [" + min + ", " + max + "] When using Grid component.");
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
if (nextValue < 0) nextValue = 0;
|
|
214
|
+
if (nextValue > max) nextValue = max;
|
|
215
|
+
return nextValue;
|
|
216
|
+
};
|
|
217
|
+
|
|
218
|
+
var GRID_SIZE_ARRAY = ['xs', 'sm', 'md', 'lg', 'xl'];
|
|
219
|
+
|
|
220
|
+
function calcResponsiveGrid(_ref) {
|
|
221
|
+
var value = _ref.value,
|
|
222
|
+
defaultValue = _ref.defaultValue,
|
|
223
|
+
allowSet = _ref.allowSet,
|
|
224
|
+
setValue = _ref.setValue,
|
|
225
|
+
name = _ref.name,
|
|
226
|
+
noneCallback = _ref.noneCallback;
|
|
227
|
+
var style = {};
|
|
228
|
+
|
|
229
|
+
if (typeAssertion.isObject(value)) {
|
|
230
|
+
var prevSpan;
|
|
231
|
+
GRID_SIZE_ARRAY.forEach(function (key) {
|
|
232
|
+
var varName = getGridStyleVar(name, key); // @ts-ignore
|
|
233
|
+
|
|
234
|
+
var sizeValue = value[key]; // @ts-ignore
|
|
235
|
+
|
|
236
|
+
style[varName] = allowSet(sizeValue) ? setValue(sizeValue) : prevSpan; // @ts-ignore
|
|
237
|
+
|
|
238
|
+
prevSpan = style[varName];
|
|
239
|
+
});
|
|
240
|
+
} else {
|
|
241
|
+
if (allowSet(value)) {
|
|
242
|
+
value = setValue(value);
|
|
243
|
+
} else {
|
|
244
|
+
if (noneCallback) {
|
|
245
|
+
noneCallback(style);
|
|
246
|
+
} else if (typeof defaultValue !== 'undefined') {
|
|
247
|
+
value = defaultValue;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
var varName = getGridStyleVar(name); // @ts-ignore
|
|
252
|
+
|
|
253
|
+
style[varName] = value;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
return style;
|
|
257
|
+
}
|
|
258
|
+
|
|
151
259
|
exports.Col = Col;
|
|
152
260
|
exports.Row = Row;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
var css_248z = ".hi-v4-grid-row {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: var(--hi-v4-grid-row-gap);margin-left: calc(-1 * var(--hi-v4-grid-row-gutter) / 2);margin-right: calc(-1 * var(--hi-v4-grid-row-gutter) / 2); }.hi-v4-grid-row + .hi-v4-grid-row {margin-top: var(--hi-v4-grid-row-gap); }.hi-v4-grid-col {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-flex: 0;-ms-flex-positive: 0;flex-grow: 0;-ms-flex-negative: 0;flex-shrink: 0;-ms-flex-preferred-size: var(--hi-v4-grid-col-span);flex-basis: var(--hi-v4-grid-col-span);max-width: var(--hi-v4-grid-col-span)
|
|
15
|
+
var css_248z = ".hi-v4-grid-row {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: var(--hi-v4-grid-row-gap);margin-left: calc(-1 * var(--hi-v4-grid-row-gutter) / 2);margin-right: calc(-1 * var(--hi-v4-grid-row-gutter) / 2);-webkit-box-pack: var(--hi-v4-grid-row-justify);-ms-flex-pack: var(--hi-v4-grid-row-justify);justify-content: var(--hi-v4-grid-row-justify); }.hi-v4-grid-row + .hi-v4-grid-row {margin-top: var(--hi-v4-grid-row-gap); }.hi-v4-grid-col {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-flex: 0;-ms-flex-positive: 0;flex-grow: 0;-ms-flex-negative: 0;flex-shrink: 0;min-width: 1px;padding-left: calc(var(--hi-v4-grid-row-gutter) / 2);padding-right: calc(var(--hi-v4-grid-row-gutter) / 2);-ms-flex-preferred-size: calc(var(--hi-v4-grid-col-span) / var(--hi-v4-grid-row-columns) * 100%);flex-basis: calc(var(--hi-v4-grid-col-span) / var(--hi-v4-grid-row-columns) * 100%);max-width: calc(var(--hi-v4-grid-col-span) / var(--hi-v4-grid-row-columns) * 100%);-webkit-margin-start: calc(var(--hi-v4-grid-col-offset) / var(--hi-v4-grid-row-columns) * 100%);margin-inline-start: calc(var(--hi-v4-grid-col-offset) / var(--hi-v4-grid-row-columns) * 100%);-webkit-box-ordinal-group: NaN;-ms-flex-order: var(--hi-v4-grid-col-order);order: var(--hi-v4-grid-col-order);-webkit-box-pack: var(--hi-v4-grid-col-justify);-ms-flex-pack: var(--hi-v4-grid-col-justify);justify-content: var(--hi-v4-grid-col-justify); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-xs);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-xs);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-xs);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-xs); }.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-xs); }@media only screen and (min-width: 576px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-sm); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-sm);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-sm);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-sm);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-sm); } }@media only screen and (min-width: 768px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-md); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-md);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-md);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-md);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-md); } }@media only screen and (min-width: 992px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-lg); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-lg);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-lg);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-lg);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-lg); } }@media only screen and (min-width: 1200px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-xl); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-xl);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-xl);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-xl);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-xl); } }";
|
|
16
16
|
|
|
17
17
|
var __styleInject__ = require('inject-head-style')["default"];
|
|
18
18
|
|
package/lib/esm/Grid.js
CHANGED
|
@@ -10,11 +10,12 @@
|
|
|
10
10
|
import { __rest } from 'tslib';
|
|
11
11
|
import React, { forwardRef, useMemo } from 'react';
|
|
12
12
|
import { getPrefixCls, getPrefixStyleVar, cx } from '@hi-ui/classname';
|
|
13
|
-
import { __DEV__ } from '@hi-ui/env';
|
|
13
|
+
import { __DEV__, invariant } from '@hi-ui/env';
|
|
14
14
|
import { GridProvider, useGridContext } from './context.js';
|
|
15
|
-
import { isNumeric } from '@hi-ui/type-assertion';
|
|
15
|
+
import { isNumeric, isObject, isString } from '@hi-ui/type-assertion';
|
|
16
16
|
var rowPrefix = getPrefixCls('grid-row');
|
|
17
17
|
var gutterNameVar = getPrefixStyleVar('grid-row-gutter');
|
|
18
|
+
var columnsNameVar = getPrefixStyleVar('grid-row-columns');
|
|
18
19
|
var gapNameVar = getPrefixStyleVar('grid-row-gap'); // Row 与 Row 默认间距
|
|
19
20
|
|
|
20
21
|
var DEFAULT_ROW_GAP = 16; // Row 内每项 Col 默认间距
|
|
@@ -59,10 +60,18 @@ var Row = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
59
60
|
|
|
60
61
|
return 0;
|
|
61
62
|
}, [gutterProp]);
|
|
62
|
-
var
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
var justifyContentStyle = calcResponsiveGrid({
|
|
64
|
+
name: 'row-justify',
|
|
65
|
+
value: justifyContent,
|
|
66
|
+
defaultValue: 'flex-start',
|
|
67
|
+
allowSet: isString,
|
|
68
|
+
setValue: function setValue(value) {
|
|
69
|
+
return value;
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
var style = Object.assign(justifyContent ? Object.assign(Object.assign(Object.assign({}, styleProp), {
|
|
73
|
+
display: 'flex'
|
|
74
|
+
}), justifyContentStyle) : Object.assign({}, styleProp), (_Object$assign = {}, _Object$assign[gutterNameVar] = gutter + "px", _Object$assign[gapNameVar] = rowGap + "px", _Object$assign[columnsNameVar] = "" + columns, _Object$assign));
|
|
66
75
|
var cls = cx(prefixCls, className);
|
|
67
76
|
var providedContext = useMemo(function () {
|
|
68
77
|
return {
|
|
@@ -82,16 +91,22 @@ if (__DEV__) {
|
|
|
82
91
|
Row.displayName = 'Row';
|
|
83
92
|
}
|
|
84
93
|
|
|
85
|
-
var colPrefix = getPrefixCls('grid-col');
|
|
86
|
-
|
|
87
|
-
|
|
94
|
+
var colPrefix = getPrefixCls('grid-col'); // const spanNameVar = getPrefixStyleVar('grid-col-span')
|
|
95
|
+
// const offsetNameVar = getPrefixStyleVar('grid-col-offset')
|
|
96
|
+
|
|
97
|
+
var getGridStyleVar = function getGridStyleVar(prop, size) {
|
|
98
|
+
if (size) {
|
|
99
|
+
return getPrefixStyleVar('grid-' + prop + '-' + size);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
return getPrefixStyleVar('grid-' + prop);
|
|
103
|
+
};
|
|
88
104
|
/**
|
|
89
105
|
* TODO: What is Grid Col
|
|
90
106
|
*/
|
|
91
107
|
|
|
92
|
-
var Col = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
93
|
-
var _Object$assign2;
|
|
94
108
|
|
|
109
|
+
var Col = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
95
110
|
var _a$prefixCls2 = _a.prefixCls,
|
|
96
111
|
prefixCls = _a$prefixCls2 === void 0 ? colPrefix : _a$prefixCls2,
|
|
97
112
|
className = _a.className,
|
|
@@ -101,19 +116,59 @@ var Col = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
101
116
|
_a$offset = _a.offset,
|
|
102
117
|
offsetProp = _a$offset === void 0 ? 0 : _a$offset,
|
|
103
118
|
justifyContent = _a.justify,
|
|
104
|
-
|
|
119
|
+
order = _a.order,
|
|
120
|
+
rest = __rest(_a, ["prefixCls", "className", "children", "style", "span", "offset", "justify", "order"]);
|
|
105
121
|
|
|
106
122
|
var _useGridContext = useGridContext(),
|
|
107
123
|
_useGridContext$colum = _useGridContext.columns,
|
|
108
|
-
columns = _useGridContext$colum === void 0 ? 24 : _useGridContext$colum;
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
124
|
+
columns = _useGridContext$colum === void 0 ? 24 : _useGridContext$colum;
|
|
125
|
+
|
|
126
|
+
var spanStyle = calcResponsiveGrid({
|
|
127
|
+
name: 'col-span',
|
|
128
|
+
value: spanProp,
|
|
129
|
+
noneCallback: function noneCallback(style) {
|
|
130
|
+
style.flexBasis = 'auto';
|
|
131
|
+
style.maxWidth = '100%';
|
|
132
|
+
},
|
|
133
|
+
allowSet: isNumeric,
|
|
134
|
+
setValue: function setValue(value) {
|
|
135
|
+
return setGridSpan(value, 0, columns, 'offset');
|
|
136
|
+
}
|
|
137
|
+
});
|
|
138
|
+
var offsetStyle = calcResponsiveGrid({
|
|
139
|
+
name: 'col-offset',
|
|
140
|
+
value: offsetProp,
|
|
141
|
+
defaultValue: 0,
|
|
142
|
+
allowSet: isNumeric,
|
|
143
|
+
setValue: function setValue(value) {
|
|
144
|
+
return setGridSpan(value, 0, columns, 'offset');
|
|
145
|
+
}
|
|
146
|
+
});
|
|
147
|
+
var orderStyle = calcResponsiveGrid({
|
|
148
|
+
name: 'col-order',
|
|
149
|
+
value: order,
|
|
150
|
+
defaultValue: 0,
|
|
151
|
+
allowSet: isNumeric,
|
|
152
|
+
setValue: function setValue(value) {
|
|
153
|
+
return Number(value);
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
var justifyContentStyle = calcResponsiveGrid({
|
|
157
|
+
name: 'col-justify',
|
|
158
|
+
value: justifyContent,
|
|
159
|
+
defaultValue: 'flex-start',
|
|
160
|
+
allowSet: isString,
|
|
161
|
+
setValue: function setValue(value) {
|
|
162
|
+
return value;
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
var style = Object.assign(justifyContent ? Object.assign(Object.assign(Object.assign({}, styleProp), {
|
|
166
|
+
display: 'flex'
|
|
167
|
+
}), justifyContentStyle) : Object.assign({}, styleProp), spanStyle, offsetStyle, orderStyle // {
|
|
168
|
+
// [spanNameVar]: span === null ? 'unset' : `calc(${span} / ${columns} * 100%)`,
|
|
169
|
+
// [offsetNameVar]: `calc(${offset} / ${columns} * 100%)`,
|
|
170
|
+
// }
|
|
171
|
+
);
|
|
117
172
|
var cls = cx(prefixCls, className);
|
|
118
173
|
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
119
174
|
ref: ref,
|
|
@@ -126,4 +181,57 @@ if (__DEV__) {
|
|
|
126
181
|
Col.displayName = 'Col';
|
|
127
182
|
}
|
|
128
183
|
|
|
184
|
+
var setGridSpan = function setGridSpan(value, min, max, propName) {
|
|
185
|
+
var nextValue = Number(value);
|
|
186
|
+
|
|
187
|
+
if (__DEV__) {
|
|
188
|
+
invariant(nextValue >= min && nextValue <= max, "Please set " + propName + " in the range [" + min + ", " + max + "] When using Grid component.");
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
if (nextValue < 0) nextValue = 0;
|
|
192
|
+
if (nextValue > max) nextValue = max;
|
|
193
|
+
return nextValue;
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
var GRID_SIZE_ARRAY = ['xs', 'sm', 'md', 'lg', 'xl'];
|
|
197
|
+
|
|
198
|
+
function calcResponsiveGrid(_ref) {
|
|
199
|
+
var value = _ref.value,
|
|
200
|
+
defaultValue = _ref.defaultValue,
|
|
201
|
+
allowSet = _ref.allowSet,
|
|
202
|
+
setValue = _ref.setValue,
|
|
203
|
+
name = _ref.name,
|
|
204
|
+
noneCallback = _ref.noneCallback;
|
|
205
|
+
var style = {};
|
|
206
|
+
|
|
207
|
+
if (isObject(value)) {
|
|
208
|
+
var prevSpan;
|
|
209
|
+
GRID_SIZE_ARRAY.forEach(function (key) {
|
|
210
|
+
var varName = getGridStyleVar(name, key); // @ts-ignore
|
|
211
|
+
|
|
212
|
+
var sizeValue = value[key]; // @ts-ignore
|
|
213
|
+
|
|
214
|
+
style[varName] = allowSet(sizeValue) ? setValue(sizeValue) : prevSpan; // @ts-ignore
|
|
215
|
+
|
|
216
|
+
prevSpan = style[varName];
|
|
217
|
+
});
|
|
218
|
+
} else {
|
|
219
|
+
if (allowSet(value)) {
|
|
220
|
+
value = setValue(value);
|
|
221
|
+
} else {
|
|
222
|
+
if (noneCallback) {
|
|
223
|
+
noneCallback(style);
|
|
224
|
+
} else if (typeof defaultValue !== 'undefined') {
|
|
225
|
+
value = defaultValue;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
var varName = getGridStyleVar(name); // @ts-ignore
|
|
230
|
+
|
|
231
|
+
style[varName] = value;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
return style;
|
|
235
|
+
}
|
|
236
|
+
|
|
129
237
|
export { Col, Row };
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
10
|
import __styleInject__ from 'inject-head-style';
|
|
11
|
-
var css_248z = ".hi-v4-grid-row {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: var(--hi-v4-grid-row-gap);margin-left: calc(-1 * var(--hi-v4-grid-row-gutter) / 2);margin-right: calc(-1 * var(--hi-v4-grid-row-gutter) / 2); }.hi-v4-grid-row + .hi-v4-grid-row {margin-top: var(--hi-v4-grid-row-gap); }.hi-v4-grid-col {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-flex: 0;-ms-flex-positive: 0;flex-grow: 0;-ms-flex-negative: 0;flex-shrink: 0;-ms-flex-preferred-size: var(--hi-v4-grid-col-span);flex-basis: var(--hi-v4-grid-col-span);max-width: var(--hi-v4-grid-col-span)
|
|
11
|
+
var css_248z = ".hi-v4-grid-row {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: var(--hi-v4-grid-row-gap);margin-left: calc(-1 * var(--hi-v4-grid-row-gutter) / 2);margin-right: calc(-1 * var(--hi-v4-grid-row-gutter) / 2);-webkit-box-pack: var(--hi-v4-grid-row-justify);-ms-flex-pack: var(--hi-v4-grid-row-justify);justify-content: var(--hi-v4-grid-row-justify); }.hi-v4-grid-row + .hi-v4-grid-row {margin-top: var(--hi-v4-grid-row-gap); }.hi-v4-grid-col {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-flex: 0;-ms-flex-positive: 0;flex-grow: 0;-ms-flex-negative: 0;flex-shrink: 0;min-width: 1px;padding-left: calc(var(--hi-v4-grid-row-gutter) / 2);padding-right: calc(var(--hi-v4-grid-row-gutter) / 2);-ms-flex-preferred-size: calc(var(--hi-v4-grid-col-span) / var(--hi-v4-grid-row-columns) * 100%);flex-basis: calc(var(--hi-v4-grid-col-span) / var(--hi-v4-grid-row-columns) * 100%);max-width: calc(var(--hi-v4-grid-col-span) / var(--hi-v4-grid-row-columns) * 100%);-webkit-margin-start: calc(var(--hi-v4-grid-col-offset) / var(--hi-v4-grid-row-columns) * 100%);margin-inline-start: calc(var(--hi-v4-grid-col-offset) / var(--hi-v4-grid-row-columns) * 100%);-webkit-box-ordinal-group: NaN;-ms-flex-order: var(--hi-v4-grid-col-order);order: var(--hi-v4-grid-col-order);-webkit-box-pack: var(--hi-v4-grid-col-justify);-ms-flex-pack: var(--hi-v4-grid-col-justify);justify-content: var(--hi-v4-grid-col-justify); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-xs);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-xs);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-xs);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-xs); }.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-xs); }@media only screen and (min-width: 576px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-sm); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-sm);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-sm);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-sm);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-sm); } }@media only screen and (min-width: 768px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-md); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-md);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-md);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-md);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-md); } }@media only screen and (min-width: 992px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-lg); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-lg);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-lg);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-lg);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-lg); } }@media only screen and (min-width: 1200px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-xl); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-xl);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-xl);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-xl);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-xl); } }";
|
|
12
12
|
|
|
13
13
|
__styleInject__(css_248z);
|
|
14
14
|
|
package/lib/types/Grid.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { HiBaseHTMLProps } from '@hi-ui/core';
|
|
3
|
-
import { GridJustifyEnum } from './types';
|
|
3
|
+
import { GridJustifyEnum, GridResponsiveSize } from './types';
|
|
4
4
|
/**
|
|
5
5
|
* TODO: What is Grid Row
|
|
6
6
|
*/
|
|
@@ -9,14 +9,13 @@ export interface RowProps extends HiBaseHTMLProps<'div'> {
|
|
|
9
9
|
/**
|
|
10
10
|
* 里面的元素排布方式
|
|
11
11
|
*/
|
|
12
|
-
justify?: GridJustifyEnum
|
|
12
|
+
justify?: GridJustifyEnum | GridResponsiveSize<GridJustifyEnum>;
|
|
13
13
|
/**
|
|
14
14
|
* Row 里面元素之间是否有外边距，建议使用偶数
|
|
15
15
|
*/
|
|
16
16
|
gutter?: boolean | number;
|
|
17
17
|
/**
|
|
18
|
-
* 设置栅格列总数，一般是 24 或者 48
|
|
19
|
-
* @private
|
|
18
|
+
* 设置栅格列总数，一般是 12 或者 24 或者 48
|
|
20
19
|
*/
|
|
21
20
|
columns?: number;
|
|
22
21
|
/**
|
|
@@ -32,13 +31,17 @@ export interface ColProps extends HiBaseHTMLProps<'div'> {
|
|
|
32
31
|
/**
|
|
33
32
|
* Col 元素占多少个栅格
|
|
34
33
|
*/
|
|
35
|
-
span?: number
|
|
34
|
+
span?: number | GridResponsiveSize<number>;
|
|
36
35
|
/**
|
|
37
36
|
* Col 元素偏移多少个栅格
|
|
38
37
|
*/
|
|
39
|
-
offset?: number
|
|
38
|
+
offset?: number | GridResponsiveSize<number>;
|
|
40
39
|
/**
|
|
41
40
|
* 里面的元素排布方式
|
|
42
41
|
*/
|
|
43
|
-
justify?: GridJustifyEnum
|
|
42
|
+
justify?: GridJustifyEnum | GridResponsiveSize<GridJustifyEnum>;
|
|
43
|
+
/**
|
|
44
|
+
* Col项重排序，数值越大，越在后面展示
|
|
45
|
+
*/
|
|
46
|
+
order?: number | GridResponsiveSize<number>;
|
|
44
47
|
}
|
package/lib/types/types.d.ts
CHANGED
|
@@ -1 +1,23 @@
|
|
|
1
1
|
export declare type GridJustifyEnum = 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between';
|
|
2
|
+
export interface GridResponsiveSize<T> {
|
|
3
|
+
/**
|
|
4
|
+
* 设置屏幕 < 576px 时响应式栅格数
|
|
5
|
+
*/
|
|
6
|
+
xs?: T;
|
|
7
|
+
/**
|
|
8
|
+
* 设置屏幕 >= 576px 时响应式栅格数
|
|
9
|
+
*/
|
|
10
|
+
sm?: T;
|
|
11
|
+
/**
|
|
12
|
+
* 设置屏幕 >= 768px 时响应式栅格数
|
|
13
|
+
*/
|
|
14
|
+
md?: T;
|
|
15
|
+
/**
|
|
16
|
+
* 设置屏幕 >= 992px 时响应式栅格数
|
|
17
|
+
*/
|
|
18
|
+
lg?: T;
|
|
19
|
+
/**
|
|
20
|
+
* 设置屏幕 >= 1200px 时响应式栅格数
|
|
21
|
+
*/
|
|
22
|
+
xl?: T;
|
|
23
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hi-ui/grid",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.3",
|
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "HiUI <mi-hiui@xiaomi.com>",
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"url": "https://github.com/XiaoMi/hiui/issues"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@hi-ui/classname": "^4.0.
|
|
47
|
-
"@hi-ui/env": "^4.0.
|
|
48
|
-
"@hi-ui/type-assertion": "^4.0.
|
|
46
|
+
"@hi-ui/classname": "^4.0.1",
|
|
47
|
+
"@hi-ui/env": "^4.0.1",
|
|
48
|
+
"@hi-ui/type-assertion": "^4.0.1"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"@hi-ui/core": ">=4.0.0",
|
|
@@ -53,11 +53,11 @@
|
|
|
53
53
|
"react-dom": ">=16.8.6"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@hi-ui/core": "^4.0.
|
|
57
|
-
"@hi-ui/core-css": "^4.0.
|
|
58
|
-
"@hi-ui/hi-build": "^4.0.
|
|
56
|
+
"@hi-ui/core": "^4.0.2",
|
|
57
|
+
"@hi-ui/core-css": "^4.0.1",
|
|
58
|
+
"@hi-ui/hi-build": "^4.0.1",
|
|
59
59
|
"react": "^17.0.1",
|
|
60
60
|
"react-dom": "^17.0.1"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "7d841458bef1853b31426203cb0a9dc2b9820908"
|
|
63
63
|
}
|