Skip to content

mohammadFeiz/aio-form

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
README.md
README.md
 
 
aio-form.js
aio-form.js
 
 
index.css
index.css
 
 
index.js
index.js
 
 
package.json
package.json
 
 

Repository files navigation

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'},
        ]}
      />
    );
  }
}

alt text

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"
    }
}

alt text

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'},
        ]}
      />
    );
  }
}

alt text

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'},
  ]}
  ...

alt text

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},
  ]}
  ...

alt text

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},
  ]}
  ...

alt text

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'},
  ]}
  ...

alt text

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},
  ]}
  ...

alt text

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'},
  ]}
  ...

alt text

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}
        ]}
      />
    );
  }
}

alt text

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}
        ]}
      /> 
    );
  }
}

alt text

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
    }
  ]}
  ...

alt text

input options propery ( array )

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

alt text

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'
          },
        ]}
      />
    );
  }
}

alt text

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
          },
        ]}
      />
    );
  }
}

alt text

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
          },
        ]}
      />
    );
  }
}

alt text

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
          },
        ]}
      />
    );
  }
}

alt text

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
          },
        ]}
      />
    );
  }
}

alt text

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
          },
        ]}
      />
    );
  }
}

alt text

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
          },
        ]}
      />
    );
  }
}

alt text

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'
          }
        ]}
      />
    );
  }
}

alt text

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages