NativeScript/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.d.ts

import { LayoutBase, View, Style, CssProperty } from "ui/layouts/layout-base";

export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
export namespace FlexDirection {
    export const ROW: "row";
    export const ROW_REVERSE: "row-reverse";
    export const COLUMN: "column";
    export const COLUMN_REVERSE: "column-reverse";
    export function isValid(value: any): boolean;
    export function parse(value: string): FlexDirection;
}

export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
export namespace FlexWrap {
    export const NOWRAP: "nowrap";
    export const WRAP: "wrap";
    export const WRAP_REVERSE: "wrap-reverse";
    export function isValid(value: any): boolean;
    export function parse(value: string): FlexWrap;
}

export type JustifyContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around";
export namespace JustifyContent {
    export const FLEX_START: "flex-start";
    export const FLEX_END: "flex-end";
    export const CENTER: "center";
    export const SPACE_BETWEEN: "space-between";
    export const SPACE_AROUND: "space-around";
    export function isValid(value: any): boolean;
    export function parse(value: string): JustifyContent;
}

export type AlignItems = "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
export namespace AlignItems {
    export const FLEX_START: "flex-start";
    export const FLEX_END: "flex-end";
    export const CENTER: "center";
    export const BASELINE: "baseline";
    export const STRETCH: "stretch";
    export function isValid(value: any): boolean;
    export function parse(value: string): AlignItems;
}

export type AlignContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "stretch";
export namespace AlignContent {
    export const FLEX_START: "flex-start";
    export const FLEX_END: "flex-end";
    export const CENTER: "center";
    export const SPACE_BETWEEN: "space-between";
    export const SPACE_AROUND: "space-around";
    export const STRETCH: "stretch";
    export function isValid(value: any): boolean;
    export function parse(value: string): AlignContent;
}

/**
 * A flex order integer.
 */
export type Order = number;
export namespace Order {
    export function isValid(value: any): boolean;
    export function parse(value: string): Order;
}

/**
 * A flex-grow number. Negative values are invalid.
 */
export type FlexGrow = number;
export namespace FlexGrow {
    export function isValid(value: any): boolean;
    export function parse(value: string): FlexGrow;
}

/**
 * A flex-shrink number. Negative values are invalid.
 */
export type FlexShrink = number;
export namespace FlexShrink {
    export function isValid(value: any): boolean;
    export function parse(value: string): FlexShrink;
}

/**
 * A flex-wrap-before value. True, false or their string presentations "true" or "false".
 */
export type FlexWrapBefore = boolean;
export namespace FlexWrapBefore {
    export function isValid(value: any): boolean;
    export function parse(value: string): FlexWrapBefore;
}

export type AlignSelf = "auto" | AlignItems;
export namespace AlignSelf {
    export const AUTO: "auto";
    export const FLEX_START: "flex-start";
    export const FLEX_END: "flex-end";
    export const CENTER: "center";
    export const BASELINE: "baseline";
    export const STRETCH: "stretch";
    export function isValid(value: any): boolean;
    export function parse(value: string): AlignSelf;
}

export class FlexboxLayout extends LayoutBase {
    public flexDirection: FlexDirection;
    public flexWrap: FlexWrap;
    public justifyContent: JustifyContent;
    public alignItems: AlignItems;
    public alignContent: AlignContent;

    public static setOrder(view: View, order: number);
    public static getOrder(view: View): number;

    public static setFlexGrow(view: View, grow: number);
    public static getFlexGrow(view: View);

    public static setFlexShrink(view: View, shrink: number);
    public static getFlexShrink(view: View): number;

    public static setAlignSelf(view: View, align: AlignSelf);
    public static getAlignSelf(view: View): AlignSelf;

    public static setFlexWrapBefore(view: View, wrap: boolean);
    public static getFlexWrapBefore(view: View): boolean;
}

export const flexDirectionProperty: CssProperty<Style, FlexDirection>;
export const flexWrapProperty: CssProperty<Style, FlexWrap>;
export const justifyContentProperty: CssProperty<Style, JustifyContent>;
export const alignItemsProperty: CssProperty<Style, AlignItems>;

export const orderProperty: CssProperty<Style, Order>;
export const flexGrowProperty: CssProperty<Style, FlexGrow>;
export const flexShrinkProperty: CssProperty<Style, FlexShrink>;
export const flexWrapBeforeProperty: CssProperty<Style, FlexWrapBefore>;
export const alignSelfProperty: CssProperty<Style, AlignSelf>;