@dwello.in/react-components

A collection of components used across Dwello applications.

Install

npm install --save @dwello.in/react-components

Components

1) Universal Dropdown

Description

The UniversalDropdown component is a versatile dropdown component that can be used for both single-select and multi-select dropdowns. It supports both static and dynamic data fetching.

Usage

Here's an example of basic usage:

import React, { useState } from 'react'
import { UniversalDropdown } from '@dwello.in/react-components'
import '@dwello.in/react-components/dist/index.css'

const ExampleComponent = () => {
  const [selectedOption, setSelectedOption] = useState([])
  const [dropdownOptions, setDropdownOptions] = useState([])

  const onSearch = (text) => {
    // API call to search based on the text
  }

  const onAdd = (val, index) => {
    // Handle adding a option
  }

  const onRemove = (val, index) => {
    // Handle removing a option
  }

  return (
    <UniversalDropdown
      dropDownOptions={dropdownOptions}
      selectedOptions={selectedOption}
      inputName='inputName'
      isMultiSelect={true}
      isApiCall={true}
      displayKey='objectName'
      onSearch={onSearch}
      onSelect={onAdd}
      onDelete={onRemove}
      onReset={() => setDropdownOptions(null)}
      suffix=''
      prefix=''
      isMandatory={true}
      active={true}
    />
  )
}

export default ExampleComponent

Props

| Name | Required | Type | Default | Description | | :---------------- | :------------------------------------------------------------------------------------------ | :-------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | dropDownOptions | Yes | Array | | An array representing the options available in the dropdown. | | selectedOptions | Yes | Array or object or string | | The currently selected options. | | inputName | Yes | String | | The name attribute for the input field used in forms. | | isMultiSelect | Yes | Boolean | | A boolean indicating whether multiple selections are allowed. If true, users can select multiple options; otherwise, only one option can be selected at a time. | | onSelect | No | Function | | A callback function that gets triggered when an option is selected. The function receives the selected option as its argument. | | onDelete | No | Function | | A callback function that gets triggered when a selected option is removed. The function receives the deleted option as its argument. | | isApiCall | No | Boolean | false | A boolean indicating whether the dropdown options are fetched from an API call. If true, the component will handle fetching options from an API endpoint. | | isMandatory | No | Boolean | false | A boolean indicating whether selecting an option is mandatory. If true, * will be added | | active | No | Boolean | true | A boolean indicating whether the dropdown is active (open) or not. This can be used to programmatically control the dropdown's visibility. | | displayKey | Yes, when dropDownOptions are passed as array of objects. or selected options as an object. | String | | The key in the option objects that should be displayed as the option label in the dropdown. | | suffix | No | String | | A string to be appended to the selected option(s) label for display purposes. | | prefix | No | String | | A string to be prepended to the selected option(s) label for display purposes. | | onSearch | Yes, when isApiCall is true. | Function | | A callback function that gets triggered when a search is performed within the dropdown. This is useful for filtering the options based on user input. The function receives the search query as its argument. | | onReset | Yes, when isApiCall is true. | Function | | A callback function that gets triggered when the dropdown need to reset, clearing all selections. This can be used to reset the dropdown to null. |

Validations

The UniversalDropdown component includes built-in error handling to ensure required props are provided and correctly typed:

* If isMultiSelect is true, selectedOptions must be an array.
* If isMultiSelect is false, selectedOptions must be a string or an object.
* displayKey is required when the dropDownOptions are passed as array of objects.
* displayKey is required when the selectedOptions is an object.
* onSearch, onReset is required when isApiCall is true.
* search bar will appear when isApiCall is true or the dropDownOptions are greater than 5.
This validation ensures that the component is used correctly and helps prevent runtime errors.

Examples

Example for MultiSelect

const ExampleComponent = () => {
  const [dropdownOptions, setdropdownOptions] = useState([
    { objectName: 'option1' },
    { objectName: 'option2' },
    { objectName: 'option3' }
  ])
  const [selectedOption, setSelectedOption] = useState(['option1'])

  const onAdd = (val, index) => {
    // Handle adding a option
  }

  const onRemove = (val, index) => {
    // Handle removing a option
  }

  return (
    <UniversalDropdown
      dropDownOptions={dropdownOptions} // always should be an array
      selectedOptions={selectedOption} // should be an array
      inputName='inputName'
      isMultiSelect={true}
      displayKey='objectName' // to display the key objectName in dropdownOptions
      onSelect={onAdd}
      onDelete={onRemove}
    />
  )
}

Example for SingleSelect

