FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(GridLayout): Add synonym property column for col in GridLayout by mehulcs · Pull Request #7368 · NativeScript/NativeScript · GitHub

/ NativeScript Public

feat(GridLayout): Add synonym property column for col in GridLayout #7368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mehulcs wants to merge 5 commits into from
Conversation 9 Commits 5 Checks 0 Files changed
Closed

feat(GridLayout): Add synonym property column for col in GridLayout #7368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7bbfa29
add column synonym for col property grid layout
mehulcs Jun 18, 2019
ebefe6c
refactoring
manoldonev Jul 30, 2019
6a45875
Merge branch 'master' into grid-7295
manoldonev Aug 1, 2019
f390753
Merge branch 'master' into grid-7295
manoldonev Aug 1, 2019
80652a2
Merge branch 'master' into grid-7295
Aug 2, 2019
File filter

Filter by extension

Filter by extension .ts  (5) .xml  (1) All 2 file types selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
45 changes: 45 additions & 0 deletions e2e/ui-tests-app/app/layouts/grid-7295-page.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import * as model from "./myview";
import { Button } from "tns-core-modules/ui/button";
import { Page } from "tns-core-modules/ui/page";
import { GridLayout, ItemSpec } from "tns-core-modules/ui/layouts/grid-layout";

export function onLoaded(args: { eventName: string, object: any }) {
var page = <Page>args.object;
page.bindingContext = new model.ViewModel();
}

export function onAddRowColumn(args: { eventName: string, object: any }) {

var layout = <GridLayout>args.object.parent.parent;
var row = new ItemSpec(1, "auto");
var column = new ItemSpec(1, "auto");

layout.addRow(row);
layout.addColumn(column);

var btn0 = new Button();
var btn1 = new Button();
btn0.id = "b0";
btn1.id = "b1";
btn0.text = "b0";
btn1.text = "b1";
layout.addChild(btn0);
layout.addChild(btn1);
GridLayout.setRow(btn0, 0);
GridLayout.setColumn(btn0, 4);
GridLayout.setRow(btn1, 4);
GridLayout.setColumn(btn1, 0);
GridLayout.setColumnSpan(btn1, 2);
GridLayout.setRowSpan(btn0, 3);
}

