javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 20:11:24 +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";
@ -22,12 +22,33 @@ export class ActivityIndicator extends ActivityIndicatorBase {
this._progressBar.setVisibility(value ? android.view.View.VISIBLE : android.view.View.INVISIBLE);
}
get [visibilityProperty.native](): number {
return this._progressBar.getVisibility();
get [visibilityProperty.native](): Visibility {
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) {
this.busy = value === android.view.View.VISIBLE;
this._progressBar.setVisibility(value);
set [visibilityProperty.native](value: Visibility) {
switch (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 {

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";
export * from "./activity-indicator-common";
@ -33,11 +33,11 @@ export class ActivityIndicator extends ActivityIndicatorBase {
}
}
get [visibilityProperty.native](): string {
return this.nativeView.hidden ? "collapse" : "visible";
get [visibilityProperty.native](): Visibility {
return this.nativeView.hidden ? Visibility.COLLAPSE : Visibility.VISIBLE;
}
set [visibilityProperty.native](value: string) {
this.nativeView.hidden = value !== "visible";
set [visibilityProperty.native](value: Visibility) {
this.nativeView.hidden = value !== Visibility.VISIBLE;
}
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" });
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;
}
get visibility(): "visible" | "hidden" | "collapse" | "collapsed" {
get visibility(): Visibility {
return this.style.visibility;
}
set visibility(value: "visible" | "hidden" | "collapse" | "collapsed") {
set visibility(value: Visibility) {
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,
translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty,
Background, GestureTypes, GestureEventData, applyNativeSetters, Property,
traceEnabled, traceWrite, traceCategories, traceNotifyEvent
traceEnabled, traceWrite, traceCategories, traceNotifyEvent, Visibility
} from "./view-common";
export * from "./view-common";
@ -425,27 +425,32 @@ export class View extends ViewCommon {
}
}
get [visibilityProperty.native](): "visible" | "hidden" | "collapse" {
let visibility = this.nativeView.getVisibility();
if (visibility === android.view.View.VISIBLE) {
return "visible";
}
else if (visibility === android.view.View.INVISIBLE) {
return "hidden";
}
else {
return "collapse";
get [visibilityProperty.native](): Visibility {
let nativeVisibility = this.nativeView.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: string) {
if (value === "visible") {
this.nativeView.setVisibility(android.view.View.VISIBLE);
}
else if (value === "hidden") {
this.nativeView.setVisibility(android.view.View.INVISIBLE);
}
else {
this.nativeView.setVisibility(android.view.View.GONE);
set [visibilityProperty.native](value: Visibility) {
switch (value) {
case Visibility.VISIBLE:
this.nativeView.setVisibility(android.view.View.VISIBLE);
break;
case Visibility.HIDDEN:
this.nativeView.setVisibility(android.view.View.INVISIBLE);
break;
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.
*/
visibility: "visible" | "hidden" | "collapse" | "collapsed";
visibility: Visibility;
/**
* Gets or sets the opacity style property.
@ -774,4 +774,13 @@ declare module "ui/core/view" {
export function isValid(value: any): boolean;
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,
rotateProperty, scaleXProperty, scaleYProperty,
translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty,
clipPathProperty, layout, traceEnabled, traceWrite, traceCategories, Background
clipPathProperty, layout, traceEnabled, traceWrite, traceCategories, Background, Visibility
} from "./view-common";
export * from "./view-common";
@ -349,11 +349,21 @@ export class View extends ViewCommon {
this._nativeView.userInteractionEnabled = value;
}
get [visibilityProperty.native](): "visible" | "hidden" | "collapse" | "collapsed"{
return "visible"
get [visibilityProperty.native](): Visibility {
return this._nativeView.hidden ? Visibility.COLLAPSE : Visibility.VISIBLE;
}
set [visibilityProperty.native](value: "visible" | "hidden" | "collapse" | "collapsed") {
this._nativeView.hidden = (value !== "visible");
set [visibilityProperty.native](value: Visibility) {
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 {

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 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 {
let result = parseFloat(value);
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" {
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 { FontStyle, FontWeight } from "ui/styling/font";
@ -84,7 +84,7 @@ declare module "ui/styling/style" {
public zIndex: number;
public opacity: number;
public visibility: "visible" | "hidden" | "collapse" | "collapsed";
public visibility: Visibility;
public letterSpacing: number;
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 { 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 { resetStyleProperties } from "ui/core/properties";
@ -63,7 +63,7 @@ export class Style extends Observable implements StyleDefinition {
public zIndex: number;
public opacity: number;
public visibility: "visible" | "hidden" | "collapse" | "collapsed";
public visibility: Visibility;
public letterSpacing: number;
public textAlignment: TextAlignment;