Skip to content

Commit 446a73d

Browse files
mbfloresmbflores
committed
Flavor Update: SolidJS
bootstrap all pages, with default, and simple content
1 parent 71b4d90 commit 446a73d

26 files changed

+491
-115
lines changed

‎examples/solidJs/src/app.tsx‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,60 @@
11

22

33
import { Route, StackRouter } from "./router";
4-
import { ScreenOne } from "./routes/screen-one";
5-
import { ScreenTwo } from "./routes/screen-two";
64
import { Home } from '~/home'
75
import { ActionBar } from '~/ui/actionbar'
6+
import { Button } from "./ui/button";
7+
import { DatePicker } from "./ui/datepicker";
8+
import { Dialogs } from "./ui/dialogs";
9+
import { HtmlView } from "./ui/htmlview";
10+
import { Image } from "./ui/image";
11+
import { ListPicker } from "./ui/listpicker";
12+
import { ListView } from "./ui/listview";
13+
import { Label } from "./ui/label";
14+
import { Progress } from "./ui/progress";
15+
import { Placeholder } from "./ui/placeholder";
16+
import { SearchBar } from "./ui/searchbar";
17+
import { SegmentedBar } from "./ui/segmentedbar";
18+
import { ScrollView } from "./ui/scrollview";
19+
import { Slider } from "./ui/slider";
20+
import { Switch } from "./ui/switch";
21+
import { TabView } from "./ui/tabview";
22+
import { TextField } from "./ui/textfield";
23+
import { TextView } from "./ui/textview";
24+
import { TimePicker } from "./ui/timepicker";
25+
import { WebView } from "./ui/webview";
26+
import { ActivityIndicator } from "./ui/activityindicator";
27+
828

929
const App = () => {
1030

1131
return (
1232
<StackRouter initialRouteName="Home">
1333
<Route name="Home" component={Home} />
34+
1435
<Route name="ActionBar" component={ActionBar} />
36+
<Route name="ActivityIndicator" component={ActivityIndicator} />
37+
<Route name="Button" component={Button} />
38+
<Route name="DatePicker" component={DatePicker} />
39+
<Route name="Dialogs" component={Dialogs} />
40+
<Route name="HtmlView" component={HtmlView} />
41+
<Route name="Image" component={Image} />
42+
<Route name="Label" component={Label} />
43+
<Route name="ListPicker" component={ListPicker} />
44+
<Route name="ListView" component={ListView} />
45+
<Route name="Placeholder" component={Placeholder} />
46+
<Route name="Progress" component={Progress} />
47+
<Route name="ScrollView" component={ScrollView} />
48+
<Route name="SearchBar" component={SearchBar} />
49+
<Route name="SegmentedBar" component={SegmentedBar} />
50+
<Route name="Slider" component={Slider} />
51+
<Route name="Switch" component={Switch} />
52+
<Route name="TabView" component={TabView} />
53+
<Route name="TextField" component={TextField} />
54+
<Route name="TextView" component={TextView} />
55+
<Route name="TimePicker" component={TimePicker} />
56+
<Route name="WebView" component={WebView} />
57+
1558
</StackRouter>
1659
);
1760
};

‎examples/solidJs/src/home.tsx‎

Lines changed: 48 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,65 @@
1+
import { For } from "solid-js";
12
import { useRoute } from "solid-navigation";
23
import { useRouter } from '~/router'
34

