aio-form

use in reactjs create all forms by json

Instalation

npm i aio-form

Use

import AIOForm from 'aio-form';

props

Prop | Type | Default | Description ---- | ---- | ------- | ----------- data | json | {} | form data inputs | array of objects | Required | form items theme | json | Optional | form inline styles config | object | Required | form config(title,subtitle,onChange,onSubmit,onClose,reset,print)

data

form will receive and change data json

inputs

changing data by form inputs input types:

• text (string)
• number (number)
• textarea (string)
• select (string or number or boolean)
• multiselect (array)
• radio (string or number or boolean)
• checkbox (boolean)
• datepicker (string)
• rangedatepicker (array of 2 strings)
• slider (number)
• rangeslider (array of 2 numbers)
• table (array of objects)
• list (array of strings or numbers)
• color (string)
• file (array of objects)

config prop properties

Property | Type | Default | Description ---- | ---- | ------- | ----------- title | string | Optonal | form header title subtitle | string | Optional | form header subtitle onChange | function | Required | send changed data to parent component of form component onSubmit | function | Optional | call onSubmit props when user click on submit button onClose | function | Optional | call onClose props when user click on close button reset | boolean | false | show reset form button in form footer print | boolean | false | show print form button in form footer

input properties

Property | type | default | Use In | Description -------- | ---- | ------- | ------ | ----------- type | string | Required | All | input type label | string | Optional | All | Input Label field | string | Required | All | define how read value from data disabled | boolean or string | optional | All | set input disabled hide | boolean or string | Optional | All | hide input or not onChange | function or string | Optional | All | change data manually rowKey | string | Optional | All | place inputs that have same rowKey in one row rowSize | number | Optional | All | width of input in row groupKey | string | Optional | All | place inputs that have same groupKey in one group placeholder | string | Optional | text,number,textarea | Input placeholder text | string | Optional | multiselect,checkbox | Input Text options | array or string | Required | select,multiselect,radio | selectable input options optionWidth | string (?'px',?'%','fit-content') | 'fit-content' | radio | radio options width calendarType | string ('gregorian' or 'jalali') | 'gregorian' | datepicker,rangedatepicker | calendar type unit | string ('month','day','hour') | 'day' | datepicker,rangedatepicker | set datepicker monthly , daily or hourly start | number or string | 0 | slider,rangeslider | start of slider end | number or string | 100 | slider,rangeslider | end of slider step | number | 1 | slider,rangeslider | change step of slider

Input (type:'text'):

class Test1 extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:{name:'',family:'',username:'',usercode:''}
    }
  }
  render(){
    let {data} = this.state;
    return (
      <AIOForm
        data={data}
        config={{
          onChange:(changedData)=>{
            this.setState({data:changedData});
            console.log(changedData)
          }
        }}
        items={[
          {type:'text',label:'Name',field:'name'},
          {type:'text',label:'Family',field:'family'},
          {type:'text',label:'User name',field:'username'},
          {type:'text',label:'User Code',field:'usercode'},
        ]}
      />
    );
  }
}

More complicated field

class Test2 extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:{
        user:{
          name:'',
          family:'',
          username:'',
          usercode:''
        }
      }
    }
  }
  render(){
    let {data} = this.state;
    return (
      <AIOForm
        data={data}
        config={{
          onChange:(changedData)=>{
            console.log(changedData);
            this.setState({data:changedData})
          }
        }}
        items={[
          {type:'text',label:'Name',field:'user.name'},
          {type:'text',label:'Family',field:'user.family'},
          {type:'text',label:'Username',field:'user.username'},
          {type:'text',label:'User Code',field:'user.usercode'},
        ]}
      />
    );
  }
}

• log of chagedData

{
    "user": {
        "name": "john",
        "family": "doe",
        "username": "john123",
        "usercode": "2288"
    }
}

read label dynamically by execute label property string.(contain calc in first of label property)

