diff --git a/README.md b/README.md index 245c1ba..7c34d25 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ +

voir native

@@ -5,29 +6,35 @@

It is a framework to develop android and ios applications in a more organized way with tabrisjs


- + +
## 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 +
+**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. +
+**Voir.factory** It helps that the class is invoked as a function. ## Helpers View @@ -62,7 +75,7 @@ contentView.append(); addView(, ); ``` -### menuDrawer +### setMenuDrawer | parameter types |:-- @@ -70,37 +83,40 @@ addView(, ); ```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 ( + + + + + ) +} + +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={} + onDrawerItemSelected={drawerItemSelected} + onActionSelect={menuItemSelected} }) ); @@ -302,6 +342,24 @@ contentView.append( contentView.append(); ``` +## 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 + + + +``` + +

> new features will be added little by little diff --git a/dist/index.js b/dist/index.js index 7fa9809..b1ae144 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1 +1 @@ -"use strict";var re=Object.defineProperty,oe=Object.defineProperties;var ie=Object.getOwnPropertyDescriptors;var Y=Object.getOwnPropertySymbols;var ae=Object.prototype.hasOwnProperty,ce=Object.prototype.propertyIsEnumerable;var W=(t,e,n)=>e in t?re(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,p=(t,e)=>{for(var n in e||(e={}))ae.call(e,n)&&W(t,n,e[n]);if(Y)for(var n of Y(e))ce.call(e,n)&&W(t,n,e[n]);return t},X=(t,e)=>oe(t,ie(e));var O=(t,e,n)=>new Promise((o,i)=>{var a=l=>{try{s(n.next(l))}catch(f){i(f)}},u=l=>{try{s(n.throw(l))}catch(f){i(f)}},s=l=>l.done?o(l.value):Promise.resolve(l.value).then(a,u);s((n=n.apply(t,e)).next())});Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("tabris");require("string-tocapitalize");function w(t,e){const n=new Proxy(t,{construct(o,i){return new o(i[0])},apply(o,i,a){return new n(a[0])}});return n}const P=class P{};P.LONG=3e3,P.MEDIUM=2100,P.SHORT=1500;let k=P;function L(t,e,n){return t.animate({opacity:1},{delay:e!=null?e:0,duration:n,easing:"ease-in"})}function j(t,e,n){return t.animate({opacity:0},{delay:e,duration:n,easing:"ease-out"})}function J(t,e,n){return O(this,null,function*(){yield L(t,e,300),yield j(t,n,n)})}class se extends r.EventObject{}class K{constructor(e={}){const n=[];let o,i,a=!1,u=!1,s=!1;const{width:l}=r.contentView.bounds,{screenWidth:f}=device,d=560,D={elevation:24,centerY:!0,padding:10,cornerRadius:5,opacity:0,background:"white",id:"modal-container"};d>f||d>l?Object.assign(D,{left:24,right:24}):Object.assign(D,{width:d});const S=new r.Composite({left:0,right:0,top:0,bottom:0,opacity:1,highlightOnTouch:!1,background:new r.Color(0,0,0,50)}).onTap(c=>c.preventDefault()),m=new r.Composite(D).appendTo(S);"title"in e&&m.append(new r.TextView({id:"modal-title",font:"medium 18px",padding:10,left:0,right:0,text:e.title.toCapitalize()}));const v=new r.Composite({top:"#modal-title",bottom:r.LayoutData.prev,right:0,left:0}),M=new r.ScrollView({layoutData:"stretchX"}).appendTo(v);m.onBoundsChanged(({value:c})=>{const{height:y}=r.contentView.bounds;yy?d-(d>y?20+d-y:0):d>c.height?c.height:d}),v.layoutData=p({},v.layoutData),M.layoutData="stretch")}),Object.defineProperty(this,"setButtonAccept",{configurable:!1,value:c=>(o||(o=N("accept",c)),o)}),Object.defineProperty(this,"setButtonCancel",{configurable:!1,value:c=>(i||(i=N("cancel",c)),i)}),Object.defineProperty(this,"addView",{configurable:!1,value:(...c)=>M.append(c)}),Object.defineProperty(this,"show",{configurable:!1,value:()=>{a||(a=!0,m.append(new r.Composite({layoutData:"stretchX",id:"buttons-modal",bottom:0}).append(n))),(!s||u)&&(s=!0,u=!1,m.append(v),r.contentView.append(S),L(m,0,100))}}),Object.defineProperty(this,"removeView",{configurable:!1,value:()=>M.children().dispose()}),Object.defineProperty(this,"removeButtons",{configurable:!1,value:()=>{o=i=null,n.forEach(c=>{c.dispose()})}}),Object.defineProperty(this,"remove",{configurable:!1,value:()=>{u||j(S,0,250).then(()=>{u=!0,s=!1,S.detach()})}});function N(c,y){const B=new r.Button({text:y,top:n.length===0?"prev() 20":"auto",right:n.length===0?0:"prev()",bottom:0,style:"text"}),H=new r.Listeners(B,c);return B.onTap(()=>H.trigger(new se)),n.push(B),H}}}class V extends k{constructor(e,n){super();const i=r.sizeMeasurement.measureTextsSync([{text:e,font:"12px"}])[0].width>r.contentView.bounds.width-20,a={};i?(a.left=20,a.right=20):a.centerX=!0;const u=r.TextView({text:e,font:"12px",textColor:"white",left:0,right:0}),s=r.Composite(p({background:"black",padding:10,cornerRadius:10,bottom:30,opacity:0},a)).append(u);Object.defineProperty(this,"show",{configurable:!1,value:()=>O(this,null,function*(){r.contentView.append(s),yield J(s,0,n),s.dispose()})})}static makeText(e,n=V.SHORT){return new V(e,n)}}function U(t,e){const n=t.children;delete t.children;const o=new e(t);return n&&o.append(n),o}class ue extends r.Composite{constructor(e){super({id:e,top:r.Constraint.prev,right:0,left:0,height:56,highlightOnTouch:!0})}}const le=t=>()=>t,fe=({children:t})=>()=>{const e=[];for(const n of t)typeof n=="function"&&e.push(n());return e},de=(t,e)=>{console.warn("deprecated function [menuDrawer] use setMenuDrawer"),E(t,e)};function G(){const t=r.drawer.find("#scrollableLayoutMenuDrawer"),e=t.length!==0?t.only():r.ScrollView({id:"scrollableLayoutMenuDrawer",top:r.Constraint.prev,left:0,right:0,bottom:0});return t.length===0&&r.drawer.append(e),e}function E(t,e){G().append(t.map(n=>{const o=r.Row({layoutData:"stretch",alignment:"centerY"});n.image&&o.append(r.ImageView({image:n.image,width:24,left:28}));const i=n.image?12:64;return o.append(r.TextView({text:n.text,font:"20px sans-serif",left:i})),new ue(n.id).append(o).onTap(function(){e(this),setTimeout(()=>r.drawer.close(),100)})}))}function F(t){const e=G(),n=r.drawer.find("#voirContentDrawer"),o=n.length===0?r.Composite({top:[r.Constraint.prev,15],left:0,right:0,id:"voirContentDrawer",padding:8}).append(t):n.only().append(t);n.length===0&&e.append(o)}const h=new Map;class Q extends r.NavigationView{set contentDrawer(e){this._contentDrawer=e}get contentDrawer(){return this._contentDrawer}set onActionSelect(e){this._onActionSelect=e}get onActionSelect(){return this._onActionSelect}set menuDrawer(e){this._dataMenuDrawer=e()}get menuDrawer(){return this._dataMenuDrawer}set onDrawerItemSelected(e){this._onDrawerItemSelected=e}get onDrawerItemSelected(){return this._onDrawerItemSelected}_render(){this.menuDrawer.length>0&&E(this.menuDrawer,this.onDrawerItemSelected),this._contentDrawer&&F(this._contentDrawer)}constructor(e){super(e),e.drawerActionVisible&&this._render(),this.on("addChild",({child:o})=>{o instanceof r.Action&&this._onActionSelect&&!o.data.voirInitalizedEvent&&o.onSelect(({target:i})=>this._onActionSelect(i)),o instanceof r.Page&&(h.set(o,{hidden:!1,actions:null,isDisposed:!1}),o.on("appear",()=>{const i=h.get(o);typeof i=="object"&&i.hidden&&(i.actions!==null&&this.append(i.actions),i.hidden=!1),h.size===1&&n(!0)}),o.on("disappear",()=>{var a;const i=h.get(o);n(!1),i.hidden||(i.hidden=!0,(a=i.actions)==null||a.forEach(u=>u.detach())),i.isDisposed&&h.delete(o)}),o.on("dispose",()=>{h.get(o).isDisposed=!0}))});function n(o){e!=null&&e.drawerActionVisible&&(r.drawer.enabled=o)}}append(...e){const n=super.append(...e);return setTimeout(()=>he(e),0),n}}function pe(t){const e=t.find(i=>i instanceof r.Page),n=t.filter(i=>i instanceof r.Action||i instanceof r.SearchAction?i.data.voirInitalizedEvent=!0:!1),o=h.get(e);return e&&n.length&&o.actions===null&&(o.actions=n),o}function he(t){let e=t.length>1?t:Array.isArray(t[0])?t.shift():t;if(e.some(n=>Array.isArray(n)))throw new Error("error parameter");if(Array.isArray(e)&&e.length>0)return pe(e)}function we(t){return U(t,Q)}const ge=w(we),C="voir-native-preference";localStorage.getItem(C)||localStorage.setItem(C,"{}");const b=JSON.parse(localStorage.getItem(C)),_=(t,e)=>{b[t]=e,localStorage.setItem(C,JSON.stringify(b))},z=t=>b[t],Z=t=>t in b,x=(t,e,n)=>r.NativeObject.defineProperty(t,e,n),me={left:0,right:"10%"},q=t=>e=>t.onTap(e);class g extends r.Composite{set onSelect(e){q(this)(e)}get onSelect(){return q(this)}constructor(e){super(p({left:0,right:0,padding:10,top:"prev()",highlightOnTouch:!0},e)),Z(this.key)||_(this.key,this.value);const n=this.summary.length===0?!0:0,o={text:this.title.toCapitalize()};n?o.centerY=!0:o.top="prev()",this.append(new r.TextView(o)),this.summary.length>0&&this.append(new r.TextView(p({text:this.summary,top:["prev()",0]},me)))}}x(g.prototype,"title",{type:"string",default:""});x(g.prototype,"summary",{type:"string",default:""});x(g.prototype,"key",{type:"string",default:""});x(g.prototype,"value",{type:"string",default:""});class A extends g{constructor(e){var i;let n;const o=e.onSelect;e.onSelect=()=>n&&(n.checked=!n.checked),super(e),n=this._getButton({right:0,centerY:!0,checked:(i=z(this.key))!=null?i:this.value}),typeof n!="undefined"&&(this.addListener(n,o),this.append(n))}addListener(e,n){e.on("checkedChanged",o=>{_(this.key,e.checked),typeof n=="function"&&n.call(this,o)})}}function ye(t={}){return new $(t)}class $ extends A{constructor(e){super(e)}_getButton(e){return new r.CheckBox(e)}}const xe=w(ye);function Pe(t={}){return new ee(t)}class ee extends A{constructor(e){super(e)}_getButton(e){return new r.Switch(e)}}const Ce=w(Pe);function be(t){return new te(t)}class te extends g{constructor(e){super(e)}}const De=w(be);class ne extends r.Page{constructor(e){super(e)}}function Se(t){return U(p({layoutData:"stretch"},t),ne)}const ve=w(Se);function ke(t={}){return new T(t)}class T extends A{_getButton(){}constructor(e){const n=e.onSelect;super(e),this.onSelect(()=>{const i=new K({title:this.title.toCapitalize()});this.entries&&this.entries.length>0&&i.addView(...this.entries.map((a,u)=>{var l;const s=r.RadioButton({text:a.text,checked:(l=a.checked)!=null?l:parseInt(z(this.key))===u,layoutData:{top:[r.LayoutData.prev,5],left:0,right:0}}).onSelect(f=>{f.checked&&(_(this.key,u),typeof n=="function"&&n.call(this,f))});return a.id&&(s.id=a.id),s})),i.setButtonAccept(this.textButtonAccept.toUpperCase()).addListener(o.bind(i)),i.show()});function o(){this.remove()}}}const Ve=w(ke);x(T.prototype,"entries",{type:"any",default:[]});x(T.prototype,"textButtonAccept",{type:"string",default:"accept"});let I;r.contentView.on("addChild",({child:t})=>{t instanceof r.NavigationView&&!I&&(I=t)});function R(...t){return I.append(...t)}class _e{constructor(){const e=[];if(typeof this.renderAction=="function"){const n=this.renderAction();n&&e.push(...Array.from(n))}R(...e,this.render())}}const Ae={Render:_e,factory(t){return w(t)}};exports.$preference=b;exports.AbstractItemPreference=g;exports.AnimationTime=k;exports.CheckBoxPreference=xe;exports.CheckBoxPreferenceComponent=$;exports.Checked=A;exports.CoordinatePage=ge;exports.CoordinatePageComponent=Q;exports.DrawerMenu=fe;exports.DrawerMenuItem=le;exports.ListPreference=Ve;exports.ListPreferenceComponent=T;exports.Modal=K;exports.PreferenceScreen=ve;exports.PreferenceScreenComponent=ne;exports.SwitchPreference=Ce;exports.SwitchPreferenceComponent=ee;exports.TextPreference=De;exports.TextPreferenceComponent=te;exports.Toast=V;exports.Voir=Ae;exports.addView=R;exports.animate=J;exports.animateHidden=j;exports.animateShow=L;exports.default=R;exports.existsKeyPreference=Z;exports.getValuePreference=z;exports.menuDrawer=de;exports.name_key_pref=C;exports.setContentDrawer=F;exports.setMenuDrawer=E;exports.setPreference=_; +"use strict";var re=Object.defineProperty,oe=Object.defineProperties;var ie=Object.getOwnPropertyDescriptors;var Y=Object.getOwnPropertySymbols;var ae=Object.prototype.hasOwnProperty,ce=Object.prototype.propertyIsEnumerable;var W=(t,e,n)=>e in t?re(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,p=(t,e)=>{for(var n in e||(e={}))ae.call(e,n)&&W(t,n,e[n]);if(Y)for(var n of Y(e))ce.call(e,n)&&W(t,n,e[n]);return t},X=(t,e)=>oe(t,ie(e));var B=(t,e,n)=>new Promise((o,i)=>{var a=l=>{try{s(n.next(l))}catch(f){i(f)}},u=l=>{try{s(n.throw(l))}catch(f){i(f)}},s=l=>l.done?o(l.value):Promise.resolve(l.value).then(a,u);s((n=n.apply(t,e)).next())});Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("tabris");require("string-tocapitalize");function w(t,e){const n=new Proxy(t,{construct(o,i){return new o(i[0])},apply(o,i,a){return new n(a[0])}});return n}const P=class P{};P.LONG=3e3,P.MEDIUM=2100,P.SHORT=1500;let k=P;function L(t,e,n){return t.animate({opacity:1},{delay:e!=null?e:0,duration:n,easing:"ease-in"})}function j(t,e,n){return t.animate({opacity:0},{delay:e,duration:n,easing:"ease-out"})}function J(t,e,n){return B(this,null,function*(){yield L(t,e,300),yield j(t,n,n)})}class se extends r.EventObject{}class K{constructor(e={}){const n=[];let o,i,a=!1,u=!1,s=!1;const{width:l}=r.contentView.bounds,{screenWidth:f}=device,d=560,D={elevation:24,centerY:!0,padding:10,cornerRadius:5,opacity:0,background:"white",id:"modal-container"};d>f||d>l?Object.assign(D,{left:24,right:24}):Object.assign(D,{width:d});const S=new r.Composite({left:0,right:0,top:0,bottom:0,opacity:1,highlightOnTouch:!1,background:new r.Color(0,0,0,50)}).onTap(c=>c.preventDefault()),m=new r.Composite(D).appendTo(S);"title"in e&&m.append(new r.TextView({id:"modal-title",font:"medium 18px",padding:10,left:0,right:0,text:e.title.toCapitalize()}));const v=new r.Composite({top:"#modal-title",bottom:r.LayoutData.prev,right:0,left:0}),M=new r.ScrollView({layoutData:"stretchX"}).appendTo(v);m.onBoundsChanged(({value:c})=>{const{height:y}=r.contentView.bounds;yy?d-(d>y?20+d-y:0):d>c.height?c.height:d}),v.layoutData=p({},v.layoutData),M.layoutData="stretch")}),Object.defineProperty(this,"setButtonAccept",{configurable:!1,value:c=>(o||(o=N("accept",c)),o)}),Object.defineProperty(this,"setButtonCancel",{configurable:!1,value:c=>(i||(i=N("cancel",c)),i)}),Object.defineProperty(this,"addView",{configurable:!1,value:(...c)=>M.append(c)}),Object.defineProperty(this,"show",{configurable:!1,value:()=>{a||(a=!0,m.append(new r.Composite({layoutData:"stretchX",id:"buttons-modal",bottom:0}).append(n))),(!s||u)&&(s=!0,u=!1,m.append(v),r.contentView.append(S),L(m,0,100))}}),Object.defineProperty(this,"removeView",{configurable:!1,value:()=>M.children().dispose()}),Object.defineProperty(this,"removeButtons",{configurable:!1,value:()=>{o=i=null,n.forEach(c=>{c.dispose()})}}),Object.defineProperty(this,"remove",{configurable:!1,value:()=>{u||j(S,0,250).then(()=>{u=!0,s=!1,S.detach()})}});function N(c,y){const O=new r.Button({text:y,top:n.length===0?"prev() 20":"auto",right:n.length===0?0:"prev()",bottom:0,style:"text"}),H=new r.Listeners(O,c);return O.onTap(()=>H.trigger(new se)),n.push(O),H}}}class V extends k{constructor(e,n){super();const i=r.sizeMeasurement.measureTextsSync([{text:e,font:"12px"}])[0].width>r.contentView.bounds.width-20,a={};i?(a.left=20,a.right=20):a.centerX=!0;const u=r.TextView({text:e,font:"12px",textColor:"white",left:0,right:0}),s=r.Composite(p({background:"black",padding:10,cornerRadius:10,bottom:30,opacity:0},a)).append(u);Object.defineProperty(this,"show",{configurable:!1,value:()=>B(this,null,function*(){r.contentView.append(s),yield J(s,0,n),s.dispose()})})}static makeText(e,n=V.SHORT){return new V(e,n)}}function U(t,e){const n=t.children;delete t.children;const o=new e(t);return n&&o.append(n),o}class ue extends r.Composite{constructor(e){super({id:e,top:r.Constraint.prev,right:0,left:0,height:56,highlightOnTouch:!0})}}const le=t=>()=>t,fe=({children:t})=>()=>{const e=[];for(const n of t)typeof n=="function"&&e.push(n());return e},de=(t,e)=>{console.warn("deprecated function [menuDrawer] use setMenuDrawer"),z(t,e)};function G(){const t=r.drawer.find("#scrollableLayoutMenuDrawer"),e=t.length!==0?t.only():r.ScrollView({id:"scrollableLayoutMenuDrawer",top:r.Constraint.prev,left:0,right:0,bottom:0});return t.length===0&&r.drawer.append(e),e}function z(t,e){G().append(t.map(n=>{const o=r.Row({layoutData:"stretch",alignment:"centerY"});n.image&&o.append(r.ImageView({image:n.image,width:24,left:28}));const i=n.image?12:64;return o.append(r.TextView({text:n.text,font:"20px sans-serif",left:i})),new ue(n.id).append(o).onTap(function(){e(this),setTimeout(()=>r.drawer.close(),100)})}))}function F(t){const e=G(),n=r.drawer.find("#voirContentDrawer"),o=n.length===0?r.Composite({top:[r.Constraint.prev,15],left:0,right:0,id:"voirContentDrawer",padding:8}).append(t):n.only().append(t);n.length===0&&e.append(o)}const h=new Map;class Q extends r.NavigationView{set contentDrawer(e){this._contentDrawer=e}get contentDrawer(){return this._contentDrawer}set onActionSelect(e){this._onActionSelect=e}get onActionSelect(){return this._onActionSelect}set menuDrawer(e){this._dataMenuDrawer=e()}get menuDrawer(){return this._dataMenuDrawer}set onDrawerItemSelected(e){this._onDrawerItemSelected=e}get onDrawerItemSelected(){return this._onDrawerItemSelected}_render(){this.menuDrawer.length>0&&z(this.menuDrawer,this.onDrawerItemSelected),this._contentDrawer&&F(this._contentDrawer)}constructor(e){super(e),e.drawerActionVisible&&this._render(),this.on("addChild",({child:o})=>{o instanceof r.Action&&this._onActionSelect&&!o.data.voirInitalizedEvent&&o.onSelect(({target:i})=>this._onActionSelect(i)),o instanceof r.Page&&(h.set(o,{hidden:!1,actions:null,isDisposed:!1}),o.on("appear",()=>{const i=h.get(o);typeof i=="object"&&i.hidden&&(i.actions!==null&&this.append(i.actions),i.hidden=!1),h.size===1&&n(!0)}),o.on("disappear",()=>{var a;const i=h.get(o);n(!1),i.hidden||(i.hidden=!0,(a=i.actions)==null||a.forEach(u=>u.detach())),i.isDisposed&&h.delete(o)}),o.on("dispose",()=>{h.get(o).isDisposed=!0}))});function n(o){e!=null&&e.drawerActionVisible&&(r.drawer.enabled=o)}}append(...e){const n=super.append(...e);return setTimeout(()=>he(e),0),n}}function pe(t){const e=t.find(i=>i instanceof r.Page),n=t.filter(i=>i instanceof r.Action||i instanceof r.SearchAction?i.data.voirInitalizedEvent=!0:!1),o=h.get(e);return e&&n.length&&o.actions===null&&(o.actions=n),o}function he(t){let e=t.length>1?t:Array.isArray(t[0])?t.shift():t;if(e.some(n=>Array.isArray(n)))throw new Error("error parameter");if(Array.isArray(e)&&e.length>0)return pe(e)}function we(t){return U(t,Q)}const ge=w(we),C="voir-native-preference";localStorage.getItem(C)||localStorage.setItem(C,"{}");const b=JSON.parse(localStorage.getItem(C)),_=(t,e)=>{b[t]=e,localStorage.setItem(C,JSON.stringify(b))},E=t=>b[t],Z=t=>t in b,x=(t,e,n)=>r.NativeObject.defineProperty(t,e,n),me={left:0,right:"10%"},q=t=>e=>t.onTap(e);class g extends r.Composite{set onSelect(e){q(this)(e)}get onSelect(){return q(this)}constructor(e){super(p({left:0,right:0,padding:10,top:"prev()",highlightOnTouch:!0},e)),Z(this.key)||_(this.key,this.value);const n=this.summary.length===0?!0:0,o={text:this.title.toCapitalize()};n?o.centerY=!0:o.top="prev()",this.append(new r.TextView(o)),this.summary.length>0&&this.append(new r.TextView(p({text:this.summary,top:["prev()",0]},me)))}}x(g.prototype,"title",{type:"string",default:""});x(g.prototype,"summary",{type:"string",default:""});x(g.prototype,"key",{type:"string",default:""});x(g.prototype,"value",{type:"string",default:""});class A extends g{constructor(e){var i;let n;const o=e.onSelect;e.onSelect=()=>n&&(n.checked=!n.checked),super(e),n=this._getButton({right:0,centerY:!0,checked:(i=E(this.key))!=null?i:this.value}),typeof n!="undefined"&&(this.addListener(n,o),this.append(n))}addListener(e,n){e.on("checkedChanged",o=>{_(this.key,e.checked),typeof n=="function"&&n.call(this,o)})}}function ye(t={}){return new $(t)}class $ extends A{constructor(e){super(e)}_getButton(e){return new r.CheckBox(e)}}const xe=w(ye);function Pe(t={}){return new ee(t)}class ee extends A{constructor(e){super(e)}_getButton(e){return new r.Switch(e)}}const Ce=w(Pe);function be(t){return new te(t)}class te extends g{constructor(e){super(e)}}const De=w(be);class ne extends r.Page{constructor(e){super(e)}}function Se(t){return U(p({layoutData:"stretch"},t),ne)}const ve=w(Se);function ke(t={}){return new T(t)}class T extends A{_getButton(){}constructor(e){const n=e.onSelect;super(e),this.onSelect(()=>{const i=new K({title:this.title.toCapitalize()});this.entries&&this.entries.length>0&&i.addView(...this.entries.map((a,u)=>{var l;const s=r.RadioButton({text:a.text,checked:(l=a.checked)!=null?l:parseInt(E(this.key))===u,layoutData:{top:[r.LayoutData.prev,5],left:0,right:0}}).onSelect(f=>{f.checked&&(_(this.key,u),typeof n=="function"&&n.call(this,f))});return a.id&&(s.id=a.id),s})),i.setButtonAccept(this.textButtonAccept.toUpperCase()).addListener(o.bind(i)),i.show()});function o(){this.remove()}}}const Ve=w(ke);x(T.prototype,"entries",{type:"any",default:[]});x(T.prototype,"textButtonAccept",{type:"string",default:"accept"});let I;r.contentView.on("addChild",({child:t})=>{t instanceof r.NavigationView&&!I&&(I=t)});function R(...t){return I.append(...t)}class _e{constructor(){const e=[];if(typeof this.renderAction=="function"){const n=this.renderAction();n&&e.push(...Array.from(n))}R(...e,this.render())}}const Ae=Object.freeze({Render:_e,factory(t){return w(t)}});exports.$preference=b;exports.AbstractItemPreference=g;exports.AnimationTime=k;exports.CheckBoxPreference=xe;exports.CheckBoxPreferenceComponent=$;exports.Checked=A;exports.CoordinatePage=ge;exports.CoordinatePageComponent=Q;exports.DrawerMenu=fe;exports.DrawerMenuItem=le;exports.ListPreference=Ve;exports.ListPreferenceComponent=T;exports.Modal=K;exports.PreferenceScreen=ve;exports.PreferenceScreenComponent=ne;exports.SwitchPreference=Ce;exports.SwitchPreferenceComponent=ee;exports.TextPreference=De;exports.TextPreferenceComponent=te;exports.Toast=V;exports.Voir=Ae;exports.addView=R;exports.animate=J;exports.animateHidden=j;exports.animateShow=L;exports.default=R;exports.existsKeyPreference=Z;exports.getValuePreference=E;exports.menuDrawer=de;exports.name_key_pref=C;exports.setContentDrawer=F;exports.setMenuDrawer=z;exports.setPreference=_; diff --git a/preview.webm b/preview.webm new file mode 100644 index 0000000..b42f144 Binary files /dev/null and b/preview.webm differ diff --git a/src/index.ts b/src/index.ts index 3eb631b..d752d93 100644 --- a/src/index.ts +++ b/src/index.ts @@ -45,10 +45,10 @@ abstract class VoirRender { } } -export const Voir = { +export const Voir = Object.freeze({ Render: VoirRender, factory(Class: VoirRender) { //@ts-ignore return createProxies(Class) as VoirRender; } -} \ No newline at end of file +}) \ No newline at end of file