From 9236517fcb07daa848f22e9032128b676c729891 Mon Sep 17 00:00:00 2001 From: Rossen Hristov Date: Tue, 20 Dec 2016 11:21:31 +0200 Subject: [PATCH] GridUnitType enum + fixes --- apps/app/ui-tests-app/layouts-percent/grid.ts | 34 +++++++------- apps/app/ui-tests-app/layouts/grid.ts | 34 +++++++------- .../ui-tests-app/page/page-status-bar-css.ts | 25 +++++------ apps/app/ui-tests-app/pages/pan-event.ts | 2 +- .../layouts/grid-layout/grid-layout-common.ts | 45 ++++++++++--------- .../grid-layout/grid-layout.android.ts | 8 ++-- .../ui/layouts/grid-layout/grid-layout.d.ts | 13 +++++- 7 files changed, 85 insertions(+), 76 deletions(-) diff --git a/apps/app/ui-tests-app/layouts-percent/grid.ts b/apps/app/ui-tests-app/layouts-percent/grid.ts index 72ce552a8..0f87f7efc 100644 --- a/apps/app/ui-tests-app/layouts-percent/grid.ts +++ b/apps/app/ui-tests-app/layouts-percent/grid.ts @@ -1,38 +1,38 @@ -import * as buttonModule from "ui/button"; -import * as pageModule from "ui/page"; -import * as gridLayoutModule from "ui/layouts/grid-layout"; -import * as model from "./myview"; +import * as model from "./myview"; +import { Button } from "ui/button"; +import { Page } from "ui/page"; +import { GridLayout, ItemSpec, GridUnitType } from "ui/layouts/grid-layout"; export function onLoaded(args: { eventName: string, object: any }) { - var page = args.object; + var page = args.object; page.bindingContext = new model.ViewModel(); } export function onAddRowColumn(args: { eventName: string, object: any }) { - var layout = args.object.parent.parent; - var row = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto); - var column = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto); + var layout = args.object.parent.parent; + var row = new ItemSpec(1, GridUnitType.AUTO); + var column = new ItemSpec(1, GridUnitType.AUTO); layout.addRow(row); layout.addColumn(column); - var btn0 = new buttonModule.Button(); - var btn1 = new buttonModule.Button(); + 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); - gridLayoutModule.GridLayout.setRow(btn0, 0); - gridLayoutModule.GridLayout.setColumn(btn0, 4); - gridLayoutModule.GridLayout.setRow(btn1, 4); - gridLayoutModule.GridLayout.setColumn(btn1, 0); - gridLayoutModule.GridLayout.setColumnSpan(btn1, 2); - gridLayoutModule.GridLayout.setRowSpan(btn0, 3); + 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 = args.object.parent.parent; + var layout = args.object.parent.parent; var itemSpecs, count; itemSpecs = layout.getRows(); count = itemSpecs.length; diff --git a/apps/app/ui-tests-app/layouts/grid.ts b/apps/app/ui-tests-app/layouts/grid.ts index 72ce552a8..0f87f7efc 100644 --- a/apps/app/ui-tests-app/layouts/grid.ts +++ b/apps/app/ui-tests-app/layouts/grid.ts @@ -1,38 +1,38 @@ -import * as buttonModule from "ui/button"; -import * as pageModule from "ui/page"; -import * as gridLayoutModule from "ui/layouts/grid-layout"; -import * as model from "./myview"; +import * as model from "./myview"; +import { Button } from "ui/button"; +import { Page } from "ui/page"; +import { GridLayout, ItemSpec, GridUnitType } from "ui/layouts/grid-layout"; export function onLoaded(args: { eventName: string, object: any }) { - var page = args.object; + var page = args.object; page.bindingContext = new model.ViewModel(); } export function onAddRowColumn(args: { eventName: string, object: any }) { - var layout = args.object.parent.parent; - var row = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto); - var column = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto); + var layout = args.object.parent.parent; + var row = new ItemSpec(1, GridUnitType.AUTO); + var column = new ItemSpec(1, GridUnitType.AUTO); layout.addRow(row); layout.addColumn(column); - var btn0 = new buttonModule.Button(); - var btn1 = new buttonModule.Button(); + 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); - gridLayoutModule.GridLayout.setRow(btn0, 0); - gridLayoutModule.GridLayout.setColumn(btn0, 4); - gridLayoutModule.GridLayout.setRow(btn1, 4); - gridLayoutModule.GridLayout.setColumn(btn1, 0); - gridLayoutModule.GridLayout.setColumnSpan(btn1, 2); - gridLayoutModule.GridLayout.setRowSpan(btn0, 3); + 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 = args.object.parent.parent; + var layout = args.object.parent.parent; var itemSpecs, count; itemSpecs = layout.getRows(); count = itemSpecs.length; diff --git a/apps/app/ui-tests-app/page/page-status-bar-css.ts b/apps/app/ui-tests-app/page/page-status-bar-css.ts index 6ccb4a1a3..44788ca1d 100644 --- a/apps/app/ui-tests-app/page/page-status-bar-css.ts +++ b/apps/app/ui-tests-app/page/page-status-bar-css.ts @@ -1,10 +1,9 @@ -import * as color from "color"; -import * as page from "ui/page"; -import * as style from "ui/styling/style"; -import * as view from "ui/core/view"; +import { Color } from "color"; +import { Page } from "ui/page"; +import { View, unsetValue } from "ui/core/view"; export function applyTap(args) { - let page = (args.object).page; + let page = (args.object).page; reset(page); @@ -13,17 +12,17 @@ export function applyTap(args) { } export function applyTapOnStyledActionBar(args) { - let page = (args.object).page; + let page = (args.object).page; reset(page); - page.actionBar.backgroundColor = new color.Color("#5DFC0A"); + page.actionBar.backgroundColor = new Color("#5DFC0A"); var css = "#test-element { " + args.object.tag + " }"; page.css = css; } export function applyTapWithHiddenActionBar(args) { - let page = (args.object).page; + let page = (args.object).page; reset(page); @@ -33,7 +32,7 @@ export function applyTapWithHiddenActionBar(args) { } export function applyTapWithSpan(args) { - let page = (args.object).page; + let page = (args.object).page; reset(page); @@ -43,18 +42,18 @@ export function applyTapWithSpan(args) { } export function applyTapOnStyledActionBarAndSpan(args) { - let page = (args.object).page; + let page = (args.object).page; reset(page); page.backgroundSpanUnderStatusBar = true; - page.actionBar.backgroundColor = new color.Color("#E0115F"); + page.actionBar.backgroundColor = new Color("#E0115F"); var css = "#test-element { " + args.object.tag + " }"; page.css = css; } export function applyTapWithActionBarHiddenAndSpan(args) { - let page = (args.object).page; + let page = (args.object).page; reset(page); @@ -64,7 +63,7 @@ export function applyTapWithActionBarHiddenAndSpan(args) { page.css = css; } -function reset(page: page.Page) { +function reset(page: Page) { page.css = ""; page.actionBarHidden = false; page.backgroundSpanUnderStatusBar = false; diff --git a/apps/app/ui-tests-app/pages/pan-event.ts b/apps/app/ui-tests-app/pages/pan-event.ts index 9b7c04ca9..8a23a3f74 100644 --- a/apps/app/ui-tests-app/pages/pan-event.ts +++ b/apps/app/ui-tests-app/pages/pan-event.ts @@ -7,7 +7,7 @@ import { TextView } from "ui/text-view"; var view: View; export function navigatingTo(args: EventData) { var page = args.object; - view = page.getViewById("target"); + view = page.getViewById("target"); } export function onPan(data: PanGestureEventData) { diff --git a/tns-core-modules/ui/layouts/grid-layout/grid-layout-common.ts b/tns-core-modules/ui/layouts/grid-layout/grid-layout-common.ts index 377f5581d..f705b6aed 100644 --- a/tns-core-modules/ui/layouts/grid-layout/grid-layout-common.ts +++ b/tns-core-modules/ui/layouts/grid-layout/grid-layout-common.ts @@ -1,5 +1,5 @@ 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"; @@ -24,14 +24,6 @@ View.prototype.col = 0; View.prototype.rowSpan = 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 { if (!itemSpec) { throw new Error("Value cannot be undefined."); @@ -43,15 +35,15 @@ function validateItemSpec(itemSpec: ItemSpec): void { } function convertGridLength(value: string): ItemSpec { - if (value === "auto") { - return ItemSpec.create(1, "auto"); + if (value === GridUnitType.AUTO) { + return ItemSpec.create(1, GridUnitType.AUTO); } else if (value.indexOf("*") !== -1) { const starCount = parseInt(value.replace("*", "") || "1"); - return ItemSpec.create(starCount, "star"); + return ItemSpec.create(starCount, GridUnitType.STAR); } else if (!isNaN(parseInt(value))) { - return ItemSpec.create(parseInt(value), "pixel"); + return ItemSpec.create(parseInt(value), GridUnitType.PIXEL); } else { 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 { private _value: number; - private _unitType: "pixel" | "star" | "auto"; + private _unitType: GridUnitType; constructor() { super(); if (arguments.length === 0) { this._value = 1; - this._unitType = "star"; + this._unitType = GridUnitType.STAR; } else if (arguments.length === 2) { @@ -89,7 +81,7 @@ export class ItemSpec extends Observable implements ItemSpecDefinition { } this._value = value; - this._unitType = convertUnitType(type); + this._unitType = GridUnitType.parse(type); } else { 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 _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(); spec._value = value; 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); } - get gridUnitType(): "pixel" | "star" | "auto" { + get gridUnitType(): GridUnitType { return this._unitType; } get isAbsolute(): boolean { - return this._unitType === "pixel"; + return this._unitType === GridUnitType.PIXEL; } get isAuto(): boolean { - return this._unitType === "auto"; + return this._unitType === GridUnitType.AUTO; } get isStar(): boolean { - return this._unitType === "star"; + return this._unitType === GridUnitType.STAR; } get value(): number { @@ -368,4 +360,13 @@ export const rowSpanProperty = new Property({ }, valueConverter: (v) => Math.max(1, parseInt(v)) }); -rowSpanProperty.register(View); \ No newline at end of file +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(PIXEL, STAR, AUTO); + export const parse = makeParser(isValid, undefined); +} diff --git a/tns-core-modules/ui/layouts/grid-layout/grid-layout.android.ts b/tns-core-modules/ui/layouts/grid-layout/grid-layout.android.ts index b6e58426f..b26b4944c 100644 --- a/tns-core-modules/ui/layouts/grid-layout/grid-layout.android.ts +++ b/tns-core-modules/ui/layouts/grid-layout/grid-layout.android.ts @@ -1,6 +1,6 @@ import { GridLayoutBase, ItemSpec as ItemSpecBase, View, layout, - rowProperty, columnProperty, rowSpanProperty, columnSpanProperty + rowProperty, columnProperty, rowSpanProperty, columnSpanProperty, GridUnitType } 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 { switch (itemSpec.gridUnitType) { - case "auto": + case 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); - case "pixel": + case GridUnitType.PIXEL: return new org.nativescript.widgets.ItemSpec(itemSpec.value * layout.getDisplayDensity(), org.nativescript.widgets.GridUnitType.pixel); default: diff --git a/tns-core-modules/ui/layouts/grid-layout/grid-layout.d.ts b/tns-core-modules/ui/layouts/grid-layout/grid-layout.d.ts index 7ca952129..109ef91de 100644 --- a/tns-core-modules/ui/layouts/grid-layout/grid-layout.d.ts +++ b/tns-core-modules/ui/layouts/grid-layout/grid-layout.d.ts @@ -7,7 +7,7 @@ export class ItemSpec { constructor(); - constructor(value: number, type: "pixel" | "star" | "auto"); + constructor(value: number, type: GridUnitType); /** * Gets the actual length of an ItemSpec. @@ -17,7 +17,7 @@ /** * Returns unit type of this ItemSpec instance. */ - gridUnitType: "pixel" | "star" | "auto"; + gridUnitType: GridUnitType; /** * Returns true if this ItemSpec instance holds @@ -155,4 +155,13 @@ * Represents the observable property backing the rowSpan property. */ export const rowSpanProperty: Property; + + 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; + } } \ No newline at end of file