Skip to content

Commit 2b42f00

Browse files
mbfloresmbflores
committed
Flavor Update: SolidJS
actionbar activityindicator button datepicker dialogs htmlview label listpicker listview
1 parent 446a73d commit 2b42f00

22 files changed

+232
-9
lines changed

‎examples/solidJs/src/ui/actionbar.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ export const ActionBar = () => {
88
} return (
99
<>
1010
<actionbar title="ActionBar">
11+
{/*region example*/}
1112
<actionitem on:tap={goBack} text='<<Back'>
1213
</actionitem>
14+
{/*endregion example*/}
1315
</actionbar>
1416
{/* @ts-ignore */}
1517
</>

‎examples/solidJs/src/ui/activityindicator.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ export const ActivityIndicator = () => {
1515
{/* @ts-ignore */}
1616
<gridlayout>
1717
<contentview verticalAlignment="center" horizontalAlignment="center" android:visibility="collapse">
18+
{/*region example*/}
1819
<activityindicator busy="true" />
20+
{/*endregion example*/}
21+
1922
</contentview>
2023

2124
<gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">

‎examples/solidJs/src/ui/button.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,19 @@ export const Button = () => {
77

88
} return (
99
<>
10-
<actionbar title="ActionBar">
10+
<actionbar title="Button">
1111
<actionitem on:tap={goBack} text='<<Back'>
1212
</actionitem>
1313
</actionbar>
14-
{/* @ts-ignore */}
14+
<gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
15+
16+
{/*region example*/}
17+
<button on:tap={() => alert("button clicked")}>
18+
Click Me
19+
</button>
20+
{/*endregion example*/}
21+
22+
</gridlayout>
1523
</>
1624
);
1725
};

‎examples/solidJs/src/ui/datepicker.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,23 @@ import { Frame } from '@nativescript/core'
22

33
export const DatePicker = () => {
44

5+
const date = new Date(1997, 2,16);
56
function goBack() {
67
Frame.goBack();
78

89
} return (
910
<>
10-
<actionbar title="ActionBar">
11+
<actionbar title="Button">
1112
<actionitem on:tap={goBack} text='<<Back'>
1213
</actionitem>
1314
</actionbar>
14-
{/* @ts-ignore */}
15+
<gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
16+
17+
{/*region example*/}
18+
<datepicker date={date} ></datepicker>
19+
{/*endregion example*/}
20+
21+
</gridlayout>
1522
</>
1623
);
1724
};

‎examples/solidJs/src/ui/dialogs.tsx‎

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,76 @@
1-
import { Frame } from '@nativescript/core'
1+
import { action, login, confirm, prompt, Frame } from '@nativescript/core'
22

33
export const Dialogs = () => {
44

5+
6+
function showAlert() {
7+
// #region example-alert
8+
alert({
9+
title: 'Alert!',
10+
message: 'Please try again later.',
11+
okButtonText: 'OK',
12+
cancelable: true,
13+
})
14+
// #endregion example-alert
15+
}
16+
17+
function showAction() {
18+
// #region example-action
19+
action({
20+
title: 'Action!',
21+
message: 'Choose your language:',
22+
cancelButtonText: 'Cancel',
23+
actions: ['TypeScript', 'JavaScript', 'Neither'],
24+
cancelable: true,
25+
destructiveActionsIndexes: [2],
26+
})
27+
// #endregion example-action
28+
}
29+
30+
function showConfirm() {
31+
// #region example-confirm
32+
confirm({
33+
title: 'Confirm!',
34+
message: 'Are you sure you want to do this?',
35+
okButtonText: 'Yes',
36+
cancelButtonText: 'No',
37+
neutralButtonText: 'Cancel',
38+
})
39+
// #endregion example-confirm
40+
}
41+
42+
function showPrompt() {
43+
// #region example-prompt
44+
prompt({
45+
title: 'Prompt!',
46+
message: 'Enter the name of this framework:',
47+
defaultText: 'NativeScript',
48+
okButtonText: 'OK',
49+
neutralButtonText: 'Cancel',
50+
// cancelable: true,
51+
// cancelButtonText: 'Cancel',
52+
// capitalizationType: 'none',
53+
// inputType: 'email',
54+
});
55+
// #endregion example-prompt
56+
}
57+
58+
function showLogin() {
59+
// #region example-login
60+
login({
61+
title: 'Login!',
62+
message: 'Enter your credentials',
63+
okButtonText: 'Login',
64+
cancelButtonText: 'Cancel',
65+
userName: 'NativeScript',
66+
password: 'hunter2',
67+
// neutralButtonText: 'Neutral',
68+
// cancelable: true,
69+
// passwordHint: 'Your password',
70+
// userNameHint: 'Your username',
71+
});
72+
}
73+
// #endregion example-login
574
function goBack() {
675
Frame.goBack();
776

@@ -12,6 +81,18 @@ export const Dialogs = () => {
1281
</actionitem>
1382
</actionbar>
1483
{/* @ts-ignore */}
84+
<gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
85+
<stacklayout>
86+
87+
<button on:tap={showAlert} padding="8">Alert</button>
88+
<button on:tap={showAction} padding="8">Action</button>
89+
<button on:tap={showConfirm} padding="8">Confirm</button>
90+
<button on:tap={showPrompt} padding="8">Prompt</button>
91+
<button on:tap={showLogin} padding="8">Login</button>
92+
93+
</stacklayout>
94+
95+
</gridlayout>
1596
</>
1697
);
1798
};

‎examples/solidJs/src/ui/htmlview.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { Frame } from '@nativescript/core'
22

33
export const HtmlView = () => {
4-
4+
const htmlString = `
5+
<h1 style="color: black; font-family: ui-sans-serif, system-ui;">
6+
<span style="color: #65adf1;">Html</span>View
7+
</h1>
8+
`;
59
function goBack() {
610
Frame.goBack();
711

@@ -12,6 +16,13 @@ export const HtmlView = () => {
1216
</actionitem>
1317
</actionbar>
1418
{/* @ts-ignore */}
19+
<gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
20+
21+
{/*region example*/}
22+
<htmlview html={htmlString}></htmlview>
23+
{/*endregion example*/}
24+
25+
</gridlayout>
1526
</>
1627
);
1728
};

‎examples/solidJs/src/ui/image.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Frame } from '@nativescript/core'
22

33
export const Image = () => {
4-
54
function goBack() {
65
Frame.goBack();
76

@@ -12,6 +11,13 @@ export const Image = () => {
1211
</actionitem>
1312
</actionbar>
1413
{/* @ts-ignore */}
14+
<gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
15+
16+
{/*region example todo not working*/}
17+
<image src='~/assets/solid.png' height={60}/>
18+
{/*endregion example*/}
19+
20+
</gridlayout>
1521
</>
1622
);
1723
};

‎examples/solidJs/src/ui/label.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ export const Label = () => {
1212
</actionitem>
1313
</actionbar>
1414
{/* @ts-ignore */}
15+
<gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
16+
17+
{/*region example*/}
18+
<label text='TextHere'/>
19+
{/*endregion example*/}
20+
21+
</gridlayout>
1522
</>
1623
);
1724
};

‎examples/solidJs/src/ui/listpicker.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ import { Frame } from '@nativescript/core'
22

33
export const ListPicker = () => {
44

5+
const choices = [
6+
"First",
7+
"Second",
8+
"Third"
9+
];
510
function goBack() {
611
Frame.goBack();
712

@@ -12,6 +17,13 @@ export const ListPicker = () => {
1217
</actionitem>
1318
</actionbar>
1419
{/* @ts-ignore */}
20+
<gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
21+
22+
{/*region example*/}
23+
<listpicker items={choices}></listpicker>
24+
{/*endregion example*/}
25+
26+
</gridlayout>
1527
</>
1628
);
1729
};

‎examples/solidJs/src/ui/listview.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import { Frame } from '@nativescript/core'
2-
32
export const ListView = () => {
4-
3+
// #region example
4+
const items = [];
5+
for(let index = 0; index < 100; index++) {
6+
items.push({
7+
text: `Item ${index+1}`
8+
})
9+
}
10+
// #endregion example
511
function goBack() {
612
Frame.goBack();
713

@@ -12,6 +18,14 @@ export const ListView = () => {
1218
</actionitem>
1319
</actionbar>
1420
{/* @ts-ignore */}
21+
<gridlayout >
22+
23+
{/*region example todo not working, no direct translation of listview?*/}
24+
<list-view items={items}>
25+
</list-view>
26+
{/*endregion example*/}
27+
28+
</gridlayout>
1529
</>
1630
);
1731
};

0 commit comments

Comments
 (0)