javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-26 22:00:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

GridUnitType enum + fixes

Browse Source
This commit is contained in:
Rossen Hristov
2016-12-20 11:21:31 +02:00
parent 00c0760d91
commit 9236517fcb
7 changed files with 85 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/app/ui-tests-app/layouts-percent/grid.ts
View File

@ -1,38 +1,38 @@
import * as buttonModule from "ui/button"; import * as model from "./myview";
import * as pageModule from "ui/page"; import { Button } from "ui/button";
import * as gridLayoutModule from "ui/layouts/grid-layout"; import { Page } from "ui/page";
import * as model from "./myview"; import { GridLayout, ItemSpec, GridUnitType } from "ui/layouts/grid-layout";
export function onLoaded(args: { eventName: string, object: any }) { export function onLoaded(args: { eventName: string, object: any }) {
var page = <pageModule.Page>args.object; var page = <Page>args.object;
page.bindingContext = new model.ViewModel(); page.bindingContext = new model.ViewModel();
} }
export function onAddRowColumn(args: { eventName: string, object: any }) { export function onAddRowColumn(args: { eventName: string, object: any }) {
var layout = <gridLayoutModule.GridLayout>args.object.parent.parent; var layout = <GridLayout>args.object.parent.parent;
var row = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto); var row = new ItemSpec(1, GridUnitType.AUTO);
var column = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto); var column = new ItemSpec(1, GridUnitType.AUTO);
layout.addRow(row); layout.addRow(row);
layout.addColumn(column); layout.addColumn(column);
var btn0 = new buttonModule.Button(); var btn0 = new Button();
var btn1 = new buttonModule.Button(); var btn1 = new Button();
btn0.id = "b0"; btn0.id = "b0";
btn1.id = "b1"; btn1.id = "b1";
btn0.text = "b0"; btn0.text = "b0";
btn1.text = "b1"; btn1.text = "b1";
layout.addChild(btn0); layout.addChild(btn0);
layout.addChild(btn1); layout.addChild(btn1);
gridLayoutModule.GridLayout.setRow(btn0, 0); GridLayout.setRow(btn0, 0);
gridLayoutModule.GridLayout.setColumn(btn0, 4); GridLayout.setColumn(btn0, 4);
gridLayoutModule.GridLayout.setRow(btn1, 4); GridLayout.setRow(btn1, 4);
gridLayoutModule.GridLayout.setColumn(btn1, 0); GridLayout.setColumn(btn1, 0);
gridLayoutModule.GridLayout.setColumnSpan(btn1, 2); GridLayout.setColumnSpan(btn1, 2);
gridLayoutModule.GridLayout.setRowSpan(btn0, 3); GridLayout.setRowSpan(btn0, 3);
} }
export function onRemoveRowColumn(args: { eventName: string, object: any }) { export function onRemoveRowColumn(args: { eventName: string, object: any }) {
var layout = <gridLayoutModule.GridLayout>args.object.parent.parent; var layout = <GridLayout>args.object.parent.parent;
var itemSpecs, count; var itemSpecs, count;
itemSpecs = layout.getRows(); itemSpecs = layout.getRows();
count = itemSpecs.length; count = itemSpecs.length;

34
apps/app/ui-tests-app/layouts/grid.ts
View File

@ -1,38 +1,38 @@
import * as buttonModule from "ui/button"; import * as model from "./myview";
import * as pageModule from "ui/page"; import { Button } from "ui/button";
import * as gridLayoutModule from "ui/layouts/grid-layout"; import { Page } from "ui/page";
import * as model from "./myview"; import { GridLayout, ItemSpec, GridUnitType } from "ui/layouts/grid-layout";
export function onLoaded(args: { eventName: string, object: any }) { export function onLoaded(args: { eventName: string, object: any }) {
var page = <pageModule.Page>args.object; var page = <Page>args.object;
page.bindingContext = new model.ViewModel(); page.bindingContext = new model.ViewModel();
} }
export function onAddRowColumn(args: { eventName: string, object: any }) { export function onAddRowColumn(args: { eventName: string, object: any }) {
var layout = <gridLayoutModule.GridLayout>args.object.parent.parent; var layout = <GridLayout>args.object.parent.parent;
var row = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto); var row = new ItemSpec(1, GridUnitType.AUTO);
var column = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto); var column = new ItemSpec(1, GridUnitType.AUTO);
layout.addRow(row); layout.addRow(row);
layout.addColumn(column); layout.addColumn(column);
var btn0 = new buttonModule.Button(); var btn0 = new Button();
var btn1 = new buttonModule.Button(); var btn1 = new Button();
btn0.id = "b0"; btn0.id = "b0";
btn1.id = "b1"; btn1.id = "b1";
btn0.text = "b0"; btn0.text = "b0";
btn1.text = "b1"; btn1.text = "b1";
layout.addChild(btn0); layout.addChild(btn0);
layout.addChild(btn1); layout.addChild(btn1);
gridLayoutModule.GridLayout.setRow(btn0, 0); GridLayout.setRow(btn0, 0);
gridLayoutModule.GridLayout.setColumn(btn0, 4); GridLayout.setColumn(btn0, 4);
gridLayoutModule.GridLayout.setRow(btn1, 4); GridLayout.setRow(btn1, 4);
gridLayoutModule.GridLayout.setColumn(btn1, 0); GridLayout.setColumn(btn1, 0);
gridLayoutModule.GridLayout.setColumnSpan(btn1, 2); GridLayout.setColumnSpan(btn1, 2);
gridLayoutModule.GridLayout.setRowSpan(btn0, 3); GridLayout.setRowSpan(btn0, 3);
} }
export function onRemoveRowColumn(args: { eventName: string, object: any }) { export function onRemoveRowColumn(args: { eventName: string, object: any }) {
var layout = <gridLayoutModule.GridLayout>args.object.parent.parent; var layout = <GridLayout>args.object.parent.parent;
var itemSpecs, count; var itemSpecs, count;
itemSpecs = layout.getRows(); itemSpecs = layout.getRows();
count = itemSpecs.length; count = itemSpecs.length;

25
apps/app/ui-tests-app/page/page-status-bar-css.ts
View File

@ -1,10 +1,9 @@
import * as color from "color"; import { Color } from "color";
import * as page from "ui/page"; import { Page } from "ui/page";
import * as style from "ui/styling/style"; import { View, unsetValue } from "ui/core/view";
import * as view from "ui/core/view";
export function applyTap(args) { export function applyTap(args) {
let page = <page.Page>(<view.View>args.object).page; let page = <Page>(<View>args.object).page;
reset(page); reset(page);
@ -13,17 +12,17 @@ export function applyTap(args) {
} }
export function applyTapOnStyledActionBar(args) { export function applyTapOnStyledActionBar(args) {
let page = <page.Page>(<view.View>args.object).page; let page = <Page>(<View>args.object).page;
reset(page); reset(page);
page.actionBar.backgroundColor = new color.Color("#5DFC0A"); page.actionBar.backgroundColor = new Color("#5DFC0A");
var css = "#test-element { " + args.object.tag + " }"; var css = "#test-element { " + args.object.tag + " }";
page.css = css; page.css = css;
} }
export function applyTapWithHiddenActionBar(args) { export function applyTapWithHiddenActionBar(args) {
let page = <page.Page>(<view.View>args.object).page; let page = <Page>(<View>args.object).page;
reset(page); reset(page);
@ -33,7 +32,7 @@ export function applyTapWithHiddenActionBar(args) {
} }
export function applyTapWithSpan(args) { export function applyTapWithSpan(args) {
let page = <page.Page>(<view.View>args.object).page; let page = <Page>(<View>args.object).page;
reset(page); reset(page);
@ -43,18 +42,18 @@ export function applyTapWithSpan(args) {
} }
export function applyTapOnStyledActionBarAndSpan(args) { export function applyTapOnStyledActionBarAndSpan(args) {
let page = <page.Page>(<view.View>args.object).page; let page = <Page>(<View>args.object).page;
reset(page); reset(page);
page.backgroundSpanUnderStatusBar = true; page.backgroundSpanUnderStatusBar = true;
page.actionBar.backgroundColor = new color.Color("#E0115F"); page.actionBar.backgroundColor = new Color("#E0115F");
var css = "#test-element { " + args.object.tag + " }"; var css = "#test-element { " + args.object.tag + " }";
page.css = css; page.css = css;
} }
export function applyTapWithActionBarHiddenAndSpan(args) { export function applyTapWithActionBarHiddenAndSpan(args) {
let page = <page.Page>(<view.View>args.object).page; let page = <Page>(<View>args.object).page;
reset(page); reset(page);
@ -64,7 +63,7 @@ export function applyTapWithActionBarHiddenAndSpan(args) {
page.css = css; page.css = css;
} }
function reset(page: page.Page) { function reset(page: Page) {
page.css = ""; page.css = "";
page.actionBarHidden = false; page.actionBarHidden = false;
page.backgroundSpanUnderStatusBar = false; page.backgroundSpanUnderStatusBar = false;

2
apps/app/ui-tests-app/pages/pan-event.ts
View File

@ -7,7 +7,7 @@ import { TextView } from "ui/text-view";
var view: View; var view: View;
export function navigatingTo(args: EventData) { export function navigatingTo(args: EventData) {
var page = <Page>args.object; var page = <Page>args.object;
view = page.getViewById("target"); view = <View>page.getViewById("target");
} }
export function onPan(data: PanGestureEventData) { export function onPan(data: PanGestureEventData) {

45
tns-core-modules/ui/layouts/grid-layout/grid-layout-common.ts
View File

@ -1,5 +1,5 @@
import { GridLayout as GridLayoutDefinition, ItemSpec as ItemSpecDefinition } from "ui/layouts/grid-layout"; import { GridLayout as GridLayoutDefinition, ItemSpec as ItemSpecDefinition } from "ui/layouts/grid-layout";
import { LayoutBase, View, Observable, Property } from "ui/layouts/layout-base"; import { LayoutBase, View, Observable, Property, makeParser, makeValidator } from "ui/layouts/layout-base";
export * from "ui/layouts/layout-base"; export * from "ui/layouts/layout-base";
@ -24,14 +24,6 @@ View.prototype.col = 0;
View.prototype.rowSpan = 1; View.prototype.rowSpan = 1;
View.prototype.colSpan = 1; View.prototype.colSpan = 1;
function convertUnitType(value: string): "pixel" | "star" | "auto" {
if (value === "pixel" || value === "star" || value === "auto") {
return <"pixel" | "star" | "auto">value;
}
throw new Error(`Invalid value for unitType: ${value}`);
}
function validateItemSpec(itemSpec: ItemSpec): void { function validateItemSpec(itemSpec: ItemSpec): void {
if (!itemSpec) { if (!itemSpec) {
throw new Error("Value cannot be undefined."); throw new Error("Value cannot be undefined.");
@ -43,15 +35,15 @@ function validateItemSpec(itemSpec: ItemSpec): void {
} }
function convertGridLength(value: string): ItemSpec { function convertGridLength(value: string): ItemSpec {
if (value === "auto") { if (value === GridUnitType.AUTO) {
return ItemSpec.create(1, "auto"); return ItemSpec.create(1, GridUnitType.AUTO);
} }
else if (value.indexOf("*") !== -1) { else if (value.indexOf("*") !== -1) {
const starCount = parseInt(value.replace("*", "") || "1"); const starCount = parseInt(value.replace("*", "") || "1");
return ItemSpec.create(starCount, "star"); return ItemSpec.create(starCount, GridUnitType.STAR);
} }
else if (!isNaN(parseInt(value))) { else if (!isNaN(parseInt(value))) {
return ItemSpec.create(parseInt(value), "pixel"); return ItemSpec.create(parseInt(value), GridUnitType.PIXEL);
} }
else { else {
throw new Error(`Cannot parse item spec from string: ${value}`); throw new Error(`Cannot parse item spec from string: ${value}`);
@ -70,14 +62,14 @@ function parseAndAddItemSpecs(value: string, func: (itemSpec: ItemSpec) => void)
export class ItemSpec extends Observable implements ItemSpecDefinition { export class ItemSpec extends Observable implements ItemSpecDefinition {
private _value: number; private _value: number;
private _unitType: "pixel" | "star" | "auto"; private _unitType: GridUnitType;
constructor() { constructor() {
super(); super();
if (arguments.length === 0) { if (arguments.length === 0) {
this._value = 1; this._value = 1;
this._unitType = "star"; this._unitType = GridUnitType.STAR;
} }
else if (arguments.length === 2) { else if (arguments.length === 2) {
@ -89,7 +81,7 @@ export class ItemSpec extends Observable implements ItemSpecDefinition {
} }
this._value = value; this._value = value;
this._unitType = convertUnitType(type); this._unitType = GridUnitType.parse(type);
} }
else { else {
throw new Error("First argument should be number, second argument should be string."); throw new Error("First argument should be number, second argument should be string.");
@ -106,7 +98,7 @@ export class ItemSpec extends Observable implements ItemSpecDefinition {
public index: number; public index: number;
public _actualLength: number = 0; public _actualLength: number = 0;
public static create(value: number, type: "pixel" | "star" | "auto"): ItemSpec { public static create(value: number, type: GridUnitType): ItemSpec {
let spec = new ItemSpec(); let spec = new ItemSpec();
spec._value = value; spec._value = value;
spec._unitType = type; spec._unitType = type;
@ -121,20 +113,20 @@ export class ItemSpec extends Observable implements ItemSpecDefinition {
return (value1.gridUnitType === value2.gridUnitType) && (value1.value === value2.value) && (value1.owner === value2.owner) && (value1.index === value2.index); return (value1.gridUnitType === value2.gridUnitType) && (value1.value === value2.value) && (value1.owner === value2.owner) && (value1.index === value2.index);
} }
get gridUnitType(): "pixel" | "star" | "auto" { get gridUnitType(): GridUnitType {
return this._unitType; return this._unitType;
} }
get isAbsolute(): boolean { get isAbsolute(): boolean {
return this._unitType === "pixel"; return this._unitType === GridUnitType.PIXEL;
} }
get isAuto(): boolean { get isAuto(): boolean {
return this._unitType === "auto"; return this._unitType === GridUnitType.AUTO;
} }
get isStar(): boolean { get isStar(): boolean {
return this._unitType === "star"; return this._unitType === GridUnitType.STAR;
} }
get value(): number { get value(): number {
@ -368,4 +360,13 @@ export const rowSpanProperty = new Property<View, number>({
}, },
valueConverter: (v) => Math.max(1, parseInt(v)) valueConverter: (v) => Math.max(1, parseInt(v))
}); });
rowSpanProperty.register(View); rowSpanProperty.register(View);
export type GridUnitType = "pixel" | "star" | "auto";
export namespace GridUnitType {
export const PIXEL: "pixel" = "pixel";
export const STAR: "star" = "star";
export const AUTO: "auto" = "auto";
export const isValid = makeValidator<GridUnitType>(PIXEL, STAR, AUTO);
export const parse = makeParser(isValid, undefined);
}

8
tns-core-modules/ui/layouts/grid-layout/grid-layout.android.ts
View File

@ -1,6 +1,6 @@
import { import {
GridLayoutBase, ItemSpec as ItemSpecBase, View, layout, GridLayoutBase, ItemSpec as ItemSpecBase, View, layout,
rowProperty, columnProperty, rowSpanProperty, columnSpanProperty rowProperty, columnProperty, rowSpanProperty, columnSpanProperty, GridUnitType
} from "./grid-layout-common"; } from "./grid-layout-common";
export * from "./grid-layout-common"; export * from "./grid-layout-common";
@ -64,13 +64,13 @@ Object.defineProperties(View.prototype, {
function createNativeSpec(itemSpec: ItemSpec): org.nativescript.widgets.ItemSpec { function createNativeSpec(itemSpec: ItemSpec): org.nativescript.widgets.ItemSpec {
switch (itemSpec.gridUnitType) { switch (itemSpec.gridUnitType) {
case "auto": case GridUnitType.AUTO:
return new org.nativescript.widgets.ItemSpec(itemSpec.value, org.nativescript.widgets.GridUnitType.auto); return new org.nativescript.widgets.ItemSpec(itemSpec.value, org.nativescript.widgets.GridUnitType.auto);
case "star": case GridUnitType.STAR:
return new org.nativescript.widgets.ItemSpec(itemSpec.value, org.nativescript.widgets.GridUnitType.star); return new org.nativescript.widgets.ItemSpec(itemSpec.value, org.nativescript.widgets.GridUnitType.star);
case "pixel": case GridUnitType.PIXEL:
return new org.nativescript.widgets.ItemSpec(itemSpec.value * layout.getDisplayDensity(), org.nativescript.widgets.GridUnitType.pixel); return new org.nativescript.widgets.ItemSpec(itemSpec.value * layout.getDisplayDensity(), org.nativescript.widgets.GridUnitType.pixel);
default: default:

13
tns-core-modules/ui/layouts/grid-layout/grid-layout.d.ts vendored
View File

@ -7,7 +7,7 @@
export class ItemSpec { export class ItemSpec {
constructor(); constructor();
constructor(value: number, type: "pixel" | "star" | "auto"); constructor(value: number, type: GridUnitType);
/** /**
* Gets the actual length of an ItemSpec. * Gets the actual length of an ItemSpec.
@ -17,7 +17,7 @@
/** /**
* Returns unit type of this ItemSpec instance. * Returns unit type of this ItemSpec instance.
*/ */
gridUnitType: "pixel" | "star" | "auto"; gridUnitType: GridUnitType;
/** /**
* Returns true if this ItemSpec instance holds * Returns true if this ItemSpec instance holds
@ -155,4 +155,13 @@
* Represents the observable property backing the rowSpan property. * Represents the observable property backing the rowSpan property.
*/ */
export const rowSpanProperty: Property<GridLayout, number>; export const rowSpanProperty: Property<GridLayout, number>;
export type GridUnitType = "pixel" | "star" | "auto";
export namespace GridUnitType {
export const PIXEL: "pixel";
export const STAR: "star";
export const AUTO: "auto";
export function isValid(value: any): boolean;
export function parse(value: string): GridUnitType;
}
} }