javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: default tabs

Browse Source
This commit is contained in:
Nathan Walker
2020-07-09 23:46:02 -07:00
parent 8100cf7089
commit 41f0573d8e
353 changed files with 55344 additions and 55344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

588
nativescript-core/ui/layouts/flexbox-layout/flexbox-layout-common.ts
View File

@@ -12,133 +12,133 @@ 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 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 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 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,298 +146,298 @@ 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,
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,
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,
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,
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,
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,
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,
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,
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,
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,
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);

242
nativescript-core/ui/layouts/flexbox-layout/index.android.ts
View File

@@ -9,14 +9,14 @@ 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);
}
};
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));
@@ -26,150 +26,150 @@ View.prototype[flexWrapBeforeProperty.setNative] = makeNativeSetter<FlexWrapBefo
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);
}
}
}

30
nativescript-core/ui/layouts/flexbox-layout/index.d.ts vendored
View File

@@ -32,26 +32,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>;

2530
nativescript-core/ui/layouts/flexbox-layout/index.ios.ts
View File

File diff suppressed because it is too large Load Diff