añadida documentación y cambios menores

everskyblue · Jul 29, 2024 · 60cc644 · 60cc644
1 parent e67a666
commit 60cc644
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 95 deletions.
diff --git a/README.md b/README.md
@@ -1,33 +1,40 @@
+
 <p align="center" style="text-align:center">
 <img src="https://raw.githubusercontent.com/everskyblue/voir-native/main/logo-voir.png" alt="voir native" title="voir native">
 </p>
 <h1 align="center">Voir Native</h1>
 <p align="center">It is a framework to develop android and ios applications in a more organized way with tabrisjs</p>
 
 <br>
-
+<video controls>
+    <source src="preview.webm" type="video/webm">
+</video>
+<br>
 
 ## Documentation
 
-- [getting started](#getting-started)
-  - [installation](#installation)
-- [helpers view](#helpers-view)
-  - [addView](#addview)
-  - [menuDrawer](#menudrawer)
-- [popup](#popup)
-  - [Toast](#toast)
-  - [Modal](#modal)
-- [helpers storage](#helpers-storage)
-  - [setPreference](#setpreference)
-  - [getValuePreference](#getvaluepreference)
-  - [existsKeyPreference](#existskeypreference)
-- [components](#components)
-  - [PreferenceScreen](#preferencescreen)
-    - [SwitchPreference](#preference)
-    - [CheckBoxPreference](#preference)
-    - [ListPreference](#listpreference)
-    - [TextPreference](#textpreference)
-  - [CoordinatePage](#coordinatepage)
+-   [getting started](#getting-started)
+    -   [installation](#installation)
+-   [Voir](#voir)
+-   [helpers view](#helpers-view)
+    -   [addView](#addview)
+    -   [setMenuDrawer](#setmenudrawer)
+-   [popup](#popup)
+    -   [Toast](#toast)
+    -   [Modal](#modal)
+-   [helpers storage](#helpers-storage)
+    -   [setPreference](#setpreference)
+    -   [getValuePreference](#getvaluepreference)
+    -   [existsKeyPreference](#existskeypreference)
+-   [components](#components)
+    -   [PreferenceScreen](#preferencescreen)
+        -   [SwitchPreference](#preference)
+        -   [CheckBoxPreference](#preference)
+        -   [ListPreference](#listpreference)
+        -   [TextPreference](#textpreference)
+    -   [CoordinatePage](#coordinatepage)
+    -   [DrawerMenu](#drawermenu)
+        -   [DrawerMenuItem](#drawermenuitem)
 
 ## Getting Started
 
@@ -40,6 +47,12 @@ execute command
 ```bash
 npm i voir-native
 ```
+## Voir
+It is an object with 2 properties that helps render more friendly without invoking the [addView](#addview) function
+<br>
+**Voir.Render** It is an abstract class that has to be inherited. It has as abstract methods the _render_ that returns a page and the _renderAction_ that returns an array action collection.
+<br>
+**Voir.factory** It helps that the class is invoked as a function.
 
 ## Helpers View
 
@@ -62,45 +75,48 @@ contentView.append(<CoordinatePage layoutData="stretch" />);
 addView(<Action title="setting" />, <Page title="setting" stretch />);
 ```
 
-### menuDrawer
+### setMenuDrawer
 
 | parameter types
 |:--
 | Array\<**_IMenuItemOption_**\>
 
 ```typescript
 interface IMenuItemOption {
-  id: string;
-  text: string;
-  image?: string;
+    id: string;
+    text: string;
+    image?: string;
 }
 ```
 
 #### example
 
 ```typescript
-import { menuDrawer } from "voir-native";
+import { setMenuDrawer } from "voir-native";
 import { drawer } from "tabris";
 
 drawer.enabled = true;
 
-menuDrawer([
-  {
-    text: "home",
-    id: "home",
-    image: "/images/home.png",
-  },
-  {
-    text: "favorite",
-    id: "favorite",
-    image: "/images/favorite.png",
-  },
-  {
-    text: "configure",
-    id: "config",
-    image: "/images/settings.png",
-  },
-]);
+setMenuDrawer(
+    [
+        {
+            text: "home",
+            id: "home",
+            image: "/images/home.png"
+        },
+        {
+            text: "favorite",
+            id: "favorite",
+            image: "/images/favorite.png"
+        },
+        {
+            text: "configure",
+            id: "config",
+            image: "/images/settings.png"
+        }
+    ],
+    menu => console.log(menu)
+);
 ```
 
 ## popup
@@ -116,7 +132,9 @@ show popup message with duration time
 | contructor       | string, number  |
 | static makeToast | string, number  |
 | show             |                 |
+
 #### example
+
 ```typescript
 import { Toast } from "voir-native";
 
@@ -127,17 +145,18 @@ Toast.makeText("hello");
 
 displays a popup that represents a view
 
+| method          | parameter types | return           |
+| --------------- | --------------- | ---------------- |
+| addView         | ...Widget[]     |
+| setButtonCancel | string          | tabris.Listeners |
+| setButtonAccept | string          | tabris.Listeners |
+| remove          |
+| removeView      |
+| removeButtons   |
+| show            |
 
-| method           | parameter types | return
-| ---------------- | --------------- |-----------------
-| addView          | ...Widget[]     | 
-| setButtonCancel  | string          | tabris.Listeners
-| setButtonAccept  | string          | tabris.Listeners
-| remove           |
-| removeView       |
-| removeButtons    |
-| show             |
 #### example
+
 ```typescript
 import { Modal } from "voir-native";
 import {TextView} from "tabris";
@@ -163,7 +182,7 @@ modal.show();
 
 ### setPreference
 
-añade nuevo datos de preferencia
+Add new preference data
 
 | parameter types
 |:--
@@ -172,7 +191,7 @@ añade nuevo datos de preferencia
 
 ### getValuePreference
 
-recupera el valor de preferencia
+Recover the value of preference
 
 | parameter types | return |
 | :-------------- | ------ |
@@ -186,17 +205,17 @@ comprueba si existe la preferencia
 | :-------------- | ------- |
 | string          | boolean |
 
-
 ## Components
+
 ### Preference
 
 to add preferences where data can be saved in which the user preference persists
 
 properties received by default to:
 
-- **ListPreference**
-- **SwitchPreference**
-- **CheckBoxPreference**
+-   **ListPreference**
+-   **SwitchPreference**
+-   **CheckBoxPreference**
 
 | property | type                        |
 | -------- | --------------------------- |
@@ -222,12 +241,12 @@ received aditional property
 
 ```typescript
 interface IPropertyListPreference extends IPropertyChildPreference {
-  entries: IEntry[];
+    entries: IEntry[];
 }
 
 interface IEntry {
-  text: string;
-  id: string;
+    text: string;
+    id: string;
 }
 ```
 
@@ -243,41 +262,41 @@ interface IEntry {
 
 ```javascript
 import {
-  PreferenceScreen,
-  TextPreference,
-  SwitchPreference,
-  CheckBoxPreference,
-  ListPreference,
+    PreferenceScreen,
+    TextPreference,
+    SwitchPreference,
+    CheckBoxPreference,
+    ListPreference
 } from "voir-native";
 import { contentView } from "tabris";
 
 contentView.append(
-  PreferenceScreen({
-    layoutData: "stretch",
-  }).append(
-    TextPreference({
-      title: "text info",
-      summary: "summary",
-    }),
-    SwitchPreference({
-      title: "title",
-      summary: "summary",
-      key: "keySwitch",
-      value: true,
-    }),
-    CheckBoxPreference({
-      title: "title",
-      summary: "summary",
-      key: "cbPreference",
-      value: false,
-    }),
-    ListPreference({
-      title: "my list preference",
-      key: "list",
-      value: 0, // default value select
-      entries: [{ id: "myId", text: "item 1" }],
-    })
-  )
+    PreferenceScreen({
+        layoutData: "stretch"
+    }).append(
+        TextPreference({
+            title: "text info",
+            summary: "summary"
+        }),
+        SwitchPreference({
+            title: "title",
+            summary: "summary",
+            key: "keySwitch",
+            value: true
+        }),
+        CheckBoxPreference({
+            title: "title",
+            summary: "summary",
+            key: "cbPreference",
+            value: false
+        }),
+        ListPreference({
+            title: "my list preference",
+            key: "list",
+            value: 0, // default value select
+            entries: [{ id: "myId", text: "item 1" }]
+        })
+    )
 );
 ```
 
@@ -288,12 +307,33 @@ handles the elements of a current page
 ```javascript
 import { CoordinatePage } from "voir-native";
 
-import { contentView } from "tabris";
+import { contentView, TextView } from "tabris";
+
+const menuLeft = ()=> {
+    return (
+        <DrawerMenu>
+            <DrawerMenuItem text="hola" id="oi" />
+            <DrawerMenuItem text="77" id="re"/>
+        </DrawerMenu>
+    )
+}
+
+const menuItemSelected = (item) => {
+    console.log('pressed id '+ item.id)
+}
+
+const drawerItemSelected = (item) => {
+    console.log('pressed drawerItemSelected id '+ item.id)
+}
 
 contentView.append(
   CoordinatePage({
     layoutData: "stretch",
     drawerActionVisible: true,
+    menuDrawer={menuLeft()}
+    contentDrawer={<TextView text="content" />}
+    onDrawerItemSelected={drawerItemSelected}
+    onActionSelect={menuItemSelected}
   })
 );
 
@@ -302,6 +342,24 @@ contentView.append(
 contentView.append(<CoordinatePage layoutData="stretch" />);
 ```
 
+## DrawerMenu
+It is a wrapper for DrawerMenuItem. Only works for JSX as it provides a more user-friendly way to create a menu.
+The drawermenu property is used in CoordinatePage
+
+### DrawerMenuItem
+Go into the DrawerMenu component and define the *id*, *text*, *image* properties.
+
+```jsx
+<DrawerMenu>
+	<DrawerMenuItem
+		text=""
+		image=""
+		id=""
+	/>
+</DrawerMenu>
+```
+
+
 <br><br>
 
 > new features will be added little by little