class Test3 extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:{
        user:{
          name:'',
          family:'',
          username:'',
          usercode:''
        },
        labels:{
          name:'Name',
          family:'Family', 
          username:'User Name',
          usercode:'User Code'
        }
      }
    }
  }
  render(){
    let {data} = this.state;
    console.log(data)
    return (
      <AIOForm
        data={data}
        config={{
          onChange:(changedData)=>{
            console.log(changedData);
            this.setState({data:changedData})
          }
        }}
        items={[
          {type:'text',label:'calc data.labels.name',field:'user.name'},
          {type:'text',label:'calc data.labels.family',field:'user.family'},
          {type:'text',label:'calc data.labels.username',field:'user.username'},
          {type:'text',label:'calc data.labels.usercode',field:'user.usercode'},
        ]}
      />
    );
  }
}

input rowKey property

  ...
  items={[
    {type:'text',label:'Name',field:'user.name',rowKey:'1'},
    {type:'text',label:'Family',field:'user.family',rowKey:'1'},
    {type:'text',label:'User Name',field:'user.username',rowKey:'2'},
    {type:'text',label:'User Code',field:'user.usercode',rowKey:'2'},
  ]}
  ...
      

input rowSize property

  ...
  items={[
    {type:'text',label:'Name',field:'user.name',rowKey:'1',rowSize:100},
    {type:'text',label:'Family',field:'user.family',rowKey:'1'},
    {type:'text',label:'User Name',field:'user.username',rowKey:'2'},
    {type:'text',label:'User Code',field:'user.usercode',rowKey:'2',rowSize:100},
  ]}
  ...
      

input disabled property static (boolean)

  ...
  items={[
    {type:'text',label:'Name',field:'user.name'},
    {type:'text',label:'Family',field:'user.family'},
    {type:'text',label:'User Name',field:'user.username'},
    {type:'text',label:'User Code',field:'user.usercode',disabled:true},
  ]}
  ...
      

input disabled property dynamic(string)

disable item dynamically by execute disabled string.(contain calc in first of string)

  ...
  items={[
    {type:'text',label:'Name',field:'user.name'},
    {type:'text',label:'Family',field:'user.family'},
    {type:'text',label:'User Name',field:'user.username'},
    {type:'text',label:'User Code',field:'user.usercode',disabled:'calc !data.user.username'},
  ]}
  ...
      

input hide property ( boolean )

hide item statically by set hide:true

  ...
  items={[
    {type:'text',label:'Name',field:'user.name'},
    {type:'text',label:'Family',field:'user.family'},
    {type:'text',label:'User Name',field:'user.username'},
    {type:'text',label:'User Code',field:'user.usercode',hide:true},
  ]}
  ...
      

input hide property ( string )

hide item dynamically by execute hide string.(contain calc in first of hide property)

  ...
  items={[
    {type:'text',label:'Name',field:'user.name'},
    {type:'text',label:'Family',field:'user.family'},
    {type:'text',label:'User Name',field:'user.username'},
    {type:'text',label:'User Code',field:'user.usercode',hide:'calc !data.user || !data.user.username'},
  ]}
  ...
      

input onChange property ( function )

set onChange on item for manual changing data

  class Test1 extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:{
        gender:'male',
        user:{
          name:'',
          family:'',
          fullName:''
        }
      }
    }
  }
  render(){
    let {data} = this.state;
    return (
      <AIOForm
        data={data}
        config={{
          onChange:(changedData)=>{
            this.setState({data:changedData}) 
          } 
        }}
        items={[
          {
            type:'text',label:'Name',field:'user.name',
            onChange:(data,field,value)=>{
              data.user.name = value;
              data.user.fullName = (data.gender === 'male'?'Mr':'Mrs') + ' ' + data.user.name + ' ' + data.user.family; 
              return data
            }
          },
          {
            type:'text',label:'Family',field:'user.family',
            onChange:(data,field,value)=>{
              data.user.family = value;
              data.user.fullName = (data.gender === 'male'?'Mr':'Mrs') + ' ' + data.user.name + ' ' + data.user.family; 
              return data
            }
          },
          {
            type:'radio',label:'Gender',field:'gender',
            onChange:(data,field,value)=>{
              data.gender = value;
              data.user.fullName = (data.gender === 'male'?'Mr':'Mrs') + ' ' + data.user.name + ' ' + data.user.family; 
              return data
            },
            options:[
              {text:'Male',value:'male'},
              {text:'Female',value:'female'}
            ]
          },
          {type:'text',label:'Full Name',field:'user.fullName',disabled:true}
        ]}
      />
    );
  }
}
      

