javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-14 18:12:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(view): "hidden" property binding is now supported

Browse Source
This commit is contained in:
Nathan Walker
2021-03-17 13:48:30 -07:00
parent 770030e7f6
commit f00144e872
6 changed files with 84 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/toolbox/src/main-page.xml
View File

@ -11,6 +11,7 @@
<Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="visibility-vs-hidden" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
</StackLayout>
</ScrollView>
</StackLayout>

32
apps/toolbox/src/pages/visibility-vs-hidden.ts Normal file
View File

@ -0,0 +1,32 @@
import { Observable, EventData, Page, CoreTypes } from '@nativescript/core';
let page: Page;
export function navigatingTo(args: EventData) {
page = <Page>args.object;
page.bindingContext = new VisibilityVsHiddenModel();
}
export class VisibilityVsHiddenModel extends Observable {
currentVisibility = CoreTypes.Visibility.visible;
currentVisibilityType = `Current Visibility: ${this.currentVisibility}`;
currentVisibilityIndex = 0;
visibilityOptions = [CoreTypes.Visibility.visible, CoreTypes.Visibility.collapse, CoreTypes.Visibility.hidden];
currentHidden = false;
currentHiddenType = `Current Hidden: ${this.currentHidden}`;
toggleVisibility() {
this.currentVisibilityIndex++;
if (this.currentVisibilityIndex === 3) {
this.currentVisibilityIndex = 0;
}
this.set('currentVisibility', this.visibilityOptions[this.currentVisibilityIndex]);
this.set('currentVisibilityType', `Current Visibility: ${this.visibilityOptions[this.currentVisibilityIndex]}`);
}
toggleHidden() {
this.set('currentHidden', !this.currentHidden);
this.set('currentHiddenType', `Current Hidden: ${this.currentHidden}`);
}
}

22
apps/toolbox/src/pages/visibility-vs-hidden.xml Normal file
View File

@ -0,0 +1,22 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<Page.actionBar>
<ActionBar title="Visibility vs. Hidden" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout class="p-20">
<Label text="Explore Visibility vs. hidden here. They can be used for various use cases where needed. They are very subtly different." textWrap="true" class="m-b-20 v-center text-center" />
<Label text="{{currentVisibilityType}}" class="m-b-10 text-center" />
<ContentView visibility="{{currentVisibility}}">
<Label text="I appear, hide and disappear" class="v-center text-center" />
</ContentView>
<Button class="btn btn-primary m-b-30" text="Toggle Visibility: Visible/Collapse/Hidden" tap="{{ toggleVisibility }}" />
<Label text="{{currentHiddenType}}" class="v-center text-center" />
<ContentView hidden="{{currentHidden}}">
<Label text="I appear and disappear" class="v-center text-center" />
</ContentView>
<Button class="btn btn-primary" text="Toggle Hidden" tap="{{ toggleHidden }}" />
</StackLayout>
</Page>

13
packages/core/ui/core/view-base/index.ts
View File

@ -1163,6 +1163,19 @@ export const bindingContextProperty = new InheritedProperty<ViewBase, any>({
});
bindingContextProperty.register(ViewBase);
export const hiddenProperty = new Property<ViewBase, boolean>({
name: 'hidden',
defaultValue: false,
affectsLayout: global.isIOS,
valueConverter: booleanConverter,
valueChanged: (target, oldValue, newValue) => {
if (target) {
target.isCollapsed = !!newValue;
}
},
});
hiddenProperty.register(ViewBase);
export const classNameProperty = new Property<ViewBase, string>({
name: 'className',
valueChanged(view: ViewBase, oldValue: string, newValue: string) {

9
packages/core/ui/core/view/index.android.ts
View File

@ -7,7 +7,7 @@ import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUser
import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../../styling/style-properties';
import { layout } from '../../../utils';
import { Trace } from '../../../trace';
import { ShowModalOptions } from '../view-base';
import { ShowModalOptions, hiddenProperty } from '../view-base';
import { EventData } from '../../../data/observable';
import { perspectiveProperty, visibilityProperty, opacityProperty, horizontalAlignmentProperty, verticalAlignmentProperty, minWidthProperty, minHeightProperty, widthProperty, heightProperty, marginLeftProperty, marginTopProperty, marginRightProperty, marginBottomProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, androidElevationProperty, androidDynamicElevationOffsetProperty } from '../../styling/style-properties';
@ -730,6 +730,13 @@ export class View extends ViewCommon {
this.nativeViewProtected.setFocusable(value);
}
[hiddenProperty.getDefault](): boolean {
return this.nativeViewProtected.getVisibility() === android.view.View.GONE;
}
[hiddenProperty.setNative](value: boolean) {
this.nativeViewProtected.setVisibility(value ? android.view.View.GONE : android.view.View.VISIBLE);
}
[visibilityProperty.getDefault](): CoreTypes.VisibilityType {
const nativeVisibility = this.nativeViewProtected.getVisibility();
switch (nativeVisibility) {

9
packages/core/ui/core/view/index.ios.ts
View File

@ -3,7 +3,7 @@ import { Point, View as ViewDefinition } from '.';
// Requires
import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUserInteractionEnabledProperty } from './view-common';
import { ShowModalOptions } from '../view-base';
import { ShowModalOptions, hiddenProperty } from '../view-base';
import { Trace } from '../../../trace';
import { layout, iOSNativeHelper } from '../../../utils';
import { IOSHelper } from './view-helper';
@ -643,6 +643,13 @@ export class View extends ViewCommon implements ViewDefinition {
this.nativeViewProtected.userInteractionEnabled = value;
}
[hiddenProperty.getDefault](): boolean {
return this.nativeViewProtected.hidden;
}
[hiddenProperty.setNative](value: boolean) {
this.nativeViewProtected.hidden = value;
}
[visibilityProperty.getDefault](): CoreTypes.VisibilityType {
return this.nativeViewProtected.hidden ? CoreTypes.Visibility.collapse : CoreTypes.Visibility.visible;
}