Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

🔹 Description

To follow

🔹System Dependencies

🔹 Installation

The package can be installed via npm:

npm install empower-inputs --save

🔹 Standard Select

Configuration

import { InputSelectionHandler} from 'empower-inputs';

let [formElement, setFormElement] = useState({
 sampleMultiSelect: {
      id: 'sampleMultiSelect',
      type: 'multi-select',
      placeholder: 'Please select multiple option',
      value: [],
      disabled: false,
      options: [
          {
            label: "Leave",
            value: "file-leave",        
        
          },
          {
            label: "Overtime",
            value: "file-overtime",        
        
          },
          {
            label: "DTR Amendment",
            value: "file-amendment",        
        
          },
          {
            label: "Change Shift",
            value: "view-shift-schedule",     
          },
        ]
    }
});
..............

return (
    <>
      <h4>MULTI-SELECT</h4>
      <InputSelectionHandler
        config={formElement.sampleMultiSelect}
        customClass="multi-select-custom-class"
        onChanged={(e: any) => inputChangedHandler(e, 'sampleMultiSelect')}
      />
    </>
  )

🔹 Multi- Select with Group Option

Configuration

let [formElement, setFormElement] = useState<IState['formElement']>({
sampleMultiSelectGroupOption: {
      id: 'sampleMultiSelectGroupOption',
      type: 'multi-select',
      placeholder: 'Please select multiple option',
      value: [],
      disabled: false,
      options: {
          'sample-group-1': {
            label: 'Sample Group 1',
            options: [
              {
                label: 'Option 1',
                value: 'option-1'
              },
              {
                label: 'Option 2',
                value: 'option-2'
              },
            ]
          },
          'sample-group-2': {
            label: 'Sample Group 2',
            options: [
              {
                label: 'Option 3',
                value: 'option-3'
              },
              {
                label: 'Option 4',
                value: 'option-4'
              },
            ]
          },
          'sample-group-3': {
            label: 'Sample Group 2',
            options: [
              {
                label: 'Option 5',
                value: 'option-5'
              },
              {
                label: 'Option 6',
                value: 'option-6'
              },
            ]
          }
        }
    }
});

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

return (
    <>
      <h4>MULTI-SELECT GROUP OPTIONS</h4>
      <InputSelectionHandler
        config={formElement.sampleMultiSelectGroupOption}
        customClass="multi-select-group-options-custom-class"
        onChanged={(e: any) => inputChangedHandler(e, 'sampleMultiSelectGroupOption')}
      />
    </>
  )

🔹  Properties

Parent Parameter

Sub Parameter

Data Type

Constraint

config

JSON Object

Required

id

String

Required

type

String

Required

label

String

Optional

value

Array Object

Required

placeholder

String

Optional

readOnly

Boolean

Optional

required

Boolean

Boolean

disabled

Boolean

Boolean

options

Array Object

Required

info

JSON Object | String

Optional

customClass

String

Optional

onChanged

Event Method

Required

🔹 References

Repository Link: https://gitlab.com/empowerteams/empower-inputs.git

NPM Package: npm: empower-inputs

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

  • No labels