jsbox-cview 1.4.0 → 1.4.1
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.
|
@@ -6,7 +6,6 @@ interface DynamicItemSizeMatrixProps extends UiTypes.MatrixProps {
|
|
|
6
6
|
minItemWidth: number;
|
|
7
7
|
maxColumns: number;
|
|
8
8
|
spacing: number;
|
|
9
|
-
maxTotalWidth: number;
|
|
10
9
|
dynamicHeightEnabled?: boolean;
|
|
11
10
|
}
|
|
12
11
|
|
|
@@ -40,6 +39,7 @@ interface DynamicItemSizeMatrixPropsPartial extends UiTypes.MatrixProps {
|
|
|
40
39
|
* 2. 确定 itemHeight 有两种方法:
|
|
41
40
|
* - fixedItemHeight 固定高度，优先级第二
|
|
42
41
|
* - event: itemHeight(width) => height 通过 width 动态计算，优先级最高
|
|
42
|
+
* 3. 如果 minItemWidth 比 totalWidth - 2 * spacing 还要小，那么 itemSize.width 会被设定为 totalWidth - 2 * spacing，以保证item不会超出边框
|
|
43
43
|
*
|
|
44
44
|
* props:
|
|
45
45
|
*
|
|
@@ -85,7 +85,7 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
|
|
|
85
85
|
minItemWidth: 96,
|
|
86
86
|
maxColumns: 5,
|
|
87
87
|
spacing: 6,
|
|
88
|
-
|
|
88
|
+
dynamicHeightEnabled: false,
|
|
89
89
|
...props
|
|
90
90
|
};
|
|
91
91
|
this._events = events;
|
|
@@ -98,14 +98,7 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
|
|
|
98
98
|
...this._props,
|
|
99
99
|
scrollEnabled: !this._props.dynamicHeightEnabled
|
|
100
100
|
},
|
|
101
|
-
layout:
|
|
102
|
-
? (make, view) => {
|
|
103
|
-
make.center.equalTo(view.super);
|
|
104
|
-
make.width.lessThanOrEqualTo(this._props.maxTotalWidth);
|
|
105
|
-
make.width.equalTo(view.super).priority(999);
|
|
106
|
-
make.height.equalTo(view.super);
|
|
107
|
-
}
|
|
108
|
-
: $layout.fill,
|
|
101
|
+
layout: $layout.fill,
|
|
109
102
|
events: {
|
|
110
103
|
..._matrixEvents,
|
|
111
104
|
itemSize: sender => $size(this._itemSizeWidth, this._itemSizeHeight)
|
|
@@ -124,7 +117,6 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
|
|
|
124
117
|
sender.relayout();
|
|
125
118
|
const { itemSizeWidth } = this._getColumnsAndItemSizeWidth(
|
|
126
119
|
sender.frame.width,
|
|
127
|
-
this._props.maxTotalWidth,
|
|
128
120
|
this._props.minItemWidth,
|
|
129
121
|
this._props.maxColumns,
|
|
130
122
|
this._props.spacing
|
|
@@ -151,23 +143,25 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
|
|
|
151
143
|
// 此为纯函数
|
|
152
144
|
_getColumnsAndItemSizeWidth(
|
|
153
145
|
containerWidth: number,
|
|
154
|
-
maxTotalWidth: number,
|
|
155
146
|
minItemWidth: number,
|
|
156
147
|
maxColumns: number,
|
|
157
148
|
spacing: number
|
|
158
149
|
) {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
150
|
+
if (minItemWidth > containerWidth - 2 * spacing) {
|
|
151
|
+
return {
|
|
152
|
+
columns: 1,
|
|
153
|
+
itemSizeWidth: containerWidth - 2 * spacing
|
|
154
|
+
};
|
|
155
|
+
}
|
|
162
156
|
const columns = Math.max(
|
|
163
157
|
Math.min(
|
|
164
|
-
Math.floor((
|
|
158
|
+
Math.floor((containerWidth - spacing) / (minItemWidth + spacing)),
|
|
165
159
|
maxColumns
|
|
166
160
|
),
|
|
167
161
|
1 // 最少一列
|
|
168
162
|
);
|
|
169
163
|
const itemSizeWidth = Math.max(
|
|
170
|
-
Math.floor((
|
|
164
|
+
Math.floor((containerWidth - spacing * (columns + 1)) / columns),
|
|
171
165
|
minItemWidth // 最小宽度
|
|
172
166
|
)
|
|
173
167
|
return {
|
|
@@ -179,7 +173,6 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
|
|
|
179
173
|
heightToWidth(width: number) {
|
|
180
174
|
const { columns, itemSizeWidth } = this._getColumnsAndItemSizeWidth(
|
|
181
175
|
width,
|
|
182
|
-
this._props.maxTotalWidth,
|
|
183
176
|
this._props.minItemWidth,
|
|
184
177
|
this._props.maxColumns,
|
|
185
178
|
this._props.spacing
|
|
@@ -31,6 +31,7 @@ const single_views_1 = require("./single-views");
|
|
|
31
31
|
* 2. 确定 itemHeight 有两种方法:
|
|
32
32
|
* - fixedItemHeight 固定高度，优先级第二
|
|
33
33
|
* - event: itemHeight(width) => height 通过 width 动态计算，优先级最高
|
|
34
|
+
* 3. 如果 minItemWidth 比 totalWidth - 2 * spacing 还要小，那么 itemSize.width 会被设定为 totalWidth - 2 * spacing，以保证item不会超出边框
|
|
34
35
|
*
|
|
35
36
|
* props:
|
|
36
37
|
*
|
|
@@ -59,7 +60,7 @@ const single_views_1 = require("./single-views");
|
|
|
59
60
|
class DynamicItemSizeMatrix extends base_1.Base {
|
|
60
61
|
constructor({ props, layout, events = {} }) {
|
|
61
62
|
super();
|
|
62
|
-
this._props = Object.assign({ fixedItemHeight: 40, minItemWidth: 96, maxColumns: 5, spacing: 6,
|
|
63
|
+
this._props = Object.assign({ fixedItemHeight: 40, minItemWidth: 96, maxColumns: 5, spacing: 6, dynamicHeightEnabled: false }, props);
|
|
63
64
|
this._events = events;
|
|
64
65
|
const _a = this._events, { itemHeight, heightChanged } = _a, rest = __rest(_a, ["itemHeight", "heightChanged"]);
|
|
65
66
|
const _matrixEvents = rest;
|
|
@@ -67,14 +68,7 @@ class DynamicItemSizeMatrix extends base_1.Base {
|
|
|
67
68
|
this._itemSizeHeight = 0;
|
|
68
69
|
this.matrix = new single_views_1.Matrix({
|
|
69
70
|
props: Object.assign(Object.assign({}, this._props), { scrollEnabled: !this._props.dynamicHeightEnabled }),
|
|
70
|
-
layout:
|
|
71
|
-
? (make, view) => {
|
|
72
|
-
make.center.equalTo(view.super);
|
|
73
|
-
make.width.lessThanOrEqualTo(this._props.maxTotalWidth);
|
|
74
|
-
make.width.equalTo(view.super).priority(999);
|
|
75
|
-
make.height.equalTo(view.super);
|
|
76
|
-
}
|
|
77
|
-
: $layout.fill,
|
|
71
|
+
layout: $layout.fill,
|
|
78
72
|
events: Object.assign(Object.assign({}, _matrixEvents), { itemSize: sender => $size(this._itemSizeWidth, this._itemSizeHeight) })
|
|
79
73
|
});
|
|
80
74
|
this._defineView = () => {
|
|
@@ -88,7 +82,7 @@ class DynamicItemSizeMatrix extends base_1.Base {
|
|
|
88
82
|
events: {
|
|
89
83
|
layoutSubviews: sender => {
|
|
90
84
|
sender.relayout();
|
|
91
|
-
const { itemSizeWidth } = this._getColumnsAndItemSizeWidth(sender.frame.width, this._props.
|
|
85
|
+
const { itemSizeWidth } = this._getColumnsAndItemSizeWidth(sender.frame.width, this._props.minItemWidth, this._props.maxColumns, this._props.spacing);
|
|
92
86
|
this._itemSizeWidth = itemSizeWidth;
|
|
93
87
|
this._itemSizeHeight = this._events.itemHeight
|
|
94
88
|
? this._events.itemHeight(this._itemSizeWidth)
|
|
@@ -107,13 +101,16 @@ class DynamicItemSizeMatrix extends base_1.Base {
|
|
|
107
101
|
};
|
|
108
102
|
}
|
|
109
103
|
// 此为纯函数
|
|
110
|
-
_getColumnsAndItemSizeWidth(containerWidth,
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
104
|
+
_getColumnsAndItemSizeWidth(containerWidth, minItemWidth, maxColumns, spacing) {
|
|
105
|
+
if (minItemWidth > containerWidth - 2 * spacing) {
|
|
106
|
+
return {
|
|
107
|
+
columns: 1,
|
|
108
|
+
itemSizeWidth: containerWidth - 2 * spacing
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
const columns = Math.max(Math.min(Math.floor((containerWidth - spacing) / (minItemWidth + spacing)), maxColumns), 1 // 最少一列
|
|
115
112
|
);
|
|
116
|
-
const itemSizeWidth = Math.max(Math.floor((
|
|
113
|
+
const itemSizeWidth = Math.max(Math.floor((containerWidth - spacing * (columns + 1)) / columns), minItemWidth // 最小宽度
|
|
117
114
|
);
|
|
118
115
|
return {
|
|
119
116
|
columns,
|
|
@@ -121,7 +118,7 @@ class DynamicItemSizeMatrix extends base_1.Base {
|
|
|
121
118
|
};
|
|
122
119
|
}
|
|
123
120
|
heightToWidth(width) {
|
|
124
|
-
const { columns, itemSizeWidth } = this._getColumnsAndItemSizeWidth(width, this._props.
|
|
121
|
+
const { columns, itemSizeWidth } = this._getColumnsAndItemSizeWidth(width, this._props.minItemWidth, this._props.maxColumns, this._props.spacing);
|
|
125
122
|
const rows = Math.ceil(this._props.data.length / columns);
|
|
126
123
|
const itemSizeHeight = this._events.itemHeight
|
|
127
124
|
? this._events.itemHeight(itemSizeWidth)
|