prefix-custom-components v1.0.6

prefix-components

All prefix components and hooks for react.

Install

npm i prefix-custom-components

Usage

Hooks

import { Hooks } from 'prefix-custom-components'

const {
  updateObject,
  updateArray,
  shortArray,
  getIndexBy,
  shortNameGenerate,
  UseWindowSize
} = Hooks

const { height, width } = UseWindowSize() // return window height and width

let OldObj = { name: 'Nimesh Deuja' }
let UpdatedObj = updateObject(OldObj, { age: 32 }) // return {name: 'Nimesh Deuja', age: 32} -- Object

let OldArr = [{ name: 'Nimesh Deuja', age: 32 }]
let UpdatedArr = updateArray(OldArr, {
  name: 'Abhisekh Deoja',
  age: 34
}) // return [{name: 'Nimesh Deuja', age: 32},{name: 'Abhisekh Deoja',age: 34}] -- Array

let ShortedArr = shortArray(UpdatedArr, 'name', 'ASC') // return [{name: 'Abhisekh Deoja',age: 34},{name: 'Nimesh Deuja', age: 32}] -- Array

let index = getIndexBy(ShortedArr, 'age', 34) // return 0 -- Number

let shortName = shortNameGenerate('Nimesh Deuja') // return ND -- String

Dialog

import { PopupBox } from 'prefix-custom-components'
;<PopupBox
  theme='danger' // *String* options 'danger', 'primary', 'secondary'
  size='sm'  // *String* options 'xs', 'sm', 'md', 'lg', 'xl'
  close={()=>}  // *function* close popup functions
  open={true}  // *Boolean*
  title='Popup box' // *String*
  isMultipleButton={false}  // *Boolean*
>
  <div className='body'>
    body
  </div>
  <div className='footer'>
    Footer
  </div>
</PopupBox>

Tooltips

import { Tooltips } from 'prefix-custom-components'
;<Tooltips
  title='Tooltip title' // *String*
  placement='left' // *String* options 'left', 'right', 'top', 'bottom'
>
  Text
</Tooltips>

Button

import { Button } from 'prefix-custom-components'
<Button
  type='button'  // *String*  options 'button', 'submit'
  theme='secondary' // *String* options 'danger', 'primary', 'secondary'
  clicked={()=>}  // *function* clicked event
  fullWidth={true} // *Boolean*
  disabled={false} // *Boolean*
  radius={4} // *Number*
  className='myClass' // *String*
>
  Close
</Button>

Autocomplete

import { AutoComplete } from 'prefix-custom-components'
<AutoComplete
  list={[
    { id: 1, name: 'Nimesh' },
    { id: 2, name: 'Abhisekh' }
  ]} // Array should have id, name and logo if waht to display icon
  changed={(item) =>} // *function* change event
  label='Select Option' // *String*
  multiple={true} // *Boolean*
  value={''} // if multiple default value shuild be [] otherwise value should be ''
  marginBottom={true} // *Boolean*
  marginTop={false} // *Boolean*
  clearable={false} // *Boolean*
  noOptionsText='List is empty' // *String*
  size='medium' // *String* options 'small', 'medium', 'large'
  variant='outlined' // *String* options 'outlined'
  autoComplete='never-on' // *String*
  error={false} // *Boolean*
  className='myClass' // *String*
/>

Input

import { useState } from 'react'
import { CheckValidity, Hooks } from 'prefix-custom-components'

const { updateObject } = Hooks

const [formIsValid, setFormIsValid] = useState(false)
const [allForm, setAllForm] = useState({
  name: {
    elementType: 'input',
    elementConfig: {
      type: 'text',
      placeholder: 'Name'
    },
    label: 'Name',
    value: '',
    validation: {
      required: true,
      min: 6,
      max: 30
    },
    valid: false,
    touched: false
  },
  surname: {
    elementType: 'select',
    elementConfig: {
      options: [
        { id: 1, name: 'Deuja' },
        { id: 2, name: 'Deoja' }
      ]
    },
    label: 'Surname',
    value: '',
    validation: {
      required: false
    },
    valid: false,
    touched: false
  },
  sendEmail: {
    elementType: 'checkbox',
    elementConfig: {
      type: 'switch' // switch , checkbox
    },
    label: 'Send back email',
    value: true,
    validation: {},
    valid: true,
    touched: false
  },
  feedback: {
    elementType: 'textarea',
    elementConfig: {
      type: 'text',
      placeholder: 'Feedback'
    },
    label: 'Feedback',
    value: '',
    validation: {
      required: true,
      min: 6,
      max: 100
    },
    valid: false,
    touched: false
  }
})

const inputChangedHandler = (event, controlName) => {
  let currentValue = event.target.value
  if (controlName === 'sendEmail') currentValue = event.target.checked
  let updatedForm = updateObject(allForm, {
    [controlName]: updateObject(allForm[controlName], {
      value: currentValue,
      valid: CheckValidity(currentValue, allForm[controlName].validation),
      touched: true
    })
  })

  let isValidForm = true

  for (let inputIdentifier in updatedForm) {
    isValidForm = updatedForm[inputIdentifier].valid && isValidForm
  }

  setAllForm(updatedForm)
  setFormIsValid(isValidForm)
}

const formElementsArray = []
for (let key in allForm) {
  formElementsArray.push({
    id: key,
    config: allForm[key]
  })
}

const submitClickHandler = (event) => {
  event.preventDefault()
  const toSend = {}
  for (let key in allForm) {
    toSend[key] = allForm[key].value
  }
}

// jsx
;<form onSubmit={submitClickHandler}>
  {formElementsArray.map((formElement) => (
    <Input
      key={formElement.id}
      elementType={formElement.config.elementType}
      elementConfig={formElement.config.elementConfig}
      label={formElement.config.label}
      value={formElement.config.value}
      changed={(event) => inputChangedHandler(event, formElement.id)}
      invalid={!formElement.config.valid}
      shouldValidate={formElement.config.validation ? true : false}
      touched={formElement.config.touched}
      noMargin={formElement.config.noMargin}
      className={formElement.config.className}
    />
  ))}
</form>

Datepicker

import { DatePick } from 'prefix-custom-components'
<DatePick
  inputVariant='outlined' // *String* options 'outlined'
  isReport={false} // *Boolean*
  label='Date of birth'// *String*
  className='myClass'// *String*
  min={new Date()}// max={new Date()}
  value={new Date()}// *String*
  changed={(item) =>}// *function* change event
  size='medium'// *String* options 'small', 'medium', 'large'
  noMaxDate={true}// *Boolean*
/>

Auther

Nimesh Deuja