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

<XButton id="bt1" type="button" disabled={false}  label="Btn1" onClick={}/>  

Example PageComponent

class Page1 extends React.Component{
        constructor(props){
        super(props);
    		this.state ={}
        }
   render() {
        return ( <React.Fragment>
                    <XButton/>
                    <XSelect/>
                    
                    
                    ...)
      }
}

Example JZListComponentNoRouter

Atenção: objetos devem ter propriedade "_id" para serem editaveis

                <JZListComponentNoRouter    _id={'JZ3'}  
                 api={this.coinsAPI} 
                 textlabels={true} 
                 customEditcomponent={JZEditComponent} 
                 listConfig={this.JZCoinsListConfig()} 
                 editConfig={this.JZCoinsListConfig()} 
                />
               

Complete Example:

Index

    <link rel="stylesheet" href="/css/basic2.css">  
    <link rel="stylesheet" href="./css/font-awesome.ander.css">

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 (
         <React.Fragment>
       
        <section>
                
                <h4>Posts </h4>
                <JZListComponentNoRouter    _id={'JZ3'}  
                 api={this.testAPI} 
                 textlabels={true} 
                 customEditcomponent={JZEditComponent} 
                 listConfig={this.JZListConfig()} 
                 editConfig={this.JZListConfig()} 
                />
               
       </section>
       </React.Fragment>
      )  
   }
 
}

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