javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-17 04:41:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3319 from NativeScript/visibility

Browse Source 
Visibility
This commit is contained in:
Rossen Hristov
2016-12-19 14:58:22 +02:00
committed by GitHub
parent 782c15a4e8 35c06ba855
commit 37d93643ea
10 changed files with 99 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
tns-core-modules/ui/activity-indicator/activity-indicator.android.ts
View File

@ -1,4 +1,4 @@
import { ActivityIndicatorBase, busyProperty, colorProperty, visibilityProperty } from "./activity-indicator-common"; import { ActivityIndicatorBase, busyProperty, colorProperty, visibilityProperty, Visibility } from "./activity-indicator-common";
export * from "./activity-indicator-common"; export * from "./activity-indicator-common";
@ -16,18 +16,31 @@ export class ActivityIndicator extends ActivityIndicatorBase {
} }
get [busyProperty.native](): boolean { get [busyProperty.native](): boolean {
return this._progressBar.getVisibility() === android.view.View.VISIBLE; return false;
} }
set [busyProperty.native](value: boolean) { set [busyProperty.native](value: boolean) {
this._progressBar.setVisibility(value ? android.view.View.VISIBLE : android.view.View.INVISIBLE); if (this.visibility === Visibility.VISIBLE) {
this._progressBar.setVisibility(value ? android.view.View.VISIBLE : android.view.View.INVISIBLE);
}
} }
get [visibilityProperty.native](): number { get [visibilityProperty.native](): Visibility {
return this._progressBar.getVisibility(); return Visibility.HIDDEN;
} }
set [visibilityProperty.native](value: number) { set [visibilityProperty.native](value: Visibility) {
this.busy = value === android.view.View.VISIBLE; switch (value) {
this._progressBar.setVisibility(value); case Visibility.VISIBLE:
this._progressBar.setVisibility(this.busy ? android.view.View.VISIBLE : android.view.View.INVISIBLE);
break;
case Visibility.HIDDEN:
this._progressBar.setVisibility(android.view.View.INVISIBLE);
break;
case Visibility.COLLAPSE:
this._progressBar.setVisibility(android.view.View.GONE);
break;
default:
throw new Error(`Invalid visibility value: ${value}. Valid values are: "${Visibility.VISIBLE}", "${Visibility.HIDDEN}", "${Visibility.COLLAPSE}".`);
}
} }
get [colorProperty.native](): number { get [colorProperty.native](): number {

9
tns-core-modules/ui/activity-indicator/activity-indicator.ios.ts
View File

@ -1,4 +1,4 @@
import { ActivityIndicatorBase, busyProperty, colorProperty, visibilityProperty } from "./activity-indicator-common"; import { ActivityIndicatorBase, busyProperty, colorProperty, visibilityProperty, Visibility } from "./activity-indicator-common";
import { ios } from "utils/utils"; import { ios } from "utils/utils";
export * from "./activity-indicator-common"; export * from "./activity-indicator-common";
@ -33,13 +33,6 @@ export class ActivityIndicator extends ActivityIndicatorBase {
} }
} }
get [visibilityProperty.native](): string {
return this.nativeView.hidden ? "collapse" : "visible";
}
set [visibilityProperty.native](value: string) {
this.nativeView.hidden = value !== "visible";
}
get [colorProperty.native](): UIColor { get [colorProperty.native](): UIColor {
return this.nativeView.color; return this.nativeView.color;
} }

11
tns-core-modules/ui/core/view-base.ts
View File

@ -500,17 +500,6 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
} }
} }
export const visibilityProperty = new CssProperty<Style, "visible" | "hidden" | "collapse" | "collapsed">({
name: "visibility", cssName: "visibility", defaultValue: "visible", affectsLayout: isIOS, valueChanged: (target, newValue) => {
if (newValue !== "visible" && newValue !== "collapse" && newValue !== "collapsed" && newValue !== "hidden") {
throw new Error(`Invalid visibility value: ${newValue}`);
}
target.view.isCollapsed = (newValue === "collapse" || newValue === "collapsed");
}
});
visibilityProperty.register(Style);
export const bindingContextProperty = new InheritedProperty<ViewBase, any>({ name: "bindingContext" }); export const bindingContextProperty = new InheritedProperty<ViewBase, any>({ name: "bindingContext" });
bindingContextProperty.register(ViewBase); bindingContextProperty.register(ViewBase);

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

