webcomponents

React HTML controls, with convenience functions and events\
1 XButton: button (WHY COMPONENT?)
2 XInput: with numeric validation (shows error), transale "," to "." (store internally with different format) (WHY COMPONENT?)
3 XtextArea: (WHY COMPONENT?)
4 XSelect: input array key / value
5 XCheckbox: true/false
6 XDateSelect: (WHY COMPONENT?)

how to use:

1. Create index.html
2. Create App

Example

``


`

$3

`
class Page1 extends React.Component{
constructor(props){
super(props);
this.state ={}
}
render() {
return (




...)
}
}
`

$3

Atenção: objetos devem ter propriedade "_id" para serem editaveis
`
api={this.coinsAPI}
textlabels={true}
customEditcomponent={JZEditComponent}
listConfig={this.JZCoinsListConfig()}
editConfig={this.JZCoinsListConfig()}
/>

`

$3

Index

`


`

Page

`
import React from "react";
import {RestAPIAdapter} from "@andersonalmeidax0/webcomponents/RestAPIAdapter.js"
import {JZListComponent,JZListComponentNoRouter} from "@andersonalmeidax0/webcomponents/jzcomponents/JZListComponent"
import { JZEditComponent } from "@andersonalmeidax0/webcomponents/jzcomponents/JZEditComponent.jsx";


import {XButton} from "@andersonalmeidax0/webcomponents/XButton.jsx"
import { JZInPlaceListComponent } from "@andersonalmeidax0/webcomponents/jzcomponents/JZInPlaceListComponent.jsx";


/ * /
/ * /
class PageAPI extends React.Component{
constructor(props){
super(props);
//this.testAPI = new RestAPIAdapter('posts','https://jsonplaceholder.typicode.com',null,null, ()=>{return {userId:'999',name:'title'}},false);
this.testAPI = new RestAPIAdapter('records','http://localhost:9090/api',null,null, ()=>{return {name:'999',position:'level'}},false);
this.state ={}
}
componentDidMount() {
}

JZListConfig=()=> {
return {
title:'Test',numfields:0,
//For list
hasInsert:true,hasEditFn:(item)=>(true),hasDeleteFn:(item)=>(true),
//For edit
hasSaveFn:(item)=>(true),hasBackFn:(item)=>(true),extraButtons:[
{btnLabel:'ExtraButton',evtBtn:(obj)=>alert(obj.i_fullname)},
{btnLabel:'Exception',evtBtn:()=>{throw new Error()}}
],
fields:[
// {pos: 0,show:true, label:'userId' ,type:'s',attr:'userId',align:'left'},
// {pos: 0,show:true, label:'title', type:'s',attr:'title',align:'left'},
// {pos: 0,show:true, label:'id',type:'n',attr:'id',align:'right',renderFn:(c,r,i,r2)=>(r2)},
{pos: 0,show:true, label:'name' ,type:'s',attr:'name',align:'left'},
{pos: 0,show:true, label:'position', type:'s',attr:'position',align:'left'},


]};
}

render() {
return (

Posts

api={this.testAPI}
textlabels={true}
customEditcomponent={JZEditComponent}
listConfig={this.JZListConfig()}
editConfig={this.JZListConfig()}
/>

)
}

}

//import { PageAPI } from "./PageAPI";
export {PageAPI};
``