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

Visibility

Browse Source
This commit is contained in:
Rossen Hristov
2016-12-19 11:56:32 +02:00
parent 782c15a4e8
commit 1255e6bd4a
10 changed files with 105 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
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";
@ -22,12 +22,33 @@ export class ActivityIndicator extends ActivityIndicatorBase {
this._progressBar.setVisibility(value ? android.view.View.VISIBLE : android.view.View.INVISIBLE); this._progressBar.setVisibility(value ? android.view.View.VISIBLE : android.view.View.INVISIBLE);
} }
get [visibilityProperty.native](): number { get [visibilityProperty.native](): Visibility {
return this._progressBar.getVisibility(); let nativeVisibility = this._progressBar.getVisibility();
switch (nativeVisibility) {
case android.view.View.VISIBLE:
return Visibility.VISIBLE;
case android.view.View.INVISIBLE:
return Visibility.HIDDEN;
case android.view.View.GONE:
return Visibility.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: 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(android.view.View.VISIBLE);
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 {

10
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,11 +33,11 @@ export class ActivityIndicator extends ActivityIndicatorBase {
} }
} }
get [visibilityProperty.native](): string { get [visibilityProperty.native](): Visibility {
return this.nativeView.hidden ? "collapse" : "visible"; return this.nativeView.hidden ? Visibility.COLLAPSE : Visibility.VISIBLE;
} }
set [visibilityProperty.native](value: string) { set [visibilityProperty.native](value: Visibility) {
this.nativeView.hidden = value !== "visible"; this.nativeView.hidden = value !== Visibility.VISIBLE;
} }
get [colorProperty.native](): UIColor { get [colorProperty.native](): UIColor {

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}".`);
} }
} }

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

@ -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.
@ -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;