@ -396,10 +396,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
this.style.verticalAlignment = value; this.style.verticalAlignment = value;
} }
get visibility(): "visible" | "hidden" | "collapse" | "collapsed" { get visibility(): Visibility {
return this.style.visibility; return this.style.visibility;
} }
set visibility(value: "visible" | "hidden" | "collapse" | "collapsed") { set visibility(value: Visibility) {
this.style.visibility = value; this.style.visibility = value;
} }
@ -1863,4 +1863,20 @@ const fontProperty = new ShorthandProperty<Style>({
] ]
} }
}) })
fontProperty.register(Style); fontProperty.register(Style);
export type Visibility = "visible" | "hidden" | "collapse";
export namespace Visibility {
export const VISIBLE: "visible" = "visible";
export const HIDDEN: "hidden" = "hidden";
export const COLLAPSE: "collapse" = "collapse";
export const isValid = makeValidator<Visibility>(VISIBLE, HIDDEN, COLLAPSE);
export const parse = makeParser(isValid, VISIBLE);
}
export const visibilityProperty = new CssProperty<Style, Visibility>({
name: "visibility", cssName: "visibility", defaultValue: Visibility.VISIBLE, affectsLayout: isIOS, valueConverter: Visibility.parse, valueChanged: (target, newValue) => {
target.view.isCollapsed = (newValue === Visibility.COLLAPSE);
}
});
visibilityProperty.register(Style);

45
tns-core-modules/ui/core/view.android.ts
View File

@ -8,7 +8,7 @@ import {
rotateProperty, scaleXProperty, scaleYProperty, rotateProperty, scaleXProperty, scaleYProperty,
translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty,
Background, GestureTypes, GestureEventData, applyNativeSetters, Property, Background, GestureTypes, GestureEventData, applyNativeSetters, Property,
traceEnabled, traceWrite, traceCategories, traceNotifyEvent traceEnabled, traceWrite, traceCategories, traceNotifyEvent, Visibility
} from "./view-common"; } from "./view-common";
export * from "./view-common"; export * from "./view-common";
@ -425,27 +425,32 @@ export class View extends ViewCommon {
} }
} }
get [visibilityProperty.native](): "visible" | "hidden" | "collapse" { get [visibilityProperty.native](): Visibility {
let visibility = this.nativeView.getVisibility(); let nativeVisibility = this.nativeView.getVisibility();
if (visibility === android.view.View.VISIBLE) { switch (nativeVisibility) {
return "visible"; case android.view.View.VISIBLE:
} return Visibility.VISIBLE;
else if (visibility === android.view.View.INVISIBLE) { case android.view.View.INVISIBLE:
return "hidden"; return Visibility.HIDDEN;
} case android.view.View.GONE:
else { return Visibility.COLLAPSE;
return "collapse"; default:
throw new Error(`Unsupported android.view.View visibility: ${nativeVisibility}. Currently supported values are android.view.View.VISIBLE, android.view.View.INVISIBLE, android.view.View.GONE.`);
} }
} }
set [visibilityProperty.native](value: string) { set [visibilityProperty.native](value: Visibility) {
if (value === "visible") { switch (value) {
this.nativeView.setVisibility(android.view.View.VISIBLE); case Visibility.VISIBLE:
} this.nativeView.setVisibility(android.view.View.VISIBLE);
else if (value === "hidden") { break;
this.nativeView.setVisibility(android.view.View.INVISIBLE); case Visibility.HIDDEN:
} this.nativeView.setVisibility(android.view.View.INVISIBLE);
else { break;
this.nativeView.setVisibility(android.view.View.GONE); case Visibility.COLLAPSE:
this.nativeView.setVisibility(android.view.View.GONE);
break;
default:
throw new Error(`Invalid visibility value: ${value}. Valid values are: "${Visibility.VISIBLE}", "${Visibility.HIDDEN}", "${Visibility.COLLAPSE}".`);
} }
} }

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

