aio-input v14.3.5

aio-input

generate all inputs in react.

Note: Composite Component for Versatility and Consistency

The decision to composite all 24 input types into one component, AIOInput, was made to enhance versatility, maintainability, and consistency across various input scenarios in web development.

Versatility:

By encapsulating all input types within a single component, developers have access to a wide range of input functionalities without the need to import and manage multiple components. This approach simplifies the component structure and streamlines development workflows, especially in projects requiring diverse input requirements.

Maintainability:

Using a composite component allows for centralized management of common functionalities such as popover handling, option configuration, rendering layout, and event handling (e.g., onChange events). Any updates or enhancements to these shared functionalities can be implemented once within the composite component, ensuring consistent behavior across all input types.

Consistency:

All input types share a common configuration syntax and utilize the same underlying methods for rendering and event handling. This promotes consistency in the development process, making it easier for developers to learn, use, and maintain the component. Additionally, consistent configuration options enhance code readability and reduce the likelihood of errors.

In summary, the AIOInput component offers a unified solution for handling diverse input requirements in web applications, providing developers with a versatile, maintainable, and consistent toolset for building interactive user interfaces.

avilable types

collection types are form , table and tree types that can take all input types to modify set of data:

• in input type form you can use all this types as elements of form. form get an object as value and inputs object by definition fields and will pass changed value automatically by onChange prop
• in input type table you can use all this types as table cell content. table get an array of objects as table rows by value prop and input object in columns prop will be props of each cell input. by change each input , table onChange will pass changed rows automatically.
• in input type tree you can use all this types as text of tree node. tree get an object contain text function. you can customize tree node text as other inputs or any jsx content.

public props

options and option props

options

• type : Array
• use in this types: select radio tabs buttons tree text number textarea color
• define selective options.An array containing options for the selectable component.

option

• type : Object contain Functions
• use in this types : text number textarea select tabs buttons radio date list file tree acardion.
• configure each option of options prop , tags or rows of input.
• Each function called for each options or rows or tags and takes the original option and details as parameters and returns value configurations.

Option Configuration Properties(functions)

<AIOInput
  type='select'
  options={[
    {name:'john',id:'1',gender:'male',color:'#ff0000'},
    {name:'stephan',id:'2',gender:'male',color:'#ffa500'},
    {name:'edvard',id:'3',gender:'male',color:'#ffff00'},
    {name:'luis',id:'4',gender:'male',color:'#9acd32'},
    {name:'carlos',id:'5',gender:'male',color:'#90ee90'}
  ]}
  option={{
    text:(option)=>option.name,
    value:(option)=>option.id,
    before:(option)=><Icon path={option.gender === 'male'?mdiHumanMale:mdiHumanFemale} size={0.8}/>,
    after:(option)=><div style={{color:'#fff',background:option.gender === 'male'?'blue':'pink'}}>{option.gender}</div>,
    subtext:(option)=>option.id,
    checked:(option)=>option.id === selectedUserId,
    checkIcon:()=>[
        <Icon path={mdiCheckboxBlankOutline} size={0.7} color='#ddd'/>,
        <Icon path={mdiCheckboxMarked} size={0.7} color='#5400ff'/>
    ],
    attrs:(option)=>{
      return {
        title:option.name
      }
    },
    className:(option)=>`my-option my-option-${option.gender}`,
    style:(option)=>{
      return {borderBottom:`1px solid ${option.gender === 'male'?'blue':'pink'`}
    },
    disabled:(option)=>option.gender === 'male'
  }}
/>

popover props

• use in this types:
  • select date time
  • text textarea number if set options prop
  • button if you want to set custom popover about button
• An object to configure input popover contain : Property | Type | Default | Description -------- | ---- | ------- | ----------- position | 'fullscreen' or 'center' or 'popover' or 'left' or 'right' or 'top' or 'bottom' | 'popover' | Set popover position setAttrs | function that returns attributes object | undefined | set custom attributes of any parts of popover .it get key is parameter and suitable for each key, returns custom attributes object.avilable values of key is backdrop modal header body footer fitHorizontal | boolean | false | set true to fit width of popover to input width. body | function | undefined | set custom popover for button type. limitTo | string | undefined | set limitTo to open popover in limit of element selected by limitTo selector. fitTo | string | undefined | set fitTo to open popover by exact size of element selected by fitTo selector. header | object contain {attrs:Object,title:string,close:boolean} | undefined | if set title or close, a header content will render in top of popover. title is header title and if close set true , close button will be rendered. for customize header you can set attrs property. all this properties are optional

