Skip to content

Commit d3c39c1

Browse files
author
Alexander Vakrilov
authored
feat(GridLayout): Add synonym property column[Span] for col[Span] in GridLayout (#7641)
* add column synonym for col property grid layout * refactoring * refactor: implement column proxy props * test: add tests for column and columnSpan props
1 parent a569bb2 commit d3c39c1

7 files changed

Lines changed: 145 additions & 3 deletions

File tree

‎e2e/ui-tests-app/app/layouts/grid-7295-page.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import * as model from "./myview";
2+
import { Button } from "tns-core-modules/ui/button";
3+
import { Page } from "tns-core-modules/ui/page";
4+
import { GridLayout, ItemSpec } from "tns-core-modules/ui/layouts/grid-layout";
5+
6+
export function onLoaded(args: { eventName: string, object: any }) {
7+
var page = <Page>args.object;
8+
page.bindingContext = new model.ViewModel();
9+
}
10+
11+
export function onAddRowColumn(args: { eventName: string, object: any }) {
12+
13+
var layout = <GridLayout>args.object.parent.parent;
14+
var row = new ItemSpec(1, "auto");
15+
var column = new ItemSpec(1, "auto");
16+
17+
layout.addRow(row);
18+
layout.addColumn(column);
19+
20+
var btn0 = new Button();
21+
var btn1 = new Button();
22+
btn0.id = "b0";
23+
btn1.id = "b1";
24+
btn0.text = "b0";
25+
btn1.text = "b1";
26+
layout.addChild(btn0);
27+
layout.addChild(btn1);
28+
GridLayout.setRow(btn0, 0);
29+
GridLayout.setColumn(btn0, 4);
30+
GridLayout.setRow(btn1, 4);
31+
GridLayout.setColumn(btn1, 0);
32+
GridLayout.setColumnSpan(btn1, 2);
33+
GridLayout.setRowSpan(btn0, 3);
34+
}
35+
36+
export function onRemoveRowColumn(args: { eventName: string, object: any }) {
37+
var layout = <GridLayout>args.object.parent.parent;
38+
var itemSpecs, count;
39+
itemSpecs = layout.getRows();
40+
count = itemSpecs.length;
41+
layout.removeRow(itemSpecs[count - 1]);
42+
itemSpecs = layout.getColumns();
43+
count = itemSpecs.length;
44+
layout.removeColumn(itemSpecs[count - 1]);
45+
}

‎e2e/ui-tests-app/app/layouts/grid-7295-page.xml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<Page loaded="onLoaded">
2+
<GridLayout rows="auto, 100, *, 50" columns="auto, 60, *, 40">
3+
<!-- View Properties -->
4+
<Button text="wh" tap="{{ onWidthHeight }}" id="widthHeight" automationText="widthHeight" style="background-color: lightblue;" />
5+
<Button text="n" tap="{{ onMinWidthMinHeight }}" column="1" id="minWidthMinHeight" automationText="minWidthMinHeight" style="background-color: lightblue;" />
6+
<Button text="m" tap="{{ onMargins }}" column="2" id="margins" automationText="margins" style="background-color: lightblue;" />
7+
<Button text="a" tap="{{ onAlignments }}" row="1" id="alignments" automationText="alignments" style="background-color: lightblue;" />
8+
<Button text="c" tap="{{ onCollapse }}" row="1" column="1" id="collapse" automationText="collapse" style="background-color: lightblue;" />
9+
<Button text="v" tap="{{ onVisibile }}" row="1" column="2" id="visible" automationText="visible" style="background-color: lightblue;" />
10+
<!-- Layout Properties -->
11+
<Button text="p" tap="{{ onPaddings }}" row="2" id="paddings" automationText="paddings" style="background-color: lightgray;" />
12+
<Button text="all" tap="{{ onAllProperties }}" row="2" column="1" id="allProperties" automationText="allProperties" style="background-color: aquamarine;" />
13+
<StackLayout row="2" column="2">
14+
<Button text="1" tap="onAddRowColumn" id="addRowColumn" automationText="addRowColumn" style="background-color: lightgreen;" />
15+
<Button text="0" tap="onRemoveRowColumn" id="removeRowColumn" automationText="removeRowColumn" style="background-color: lightgreen;" />
16+
</StackLayout>
17+
</GridLayout>
18+
</Page>

‎e2e/ui-tests-app/app/layouts/main-page.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export function loadExamples() {
2323
examples.set("pwrap", "layouts-percent/wrap-page");
2424
examples.set("passThroughParent", "layouts/passThroughParent-page");
2525
examples.set("stacklayout-6059", "layouts/stacklayout-6059-page");
26+
examples.set("grid-7295", "layouts/grid-7295-page");
2627
examples.set("safe-area", "layouts/safe-area-page");
2728

2829
return examples;

‎tests/app/ui/layouts/grid-layout-tests.ts‎

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,60 @@ export class GridLayoutTest extends testModule.UITest<RemovalTrackingGridLayout>
119119
TKUnit.assertEqual(this.colSpan(test), 1, "'columnSpan' property default value should be 1.");
120120
}
121121

122+
public test_synonym_property_setting_column_changes_col() {
123+
const test = new Button();
124+
125+
test.column = 3;
126+
127+
TKUnit.assertEqual(test.column, 3, "Setting column should work.");
128+
TKUnit.assertEqual(test.col, 3, "Setting column property should affect col property.");
129+
}
130+
131+
public test_synonym_property_setting_col_changes_column() {
132+
const test = new Button();
133+
134+
test.col = 3;
135+
136+
TKUnit.assertEqual(test.col, 3, "Setting col should work.");
137+
TKUnit.assertEqual(test.column, 3, "Setting col property should affect column property.");
138+
}
139+
140+
public test_synonym_property_setColumn_should_set_col_and_column() {
141+
const test = new Button();
142+
143+
GridLayout.setColumn(test, 3);
144+
145+
TKUnit.assertEqual(test.col, 3, "setColumn should set col");
146+
TKUnit.assertEqual(test.column, 3, "setColumn should set column");
147+
}
148+
149+
public test_synonym_property_setting_columnSpan_changes_colSpan() {
150+
const test = new Button();
151+
152+
test.columnSpan = 3;
153+
154+
TKUnit.assertEqual(test.columnSpan, 3, "Setting columnSpan should work.");
155+
TKUnit.assertEqual(test.colSpan, 3, "Setting columnSpan property should affect colSpan property.");
156+
}
157+
158+
public test_synonym_property_setting_colSpan_changes_columnSpan() {
159+
const test = new Button();
160+
161+
test.colSpan = 3;
162+
163+
TKUnit.assertEqual(test.colSpan, 3, "Setting colSpan should work.");
164+
TKUnit.assertEqual(test.columnSpan, 3, "Setting colSpan property should affect columnSpan property.");
165+
}
166+
167+
public test_synonym_property_setColumnSpan_should_set_colSpan_and_columnSpan() {
168+
const test = new Button();
169+
170+
GridLayout.setColumnSpan(test, 3);
171+
172+
TKUnit.assertEqual(test.colSpan, 3, "setColumnSpan should set colSpan");
173+
TKUnit.assertEqual(test.columnSpan, 3, "setColumnSpan should set columnSpan");
174+
}
175+
122176
public test_getRow_shouldThrow_onNullValues() {
123177
TKUnit.assertThrows(() => {
124178
GridLayout.getRow(null);
@@ -250,17 +304,17 @@ export class GridLayoutTest extends testModule.UITest<RemovalTrackingGridLayout>
250304
TKUnit.assertEqual(
251305
this.row(btn),
252306
row,
253-
"'row' property not applied For GridLayout addChildAtCell without rowspan."
307+
"'row' property not applied For GridLayout addChildAtCell without rowSpan."
254308
);
255309
TKUnit.assertEqual(
256310
this.col(btn),
257311
column,
258-
"'column' property not applied For GridLayout addChildAtCell without rowspan."
312+
"'column' property not applied For GridLayout addChildAtCell without rowSpan."
259313
);
260314
TKUnit.assertEqual(
261315
this.rowSpan(btn),
262316
defaultSpanValue,
263-
"'rowSpan' property not applied For GridLayout addChildAtCell without rowspan."
317+
"'rowSpan' property not applied For GridLayout addChildAtCell without rowSpan."
264318
);
265319
TKUnit.assertEqual(
266320
this.colSpan(btn),

‎tns-core-modules/ui/core/view-base/view-base.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,16 @@ export abstract class ViewBase extends Observable {
9898
dock: "left" | "top" | "right" | "bottom";
9999
row: number;
100100
col: number;
101+
/**
102+
* Setting `column` property is the same as `col`
103+
*/
104+
column: number;
101105
rowSpan: number;
102106
colSpan: number;
107+
/**
108+
* Setting `columnSpan` property is the same as `colSpan`
109+
*/
110+
columnSpan: number;
103111
domNode: DOMNode;
104112

105113
order: Order;

‎tns-core-modules/ui/core/view-base/view-base.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,8 +210,10 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
210210
dock: "left" | "top" | "right" | "bottom";
211211
row: number;
212212
col: number;
213+
column: number; // synonym for "col"
213214
rowSpan: number;
214215
colSpan: number;
216+
columnSpan: number; // synonym for "columnSpan"
215217

216218
order: Order;
217219
flexGrow: FlexGrow;

‎tns-core-modules/ui/layouts/grid-layout/grid-layout-common.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,20 @@ View.prototype.col = 0;
1616
View.prototype.rowSpan = 1;
1717
View.prototype.colSpan = 1;
1818

19+
Object.defineProperty(View.prototype, "column", {
20+
get(this: View): number { return this.col; },
21+
set(this: View, value: number) { this.col = value; },
22+
enumerable: true,
23+
configurable: true
24+
});
25+
26+
Object.defineProperty(View.prototype, "columnSpan", {
27+
get(this: View): number { return this.colSpan; },
28+
set(this: View, value: number) { this.colSpan = value; },
29+
enumerable: true,
30+
configurable: true
31+
});
32+
1933
function validateItemSpec(itemSpec: ItemSpec): void {
2034
if (!itemSpec) {
2135
throw new Error("Value cannot be undefined.");

0 commit comments

Comments
 (0)