BackgroundRepeat enum

This commit is contained in:
Rossen Hristov
2016-12-19 10:58:52 +02:00
parent 745388c3da
commit c61c58e52f
6 changed files with 34 additions and 14 deletions

View File

@ -6,7 +6,7 @@ import { Background } from "ui/styling/background";
import { import {
ViewBase, getEventOrGestureName, Observable, EventData, Style, ViewBase, getEventOrGestureName, Observable, EventData, Style,
Property, InheritedProperty, CssProperty, ShorthandProperty, InheritedCssProperty, Property, InheritedProperty, CssProperty, ShorthandProperty, InheritedCssProperty,
gestureFromString, isIOS, traceEnabled, traceWrite, traceCategories, traceNotifyEvent, printUnregisteredProperties gestureFromString, isIOS, traceEnabled, traceWrite, traceCategories, traceNotifyEvent, printUnregisteredProperties, makeParser, makeValidator
} from "./view-base"; } from "./view-base";
import { observe as gestureObserve, GesturesObserver, GestureTypes, GestureEventData } from "ui/gestures"; import { observe as gestureObserve, GesturesObserver, GestureTypes, GestureEventData } from "ui/gestures";
import { Font, parseFont, FontStyle, FontWeight } from "ui/styling/font"; import { Font, parseFont, FontStyle, FontWeight } from "ui/styling/font";
@ -1464,8 +1464,18 @@ export const backgroundColorProperty = new CssProperty<Style, Color>({
}); });
backgroundColorProperty.register(Style); backgroundColorProperty.register(Style);
export const backgroundRepeatProperty = new CssProperty<Style, string>({ export type BackgroundRepeat = "repeat" | "repeat-x" | "repeat-y" | "no-repeat";
name: "backgroundRepeat", cssName: "background-repeat", valueChanged: (target, newValue) => { 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<BackgroundRepeat>(REPEAT, REPEAT_X, REPEAT_Y, NO_REPEAT);
export const parse = makeParser(isValid, undefined);
}
export const backgroundRepeatProperty = new CssProperty<Style, BackgroundRepeat>({
name: "backgroundRepeat", cssName: "background-repeat", valueConverter: BackgroundRepeat.parse, valueChanged: (target, newValue) => {
let background = target.backgroundInternal; let background = target.backgroundInternal;
target.backgroundInternal = background.withRepeat(newValue); target.backgroundInternal = background.withRepeat(newValue);
} }

View File

@ -712,7 +712,7 @@ declare module "ui/core/view" {
export const backgroundColorProperty: CssProperty<Style, Color>; export const backgroundColorProperty: CssProperty<Style, Color>;
export const backgroundImageProperty: CssProperty<Style, string>; export const backgroundImageProperty: CssProperty<Style, string>;
export const backgroundRepeatProperty: CssProperty<Style, string>; export const backgroundRepeatProperty: CssProperty<Style, BackgroundRepeat>;
export const backgroundSizeProperty: CssProperty<Style, string>; export const backgroundSizeProperty: CssProperty<Style, string>;
export const backgroundPositionProperty: CssProperty<Style, string>; export const backgroundPositionProperty: CssProperty<Style, string>;
@ -764,4 +764,14 @@ declare module "ui/core/view" {
export const backgroundInternalProperty: CssProperty<Style, Background>; export const backgroundInternalProperty: CssProperty<Style, Background>;
export const fontInternalProperty: InheritedCssProperty<Style, Font>; export const fontInternalProperty: InheritedCssProperty<Style, Font>;
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;
}
} }

View File

@ -1,5 +1,5 @@
import { Background as BackgroundDefinition, BackgroundDrawParams } from "ui/styling/background"; 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 { ImageSource } from "image-source";
import cssValue = require("css-value"); import cssValue = require("css-value");
@ -17,7 +17,7 @@ export class Background implements BackgroundDefinition {
public color: Color; public color: Color;
public image: ImageSource; public image: ImageSource;
public repeat: "repeat" | "repeat-x" | "repeat-y" | "no-repeat"; public repeat: BackgroundRepeat;
public position: string; public position: string;
public size: string; public size: string;
public borderTopColor: Color; public borderTopColor: Color;
@ -71,7 +71,7 @@ export class Background implements BackgroundDefinition {
return clone; return clone;
} }
public withRepeat(value: "repeat" | "repeat-x" | "repeat-y" | "no-repeat"): Background { public withRepeat(value: BackgroundRepeat): Background {
let clone = this.clone(); let clone = this.clone();
clone.repeat = value; clone.repeat = value;
return clone; return clone;

View File

@ -1,6 +1,6 @@
declare module "ui/styling/background" { declare module "ui/styling/background" {
import { ImageSource } from "image-source"; import { ImageSource } from "image-source";
import { View, Color } from "ui/core/view"; import { View, Color, BackgroundRepeat } from "ui/core/view";
export interface BackgroundDrawParams { export interface BackgroundDrawParams {
repeatX: boolean; repeatX: boolean;
@ -15,7 +15,7 @@ declare module "ui/styling/background" {
public static default: Background; public static default: Background;
public color: Color; public color: Color;
public image: ImageSource; public image: ImageSource;
public repeat: "repeat" | "repeat-x" | "repeat-y" | "no-repeat"; public repeat: BackgroundRepeat;
public position: string; public position: string;
public size: string; public size: string;
public borderTopColor: Color; public borderTopColor: Color;
@ -34,7 +34,7 @@ declare module "ui/styling/background" {
public withColor(value: Color): Background; public withColor(value: Color): Background;
public withImage(value: ImageSource): Background; public withImage(value: ImageSource): Background;
public withRepeat(value: string): Background; public withRepeat(value: BackgroundRepeat): Background;
public withPosition(value: string): Background; public withPosition(value: string): Background;
public withSize(value: string): Background; public withSize(value: string): Background;
public withBorderTopColor(value: Color): Background; public withBorderTopColor(value: Color): Background;

View File

@ -1,5 +1,5 @@
declare module "ui/styling/style" { 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 { TextAlignment, TextDecoration, TextTransform, WhiteSpace } from "ui/text-base";
import { FontStyle, FontWeight } from "ui/styling/font"; import { FontStyle, FontWeight } from "ui/styling/font";
@ -56,7 +56,7 @@ declare module "ui/styling/style" {
public backgroundColor: Color; public backgroundColor: Color;
public backgroundImage: string; public backgroundImage: string;
public backgroundRepeat: "repeat" | "repeat-x" | "repeat-y" | "no-repeat";; public backgroundRepeat: BackgroundRepeat;
public backgroundSize: string; public backgroundSize: string;
public backgroundPosition: string; public backgroundPosition: string;

View File

@ -1,5 +1,5 @@
import { Style as StyleDefinition } from "ui/styling/style"; 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 { Observable } from "data/observable";
import { resetStyleProperties } from "ui/core/properties"; import { resetStyleProperties } from "ui/core/properties";
@ -35,7 +35,7 @@ export class Style extends Observable implements StyleDefinition {
public backgroundColor: Color; public backgroundColor: Color;
public backgroundImage: string; public backgroundImage: string;
public backgroundRepeat: "repeat" | "repeat-x" | "repeat-y" | "no-repeat"; public backgroundRepeat: BackgroundRepeat;
public backgroundSize: string; public backgroundSize: string;
public backgroundPosition: string; public backgroundPosition: string;