export function onRemoveRowColumn(args: { eventName: string, object: any }) {
var layout = <GridLayout>args.object.parent.parent;
var itemSpecs, count;
itemSpecs = layout.getRows();
count = itemSpecs.length;
layout.removeRow(itemSpecs[count - 1]);
itemSpecs = layout.getColumns();
count = itemSpecs.length;
layout.removeColumn(itemSpecs[count - 1]);
}
18 changes: 18 additions & 0 deletions e2e/ui-tests-app/app/layouts/grid-7295-page.xml
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<Page loaded="onLoaded">
<GridLayout rows="auto, 100, *, 50" columns="auto, 60, *, 40">
<!-- View Properties -->
<Button text="wh" tap="{{ onWidthHeight }}" id="widthHeight" automationText="widthHeight" style="background-color: lightblue;" />
<Button text="n" tap="{{ onMinWidthMinHeight }}" column="1" id="minWidthMinHeight" automationText="minWidthMinHeight" style="background-color: lightblue;" />
<Button text="m" tap="{{ onMargins }}" column="2" id="margins" automationText="margins" style="background-color: lightblue;" />
<Button text="a" tap="{{ onAlignments }}" row="1" id="alignments" automationText="alignments" style="background-color: lightblue;" />
<Button text="c" tap="{{ onCollapse }}" row="1" column="1" id="collapse" automationText="collapse" style="background-color: lightblue;" />
<Button text="v" tap="{{ onVisibile }}" row="1" column="2" id="visible" automationText="visible" style="background-color: lightblue;" />
<!-- Layout Properties -->
<Button text="p" tap="{{ onPaddings }}" row="2" id="paddings" automationText="paddings" style="background-color: lightgray;" />
<Button text="all" tap="{{ onAllProperties }}" row="2" column="1" id="allProperties" automationText="allProperties" style="background-color: aquamarine;" />
<StackLayout row="2" column="2">
<Button text="1" tap="onAddRowColumn" id="addRowColumn" automationText="addRowColumn" style="background-color: lightgreen;" />
<Button text="0" tap="onRemoveRowColumn" id="removeRowColumn" automationText="removeRowColumn" style="background-color: lightgreen;" />
</StackLayout>
</GridLayout>
</Page>
1 change: 1 addition & 0 deletions e2e/ui-tests-app/app/layouts/main-page.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export function loadExamples() {
examples.set("pwrap", "layouts-percent/wrap-page");
examples.set("passThroughParent", "layouts/passThroughParent-page");
examples.set("stacklayout-6059", "layouts/stacklayout-6059-page");
examples.set("grid-7295", "layouts/grid-7295-page");
examples.set("safe-area", "layouts/safe-area-page");

return examples;
Expand Down
2 changes: 2 additions & 0 deletions tns-core-modules/ui/core/view-base/view-base.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -210,8 +210,10 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
dock: "left" | "top" | "right" | "bottom";
row: number;
col: number;
column: number; // synonym for "col"
rowSpan: number;
colSpan: number;
columnSpan: number; // synonym for "columnSpan"

order: Order;
flexGrow: FlexGrow;
Expand Down
72 changes: 54 additions & 18 deletions tns-core-modules/ui/layouts/grid-layout/grid-layout-common.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -134,15 +134,21 @@ export class GridLayoutBase extends LayoutBase implements GridLayoutDefinition {
private _cols: Array<ItemSpec> = new Array<ItemSpec>();

public static getColumn(element: View): number {
return validateArgs(element).col;
validateArgs(element);

// "column" treated as a synonym for "col" (not in d.ts to avoid confusion)
return Math.max(element.col, (<any>element).column);
}

public static setColumn(element: View, value: number): void {
validateArgs(element).col = value;
}

public static getColumnSpan(element: View): number {
return validateArgs(element).colSpan;
validateArgs(element);

// "columnSpan" treated as a synonym for "colSpan" (not in d.ts to avoid confusion)
return Math.min(element.colSpan, (<any>element).columnSpan);
}

public static setColumnSpan(element: View, value: number): void {
Expand Down Expand Up @@ -310,27 +316,57 @@ export class GridLayoutBase extends LayoutBase implements GridLayoutDefinition {

GridLayoutBase.prototype.recycleNativeView = "auto";

const columnDefaultValue = 0;

function columnPropertyValueChanged (target: View, oldValue: number, newValue: number) {
const grid = target.parent;
if (grid instanceof GridLayoutBase) {
grid.onColumnChanged(target, oldValue, newValue);
}
}

function columnPropertyValueConverter(value: string) {
return Math.max(columnDefaultValue, parseInt(value));
}

export const colProperty = new Property<View, number>({
name: "col", defaultValue: columnDefaultValue,
valueChanged: columnPropertyValueChanged,
valueConverter: columnPropertyValueConverter
});
colProperty.register(View);

export const columnProperty = new Property<View, number>({
name: "col", defaultValue: 0,
valueChanged: (target, oldValue, newValue) => {
const grid = target.parent;
if (grid instanceof GridLayoutBase) {
grid.onColumnChanged(target, oldValue, newValue);
}
},
valueConverter: (v) => Math.max(0, parseInt(v))
name: "column", defaultValue: columnDefaultValue,
valueChanged: columnPropertyValueChanged,
valueConverter: columnPropertyValueConverter
});
columnProperty.register(View);

const columnSpanDefaultValue = 1;

function columnSpanPropertyValueChanged(target: View, oldValue: number, newValue: number) {
const grid = target.parent;
if (grid instanceof GridLayoutBase) {
grid.onColumnSpanChanged(target, oldValue, newValue);
}
}

function columnSpanPropertyValueConverter(value: string) {
return Math.max(columnSpanDefaultValue, parseInt(value));
}

export const colSpanProperty = new Property<View, number>({
name: "colSpan", defaultValue: columnSpanDefaultValue,
valueChanged: columnSpanPropertyValueChanged,
valueConverter: columnSpanPropertyValueConverter
});
colSpanProperty.register(View);

export const columnSpanProperty = new Property<View, number>({
name: "colSpan", defaultValue: 1,
valueChanged: (target, oldValue, newValue) => {
const grid = target.parent;
if (grid instanceof GridLayoutBase) {
grid.onColumnSpanChanged(target, oldValue, newValue);
}
},
valueConverter: (v) => Math.max(1, parseInt(v))
name: "columnSpan", defaultValue: columnSpanDefaultValue,
valueChanged: columnSpanPropertyValueChanged,
valueConverter: columnSpanPropertyValueConverter
});
columnSpanProperty.register(View);

Expand Down
11 changes: 8 additions & 3 deletions tns-core-modules/ui/layouts/grid-layout/grid-layout.android.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {
GridLayoutBase, ItemSpec as ItemSpecBase, View, layout,
rowProperty, columnProperty, rowSpanProperty, columnSpanProperty, GridUnitType
rowProperty, columnProperty, colProperty, rowSpanProperty, columnSpanProperty, colSpanProperty, GridUnitType
} from "./grid-layout-common";

export * from "./grid-layout-common";
Expand All @@ -16,10 +16,15 @@ function makeNativeSetter<T>(setter: (lp: org.nativescript.widgets.CommonLayoutP
};
}

const columnPropertyNativeSetter = makeNativeSetter<number>((lp, value) => lp.column = value);
const columnSpanPropertyNativeSetter = makeNativeSetter<number>((lp, value) => lp.columnSpan = value);

View.prototype[rowProperty.setNative] = makeNativeSetter<number>((lp, value) => lp.row = value);
View.prototype[columnProperty.setNative] = makeNativeSetter<number>((lp, value) => lp.column = value);
View.prototype[columnProperty.setNative] = columnPropertyNativeSetter;
View.prototype[colProperty.setNative] = columnPropertyNativeSetter;
View.prototype[rowSpanProperty.setNative] = makeNativeSetter<number>((lp, value) => lp.rowSpan = value);
View.prototype[columnSpanProperty.setNative] = makeNativeSetter<number>((lp, value) => lp.columnSpan = value);
View.prototype[columnSpanProperty.setNative] = columnSpanPropertyNativeSetter;
View.prototype[colSpanProperty.setNative] = columnSpanPropertyNativeSetter;

function createNativeSpec(itemSpec: ItemSpec): org.nativescript.widgets.ItemSpec {
switch (itemSpec.gridUnitType) {
Expand Down
Back | FazBrowse Home | New Git URL