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,6 +1,12 @@
|
||||
import { LayoutBase } from "../layout-base";
|
||||
import { View, CSSType } from "../../core/view";
|
||||
import { CssProperty, ShorthandProperty, makeParser, makeValidator, unsetValue } from "../../core/properties";
|
||||
import {
|
||||
CssProperty,
|
||||
ShorthandProperty,
|
||||
makeParser,
|
||||
makeValidator,
|
||||
unsetValue,
|
||||
} from "../../core/properties";
|
||||
import { Style } from "../../styling/style";
|
||||
import { isIOS } from "../../../platform";
|
||||
|
||||
@@ -12,133 +18,180 @@ export const FLEX_SHRINK_DEFAULT = 1.0;
|
||||
|
||||
export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
|
||||
export namespace FlexDirection {
|
||||
export const ROW: "row" = "row";
|
||||
export const ROW_REVERSE: "row-reverse" = "row-reverse";
|
||||
export const COLUMN: "column" = "column";
|
||||
export const COLUMN_REVERSE: "column-reverse" = "column-reverse";
|
||||
export const ROW: "row" = "row";
|
||||
export const ROW_REVERSE: "row-reverse" = "row-reverse";
|
||||
export const COLUMN: "column" = "column";
|
||||
export const COLUMN_REVERSE: "column-reverse" = "column-reverse";
|
||||
|
||||
export const isValid = makeValidator<FlexDirection>(ROW, ROW_REVERSE, COLUMN, COLUMN_REVERSE);
|
||||
export const parse = makeParser<FlexDirection>(isValid);
|
||||
export const isValid = makeValidator<FlexDirection>(
|
||||
ROW,
|
||||
ROW_REVERSE,
|
||||
COLUMN,
|
||||
COLUMN_REVERSE
|
||||
);
|
||||
export const parse = makeParser<FlexDirection>(isValid);
|
||||
}
|
||||
|
||||
export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
|
||||
export namespace FlexWrap {
|
||||
export const NOWRAP: "nowrap" = "nowrap";
|
||||
export const WRAP: "wrap" = "wrap";
|
||||
export const WRAP_REVERSE: "wrap-reverse" = "wrap-reverse";
|
||||
export const NOWRAP: "nowrap" = "nowrap";
|
||||
export const WRAP: "wrap" = "wrap";
|
||||
export const WRAP_REVERSE: "wrap-reverse" = "wrap-reverse";
|
||||
|
||||
export const isValid = makeValidator<FlexWrap>(NOWRAP, WRAP, WRAP_REVERSE);
|
||||
export const parse = makeParser<FlexWrap>(isValid);
|
||||
export const isValid = makeValidator<FlexWrap>(NOWRAP, WRAP, WRAP_REVERSE);
|
||||
export const parse = makeParser<FlexWrap>(isValid);
|
||||
}
|
||||
|
||||
export type JustifyContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around";
|
||||
export type JustifyContent =
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "center"
|
||||
| "space-between"
|
||||
| "space-around";
|
||||
export namespace JustifyContent {
|
||||
export const FLEX_START: "flex-start" = "flex-start";
|
||||
export const FLEX_END: "flex-end" = "flex-end";
|
||||
export const CENTER: "center" = "center";
|
||||
export const SPACE_BETWEEN: "space-between" = "space-between";
|
||||
export const SPACE_AROUND: "space-around" = "space-around";
|
||||
export const FLEX_START: "flex-start" = "flex-start";
|
||||
export const FLEX_END: "flex-end" = "flex-end";
|
||||
export const CENTER: "center" = "center";
|
||||
export const SPACE_BETWEEN: "space-between" = "space-between";
|
||||
export const SPACE_AROUND: "space-around" = "space-around";
|
||||
|
||||
export const isValid = makeValidator<JustifyContent>(FLEX_START, FLEX_END, CENTER, SPACE_BETWEEN, SPACE_AROUND);
|
||||
export const parse = makeParser<JustifyContent>(isValid);
|
||||
export const isValid = makeValidator<JustifyContent>(
|
||||
FLEX_START,
|
||||
FLEX_END,
|
||||
CENTER,
|
||||
SPACE_BETWEEN,
|
||||
SPACE_AROUND
|
||||
);
|
||||
export const parse = makeParser<JustifyContent>(isValid);
|
||||
}
|
||||
|
||||
export type FlexBasisPercent = number;
|
||||
export namespace FlexBasisPercent {
|
||||
export const DEFAULT: number = -1;
|
||||
export const DEFAULT: number = -1;
|
||||
}
|
||||
|
||||
export type AlignItems = "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
|
||||
export type AlignItems =
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "center"
|
||||
| "baseline"
|
||||
| "stretch";
|
||||
export namespace AlignItems {
|
||||
export const FLEX_START: "flex-start" = "flex-start";
|
||||
export const FLEX_END: "flex-end" = "flex-end";
|
||||
export const CENTER: "center" = "center";
|
||||
export const BASELINE: "baseline" = "baseline";
|
||||
export const STRETCH: "stretch" = "stretch";
|
||||
export const FLEX_START: "flex-start" = "flex-start";
|
||||
export const FLEX_END: "flex-end" = "flex-end";
|
||||
export const CENTER: "center" = "center";
|
||||
export const BASELINE: "baseline" = "baseline";
|
||||
export const STRETCH: "stretch" = "stretch";
|
||||
|
||||
export const isValid = makeValidator<AlignItems>(FLEX_START, FLEX_END, CENTER, BASELINE, STRETCH);
|
||||
export const parse = makeParser<AlignItems>(isValid);
|
||||
export const isValid = makeValidator<AlignItems>(
|
||||
FLEX_START,
|
||||
FLEX_END,
|
||||
CENTER,
|
||||
BASELINE,
|
||||
STRETCH
|
||||
);
|
||||
export const parse = makeParser<AlignItems>(isValid);
|
||||
}
|
||||
|
||||
export type AlignContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "stretch";
|
||||
export type AlignContent =
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "center"
|
||||
| "space-between"
|
||||
| "space-around"
|
||||
| "stretch";
|
||||
export namespace AlignContent {
|
||||
export const FLEX_START: "flex-start" = "flex-start";
|
||||
export const FLEX_END: "flex-end" = "flex-end";
|
||||
export const CENTER: "center" = "center";
|
||||
export const SPACE_BETWEEN: "space-between" = "space-between";
|
||||
export const SPACE_AROUND: "space-around" = "space-around";
|
||||
export const STRETCH: "stretch" = "stretch";
|
||||
export const FLEX_START: "flex-start" = "flex-start";
|
||||
export const FLEX_END: "flex-end" = "flex-end";
|
||||
export const CENTER: "center" = "center";
|
||||
export const SPACE_BETWEEN: "space-between" = "space-between";
|
||||
export const SPACE_AROUND: "space-around" = "space-around";
|
||||
export const STRETCH: "stretch" = "stretch";
|
||||
|
||||
export const isValid = makeValidator<AlignContent>(FLEX_START, FLEX_END, CENTER, SPACE_BETWEEN, SPACE_AROUND, STRETCH);
|
||||
export const parse = makeParser<AlignContent>(isValid);
|
||||
export const isValid = makeValidator<AlignContent>(
|
||||
FLEX_START,
|
||||
FLEX_END,
|
||||
CENTER,
|
||||
SPACE_BETWEEN,
|
||||
SPACE_AROUND,
|
||||
STRETCH
|
||||
);
|
||||
export const parse = makeParser<AlignContent>(isValid);
|
||||
}
|
||||
|
||||
export type Order = number;
|
||||
export namespace Order {
|
||||
export function isValid(value): boolean {
|
||||
return isFinite(parseInt(value));
|
||||
}
|
||||
export const parse = parseInt;
|
||||
export function isValid(value): boolean {
|
||||
return isFinite(parseInt(value));
|
||||
}
|
||||
export const parse = parseInt;
|
||||
}
|
||||
|
||||
export type FlexGrow = number;
|
||||
export namespace FlexGrow {
|
||||
export function isValid(value: any): boolean {
|
||||
const parsed = parseInt(value);
|
||||
export function isValid(value: any): boolean {
|
||||
const parsed = parseInt(value);
|
||||
|
||||
return isFinite(parsed) && value >= 0;
|
||||
}
|
||||
export const parse = parseFloat;
|
||||
return isFinite(parsed) && value >= 0;
|
||||
}
|
||||
export const parse = parseFloat;
|
||||
}
|
||||
|
||||
export type FlexShrink = number;
|
||||
export namespace FlexShrink {
|
||||
export function isValid(value: any): boolean {
|
||||
const parsed = parseInt(value);
|
||||
export function isValid(value: any): boolean {
|
||||
const parsed = parseInt(value);
|
||||
|
||||
return isFinite(parsed) && value >= 0;
|
||||
}
|
||||
export const parse = parseFloat;
|
||||
return isFinite(parsed) && value >= 0;
|
||||
}
|
||||
export const parse = parseFloat;
|
||||
}
|
||||
|
||||
export type FlexWrapBefore = boolean;
|
||||
export namespace FlexWrapBefore {
|
||||
export function isValid(value) {
|
||||
if (typeof value === "boolean") {
|
||||
return true;
|
||||
}
|
||||
if (typeof value === "string") {
|
||||
const str = value.trim().toLowerCase();
|
||||
export function isValid(value) {
|
||||
if (typeof value === "boolean") {
|
||||
return true;
|
||||
}
|
||||
if (typeof value === "string") {
|
||||
const str = value.trim().toLowerCase();
|
||||
|
||||
return str === "true" || str === "false";
|
||||
}
|
||||
return str === "true" || str === "false";
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
export function parse(value: string): FlexWrapBefore {
|
||||
return value && value.toString().trim().toLowerCase() === "true";
|
||||
}
|
||||
return false;
|
||||
}
|
||||
export function parse(value: string): FlexWrapBefore {
|
||||
return value && value.toString().trim().toLowerCase() === "true";
|
||||
}
|
||||
}
|
||||
|
||||
export type AlignSelf = "auto" | AlignItems;
|
||||
export namespace AlignSelf {
|
||||
export const AUTO: "auto" = "auto";
|
||||
export const FLEX_START: "flex-start" = "flex-start";
|
||||
export const FLEX_END: "flex-end" = "flex-end";
|
||||
export const CENTER: "center" = "center";
|
||||
export const BASELINE: "baseline" = "baseline";
|
||||
export const STRETCH: "stretch" = "stretch";
|
||||
export const AUTO: "auto" = "auto";
|
||||
export const FLEX_START: "flex-start" = "flex-start";
|
||||
export const FLEX_END: "flex-end" = "flex-end";
|
||||
export const CENTER: "center" = "center";
|
||||
export const BASELINE: "baseline" = "baseline";
|
||||
export const STRETCH: "stretch" = "stretch";
|
||||
|
||||
export const isValid = makeValidator<AlignSelf>(AUTO, FLEX_START, FLEX_END, CENTER, BASELINE, STRETCH);
|
||||
export const parse = makeParser<AlignSelf>(isValid);
|
||||
export const isValid = makeValidator<AlignSelf>(
|
||||
AUTO,
|
||||
FLEX_START,
|
||||
FLEX_END,
|
||||
CENTER,
|
||||
BASELINE,
|
||||
STRETCH
|
||||
);
|
||||
export const parse = makeParser<AlignSelf>(isValid);
|
||||
}
|
||||
|
||||
function validateArgs(element: View): View {
|
||||
if (!element) {
|
||||
throw new Error("element cannot be null or undefinied.");
|
||||
}
|
||||
if (!element) {
|
||||
throw new Error("element cannot be null or undefinied.");
|
||||
}
|
||||
|
||||
return element;
|
||||
return element;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -146,242 +199,316 @@ function validateArgs(element: View): View {
|
||||
*/
|
||||
@CSSType("FlexboxLayout")
|
||||
export abstract class FlexboxLayoutBase extends LayoutBase {
|
||||
get flexDirection(): FlexDirection {
|
||||
return this.style.flexDirection;
|
||||
}
|
||||
set flexDirection(value: FlexDirection) {
|
||||
this.style.flexDirection = value;
|
||||
}
|
||||
get flexDirection(): FlexDirection {
|
||||
return this.style.flexDirection;
|
||||
}
|
||||
set flexDirection(value: FlexDirection) {
|
||||
this.style.flexDirection = value;
|
||||
}
|
||||
|
||||
get flexWrap(): FlexWrap {
|
||||
return this.style.flexWrap;
|
||||
}
|
||||
set flexWrap(value: FlexWrap) {
|
||||
this.style.flexWrap = value;
|
||||
}
|
||||
get flexWrap(): FlexWrap {
|
||||
return this.style.flexWrap;
|
||||
}
|
||||
set flexWrap(value: FlexWrap) {
|
||||
this.style.flexWrap = value;
|
||||
}
|
||||
|
||||
get justifyContent(): JustifyContent {
|
||||
return this.style.justifyContent;
|
||||
}
|
||||
set justifyContent(value: JustifyContent) {
|
||||
this.style.justifyContent = value;
|
||||
}
|
||||
get justifyContent(): JustifyContent {
|
||||
return this.style.justifyContent;
|
||||
}
|
||||
set justifyContent(value: JustifyContent) {
|
||||
this.style.justifyContent = value;
|
||||
}
|
||||
|
||||
get alignItems(): AlignItems {
|
||||
return this.style.alignItems;
|
||||
}
|
||||
set alignItems(value: AlignItems) {
|
||||
this.style.alignItems = value;
|
||||
}
|
||||
get alignItems(): AlignItems {
|
||||
return this.style.alignItems;
|
||||
}
|
||||
set alignItems(value: AlignItems) {
|
||||
this.style.alignItems = value;
|
||||
}
|
||||
|
||||
get alignContent(): AlignContent {
|
||||
return this.style.alignContent;
|
||||
}
|
||||
set alignContent(value: AlignContent) {
|
||||
this.style.alignContent = value;
|
||||
}
|
||||
get alignContent(): AlignContent {
|
||||
return this.style.alignContent;
|
||||
}
|
||||
set alignContent(value: AlignContent) {
|
||||
this.style.alignContent = value;
|
||||
}
|
||||
|
||||
public static setOrder(view: View, order: number) {
|
||||
validateArgs(view).style.order = order;
|
||||
}
|
||||
public static getOrder(view: View): number {
|
||||
return validateArgs(view).style.order;
|
||||
}
|
||||
public static setOrder(view: View, order: number) {
|
||||
validateArgs(view).style.order = order;
|
||||
}
|
||||
public static getOrder(view: View): number {
|
||||
return validateArgs(view).style.order;
|
||||
}
|
||||
|
||||
public static setFlexGrow(view: View, grow: number) {
|
||||
validateArgs(view).style.flexGrow = grow;
|
||||
}
|
||||
public static getFlexGrow(view: View) {
|
||||
return validateArgs(view).style.flexGrow;
|
||||
}
|
||||
public static setFlexGrow(view: View, grow: number) {
|
||||
validateArgs(view).style.flexGrow = grow;
|
||||
}
|
||||
public static getFlexGrow(view: View) {
|
||||
return validateArgs(view).style.flexGrow;
|
||||
}
|
||||
|
||||
public static setFlexShrink(view: View, shrink: number) {
|
||||
validateArgs(view).style.flexShrink = shrink;
|
||||
}
|
||||
public static getFlexShrink(view: View): number {
|
||||
return validateArgs(view).style.flexShrink;
|
||||
}
|
||||
public static setFlexShrink(view: View, shrink: number) {
|
||||
validateArgs(view).style.flexShrink = shrink;
|
||||
}
|
||||
public static getFlexShrink(view: View): number {
|
||||
return validateArgs(view).style.flexShrink;
|
||||
}
|
||||
|
||||
public static setAlignSelf(view: View, align: AlignSelf) {
|
||||
validateArgs(view).style.alignSelf = align;
|
||||
}
|
||||
public static getAlignSelf(view: View): AlignSelf {
|
||||
return validateArgs(view).style.alignSelf;
|
||||
}
|
||||
public static setAlignSelf(view: View, align: AlignSelf) {
|
||||
validateArgs(view).style.alignSelf = align;
|
||||
}
|
||||
public static getAlignSelf(view: View): AlignSelf {
|
||||
return validateArgs(view).style.alignSelf;
|
||||
}
|
||||
|
||||
public static setFlexWrapBefore(view: View, wrap: boolean) {
|
||||
validateArgs(view).style.flexWrapBefore = wrap;
|
||||
}
|
||||
public static getFlexWrapBefore(view: View): boolean {
|
||||
return validateArgs(view).style.flexWrapBefore;
|
||||
}
|
||||
public static setFlexWrapBefore(view: View, wrap: boolean) {
|
||||
validateArgs(view).style.flexWrapBefore = wrap;
|
||||
}
|
||||
public static getFlexWrapBefore(view: View): boolean {
|
||||
return validateArgs(view).style.flexWrapBefore;
|
||||
}
|
||||
}
|
||||
|
||||
FlexboxLayoutBase.prototype.recycleNativeView = "auto";
|
||||
|
||||
export const flexDirectionProperty = new CssProperty<Style, FlexDirection>({ name: "flexDirection", cssName: "flex-direction", defaultValue: FlexDirection.ROW, affectsLayout: isIOS, valueConverter: FlexDirection.parse });
|
||||
export const flexDirectionProperty = new CssProperty<Style, FlexDirection>({
|
||||
name: "flexDirection",
|
||||
cssName: "flex-direction",
|
||||
defaultValue: FlexDirection.ROW,
|
||||
affectsLayout: isIOS,
|
||||
valueConverter: FlexDirection.parse,
|
||||
});
|
||||
flexDirectionProperty.register(Style);
|
||||
|
||||
export const flexWrapProperty = new CssProperty<Style, FlexWrap>({ name: "flexWrap", cssName: "flex-wrap", defaultValue: "nowrap", affectsLayout: isIOS, valueConverter: FlexWrap.parse });
|
||||
export const flexWrapProperty = new CssProperty<Style, FlexWrap>({
|
||||
name: "flexWrap",
|
||||
cssName: "flex-wrap",
|
||||
defaultValue: "nowrap",
|
||||
affectsLayout: isIOS,
|
||||
valueConverter: FlexWrap.parse,
|
||||
});
|
||||
flexWrapProperty.register(Style);
|
||||
|
||||
export const justifyContentProperty = new CssProperty<Style, JustifyContent>({ name: "justifyContent", cssName: "justify-content", defaultValue: JustifyContent.FLEX_START, affectsLayout: isIOS, valueConverter: JustifyContent.parse });
|
||||
export const justifyContentProperty = new CssProperty<Style, JustifyContent>({
|
||||
name: "justifyContent",
|
||||
cssName: "justify-content",
|
||||
defaultValue: JustifyContent.FLEX_START,
|
||||
affectsLayout: isIOS,
|
||||
valueConverter: JustifyContent.parse,
|
||||
});
|
||||
justifyContentProperty.register(Style);
|
||||
|
||||
export const alignItemsProperty = new CssProperty<Style, AlignItems>({ name: "alignItems", cssName: "align-items", defaultValue: AlignItems.STRETCH, affectsLayout: isIOS, valueConverter: AlignItems.parse });
|
||||
export const alignItemsProperty = new CssProperty<Style, AlignItems>({
|
||||
name: "alignItems",
|
||||
cssName: "align-items",
|
||||
defaultValue: AlignItems.STRETCH,
|
||||
affectsLayout: isIOS,
|
||||
valueConverter: AlignItems.parse,
|
||||
});
|
||||
alignItemsProperty.register(Style);
|
||||
|
||||
export const alignContentProperty = new CssProperty<Style, AlignContent>({ name: "alignContent", cssName: "align-content", defaultValue: AlignContent.STRETCH, affectsLayout: isIOS, valueConverter: AlignContent.parse });
|
||||
export const alignContentProperty = new CssProperty<Style, AlignContent>({
|
||||
name: "alignContent",
|
||||
cssName: "align-content",
|
||||
defaultValue: AlignContent.STRETCH,
|
||||
affectsLayout: isIOS,
|
||||
valueConverter: AlignContent.parse,
|
||||
});
|
||||
alignContentProperty.register(Style);
|
||||
|
||||
export const orderProperty = new CssProperty<Style, Order>({ name: "order", cssName: "order", defaultValue: ORDER_DEFAULT, valueConverter: Order.parse });
|
||||
export const orderProperty = new CssProperty<Style, Order>({
|
||||
name: "order",
|
||||
cssName: "order",
|
||||
defaultValue: ORDER_DEFAULT,
|
||||
valueConverter: Order.parse,
|
||||
});
|
||||
orderProperty.register(Style);
|
||||
Object.defineProperty(View.prototype, "order", {
|
||||
get(this: View): Order {
|
||||
return this.style.order;
|
||||
},
|
||||
set(this: View, value: Order) {
|
||||
this.style.order = value;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
get(this: View): Order {
|
||||
return this.style.order;
|
||||
},
|
||||
set(this: View, value: Order) {
|
||||
this.style.order = value;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
export const flexGrowProperty = new CssProperty<Style, FlexGrow>({ name: "flexGrow", cssName: "flex-grow", defaultValue: FLEX_GROW_DEFAULT, valueConverter: FlexGrow.parse });
|
||||
export const flexGrowProperty = new CssProperty<Style, FlexGrow>({
|
||||
name: "flexGrow",
|
||||
cssName: "flex-grow",
|
||||
defaultValue: FLEX_GROW_DEFAULT,
|
||||
valueConverter: FlexGrow.parse,
|
||||
});
|
||||
flexGrowProperty.register(Style);
|
||||
Object.defineProperty(View.prototype, "flexGrow", {
|
||||
get(this: View): FlexGrow {
|
||||
return this.style.flexGrow;
|
||||
},
|
||||
set(this: View, value: FlexGrow) {
|
||||
this.style.flexGrow = value;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
get(this: View): FlexGrow {
|
||||
return this.style.flexGrow;
|
||||
},
|
||||
set(this: View, value: FlexGrow) {
|
||||
this.style.flexGrow = value;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
export const flexShrinkProperty = new CssProperty<Style, FlexShrink>({ name: "flexShrink", cssName: "flex-shrink", defaultValue: FLEX_SHRINK_DEFAULT, valueConverter: FlexShrink.parse });
|
||||
export const flexShrinkProperty = new CssProperty<Style, FlexShrink>({
|
||||
name: "flexShrink",
|
||||
cssName: "flex-shrink",
|
||||
defaultValue: FLEX_SHRINK_DEFAULT,
|
||||
valueConverter: FlexShrink.parse,
|
||||
});
|
||||
flexShrinkProperty.register(Style);
|
||||
Object.defineProperty(View.prototype, "flexShrink", {
|
||||
get(this: View): FlexShrink {
|
||||
return this.style.flexShrink;
|
||||
},
|
||||
set(this: View, value: FlexShrink) {
|
||||
this.style.flexShrink = value;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
get(this: View): FlexShrink {
|
||||
return this.style.flexShrink;
|
||||
},
|
||||
set(this: View, value: FlexShrink) {
|
||||
this.style.flexShrink = value;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
export const flexWrapBeforeProperty = new CssProperty<Style, FlexWrapBefore>({ name: "flexWrapBefore", cssName: "flex-wrap-before", defaultValue: false, valueConverter: FlexWrapBefore.parse });
|
||||
export const flexWrapBeforeProperty = new CssProperty<Style, FlexWrapBefore>({
|
||||
name: "flexWrapBefore",
|
||||
cssName: "flex-wrap-before",
|
||||
defaultValue: false,
|
||||
valueConverter: FlexWrapBefore.parse,
|
||||
});
|
||||
flexWrapBeforeProperty.register(Style);
|
||||
Object.defineProperty(View.prototype, "flexWrapBefore", {
|
||||
get(this: View): FlexWrapBefore {
|
||||
return this.style.flexWrapBefore;
|
||||
},
|
||||
set(this: View, value: FlexWrapBefore) {
|
||||
this.style.flexWrapBefore = value;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
get(this: View): FlexWrapBefore {
|
||||
return this.style.flexWrapBefore;
|
||||
},
|
||||
set(this: View, value: FlexWrapBefore) {
|
||||
this.style.flexWrapBefore = value;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
export const alignSelfProperty = new CssProperty<Style, AlignSelf>({ name: "alignSelf", cssName: "align-self", defaultValue: AlignSelf.AUTO, valueConverter: AlignSelf.parse });
|
||||
export const alignSelfProperty = new CssProperty<Style, AlignSelf>({
|
||||
name: "alignSelf",
|
||||
cssName: "align-self",
|
||||
defaultValue: AlignSelf.AUTO,
|
||||
valueConverter: AlignSelf.parse,
|
||||
});
|
||||
alignSelfProperty.register(Style);
|
||||
Object.defineProperty(View.prototype, "alignSelf", {
|
||||
get(this: View): AlignSelf {
|
||||
return this.style.alignSelf;
|
||||
},
|
||||
set(this: View, value: AlignSelf) {
|
||||
this.style.alignSelf = value;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
get(this: View): AlignSelf {
|
||||
return this.style.alignSelf;
|
||||
},
|
||||
set(this: View, value: AlignSelf) {
|
||||
this.style.alignSelf = value;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
// flex-flow: <flex-direction> || <flex-wrap>
|
||||
const flexFlowProperty = new ShorthandProperty<Style, string>({
|
||||
name: "flexFlow", cssName: "flex-flow",
|
||||
getter: function (this: Style) {
|
||||
return `${this.flexDirection} ${this.flexWrap}`;
|
||||
},
|
||||
converter: function (value: string) {
|
||||
const properties: [CssProperty<any, any>, any][] = [];
|
||||
if (value === unsetValue) {
|
||||
properties.push([flexDirectionProperty, value]);
|
||||
properties.push([flexWrapProperty, value]);
|
||||
} else {
|
||||
const trimmed = value && value.trim();
|
||||
if (trimmed) {
|
||||
const values = trimmed.split(/\s+/);
|
||||
if (values.length >= 1 && FlexDirection.isValid(values[0])) {
|
||||
properties.push([flexDirectionProperty, FlexDirection.parse(values[0])]);
|
||||
}
|
||||
if (value.length >= 2 && FlexWrap.isValid(values[1])) {
|
||||
properties.push([flexWrapProperty, FlexWrap.parse(values[1])]);
|
||||
}
|
||||
}
|
||||
}
|
||||
name: "flexFlow",
|
||||
cssName: "flex-flow",
|
||||
getter: function (this: Style) {
|
||||
return `${this.flexDirection} ${this.flexWrap}`;
|
||||
},
|
||||
converter: function (value: string) {
|
||||
const properties: [CssProperty<any, any>, any][] = [];
|
||||
if (value === unsetValue) {
|
||||
properties.push([flexDirectionProperty, value]);
|
||||
properties.push([flexWrapProperty, value]);
|
||||
} else {
|
||||
const trimmed = value && value.trim();
|
||||
if (trimmed) {
|
||||
const values = trimmed.split(/\s+/);
|
||||
if (values.length >= 1 && FlexDirection.isValid(values[0])) {
|
||||
properties.push([
|
||||
flexDirectionProperty,
|
||||
FlexDirection.parse(values[0]),
|
||||
]);
|
||||
}
|
||||
if (value.length >= 2 && FlexWrap.isValid(values[1])) {
|
||||
properties.push([
|
||||
flexWrapProperty,
|
||||
FlexWrap.parse(values[1]),
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return properties;
|
||||
}
|
||||
return properties;
|
||||
},
|
||||
});
|
||||
flexFlowProperty.register(Style);
|
||||
|
||||
// flex: inital | auto | none | <flex-grow> <flex-shrink> || <flex-basis>
|
||||
const flexProperty = new ShorthandProperty<Style, string>({
|
||||
name: "flex", cssName: "flex",
|
||||
getter: function (this: Style) {
|
||||
return `${this.flexGrow} ${this.flexShrink}`;
|
||||
},
|
||||
converter: function (value: string) {
|
||||
const properties: [CssProperty<any, any>, any][] = [];
|
||||
if (value === unsetValue) {
|
||||
properties.push([flexGrowProperty, value]);
|
||||
properties.push([flexShrinkProperty, value]);
|
||||
} else {
|
||||
const trimmed = value && value.trim();
|
||||
if (trimmed) {
|
||||
const values = trimmed.split(/\s+/);
|
||||
if (values.length === 1) {
|
||||
switch (values[0]) {
|
||||
case "inital":
|
||||
properties.push([flexGrowProperty, 0]);
|
||||
properties.push([flexShrinkProperty, 1]);
|
||||
// properties.push([flexBasisProperty, FlexBasis.AUTO])
|
||||
break;
|
||||
case "auto":
|
||||
properties.push([flexGrowProperty, 1]);
|
||||
properties.push([flexShrinkProperty, 1]);
|
||||
// properties.push([flexBasisProperty, FlexBasis.AUTO])
|
||||
break;
|
||||
case "none":
|
||||
properties.push([flexGrowProperty, 0]);
|
||||
properties.push([flexShrinkProperty, 0]);
|
||||
// properties.push([flexBasisProperty, FlexBasis.AUTO])
|
||||
break;
|
||||
default:
|
||||
if (FlexGrow.isValid(values[0])) {
|
||||
properties.push([flexGrowProperty, FlexGrow.parse(values[0])]);
|
||||
properties.push([flexShrinkProperty, 1]);
|
||||
// properties.push([flexBasisProperty, 0])
|
||||
}
|
||||
}
|
||||
}
|
||||
if (values.length >= 2) {
|
||||
if (FlexGrow.isValid(values[0]) && FlexShrink.isValid(values[1])) {
|
||||
properties.push([flexGrowProperty, FlexGrow.parse(values[0])]);
|
||||
properties.push([flexShrinkProperty, FlexShrink.parse(values[1])]);
|
||||
}
|
||||
}
|
||||
// if (value.length >= 3) {
|
||||
// properties.push({ property: flexBasisProperty, value: FlexBasis.parse(values[2])})
|
||||
// }
|
||||
}
|
||||
}
|
||||
name: "flex",
|
||||
cssName: "flex",
|
||||
getter: function (this: Style) {
|
||||
return `${this.flexGrow} ${this.flexShrink}`;
|
||||
},
|
||||
converter: function (value: string) {
|
||||
const properties: [CssProperty<any, any>, any][] = [];
|
||||
if (value === unsetValue) {
|
||||
properties.push([flexGrowProperty, value]);
|
||||
properties.push([flexShrinkProperty, value]);
|
||||
} else {
|
||||
const trimmed = value && value.trim();
|
||||
if (trimmed) {
|
||||
const values = trimmed.split(/\s+/);
|
||||
if (values.length === 1) {
|
||||
switch (values[0]) {
|
||||
case "inital":
|
||||
properties.push([flexGrowProperty, 0]);
|
||||
properties.push([flexShrinkProperty, 1]);
|
||||
// properties.push([flexBasisProperty, FlexBasis.AUTO])
|
||||
break;
|
||||
case "auto":
|
||||
properties.push([flexGrowProperty, 1]);
|
||||
properties.push([flexShrinkProperty, 1]);
|
||||
// properties.push([flexBasisProperty, FlexBasis.AUTO])
|
||||
break;
|
||||
case "none":
|
||||
properties.push([flexGrowProperty, 0]);
|
||||
properties.push([flexShrinkProperty, 0]);
|
||||
// properties.push([flexBasisProperty, FlexBasis.AUTO])
|
||||
break;
|
||||
default:
|
||||
if (FlexGrow.isValid(values[0])) {
|
||||
properties.push([
|
||||
flexGrowProperty,
|
||||
FlexGrow.parse(values[0]),
|
||||
]);
|
||||
properties.push([flexShrinkProperty, 1]);
|
||||
// properties.push([flexBasisProperty, 0])
|
||||
}
|
||||
}
|
||||
}
|
||||
if (values.length >= 2) {
|
||||
if (
|
||||
FlexGrow.isValid(values[0]) &&
|
||||
FlexShrink.isValid(values[1])
|
||||
) {
|
||||
properties.push([
|
||||
flexGrowProperty,
|
||||
FlexGrow.parse(values[0]),
|
||||
]);
|
||||
properties.push([
|
||||
flexShrinkProperty,
|
||||
FlexShrink.parse(values[1]),
|
||||
]);
|
||||
}
|
||||
}
|
||||
// if (value.length >= 3) {
|
||||
// properties.push({ property: flexBasisProperty, value: FlexBasis.parse(values[2])})
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
return properties;
|
||||
|
||||
}
|
||||
return properties;
|
||||
},
|
||||
});
|
||||
flexProperty.register(Style);
|
||||
|
||||
@@ -1,184 +1,222 @@
|
||||
import {
|
||||
FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent,
|
||||
FlexboxLayoutBase,
|
||||
orderProperty, Order,
|
||||
flexGrowProperty, FlexGrow,
|
||||
flexShrinkProperty, FlexShrink,
|
||||
flexWrapBeforeProperty, FlexWrapBefore,
|
||||
alignSelfProperty, AlignSelf,
|
||||
flexDirectionProperty, flexWrapProperty, justifyContentProperty, alignItemsProperty, alignContentProperty
|
||||
FlexDirection,
|
||||
FlexWrap,
|
||||
JustifyContent,
|
||||
AlignItems,
|
||||
AlignContent,
|
||||
FlexboxLayoutBase,
|
||||
orderProperty,
|
||||
Order,
|
||||
flexGrowProperty,
|
||||
FlexGrow,
|
||||
flexShrinkProperty,
|
||||
FlexShrink,
|
||||
flexWrapBeforeProperty,
|
||||
FlexWrapBefore,
|
||||
alignSelfProperty,
|
||||
AlignSelf,
|
||||
flexDirectionProperty,
|
||||
flexWrapProperty,
|
||||
justifyContentProperty,
|
||||
alignItemsProperty,
|
||||
alignContentProperty,
|
||||
} from "./flexbox-layout-common";
|
||||
import { View } from "../../core/view";
|
||||
import { Length, minHeightProperty, minWidthProperty } from "../../styling/style-properties";
|
||||
import { isIOS } from "../../../platform";
|
||||
import {
|
||||
Length,
|
||||
minHeightProperty,
|
||||
minWidthProperty,
|
||||
} from "../../styling/style-properties";
|
||||
import { isIOS } from "../../../platform";
|
||||
|
||||
export * from "./flexbox-layout-common";
|
||||
|
||||
let widgetFlexboxLayout: typeof org.nativescript.widgets.FlexboxLayout;
|
||||
let widgetLayoutParams: typeof org.nativescript.widgets.FlexboxLayout.LayoutParams;
|
||||
|
||||
function makeNativeSetter<T>(setter: (lp: org.nativescript.widgets.FlexboxLayout.LayoutParams, value: T) => void) {
|
||||
return function (this: View, value: T) {
|
||||
const nativeView: android.view.View = this.nativeViewProtected;
|
||||
const lp = nativeView.getLayoutParams() || new widgetLayoutParams();
|
||||
if (lp instanceof widgetLayoutParams) {
|
||||
setter(lp, value);
|
||||
nativeView.setLayoutParams(lp);
|
||||
}
|
||||
};
|
||||
function makeNativeSetter<T>(
|
||||
setter: (
|
||||
lp: org.nativescript.widgets.FlexboxLayout.LayoutParams,
|
||||
value: T
|
||||
) => void
|
||||
) {
|
||||
return function (this: View, value: T) {
|
||||
const nativeView: android.view.View = this.nativeViewProtected;
|
||||
const lp = nativeView.getLayoutParams() || new widgetLayoutParams();
|
||||
if (lp instanceof widgetLayoutParams) {
|
||||
setter(lp, value);
|
||||
nativeView.setLayoutParams(lp);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
View.prototype[orderProperty.setNative] = makeNativeSetter<Order>((lp, value) => lp.order = value);
|
||||
View.prototype[flexGrowProperty.setNative] = makeNativeSetter<FlexGrow>((lp, value) => lp.flexGrow = value);
|
||||
View.prototype[flexShrinkProperty.setNative] = makeNativeSetter<FlexShrink>((lp, value) => lp.flexShrink = value);
|
||||
View.prototype[flexWrapBeforeProperty.setNative] = makeNativeSetter<FlexWrapBefore>((lp, value) => lp.wrapBefore = value);
|
||||
View.prototype[alignSelfProperty.setNative] = makeNativeSetter<AlignSelf>((lp, value) => lp.alignSelf = alignSelfMap[value]);
|
||||
View.prototype[orderProperty.setNative] = makeNativeSetter<Order>(
|
||||
(lp, value) => (lp.order = value)
|
||||
);
|
||||
View.prototype[flexGrowProperty.setNative] = makeNativeSetter<FlexGrow>(
|
||||
(lp, value) => (lp.flexGrow = value)
|
||||
);
|
||||
View.prototype[flexShrinkProperty.setNative] = makeNativeSetter<FlexShrink>(
|
||||
(lp, value) => (lp.flexShrink = value)
|
||||
);
|
||||
View.prototype[flexWrapBeforeProperty.setNative] = makeNativeSetter<
|
||||
FlexWrapBefore
|
||||
>((lp, value) => (lp.wrapBefore = value));
|
||||
View.prototype[alignSelfProperty.setNative] = makeNativeSetter<AlignSelf>(
|
||||
(lp, value) => (lp.alignSelf = alignSelfMap[value])
|
||||
);
|
||||
|
||||
const flexDirectionMap = {
|
||||
[FlexDirection.ROW]: 0, //FlexboxLayoutWidget.FLEX_DIRECTION_ROW,
|
||||
[FlexDirection.ROW_REVERSE]: 1, //FlexboxLayoutWidget.FLEX_DIRECTION_ROW_REVERSE,
|
||||
[FlexDirection.COLUMN]: 2, //FlexboxLayoutWidget.FLEX_DIRECTION_COLUMN,
|
||||
[FlexDirection.COLUMN_REVERSE]: 3 //FlexboxLayoutWidget.FLEX_DIRECTION_COLUMN_REVERSE
|
||||
[FlexDirection.ROW]: 0, //FlexboxLayoutWidget.FLEX_DIRECTION_ROW,
|
||||
[FlexDirection.ROW_REVERSE]: 1, //FlexboxLayoutWidget.FLEX_DIRECTION_ROW_REVERSE,
|
||||
[FlexDirection.COLUMN]: 2, //FlexboxLayoutWidget.FLEX_DIRECTION_COLUMN,
|
||||
[FlexDirection.COLUMN_REVERSE]: 3, //FlexboxLayoutWidget.FLEX_DIRECTION_COLUMN_REVERSE
|
||||
};
|
||||
|
||||
const flexWrapMap = {
|
||||
[FlexWrap.NOWRAP]: 0, //FlexboxLayoutWidget.FLEX_WRAP_NOWRAP,
|
||||
[FlexWrap.WRAP]: 1, //FlexboxLayoutWidget.FLEX_WRAP_WRAP,
|
||||
[FlexWrap.WRAP_REVERSE]: 2 //FlexboxLayoutWidget.FLEX_WRAP_WRAP_REVERSE
|
||||
[FlexWrap.NOWRAP]: 0, //FlexboxLayoutWidget.FLEX_WRAP_NOWRAP,
|
||||
[FlexWrap.WRAP]: 1, //FlexboxLayoutWidget.FLEX_WRAP_WRAP,
|
||||
[FlexWrap.WRAP_REVERSE]: 2, //FlexboxLayoutWidget.FLEX_WRAP_WRAP_REVERSE
|
||||
};
|
||||
|
||||
const justifyContentMap = {
|
||||
[JustifyContent.FLEX_START]: 0, //FlexboxLayoutWidget.JUSTIFY_CONTENT_FLEX_START,
|
||||
[JustifyContent.FLEX_END]: 1, //FlexboxLayoutWidget.JUSTIFY_CONTENT_FLEX_END,
|
||||
[JustifyContent.CENTER]: 2, //FlexboxLayoutWidget.JUSTIFY_CONTENT_CENTER,
|
||||
[JustifyContent.SPACE_BETWEEN]: 3, //FlexboxLayoutWidget.JUSTIFY_CONTENT_SPACE_BETWEEN
|
||||
[JustifyContent.SPACE_AROUND]: 4 //FlexboxLayoutWidget.JUSTIFY_CONTENT_SPACE_AROUND,
|
||||
[JustifyContent.FLEX_START]: 0, //FlexboxLayoutWidget.JUSTIFY_CONTENT_FLEX_START,
|
||||
[JustifyContent.FLEX_END]: 1, //FlexboxLayoutWidget.JUSTIFY_CONTENT_FLEX_END,
|
||||
[JustifyContent.CENTER]: 2, //FlexboxLayoutWidget.JUSTIFY_CONTENT_CENTER,
|
||||
[JustifyContent.SPACE_BETWEEN]: 3, //FlexboxLayoutWidget.JUSTIFY_CONTENT_SPACE_BETWEEN
|
||||
[JustifyContent.SPACE_AROUND]: 4, //FlexboxLayoutWidget.JUSTIFY_CONTENT_SPACE_AROUND,
|
||||
};
|
||||
|
||||
const alignItemsMap = {
|
||||
[AlignItems.FLEX_START]: 0, //FlexboxLayoutWidget.ALIGN_ITEMS_FLEX_START,
|
||||
[AlignItems.FLEX_END]: 1, //FlexboxLayoutWidget.ALIGN_ITEMS_FLEX_END,
|
||||
[AlignItems.CENTER]: 2, //FlexboxLayoutWidget.ALIGN_ITEMS_CENTER,
|
||||
[AlignItems.BASELINE]: 3, //FlexboxLayoutWidget.ALIGN_ITEMS_BASELINE,
|
||||
[AlignItems.STRETCH]: 4 //FlexboxLayoutWidget.ALIGN_ITEMS_STRETCH
|
||||
[AlignItems.FLEX_START]: 0, //FlexboxLayoutWidget.ALIGN_ITEMS_FLEX_START,
|
||||
[AlignItems.FLEX_END]: 1, //FlexboxLayoutWidget.ALIGN_ITEMS_FLEX_END,
|
||||
[AlignItems.CENTER]: 2, //FlexboxLayoutWidget.ALIGN_ITEMS_CENTER,
|
||||
[AlignItems.BASELINE]: 3, //FlexboxLayoutWidget.ALIGN_ITEMS_BASELINE,
|
||||
[AlignItems.STRETCH]: 4, //FlexboxLayoutWidget.ALIGN_ITEMS_STRETCH
|
||||
};
|
||||
|
||||
const alignContentMap = {
|
||||
[AlignContent.FLEX_START]: 0, //FlexboxLayoutWidget.ALIGN_CONTENT_FLEX_START,
|
||||
[AlignContent.FLEX_END]: 1, //FlexboxLayoutWidget.ALIGN_CONTENT_FLEX_END,
|
||||
[AlignContent.CENTER]: 2, //FlexboxLayoutWidget.ALIGN_CONTENT_CENTER,
|
||||
[AlignContent.SPACE_BETWEEN]: 3, //FlexboxLayoutWidget.ALIGN_CONTENT_SPACE_BETWEEN,
|
||||
[AlignContent.SPACE_AROUND]: 4, //FlexboxLayoutWidget.ALIGN_CONTENT_SPACE_AROUND,
|
||||
[AlignContent.STRETCH]: 5 //FlexboxLayoutWidget.ALIGN_CONTENT_STRETCH
|
||||
[AlignContent.FLEX_START]: 0, //FlexboxLayoutWidget.ALIGN_CONTENT_FLEX_START,
|
||||
[AlignContent.FLEX_END]: 1, //FlexboxLayoutWidget.ALIGN_CONTENT_FLEX_END,
|
||||
[AlignContent.CENTER]: 2, //FlexboxLayoutWidget.ALIGN_CONTENT_CENTER,
|
||||
[AlignContent.SPACE_BETWEEN]: 3, //FlexboxLayoutWidget.ALIGN_CONTENT_SPACE_BETWEEN,
|
||||
[AlignContent.SPACE_AROUND]: 4, //FlexboxLayoutWidget.ALIGN_CONTENT_SPACE_AROUND,
|
||||
[AlignContent.STRETCH]: 5, //FlexboxLayoutWidget.ALIGN_CONTENT_STRETCH
|
||||
};
|
||||
|
||||
const alignSelfMap = {
|
||||
[AlignSelf.AUTO]: -1, //FlexboxLayoutWidget.LayoutParams.ALIGN_SELF_AUTO,
|
||||
[AlignSelf.FLEX_START]: 0, //FlexboxLayoutWidget.LayoutParams.ALIGN_SELF_FLEX_START,
|
||||
[AlignSelf.FLEX_END]: 1, //FlexboxLayoutWidget.LayoutParams.ALIGN_SELF_FLEX_END,
|
||||
[AlignSelf.CENTER]: 2, //FlexboxLayoutWidget.LayoutParams.ALIGN_SELF_CENTER,
|
||||
[AlignSelf.BASELINE]: 3, //FlexboxLayoutWidget.LayoutParams.ALIGN_SELF_BASELINE,
|
||||
[AlignSelf.STRETCH]: 4 //FlexboxLayoutWidget.LayoutParams.ALIGN_SELF_STRETCH
|
||||
[AlignSelf.AUTO]: -1, //FlexboxLayoutWidget.LayoutParams.ALIGN_SELF_AUTO,
|
||||
[AlignSelf.FLEX_START]: 0, //FlexboxLayoutWidget.LayoutParams.ALIGN_SELF_FLEX_START,
|
||||
[AlignSelf.FLEX_END]: 1, //FlexboxLayoutWidget.LayoutParams.ALIGN_SELF_FLEX_END,
|
||||
[AlignSelf.CENTER]: 2, //FlexboxLayoutWidget.LayoutParams.ALIGN_SELF_CENTER,
|
||||
[AlignSelf.BASELINE]: 3, //FlexboxLayoutWidget.LayoutParams.ALIGN_SELF_BASELINE,
|
||||
[AlignSelf.STRETCH]: 4, //FlexboxLayoutWidget.LayoutParams.ALIGN_SELF_STRETCH
|
||||
};
|
||||
|
||||
export class FlexboxLayout extends FlexboxLayoutBase {
|
||||
nativeViewProtected: org.nativescript.widgets.FlexboxLayout;
|
||||
nativeViewProtected: org.nativescript.widgets.FlexboxLayout;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
if (!widgetFlexboxLayout) {
|
||||
widgetFlexboxLayout = org.nativescript.widgets.FlexboxLayout;
|
||||
widgetLayoutParams = widgetFlexboxLayout.LayoutParams;
|
||||
}
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
if (!widgetFlexboxLayout) {
|
||||
widgetFlexboxLayout = org.nativescript.widgets.FlexboxLayout;
|
||||
widgetLayoutParams = widgetFlexboxLayout.LayoutParams;
|
||||
}
|
||||
}
|
||||
|
||||
public createNativeView() {
|
||||
return new widgetFlexboxLayout(this._context);
|
||||
}
|
||||
public createNativeView() {
|
||||
return new widgetFlexboxLayout(this._context);
|
||||
}
|
||||
|
||||
public resetNativeView(): void {
|
||||
super.resetNativeView();
|
||||
(<any>this.nativeViewProtected).invalidateOrdersCache();
|
||||
}
|
||||
public resetNativeView(): void {
|
||||
super.resetNativeView();
|
||||
(<any>this.nativeViewProtected).invalidateOrdersCache();
|
||||
}
|
||||
|
||||
[flexDirectionProperty.getDefault](): FlexDirection {
|
||||
return flexDirectionProperty.defaultValue;
|
||||
}
|
||||
[flexDirectionProperty.setNative](flexDirection: FlexDirection) {
|
||||
this.nativeViewProtected.setFlexDirection(flexDirectionMap[flexDirection]);
|
||||
}
|
||||
[flexDirectionProperty.getDefault](): FlexDirection {
|
||||
return flexDirectionProperty.defaultValue;
|
||||
}
|
||||
[flexDirectionProperty.setNative](flexDirection: FlexDirection) {
|
||||
this.nativeViewProtected.setFlexDirection(
|
||||
flexDirectionMap[flexDirection]
|
||||
);
|
||||
}
|
||||
|
||||
[flexWrapProperty.getDefault](): FlexWrap {
|
||||
return flexWrapProperty.defaultValue;
|
||||
}
|
||||
[flexWrapProperty.setNative](flexWrap: FlexWrap) {
|
||||
this.nativeViewProtected.setFlexWrap(flexWrapMap[flexWrap]);
|
||||
}
|
||||
[flexWrapProperty.getDefault](): FlexWrap {
|
||||
return flexWrapProperty.defaultValue;
|
||||
}
|
||||
[flexWrapProperty.setNative](flexWrap: FlexWrap) {
|
||||
this.nativeViewProtected.setFlexWrap(flexWrapMap[flexWrap]);
|
||||
}
|
||||
|
||||
[justifyContentProperty.getDefault](): JustifyContent {
|
||||
return justifyContentProperty.defaultValue;
|
||||
}
|
||||
[justifyContentProperty.setNative](justifyContent: JustifyContent) {
|
||||
this.nativeViewProtected.setJustifyContent(justifyContentMap[justifyContent]);
|
||||
}
|
||||
[justifyContentProperty.getDefault](): JustifyContent {
|
||||
return justifyContentProperty.defaultValue;
|
||||
}
|
||||
[justifyContentProperty.setNative](justifyContent: JustifyContent) {
|
||||
this.nativeViewProtected.setJustifyContent(
|
||||
justifyContentMap[justifyContent]
|
||||
);
|
||||
}
|
||||
|
||||
[alignItemsProperty.getDefault](): AlignItems {
|
||||
return alignItemsProperty.defaultValue;
|
||||
}
|
||||
[alignItemsProperty.setNative](alignItems: AlignItems) {
|
||||
this.nativeViewProtected.setAlignItems(alignItemsMap[alignItems]);
|
||||
}
|
||||
[alignItemsProperty.getDefault](): AlignItems {
|
||||
return alignItemsProperty.defaultValue;
|
||||
}
|
||||
[alignItemsProperty.setNative](alignItems: AlignItems) {
|
||||
this.nativeViewProtected.setAlignItems(alignItemsMap[alignItems]);
|
||||
}
|
||||
|
||||
[alignContentProperty.getDefault](): AlignContent {
|
||||
return alignContentProperty.defaultValue;
|
||||
}
|
||||
[alignContentProperty.setNative](alignContent: AlignContent) {
|
||||
this.nativeViewProtected.setAlignContent(alignContentMap[alignContent]);
|
||||
}
|
||||
[alignContentProperty.getDefault](): AlignContent {
|
||||
return alignContentProperty.defaultValue;
|
||||
}
|
||||
[alignContentProperty.setNative](alignContent: AlignContent) {
|
||||
this.nativeViewProtected.setAlignContent(alignContentMap[alignContent]);
|
||||
}
|
||||
|
||||
public _updateNativeLayoutParams(child: View): void {
|
||||
super._updateNativeLayoutParams(child);
|
||||
public _updateNativeLayoutParams(child: View): void {
|
||||
super._updateNativeLayoutParams(child);
|
||||
|
||||
// NOTE: If minWidth/Height is not set, the next code will clear the default native values for minWidth/Height.
|
||||
// Flex box will not respect the button default min width. Keeping this behavior for back-compatibility.
|
||||
this._setChildMinWidthNative(child, child.minWidth);
|
||||
this._setChildMinHeightNative(child, child.minHeight);
|
||||
// NOTE: If minWidth/Height is not set, the next code will clear the default native values for minWidth/Height.
|
||||
// Flex box will not respect the button default min width. Keeping this behavior for back-compatibility.
|
||||
this._setChildMinWidthNative(child, child.minWidth);
|
||||
this._setChildMinHeightNative(child, child.minHeight);
|
||||
|
||||
const lp = <org.nativescript.widgets.FlexboxLayout.LayoutParams>child.nativeViewProtected.getLayoutParams();
|
||||
const style = child.style;
|
||||
lp.order = style.order;
|
||||
lp.flexGrow = style.flexGrow;
|
||||
lp.flexShrink = style.flexShrink;
|
||||
lp.wrapBefore = style.flexWrapBefore;
|
||||
lp.alignSelf = alignSelfMap[style.alignSelf];
|
||||
child.nativeViewProtected.setLayoutParams(lp);
|
||||
}
|
||||
const lp = <org.nativescript.widgets.FlexboxLayout.LayoutParams>(
|
||||
child.nativeViewProtected.getLayoutParams()
|
||||
);
|
||||
const style = child.style;
|
||||
lp.order = style.order;
|
||||
lp.flexGrow = style.flexGrow;
|
||||
lp.flexShrink = style.flexShrink;
|
||||
lp.wrapBefore = style.flexWrapBefore;
|
||||
lp.alignSelf = alignSelfMap[style.alignSelf];
|
||||
child.nativeViewProtected.setLayoutParams(lp);
|
||||
}
|
||||
|
||||
public _setChildMinWidthNative(child: View, value: Length): void {
|
||||
// Check needed to maintain back-compat after https://github.com/NativeScript/NativeScript/pull/7804
|
||||
if (!child._ignoreFlexMinWidthHeightReset) {
|
||||
child._setMinWidthNative(0);
|
||||
}
|
||||
public _setChildMinWidthNative(child: View, value: Length): void {
|
||||
// Check needed to maintain back-compat after https://github.com/NativeScript/NativeScript/pull/7804
|
||||
if (!child._ignoreFlexMinWidthHeightReset) {
|
||||
child._setMinWidthNative(0);
|
||||
}
|
||||
|
||||
const nativeView = child.nativeViewProtected;
|
||||
const lp = nativeView.getLayoutParams();
|
||||
if (lp instanceof widgetLayoutParams) {
|
||||
lp.minWidth = Length.toDevicePixels(value, 0);
|
||||
nativeView.setLayoutParams(lp);
|
||||
}
|
||||
}
|
||||
const nativeView = child.nativeViewProtected;
|
||||
const lp = nativeView.getLayoutParams();
|
||||
if (lp instanceof widgetLayoutParams) {
|
||||
lp.minWidth = Length.toDevicePixels(value, 0);
|
||||
nativeView.setLayoutParams(lp);
|
||||
}
|
||||
}
|
||||
|
||||
public _setChildMinHeightNative(child: View, value: Length): void {
|
||||
// Check needed to maintain back-compat after https://github.com/NativeScript/NativeScript/pull/7804
|
||||
if (!child._ignoreFlexMinWidthHeightReset) {
|
||||
child._setMinHeightNative(0);
|
||||
}
|
||||
public _setChildMinHeightNative(child: View, value: Length): void {
|
||||
// Check needed to maintain back-compat after https://github.com/NativeScript/NativeScript/pull/7804
|
||||
if (!child._ignoreFlexMinWidthHeightReset) {
|
||||
child._setMinHeightNative(0);
|
||||
}
|
||||
|
||||
const nativeView = child.nativeViewProtected;
|
||||
const lp = nativeView.getLayoutParams();
|
||||
if (lp instanceof widgetLayoutParams) {
|
||||
lp.minHeight = Length.toDevicePixels(value, 0);
|
||||
nativeView.setLayoutParams(lp);
|
||||
}
|
||||
}
|
||||
const nativeView = child.nativeViewProtected;
|
||||
const lp = nativeView.getLayoutParams();
|
||||
if (lp instanceof widgetLayoutParams) {
|
||||
lp.minHeight = Length.toDevicePixels(value, 0);
|
||||
nativeView.setLayoutParams(lp);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,29 @@
|
||||
import { LayoutBase } from "../layout-base";
|
||||
import { Style } from '../../styling/style';
|
||||
import { Style } from "../../styling/style";
|
||||
import { CssProperty } from "../../core/properties";
|
||||
import { View } from '../../core/view';
|
||||
import { View } from "../../core/view";
|
||||
|
||||
export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
|
||||
export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
|
||||
export type JustifyContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around";
|
||||
export type AlignItems = "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
|
||||
export type AlignContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "stretch";
|
||||
export type JustifyContent =
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "center"
|
||||
| "space-between"
|
||||
| "space-around";
|
||||
export type AlignItems =
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "center"
|
||||
| "baseline"
|
||||
| "stretch";
|
||||
export type AlignContent =
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "center"
|
||||
| "space-between"
|
||||
| "space-around"
|
||||
| "stretch";
|
||||
|
||||
/**
|
||||
* A flex order integer.
|
||||
@@ -32,26 +48,26 @@ export type FlexWrapBefore = boolean;
|
||||
export type AlignSelf = "auto" | AlignItems;
|
||||
|
||||
export class FlexboxLayout extends LayoutBase {
|
||||
public flexDirection: FlexDirection;
|
||||
public flexWrap: FlexWrap;
|
||||
public justifyContent: JustifyContent;
|
||||
public alignItems: AlignItems;
|
||||
public alignContent: AlignContent;
|
||||
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 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 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 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 setAlignSelf(view: View, align: AlignSelf);
|
||||
public static getAlignSelf(view: View): AlignSelf;
|
||||
|
||||
public static setFlexWrapBefore(view: View, wrap: boolean);
|
||||
public static getFlexWrapBefore(view: View): boolean;
|
||||
public static setFlexWrapBefore(view: View, wrap: boolean);
|
||||
public static getFlexWrapBefore(view: View): boolean;
|
||||
}
|
||||
|
||||
export const flexDirectionProperty: CssProperty<Style, FlexDirection>;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user