@ -27,7 +27,7 @@ declare module "ui/core/view" {
BindingOptions, Observable, EventData BindingOptions, Observable, EventData
} from "ui/core/view-base"; } from "ui/core/view-base";
import { Background } from "ui/styling/background"; import { Background } from "ui/styling/background";
import { Font } from "ui/styling/font"; import { Font, FontWeight, FontStyle } from "ui/styling/font";
import { Color } from "color"; import { Color } from "color";
export { export {
@ -283,7 +283,7 @@ declare module "ui/core/view" {
/** /**
* Gets or sets the visibility of the view. * Gets or sets the visibility of the view.
*/ */
visibility: "visible" | "hidden" | "collapse" | "collapsed"; visibility: Visibility;
/** /**
* Gets or sets the opacity style property. * Gets or sets the opacity style property.
@ -735,7 +735,7 @@ declare module "ui/core/view" {
export const borderBottomLeftRadiusProperty: CssProperty<Style, number>; export const borderBottomLeftRadiusProperty: CssProperty<Style, number>;
export const zIndexProperty: CssProperty<Style, number>; export const zIndexProperty: CssProperty<Style, number>;
export const visibilityProperty: CssProperty<Style, string>; export const visibilityProperty: CssProperty<Style, Visibility>;
export const opacityProperty: CssProperty<Style, number>; export const opacityProperty: CssProperty<Style, number>;
export const minWidthProperty: CssProperty<Style, Length>; export const minWidthProperty: CssProperty<Style, Length>;
@ -759,8 +759,8 @@ declare module "ui/core/view" {
export const fontSizeProperty: InheritedCssProperty<Style, number>; export const fontSizeProperty: InheritedCssProperty<Style, number>;
export const fontFamilyProperty: InheritedCssProperty<Style, string>; export const fontFamilyProperty: InheritedCssProperty<Style, string>;
export const fontStyleProperty: InheritedCssProperty<Style, string>; export const fontStyleProperty: InheritedCssProperty<Style, FontStyle>;
export const fontWeightProperty: InheritedCssProperty<Style, string>; export const fontWeightProperty: InheritedCssProperty<Style, FontWeight>;
export const backgroundInternalProperty: CssProperty<Style, Background>; export const backgroundInternalProperty: CssProperty<Style, Background>;
export const fontInternalProperty: InheritedCssProperty<Style, Font>; export const fontInternalProperty: InheritedCssProperty<Style, Font>;
@ -774,4 +774,13 @@ declare module "ui/core/view" {
export function isValid(value: any): boolean; export function isValid(value: any): boolean;
export function parse(value: string): BackgroundRepeat; export function parse(value: string): BackgroundRepeat;
} }
export type Visibility = "visible" | "hidden" | "collapse";
export namespace Visibility {
export const VISIBLE: "visible";
export const HIDDEN: "hidden";
export const COLLAPSE: "collapse";
export function isValid(value: any): boolean;
export function parse(value: string): Visibility;
}
} }

20
tns-core-modules/ui/core/view.ios.ts
View File

@ -7,7 +7,7 @@ import {
paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty,
rotateProperty, scaleXProperty, scaleYProperty, rotateProperty, scaleXProperty, scaleYProperty,
translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty,
clipPathProperty, layout, traceEnabled, traceWrite, traceCategories, Background clipPathProperty, layout, traceEnabled, traceWrite, traceCategories, Background, Visibility
} from "./view-common"; } from "./view-common";
export * from "./view-common"; export * from "./view-common";
@ -349,11 +349,21 @@ export class View extends ViewCommon {
this._nativeView.userInteractionEnabled = value; this._nativeView.userInteractionEnabled = value;
} }
get [visibilityProperty.native](): "visible" | "hidden" | "collapse" | "collapsed"{ get [visibilityProperty.native](): Visibility {
return "visible" return this._nativeView.hidden ? Visibility.COLLAPSE : Visibility.VISIBLE;
} }
set [visibilityProperty.native](value: "visible" | "hidden" | "collapse" | "collapsed") { set [visibilityProperty.native](value: Visibility) {
this._nativeView.hidden = (value !== "visible"); switch (value) {
case Visibility.VISIBLE:
this._nativeView.hidden = false;
break;
case Visibility.HIDDEN:
case Visibility.COLLAPSE:
this._nativeView.hidden = true;
break;
default:
throw new Error(`Invalid visibility value: ${value}. Valid values are: "${Visibility.VISIBLE}", "${Visibility.HIDDEN}", "${Visibility.COLLAPSE}".`);
}
} }
get [opacityProperty.native](): number { get [opacityProperty.native](): number {

10
tns-core-modules/ui/styling/converters.ts
View File

@ -17,16 +17,6 @@ export function fontSizeConverter(value: string): number {
export const numberConverter = parseFloat; export const numberConverter = parseFloat;
export function visibilityConverter(value: string): string {
value = value.toLowerCase();
if (value === "collapsed" || value === "collapse") {
return "collapse";
} else if (value === "hidden") {
return "hidden";
}
return "visible";
}
export function opacityConverter(value: string): number { export function opacityConverter(value: string): number {
let result = parseFloat(value); let result = parseFloat(value);
result = Math.max(0.0, result); result = Math.max(0.0, result);

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

@ -1,5 +1,5 @@
declare module "ui/styling/style" { declare module "ui/styling/style" {
import { Length, PercentLength, Color, Background, Font, ViewBase, Observable, BackgroundRepeat} from "ui/core/view"; import { Length, PercentLength, Color, Background, Font, ViewBase, Observable, BackgroundRepeat, Visibility} 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";
@ -84,7 +84,7 @@ declare module "ui/styling/style" {
public zIndex: number; public zIndex: number;
public opacity: number; public opacity: number;
public visibility: "visible" | "hidden" | "collapse" | "collapsed"; public visibility: Visibility;
public letterSpacing: number; public letterSpacing: number;
public textAlignment: TextAlignment; public textAlignment: TextAlignment;

4
tns-core-modules/ui/styling/style.ts
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, BackgroundRepeat } from "ui/core/view"; import { Length, PercentLength, Color, Background, Font, ViewBase, BackgroundRepeat, Visibility } 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";
@ -63,7 +63,7 @@ export class Style extends Observable implements StyleDefinition {
public zIndex: number; public zIndex: number;
public opacity: number; public opacity: number;
public visibility: "visible" | "hidden" | "collapse" | "collapsed"; public visibility: Visibility;
public letterSpacing: number; public letterSpacing: number;
public textAlignment: TextAlignment; public textAlignment: TextAlignment;