<AIOInput
   type='button'
   text='My Button'
   popover={{
      position:'center',
      body:({close})=>{
         return <Details/>
      },
      header:{
         title:'My Title',
         subtitle:'My Subtitle',
         onClose:true,
         before:'...any content',
         after:'...any content',
      },
      setAttrs:(key)=>{// key 'backdrop' | 'modal' | 'header' | 'body' | 'footer'
         if(key === 'backdrop'){
            return {
               style:{background:'rgba(0,0,0,0.3)'}
            }
         }
         if(key === 'modal'){
            return {
               //... any attributes
            }
         }
         if(key === 'header'){
            return {
               //... any attributes
            }
         }
         if(key === 'body'){
            return {
               //... any attributes
            }
         }
         if(key === 'footer'){
            return {
               //... any attributes
            }
         }
      },
      fitTo:'...string element selector',
      limitTo:'...string element selector',
      fitHorizontal:true
   }}
/>

multiple props

• use in this types:
  • select radio buttons file slider spinner
• boolean or number :
  • Enables multiple selection mode. If true, allows selecting multiple options. If a number, limits the maximum number of selections.
• enable multiple in select type will generate multiselect input by showing selected tags
• enable multiple in radio type will generate checklist input.
• enable multiple in slider type will generate range slider input by more than one point to select a range of values.

basic example

import AIOInput from "aio-input";
function Example(){
  let [value,setValue] = useState();
  return (
      <AIOInput
          type='text'
          value={value}
          onChange={(newValue)=>setValue(newValue)}
      />
  )
}

other props in type="text"

basic example

import AIOInput from "aio-input";
function Example(){
  let [value,setValue] = useState(0);
  return (
      <AIOInput
          type='number'
          value={value}
          onChange={(newValue)=>setValue(newValue)}
      />
  )
}

other props in type="number"

basic example

import AIOInput from "aio-input";
function Example(){
  let [value,setValue] = useState();
  return (
      <AIOInput
          type='password'
          value={value}
          onChange={(newValue)=>setValue(newValue)}
      />
  )
}

other props in type="password"

basic example

import AIOInput from "aio-input";
function Example(){
  let [value,setValue] = useState();
  return (
      <AIOInput
          type='textarea'
          value={value}
          onChange={(newValue)=>setValue(newValue)}
      />
  )
}

other props in type="textarea"

basic example

import AIOInput from "aio-input";
function Example(){
  let [value,setValue] = useState(false);
  return (
      <AIOInput
          type='checkbox'
          value={value}
          onChange={(newValue)=>setValue(newValue)}
      />
  )
}

other props in type="checkbox"

basic example

import AIOInput from "aio-input";
function Example(){
  let [value,setValue] = useState();
  return (
      <AIOInput
          type='select'
          value={value}
          onChange={(newValue)=>setValue(newValue)}
      />
  )
}

other props in type="select"

basic example

import AIOInput from "aio-input";
function Example(){
  let [value,setValue] = useState([]);
  return (
      <AIOInput
          type='tabs'
          value={value}
          onChange={(newValue)=>setValue(newValue)}
      />
  )
}

other props in type="tabs"

basic example

import AIOInput from "aio-input";
function Example(){
  let [value,setValue] = useState('3');
  return (
      <AIOInput
          type='radio'
          value={value}
          onChange={(newValue)=>setValue(newValue)}
      />
  )
}

other props in type="radio"

radio multiple true

type="buttons"

basic example

import AIOInput from "aio-input";
function Example(){
  let [value,setValue] = useState('2');
  return (
      <AIOInput
          type='buttons'
          value={value}
          onChange={(newValue)=>setValue(newValue)}
      />
  )
}

other props in type="buttons"

multiple buttons

basic example

import AIOInput from "aio-input";
function Example(){
  let [value,setValue] = useState();
  return (
      <AIOInput
          type='date'
          value={value}
          onChange={(newValue)=>setValue(newValue)}
      />
  )
}

other props in type="date"

pattern prop

Specifies the pattern for displaying the date and time in the date input.

Usage

• Use the pattern prop to define the pattern for displaying the date and time in the date input.
• You can use placeholders such as {weekDay}, {day}, {month}, {monthString}, {year}, and {hour} to represent the components of the date and time.

Available placeholders:

• {weekDay}: Full name of the day of the week (e.g., Monday, Tuesday).
• {day}: Day of the month (e.g., 01, 02, ..., 31).
• {month}: Month of the year (e.g., 01, 02, ..., 12).
• {monthString}: Full name of the month (e.g., January, February).
• {year}: Year (e.g., 2022, 2023).
• {hour}: Hour of the day (e.g., 00, 01, ..., 23).

<AIOInput
    type='date'
    value={value}
    onChange={(newValue)=>setValue(newValue)}
    
    pattern='{weekDay} {day} {monthString} {year}'
/>

jalali prop

make jalali calendar.

jalali={true}

unit prop

• month

  unit='month'

  
• day

  unit='day'

  
