webcomponents
npm install @andersonalmeidax0/webcomponents
`
$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};
``