mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
2bf7b07bf6
Make FlexboxLayout work with CSS properties, shorhands are not yet supported Make shorthand properties Remove redundant logging
373 lines
17 KiB
TypeScript
373 lines
17 KiB
TypeScript
import {LayoutBase} from "ui/layouts/layout-base";
|
|
import {View} from "ui/core/view";
|
|
import {PropertyMetadata} from "ui/core/proxy";
|
|
import {Property, PropertyMetadataSettings} from "ui/core/dependency-observable";
|
|
import {registerSpecialProperty} from "ui/builder/special-properties";
|
|
import {isAndroid} from "platform";
|
|
import {isString, isBoolean} from "utils/types";
|
|
import styleProperty = require("ui/styling/style-property");
|
|
import * as style from "ui/styling/style";
|
|
import * as flexbox from "ui/layouts/flexbox-layout";
|
|
|
|
declare module "ui/layouts/flexbox-layout" {
|
|
export function _onNativeOrderPropertyChanged(view: View, newValue: number): void;
|
|
export function _onNativeFlexGrowPropertyChanged(view: View, newValue: number): void;
|
|
export function _onNativeFlexShrinkPropertyChanged(view: View, newValue: number): void;
|
|
export function _onNativeAlignSelfPropertyChanged(view: View, newValue: AlignSelf): void;
|
|
export function _onNativeFlexWrapBeforePropertyChanged(view: View, newValue: boolean): void;
|
|
}
|
|
|
|
export type Basis = "auto" | number;
|
|
|
|
const ORDER_DEFAULT = 1;
|
|
const FLEX_GROW_DEFAULT = 0.0;
|
|
const FLEX_SHRINK_DEFAULT = 1.0;
|
|
|
|
function makeValidator<T>(... values: T[]): (value: any) => value is T {
|
|
const set = new Set(values);
|
|
return (value: any): value is T => set.has(value);
|
|
}
|
|
function makeParser<T>(isValid: (value: any) => boolean, def: T): (value: any) => T {
|
|
return value => {
|
|
const lower = value && value.toLowerCase();
|
|
return isValid(lower) ? lower : def;
|
|
}
|
|
}
|
|
|
|
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 isValid = makeValidator<FlexDirection>(ROW, ROW_REVERSE, COLUMN, COLUMN_REVERSE);
|
|
export const parse = makeParser(isValid, ROW);
|
|
}
|
|
|
|
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 isValid = makeValidator<FlexWrap>(NOWRAP, WRAP, WRAP_REVERSE);
|
|
export const parse = makeParser(isValid, NOWRAP);
|
|
}
|
|
|
|
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 isValid = makeValidator<JustifyContent>(FLEX_START, FLEX_END, CENTER, SPACE_BETWEEN, SPACE_AROUND);
|
|
export const parse = makeParser(isValid, FLEX_START);
|
|
}
|
|
|
|
export type FlexBasisPercent = number;
|
|
export namespace FlexBasisPercent {
|
|
export const DEFAULT: number = -1;
|
|
}
|
|
|
|
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 isValid = makeValidator<AlignItems>(FLEX_START, FLEX_END, CENTER, BASELINE, STRETCH);
|
|
export const parse = makeParser(isValid, FLEX_START);
|
|
}
|
|
|
|
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 isValid = makeValidator<AlignContent>(FLEX_START, FLEX_END, CENTER, SPACE_BETWEEN, SPACE_AROUND, STRETCH);
|
|
export const parse = makeParser(isValid, FLEX_START);
|
|
}
|
|
|
|
export type Order = number;
|
|
export namespace Order {
|
|
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);
|
|
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);
|
|
return isFinite(parsed) && value >= 0;
|
|
}
|
|
export const parse = parseFloat;
|
|
}
|
|
|
|
export type FlexWrapBefore = boolean;
|
|
export namespace FlexWrapBefore {
|
|
export function isValid(value) {
|
|
if (isBoolean(value)) {
|
|
return true;
|
|
}
|
|
if (isString(value)) {
|
|
const str = value.trim().toLowerCase();
|
|
return str === "true" || str === "false";
|
|
}
|
|
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 isValid = makeValidator<AlignSelf>(AUTO, FLEX_START, FLEX_END, CENTER, BASELINE, STRETCH);
|
|
export const parse = makeParser(isValid, AUTO);
|
|
}
|
|
|
|
function validateArgs(element: View): View {
|
|
if (!element) {
|
|
throw new Error("element cannot be null or undefinied.");
|
|
}
|
|
return element;
|
|
}
|
|
|
|
/**
|
|
* A common base class for all cross platform flexbox layout implementations.
|
|
*/
|
|
export abstract class FlexboxLayoutBase extends LayoutBase {
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
get flexDirection(): FlexDirection {
|
|
return this.style._getValue(flexDirectionProperty);
|
|
}
|
|
set flexDirection(value: FlexDirection) {
|
|
this.style._setValue(flexDirectionProperty, value);
|
|
}
|
|
|
|
get flexWrap(): FlexWrap {
|
|
return this.style._getValue(flexWrapProperty);
|
|
}
|
|
set flexWrap(value: FlexWrap) {
|
|
this.style._setValue(flexWrapProperty, value);
|
|
}
|
|
|
|
get justifyContent(): JustifyContent {
|
|
return this.style._getValue(justifyContentProperty);
|
|
}
|
|
set justifyContent(value: JustifyContent) {
|
|
this.style._setValue(justifyContentProperty, value);
|
|
}
|
|
|
|
get alignItems(): AlignItems {
|
|
return this.style._getValue(alignItemsProperty);
|
|
}
|
|
set alignItems(value: AlignItems) {
|
|
this.style._setValue(alignItemsProperty, value);
|
|
}
|
|
|
|
get alignContent(): AlignContent {
|
|
return this.style._getValue(alignContentProperty);
|
|
}
|
|
set alignContent(value: AlignContent) {
|
|
this.style._setValue(alignContentProperty, value);
|
|
}
|
|
|
|
public static setOrder(view: View, order: number) {
|
|
validateArgs(view).style._setValue(orderProperty, order);
|
|
}
|
|
public static getOrder(view: View): number {
|
|
return validateArgs(view).style._getValue(orderProperty);
|
|
}
|
|
|
|
public static setFlexGrow(view: View, grow: number) {
|
|
validateArgs(view).style._setValue(flexGrowProperty, grow);
|
|
}
|
|
public static getFlexGrow(view: View) {
|
|
return validateArgs(view).style._getValue(flexGrowProperty);
|
|
}
|
|
|
|
public static setFlexShrink(view: View, shrink: number) {
|
|
validateArgs(view).style._setValue(flexShrinkProperty, shrink);
|
|
}
|
|
public static getFlexShrink(view: View): number {
|
|
return validateArgs(view).style._getValue(flexShrinkProperty);
|
|
}
|
|
|
|
public static setAlignSelf(view: View, align: AlignSelf) {
|
|
validateArgs(view).style._setValue(alignSelfProperty, align);
|
|
}
|
|
public static getAlignSelf(view: View): AlignSelf {
|
|
return validateArgs(view).style._getValue(alignSelfProperty);
|
|
}
|
|
|
|
public static setFlexWrapBefore(view: View, wrap: boolean) {
|
|
validateArgs(view).style._setValue(flexWrapBeforeProperty, wrap);
|
|
}
|
|
public static getFlexWrapBefore(view: View): boolean {
|
|
return validateArgs(view).style._getValue(flexWrapBeforeProperty);
|
|
}
|
|
|
|
abstract _setNativeFlexDirection(flexDirection: FlexDirection);
|
|
abstract _setNativeFlexWrap(flexWrap: FlexWrap);
|
|
abstract _setNativeJustifyContent(justifyContent: JustifyContent);
|
|
abstract _setNativeAlignItems(alignItems: AlignItems);
|
|
abstract _setNativeAlignContent(alignContent: AlignContent);
|
|
}
|
|
|
|
const flexboxAffectsLayout = isAndroid ? PropertyMetadataSettings.None : PropertyMetadataSettings.AffectsLayout;
|
|
|
|
export const flexDirectionProperty = new styleProperty.Property("flexDirection", "flex-direction", new PropertyMetadata(FlexDirection.ROW, flexboxAffectsLayout, undefined, FlexDirection.isValid), FlexDirection.parse);
|
|
export const flexWrapProperty = new styleProperty.Property("flexWrap", "flex-wrap", new PropertyMetadata(FlexWrap.NOWRAP, flexboxAffectsLayout, undefined, FlexWrap.isValid), FlexWrap.parse);
|
|
export const justifyContentProperty = new styleProperty.Property("justifyContent", "justify-content", new PropertyMetadata(JustifyContent.FLEX_START, flexboxAffectsLayout, undefined, JustifyContent.isValid), JustifyContent.parse);
|
|
export const alignItemsProperty = new styleProperty.Property("alignItems", "align-items", new PropertyMetadata(AlignItems.STRETCH, flexboxAffectsLayout, undefined, AlignItems.isValid), AlignItems.parse);
|
|
export const alignContentProperty = new styleProperty.Property("alignContent", "align-content", new PropertyMetadata(AlignContent.STRETCH, flexboxAffectsLayout, undefined, AlignContent.isValid), AlignContent.parse);
|
|
|
|
export const orderProperty = new styleProperty.Property("order", "order", new PropertyMetadata(ORDER_DEFAULT, PropertyMetadataSettings.None, undefined, Order.isValid), Order.parse);
|
|
export const flexGrowProperty = new styleProperty.Property("flexGrow", "flex-grow", new PropertyMetadata(FLEX_GROW_DEFAULT, PropertyMetadataSettings.None, undefined, FlexGrow.isValid), FlexGrow.parse);
|
|
export const flexShrinkProperty = new styleProperty.Property("flexShrink", "flex-shrink", new PropertyMetadata(FLEX_SHRINK_DEFAULT, PropertyMetadataSettings.None, undefined, FlexShrink.isValid), FlexShrink.parse);
|
|
export const flexWrapBeforeProperty = new styleProperty.Property("flexWrapBefore", "flex-wrap-before", new PropertyMetadata(false, PropertyMetadataSettings.None, undefined, FlexWrapBefore.isValid), FlexWrapBefore.parse);
|
|
export const alignSelfProperty = new styleProperty.Property("alignSelf", "align-self", new PropertyMetadata(AlignSelf.AUTO, PropertyMetadataSettings.None, undefined, AlignSelf.isValid), AlignSelf.parse);
|
|
|
|
registerSpecialProperty("order", (instance, propertyValue) => {
|
|
FlexboxLayoutBase.setOrder(instance, !isNaN(+propertyValue) && +propertyValue);
|
|
});
|
|
registerSpecialProperty("flexGrow", (instance, propertyValue) => {
|
|
FlexboxLayoutBase.setFlexGrow(instance, !isNaN(+propertyValue) && +propertyValue);
|
|
});
|
|
registerSpecialProperty("flexShrink", (instance, propertyValue) => {
|
|
FlexboxLayoutBase.setFlexShrink(instance, !isNaN(+propertyValue) && +propertyValue);
|
|
});
|
|
registerSpecialProperty("alignSelf", (instance, propertyValue) => {
|
|
FlexboxLayoutBase.setAlignSelf(instance, propertyValue);
|
|
});
|
|
registerSpecialProperty("flexWrapBefore", (instance, propertyValue) => {
|
|
FlexboxLayoutBase.setFlexWrapBefore(instance, isString(propertyValue) ? FlexWrapBefore.parse(propertyValue) : propertyValue);
|
|
});
|
|
|
|
const flexboxGuard = <T>(handler: (flexbox: FlexboxLayoutBase, newValue: any) => void) => (view: View, newValue: any) => view instanceof FlexboxLayoutBase ? handler(view, newValue) : void 0;
|
|
style.registerHandler(flexDirectionProperty, new style.StylePropertyChangedHandler(
|
|
flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexDirection(newValue)),
|
|
flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexDirection(FlexDirection.ROW))), "FlexboxLayout");
|
|
style.registerHandler(flexWrapProperty, new style.StylePropertyChangedHandler(
|
|
flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexWrap(newValue)),
|
|
flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexWrap(FlexWrap.NOWRAP))), "FlexboxLayout");
|
|
style.registerHandler(justifyContentProperty, new style.StylePropertyChangedHandler(
|
|
flexboxGuard((flexbox, newValue) => flexbox._setNativeJustifyContent(newValue)),
|
|
flexboxGuard((flexbox, newValue) => flexbox._setNativeJustifyContent(JustifyContent.FLEX_START))), "FlexboxLayout");
|
|
style.registerHandler(alignItemsProperty, new style.StylePropertyChangedHandler(
|
|
flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignItems(newValue)),
|
|
flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignItems(AlignItems.STRETCH))), "FlexboxLayout");
|
|
style.registerHandler(alignContentProperty, new style.StylePropertyChangedHandler(
|
|
flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignContent(newValue)),
|
|
flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignContent(AlignContent.STRETCH))), "FlexboxLayout");
|
|
|
|
style.registerHandler(orderProperty, new style.StylePropertyChangedHandler(
|
|
(view, value) => flexbox._onNativeOrderPropertyChanged(view, value),
|
|
(view, value) => flexbox._onNativeOrderPropertyChanged(view, 1)), "View");
|
|
style.registerHandler(flexGrowProperty, new style.StylePropertyChangedHandler(
|
|
(view, value) => flexbox._onNativeFlexGrowPropertyChanged(view, value),
|
|
(view, value) => flexbox._onNativeFlexGrowPropertyChanged(view, 0)), "View");
|
|
style.registerHandler(flexShrinkProperty, new style.StylePropertyChangedHandler(
|
|
(view, value) => flexbox._onNativeFlexShrinkPropertyChanged(view, value),
|
|
(view, value) => flexbox._onNativeFlexShrinkPropertyChanged(view, 1)), "View");
|
|
style.registerHandler(flexWrapBeforeProperty, new style.StylePropertyChangedHandler(
|
|
(view, value) => flexbox._onNativeFlexWrapBeforePropertyChanged(view, value),
|
|
(view, value) => flexbox._onNativeFlexWrapBeforePropertyChanged(view, false)), "View");
|
|
style.registerHandler(alignSelfProperty, new style.StylePropertyChangedHandler(
|
|
(view, value) => flexbox._onNativeAlignSelfPropertyChanged(view, value),
|
|
(view, value) => flexbox._onNativeAlignSelfPropertyChanged(view, AlignSelf.AUTO)), "View");
|
|
|
|
// flex-flow: <flex-direction> || <flex-wrap>
|
|
styleProperty.registerShorthandCallback("flex-flow", value => {
|
|
const properties: styleProperty.KeyValuePair<styleProperty.Property, any>[] = [];
|
|
const trimmed = value && value.trim();
|
|
if (trimmed) {
|
|
let values = trimmed.split(/\s+/);
|
|
if (values.length >= 1 && FlexDirection.isValid(values[0])) {
|
|
properties.push({ property: flexDirectionProperty, value: FlexDirection.parse(values[0]) });
|
|
}
|
|
if (value.length >= 2 && FlexWrap.isValid(values[1])) {
|
|
properties.push({ property: flexWrapProperty, value: FlexWrap.parse(values[1]) });
|
|
}
|
|
}
|
|
return properties;
|
|
});
|
|
|
|
// flex: inital | auto | none | <flex-grow> <flex-shrink> || <flex-basis>
|
|
styleProperty.registerShorthandCallback("flex", value => {
|
|
const properties: styleProperty.KeyValuePair<styleProperty.Property, any>[] = [];
|
|
const trimmed = value && value.trim();
|
|
if (trimmed) {
|
|
let values = trimmed.split(/\s+/);
|
|
if (values.length === 1) {
|
|
switch(values[0]) {
|
|
case "inital":
|
|
properties.push({ property: flexGrowProperty, value: 0});
|
|
properties.push({ property: flexShrinkProperty, value: 1});
|
|
// properties.push({ property: flexBasisProperty, value: FlexBasis.AUTO})
|
|
break;
|
|
case "auto":
|
|
properties.push({ property: flexGrowProperty, value: 1});
|
|
properties.push({ property: flexShrinkProperty, value: 1});
|
|
// properties.push({ property: flexBasisProperty, value: FlexBasis.AUTO})
|
|
break;
|
|
case "none":
|
|
properties.push({ property: flexGrowProperty, value: 0});
|
|
properties.push({ property: flexShrinkProperty, value: 0});
|
|
// properties.push({ property: flexBasisProperty, value: FlexBasis.AUTO})
|
|
break;
|
|
default:
|
|
if (FlexGrow.isValid(values[0])) {
|
|
properties.push({ property: flexGrowProperty, value: FlexGrow.parse(values[0])});
|
|
properties.push({ property: flexShrinkProperty, value: 1});
|
|
// properties.push({ property: flexBasisProperty, value: 0})
|
|
}
|
|
}
|
|
}
|
|
if (values.length >= 2) {
|
|
if (FlexGrow.isValid(values[0]) && FlexShrink.isValid(values[1])) {
|
|
properties.push({ property: flexGrowProperty, value: FlexGrow.parse(values[0])});
|
|
properties.push({ property: flexShrinkProperty, value: FlexShrink.parse(values[1])});
|
|
}
|
|
}
|
|
// if (value.length >= 3) {
|
|
// properties.push({ property: flexBasisProperty, value: FlexBasis.parse(values[2])})
|
|
// }
|
|
}
|
|
return properties;
|
|
});
|
|
|
|
// No flex-basis in our implementation.
|