jsbox-cview 1.6.4 → 1.6.6
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/components/dynamic-itemsize-section-matrix.ts +363 -0
- package/components/oc-webview.ts +50 -0
- package/dist/components/alert/input-alert.js +1 -2
- package/dist/components/alert/login-alert.js +1 -2
- package/dist/components/alert/plain-alert.js +1 -2
- package/dist/components/custom-navigation-bar.js +7 -1
- package/dist/components/dialogs/form-dialog.js +1 -2
- package/dist/components/dialogs/list-dialog.js +1 -2
- package/dist/components/dialogs/text-dialog.js +1 -2
- package/dist/components/dynamic-contextmenu-view.js +5 -1
- package/dist/components/dynamic-itemsize-matrix.js +17 -15
- package/dist/components/dynamic-itemsize-section-matrix.js +293 -0
- package/dist/components/dynamic-preference-listview.js +25 -16
- package/dist/components/dynamic-rowheight-list.js +10 -3
- package/dist/components/enhanced-imageview.js +1 -1
- package/dist/components/flowlayout.js +10 -13
- package/dist/components/image-pager.js +6 -1
- package/dist/components/oc-webview.js +37 -0
- package/dist/components/page-control.js +2 -13
- package/dist/components/pageviewer-titlebar.js +7 -13
- package/dist/components/pageviewer.js +4 -1
- package/dist/components/refresh-button.js +3 -4
- package/dist/components/rotating-view.js +10 -2
- package/dist/components/searchbar.js +8 -1
- package/dist/components/single-views.js +11 -4
- package/dist/components/spinners/loading-dual-ring.js +3 -12
- package/dist/components/spinners/loading-wedges.js +3 -12
- package/dist/components/spinners/spinner-androidstyle.js +7 -1
- package/dist/components/static-preference-listview.js +13 -10
- package/dist/components/symbol-button.js +8 -1
- package/dist/components/tabbar.js +8 -1
- package/dist/controller/pageviewer-controller.js +4 -1
- package/dist/controller/presented-page-controller.js +7 -9
- package/dist/controller/splitview-controller.js +23 -11
- package/dist/controller/tabbar-controller.js +13 -14
- package/dist/index.js +1 -0
- package/dist/test/dialog-sheet.js +3 -12
- package/dist/test/dynamic-itemsize-section-matrix.js +138 -0
- package/dist/test/form-dialog.js +3 -12
- package/dist/test/oc-webview.js +195 -0
- package/dist/test/refresh-button.js +3 -12
- package/dist/utils/l10n.js +1 -2
- package/dist/utils/path.js +8 -9
- package/dist/utils/rect.js +8 -9
- package/dist/utils/uitools.js +6 -6
- package/index.ts +1 -0
- package/package.json +4 -3
- package/test/dynamic-itemsize-section-matrix.ts +142 -0
- package/test/oc-webview.ts +197 -0
- package/tsconfig.json +1 -1
|
@@ -0,0 +1,293 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DynamicItemSizeSectionMatrix = void 0;
|
|
4
|
+
const uitools_1 = require("../utils/uitools");
|
|
5
|
+
const base_1 = require("./base");
|
|
6
|
+
const single_views_1 = require("./single-views");
|
|
7
|
+
function _getColumnsAndItemSizeWidth(containerWidth, minItemWidth, maxColumns, spacing) {
|
|
8
|
+
if (minItemWidth > containerWidth - 2 * spacing) {
|
|
9
|
+
return {
|
|
10
|
+
columns: 1,
|
|
11
|
+
itemSizeWidth: containerWidth - 2 * spacing,
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
const columns = Math.max(Math.min(Math.floor((containerWidth - spacing) / (minItemWidth + spacing)), maxColumns), 1);
|
|
15
|
+
const itemSizeWidth = Math.max(Math.floor((containerWidth - spacing * (columns + 1)) / columns), minItemWidth);
|
|
16
|
+
return {
|
|
17
|
+
columns,
|
|
18
|
+
itemSizeWidth,
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
function _getTextHeight(text, width) {
|
|
22
|
+
return (0, uitools_1.getTextHeight)(text, {
|
|
23
|
+
width,
|
|
24
|
+
font: $font(13),
|
|
25
|
+
inset: 0,
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* # CView Dynamic ItemSize Section Matrix
|
|
30
|
+
*
|
|
31
|
+
* 此组件是为了在 Dynamic ItemSize Matrix 的基础上添加 SectionTitle
|
|
32
|
+
*
|
|
33
|
+
* - 使用此组件必须在每个section中添加title,如果title为空字符串,依然添加高度35的空格(包含spacing)
|
|
34
|
+
* - sectionTitle的字体为font(13),左右边距为16(不含spacing),即总宽度为 totalWidth - 2 * spacing - 32
|
|
35
|
+
* - 由于它必然和底下的item会有spacing,所以不建议spacing设的太大,那样会很违和
|
|
36
|
+
* - sectionTitle会使得section之间的间隔增加自身的高度
|
|
37
|
+
* - matrix事件会自动调整indexPath,包括didSelect、didLongPress、forEachItem
|
|
38
|
+
* - matrix的方法都在该组件中重新实现,自动调整indexPath
|
|
39
|
+
* - 不支持matrix原有的重新排序、自动大小功能,为防止sectionTitle暴露,也不支持menu
|
|
40
|
+
* - 不支持Dynamic ItemSize Matrix的dynamicHeightEnabled、heightToWidth
|
|
41
|
+
*
|
|
42
|
+
* ## 动态调整 itemSize
|
|
43
|
+
*
|
|
44
|
+
* 动态的改变自己的 itemSize,从而使得 spacing 被优先满足。
|
|
45
|
+
* 思路为在 matrix 上层套一个 superView,在旋转的时候 superView 会调用 matrix.relayout()
|
|
46
|
+
* 和 matrix.reload(),从而触发 itemSize 事件
|
|
47
|
+
*
|
|
48
|
+
* 其排布逻辑是这样的:
|
|
49
|
+
*
|
|
50
|
+
* 1. 由 minItemWidth,spacing,maxColumns 这三个参数决定 cloumns,
|
|
51
|
+
* 并结合 totalWidth 确定 itemSize.width
|
|
52
|
+
* 2. 确定 itemHeight 有两种方法:
|
|
53
|
+
* - fixedItemHeight 固定高度,优先级第二
|
|
54
|
+
* - event: itemHeight(width) => height 通过 width 动态计算,优先级最高
|
|
55
|
+
* 3. 如果 minItemWidth 比 totalWidth - 2 * spacing 还要小,那么 itemSize.width
|
|
56
|
+
* 会被设定为 totalWidth - 2 * spacing,以保证item不会超出边框
|
|
57
|
+
*
|
|
58
|
+
* ## props:
|
|
59
|
+
*
|
|
60
|
+
* 可以使用 matrix 的全部属性。
|
|
61
|
+
*
|
|
62
|
+
* 但data的类型调整为:
|
|
63
|
+
* { title: string; items: Record<string, unknown>[] }
|
|
64
|
+
*
|
|
65
|
+
* 特殊属性:
|
|
66
|
+
*
|
|
67
|
+
* - fixedItemHeight 固定 itemSize 高度
|
|
68
|
+
* - minItemWidth 最小的 itemSize 宽度
|
|
69
|
+
* - maxColumns 最大列数
|
|
70
|
+
* - spacing
|
|
71
|
+
*
|
|
72
|
+
* events:
|
|
73
|
+
*
|
|
74
|
+
* 可以使用 matrix 除 itemSize 以外的全部事件
|
|
75
|
+
*
|
|
76
|
+
* 其他特殊事件:
|
|
77
|
+
*
|
|
78
|
+
* - itemHeight: width => height 通过 itemWidth 动态计算 itemHeight
|
|
79
|
+
*
|
|
80
|
+
*
|
|
81
|
+
* 方法:
|
|
82
|
+
* - get data
|
|
83
|
+
* - set data
|
|
84
|
+
* - reload(): void;
|
|
85
|
+
* - object(indexPath: NSIndexPath): any;
|
|
86
|
+
* - insert(args: { indexPath: NSIndexPath;value: any; } ): void;
|
|
87
|
+
* - delete(indexPathOrIndex: NSIndexPath | number): void;
|
|
88
|
+
* - cell(indexPath: NSIndexPath): AllUIView;
|
|
89
|
+
* - scrollTo(args: { indexPath: NSIndexPath; animated?: boolean }): void;
|
|
90
|
+
*/
|
|
91
|
+
class DynamicItemSizeSectionMatrix extends base_1.Base {
|
|
92
|
+
constructor({ props, layout, events, }) {
|
|
93
|
+
super();
|
|
94
|
+
this._totalWidth = 0;
|
|
95
|
+
this._columns = 1;
|
|
96
|
+
this._props = props;
|
|
97
|
+
this._data = this._props.data ?? [];
|
|
98
|
+
this._events = events;
|
|
99
|
+
this._itemSizeWidth = 0;
|
|
100
|
+
this._itemSizeHeight = 0;
|
|
101
|
+
this._fixedItemHeight = this._props.fixedItemHeight ?? 96;
|
|
102
|
+
this._minItemWidth = this._props.minItemWidth ?? 96;
|
|
103
|
+
this._maxColumns = this._props.maxColumns ?? 5;
|
|
104
|
+
this._spacing = this._props.spacing ?? 6;
|
|
105
|
+
const { itemHeight, didSelect, didLongPress, forEachItem, ...otherEvents } = this._events;
|
|
106
|
+
this.matrix = new single_views_1.Matrix({
|
|
107
|
+
props: {
|
|
108
|
+
...props,
|
|
109
|
+
data: this._mapData(this._data),
|
|
110
|
+
template: this._mapTemplate(props.template),
|
|
111
|
+
},
|
|
112
|
+
layout: $layout.fill,
|
|
113
|
+
events: {
|
|
114
|
+
...otherEvents,
|
|
115
|
+
itemSize: (_sender, indexPath) => {
|
|
116
|
+
if (this._totalWidth === 0) {
|
|
117
|
+
return $size(0, 0);
|
|
118
|
+
}
|
|
119
|
+
if (indexPath.item === 0) {
|
|
120
|
+
const width = Math.max(this._totalWidth - 2 * this._spacing, 32);
|
|
121
|
+
const textHeight = _getTextHeight(this._data[indexPath.section].title, width - 32);
|
|
122
|
+
const height = textHeight + 35 - this._spacing * (indexPath.section === 0 ? 1 : 2);
|
|
123
|
+
return $size(width, height);
|
|
124
|
+
}
|
|
125
|
+
else {
|
|
126
|
+
return $size(this._itemSizeWidth, this._itemSizeHeight);
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
didSelect: didSelect
|
|
130
|
+
? (sender, indexPath) => {
|
|
131
|
+
if (indexPath.item === 0) {
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
else {
|
|
135
|
+
didSelect(sender, $indexPath(indexPath.section, indexPath.item - 1), this._data[indexPath.section].items[indexPath.item - 1]);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
: undefined,
|
|
139
|
+
didLongPress: didLongPress
|
|
140
|
+
? (sender, indexPath) => {
|
|
141
|
+
if (indexPath.item === 0) {
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
else {
|
|
145
|
+
didLongPress(sender, $indexPath(indexPath.section, indexPath.item - 1), this._data[indexPath.section].items[indexPath.item - 1]);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
: undefined,
|
|
149
|
+
forEachItem: forEachItem
|
|
150
|
+
? (sender, indexPath) => {
|
|
151
|
+
if (indexPath.item === 0) {
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
forEachItem(sender, $indexPath(indexPath.section, indexPath.item - 1));
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
: undefined,
|
|
159
|
+
},
|
|
160
|
+
});
|
|
161
|
+
this._defineView = () => {
|
|
162
|
+
return {
|
|
163
|
+
type: "view",
|
|
164
|
+
props: {
|
|
165
|
+
id: this.id,
|
|
166
|
+
bgcolor: $color("clear"),
|
|
167
|
+
},
|
|
168
|
+
layout,
|
|
169
|
+
views: [this.matrix.definition],
|
|
170
|
+
events: {
|
|
171
|
+
layoutSubviews: (sender) => {
|
|
172
|
+
sender.relayout();
|
|
173
|
+
if (sender.frame.width === this._totalWidth)
|
|
174
|
+
return;
|
|
175
|
+
this._totalWidth = sender.frame.width;
|
|
176
|
+
const { columns, itemSizeWidth } = _getColumnsAndItemSizeWidth(this._totalWidth, this._minItemWidth, this._maxColumns, this._spacing);
|
|
177
|
+
this._columns = columns;
|
|
178
|
+
this._itemSizeWidth = itemSizeWidth;
|
|
179
|
+
this._itemSizeHeight = this._events.itemHeight
|
|
180
|
+
? this._events.itemHeight(this._itemSizeWidth)
|
|
181
|
+
: this._fixedItemHeight;
|
|
182
|
+
this.matrix.view.reload();
|
|
183
|
+
},
|
|
184
|
+
},
|
|
185
|
+
};
|
|
186
|
+
};
|
|
187
|
+
}
|
|
188
|
+
_mapData(data) {
|
|
189
|
+
return data.map((n) => {
|
|
190
|
+
const mappedItems = n.items.map((n) => {
|
|
191
|
+
return {
|
|
192
|
+
__section_title__: { hidden: true },
|
|
193
|
+
__original_template__: { hidden: false },
|
|
194
|
+
...n,
|
|
195
|
+
};
|
|
196
|
+
});
|
|
197
|
+
return {
|
|
198
|
+
title: "",
|
|
199
|
+
items: [
|
|
200
|
+
{
|
|
201
|
+
__section_title__: { hidden: false },
|
|
202
|
+
__section_title_label__: { text: n.title },
|
|
203
|
+
__original_template__: { hidden: true },
|
|
204
|
+
},
|
|
205
|
+
...mappedItems,
|
|
206
|
+
],
|
|
207
|
+
};
|
|
208
|
+
});
|
|
209
|
+
}
|
|
210
|
+
_mapTemplate(template) {
|
|
211
|
+
if (!template)
|
|
212
|
+
return;
|
|
213
|
+
const newTemplate = {
|
|
214
|
+
views: [
|
|
215
|
+
{
|
|
216
|
+
type: "view",
|
|
217
|
+
props: {
|
|
218
|
+
id: "__section_title__",
|
|
219
|
+
},
|
|
220
|
+
layout: $layout.fill,
|
|
221
|
+
views: [
|
|
222
|
+
{
|
|
223
|
+
// 在这里放一个透明且无效果的button,从而取消item自己的highlight效果
|
|
224
|
+
type: "button",
|
|
225
|
+
props: {
|
|
226
|
+
bgcolor: $color("clear"),
|
|
227
|
+
},
|
|
228
|
+
layout: $layout.fill,
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
type: "label",
|
|
232
|
+
props: {
|
|
233
|
+
id: "__section_title_label__",
|
|
234
|
+
bgcolor: $color("clear"),
|
|
235
|
+
font: $font(13),
|
|
236
|
+
textColor: $color("secondaryText"),
|
|
237
|
+
lines: 0,
|
|
238
|
+
},
|
|
239
|
+
layout: (make, view) => {
|
|
240
|
+
make.left.right.inset(16);
|
|
241
|
+
make.bottom.inset(0);
|
|
242
|
+
},
|
|
243
|
+
},
|
|
244
|
+
],
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
type: "view",
|
|
248
|
+
props: {
|
|
249
|
+
...template.props,
|
|
250
|
+
id: "__original_template__",
|
|
251
|
+
},
|
|
252
|
+
layout: $layout.fill,
|
|
253
|
+
views: template.views,
|
|
254
|
+
},
|
|
255
|
+
],
|
|
256
|
+
};
|
|
257
|
+
return newTemplate;
|
|
258
|
+
}
|
|
259
|
+
get data() {
|
|
260
|
+
return this._data;
|
|
261
|
+
}
|
|
262
|
+
set data(data) {
|
|
263
|
+
this._data = data;
|
|
264
|
+
this.matrix.view.data = this._mapData(data);
|
|
265
|
+
this.reload();
|
|
266
|
+
}
|
|
267
|
+
reload() {
|
|
268
|
+
this.matrix.view.reload();
|
|
269
|
+
}
|
|
270
|
+
object(indexPath) {
|
|
271
|
+
return this._data?.[indexPath.section]?.items[indexPath.item];
|
|
272
|
+
}
|
|
273
|
+
insert({ indexPath, value }) {
|
|
274
|
+
this._data?.[indexPath.section]?.items.splice(indexPath.item, 0, value);
|
|
275
|
+
this.matrix.view.data = this._mapData(this._data);
|
|
276
|
+
this.reload();
|
|
277
|
+
}
|
|
278
|
+
delete(indexPath) {
|
|
279
|
+
this._data?.[indexPath.section]?.items.splice(indexPath.item, 1);
|
|
280
|
+
this.matrix.view.data = this._mapData(this._data);
|
|
281
|
+
this.reload();
|
|
282
|
+
}
|
|
283
|
+
cell(indexPath) {
|
|
284
|
+
return this.matrix.view.cell($indexPath(indexPath.section, indexPath.item + 1));
|
|
285
|
+
}
|
|
286
|
+
scrollTo({ indexPath, animated }) {
|
|
287
|
+
this.matrix.view.scrollTo({
|
|
288
|
+
indexPath: $indexPath(indexPath.section, indexPath.item + 1),
|
|
289
|
+
animated,
|
|
290
|
+
});
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
exports.DynamicItemSizeSectionMatrix = DynamicItemSizeSectionMatrix;
|
|
@@ -36,14 +36,25 @@ class DynamicPreferenceListView extends base_1.Base {
|
|
|
36
36
|
super();
|
|
37
37
|
this._sections = sections.map((n) => ({
|
|
38
38
|
title: n.title,
|
|
39
|
-
rows: n.rows.map((r) => (
|
|
39
|
+
rows: n.rows.map((r) => ({ ...r })),
|
|
40
40
|
}));
|
|
41
|
-
this._props =
|
|
41
|
+
this._props = {
|
|
42
|
+
stringLeftInset: 120,
|
|
43
|
+
infoAndLinkLeftInset: 120,
|
|
44
|
+
sliderWidth: 200,
|
|
45
|
+
tabWidth: 200,
|
|
46
|
+
symbolSizeForSymbolAction: $size(24, 24),
|
|
47
|
+
...props,
|
|
48
|
+
};
|
|
42
49
|
this._layout = layout;
|
|
43
50
|
this._defineView = () => {
|
|
44
51
|
return {
|
|
45
52
|
type: "list",
|
|
46
|
-
props:
|
|
53
|
+
props: {
|
|
54
|
+
style: 2,
|
|
55
|
+
...this._props,
|
|
56
|
+
id: this.id,
|
|
57
|
+
template: {
|
|
47
58
|
views: [
|
|
48
59
|
{
|
|
49
60
|
type: "view",
|
|
@@ -169,17 +180,15 @@ class DynamicPreferenceListView extends base_1.Base {
|
|
|
169
180
|
},
|
|
170
181
|
events: {
|
|
171
182
|
changed: (sender) => {
|
|
172
|
-
var _a;
|
|
173
183
|
const { section, row } = sender.info;
|
|
174
184
|
const options = this._sections[section].rows[row];
|
|
175
185
|
const label = sender.next;
|
|
176
|
-
label.text = this._handleSliderValue(sender.value * (
|
|
186
|
+
label.text = this._handleSliderValue(sender.value * (options.max ?? 1), options.decimal, options.min, options.max).toString();
|
|
177
187
|
},
|
|
178
188
|
touchesEnded: (sender) => {
|
|
179
|
-
var _a;
|
|
180
189
|
const { section, row } = sender.info;
|
|
181
190
|
const options = this._sections[section].rows[row];
|
|
182
|
-
this._sections[section].rows[row].value = this._handleSliderValue(sender.value * (
|
|
191
|
+
this._sections[section].rows[row].value = this._handleSliderValue(sender.value * (options.max ?? 1), options.decimal, options.min, options.max);
|
|
183
192
|
if (events.changed)
|
|
184
193
|
events.changed(this.values);
|
|
185
194
|
},
|
|
@@ -263,11 +272,12 @@ class DynamicPreferenceListView extends base_1.Base {
|
|
|
263
272
|
],
|
|
264
273
|
},
|
|
265
274
|
],
|
|
266
|
-
},
|
|
275
|
+
},
|
|
276
|
+
data: this._map(this._sections),
|
|
277
|
+
},
|
|
267
278
|
layout: this._layout,
|
|
268
279
|
events: {
|
|
269
280
|
didSelect: (sender, indexPath, data) => {
|
|
270
|
-
var _a, _b;
|
|
271
281
|
const row = this._sections[indexPath.section].rows[indexPath.row];
|
|
272
282
|
if (!static_preference_listview_1.selectableTypes.includes(row.type))
|
|
273
283
|
return;
|
|
@@ -288,7 +298,7 @@ class DynamicPreferenceListView extends base_1.Base {
|
|
|
288
298
|
}
|
|
289
299
|
case "number": {
|
|
290
300
|
$input.text({
|
|
291
|
-
text:
|
|
301
|
+
text: row.value?.toString(),
|
|
292
302
|
type: $kbType.decimal,
|
|
293
303
|
placeholder: row.placeholder,
|
|
294
304
|
handler: (text) => {
|
|
@@ -309,7 +319,7 @@ class DynamicPreferenceListView extends base_1.Base {
|
|
|
309
319
|
}
|
|
310
320
|
case "integer": {
|
|
311
321
|
$input.text({
|
|
312
|
-
text:
|
|
322
|
+
text: row.value?.toString(),
|
|
313
323
|
type: $kbType.number,
|
|
314
324
|
placeholder: row.placeholder,
|
|
315
325
|
handler: (text) => {
|
|
@@ -472,7 +482,6 @@ class DynamicPreferenceListView extends base_1.Base {
|
|
|
472
482
|
return sections.map((section, sectionIndex) => ({
|
|
473
483
|
title: section.title,
|
|
474
484
|
rows: section.rows.map((n, rowIndex) => {
|
|
475
|
-
var _a, _b, _c;
|
|
476
485
|
const data = generateDefaultRow(n);
|
|
477
486
|
switch (n.type) {
|
|
478
487
|
case "string": {
|
|
@@ -531,7 +540,7 @@ class DynamicPreferenceListView extends base_1.Base {
|
|
|
531
540
|
text: adjustedValue,
|
|
532
541
|
};
|
|
533
542
|
data.slider = {
|
|
534
|
-
value: adjustedValue / (
|
|
543
|
+
value: adjustedValue / (n.max ?? 1),
|
|
535
544
|
info: { section: sectionIndex, row: rowIndex, key: n.key },
|
|
536
545
|
//min: n.min, // 不可用,否则会出现slider滑动结束变为0点的bug
|
|
537
546
|
//max: n.max,
|
|
@@ -594,8 +603,8 @@ class DynamicPreferenceListView extends base_1.Base {
|
|
|
594
603
|
data.symbol = {
|
|
595
604
|
hidden: n.symbol ? false : true,
|
|
596
605
|
symbol: n.symbol,
|
|
597
|
-
tintColor:
|
|
598
|
-
contentMode:
|
|
606
|
+
tintColor: n.tintColor ?? $color("primaryText"),
|
|
607
|
+
contentMode: n.contentMode ?? 1,
|
|
599
608
|
};
|
|
600
609
|
break;
|
|
601
610
|
}
|
|
@@ -616,7 +625,7 @@ class DynamicPreferenceListView extends base_1.Base {
|
|
|
616
625
|
set sections(sections) {
|
|
617
626
|
this._sections = sections.map((n) => ({
|
|
618
627
|
title: n.title,
|
|
619
|
-
rows: n.rows.map((r) => (
|
|
628
|
+
rows: n.rows.map((r) => ({ ...r })),
|
|
620
629
|
}));
|
|
621
630
|
this.view.data = this._map(this._sections);
|
|
622
631
|
}
|
|
@@ -37,9 +37,14 @@ class DynamicRowHeightList extends base_1.Base {
|
|
|
37
37
|
}
|
|
38
38
|
return {
|
|
39
39
|
type: "list",
|
|
40
|
-
props:
|
|
40
|
+
props: {
|
|
41
|
+
id: this.id,
|
|
42
|
+
data,
|
|
43
|
+
...props,
|
|
44
|
+
},
|
|
41
45
|
layout,
|
|
42
|
-
events:
|
|
46
|
+
events: {
|
|
47
|
+
rowHeight: (sender, indexPath) => {
|
|
43
48
|
if (sections) {
|
|
44
49
|
const cview = sections[indexPath.section].rows[indexPath.row];
|
|
45
50
|
return cview.heightToWidth(sender.frame.width);
|
|
@@ -50,7 +55,9 @@ class DynamicRowHeightList extends base_1.Base {
|
|
|
50
55
|
else {
|
|
51
56
|
throw new Error("sections or rows must be provided");
|
|
52
57
|
}
|
|
53
|
-
}
|
|
58
|
+
},
|
|
59
|
+
...events,
|
|
60
|
+
},
|
|
54
61
|
};
|
|
55
62
|
};
|
|
56
63
|
}
|
|
@@ -25,7 +25,7 @@ const cvid_1 = require("../utils/cvid");
|
|
|
25
25
|
class EnhancedImageView extends base_1.Base {
|
|
26
26
|
constructor({ props, layout, events = {}, }) {
|
|
27
27
|
super();
|
|
28
|
-
this._props =
|
|
28
|
+
this._props = { maxZoomScale: 2, ...props };
|
|
29
29
|
this._scroll = new single_views_1.Scroll({
|
|
30
30
|
props: {
|
|
31
31
|
zoomEnabled: true,
|
|
@@ -41,8 +41,8 @@ class Flowlayout extends base_1.Base {
|
|
|
41
41
|
this._wrappers = props.items.map((item, index) => new WrapperView({
|
|
42
42
|
item,
|
|
43
43
|
menu: props.menu,
|
|
44
|
-
didSelect: events
|
|
45
|
-
didLongPress: events
|
|
44
|
+
didSelect: events?.didSelect,
|
|
45
|
+
didLongPress: events?.didLongPress,
|
|
46
46
|
flowlayout: this,
|
|
47
47
|
index,
|
|
48
48
|
}));
|
|
@@ -74,17 +74,14 @@ class Flowlayout extends base_1.Base {
|
|
|
74
74
|
}
|
|
75
75
|
set items(items) {
|
|
76
76
|
this._props.items = items;
|
|
77
|
-
this._wrappers = items.map((item, index) => {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
index,
|
|
86
|
-
});
|
|
87
|
-
});
|
|
77
|
+
this._wrappers = items.map((item, index) => new WrapperView({
|
|
78
|
+
item,
|
|
79
|
+
menu: this._props.menu,
|
|
80
|
+
didSelect: this._events?.didSelect,
|
|
81
|
+
didLongPress: this._events?.didLongPress,
|
|
82
|
+
flowlayout: this,
|
|
83
|
+
index,
|
|
84
|
+
}));
|
|
88
85
|
this.view.views.forEach((v) => v.remove());
|
|
89
86
|
this._wrappers.forEach((wrapper) => this.view.add(wrapper.definition));
|
|
90
87
|
const height = this._layoutWrappers();
|
|
@@ -24,7 +24,12 @@ class ImagePager extends base_1.Base {
|
|
|
24
24
|
*/
|
|
25
25
|
constructor({ props, layout, events = {}, }) {
|
|
26
26
|
super();
|
|
27
|
-
this._props =
|
|
27
|
+
this._props = {
|
|
28
|
+
srcs: [],
|
|
29
|
+
page: 0,
|
|
30
|
+
doubleTapToZoom: true,
|
|
31
|
+
...props,
|
|
32
|
+
};
|
|
28
33
|
this._pageLoadRecorder = {};
|
|
29
34
|
this._matrix = new single_views_1.Matrix({
|
|
30
35
|
props: {
|
|
@@ -31,6 +31,7 @@ const base_1 = require("./base");
|
|
|
31
31
|
* - goForward()
|
|
32
32
|
* - stopLoading()
|
|
33
33
|
* - reload()
|
|
34
|
+
* - evaluateJavaScript(script)
|
|
34
35
|
*
|
|
35
36
|
*/
|
|
36
37
|
class OCWebView extends base_1.Base {
|
|
@@ -41,6 +42,7 @@ class OCWebView extends base_1.Base {
|
|
|
41
42
|
config.invoke("setWebsiteDataStore:", $objc("WKWebsiteDataStore").invoke("defaultDataStore"));
|
|
42
43
|
const webView = $objc("WKWebView").invoke("alloc.initWithFrame:configuration:", $rect(0, 0, 0, 0), config);
|
|
43
44
|
this.webView = webView;
|
|
45
|
+
this._originUrl = props.url;
|
|
44
46
|
this._defineView = () => {
|
|
45
47
|
return {
|
|
46
48
|
type: "runtime",
|
|
@@ -84,6 +86,15 @@ class OCWebView extends base_1.Base {
|
|
|
84
86
|
const nsurl = this.webView.invoke("URL");
|
|
85
87
|
return nsurl ? nsurl.invoke("absoluteString").rawValue() : "";
|
|
86
88
|
}
|
|
89
|
+
set url(urlStr) {
|
|
90
|
+
const url = $objc("NSURL").invoke("URLWithString:", urlStr);
|
|
91
|
+
const req = $objc("NSURLRequest").invoke("requestWithURL:", url);
|
|
92
|
+
this.webView.invoke("loadRequest:", req);
|
|
93
|
+
}
|
|
94
|
+
get title() {
|
|
95
|
+
const title = this.webView.invoke("title");
|
|
96
|
+
return title ? title.rawValue() : "";
|
|
97
|
+
}
|
|
87
98
|
get canGoBack() {
|
|
88
99
|
return this.webView.invoke("canGoBack");
|
|
89
100
|
}
|
|
@@ -104,5 +115,31 @@ class OCWebView extends base_1.Base {
|
|
|
104
115
|
reload() {
|
|
105
116
|
this.webView.invoke("reload");
|
|
106
117
|
}
|
|
118
|
+
reloadFromOrigin() {
|
|
119
|
+
this.url = this._originUrl;
|
|
120
|
+
}
|
|
121
|
+
exec(script) {
|
|
122
|
+
return new Promise((resolve, reject) => {
|
|
123
|
+
this.webView.invoke("evaluateJavaScript:completionHandler:", script, $block("void, id, NSError *", (result, error) => {
|
|
124
|
+
const jsError = error ? error.jsValue() : null;
|
|
125
|
+
if (jsError) {
|
|
126
|
+
reject(jsError);
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
if (!result) {
|
|
130
|
+
resolve(result);
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
if (typeof result.jsValue === "function") {
|
|
134
|
+
resolve(result.jsValue());
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
resolve(result);
|
|
138
|
+
}));
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
eval({ script, handler }) {
|
|
142
|
+
this.exec(script).then((result) => handler(result), (error) => handler(undefined, error));
|
|
143
|
+
}
|
|
107
144
|
}
|
|
108
145
|
exports.OCWebView = OCWebView;
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
3
|
exports.PageControl = void 0;
|
|
15
4
|
const single_views_1 = require("./single-views");
|
|
@@ -36,8 +25,8 @@ class PageControl extends single_views_1.Runtime {
|
|
|
36
25
|
*
|
|
37
26
|
*/
|
|
38
27
|
constructor({ props, layout, events = {}, }) {
|
|
39
|
-
const { numberOfPages = 3, currentPage = 0, pageIndicatorTintColor, currentPageIndicatorTintColor
|
|
40
|
-
const { changed
|
|
28
|
+
const { numberOfPages = 3, currentPage = 0, pageIndicatorTintColor, currentPageIndicatorTintColor, ...restProps } = props;
|
|
29
|
+
const { changed, ...restEvents } = events;
|
|
41
30
|
super({ props: restProps, layout, events: restEvents });
|
|
42
31
|
this._numberOfPages = numberOfPages;
|
|
43
32
|
this._currentPage = currentPage;
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
3
|
exports.PageViewerTitleBar = void 0;
|
|
15
4
|
const base_1 = require("./base");
|
|
@@ -38,8 +27,13 @@ class PageViewerTitleBar extends base_1.Base {
|
|
|
38
27
|
*/
|
|
39
28
|
constructor({ props, layout, events = {}, }) {
|
|
40
29
|
super();
|
|
41
|
-
this._props =
|
|
42
|
-
|
|
30
|
+
this._props = {
|
|
31
|
+
index: 0,
|
|
32
|
+
selectedItemColor: $color("systemLink"),
|
|
33
|
+
defaultItemColor: $color("secondaryText"),
|
|
34
|
+
...props,
|
|
35
|
+
};
|
|
36
|
+
const { changed, ...restEvents } = events;
|
|
43
37
|
this._floatedIndex = this._props.index;
|
|
44
38
|
this._lineStartLocationPercentage = this._floatedIndex / this._props.items.length;
|
|
45
39
|
this.labels = this._props.items.map((n, i) => {
|
|
@@ -23,7 +23,10 @@ class PageViewer extends base_1.Base {
|
|
|
23
23
|
*/
|
|
24
24
|
constructor({ props, layout, events = {}, }) {
|
|
25
25
|
super();
|
|
26
|
-
this._props =
|
|
26
|
+
this._props = {
|
|
27
|
+
page: 0,
|
|
28
|
+
...props,
|
|
29
|
+
};
|
|
27
30
|
this._events = events;
|
|
28
31
|
this._pageWidth = 0;
|
|
29
32
|
this._floatPage = this._props.page;
|
|
@@ -17,14 +17,13 @@ class RefreshButton extends base_1.Base {
|
|
|
17
17
|
this._loading = false;
|
|
18
18
|
this._layout = layout;
|
|
19
19
|
this._defineView = () => {
|
|
20
|
-
var _a, _b, _c;
|
|
21
20
|
return {
|
|
22
21
|
type: "button",
|
|
23
22
|
props: {
|
|
24
23
|
id: this.id,
|
|
25
24
|
bgcolor: $color("clear"),
|
|
26
|
-
enabled:
|
|
27
|
-
hidden:
|
|
25
|
+
enabled: props?.enabled ?? true,
|
|
26
|
+
hidden: props?.hidden ?? false,
|
|
28
27
|
},
|
|
29
28
|
layout: this._layout,
|
|
30
29
|
events,
|
|
@@ -34,7 +33,7 @@ class RefreshButton extends base_1.Base {
|
|
|
34
33
|
props: {
|
|
35
34
|
id: this.id + "_image",
|
|
36
35
|
symbol: "arrow.clockwise",
|
|
37
|
-
tintColor:
|
|
36
|
+
tintColor: props?.tintColor ?? $color("primaryText"),
|
|
38
37
|
contentMode: 1,
|
|
39
38
|
hidden: this._loading,
|
|
40
39
|
},
|