Skip to content

Commit ec77761

Browse files
NathanWalkerNathanWalker
authored
feat: nativescript-popup (#169)
1 parent 79bf284 commit ec77761

File tree

47 files changed

+436
-59
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+436
-59
lines changed

‎packages/nativescript-accelerometer/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Nativescript nativescript-accelerometer
22

33
```bash
4-
ns plugin add @triniwiz/nativescript-accelerometer
4+
npm install @triniwiz/nativescript-accelerometer
55
```
66

77
## API documentation

‎packages/nativescript-accordion/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# NativeScript Accordion
22

33
## Install
4-
`ns plugin add nativescript-accordion`
4+
`npm install nativescript-accordion`
55

66
## Usage
77

‎packages/nativescript-autocomplete/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Nativescript nativescript-autocomplete
22

33
```javascript
4-
ns plugin add @triniwiz/nativescript-autocomplete
4+
npm install @triniwiz/nativescript-autocomplete
55
```
66

77
## Usage

‎packages/nativescript-aws-sdk/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Nativescript AWS SDK
22

33
```javascript
4-
ns plugin add @triniwiz/nativescript-aws-sdk
4+
npm install @triniwiz/nativescript-aws-sdk
55
```
66

77
## Usage

‎packages/nativescript-couchbase/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
## Installation
44

55
```bash
6-
tns plugin add @triniwiz/nativescript-couchbase
6+
tnpm install @triniwiz/nativescript-couchbase
77
```
88

99
## API documentation

‎packages/nativescript-downloader/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Installation
44

5-
`ns plugin add @triniwiz/nativescript-downloader`
5+
`npm install @triniwiz/nativescript-downloader`
66

77
## Usage
88

‎packages/nativescript-ffmpeg/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Nativescript nativescript-ffmpeg
22

33
```javascript
4-
ns plugin add @triniwiz/nativescript-ffmpeg
4+
npm install @triniwiz/nativescript-ffmpeg
55
```
66

77
## API documentation

‎packages/nativescript-here/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Nativescript nativescript-here
22

33
```javascript
4-
ns plugin add @triniwiz/nativescript-here
4+
npm install @triniwiz/nativescript-here
55
```
66

77
## Usage

‎packages/nativescript-image-cache-it/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
## Installation
44

55
```bash
6-
tns plugin add @triniwiz/nativescript-image-cache-it
6+
tnpm install @triniwiz/nativescript-image-cache-it
77
```
88

99
## API documentation

‎packages/nativescript-image-zoom/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Nativescript nativescript-image-zoom
22

33
```javascript
4-
ns plugin add @triniwiz/nativescript-image-zoom
4+
npm install @triniwiz/nativescript-image-zoom
55
```
66

77
## API documentation

‎packages/nativescript-imageoptimize/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Nativescript Nativescript Imageoptimize
22

33
```javascript
4-
ns plugin add @triniwiz/nativescript-imageoptimize
4+
npm install @triniwiz/nativescript-imageoptimize
55
```
66

77
## Usage

‎packages/nativescript-nested-scrollview/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Nativescript nativescript-nested-scrollview
22

33
```javascript
4-
ns plugin add @triniwiz/nativescript-nested-scrollview
4+
npm install @triniwiz/nativescript-nested-scrollview
55
```
66

77
## API documentation

‎packages/nativescript-opentok/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Nativescript nativescript-opentok
22

33
```javascript
4-
ns plugin add @triniwiz/nativescript-opentok
4+
npm install @triniwiz/nativescript-opentok
55
```
66

77
## Usage

‎packages/nativescript-pager/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Nativescript nativescript-pager
22

33
```javascript
4-
ns plugin add @triniwiz/nativescript-pager
4+
npm install @triniwiz/nativescript-pager
55
```
66

77
## API documentation

‎packages/nativescript-parsesdk/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Nativescript nativescript-parsesdk
22

33
```javascript
4-
ns plugin add @triniwiz/nativescript-parsesdk
4+
npm install @triniwiz/nativescript-parsesdk
55
```
66

77
## Usage

‎packages/nativescript-popup/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Nativescript nativescript-popup
22

33
```javascript
4-
ns plugin add @triniwiz/nativescript-popup
4+
npm install @triniwiz/nativescript-popup
55
```
66

77
## Usage

‎packages/nativescript-popup/common.ts

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1-
import { Observable } from '@nativescript/core';
2-
3-
export class NativescriptPopupCommon extends Observable {}
1+
export class PopupOptions {
2+
height?: number;
3+
width?: number;
4+
unit?: 'dp' | 'px' | '%' = 'dp';
5+
backgroundColor?: string = '#fff';
6+
hideArrow?: boolean = false;
7+
elevation?: number;
8+
borderRadius?: number;
9+
outsideTouchble?: boolean = true;
10+
}

‎packages/nativescript-popup/index.android.ts

+156-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,157 @@
1-
import { NativescriptPopupCommon } from './common';
1+
import { Builder, Utils, View, Frame, StackLayout, Color, Device, Screen, knownFolders, path } from '@nativescript/core';
2+
import { PopupOptions } from './common';
23

3-
export class NativescriptPopup extends NativescriptPopupCommon {}
4+
export class Popup {
5+
private _popup: android.widget.PopupWindow;
6+
private _options: PopupOptions;
7+
private resolveData;
8+
resolve;
9+
reject;
10+
private _view;
11+
12+
constructor(options?: PopupOptions) {
13+
this._options = new PopupOptions();
14+
this._popup = new android.widget.PopupWindow(
15+
Utils.android.getApplicationContext()
16+
);
17+
this._popup.setOnDismissListener(new android.widget.PopupWindow.OnDismissListener({
18+
onDismiss: () => {
19+
if (this.resolve) {
20+
this.resolve(this.resolveData);
21+
}
22+
this.resolve = null;
23+
this.reject = null;
24+
if (this._view) {
25+
Frame.topmost()._removeView(this._view);
26+
}
27+
}
28+
}));
29+
if (options) {
30+
Object.keys(options).forEach(key => {
31+
this._options[key] = options[key];
32+
});
33+
}
34+
}
35+
36+
public showPopup(source: any, view: any): Promise<boolean> {
37+
return new Promise((resolve, reject) => {
38+
this._popup.setOutsideTouchable(this._options.outsideTouchble);
39+
this.reject = reject;
40+
this.resolve = resolve;
41+
// check the view argument
42+
if (view instanceof android.view.View) {
43+
this._popup.setContentView(view);
44+
} else if (view instanceof View) {
45+
Frame.topmost()._addView(view);
46+
this._stylePopup();
47+
this._view = view;
48+
this._popup.setContentView(view.android);
49+
} else if (typeof view === 'string' || view instanceof String) {
50+
// this is a template so use the builder to load the template
51+
this._stylePopup();
52+
const stack = new StackLayout();
53+
Frame.topmost()._addView(stack);
54+
stack.removeChildren(); // ensure nothing in the stack
55+
let filePath;
56+
let component;
57+
if (view.startsWith('~')) {
58+
view = view.replace('~', '');
59+
filePath = knownFolders.currentApp().path;
60+
console.log(path.join(filePath, view));
61+
component = Builder.load(path.join(filePath, view));
62+
console.log(component);
63+
} else {
64+
component = Builder.load(<any>view);
65+
}
66+
stack.addChild(component);
67+
this._view = stack;
68+
this._popup.setContentView(stack.android);
69+
}
70+
71+
// check the source argument
72+
if (source instanceof android.view.View) {
73+
this._popup.showAsDropDown(source);
74+
} else if (source instanceof View) {
75+
this._popup.showAsDropDown(source.android);
76+
}
77+
});
78+
}
79+
80+
public hidePopup(data?: any) {
81+
this.resolveData = data;
82+
this._popup.dismiss();
83+
}
84+
85+
private _stylePopup() {
86+
let height;
87+
let width;
88+
switch (this._options.unit) {
89+
case 'px':
90+
if (this._options.height && !this._options.width) {
91+
height = this._options.height;
92+
width =
93+
this._options.height *
94+
(Screen.mainScreen.widthPixels / Screen.mainScreen.heightPixels);
95+
} else if (this._options.width && !this._options.height) {
96+
height =
97+
this._options.width *
98+
(Screen.mainScreen.widthPixels / Screen.mainScreen.heightPixels);
99+
width = this._options.width;
100+
} else {
101+
width = this._options.width;
102+
height = this._options.height;
103+
}
104+
break;
105+
case '%':
106+
if (this._options.height && !this._options.width) {
107+
height = Screen.mainScreen.heightDIPs * (this._options.height / 100);
108+
width =
109+
height *
110+
(Screen.mainScreen.widthPixels / Screen.mainScreen.heightPixels);
111+
} else if (this._options.width && !this._options.height) {
112+
width = Screen.mainScreen.widthDIPs * (this._options.width / 100);
113+
height =
114+
width *
115+
(Screen.mainScreen.widthPixels / Screen.mainScreen.heightPixels);
116+
} else {
117+
width = Screen.mainScreen.widthDIPs * (this._options.width / 100);
118+
height = Screen.mainScreen.heightDIPs * (this._options.height / 100);
119+
}
120+
break;
121+
default:
122+
if (this._options.height && !this._options.width) {
123+
height = this._options.height;
124+
width =
125+
this._options.height *
126+
(Screen.mainScreen.widthPixels / Screen.mainScreen.heightPixels);
127+
} else if (this._options.width && !this._options.height) {
128+
height =
129+
this._options.width *
130+
(Screen.mainScreen.widthPixels / Screen.mainScreen.heightPixels);
131+
width = this._options.width;
132+
} else {
133+
width = this._options.width ? this._options.width : 400;
134+
height = this._options.height ? this._options.height : 320;
135+
}
136+
break;
137+
}
138+
139+
const shape = new android.graphics.drawable.GradientDrawable();
140+
shape.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
141+
142+
if (this._options && this._options.borderRadius) {
143+
shape.setCornerRadius(this._options.borderRadius);
144+
}
145+
if (this._options && this._options.backgroundColor) {
146+
shape.setColor(new Color(this._options.backgroundColor).android);
147+
}
148+
(this._popup as any).setBackgroundDrawable(shape);
149+
if (parseInt(Device.sdkVersion, 10) >= 21) {
150+
if (this._options.elevation) {
151+
(this._popup as any).setElevation(this._options.elevation);
152+
}
153+
}
154+
this._popup.setWidth(Utils.layout.toDevicePixels(width));
155+
this._popup.setHeight(Utils.layout.toDevicePixels(height));
156+
}
157+
}

‎packages/nativescript-popup/index.d.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1-
import { NativescriptPopupCommon } from './common';
1+
import { PopupOptions } from './common';
22

3-
export declare class NativescriptPopup extends NativescriptPopupCommon {}
3+
export * from './common';
4+
5+
export declare class Popup {
6+
constructor(options?: PopupOptions);
7+
showPopup(source: any, view: any): Promise<boolean>;
8+
hidePopup(data?: any): void;
9+
}

0 commit comments

Comments
 (0)