Flavor Update: SolidJS

mbflores · mbflores · commit 5a176622ab0b · 2024-08-29T23:32:46.000+08:00
Datepicker
Dialogs
HTMLVIew
image
Label
ListPicker
listview
Placeholder
progress
scrollview
searchbar
segmentedbar
slider
switch
tabview
textfield
textview
timepicker
webview
diff --git a/examples/solidJs/src/ui/datepicker.tsx b/examples/solidJs/src/ui/datepicker.tsx
@@ -8,7 +8,7 @@ export const DatePicker = () => {
 
   }  return (
     <>
-      <actionbar title="Button">
+      <actionbar title="DatePicker">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
diff --git a/examples/solidJs/src/ui/dialogs.tsx b/examples/solidJs/src/ui/dialogs.tsx
@@ -76,7 +76,7 @@ export const Dialogs = () => {
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="Dialogs">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
diff --git a/examples/solidJs/src/ui/htmlview.tsx b/examples/solidJs/src/ui/htmlview.tsx
@@ -11,7 +11,7 @@ export const HtmlView = () => {
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="HtmlView">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
diff --git a/examples/solidJs/src/ui/image.tsx b/examples/solidJs/src/ui/image.tsx
@@ -6,7 +6,7 @@ export const Image = () => {
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="Image">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
diff --git a/examples/solidJs/src/ui/label.tsx b/examples/solidJs/src/ui/label.tsx
@@ -7,7 +7,7 @@ export const Label = () => {
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="Label">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
diff --git a/examples/solidJs/src/ui/listpicker.tsx b/examples/solidJs/src/ui/listpicker.tsx
@@ -12,7 +12,7 @@ export const ListPicker = () => {
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="ListPicker">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
diff --git a/examples/solidJs/src/ui/listview.tsx b/examples/solidJs/src/ui/listview.tsx
@@ -13,7 +13,7 @@ export const ListView = () => {
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="ListView">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
diff --git a/examples/solidJs/src/ui/placeholder.tsx b/examples/solidJs/src/ui/placeholder.tsx
@@ -1,20 +1,39 @@
 import { Frame } from '@nativescript/core'
+import { Utils } from '@nativescript/core'
 
 export const Placeholder = () => {
+  const creatingView = (args:any) => {
+    let nativeView
+    if (global.isIOS) {
+      // Example with UITextView on iOS
+      nativeView = UITextView.new()
+      nativeView.text = 'Native View (iOS)'
+    } else if (global.isAndroid) {
+      // Example with TextView on Android
+      nativeView = new android.widget.TextView(
+        Utils.android.getApplicationContext()
+      )
+      nativeView.setText('Native View (Android)')
+    }
 
+    // assign it to args.view so NativeScript can place it into the UI
+    args.view = nativeView
+  }
   function goBack() {
     Frame.goBack();
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="Placeholder">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
       <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
 
         {/*region example*/}
+        <placeholder on:creatingView={creatingView}></placeholder>
+
         {/*endregion example*/}
 
       </gridlayout>
diff --git a/examples/solidJs/src/ui/progress.tsx b/examples/solidJs/src/ui/progress.tsx
@@ -1,20 +1,35 @@
 import { Frame } from '@nativescript/core'
+import { createSignal } from 'solid-js'
 
 export const Progress = () => {
 
+  // #region example
+  const [count, setCount] = createSignal(0);
+  setInterval( () =>{
+    setCount(count() + 1);
+    if(count() === 101)
+      setCount(0) ;
+  }, 100);
+  // #endregion example
+
   function goBack() {
     Frame.goBack();
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="Progress">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
       <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
 
         {/*region example*/}
+        <stacklayout>
+          <progress value={count()}></progress>
+          <label textAlignment="center">{count()}</label>
+
+        </stacklayout>
         {/*endregion example*/}
 
       </gridlayout>
diff --git a/examples/solidJs/src/ui/scrollview.tsx b/examples/solidJs/src/ui/scrollview.tsx
@@ -7,15 +7,46 @@ export const ScrollView = () => {
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="ScrollViiew">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
       <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
 
-        {/*region example*/}
-        {/*endregion example*/}
+        <gridlayout rows="*, 50, 300, *">
+          <scrollview orientation="horizontal" row="1">
+            <stacklayout orientation="horizontal" padding="12">
+              <label text="h1" width="50"></label>
+              <label text="h2" width="50"></label>
+              <label text="h3" width="50"></label>
+              <label text="h4" width="50"></label>
+              <label text="h5" width="50"></label>
+              <label text="h6" width="50"></label>
+              <label text="h7" width="50"></label>
+              <label text="h8" width="50"></label>
+              <label text="h9" width="50"></label>
+            </stacklayout>
+          </scrollview>
+
+          <contentview row="2">
+            {/*#region example */}
+            <scrollview>
+              <stacklayout padding="12">
+                <label text="v1" height="50"></label>
+                <label text="v2" height="50"></label>
+                <label text="v3" height="50"></label>
+                <label text="v4" height="50"></label>
+                <label text="v5" height="50"></label>
+                <label text="v6" height="50"></label>
+                <label text="v7" height="50"></label>
+                <label text="v8" height="50"></label>
+                <label text="v9" height="50"></label>
+              </stacklayout>
+            </scrollview>
+            {/*#endregion example */}
+          </contentview>
+        </gridlayout>
 
       </gridlayout>
     </>
diff --git a/examples/solidJs/src/ui/searchbar.tsx b/examples/solidJs/src/ui/searchbar.tsx
@@ -7,14 +7,15 @@ export const SearchBar = () => {
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="SearchBar">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
       <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
 
         {/*region example*/}
+        <searchbar hint="SEARCH HERE"></searchbar>
         {/*endregion example*/}
 
       </gridlayout>
diff --git a/examples/solidJs/src/ui/segmentedbar.tsx b/examples/solidJs/src/ui/segmentedbar.tsx
@@ -7,14 +7,19 @@ export const SegmentedBar = () => {
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="SegmentedBar">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
       <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
 
         {/*region example*/}
+        <segmentedbar>
+          <segmentedbaritem title="First" />
+          <segmentedbaritem title="Second" />
+          <segmentedbaritem title="Third" />
+        </segmentedbar>
         {/*endregion example*/}
 
       </gridlayout>
diff --git a/examples/solidJs/src/ui/slider.tsx b/examples/solidJs/src/ui/slider.tsx
@@ -1,22 +1,37 @@
 import { Frame } from '@nativescript/core'
+import { createSignal } from 'solid-js'
 
 export const Slider = () => {
 
+  const [sliderValue, setSliderValue] =  createSignal(0);
   function goBack() {
     Frame.goBack();
 
-  }  return (
+  }
+
+  const handleChange = (event: Event)  => {
+    setSliderValue(event.value);
+    console.log(event.value)
+    // You can perform any other actions here based on the updated value
+  };
+
+  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="Slider">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
       <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
 
-        {/*region example*/}
-        {/*endregion example*/}
+        <stacklayout>
+
+          {/*region example*/}
+          <slider width={300} value={sliderValue()} on:valueChange={handleChange} />
+          {/*endregion example*/}
+          <label>{sliderValue()}</label>
 
+        </stacklayout>
       </gridlayout>
     </>
   );
diff --git a/examples/solidJs/src/ui/switch.tsx b/examples/solidJs/src/ui/switch.tsx
@@ -1,20 +1,30 @@
 import { Frame } from '@nativescript/core'
+import { createSignal } from 'solid-js'
 
 export const Switch = () => {
 
+  const [switchValue, setSwitchValue] = createSignal(true)
+
+  const handleChange = (event: Event) => {
+    setSwitchValue(event.value);
+    console.log(event.value);
+  }
   function goBack() {
     Frame.goBack();
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="Switch">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
       <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
 
         {/*region example*/}
+        <stacklayout>
+          <switch horizontalAlignment="center" on:checkedChange={handleChange} checked={switchValue()}></switch>
+        </stacklayout>
         {/*endregion example*/}
 
       </gridlayout>
diff --git a/examples/solidJs/src/ui/tabview.tsx b/examples/solidJs/src/ui/tabview.tsx
@@ -7,14 +7,25 @@ export const TabView = () => {
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="TabView">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
       <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
 
         {/*region example*/}
+        <tabview>
+          <tabviewitem title="First">
+            <label text="First Tab Content" textAlignment="center" verticalAlignment="center"></label>
+          </tabviewitem>
+          <tabviewitem title="Second">
+            <label text="Second Tab Content" textAlignment="center" verticalAlignment="center"></label>
+          </tabviewitem>
+          <tabviewitem title="Third">
+            <label text="Third Tab Content" textAlignment="center" verticalAlignment="center"></label>
+          </tabviewitem>
+        </tabview>
         {/*endregion example*/}
 
       </gridlayout>
diff --git a/examples/solidJs/src/ui/textfield.tsx b/examples/solidJs/src/ui/textfield.tsx
@@ -7,14 +7,15 @@ export const TextField = () => {
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="TextField">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
       <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
 
         {/*region example*/}
+        <textfield hint="Placeholder..." />
         {/*endregion example*/}
 
       </gridlayout>
diff --git a/examples/solidJs/src/ui/textview.tsx b/examples/solidJs/src/ui/textview.tsx
@@ -2,19 +2,23 @@ import { Frame } from '@nativescript/core'
 
 export const TextView = () => {
 
+  // #region example
+  const text = `TextView\nWith\nMultiple\nLines!`;
+  // #endregion example
   function goBack() {
     Frame.goBack();
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="TextView">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
       <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
 
         {/*region example*/}
+        <textview text={text} />
         {/*endregion example*/}
 
       </gridlayout>
diff --git a/examples/solidJs/src/ui/timepicker.tsx b/examples/solidJs/src/ui/timepicker.tsx
@@ -7,14 +7,15 @@ export const TimePicker = () => {
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="TimePicker">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
       <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
 
         {/*region example*/}
+        <timepicker hour="9" minute="41" />
         {/*endregion example*/}
 
       </gridlayout>
diff --git a/examples/solidJs/src/ui/webview.tsx b/examples/solidJs/src/ui/webview.tsx