input onChange property ( string )

set onChange string on item for manual changing data

  class Test1 extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:{
        gender:'male',
        user:{
          name:'',
          family:'',
          fullName:''
        }
      }
    }
  }
  render(){
    let {data} = this.state;
    return (
      <AIOForm
        data={data}
        config={{
          onChange:(changedData)=>{
            this.setState({data:changedData}) 
          } 
        }}
        items={[
          {
            type:'text',label:'Name',field:'user.name',
            onChange:`
              data.user.name = value; 
              data.user.fullName = (data.gender === 'male'?'Mr':'Mrs') + ' ' + data.user.name + ' ' + data.user.family; 
            `
          },
          {
            type:'text',label:'Family',field:'user.family',
            onChange:`
              data.user.family = value;
              data.user.fullName = (data.gender === 'male'?'Mr':'Mrs') + ' ' + data.user.name + ' ' + data.user.family; 
            `
          },
          {
            type:'radio',label:'Gender',field:'gender',
            onChange:`
              data.gender = value;
              data.user.fullName = (data.gender === 'male'?'Mr':'Mrs') + ' ' + data.user.name + ' ' + data.user.family; 
            `,
            options:[
              {text:'Male',value:'male'}, 
              {text:'Female',value:'female'}
            ]
          },
          {type:'text',label:'Full Name',field:'user.fullName',disabled:true}
        ]}
      /> 
    );
  }
}
      

input placeholder property ( string )

if use calc in first of item.placeholder it will read placeholder value from data else placeholder will be placeholder value

  ...
  items={[
    {
      type:'text',label:'Name',field:'name',
      placeholder:'calc data.defaultName'//read from data
    },
    {
      type:'number',label:'age',field:'age',
      placeholder:'inter age'//hard code
    },
    {
      type:'textarea',label:'Description',field:'description',
      placeholder:'inter description'// hard code
    }
  ]}
  ...
      

input options propery ( array )

  ...
  items={[
    {
      type:'text',label:'Name',field:'name',
      options:[
        {text:'john doe'},
        {text:'mohammad feiz'},
        {text:'robert anderson'}
      ]
    },
  ]}
  ...
      

input text options propery ( string )

read text options dynamically by execute options string.(contain calc in first of options string)

  class Test1 extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:{
        nameOptions:[
          {text:'john doe'},
          {text:'mohammad feiz'},
          {text:'robert anderson'}
        ]
      }
    }
  }
  render(){
    let {data} = this.state;
    return (
      <AIOForm
        data={data}
        config={{
          onChange:(changedData)=>{
            this.setState({data:changedData}) 
          } 
        }}
        items={[
          {
            type:'text',label:'Name',field:'name',
            options:'calc data.nameOptions'
          },
        ]}
      />
    );
  }
}

      

select (static options)

  class Test1 extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:{
        gender:false,
      }
    }
  }
  render(){
    let {data} = this.state;
    return (
      <AIOForm
        data={data}
        config={{
          onChange:(changedData)=>{
            this.setState({data:changedData}) 
          } 
        }}
        items={[
          {
            type:'select',label:'Gender',field:'gender',
            options:[
              {text:'Not Selected',value:false},
              {text:'Male',value:'male'},
              {text:'Female',value:'female'}
            ]
          },
          {
            type:'text',label:'Gender Preview',field:'gender',disabled:true
          },
        ]}
      />
    );
  }
}
      