const ExampleComponent = () => {
  const [dropdownOptions, setdropdownOptions] = useState([
    'option1',
    'option2',
    'option3'
  ])
  const [selectedOption, setSelectedOption] = useState(null)

  const onAdd = (val, index) => {
    // Handle adding a option
  }

  const onRemove = (val, index) => {
    // Handle removing a option
  }

  return (
    <UniversalDropdown
      dropDownOptions={dropdownOptions} // always should be an array
      selectedOptions={selectedOption} // should be an string or object
      inputName='inputName'
      isMultiSelect={false}
      onSelect={onAdd}
      onDelete={onRemove}
    />
  )
}

Example for isApiCall is true

const ExampleComponent = () => {
  const [dropdownOptions, setdropdownOptions] = useState([
    'option1',
    'option2',
    'option3'
  ])
  const [selectedOption, setSelectedOption] = useState(null)

  const onSearch = (text) => {
    // API call to search based on the text
  }

  const onAdd = (val, index) => {
    // Handle adding a option
  }

  const onRemove = (val, index) => {
    // Handle removing a option
  }

  return (
    <UniversalDropdown
      selectedOptions={selectedOptions}
      dropDownOptions={dropdownOptions}
      inputName='inputName'
      isMultiSelect={false}
      isApiCall={true}
      displayKey='objectName'
      onSelect={onAdd}
      onDelete={onRemove}
      onSearch={(text) => onSearch(text)} // onSearch prop required when isApiCall is true
      onReset={() => {
        setdropdownOptions(null) // onReset prop required when isApiCall is true
      }}
    />
  )
}

2) ActionButton Overview

ActionButton is a customizable React component designed to create a button with various styling and behavior options. It allows developers to easily integrate a button with custom styles and handle click events conditionally based on its active state.

Usage

import React, { Component } from 'react'
import { ActionButton } from '@dwello.in/react-components'
import '@dwello.in/react-components/dist/index.css'
class Example extends Component {
  render() {
    return (
      <ActionButton
        title='Submit'
        onClick={() => {
          console.log('action handler')
        }}
        active={true}
        activeColor='#fff'
        inActiveColor='#757575'
        activeBgColor='#80C341'
        inActiveBgColor='#FFFFFF'
        activeBorderColor='transparent'
        inActiveBorderColor='lightgray'
        fontWeight='bold'
        borderStyle='solid'
        borderRadius='20px'
        paddingTop='7px'
        paddingBottom='7px'
        paddingLeft='20px'
        paddingRight='20px'
        hoverBgColor='red'
        hoverTextColor='green'
        webFontSize='16px'
        webLineHeight='23px'
        mobileFontSize='14px'
        mobileLineHeight='21px'
      />
    )
  }
}

API Reference

Props

| Prop | Required | Type | Default | Description | | :-------------------- | :------- | :------- | :------------ | :---------------------------------------------------- | | title | Yes | string | null | The text displayed on the button. dropdown. | | onClick | Yes | func | null | The function to be called when the button is clicked. | | active | No | bool | true | Determines if the button is active or inactive. | | activeColor | No | string | #ffffff | Text color when the button is active. | | inActiveColor | No | string | #757575 | Text color when the button is inactive. | | activeBgColor | No | string | #80C341 | Background color when the button is active. | | inActiveBgColor | No | string | #ffffff | Background color when the button is inactive. | | activeBorderColor | No | string | transparent | Border color when the button is active. | | inActiveBorderColor | No | string | lightgray | Border color when the button is inactive. | | activeBorderWidth | No | String | 0px | Border width when the button is active. | | inActiveBorderWidth | No | String | 1px | Border width when the button is inactive. | | fontWeight | No | String | bold | Font weight of the button text. | | borderStyle | No | String | solid | Border style of the button. | | borderRadius | No | string | 20px | Border radius of the button. | | paddingTop | No | string | 7px | Padding Top of the button. | | paddingBottom | No | string | 7px | Padding Bottom of the button. | | paddingLeft | No | string | 20px | Padding Left of the button. | | paddingRight | No | string | 20px | Padding Right of the button. | | hoverBgColor | No | string | null | Background color when the active button is hovered. | | hoverTextColor | No | string | null | Text color when the active button is hovered. | | webFontSize | No | string | 16px | Font size of button title for web. | | webLineHeight | No | string | 23px | Line height of button title for web. | | mobileFontSize | No | string | 14px | Font size of button title for Mobile. | | mobileLineHeight | No | string | 21px | Line height of button title for Mobile. |

Error Handling

 The component includes internal checks to ensure required props are provided and are of the correct type. If a required prop is missing or a prop has an incorrect type, an error will be thrown.

License

MIT © MIT ©