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

Fix all property types

Browse Source
This commit is contained in:
Rossen Hristov
2017-01-04 10:20:33 +02:00
parent accc7643df
commit cce0a2d42f
12 changed files with 308 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
tns-core-modules/ui/core/properties.ts
View File

@@ -44,11 +44,11 @@ export interface CoerciblePropertyOptions<T, U> extends PropertyOptions<T, U> {
readonly coerceValue: (t: T, u: U) => U; readonly coerceValue: (t: T, u: U) => U;
} }
export interface ShorthandPropertyOptions { export interface ShorthandPropertyOptions<P> {
name: string; name: string;
cssName: string; cssName: string;
converter(this: void, value: string): [CssProperty<any, any>, any][]; converter(this: void, value: string | P): [CssProperty<any, any>, any][];
getter(this: Style): string; getter(this: Style): string | P;
} }
export interface CssPropertyOptions<T extends Style, U> extends PropertyOptions<T, U> { export interface CssPropertyOptions<T extends Style, U> extends PropertyOptions<T, U> {
@@ -684,7 +684,7 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
} }
} }
export class ShorthandProperty<T extends Style> { export class ShorthandProperty<T extends Style, P> {
private registered: boolean; private registered: boolean;
public readonly key: symbol; public readonly key: symbol;
@@ -697,7 +697,7 @@ export class ShorthandProperty<T extends Style> {
public readonly native: symbol; public readonly native: symbol;
public readonly sourceKey: symbol; public readonly sourceKey: symbol;
constructor(options: ShorthandPropertyOptions) { constructor(options: ShorthandPropertyOptions<P>) {
const name = options.name; const name = options.name;
this.name = name; this.name = name;
@@ -712,7 +712,7 @@ export class ShorthandProperty<T extends Style> {
const converter = options.converter; const converter = options.converter;
function setLocalValue(this: T, value: string): void { function setLocalValue(this: T, value: string| P): void {
this[sourceKey] = ValueSource.Local; this[sourceKey] = ValueSource.Local;
if (this[key] !== value) { if (this[key] !== value) {
this[key] = value; this[key] = value;

188
tns-core-modules/ui/core/view-common.ts
View File

@@ -219,10 +219,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
this.style.borderLeftColor = value; this.style.borderLeftColor = value;
} }
get borderWidth(): string | number { get borderWidth(): string | Length {
return this.style.borderWidth; return this.style.borderWidth;
} }
set borderWidth(value: string | number) { set borderWidth(value: string | Length) {
this.style.borderWidth = value; this.style.borderWidth = value;
} }
@@ -338,10 +338,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
this.style.height = value; this.style.height = value;
} }
get margin(): string { get margin(): string | PercentLength {
return this.style.margin; return this.style.margin;
} }
set margin(value: string) { set margin(value: string | PercentLength) {
this.style.margin = value; this.style.margin = value;
} }
@@ -1116,9 +1116,16 @@ widthProperty.register(Style);
export const heightProperty = new CssProperty<Style, PercentLength>({ name: "height", cssName: "height", defaultValue: "auto", affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse }); export const heightProperty = new CssProperty<Style, PercentLength>({ name: "height", cssName: "height", defaultValue: "auto", affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
heightProperty.register(Style); heightProperty.register(Style);
const marginProperty = new ShorthandProperty<Style>({ const marginProperty = new ShorthandProperty<Style, string | PercentLength>({
name: "margin", cssName: "margin", name: "margin", cssName: "margin",
getter: function (this: Style) { return `${this.marginTop} ${this.marginRight} ${this.marginBottom} ${this.marginLeft}`; }, getter: function (this: Style) {
if (this.marginTop === this.marginRight &&
this.marginTop === this.marginBottom &&
this.marginTop === this.marginLeft) {
return this.marginTop;
}
return `${this.marginTop} ${this.marginRight} ${this.marginBottom} ${this.marginLeft}`;
},
converter: convertToMargins converter: convertToMargins
}); });
marginProperty.register(Style); marginProperty.register(Style);
@@ -1135,9 +1142,16 @@ marginTopProperty.register(Style);
export const marginBottomProperty = new CssProperty<Style, PercentLength>({ name: "marginBottom", cssName: "margin-bottom", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse }); export const marginBottomProperty = new CssProperty<Style, PercentLength>({ name: "marginBottom", cssName: "margin-bottom", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
marginBottomProperty.register(Style); marginBottomProperty.register(Style);
const paddingProperty = new ShorthandProperty<Style>({ const paddingProperty = new ShorthandProperty<Style, string | Length>({
name: "padding", cssName: "padding", name: "padding", cssName: "padding",
getter: function (this: Style) { return `${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft}`; }, getter: function (this: Style) {
if (this.paddingTop === this.paddingRight &&
this.paddingTop === this.paddingBottom &&
this.paddingTop === this.paddingLeft) {
return this.paddingTop;
}
return `${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft}`;
},
converter: convertToPaddings converter: convertToPaddings
}); });
paddingProperty.register(Style); paddingProperty.register(Style);
@@ -1263,24 +1277,44 @@ function parseThickness(value: string): Thickness {
} }
} }
function convertToMargins(this: void, value: string): [CssProperty<any, any>, any][] { function convertToMargins(this: void, value: string | PercentLength): [CssProperty<any, any>, any][] {
let thickness = parseThickness(value); if (typeof value === "string" && value !== "auto"){
return [ let thickness = parseThickness(value);
[marginTopProperty, PercentLength.parse(thickness.top)], return [
[marginRightProperty, PercentLength.parse(thickness.right)], [marginTopProperty, PercentLength.parse(thickness.top)],
[marginBottomProperty, PercentLength.parse(thickness.bottom)], [marginRightProperty, PercentLength.parse(thickness.right)],
[marginLeftProperty, PercentLength.parse(thickness.left)] [marginBottomProperty, PercentLength.parse(thickness.bottom)],
]; [marginLeftProperty, PercentLength.parse(thickness.left)]
];
}
else {
return [
[marginTopProperty, value],
[marginRightProperty, value],
[marginBottomProperty, value],
[marginLeftProperty, value]
];
}
} }
function convertToPaddings(this: void, value: string): [CssProperty<any, any>, any][] { function convertToPaddings(this: void, value: string | Length): [CssProperty<any, any>, any][] {
let thickness = parseThickness(value); if (typeof value === "string" && value !== "auto"){
return [ let thickness = parseThickness(value);
[paddingTopProperty, Length.parse(thickness.top)], return [
[paddingRightProperty, Length.parse(thickness.right)], [paddingTopProperty, Length.parse(thickness.top)],
[paddingBottomProperty, Length.parse(thickness.bottom)], [paddingRightProperty, Length.parse(thickness.right)],
[paddingLeftProperty, Length.parse(thickness.left)] [paddingBottomProperty, Length.parse(thickness.bottom)],
]; [paddingLeftProperty, Length.parse(thickness.left)]
];
}
else {
return [
[paddingTopProperty, value],
[paddingRightProperty, value],
[paddingBottomProperty, value],
[paddingLeftProperty, value]
];
}
} }
export const rotateProperty = new CssProperty<Style, number>({ name: "rotate", cssName: "rotate", defaultValue: 0, valueConverter: (v) => parseFloat(v) }); export const rotateProperty = new CssProperty<Style, number>({ name: "rotate", cssName: "rotate", defaultValue: 0, valueConverter: (v) => parseFloat(v) });
@@ -1298,7 +1332,7 @@ translateXProperty.register(Style);
export const translateYProperty = new CssProperty<Style, number>({ name: "translateY", cssName: "translateY", defaultValue: 0, valueConverter: (v) => parseFloat(v) }); export const translateYProperty = new CssProperty<Style, number>({ name: "translateY", cssName: "translateY", defaultValue: 0, valueConverter: (v) => parseFloat(v) });
translateYProperty.register(Style); translateYProperty.register(Style);
const transformProperty = new ShorthandProperty<Style>({ const transformProperty = new ShorthandProperty<Style, string>({
name: "transform", cssName: "transform", name: "transform", cssName: "transform",
getter: function (this: Style) { getter: function (this: Style) {
let scaleX = this.scaleX; let scaleX = this.scaleX;
@@ -1567,25 +1601,36 @@ function parseBorderColor(value: string): { top: Color, right: Color, bottom: Co
} }
// Border Color properties. // Border Color properties.
const borderColorProperty = new ShorthandProperty<Style>({ const borderColorProperty = new ShorthandProperty<Style, string | Color>({
name: "borderColor", cssName: "border-color", name: "borderColor", cssName: "border-color",
getter: function (this: Style) { getter: function (this: Style) {
if (Color.equals(this.borderTopColor, this.borderRightColor) && if (Color.equals(this.borderTopColor, this.borderRightColor) &&
Color.equals(this.borderTopColor, this.borderBottomColor) && Color.equals(this.borderTopColor, this.borderBottomColor) &&
Color.equals(this.borderTopColor, this.borderLeftColor)) { Color.equals(this.borderTopColor, this.borderLeftColor)) {
return this.borderTopColor ? this.borderTopColor.toString() : ""; return this.borderTopColor ? this.borderTopColor.toString() : "";
} else { }
else {
return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`; return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`;
} }
}, },
converter: function (value: string) { converter: function (value) {
let fourColors = parseBorderColor(value); if (typeof value === "string") {
return [ let fourColors = parseBorderColor(value);
[borderTopColorProperty, fourColors.top], return [
[borderRightColorProperty, fourColors.right], [borderTopColorProperty, fourColors.top],
[borderBottomColorProperty, fourColors.bottom], [borderRightColorProperty, fourColors.right],
[borderLeftColorProperty, fourColors.left] [borderBottomColorProperty, fourColors.bottom],
]; [borderLeftColorProperty, fourColors.left]
];
}
else {
return [
[borderTopColorProperty, value],
[borderRightColorProperty, value],
[borderBottomColorProperty, value],
[borderLeftColorProperty, value]
];
}
} }
}) })
borderColorProperty.register(Style); borderColorProperty.register(Style);
@@ -1623,25 +1668,36 @@ export const borderLeftColorProperty = new CssProperty<Style, Color>({
borderLeftColorProperty.register(Style); borderLeftColorProperty.register(Style);
// Border Width properties. // Border Width properties.
const borderWidthProperty = new ShorthandProperty<Style>({ const borderWidthProperty = new ShorthandProperty<Style, string | Length>({
name: "borderWidth", cssName: "border-width", name: "borderWidth", cssName: "border-width",
getter: function (this: Style) { getter: function (this: Style) {
if (Color.equals(this.borderTopColor, this.borderRightColor) && if (this.borderTopWidth === this.borderRightWidth &&
Color.equals(this.borderTopColor, this.borderBottomColor) && this.borderTopWidth === this.borderBottomWidth &&
Color.equals(this.borderTopColor, this.borderLeftColor)) { this.borderTopWidth === this.borderLeftWidth){
return this.borderTopColor + ""; return this.borderTopWidth;
} else { }
return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`; else {
return `${this.borderTopWidth} ${this.borderRightWidth} ${this.borderBottomWidth} ${this.borderLeftWidth}`;
} }
}, },
converter: function (value: string) { converter: function (value) {
let borderWidths = parseThickness(value); if (typeof value === "string" && value !== "auto"){
return [ let borderWidths = parseThickness(value);
[borderTopWidthProperty, borderWidths.top], return [
[borderRightWidthProperty, borderWidths.right], [borderTopWidthProperty, borderWidths.top],
[borderBottomWidthProperty, borderWidths.bottom], [borderRightWidthProperty, borderWidths.right],
[borderLeftWidthProperty, borderWidths.left] [borderBottomWidthProperty, borderWidths.bottom],
]; [borderLeftWidthProperty, borderWidths.left]
];
}
else {
return [
[borderTopWidthProperty, value],
[borderRightWidthProperty, value],
[borderBottomWidthProperty, value],
[borderLeftWidthProperty, value]
];
}
} }
}) })
borderWidthProperty.register(Style); borderWidthProperty.register(Style);
@@ -1711,7 +1767,7 @@ export const borderLeftWidthProperty = new CssProperty<Style, Length>({
borderLeftWidthProperty.register(Style); borderLeftWidthProperty.register(Style);
// Border Radius properties. // Border Radius properties.
const borderRadiusProperty = new ShorthandProperty<Style>({ const borderRadiusProperty = new ShorthandProperty<Style, number>({
name: "borderRadius", cssName: "border-radius", name: "borderRadius", cssName: "border-radius",
getter: function (this: Style) { getter: function (this: Style) {
if (this.borderTopLeftRadius === this.borderTopRightRadius && if (this.borderTopLeftRadius === this.borderTopRightRadius &&
@@ -1722,14 +1778,24 @@ const borderRadiusProperty = new ShorthandProperty<Style>({
return `${this.borderTopLeftRadius} ${this.borderTopRightRadius} ${this.borderBottomRightRadius} ${this.borderBottomLeftRadius}`; return `${this.borderTopLeftRadius} ${this.borderTopRightRadius} ${this.borderBottomRightRadius} ${this.borderBottomLeftRadius}`;
} }
}, },
converter: function (value: string) { converter: function (value) {
let borderRadius = parseThickness(value); if (typeof value === "string"){
return [ let borderRadius = parseThickness(value);
[borderTopLeftRadiusProperty, borderRadius.top], return [
[borderTopRightRadiusProperty, borderRadius.right], [borderTopLeftRadiusProperty, borderRadius.top],
[borderBottomRightRadiusProperty, borderRadius.bottom], [borderTopRightRadiusProperty, borderRadius.right],
[borderBottomLeftRadiusProperty, borderRadius.left] [borderBottomRightRadiusProperty, borderRadius.bottom],
]; [borderBottomLeftRadiusProperty, borderRadius.left]
];
}
else {
return [
[borderTopLeftRadiusProperty, value],
[borderTopRightRadiusProperty, value],
[borderBottomRightRadiusProperty, value],
[borderBottomLeftRadiusProperty, value]
];
}
} }
}) })
borderRadiusProperty.register(Style); borderRadiusProperty.register(Style);
@@ -1862,12 +1928,12 @@ export const fontWeightProperty = new InheritedCssProperty<Style, FontWeight>({
}); });
fontWeightProperty.register(Style); fontWeightProperty.register(Style);
const fontProperty = new ShorthandProperty<Style>({ const fontProperty = new ShorthandProperty<Style, string>({
name: "font", cssName: "font", name: "font", cssName: "font",
getter: function (this: Style) { getter: function (this: Style) {
return `${this.fontStyle} ${this.fontWeight} ${this.fontSize} ${this.fontFamily}`; return `${this.fontStyle} ${this.fontWeight} ${this.fontSize} ${this.fontFamily}`;
}, },
converter: function (value: string) { converter: function (value) {
let font = parseFont(value); let font = parseFont(value);
let fontSize = fontSizeConverter(font.fontSize); let fontSize = fontSizeConverter(font.fontSize);

22
tns-core-modules/ui/core/view.d.ts vendored
View File

@@ -2,7 +2,7 @@ declare module "ui/core/view" {
import { GestureTypes, GesturesObserver, GestureEventData, TouchGestureEventData, TouchAction } from "ui/gestures"; import { GestureTypes, GesturesObserver, GestureEventData, TouchGestureEventData, TouchAction } from "ui/gestures";
import { Animation, AnimationDefinition, AnimationPromise } from "ui/animation"; import { Animation, AnimationDefinition, AnimationPromise } from "ui/animation";
import { import {
ViewBase, Property, CssProperty, InheritedCssProperty, Style, EventData ViewBase, Property, CssProperty, InheritedCssProperty, Style, EventData, ShorthandProperty
} from "ui/core/view-base"; } from "ui/core/view-base";
import { Background } from "ui/styling/background"; import { Background } from "ui/styling/background";
import { Font, FontWeight, FontStyle } from "ui/styling/font"; import { Font, FontWeight, FontStyle } from "ui/styling/font";
@@ -153,7 +153,7 @@ declare module "ui/core/view" {
/** /**
* Gets or sets the border width of the view. * Gets or sets the border width of the view.
*/ */
borderWidth: string | number; borderWidth: string | Length;
/** /**
* Gets or sets the top border width of the view. * Gets or sets the top border width of the view.
@@ -238,7 +238,7 @@ declare module "ui/core/view" {
/** /**
* Gets or sets margin style property. * Gets or sets margin style property.
*/ */
margin: string; margin: string | PercentLength;
/** /**
* Specifies extra space on the left side of this view. * Specifies extra space on the left side of this view.
@@ -710,13 +710,13 @@ declare module "ui/core/view" {
export const backgroundSizeProperty: CssProperty<Style, string>; export const backgroundSizeProperty: CssProperty<Style, string>;
export const backgroundPositionProperty: CssProperty<Style, string>; export const backgroundPositionProperty: CssProperty<Style, string>;
export const borderColorProperty: CssProperty<Style, Color>; export const borderColorProperty: ShorthandProperty<Style, string | Color>;
export const borderTopColorProperty: CssProperty<Style, Color>; export const borderTopColorProperty: CssProperty<Style, Color>;
export const borderRightColorProperty: CssProperty<Style, Color>; export const borderRightColorProperty: CssProperty<Style, Color>;
export const borderBottomColorProperty: CssProperty<Style, Color>; export const borderBottomColorProperty: CssProperty<Style, Color>;
export const borderLeftColorProperty: CssProperty<Style, Color>; export const borderLeftColorProperty: CssProperty<Style, Color>;
export const borderWidthProperty: CssProperty<Style, number>; export const borderWidthProperty: ShorthandProperty<Style, string | Length>;
export const borderTopWidthProperty: CssProperty<Style, Length>; export const borderTopWidthProperty: CssProperty<Style, Length>;
export const borderRightWidthProperty: CssProperty<Style, Length>; export const borderRightWidthProperty: CssProperty<Style, Length>;
export const borderBottomWidthProperty: CssProperty<Style, Length>; export const borderBottomWidthProperty: CssProperty<Style, Length>;
@@ -736,13 +736,13 @@ declare module "ui/core/view" {
export const minHeightProperty: CssProperty<Style, Length>; export const minHeightProperty: CssProperty<Style, Length>;
export const widthProperty: CssProperty<Style, Length>; export const widthProperty: CssProperty<Style, Length>;
export const heightProperty: CssProperty<Style, Length>; export const heightProperty: CssProperty<Style, Length>;
export const marginProperty: CssProperty<Style, string>; export const marginProperty: ShorthandProperty<Style, string | PercentLength>;
export const marginLeftProperty: CssProperty<Style, Length>; export const marginLeftProperty: CssProperty<Style, PercentLength>;
export const marginRightProperty: CssProperty<Style, Length>; export const marginRightProperty: CssProperty<Style, PercentLength>;
export const marginTopProperty: CssProperty<Style, Length>; export const marginTopProperty: CssProperty<Style, PercentLength>;
export const marginBottomProperty: CssProperty<Style, Length>; export const marginBottomProperty: CssProperty<Style, PercentLength>;
export const paddingProperty: CssProperty<Style, string>; export const paddingProperty: ShorthandProperty<Style, string | Length>;
export const paddingLeftProperty: CssProperty<Style, Length>; export const paddingLeftProperty: CssProperty<Style, Length>;
export const paddingRightProperty: CssProperty<Style, Length>; export const paddingRightProperty: CssProperty<Style, Length>;
export const paddingTopProperty: CssProperty<Style, Length>; export const paddingTopProperty: CssProperty<Style, Length>;

10
tns-core-modules/ui/definitions.d.ts vendored
View File

@@ -204,15 +204,15 @@ declare module "ui/core/properties" {
constructor(options: CssPropertyOptions<T, U>); constructor(options: CssPropertyOptions<T, U>);
} }
export interface ShorthandPropertyOptions { export interface ShorthandPropertyOptions<P> {
readonly name: string, readonly name: string,
readonly cssName: string; readonly cssName: string;
readonly converter: (value: string) => [CssProperty<any, any>, any][], readonly converter: (value: string | P) => [CssProperty<any, any>, any][],
readonly getter: (this: Style) => string readonly getter: (this: Style) => string | P
} }
export class ShorthandProperty<T extends Style> { export class ShorthandProperty<T extends Style, P> {
constructor(options: ShorthandPropertyOptions); constructor(options: ShorthandPropertyOptions<P>);
public readonly native: symbol; public readonly native: symbol;
public readonly name: string; public readonly name: string;

4
tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts
View File

@@ -325,7 +325,7 @@ alignSelfProperty1.register(View);
// (view, value) => flexbox._onNativeAlignSelfPropertyChanged(view, AlignSelf.AUTO)), "View"); // (view, value) => flexbox._onNativeAlignSelfPropertyChanged(view, AlignSelf.AUTO)), "View");
// flex-flow: <flex-direction> || <flex-wrap> // flex-flow: <flex-direction> || <flex-wrap>
const flexFlowProperty = new ShorthandProperty<Style>({ const flexFlowProperty = new ShorthandProperty<Style, string>({
name: "flex-flow", cssName: "flex-flow", name: "flex-flow", cssName: "flex-flow",
getter: function (this: Style) { getter: function (this: Style) {
return `${this.flexDirection} ${this.flexWrap}`; return `${this.flexDirection} ${this.flexWrap}`;
@@ -348,7 +348,7 @@ const flexFlowProperty = new ShorthandProperty<Style>({
flexFlowProperty.register(Style); flexFlowProperty.register(Style);
// flex: inital | auto | none | <flex-grow> <flex-shrink> || <flex-basis> // flex: inital | auto | none | <flex-grow> <flex-shrink> || <flex-basis>
const flexProperty = new ShorthandProperty<Style>({ const flexProperty = new ShorthandProperty<Style, string>({
name: "flex", cssName: "flex", name: "flex", cssName: "flex",
getter: function (this: Style) { getter: function (this: Style) {
return `${this.flexGrow} ${this.flexShrink}`; return `${this.flexGrow} ${this.flexShrink}`;

34
tns-core-modules/ui/layouts/layout-base-common.ts
View File

@@ -1,5 +1,5 @@
import { LayoutBase as LayoutBaseDefinition } from "ui/layouts/layout-base"; import { LayoutBase as LayoutBaseDefinition } from "ui/layouts/layout-base";
import { View, CustomLayoutView, Property, AddChildFromBuilder, getViewById } from "ui/core/view"; import { View, CustomLayoutView, Property, AddChildFromBuilder, getViewById, Length } from "ui/core/view";
export * from "ui/core/view"; export * from "ui/core/view";
@@ -70,13 +70,41 @@ export class LayoutBaseCommon extends CustomLayoutView implements LayoutBaseDefi
} }
} }
get padding(): string { get padding(): string | Length {
return this.style.padding; return this.style.padding;
} }
set padding(value: string) { set padding(value: string | Length) {
this.style.padding = value; this.style.padding = value;
} }
get paddingTop(): Length {
return this.style.paddingTop;
}
set paddingTop(value: Length) {
this.style.paddingTop = value;
}
get paddingRight(): Length {
return this.style.paddingRight;
}
set paddingRight(value: Length) {
this.style.paddingRight = value;
}
get paddingBottom(): Length {
return this.style.paddingBottom;
}
set paddingBottom(value: Length) {
this.style.paddingBottom = value;
}
get paddingLeft(): Length {
return this.style.paddingLeft;
}
set paddingLeft(value: Length) {
this.style.paddingLeft = value;
}
public clipToBounds: boolean; public clipToBounds: boolean;
public _childIndexToNativeChildIndex(index?: number): number { public _childIndexToNativeChildIndex(index?: number): number {

42
tns-core-modules/ui/layouts/layout-base.d.ts vendored
View File

@@ -1,5 +1,5 @@
declare module "ui/layouts/layout-base" { declare module "ui/layouts/layout-base" {
import { View, CustomLayoutView, Property } from "ui/core/view"; import { View, CustomLayoutView, Property, Length } from "ui/core/view";
export * from "ui/core/view"; export * from "ui/core/view";
@@ -64,30 +64,30 @@
*/ */
eachLayoutChild(callback: (child: View, isLast: boolean) => void): void; eachLayoutChild(callback: (child: View, isLast: boolean) => void): void;
// /** /**
// * Gets or sets padding style property. * Gets or sets padding style property.
// */ */
// padding: string; padding: string | Length;
// /** /**
// * Specify the bottom padding of this layout. * Specify the bottom padding of this layout.
// */ */
// paddingBottom: number; paddingBottom: Length;
// /** /**
// * Specify the left padding of this layout. * Specify the left padding of this layout.
// */ */
// paddingLeft: number; paddingLeft: Length;
// /** /**
// * Specify the right padding of this layout. * Specify the right padding of this layout.
// */ */
// paddingRight: number; paddingRight: Length;
// /** /**
// * Specify the top padding of this layout. * Specify the top padding of this layout.
// */ */
// paddingTop: number; paddingTop: Length;
/** /**
* Gets or sets a value indicating whether to clip the content of this layout. * Gets or sets a value indicating whether to clip the content of this layout.

6
tns-core-modules/ui/styling/style.d.ts vendored
View File

@@ -65,7 +65,7 @@ declare module "ui/styling/style" {
public borderRightColor: Color; public borderRightColor: Color;
public borderBottomColor: Color; public borderBottomColor: Color;
public borderLeftColor: Color; public borderLeftColor: Color;
public borderWidth: string | number; public borderWidth: string | Length;
public borderTopWidth: Length; public borderTopWidth: Length;
public borderRightWidth: Length; public borderRightWidth: Length;
public borderBottomWidth: Length; public borderBottomWidth: Length;
@@ -96,12 +96,12 @@ declare module "ui/styling/style" {
public minHeight: Length; public minHeight: Length;
public width: PercentLength; public width: PercentLength;
public height: PercentLength; public height: PercentLength;
public margin: string; public margin: string | PercentLength;
public marginLeft: PercentLength; public marginLeft: PercentLength;
public marginTop: PercentLength; public marginTop: PercentLength;
public marginRight: PercentLength; public marginRight: PercentLength;
public marginBottom: PercentLength; public marginBottom: PercentLength;
public padding: string; public padding: string | Length;
public paddingLeft: Length; public paddingLeft: Length;
public paddingTop: Length; public paddingTop: Length;
public paddingRight: Length; public paddingRight: Length;

6
tns-core-modules/ui/styling/style.ts
View File

@@ -43,7 +43,7 @@ export class Style extends Observable implements StyleDefinition {
public borderRightColor: Color; public borderRightColor: Color;
public borderBottomColor: Color; public borderBottomColor: Color;
public borderLeftColor: Color; public borderLeftColor: Color;
public borderWidth: string | number; public borderWidth: string | Length;
public borderTopWidth: Length; public borderTopWidth: Length;
public borderRightWidth: Length; public borderRightWidth: Length;
public borderBottomWidth: Length; public borderBottomWidth: Length;
@@ -74,12 +74,12 @@ export class Style extends Observable implements StyleDefinition {
public minHeight: Length; public minHeight: Length;
public width: PercentLength; public width: PercentLength;
public height: PercentLength; public height: PercentLength;
public margin: string; public margin: string | PercentLength;
public marginLeft: PercentLength; public marginLeft: PercentLength;
public marginTop: PercentLength; public marginTop: PercentLength;
public marginRight: PercentLength; public marginRight: PercentLength;
public marginBottom: PercentLength; public marginBottom: PercentLength;
public padding: string; public padding: string | Length;
public paddingLeft: Length; public paddingLeft: Length;
public paddingTop: Length; public paddingTop: Length;
public paddingRight: Length; public paddingRight: Length;

37
tns-core-modules/ui/text-base/text-base-common.ts
View File

@@ -1,5 +1,5 @@
import { TextBase as TextBaseDefinition } from "ui/text-base"; import { TextBase as TextBaseDefinition } from "ui/text-base";
import { View, Property, CssProperty, InheritedCssProperty, Style, isIOS, Observable, makeValidator, makeParser } from "ui/core/view"; import { View, Property, CssProperty, InheritedCssProperty, Style, isIOS, Observable, makeValidator, makeParser, Length } from "ui/core/view";
import { PropertyChangeData } from "data/observable"; import { PropertyChangeData } from "data/observable";
import { FormattedString, FormattedStringView } from "text/formatted-string"; import { FormattedString, FormattedStringView } from "text/formatted-string";
import { addWeakEventListener, removeWeakEventListener } from "ui/core/weak-event-listener"; import { addWeakEventListener, removeWeakEventListener } from "ui/core/weak-event-listener";
@@ -56,6 +56,41 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition,
this.style.whiteSpace = value; this.style.whiteSpace = value;
} }
get padding(): string | Length {
return this.style.padding;
}
set padding(value: string | Length) {
this.style.padding = value;
}
get paddingTop(): Length {
return this.style.paddingTop;
}
set paddingTop(value: Length) {
this.style.paddingTop = value;
}
get paddingRight(): Length {
return this.style.paddingRight;
}
set paddingRight(value: Length) {
this.style.paddingRight = value;
}
get paddingBottom(): Length {
return this.style.paddingBottom;
}
set paddingBottom(value: Length) {
this.style.paddingBottom = value;
}
get paddingLeft(): Length {
return this.style.paddingLeft;
}
set paddingLeft(value: Length) {
this.style.paddingLeft = value;
}
public onFormattedTextChanged(data: PropertyChangeData) { public onFormattedTextChanged(data: PropertyChangeData) {
let value = data.value; let value = data.value;
this._setFormattedTextPropertyToNative(value); this._setFormattedTextPropertyToNative(value);

27
tns-core-modules/ui/text-base/text-base.d.ts vendored
View File

@@ -1,5 +1,5 @@
declare module "ui/text-base" { declare module "ui/text-base" {
import { View, AddChildFromBuilder, Property, CssProperty, InheritedCssProperty, Style } from "ui/core/view"; import { View, AddChildFromBuilder, Property, CssProperty, InheritedCssProperty, Style, Length } from "ui/core/view";
import { FormattedString, FormattedStringView } from "text/formatted-string"; import { FormattedString, FormattedStringView } from "text/formatted-string";
export * from "ui/core/view"; export * from "ui/core/view";
@@ -49,6 +49,31 @@
*/ */
whiteSpace: WhiteSpace; whiteSpace: WhiteSpace;
/**
* Gets or sets padding style property.
*/
padding: string | Length;
/**
* Specify the bottom padding of this layout.
*/
paddingBottom: Length;
/**
* Specify the left padding of this layout.
*/
paddingLeft: Length;
/**
* Specify the right padding of this layout.
*/
paddingRight: Length;
/**
* Specify the top padding of this layout.
*/
paddingTop: Length;
/** /**
* Called for every child element declared in xml. * Called for every child element declared in xml.
* This method will add a child element (value) to current element. * This method will add a child element (value) to current element.

38
tns-core-modules/ui/text-field/text-field.ios.ts
View File

@@ -1,7 +1,15 @@
import { TextFieldBase, Color, secureProperty, textProperty, hintProperty, colorProperty, placeholderColorProperty } from "./text-field-common"; import {
TextFieldBase, Color, secureProperty, textProperty, hintProperty, colorProperty, placeholderColorProperty,
Length, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty
} from "./text-field-common";
export * from "./text-field-common"; export * from "./text-field-common";
const zeroLength: Length = {
value: 0,
unit: "px"
};
class UITextFieldDelegateImpl extends NSObject implements UITextFieldDelegate { class UITextFieldDelegateImpl extends NSObject implements UITextFieldDelegate {
public static ObjCProtocols = [UITextFieldDelegate]; public static ObjCProtocols = [UITextFieldDelegate];
@@ -182,4 +190,32 @@ export class TextField extends TextFieldBase {
colorAttibutes.setValueForKey(value instanceof Color ? value.ios : value, NSForegroundColorAttributeName); colorAttibutes.setValueForKey(value instanceof Color ? value.ios : value, NSForegroundColorAttributeName);
nativeView.attributedPlaceholder = NSAttributedString.alloc().initWithStringAttributes(nativeView.placeholder || "", colorAttibutes); nativeView.attributedPlaceholder = NSAttributedString.alloc().initWithStringAttributes(nativeView.placeholder || "", colorAttibutes);
} }
get [paddingTopProperty.native](): Length {
return zeroLength;
}
set [paddingTopProperty.native](value: Length) {
// Padding is realized via UITextFieldImpl.textRectForBounds method
}
get [paddingRightProperty.native](): Length {
return zeroLength;
}
set [paddingRightProperty.native](value: Length) {
// Padding is realized via UITextFieldImpl.textRectForBounds method
}
get [paddingBottomProperty.native](): Length {
return zeroLength;
}
set [paddingBottomProperty.native](value: Length) {
// Padding is realized via UITextFieldImpl.textRectForBounds method
}
get [paddingLeftProperty.native](): Length {
return zeroLength;
}
set [paddingLeftProperty.native](value: Length) {
// Padding is realized via UITextFieldImpl.textRectForBounds method
}
} }