@micromag/element-grid 0.4.71 → 0.4.74
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/es/index.js +37 -53
- package/package.json +9 -7
package/es/index.js
CHANGED
|
@@ -4,47 +4,32 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
|
|
5
5
|
var styles = {"container":"micromag-element-grid-container","items":"micromag-element-grid-items","cross":"micromag-element-grid-cross","axis":"micromag-element-grid-axis"};
|
|
6
6
|
|
|
7
|
-
function Grid(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
axisClassName = _ref$axisClassName === void 0 ? null : _ref$axisClassName,
|
|
24
|
-
_ref$crossClassName = _ref.crossClassName,
|
|
25
|
-
crossClassName = _ref$crossClassName === void 0 ? null : _ref$crossClassName;
|
|
26
|
-
var itemIndex = 0;
|
|
27
|
-
var items = initialItems || [];
|
|
28
|
-
var finalLayout = isArray(layout) ? layout : [{
|
|
29
|
-
rows: vertical ? items.map(function () {
|
|
30
|
-
return 1;
|
|
31
|
-
}) : 1,
|
|
32
|
-
columns: vertical ? 1 : items.map(function () {
|
|
33
|
-
return 1;
|
|
34
|
-
})
|
|
7
|
+
function Grid({
|
|
8
|
+
items: initialItems = null,
|
|
9
|
+
layout = null,
|
|
10
|
+
width = null,
|
|
11
|
+
height = null,
|
|
12
|
+
spacing = 0,
|
|
13
|
+
vertical = false,
|
|
14
|
+
className = null,
|
|
15
|
+
axisClassName = null,
|
|
16
|
+
crossClassName = null
|
|
17
|
+
}) {
|
|
18
|
+
let itemIndex = 0;
|
|
19
|
+
const items = initialItems || [];
|
|
20
|
+
const finalLayout = isArray(layout) ? layout : [{
|
|
21
|
+
rows: vertical ? items.map(() => 1) : 1,
|
|
22
|
+
columns: vertical ? 1 : items.map(() => 1)
|
|
35
23
|
}];
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
columns = _ref2$columns === void 0 ? 1 : _ref2$columns;
|
|
41
|
-
return total + (vertical ? columns : rows);
|
|
42
|
-
}, 0);
|
|
24
|
+
const crossTotal = finalLayout.reduce((total, {
|
|
25
|
+
rows = 1,
|
|
26
|
+
columns = 1
|
|
27
|
+
}) => total + (vertical ? columns : rows), 0);
|
|
43
28
|
return /*#__PURE__*/jsx("div", {
|
|
44
29
|
className: classNames([styles.container, className]),
|
|
45
30
|
style: {
|
|
46
|
-
width
|
|
47
|
-
height
|
|
31
|
+
width,
|
|
32
|
+
height,
|
|
48
33
|
padding: spacing !== null && spacing > 0 ? spacing / 2 : null
|
|
49
34
|
},
|
|
50
35
|
children: /*#__PURE__*/jsx("div", {
|
|
@@ -52,16 +37,15 @@ function Grid(_ref) {
|
|
|
52
37
|
style: {
|
|
53
38
|
flexDirection: vertical ? 'row' : 'column'
|
|
54
39
|
},
|
|
55
|
-
children: finalLayout.map(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}, 0);
|
|
40
|
+
children: finalLayout.map(({
|
|
41
|
+
rows: rows_0,
|
|
42
|
+
columns: columns_0
|
|
43
|
+
}, crossIndex) => {
|
|
44
|
+
const crossSizeRatio = (vertical ? columns_0 : rows_0) / crossTotal;
|
|
45
|
+
const crossSize = `${100 * crossSizeRatio}%`;
|
|
46
|
+
const axisItems = vertical ? rows_0 : columns_0;
|
|
47
|
+
const finalAxisItems = isArray(axisItems) ? axisItems : [axisItems];
|
|
48
|
+
const axisTotal = finalAxisItems.reduce((total_0, it) => total_0 + it, 0);
|
|
65
49
|
return /*#__PURE__*/jsx("div", {
|
|
66
50
|
className: classNames([styles.cross, crossClassName]),
|
|
67
51
|
style: {
|
|
@@ -69,10 +53,10 @@ function Grid(_ref) {
|
|
|
69
53
|
width: vertical ? crossSize : null,
|
|
70
54
|
height: vertical ? null : crossSize
|
|
71
55
|
},
|
|
72
|
-
children: finalAxisItems.map(
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
56
|
+
children: finalAxisItems.map((axisItem, axisIndex) => {
|
|
57
|
+
const axisSizeRatio = axisItem / axisTotal;
|
|
58
|
+
const axisSize = `${100 * axisSizeRatio}%`;
|
|
59
|
+
const item = items[itemIndex];
|
|
76
60
|
itemIndex += 1;
|
|
77
61
|
return /*#__PURE__*/jsx("div", {
|
|
78
62
|
className: classNames([styles.axis, axisClassName]),
|
|
@@ -82,9 +66,9 @@ function Grid(_ref) {
|
|
|
82
66
|
padding: spacing > 0 ? spacing / 2 : 0
|
|
83
67
|
},
|
|
84
68
|
children: item
|
|
85
|
-
},
|
|
69
|
+
}, `axis-${axisIndex}`);
|
|
86
70
|
})
|
|
87
|
-
},
|
|
71
|
+
}, `cross-${crossIndex}`);
|
|
88
72
|
})
|
|
89
73
|
})
|
|
90
74
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/element-grid",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.74",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -32,9 +32,11 @@
|
|
|
32
32
|
"license": "ISC",
|
|
33
33
|
"type": "module",
|
|
34
34
|
"module": "es/index.js",
|
|
35
|
+
"style": "./assets/css/styles.css",
|
|
35
36
|
"exports": {
|
|
36
37
|
".": {
|
|
37
38
|
"types": "./es/index.d.ts",
|
|
39
|
+
"style": "./assets/css/styles.css",
|
|
38
40
|
"import": "./es/index.js"
|
|
39
41
|
},
|
|
40
42
|
"./assets/css/styles": "./assets/css/styles.css",
|
|
@@ -51,16 +53,16 @@
|
|
|
51
53
|
"build": "../../scripts/prepare-package.sh --types"
|
|
52
54
|
},
|
|
53
55
|
"devDependencies": {
|
|
54
|
-
"react": "^
|
|
55
|
-
"react-dom": "^
|
|
56
|
+
"react": "^19.0.0",
|
|
57
|
+
"react-dom": "^19.0.0"
|
|
56
58
|
},
|
|
57
59
|
"peerDependencies": {
|
|
58
|
-
"react": "^
|
|
59
|
-
"react-dom": "^
|
|
60
|
+
"react": "^19.0.0",
|
|
61
|
+
"react-dom": "^19.0.0"
|
|
60
62
|
},
|
|
61
63
|
"dependencies": {
|
|
62
64
|
"@babel/runtime": "^7.28.6",
|
|
63
|
-
"@micromag/core": "^0.4.
|
|
65
|
+
"@micromag/core": "^0.4.74",
|
|
64
66
|
"classnames": "^2.2.6",
|
|
65
67
|
"lodash": "^4.17.23",
|
|
66
68
|
"react-intl": "^8.1.3 || ^10.0.0",
|
|
@@ -70,6 +72,6 @@
|
|
|
70
72
|
"access": "public",
|
|
71
73
|
"registry": "https://registry.npmjs.org/"
|
|
72
74
|
},
|
|
73
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
|
|
74
76
|
"types": "es/index.d.ts"
|
|
75
77
|
}
|