select (dynamic options)

  class Test1 extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:{
        gender:false,
        genderOptions:[
          {text:'Not Selected',value:false},
          {text:'Male',value:'male'},
          {text:'Female',value:'female'}
        ]
      }
    }
  }
  render(){
    let {data} = this.state;
    return (
      <AIOForm
        data={data}
        config={{
          onChange:(changedData)=>{
            this.setState({data:changedData}) 
          } 
        }}
        items={[
          {
            type:'select',label:'Gender',field:'gender',
            options:'calc data.genderOptions'
          },
          {
            type:'text',label:'Gender Preview',field:'gender',disabled:true
          },
        ]}
      />
    );
  }
}
      

multiselect (static options)

  class Test1 extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:{
        skills:[]
      }
    }
  }
  render(){
    let {data} = this.state;
    return (
      <AIOForm
        data={data}
        config={{
          onChange:(changedData)=>{
            this.setState({data:changedData}) 
          } 
        }}
        items={[
          {
            type:'multiselect',label:'Skills',field:'skills',
            options:[
              {text:'js',value:'js'},
              {text:'css',value:'css'},
              {text:'html',value:'html'}
            ]
          },
          {
            type:'text',label:'skills Preview',field:'skills',disabled:true
          },
        ]}
      />
    );
  }
}
      

multiselect (dynamic options)

  class Test1 extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:{
        skills:[],
        skillsOptions:[
          {text:'Not Selected',value:false},
          {text:'Male',value:'male'},
          {text:'Female',value:'female'}
        ]
      }
    }
  }
  render(){
    let {data} = this.state;
    return (
      <AIOForm
        data={data}
        config={{
          onChange:(changedData)=>{
            this.setState({data:changedData}) 
          } 
        }}
        items={[
          {
            type:'multiselect',label:'Skills',field:'skills',
            options:'calc data.skillsOptions'
          },
          {
            type:'text',label:'skills Preview',field:'skills',disabled:true
          },
        ]}
      />
    );
  }
}
      

radio (static options)

  class Test1 extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:{
        gender:'1'
      }
    } 
  }
  render(){
    let {data} = this.state;
    return (
      <AIOForm
        data={data}
        config={{
          onChange:(changedData)=>{
            this.setState({data:changedData}) 
          } 
        }}
        items={[
          {
            type:'radio',label:'Gender',field:'gender',
            options:[
              {text:'Male',value:'1'},
              {text:'Female',value:'2'}
            ]
          },
          {
            type:'text',label:'Gender Preview',field:'gender',disabled:true
          },
        ]}
      />
    );
  }
}
      

radio (dynamic options)

  class Test1 extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:{
        gender:'1',
        genderOptions:[
          {text:'Male',value:'1'},
          {text:'Female',value:'2'}
        ]
      }
    }
  }
  render(){
    let {data} = this.state;
    return (
      <AIOForm
        data={data}
        config={{
          onChange:(changedData)=>{
            this.setState({data:changedData}) 
          } 
        }}
        items={[
          {
            type:'radio',label:'Gender',field:'gender',
            options:'calc data.genderOptions'
          },
          {
            type:'text',label:'Gender Preview',field:'gender',disabled:true
          },
        ]}
      />
    );
  }
}
      

checkbox

  class Test1 extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:{
        active:false
      }
    } 
  }
  render(){
    let {data} = this.state;
    return (
      <AIOForm
        data={data}
        config={{
          onChange:(changedData)=>{
            this.setState({data:changedData}) 
          } 
        }}
        items={[
          {
            type:'checkbox',label:'Activity',field:'active',text:'Activity'
          }
        ]}
      />
    );
  }
}