Select with Links

🔹 Description

A component wherein a user can select specific item or items from a range of options.

🔹System Dependencies

🔹 Installation

The package can be installed via https://www.npmjs.com/package/empower-inputs:

npm i empower-inputs

?? Configuration

import { SelectWithLinks } from 'empower-inputs';

.....................................

const sampleSelectWithLinks = {
    id: 'link',
    type: 'multi-select',
    options: [
      {
        category: "Csa",
        label: "Sample 1 Links",
        link: "/sample-1",
        value: "sample-1"
    
      },
      {
        category: "Csa",
        label: "Sample 2 Links",
        link: "/sample-2",
        value: "sample-2"
    
      },
      {
        category: "Csa",
        label: "Sample 3 Links",
        link: "/sample-3",
        value: "sample-3"
      }
    ],
    placeholder: 'Search for deals',
    label: "Sample Select With Links",
    value: [],
    disabled: false,
    required: true,
    isMultiple: false
}

..................................

const inputChangedHandler = (val, key) => {
    console.log('VAL', val)
    console.log('KEY', key)
}

 <SelectWithLinks
    config={sampleSelectWithLinks}
    onChanged={(e: any) => inputChangedHandler(e, 'sampleSelectWithLinks')}
  />

🔹 Properties

Parameter	Data Type	Constraint	Description
id	String	Required	It set the id for the select.
type	String	Required	It set the type of component to be use options: multiple-select (String) select (String)
options	Array	Required	Set the data to display in the drop down selection. It should consist of: category (String) label (String) link (String) value (String)
placeholder	String	Optional	It displays the placeholder of the select.
label	String	Optional	It displays the label of the select.
value	Array	Required	It sets the value selected in drop down.
disabled	Boolean	Optional	It sets if the select should be disable or not.
required	Boolean	Optional	It sets to display asterisk ('*').
isMultiple	Boolean	Required	It sets if the component is multiple select.

🔹 References

Repository Link: https://bitbucket.org/empowerteams/empower-custom-inputs/src/master/

NPM Package: https://www.npmjs.com/package/empower-inputs

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git