• hour

  unit='hour'

  

theme prop

set array of 2 colors to design calendar.

theme={['lightblue','#666']}

size prop

set a number to set size of calendar.

size={120}

multiple prop

Enables multiple selection mode. If true, allows selecting multiple dates or times. If a number, limits the maximum number of selections.

multiple={true}

option prop

Specifies custom properties for rendering and controlling each date tag in the multipe mode of datepicker. opton prop is a global prop used in many types . please read documentation of option prop in top of this document.

option={
  text:(date,details)=>`${details.weekDay} ${details.day} ${details.monthString} ${details.year}`,//change text of date tag
  close:(date,details)=>true,//close popover after seleting date
  tagAttrs:(date,details)=>{//set custom attributes of date tag
    return {
      style:{background:'orange'}
    }
  },
  tagBefore:(date,details)=><Icon/>,//any contetn before tags
  tagBefore:(date,details)=>'any cvontent',//any contetn after tags,
  ....
  //and other properties of public option prop
}

dateAttrs prop

The dateAttrs prop allows you to customize the attributes of each date element in the calendar. It is a function that receives an object with properties dateArray, isToday, isActive, and isMatch.

also you can disabled each date element for prevent select by user

Here's what each property represents:

• dateArray : An array containing the year, month, day and hour of the date.
• isToday : A boolean indicating whether the date is today's date.
• isActive : A boolean indicating whether the date is currently selected or active.
• isMatch : A boolean indicating whether the date matches any predefined criteria.

The dateAttrs function should return an object with styles to apply to the date element. Depending on your use case, you can customize the styles of each date element based on these properties. For example, you can change the background color of today's date or disable specific dates.

Here's an example of how you can use the dateAttrs prop:

dateAttrs={({ dateArray, isToday, isActive, isMatch }) => {
    let styles = {};
    if (isToday) {
        styles.background = 'orange';
    }
    return { style: styles };
}}

in this example today element will get background orange

dateAttrs={({ dateArray, isToday, isActive, isMatch }) => {
    if (isActive) {
        return {
          className:'active-date'
        }
    }
}}

in this example active date element will get className:'active-date'

isMatch function parameter in dateAttrs Prop function.

The isMatch function within the dateAttrs prop allows you to define custom logic to match specific date elements in the calendar based on various conditions. It takes an array of strings representing date comparison conditions and returns true if any of the conditions are met for the current date element.

dateAttrs={({ isMatch }) => {
    if (isMatch(['<,2022/02/03'])) {
        return { color: 'red' };
    }
    if (isMatch(['<>,2022/03/03,2023/04/05'])) {
        return { disabled: true };
    }
}}

Date Comparison Conditions

Each string in the array represents a date comparison condition in the format 'operator,date1,date2':

Operators

The comparison operator

<AIOInput
    type='date'
    value={value}
    onChange={(newValue) => setValue(newValue)}
    dateAttrs={({ isMatch }) => {
        let attrs = {}
        if (isMatch(['<,2022/02/03'])) {
            attrs.style = { color: 'red' };
        }
        if (isMatch(['<>,2022/03/03,2023/04/05'])) {
            attrs.style = { color: 'orange' };
        }
        if(isMatch([>,2024/4/5])){
          attrs.disabled = true
        }
        return attrs
    }}
/>

In this example:

• Dates before February 3, 2022, will have the color red.
• Dates between March 3, 2022, and April 5, 2023, will have the color orange.
• Dates after 2024/4/5 will be disabled

option prop

this will cause to close popover after select date.

option={{
  close:true
}}

basic example

import AIOInput from "aio-input";
function Example(){
  let [value,setValue] = useState({year:2022,month:4,day:12});
  return (
      <AIOInput
          type='time'
          value={value}
          unit={{year:true,month:true,day:true}}
          onChange={(newValue)=>setValue(newValue)}
      />
  )
}

other props in type="time"

unit prop

<AIOInput
    type='time'
    value={value}
    onChange={(newValue)=>setValue(newValue)}
    
    unit='hour,minute,second'
/>

<AIOInput
    type='time'
    value={value}
    onChange={(newValue)=>setValue(newValue)}
    unit='year,month,day'
/>

basic example

import AIOInput from "aio-input";
function Example(){
  let [value,setValue] = useState('https://imgv3.fotor.com/images/blog-cover-image/part-blurry-image.jpg');
  return (
      <AIOInput
          type='image'
          value={value}
          onChange={(newValue)=>setValue(newValue)}
      />
  )
}

other props in type="image"

basic example

import AIOInput from "aio-input";
function Example(){
  let [value,setValue] = useState();
  return (
      <AIOInput
          type='file'
          value={value}
          onChange={(newValue)=>setValue(newValue)}
      />
  )
}

other props in type="image"