jsbox-cview 1.4.0 → 1.4.2

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.
Files changed (3) hide show
  1. package/components/dynamic-itemsize-matrix.ts +13 -18
  2. package/dist/components/dynamic-itemsize-matrix.js +17 -17
  3. package/package.json +1 -1
package/components/dynamic-itemsize-matrix.ts CHANGED
@@ -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
  *
@@ -70,6 +70,7 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
70
70
  private _events: DynamicItemSizeMatrixEvents;
71
71
  private _itemSizeWidth: number;
72
72
  private _itemSizeHeight: number;
73
+ private _totalWidth: number = 0;
73
74
  matrix: Matrix;
74
75
  _defineView: () => UiTypes.ViewOptions;
75
76
 
@@ -85,7 +86,7 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
85
86
  minItemWidth: 96,
86
87
  maxColumns: 5,
87
88
  spacing: 6,
88
- maxTotalWidth: 0,
89
+ dynamicHeightEnabled: false,
89
90
  ...props
90
91
  };
91
92
  this._events = events;
@@ -98,14 +99,7 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
98
99
  ...this._props,
99
100
  scrollEnabled: !this._props.dynamicHeightEnabled
100
101
  },
101
- layout: this._props.maxTotalWidth
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,
102
+ layout: $layout.fill,
109
103
  events: {
110
104
  ..._matrixEvents,
111
105
  itemSize: sender => $size(this._itemSizeWidth, this._itemSizeHeight)
@@ -122,9 +116,9 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
122
116
  events: {
123
117
  layoutSubviews: sender => {
124
118
  sender.relayout();
119
+ if (sender.frame.width === this._totalWidth) return;
125
120
  const { itemSizeWidth } = this._getColumnsAndItemSizeWidth(
126
121
  sender.frame.width,
127
- this._props.maxTotalWidth,
128
122
  this._props.minItemWidth,
129
123
  this._props.maxColumns,
130
124
  this._props.spacing
@@ -151,23 +145,25 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
151
145
  // 此为纯函数
152
146
  _getColumnsAndItemSizeWidth(
153
147
  containerWidth: number,
154
- maxTotalWidth: number,
155
148
  minItemWidth: number,
156
149
  maxColumns: number,
157
150
  spacing: number
158
151
  ) {
159
- const totalWidth = maxTotalWidth
160
- ? Math.min(maxTotalWidth, containerWidth)
161
- : containerWidth;
152
+ if (minItemWidth > containerWidth - 2 * spacing) {
153
+ return {
154
+ columns: 1,
155
+ itemSizeWidth: containerWidth - 2 * spacing
156
+ };
157
+ }
162
158
  const columns = Math.max(
163
159
  Math.min(
164
- Math.floor((totalWidth - spacing) / (minItemWidth + spacing)),
160
+ Math.floor((containerWidth - spacing) / (minItemWidth + spacing)),
165
161
  maxColumns
166
162
  ),
167
163
  1 // 最少一列
168
164
  );
169
165
  const itemSizeWidth = Math.max(
170
- Math.floor((totalWidth - spacing * (columns + 1)) / columns),
166
+ Math.floor((containerWidth - spacing * (columns + 1)) / columns),
171
167
  minItemWidth // 最小宽度
172
168
  )
173
169
  return {
@@ -179,7 +175,6 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
179
175
  heightToWidth(width: number) {
180
176
  const { columns, itemSizeWidth } = this._getColumnsAndItemSizeWidth(
181
177
  width,
182
- this._props.maxTotalWidth,
183
178
  this._props.minItemWidth,
184
179
  this._props.maxColumns,
185
180
  this._props.spacing
package/dist/components/dynamic-itemsize-matrix.js CHANGED
@@ -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,8 @@ 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, maxTotalWidth: 0 }, props);
63
+ this._totalWidth = 0;
64
+ this._props = Object.assign({ fixedItemHeight: 40, minItemWidth: 96, maxColumns: 5, spacing: 6, dynamicHeightEnabled: false }, props);
63
65
  this._events = events;
64
66
  const _a = this._events, { itemHeight, heightChanged } = _a, rest = __rest(_a, ["itemHeight", "heightChanged"]);
65
67
  const _matrixEvents = rest;
@@ -67,14 +69,7 @@ class DynamicItemSizeMatrix extends base_1.Base {
67
69
  this._itemSizeHeight = 0;
68
70
  this.matrix = new single_views_1.Matrix({
69
71
  props: Object.assign(Object.assign({}, this._props), { scrollEnabled: !this._props.dynamicHeightEnabled }),
70
- layout: this._props.maxTotalWidth
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,
72
+ layout: $layout.fill,
78
73
  events: Object.assign(Object.assign({}, _matrixEvents), { itemSize: sender => $size(this._itemSizeWidth, this._itemSizeHeight) })
79
74
  });
80
75
  this._defineView = () => {
@@ -88,7 +83,9 @@ class DynamicItemSizeMatrix extends base_1.Base {
88
83
  events: {
89
84
  layoutSubviews: sender => {
90
85
  sender.relayout();
91
- const { itemSizeWidth } = this._getColumnsAndItemSizeWidth(sender.frame.width, this._props.maxTotalWidth, this._props.minItemWidth, this._props.maxColumns, this._props.spacing);
86
+ if (sender.frame.width === this._totalWidth)
87
+ return;
88
+ const { itemSizeWidth } = this._getColumnsAndItemSizeWidth(sender.frame.width, this._props.minItemWidth, this._props.maxColumns, this._props.spacing);
92
89
  this._itemSizeWidth = itemSizeWidth;
93
90
  this._itemSizeHeight = this._events.itemHeight
94
91
  ? this._events.itemHeight(this._itemSizeWidth)
@@ -107,13 +104,16 @@ class DynamicItemSizeMatrix extends base_1.Base {
107
104
  };
108
105
  }
109
106
  // 此为纯函数
110
- _getColumnsAndItemSizeWidth(containerWidth, maxTotalWidth, minItemWidth, maxColumns, spacing) {
111
- const totalWidth = maxTotalWidth
112
- ? Math.min(maxTotalWidth, containerWidth)
113
- : containerWidth;
114
- const columns = Math.max(Math.min(Math.floor((totalWidth - spacing) / (minItemWidth + spacing)), maxColumns), 1 // 最少一列
107
+ _getColumnsAndItemSizeWidth(containerWidth, minItemWidth, maxColumns, spacing) {
108
+ if (minItemWidth > containerWidth - 2 * spacing) {
109
+ return {
110
+ columns: 1,
111
+ itemSizeWidth: containerWidth - 2 * spacing
112
+ };
113
+ }
114
+ const columns = Math.max(Math.min(Math.floor((containerWidth - spacing) / (minItemWidth + spacing)), maxColumns), 1 // 最少一列
115
115
  );
116
- const itemSizeWidth = Math.max(Math.floor((totalWidth - spacing * (columns + 1)) / columns), minItemWidth // 最小宽度
116
+ const itemSizeWidth = Math.max(Math.floor((containerWidth - spacing * (columns + 1)) / columns), minItemWidth // 最小宽度
117
117
  );
118
118
  return {
119
119
  columns,
@@ -121,7 +121,7 @@ class DynamicItemSizeMatrix extends base_1.Base {
121
121
  };
122
122
  }
123
123
  heightToWidth(width) {
124
- const { columns, itemSizeWidth } = this._getColumnsAndItemSizeWidth(width, this._props.maxTotalWidth, this._props.minItemWidth, this._props.maxColumns, this._props.spacing);
124
+ const { columns, itemSizeWidth } = this._getColumnsAndItemSizeWidth(width, this._props.minItemWidth, this._props.maxColumns, this._props.spacing);
125
125
  const rows = Math.ceil(this._props.data.length / columns);
126
126
  const itemSizeHeight = this._events.itemHeight
127
127
  ? this._events.itemHeight(itemSizeWidth)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jsbox-cview",
3
- "version": "1.4.0",
3
+ "version": "1.4.2",
4
4
  "description": "为 JSBox 设计的微型框架",
5
5
  "repository": {
6
6
  "type": "git",