Flavor Update: SolidJS

actionbar
activityindicator
button
datepicker
dialogs
htmlview
label
listpicker
listview

Author: mbflores

examples/solidJs/src/ui/actionbar.tsx

@@ -8,8 +8,10 @@ export const ActionBar = () => {
   }  return (
     <>
       <actionbar title="ActionBar">
+        {/*region example*/}
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
+        {/*endregion example*/}
       </actionbar>
       {/* @ts-ignore */}
     </>

examples/solidJs/src/ui/activityindicator.tsx

@@ -15,7 +15,10 @@ export const ActivityIndicator = () => {
       {/* @ts-ignore */}
         <gridlayout>
             <contentview verticalAlignment="center" horizontalAlignment="center" android:visibility="collapse">
+              {/*region example*/}
                 <activityindicator busy="true" />
+              {/*endregion example*/}
+
             </contentview>
 
             <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">

examples/solidJs/src/ui/button.tsx

@@ -7,11 +7,19 @@ export const Button = () => {
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="Button">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
-      {/* @ts-ignore */}
+      <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
+
+        {/*region example*/}
+        <button on:tap={() => alert("button clicked")}>
+          Click Me
+        </button>
+        {/*endregion example*/}
+
+      </gridlayout>
     </>
   );
 };

examples/solidJs/src/ui/datepicker.tsx

@@ -2,16 +2,23 @@ import { Frame } from '@nativescript/core'
 
 export const DatePicker = () => {
 
+  const date = new Date(1997, 2,16);
   function goBack() {
     Frame.goBack();
 
   }  return (
     <>
-      <actionbar title="ActionBar">
+      <actionbar title="Button">
         <actionitem on:tap={goBack} text='<<Back'>
         </actionitem>
       </actionbar>
-      {/* @ts-ignore */}
+      <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
+
+        {/*region example*/}
+        <datepicker date={date}  ></datepicker>
+        {/*endregion example*/}
+
+      </gridlayout>
     </>
   );
 };

examples/solidJs/src/ui/dialogs.tsx

@@ -1,7 +1,76 @@
-import { Frame } from '@nativescript/core'
+import { action, login, confirm, prompt, Frame } from '@nativescript/core'
 
 export const Dialogs = () => {
 
+
+  function showAlert() {
+    // #region example-alert
+    alert({
+      title: 'Alert!',
+      message: 'Please try again later.',
+      okButtonText: 'OK',
+      cancelable: true,
+    })
+    // #endregion example-alert
+  }
+
+  function showAction() {
+    // #region example-action
+    action({
+      title: 'Action!',
+      message: 'Choose your language:',
+      cancelButtonText: 'Cancel',
+      actions: ['TypeScript', 'JavaScript', 'Neither'],
+      cancelable: true,
+      destructiveActionsIndexes: [2],
+    })
+    // #endregion example-action
+  }
+
+  function showConfirm() {
+    // #region example-confirm
+    confirm({
+      title: 'Confirm!',
+      message: 'Are you sure you want to do this?',
+      okButtonText: 'Yes',
+      cancelButtonText: 'No',
+      neutralButtonText: 'Cancel',
+    })
+    // #endregion example-confirm
+  }
+
+  function showPrompt() {
+    // #region example-prompt
+    prompt({
+      title: 'Prompt!',
+      message: 'Enter the name of this framework:',
+      defaultText: 'NativeScript',
+      okButtonText: 'OK',
+      neutralButtonText: 'Cancel',
+      // cancelable: true,
+      // cancelButtonText: 'Cancel',
+      // capitalizationType: 'none',
+      // inputType: 'email',
+    });
+    // #endregion example-prompt
+  }
+
+  function showLogin() {
+    // #region example-login
+    login({
+      title: 'Login!',
+      message: 'Enter your credentials',
+      okButtonText: 'Login',
+      cancelButtonText: 'Cancel',
+      userName: 'NativeScript',
+      password: 'hunter2',
+      // neutralButtonText: 'Neutral',
+      // cancelable: true,
+      // passwordHint: 'Your password',
+      // userNameHint: 'Your username',
+    });
+  }
+  // #endregion example-login
   function goBack() {
     Frame.goBack();
 
@@ -12,6 +81,18 @@ export const Dialogs = () => {
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
+      <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
+        <stacklayout>
+
+          <button on:tap={showAlert} padding="8">Alert</button>
+          <button on:tap={showAction} padding="8">Action</button>
+          <button on:tap={showConfirm} padding="8">Confirm</button>
+          <button on:tap={showPrompt} padding="8">Prompt</button>
+          <button on:tap={showLogin} padding="8">Login</button>
+
+        </stacklayout>
+
+      </gridlayout>
     </>
   );
 };

examples/solidJs/src/ui/htmlview.tsx

@@ -1,7 +1,11 @@
 import { Frame } from '@nativescript/core'
 
 export const HtmlView = () => {
-
+  const htmlString = `
+    <h1 style="color: black; font-family: ui-sans-serif, system-ui;">
+      <span style="color: #65adf1;">Html</span>View
+    </h1>
+  `;
   function goBack() {
     Frame.goBack();
 
@@ -12,6 +16,13 @@ export const HtmlView = () => {
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
+      <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
+
+        {/*region example*/}
+        <htmlview html={htmlString}></htmlview>
+        {/*endregion example*/}
+
+      </gridlayout>
     </>
   );
 };

examples/solidJs/src/ui/image.tsx

@@ -1,7 +1,6 @@
 import { Frame } from '@nativescript/core'
 
 export const Image = () => {
-
   function goBack() {
     Frame.goBack();
 
@@ -12,6 +11,13 @@ export const Image = () => {
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
+      <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
+
+        {/*region example todo not working*/}
+        <image src='~/assets/solid.png' height={60}/>
+        {/*endregion example*/}
+
+      </gridlayout>
     </>
   );
 };

examples/solidJs/src/ui/label.tsx

@@ -12,6 +12,13 @@ export const Label = () => {
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
+      <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
+
+        {/*region example*/}
+        <label text='TextHere'/>
+        {/*endregion example*/}
+
+      </gridlayout>
     </>
   );
 };

examples/solidJs/src/ui/listpicker.tsx

@@ -2,6 +2,11 @@ import { Frame } from '@nativescript/core'
 
 export const ListPicker = () => {
 
+  const choices = [
+    "First",
+    "Second",
+    "Third"
+  ];
   function goBack() {
     Frame.goBack();
 
@@ -12,6 +17,13 @@ export const ListPicker = () => {
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
+      <gridlayout ios:visibility="collapse" verticalAlignment="center" horizontalAlignment="center">
+
+        {/*region example*/}
+        <listpicker items={choices}></listpicker>
+        {/*endregion example*/}
+
+      </gridlayout>
     </>
   );
 };

examples/solidJs/src/ui/listview.tsx

@@ -1,7 +1,13 @@
 import { Frame } from '@nativescript/core'
-
 export const ListView = () => {
-
+  // #region example
+  const items = [];
+  for(let index = 0; index < 100; index++) {
+    items.push({
+      text: `Item ${index+1}`
+    })
+  }
+  // #endregion example
   function goBack() {
     Frame.goBack();
 
@@ -12,6 +18,14 @@ export const ListView = () => {
         </actionitem>
       </actionbar>
       {/* @ts-ignore */}
+      <gridlayout >
+
+        {/*region example todo not working, no direct translation of listview?*/}
+        <list-view items={items}>
+        </list-view>
+        {/*endregion example*/}
+
+      </gridlayout>
     </>
   );
 };