mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
chore: format
This commit is contained in:
Nathan Walker
@@ -1,15 +1,18 @@
|
||||
import { GridLayout as GridLayoutDefinition, ItemSpec as ItemSpecDefinition } from ".";
|
||||
import {
|
||||
GridLayout as GridLayoutDefinition,
|
||||
ItemSpec as ItemSpecDefinition,
|
||||
} from ".";
|
||||
import { LayoutBase } from "../layout-base";
|
||||
import { View, CSSType } from "../../core/view";
|
||||
import { Property, makeParser, makeValidator } from "../../core/properties";
|
||||
import { Observable } from "../../../data/observable";
|
||||
|
||||
function validateArgs(element: View): View {
|
||||
if (!element) {
|
||||
throw new Error("element cannot be null or undefined.");
|
||||
}
|
||||
if (!element) {
|
||||
throw new Error("element cannot be null or undefined.");
|
||||
}
|
||||
|
||||
return element;
|
||||
return element;
|
||||
}
|
||||
|
||||
View.prototype.row = 0;
|
||||
@@ -18,367 +21,394 @@ View.prototype.rowSpan = 1;
|
||||
View.prototype.colSpan = 1;
|
||||
|
||||
Object.defineProperty(View.prototype, "column", {
|
||||
get(this: View): number { return this.col; },
|
||||
set(this: View, value: number) { this.col = value; },
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
get(this: View): number {
|
||||
return this.col;
|
||||
},
|
||||
set(this: View, value: number) {
|
||||
this.col = value;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
Object.defineProperty(View.prototype, "columnSpan", {
|
||||
get(this: View): number { return this.colSpan; },
|
||||
set(this: View, value: number) { this.colSpan = value; },
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
get(this: View): number {
|
||||
return this.colSpan;
|
||||
},
|
||||
set(this: View, value: number) {
|
||||
this.colSpan = value;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
function validateItemSpec(itemSpec: ItemSpec): void {
|
||||
if (!itemSpec) {
|
||||
throw new Error("Value cannot be undefined.");
|
||||
}
|
||||
if (!itemSpec) {
|
||||
throw new Error("Value cannot be undefined.");
|
||||
}
|
||||
|
||||
if (itemSpec.owner) {
|
||||
throw new Error("itemSpec is already added to GridLayout.");
|
||||
}
|
||||
if (itemSpec.owner) {
|
||||
throw new Error("itemSpec is already added to GridLayout.");
|
||||
}
|
||||
}
|
||||
|
||||
function convertGridLength(value: string): ItemSpec {
|
||||
if (value === GridUnitType.AUTO) {
|
||||
return ItemSpec.create(1, GridUnitType.AUTO);
|
||||
}
|
||||
else if (value.indexOf("*") !== -1) {
|
||||
const starCount = parseInt(value.replace("*", "") || "1");
|
||||
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, GridUnitType.STAR);
|
||||
}
|
||||
else if (!isNaN(parseInt(value))) {
|
||||
return ItemSpec.create(parseInt(value), GridUnitType.PIXEL);
|
||||
}
|
||||
else {
|
||||
throw new Error(`Cannot parse item spec from string: ${value}`);
|
||||
}
|
||||
return ItemSpec.create(starCount, GridUnitType.STAR);
|
||||
} else if (!isNaN(parseInt(value))) {
|
||||
return ItemSpec.create(parseInt(value), GridUnitType.PIXEL);
|
||||
} else {
|
||||
throw new Error(`Cannot parse item spec from string: ${value}`);
|
||||
}
|
||||
}
|
||||
|
||||
function parseAndAddItemSpecs(value: string, func: (itemSpec: ItemSpec) => void): void {
|
||||
// ensure value is a string since view bindings could be parsed as number/int's here
|
||||
const arr = `${value}`.split(/[\s,]+/);
|
||||
for (let i = 0, length = arr.length; i < length; i++) {
|
||||
const str = arr[i].trim();
|
||||
if (str.length > 0) {
|
||||
func(convertGridLength(arr[i].trim()));
|
||||
}
|
||||
}
|
||||
function parseAndAddItemSpecs(
|
||||
value: string,
|
||||
func: (itemSpec: ItemSpec) => void
|
||||
): void {
|
||||
// ensure value is a string since view bindings could be parsed as number/int's here
|
||||
const arr = `${value}`.split(/[\s,]+/);
|
||||
for (let i = 0, length = arr.length; i < length; i++) {
|
||||
const str = arr[i].trim();
|
||||
if (str.length > 0) {
|
||||
func(convertGridLength(arr[i].trim()));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class ItemSpec extends Observable implements ItemSpecDefinition {
|
||||
private _value: number;
|
||||
private _unitType: GridUnitType;
|
||||
private _value: number;
|
||||
private _unitType: GridUnitType;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
if (arguments.length === 0) {
|
||||
this._value = 1;
|
||||
this._unitType = GridUnitType.STAR;
|
||||
if (arguments.length === 0) {
|
||||
this._value = 1;
|
||||
this._unitType = GridUnitType.STAR;
|
||||
} else if (arguments.length === 2) {
|
||||
const value = arguments[0];
|
||||
const type = arguments[1];
|
||||
if (typeof value === "number" && typeof type === "string") {
|
||||
if (value < 0 || isNaN(value) || !isFinite(value)) {
|
||||
throw new Error(
|
||||
`Value should not be negative, NaN or Infinity: ${value}`
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
else if (arguments.length === 2) {
|
||||
const value = arguments[0];
|
||||
const type = arguments[1];
|
||||
if (typeof value === "number" && typeof type === "string") {
|
||||
if (value < 0 || isNaN(value) || !isFinite(value)) {
|
||||
throw new Error(`Value should not be negative, NaN or Infinity: ${value}`);
|
||||
}
|
||||
this._value = value;
|
||||
this._unitType = GridUnitType.parse(type);
|
||||
} else {
|
||||
throw new Error(
|
||||
"First argument should be number, second argument should be string."
|
||||
);
|
||||
}
|
||||
} else {
|
||||
throw new Error("ItemSpec expects 0 or 2 arguments");
|
||||
}
|
||||
|
||||
this._value = value;
|
||||
this._unitType = GridUnitType.parse(type);
|
||||
}
|
||||
else {
|
||||
throw new Error("First argument should be number, second argument should be string.");
|
||||
}
|
||||
}
|
||||
else {
|
||||
throw new Error("ItemSpec expects 0 or 2 arguments");
|
||||
}
|
||||
this.index = -1;
|
||||
}
|
||||
|
||||
this.index = -1;
|
||||
}
|
||||
public owner: GridLayoutBase;
|
||||
public index: number;
|
||||
public _actualLength: number = 0;
|
||||
|
||||
public owner: GridLayoutBase;
|
||||
public index: number;
|
||||
public _actualLength: number = 0;
|
||||
public static create(value: number, type: GridUnitType): ItemSpec {
|
||||
let spec = new ItemSpec();
|
||||
spec._value = value;
|
||||
spec._unitType = type;
|
||||
|
||||
public static create(value: number, type: GridUnitType): ItemSpec {
|
||||
let spec = new ItemSpec();
|
||||
spec._value = value;
|
||||
spec._unitType = type;
|
||||
return spec;
|
||||
}
|
||||
|
||||
return spec;
|
||||
}
|
||||
public get actualLength(): number {
|
||||
return this._actualLength;
|
||||
}
|
||||
|
||||
public get actualLength(): number {
|
||||
return this._actualLength;
|
||||
}
|
||||
public static equals(value1: ItemSpec, value2: ItemSpec): boolean {
|
||||
return (
|
||||
value1.gridUnitType === value2.gridUnitType &&
|
||||
value1.value === value2.value &&
|
||||
value1.owner === value2.owner &&
|
||||
value1.index === value2.index
|
||||
);
|
||||
}
|
||||
|
||||
public static equals(value1: ItemSpec, value2: ItemSpec): boolean {
|
||||
return (value1.gridUnitType === value2.gridUnitType) && (value1.value === value2.value) && (value1.owner === value2.owner) && (value1.index === value2.index);
|
||||
}
|
||||
get gridUnitType(): GridUnitType {
|
||||
return this._unitType;
|
||||
}
|
||||
|
||||
get gridUnitType(): GridUnitType {
|
||||
return this._unitType;
|
||||
}
|
||||
get isAbsolute(): boolean {
|
||||
return this._unitType === GridUnitType.PIXEL;
|
||||
}
|
||||
|
||||
get isAbsolute(): boolean {
|
||||
return this._unitType === GridUnitType.PIXEL;
|
||||
}
|
||||
get isAuto(): boolean {
|
||||
return this._unitType === GridUnitType.AUTO;
|
||||
}
|
||||
|
||||
get isAuto(): boolean {
|
||||
return this._unitType === GridUnitType.AUTO;
|
||||
}
|
||||
get isStar(): boolean {
|
||||
return this._unitType === GridUnitType.STAR;
|
||||
}
|
||||
|
||||
get isStar(): boolean {
|
||||
return this._unitType === GridUnitType.STAR;
|
||||
}
|
||||
|
||||
get value(): number {
|
||||
return this._value;
|
||||
}
|
||||
get value(): number {
|
||||
return this._value;
|
||||
}
|
||||
}
|
||||
|
||||
@CSSType("GridLayout")
|
||||
export class GridLayoutBase extends LayoutBase implements GridLayoutDefinition {
|
||||
private _rows: Array<ItemSpec> = new Array<ItemSpec>();
|
||||
private _cols: Array<ItemSpec> = new Array<ItemSpec>();
|
||||
private _rows: Array<ItemSpec> = new Array<ItemSpec>();
|
||||
private _cols: Array<ItemSpec> = new Array<ItemSpec>();
|
||||
|
||||
public static getColumn(element: View): number {
|
||||
return validateArgs(element).col;
|
||||
}
|
||||
public static getColumn(element: View): number {
|
||||
return validateArgs(element).col;
|
||||
}
|
||||
|
||||
public static setColumn(element: View, value: number): void {
|
||||
validateArgs(element).col = value;
|
||||
}
|
||||
public static setColumn(element: View, value: number): void {
|
||||
validateArgs(element).col = value;
|
||||
}
|
||||
|
||||
public static getColumnSpan(element: View): number {
|
||||
return validateArgs(element).colSpan;
|
||||
}
|
||||
public static getColumnSpan(element: View): number {
|
||||
return validateArgs(element).colSpan;
|
||||
}
|
||||
|
||||
public static setColumnSpan(element: View, value: number): void {
|
||||
validateArgs(element).colSpan = value;
|
||||
}
|
||||
public static setColumnSpan(element: View, value: number): void {
|
||||
validateArgs(element).colSpan = value;
|
||||
}
|
||||
|
||||
public static getRow(element: View): number {
|
||||
return validateArgs(element).row;
|
||||
}
|
||||
public static getRow(element: View): number {
|
||||
return validateArgs(element).row;
|
||||
}
|
||||
|
||||
public static setRow(element: View, value: number): void {
|
||||
validateArgs(element).row = value;
|
||||
}
|
||||
public static setRow(element: View, value: number): void {
|
||||
validateArgs(element).row = value;
|
||||
}
|
||||
|
||||
public static getRowSpan(element: View): number {
|
||||
return validateArgs(element).rowSpan;
|
||||
}
|
||||
public static getRowSpan(element: View): number {
|
||||
return validateArgs(element).rowSpan;
|
||||
}
|
||||
|
||||
public static setRowSpan(element: View, value: number): void {
|
||||
validateArgs(element).rowSpan = value;
|
||||
}
|
||||
public static setRowSpan(element: View, value: number): void {
|
||||
validateArgs(element).rowSpan = value;
|
||||
}
|
||||
|
||||
public addRow(itemSpec: ItemSpec) {
|
||||
validateItemSpec(itemSpec);
|
||||
itemSpec.owner = this;
|
||||
this._rows.push(itemSpec);
|
||||
this._onRowAdded(itemSpec);
|
||||
this.invalidate();
|
||||
}
|
||||
public addRow(itemSpec: ItemSpec) {
|
||||
validateItemSpec(itemSpec);
|
||||
itemSpec.owner = this;
|
||||
this._rows.push(itemSpec);
|
||||
this._onRowAdded(itemSpec);
|
||||
this.invalidate();
|
||||
}
|
||||
|
||||
public addColumn(itemSpec: ItemSpec) {
|
||||
validateItemSpec(itemSpec);
|
||||
itemSpec.owner = this;
|
||||
this._cols.push(itemSpec);
|
||||
this._onColumnAdded(itemSpec);
|
||||
this.invalidate();
|
||||
}
|
||||
public addColumn(itemSpec: ItemSpec) {
|
||||
validateItemSpec(itemSpec);
|
||||
itemSpec.owner = this;
|
||||
this._cols.push(itemSpec);
|
||||
this._onColumnAdded(itemSpec);
|
||||
this.invalidate();
|
||||
}
|
||||
|
||||
public addChildAtCell(view: View, row: number, column: number, rowSpan?: number, columnSpan?: number): void {
|
||||
this.addChild(view);
|
||||
GridLayoutBase.setRow(view, row);
|
||||
GridLayoutBase.setColumn(view, column);
|
||||
if (rowSpan) {
|
||||
GridLayoutBase.setRowSpan(view, rowSpan);
|
||||
}
|
||||
if (columnSpan) {
|
||||
GridLayoutBase.setColumnSpan(view, columnSpan);
|
||||
}
|
||||
}
|
||||
public addChildAtCell(
|
||||
view: View,
|
||||
row: number,
|
||||
column: number,
|
||||
rowSpan?: number,
|
||||
columnSpan?: number
|
||||
): void {
|
||||
this.addChild(view);
|
||||
GridLayoutBase.setRow(view, row);
|
||||
GridLayoutBase.setColumn(view, column);
|
||||
if (rowSpan) {
|
||||
GridLayoutBase.setRowSpan(view, rowSpan);
|
||||
}
|
||||
if (columnSpan) {
|
||||
GridLayoutBase.setColumnSpan(view, columnSpan);
|
||||
}
|
||||
}
|
||||
|
||||
public removeRow(itemSpec: ItemSpec): void {
|
||||
if (!itemSpec) {
|
||||
throw new Error("Value is null.");
|
||||
}
|
||||
public removeRow(itemSpec: ItemSpec): void {
|
||||
if (!itemSpec) {
|
||||
throw new Error("Value is null.");
|
||||
}
|
||||
|
||||
const index = this._rows.indexOf(itemSpec);
|
||||
if (itemSpec.owner !== this || index < 0) {
|
||||
throw new Error("Row is not child of this GridLayout");
|
||||
}
|
||||
const index = this._rows.indexOf(itemSpec);
|
||||
if (itemSpec.owner !== this || index < 0) {
|
||||
throw new Error("Row is not child of this GridLayout");
|
||||
}
|
||||
|
||||
itemSpec.index = -1;
|
||||
this._rows.splice(index, 1);
|
||||
this._onRowRemoved(itemSpec, index);
|
||||
this.invalidate();
|
||||
}
|
||||
itemSpec.index = -1;
|
||||
this._rows.splice(index, 1);
|
||||
this._onRowRemoved(itemSpec, index);
|
||||
this.invalidate();
|
||||
}
|
||||
|
||||
public removeColumn(itemSpec: ItemSpec): void {
|
||||
if (!itemSpec) {
|
||||
throw new Error("Value is null.");
|
||||
}
|
||||
public removeColumn(itemSpec: ItemSpec): void {
|
||||
if (!itemSpec) {
|
||||
throw new Error("Value is null.");
|
||||
}
|
||||
|
||||
const index = this._cols.indexOf(itemSpec);
|
||||
if (itemSpec.owner !== this || index < 0) {
|
||||
throw new Error("Column is not child of this GridLayout");
|
||||
}
|
||||
const index = this._cols.indexOf(itemSpec);
|
||||
if (itemSpec.owner !== this || index < 0) {
|
||||
throw new Error("Column is not child of this GridLayout");
|
||||
}
|
||||
|
||||
itemSpec.index = -1;
|
||||
this._cols.splice(index, 1);
|
||||
this._onColumnRemoved(itemSpec, index);
|
||||
this.invalidate();
|
||||
}
|
||||
itemSpec.index = -1;
|
||||
this._cols.splice(index, 1);
|
||||
this._onColumnRemoved(itemSpec, index);
|
||||
this.invalidate();
|
||||
}
|
||||
|
||||
public removeColumns() {
|
||||
for (let i = this._cols.length - 1; i >= 0; i--) {
|
||||
const colSpec = this._cols[i];
|
||||
this._onColumnRemoved(colSpec, i);
|
||||
colSpec.index = -1;
|
||||
}
|
||||
this._cols.length = 0;
|
||||
this.invalidate();
|
||||
}
|
||||
public removeColumns() {
|
||||
for (let i = this._cols.length - 1; i >= 0; i--) {
|
||||
const colSpec = this._cols[i];
|
||||
this._onColumnRemoved(colSpec, i);
|
||||
colSpec.index = -1;
|
||||
}
|
||||
this._cols.length = 0;
|
||||
this.invalidate();
|
||||
}
|
||||
|
||||
public removeRows() {
|
||||
for (let i = this._rows.length - 1; i >= 0; i--) {
|
||||
const rowSpec = this._rows[i];
|
||||
this._onRowRemoved(rowSpec, i);
|
||||
rowSpec.index = -1;
|
||||
}
|
||||
this._rows.length = 0;
|
||||
this.invalidate();
|
||||
}
|
||||
public removeRows() {
|
||||
for (let i = this._rows.length - 1; i >= 0; i--) {
|
||||
const rowSpec = this._rows[i];
|
||||
this._onRowRemoved(rowSpec, i);
|
||||
rowSpec.index = -1;
|
||||
}
|
||||
this._rows.length = 0;
|
||||
this.invalidate();
|
||||
}
|
||||
|
||||
public onRowChanged(element: View, oldValue: number, newValue: number) {
|
||||
this.invalidate();
|
||||
}
|
||||
public onRowChanged(element: View, oldValue: number, newValue: number) {
|
||||
this.invalidate();
|
||||
}
|
||||
|
||||
public onRowSpanChanged(element: View, oldValue: number, newValue: number) {
|
||||
this.invalidate();
|
||||
}
|
||||
public onRowSpanChanged(element: View, oldValue: number, newValue: number) {
|
||||
this.invalidate();
|
||||
}
|
||||
|
||||
public onColumnChanged(element: View, oldValue: number, newValue: number) {
|
||||
this.invalidate();
|
||||
}
|
||||
public onColumnChanged(element: View, oldValue: number, newValue: number) {
|
||||
this.invalidate();
|
||||
}
|
||||
|
||||
public onColumnSpanChanged(element: View, oldValue: number, newValue: number) {
|
||||
this.invalidate();
|
||||
}
|
||||
public onColumnSpanChanged(
|
||||
element: View,
|
||||
oldValue: number,
|
||||
newValue: number
|
||||
) {
|
||||
this.invalidate();
|
||||
}
|
||||
|
||||
public _onRowAdded(itemSpec: ItemSpec) {
|
||||
//
|
||||
}
|
||||
public _onRowAdded(itemSpec: ItemSpec) {
|
||||
//
|
||||
}
|
||||
|
||||
public _onColumnAdded(itemSpec: ItemSpec) {
|
||||
//
|
||||
}
|
||||
public _onColumnAdded(itemSpec: ItemSpec) {
|
||||
//
|
||||
}
|
||||
|
||||
public _onRowRemoved(itemSpec: ItemSpec, index: number): void {
|
||||
//
|
||||
}
|
||||
public _onRowRemoved(itemSpec: ItemSpec, index: number): void {
|
||||
//
|
||||
}
|
||||
|
||||
public _onColumnRemoved(itemSpec: ItemSpec, index: number): void {
|
||||
//
|
||||
}
|
||||
public _onColumnRemoved(itemSpec: ItemSpec, index: number): void {
|
||||
//
|
||||
}
|
||||
|
||||
public getColumns(): Array<ItemSpec> {
|
||||
return this._cols.slice();
|
||||
}
|
||||
public getColumns(): Array<ItemSpec> {
|
||||
return this._cols.slice();
|
||||
}
|
||||
|
||||
public getRows(): Array<ItemSpec> {
|
||||
return this._rows.slice();
|
||||
}
|
||||
public getRows(): Array<ItemSpec> {
|
||||
return this._rows.slice();
|
||||
}
|
||||
|
||||
protected get columnsInternal(): Array<ItemSpec> {
|
||||
return this._cols;
|
||||
}
|
||||
protected get columnsInternal(): Array<ItemSpec> {
|
||||
return this._cols;
|
||||
}
|
||||
|
||||
protected get rowsInternal(): Array<ItemSpec> {
|
||||
return this._rows;
|
||||
}
|
||||
protected get rowsInternal(): Array<ItemSpec> {
|
||||
return this._rows;
|
||||
}
|
||||
|
||||
protected invalidate(): void {
|
||||
// handled natively in android and overridden in ios.
|
||||
}
|
||||
protected invalidate(): void {
|
||||
// handled natively in android and overridden in ios.
|
||||
}
|
||||
|
||||
set rows(value: string) {
|
||||
this.removeRows();
|
||||
parseAndAddItemSpecs(value, (spec: ItemSpec) => this.addRow(spec));
|
||||
}
|
||||
set rows(value: string) {
|
||||
this.removeRows();
|
||||
parseAndAddItemSpecs(value, (spec: ItemSpec) => this.addRow(spec));
|
||||
}
|
||||
|
||||
set columns(value: string) {
|
||||
this.removeColumns();
|
||||
parseAndAddItemSpecs(value, (spec: ItemSpec) => this.addColumn(spec));
|
||||
}
|
||||
set columns(value: string) {
|
||||
this.removeColumns();
|
||||
parseAndAddItemSpecs(value, (spec: ItemSpec) => this.addColumn(spec));
|
||||
}
|
||||
}
|
||||
|
||||
GridLayoutBase.prototype.recycleNativeView = "auto";
|
||||
|
||||
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: "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)),
|
||||
});
|
||||
columnProperty.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: "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)),
|
||||
});
|
||||
columnSpanProperty.register(View);
|
||||
|
||||
export const rowProperty = new Property<View, number>({
|
||||
name: "row", defaultValue: 0,
|
||||
valueChanged: (target, oldValue, newValue) => {
|
||||
const grid = target.parent;
|
||||
if (grid instanceof GridLayoutBase) {
|
||||
grid.onRowChanged(target, oldValue, newValue);
|
||||
}
|
||||
},
|
||||
valueConverter: (v) => Math.max(0, parseInt(v))
|
||||
name: "row",
|
||||
defaultValue: 0,
|
||||
valueChanged: (target, oldValue, newValue) => {
|
||||
const grid = target.parent;
|
||||
if (grid instanceof GridLayoutBase) {
|
||||
grid.onRowChanged(target, oldValue, newValue);
|
||||
}
|
||||
},
|
||||
valueConverter: (v) => Math.max(0, parseInt(v)),
|
||||
});
|
||||
rowProperty.register(View);
|
||||
|
||||
export const rowSpanProperty = new Property<View, number>({
|
||||
name: "rowSpan", defaultValue: 1,
|
||||
valueChanged: (target, oldValue, newValue) => {
|
||||
const grid = target.parent;
|
||||
if (grid instanceof GridLayoutBase) {
|
||||
grid.onRowSpanChanged(target, oldValue, newValue);
|
||||
}
|
||||
},
|
||||
valueConverter: (v) => Math.max(1, parseInt(v))
|
||||
name: "rowSpan",
|
||||
defaultValue: 1,
|
||||
valueChanged: (target, oldValue, newValue) => {
|
||||
const grid = target.parent;
|
||||
if (grid instanceof GridLayoutBase) {
|
||||
grid.onRowSpanChanged(target, oldValue, newValue);
|
||||
}
|
||||
},
|
||||
valueConverter: (v) => Math.max(1, parseInt(v)),
|
||||
});
|
||||
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<GridUnitType>(isValid);
|
||||
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<GridUnitType>(isValid);
|
||||
}
|
||||
|
||||
@@ -1,116 +1,150 @@
|
||||
import {
|
||||
GridLayoutBase, ItemSpec as ItemSpecBase,
|
||||
rowProperty, columnProperty, rowSpanProperty, columnSpanProperty, GridUnitType
|
||||
GridLayoutBase,
|
||||
ItemSpec as ItemSpecBase,
|
||||
rowProperty,
|
||||
columnProperty,
|
||||
rowSpanProperty,
|
||||
columnSpanProperty,
|
||||
GridUnitType,
|
||||
} from "./grid-layout-common";
|
||||
import { View } from "../../core/view";
|
||||
import { layout } from "../../../utils/utils";
|
||||
|
||||
export * from "./grid-layout-common";
|
||||
|
||||
function makeNativeSetter<T>(setter: (lp: org.nativescript.widgets.CommonLayoutParams, value: T) => void) {
|
||||
return function (this: View, value: T) {
|
||||
const nativeView: android.view.View = this.nativeViewProtected;
|
||||
const lp = nativeView.getLayoutParams() || new org.nativescript.widgets.CommonLayoutParams();
|
||||
if (lp instanceof org.nativescript.widgets.CommonLayoutParams) {
|
||||
setter(lp, value);
|
||||
nativeView.setLayoutParams(lp);
|
||||
}
|
||||
};
|
||||
function makeNativeSetter<T>(
|
||||
setter: (lp: org.nativescript.widgets.CommonLayoutParams, value: T) => void
|
||||
) {
|
||||
return function (this: View, value: T) {
|
||||
const nativeView: android.view.View = this.nativeViewProtected;
|
||||
const lp =
|
||||
nativeView.getLayoutParams() ||
|
||||
new org.nativescript.widgets.CommonLayoutParams();
|
||||
if (lp instanceof org.nativescript.widgets.CommonLayoutParams) {
|
||||
setter(lp, value);
|
||||
nativeView.setLayoutParams(lp);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
View.prototype[rowProperty.setNative] = makeNativeSetter<number>((lp, value) => lp.row = value);
|
||||
View.prototype[columnProperty.setNative] = makeNativeSetter<number>((lp, value) => lp.column = value);
|
||||
View.prototype[rowSpanProperty.setNative] = makeNativeSetter<number>((lp, value) => lp.rowSpan = value);
|
||||
View.prototype[columnSpanProperty.setNative] = 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[rowSpanProperty.setNative] = makeNativeSetter<number>(
|
||||
(lp, value) => (lp.rowSpan = value)
|
||||
);
|
||||
View.prototype[columnSpanProperty.setNative] = makeNativeSetter<number>(
|
||||
(lp, value) => (lp.columnSpan = value)
|
||||
);
|
||||
|
||||
function createNativeSpec(itemSpec: ItemSpec): org.nativescript.widgets.ItemSpec {
|
||||
switch (itemSpec.gridUnitType) {
|
||||
case GridUnitType.AUTO:
|
||||
return new org.nativescript.widgets.ItemSpec(itemSpec.value, org.nativescript.widgets.GridUnitType.auto);
|
||||
function createNativeSpec(
|
||||
itemSpec: ItemSpec
|
||||
): org.nativescript.widgets.ItemSpec {
|
||||
switch (itemSpec.gridUnitType) {
|
||||
case GridUnitType.AUTO:
|
||||
return new org.nativescript.widgets.ItemSpec(
|
||||
itemSpec.value,
|
||||
org.nativescript.widgets.GridUnitType.auto
|
||||
);
|
||||
|
||||
case GridUnitType.STAR:
|
||||
return new org.nativescript.widgets.ItemSpec(itemSpec.value, org.nativescript.widgets.GridUnitType.star);
|
||||
case GridUnitType.STAR:
|
||||
return new org.nativescript.widgets.ItemSpec(
|
||||
itemSpec.value,
|
||||
org.nativescript.widgets.GridUnitType.star
|
||||
);
|
||||
|
||||
case GridUnitType.PIXEL:
|
||||
return new org.nativescript.widgets.ItemSpec(itemSpec.value * layout.getDisplayDensity(), org.nativescript.widgets.GridUnitType.pixel);
|
||||
case GridUnitType.PIXEL:
|
||||
return new org.nativescript.widgets.ItemSpec(
|
||||
itemSpec.value * layout.getDisplayDensity(),
|
||||
org.nativescript.widgets.GridUnitType.pixel
|
||||
);
|
||||
|
||||
default:
|
||||
throw new Error("Invalid gridUnitType: " + itemSpec.gridUnitType);
|
||||
}
|
||||
default:
|
||||
throw new Error("Invalid gridUnitType: " + itemSpec.gridUnitType);
|
||||
}
|
||||
}
|
||||
|
||||
export class ItemSpec extends ItemSpecBase {
|
||||
nativeSpec: org.nativescript.widgets.ItemSpec;
|
||||
nativeSpec: org.nativescript.widgets.ItemSpec;
|
||||
|
||||
public get actualLength(): number {
|
||||
if (this.nativeSpec) {
|
||||
return Math.round(this.nativeSpec.getActualLength() / layout.getDisplayDensity());
|
||||
}
|
||||
public get actualLength(): number {
|
||||
if (this.nativeSpec) {
|
||||
return Math.round(
|
||||
this.nativeSpec.getActualLength() / layout.getDisplayDensity()
|
||||
);
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
export class GridLayout extends GridLayoutBase {
|
||||
nativeViewProtected: org.nativescript.widgets.GridLayout;
|
||||
nativeViewProtected: org.nativescript.widgets.GridLayout;
|
||||
|
||||
public createNativeView() {
|
||||
return new org.nativescript.widgets.GridLayout(this._context);
|
||||
}
|
||||
public createNativeView() {
|
||||
return new org.nativescript.widgets.GridLayout(this._context);
|
||||
}
|
||||
|
||||
public initNativeView(): void {
|
||||
super.initNativeView();
|
||||
// Update native GridLayout
|
||||
this.rowsInternal.forEach((itemSpec: ItemSpec, index, rows) => { this._onRowAdded(itemSpec); }, this);
|
||||
this.columnsInternal.forEach((itemSpec: ItemSpec, index, rows) => { this._onColumnAdded(itemSpec); }, this);
|
||||
}
|
||||
public initNativeView(): void {
|
||||
super.initNativeView();
|
||||
// Update native GridLayout
|
||||
this.rowsInternal.forEach((itemSpec: ItemSpec, index, rows) => {
|
||||
this._onRowAdded(itemSpec);
|
||||
}, this);
|
||||
this.columnsInternal.forEach((itemSpec: ItemSpec, index, rows) => {
|
||||
this._onColumnAdded(itemSpec);
|
||||
}, this);
|
||||
}
|
||||
|
||||
public resetNativeView() {
|
||||
// Update native GridLayout
|
||||
for (let i = this.rowsInternal.length; i--; i >= 0) {
|
||||
const itemSpec = <ItemSpec>this.rowsInternal[i];
|
||||
this._onRowRemoved(itemSpec, i);
|
||||
}
|
||||
public resetNativeView() {
|
||||
// Update native GridLayout
|
||||
for (let i = this.rowsInternal.length; i--; i >= 0) {
|
||||
const itemSpec = <ItemSpec>this.rowsInternal[i];
|
||||
this._onRowRemoved(itemSpec, i);
|
||||
}
|
||||
|
||||
for (let i = this.columnsInternal.length; i--; i >= 0) {
|
||||
const itemSpec = <ItemSpec>this.columnsInternal[i];
|
||||
this._onColumnRemoved(itemSpec, i);
|
||||
}
|
||||
for (let i = this.columnsInternal.length; i--; i >= 0) {
|
||||
const itemSpec = <ItemSpec>this.columnsInternal[i];
|
||||
this._onColumnRemoved(itemSpec, i);
|
||||
}
|
||||
|
||||
super.resetNativeView();
|
||||
}
|
||||
super.resetNativeView();
|
||||
}
|
||||
|
||||
public _onRowAdded(itemSpec: ItemSpec) {
|
||||
if (this.nativeViewProtected) {
|
||||
const nativeSpec = createNativeSpec(itemSpec);
|
||||
itemSpec.nativeSpec = nativeSpec;
|
||||
this.nativeViewProtected.addRow(nativeSpec);
|
||||
}
|
||||
}
|
||||
public _onRowAdded(itemSpec: ItemSpec) {
|
||||
if (this.nativeViewProtected) {
|
||||
const nativeSpec = createNativeSpec(itemSpec);
|
||||
itemSpec.nativeSpec = nativeSpec;
|
||||
this.nativeViewProtected.addRow(nativeSpec);
|
||||
}
|
||||
}
|
||||
|
||||
public _onColumnAdded(itemSpec: ItemSpec) {
|
||||
if (this.nativeViewProtected) {
|
||||
const nativeSpec = createNativeSpec(itemSpec);
|
||||
itemSpec.nativeSpec = nativeSpec;
|
||||
this.nativeViewProtected.addColumn(nativeSpec);
|
||||
}
|
||||
}
|
||||
public _onColumnAdded(itemSpec: ItemSpec) {
|
||||
if (this.nativeViewProtected) {
|
||||
const nativeSpec = createNativeSpec(itemSpec);
|
||||
itemSpec.nativeSpec = nativeSpec;
|
||||
this.nativeViewProtected.addColumn(nativeSpec);
|
||||
}
|
||||
}
|
||||
|
||||
public _onRowRemoved(itemSpec: ItemSpec, index: number) {
|
||||
itemSpec.nativeSpec = null;
|
||||
if (this.nativeViewProtected) {
|
||||
this.nativeViewProtected.removeRowAt(index);
|
||||
}
|
||||
}
|
||||
public _onRowRemoved(itemSpec: ItemSpec, index: number) {
|
||||
itemSpec.nativeSpec = null;
|
||||
if (this.nativeViewProtected) {
|
||||
this.nativeViewProtected.removeRowAt(index);
|
||||
}
|
||||
}
|
||||
|
||||
public _onColumnRemoved(itemSpec: ItemSpec, index: number) {
|
||||
itemSpec.nativeSpec = null;
|
||||
if (this.nativeViewProtected) {
|
||||
this.nativeViewProtected.removeColumnAt(index);
|
||||
}
|
||||
}
|
||||
public _onColumnRemoved(itemSpec: ItemSpec, index: number) {
|
||||
itemSpec.nativeSpec = null;
|
||||
if (this.nativeViewProtected) {
|
||||
this.nativeViewProtected.removeColumnAt(index);
|
||||
}
|
||||
}
|
||||
|
||||
protected invalidate(): void {
|
||||
// No need to request layout for android because it will be done in the native call.
|
||||
}
|
||||
protected invalidate(): void {
|
||||
// No need to request layout for android because it will be done in the native call.
|
||||
}
|
||||
}
|
||||
|
||||
250
nativescript-core/ui/layouts/grid-layout/index.d.ts
vendored
250
nativescript-core/ui/layouts/grid-layout/index.d.ts
vendored
@@ -1,157 +1,161 @@
|
||||
import { LayoutBase } from "../layout-base";
|
||||
import { View } from '../../core/view';
|
||||
import { View } from "../../core/view";
|
||||
import { Property } from "../../core/properties";
|
||||
|
||||
/**
|
||||
* Defines row/column specific properties that apply to GridLayout elements.
|
||||
*/
|
||||
export class ItemSpec {
|
||||
constructor();
|
||||
constructor(value: number, type: GridUnitType);
|
||||
|
||||
constructor();
|
||||
constructor(value: number, type: GridUnitType);
|
||||
/**
|
||||
* Gets the actual length of an ItemSpec.
|
||||
*/
|
||||
actualLength: number;
|
||||
|
||||
/**
|
||||
* Gets the actual length of an ItemSpec.
|
||||
*/
|
||||
actualLength: number;
|
||||
/**
|
||||
* Returns unit type of this ItemSpec instance.
|
||||
*/
|
||||
gridUnitType: GridUnitType;
|
||||
|
||||
/**
|
||||
* Returns unit type of this ItemSpec instance.
|
||||
*/
|
||||
gridUnitType: GridUnitType;
|
||||
/**
|
||||
* Returns true if this ItemSpec instance holds
|
||||
* an absolute (pixel) value.
|
||||
*/
|
||||
isAbsolute: boolean;
|
||||
|
||||
/**
|
||||
* Returns true if this ItemSpec instance holds
|
||||
* an absolute (pixel) value.
|
||||
*/
|
||||
isAbsolute: boolean;
|
||||
/**
|
||||
* Returns true if this GridLength instance is
|
||||
* automatic (not specified).
|
||||
*/
|
||||
isAuto: boolean;
|
||||
|
||||
/**
|
||||
* Returns true if this GridLength instance is
|
||||
* automatic (not specified).
|
||||
*/
|
||||
isAuto: boolean;
|
||||
/**
|
||||
* Returns true if this ItemSpec instance holds weighted proportion
|
||||
* of available space.
|
||||
*/
|
||||
isStar: boolean;
|
||||
|
||||
/**
|
||||
* Returns true if this ItemSpec instance holds weighted proportion
|
||||
* of available space.
|
||||
*/
|
||||
isStar: boolean;
|
||||
|
||||
/**
|
||||
* Returns value part of this ItemSpec instance.
|
||||
*/
|
||||
value: number;
|
||||
/**
|
||||
* Returns value part of this ItemSpec instance.
|
||||
*/
|
||||
value: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines a rectangular layout area that consists of columns and rows.
|
||||
*/
|
||||
export class GridLayout extends LayoutBase {
|
||||
/**
|
||||
* Gets the value of the Column attached property from a given View.
|
||||
*/
|
||||
static getColumn(view: View): number;
|
||||
|
||||
/**
|
||||
* Gets the value of the Column attached property from a given View.
|
||||
*/
|
||||
static getColumn(view: View): number;
|
||||
/**
|
||||
* Sets the value of the Column attached property to a given View.
|
||||
*/
|
||||
static setColumn(view: View, value: number): void;
|
||||
|
||||
/**
|
||||
* Sets the value of the Column attached property to a given View.
|
||||
*/
|
||||
static setColumn(view: View, value: number): void;
|
||||
/**
|
||||
* Gets the value of the ColumnSpan attached property from a given View.
|
||||
*/
|
||||
static getColumnSpan(view: View): number;
|
||||
|
||||
/**
|
||||
* Gets the value of the ColumnSpan attached property from a given View.
|
||||
*/
|
||||
static getColumnSpan(view: View): number;
|
||||
/**
|
||||
* Sets the value of the ColumnSpan attached property to a given View.
|
||||
*/
|
||||
static setColumnSpan(view: View, value: number): void;
|
||||
|
||||
/**
|
||||
* Sets the value of the ColumnSpan attached property to a given View.
|
||||
*/
|
||||
static setColumnSpan(view: View, value: number): void;
|
||||
/**
|
||||
* Gets the value of the Row attached property from a given View.
|
||||
*/
|
||||
static getRow(view: View): number;
|
||||
|
||||
/**
|
||||
* Gets the value of the Row attached property from a given View.
|
||||
*/
|
||||
static getRow(view: View): number;
|
||||
/**
|
||||
* Sets the value of the Row attached property to a given View.
|
||||
*/
|
||||
static setRow(view: View, value: number): void;
|
||||
|
||||
/**
|
||||
* Sets the value of the Row attached property to a given View.
|
||||
*/
|
||||
static setRow(view: View, value: number): void;
|
||||
/**
|
||||
* Gets the value of the RowSpan attached property from a given View.
|
||||
*/
|
||||
static getRowSpan(view: View): number;
|
||||
|
||||
/**
|
||||
* Gets the value of the RowSpan attached property from a given View.
|
||||
*/
|
||||
static getRowSpan(view: View): number;
|
||||
/**
|
||||
* Sets the value of the RowSpan attached property to a given View.
|
||||
*/
|
||||
static setRowSpan(view: View, value: number): void;
|
||||
|
||||
/**
|
||||
* Sets the value of the RowSpan attached property to a given View.
|
||||
*/
|
||||
static setRowSpan(view: View, value: number): void;
|
||||
/**
|
||||
* Adds a column specification to a GridLayout.
|
||||
*/
|
||||
public addColumn(itemSpec: ItemSpec): void;
|
||||
|
||||
/**
|
||||
* Adds a column specification to a GridLayout.
|
||||
*/
|
||||
public addColumn(itemSpec: ItemSpec): void;
|
||||
/**
|
||||
* Adds a row specification to a GridLayout.
|
||||
*/
|
||||
public addRow(itemSpec: ItemSpec): void;
|
||||
|
||||
/**
|
||||
* Adds a row specification to a GridLayout.
|
||||
*/
|
||||
public addRow(itemSpec: ItemSpec): void;
|
||||
/**
|
||||
* Adds a child at specific cell in GridLayout. Optional rowSpan and columnSpan attributes
|
||||
*/
|
||||
public addChildAtCell(
|
||||
view: View,
|
||||
row: number,
|
||||
column: number,
|
||||
rowSpan?: number,
|
||||
columnSpan?: number
|
||||
): void;
|
||||
|
||||
/**
|
||||
* Adds a child at specific cell in GridLayout. Optional rowSpan and columnSpan attributes
|
||||
*/
|
||||
public addChildAtCell(view: View, row: number, column: number, rowSpan?: number, columnSpan?: number): void;
|
||||
/**
|
||||
* Removes a column specification from a GridLayout.
|
||||
*/
|
||||
public removeColumn(itemSpec: ItemSpec): void;
|
||||
|
||||
/**
|
||||
* Removes a column specification from a GridLayout.
|
||||
*/
|
||||
public removeColumn(itemSpec: ItemSpec): void;
|
||||
/**
|
||||
* Removes all column specifications from a GridLayout.
|
||||
*/
|
||||
public removeColumns(): void;
|
||||
|
||||
/**
|
||||
* Removes all column specifications from a GridLayout.
|
||||
*/
|
||||
public removeColumns(): void;
|
||||
/**
|
||||
* Removes a row specification from a GridLayout.
|
||||
*/
|
||||
public removeRow(itemSpec: ItemSpec): void;
|
||||
|
||||
/**
|
||||
* Removes a row specification from a GridLayout.
|
||||
*/
|
||||
public removeRow(itemSpec: ItemSpec): void;
|
||||
/**
|
||||
* Removes all row specifications from a GridLayout.
|
||||
*/
|
||||
public removeRows(): void;
|
||||
|
||||
/**
|
||||
* Removes all row specifications from a GridLayout.
|
||||
*/
|
||||
public removeRows(): void;
|
||||
/**
|
||||
* Gets array of column specifications defined on this instance of GridLayout.
|
||||
*/
|
||||
public getColumns(): Array<ItemSpec>;
|
||||
|
||||
/**
|
||||
* Gets array of column specifications defined on this instance of GridLayout.
|
||||
*/
|
||||
public getColumns(): Array<ItemSpec>;
|
||||
/**
|
||||
* Gets array of row specifications defined on this instance of GridLayout.
|
||||
*/
|
||||
public getRows(): Array<ItemSpec>;
|
||||
|
||||
/**
|
||||
* Gets array of row specifications defined on this instance of GridLayout.
|
||||
*/
|
||||
public getRows(): Array<ItemSpec>;
|
||||
|
||||
//@private
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
public _onRowAdded(itemSpec: ItemSpec): void;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
public _onColumnAdded(itemSpec: ItemSpec): void;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
public _onRowRemoved(itemSpec: ItemSpec, index: number): void;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
public _onColumnRemoved(itemSpec: ItemSpec, index: number): void;
|
||||
//@endprivate
|
||||
//@private
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
public _onRowAdded(itemSpec: ItemSpec): void;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
public _onColumnAdded(itemSpec: ItemSpec): void;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
public _onRowRemoved(itemSpec: ItemSpec, index: number): void;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
public _onColumnRemoved(itemSpec: ItemSpec, index: number): void;
|
||||
//@endprivate
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -176,9 +180,9 @@ export const rowSpanProperty: Property<View, 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;
|
||||
export const PIXEL: "pixel";
|
||||
export const STAR: "star";
|
||||
export const AUTO: "auto";
|
||||
export function isValid(value: any): boolean;
|
||||
export function parse(value: string): GridUnitType;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user