45
export const Home = () => {
56
const router = useRouter();
67

7-
const examples = [
8-
{name: 'ActionBar'},
9-
{name: 'ActivityIndicator'},
10-
{name: 'Button'},
11-
{name: 'DatePicker'},
12-
{name: 'Dialogs'},
13-
{name: 'HtmlView'},
14-
{name: 'Image'},
15-
{name: 'Label'},
16-
{name: 'ListPicker'},
17-
{name: 'ListView'},
18-
{name: 'Placeholder'},
19-
{name: 'Progress'},
20-
{name: 'ScrollView'},
21-
{name: 'SearchBar'},
22-
{name: 'SegmentedBar'},
23-
{name: 'Slider'},
24-
{name: 'Switch'},
25-
{name: 'TabView'},
26-
{name: 'TextField'},
27-
{name: 'TextView'},
28-
{name: 'TimePicker'},
29-
{name: 'WebView'},
8+
const pages = [
9+
{routeName: 'ActionBar', description:"ActionBar"},
10+
{routeName: 'ActivityIndicator', description:"Activity Indicator"},
11+
{routeName: 'Button', description:"Button"},
12+
{routeName: 'DatePicker', description:"Date Picker"},
13+
{routeName: 'Dialogs' , description:"Dialogs"},
14+
{routeName: 'HtmlView' , description:"HTML View"},
15+
{routeName: 'Image' , description:"Image"},
16+
{routeName: 'Label', description:"Label"},
17+
{routeName: 'ListPicker', description:"List Picker"},
18+
{routeName: 'ListView', description:"List View"},
19+
{routeName: 'Placeholder', description:"Placeholder"},
20+
{routeName: 'Progress', description:"Progress"},
21+
{routeName: 'ScrollView', description:"Scrollview"},
22+
{routeName: 'SearchBar', description:"Search Bar"},
23+
{routeName: 'SegmentedBar', description:"Segmented Bar"},
24+
{routeName: 'Slider' , description:"Slider"},
25+
{routeName: 'Switch', description:"Switch"},
26+
{routeName: 'TabView', description:"TabView"},
27+
{routeName: 'TextField', description:"Text Field"},
28+
{routeName: 'TextView', description:"Text View"},
29+
{routeName: 'TimePicker', description:"Time Picker"},
30+
{routeName: 'WebView', description:"Web View"},
3031

3132
]
3233

34+
const navigate = (routeName:string) => {
35+
console.log(routeName)
36+
router.navigate(routeName);
37+
}
38+
3339

3440
return (
3541
<>
3642
<actionbar title="Home"/>
3743
{/* @ts-ignore */}
38-
<gridlayout rows="*,auto,*">
39-
<button
40-
row="1"
41-
text={ "GO TO SCREEN B"}
42-
on:tap={() => {
43-
router.navigate("ActionBar");
44-
}}
45-
/>
46-
47-
</gridlayout>
44+
45+
{/*<button*/}
46+
{/* row="1"*/}
47+
{/* text={ "GO TO SCREEN B"}*/}
48+
{/* on:tap={() => {*/}
49+
{/* router.navigate("ActionBar");*/}
50+
{/* }}*/}
51+
{/*/>*/}
52+
53+
<scrollview orientation="vertical">
54+
<stacklayout>
55+
<For each={pages}>{
56+
57+
(item, index) => (
58+
<button on:tap={() => navigate(item.routeName)}>{item.description}</button>
59+
)
60+
}</For>
61+
</stacklayout>
62+
</scrollview>
4863
</>
4964
);
5065
};

‎examples/solidJs/src/router.ts‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,27 @@ declare module "solid-navigation" {
55
Default: {
66
Home: RouteDefinition;
77
ActionBar: RouteDefinition;
8-
ScreenThree: RouteDefinition
8+
ActivityIndicator: RouteDefinition;
9+
Button: RouteDefinition;
10+
DatePicker: RouteDefinition;
11+
Dialogs: RouteDefinition;
12+
HtmlView: RouteDefinition;
13+
Image: RouteDefinition;
14+
Label: RouteDefinition;
15+
ListPicker: RouteDefinition;
16+
ListView: RouteDefinition;
17+
Placeholder: RouteDefinition;
18+
Progress: RouteDefinition;
19+
ScrollView: RouteDefinition;
20+
SegmentedBar: RouteDefinition;
21+
SearchBar: RouteDefinition;
22+
Slider: RouteDefinition;
23+
Switch: RouteDefinition;
24+
TabView: RouteDefinition;
25+
TextField: RouteDefinition;
26+
TextView: RouteDefinition;
27+
TimePicker: RouteDefinition;
28+
WebView: RouteDefinition;
929
};
1030
}
1131
}

‎examples/solidJs/src/routes/screen-one.tsx‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎examples/solidJs/src/routes/screen-two.tsx‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Frame } from '@nativescript/core'
2+
3+
export const ActivityIndicator = () => {
4+
5+
function goBack() {
6+
Frame.goBack();
7+
8+
} return (
9+
<>
10+
<actionbar title="ActionBar">
11+
<actionitem on:tap={goBack} text='<<Back'>
12+
</actionitem>
13+
</actionbar>
14+
v
15+
{/* @ts-ignore */}
16+
<gridlayout>
17+
<contentview verticalAlignment="center" horizontalAlignment="center" android:visibility="collapse">
18+
<activityindicator busy="true" />
19+
</contentview>
20+
21+
<gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
22+
<contentview
23+
width="40" height="40"
24+
borderRadius="50"
25+
borderWidth="4" borderColor="#65adf1"
26+
/>
27+
<contentview
28+
width="40" height="40"
29+
translateX="-20"
30+
translateY="-20"
31+
backgroundColor="white" />
32+
</gridlayout>
33+
</gridlayout>
34+
35+
</>
36+
);
37+
};

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Frame } from '@nativescript/core'
2+
3+
export const Button = () => {
4+
5+
function goBack() {
6+
Frame.goBack();
7+
8+
} return (
9+
<>
10+
<actionbar title="ActionBar">
11+
<actionitem on:tap={goBack} text='<<Back'>
12+
</actionitem>
13+
</actionbar>
14+
{/* @ts-ignore */}
15+
</>
16+
);
17+
};

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Frame } from '@nativescript/core'
2+
3+
export const DatePicker = () => {
4+
5+
function goBack() {
6+
Frame.goBack();
7+
8+
} return (
9+
<>
10+
<actionbar title="ActionBar">
11+
<actionitem on:tap={goBack} text='<<Back'>
12+
</actionitem>
13+
</actionbar>
14+
{/* @ts-ignore */}
15+
</>
16+
);
17+
};

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Frame } from '@nativescript/core'
2+
3+
export const Dialogs = () => {
4+
5+
function goBack() {
6+
Frame.goBack();
7+
8+
} return (
9+
<>
10+
<actionbar title="ActionBar">
11+
<actionitem on:tap={goBack} text='<<Back'>
12+
</actionitem>
13+
</actionbar>
14+
{/* @ts-ignore */}
15+
</>
16+
);
17+
};

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Frame } from '@nativescript/core'
2+
3+
export const HtmlView = () => {
4+
5+
function goBack() {
6+
Frame.goBack();
7+
8+
} return (
9+
<>
10+
<actionbar title="ActionBar">
11+
<actionitem on:tap={goBack} text='<<Back'>
12+
</actionitem>
13+
</actionbar>
14+
{/* @ts-ignore */}
15+
</>
16+
);
17+
};

0 commit comments

Comments
 (0)