diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts index 95c93edac..6980cb159 100644 --- a/tns-core-modules/ui/core/view-common.ts +++ b/tns-core-modules/ui/core/view-common.ts @@ -6,7 +6,7 @@ import { Background } from "ui/styling/background"; import { ViewBase, getEventOrGestureName, Observable, EventData, Style, Property, InheritedProperty, CssProperty, ShorthandProperty, InheritedCssProperty, - gestureFromString, isIOS, traceEnabled, traceWrite, traceCategories, traceNotifyEvent, printUnregisteredProperties + gestureFromString, isIOS, traceEnabled, traceWrite, traceCategories, traceNotifyEvent, printUnregisteredProperties, makeParser, makeValidator } from "./view-base"; import { observe as gestureObserve, GesturesObserver, GestureTypes, GestureEventData } from "ui/gestures"; import { Font, parseFont, FontStyle, FontWeight } from "ui/styling/font"; @@ -1464,8 +1464,18 @@ export const backgroundColorProperty = new CssProperty({ }); backgroundColorProperty.register(Style); -export const backgroundRepeatProperty = new CssProperty({ - name: "backgroundRepeat", cssName: "background-repeat", valueChanged: (target, newValue) => { +export type BackgroundRepeat = "repeat" | "repeat-x" | "repeat-y" | "no-repeat"; +export namespace BackgroundRepeat { + export const REPEAT: "repeat" = "repeat"; + export const REPEAT_X: "repeat-x" = "repeat-x"; + export const REPEAT_Y: "repeat-y" = "repeat-y"; + export const NO_REPEAT: "no-repeat" = "no-repeat"; + export const isValid = makeValidator(REPEAT, REPEAT_X, REPEAT_Y, NO_REPEAT); + export const parse = makeParser(isValid, undefined); +} + +export const backgroundRepeatProperty = new CssProperty({ + name: "backgroundRepeat", cssName: "background-repeat", valueConverter: BackgroundRepeat.parse, valueChanged: (target, newValue) => { let background = target.backgroundInternal; target.backgroundInternal = background.withRepeat(newValue); } diff --git a/tns-core-modules/ui/core/view.d.ts b/tns-core-modules/ui/core/view.d.ts index c5338a49b..b287e7e7f 100644 --- a/tns-core-modules/ui/core/view.d.ts +++ b/tns-core-modules/ui/core/view.d.ts @@ -712,7 +712,7 @@ declare module "ui/core/view" { export const backgroundColorProperty: CssProperty; export const backgroundImageProperty: CssProperty; - export const backgroundRepeatProperty: CssProperty; + export const backgroundRepeatProperty: CssProperty; export const backgroundSizeProperty: CssProperty; export const backgroundPositionProperty: CssProperty; @@ -764,4 +764,14 @@ declare module "ui/core/view" { export const backgroundInternalProperty: CssProperty; export const fontInternalProperty: InheritedCssProperty; + + export type BackgroundRepeat = "repeat" | "repeat-x" | "repeat-y" | "no-repeat"; + export namespace BackgroundRepeat { + export const REPEAT: "repeat"; + export const REPEAT_X: "repeat-x"; + export const REPEAT_Y: "repeat-y"; + export const NO_REPEAT: "no-repeat"; + export function isValid(value: any): boolean; + export function parse(value: string): BackgroundRepeat; + } } \ No newline at end of file diff --git a/tns-core-modules/ui/styling/background-common.ts b/tns-core-modules/ui/styling/background-common.ts index 3be8696d0..d02c6cae5 100644 --- a/tns-core-modules/ui/styling/background-common.ts +++ b/tns-core-modules/ui/styling/background-common.ts @@ -1,5 +1,5 @@ import { Background as BackgroundDefinition, BackgroundDrawParams } from "ui/styling/background"; -import { Color, layout } from "ui/core/view"; +import { Color, layout, BackgroundRepeat } from "ui/core/view"; import { ImageSource } from "image-source"; import cssValue = require("css-value"); @@ -17,7 +17,7 @@ export class Background implements BackgroundDefinition { public color: Color; public image: ImageSource; - public repeat: "repeat" | "repeat-x" | "repeat-y" | "no-repeat"; + public repeat: BackgroundRepeat; public position: string; public size: string; public borderTopColor: Color; @@ -71,7 +71,7 @@ export class Background implements BackgroundDefinition { return clone; } - public withRepeat(value: "repeat" | "repeat-x" | "repeat-y" | "no-repeat"): Background { + public withRepeat(value: BackgroundRepeat): Background { let clone = this.clone(); clone.repeat = value; return clone; diff --git a/tns-core-modules/ui/styling/background.d.ts b/tns-core-modules/ui/styling/background.d.ts index 455ccf8f9..998546ab7 100644 --- a/tns-core-modules/ui/styling/background.d.ts +++ b/tns-core-modules/ui/styling/background.d.ts @@ -1,6 +1,6 @@ declare module "ui/styling/background" { import { ImageSource } from "image-source"; - import { View, Color } from "ui/core/view"; + import { View, Color, BackgroundRepeat } from "ui/core/view"; export interface BackgroundDrawParams { repeatX: boolean; @@ -15,7 +15,7 @@ declare module "ui/styling/background" { public static default: Background; public color: Color; public image: ImageSource; - public repeat: "repeat" | "repeat-x" | "repeat-y" | "no-repeat"; + public repeat: BackgroundRepeat; public position: string; public size: string; public borderTopColor: Color; @@ -34,7 +34,7 @@ declare module "ui/styling/background" { public withColor(value: Color): Background; public withImage(value: ImageSource): Background; - public withRepeat(value: string): Background; + public withRepeat(value: BackgroundRepeat): Background; public withPosition(value: string): Background; public withSize(value: string): Background; public withBorderTopColor(value: Color): Background; diff --git a/tns-core-modules/ui/styling/style.d.ts b/tns-core-modules/ui/styling/style.d.ts index 989658e09..b8299b6c3 100644 --- a/tns-core-modules/ui/styling/style.d.ts +++ b/tns-core-modules/ui/styling/style.d.ts @@ -1,5 +1,5 @@ declare module "ui/styling/style" { - import { Length, PercentLength, Color, Background, Font, ViewBase, Observable } from "ui/core/view"; + import { Length, PercentLength, Color, Background, Font, ViewBase, Observable, BackgroundRepeat} from "ui/core/view"; import { TextAlignment, TextDecoration, TextTransform, WhiteSpace } from "ui/text-base"; import { FontStyle, FontWeight } from "ui/styling/font"; @@ -56,7 +56,7 @@ declare module "ui/styling/style" { public backgroundColor: Color; public backgroundImage: string; - public backgroundRepeat: "repeat" | "repeat-x" | "repeat-y" | "no-repeat";; + public backgroundRepeat: BackgroundRepeat; public backgroundSize: string; public backgroundPosition: string; diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts index c0c4a1731..a20076318 100644 --- a/tns-core-modules/ui/styling/style.ts +++ b/tns-core-modules/ui/styling/style.ts @@ -1,5 +1,5 @@ import { Style as StyleDefinition } from "ui/styling/style"; -import { Length, PercentLength, Color, Background, Font, ViewBase } from "ui/core/view"; +import { Length, PercentLength, Color, Background, Font, ViewBase, BackgroundRepeat } from "ui/core/view"; import { Observable } from "data/observable"; import { resetStyleProperties } from "ui/core/properties"; @@ -35,7 +35,7 @@ export class Style extends Observable implements StyleDefinition { public backgroundColor: Color; public backgroundImage: string; - public backgroundRepeat: "repeat" | "repeat-x" | "repeat-y" | "no-repeat"; + public backgroundRepeat: BackgroundRepeat; public backgroundSize: string; public backgroundPosition: string;