Select with Profile

Description

System Dependencies

Installation

The package can be installed via empower-inputs:

npm i empower-inputs

Configuration

import { SelectWithProfile } from 'empower-inputs';

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


const sampleSelectWithProfile = {
    id: 'selectTalent',
    type: 'multi-select',
    options: [
      {
        employee_code: '8WzFa_veynqMfD9h',
        employee_bucket_code: 'BCKT-00001',
        employee_name: "Annie Ruth Suficiencia",
        employee_profile_pic: "r8gbRpma2erKC0VZmhrsK8ko5TnDlLWZUOgOYM0DSOMz2BhoUXvdcTOB9KeIxTrj.jpg",
        employee_position: 'QA Analyst',
        employee_email: 'annie.suficiencia@empowerteams.io'
      },
      {
        employee_code: '20-0520',
        employee_bucket_code: 'BCKT-00001',
        employee_name: "Claro Abelardo Lagman",
        employee_profile_pic: "DLyv4BQMrGeNYLHWueWGjSe3mHXXlhT7mzYa9tzJgJ45BMdy04D5qwhOVk1hzoUd.jpeg",
        employee_position: 'Experience Manager',
        employee_email: 'claro.lagman@empowerteams.io'
      },
      {
        employee_code: '9shB7xW6Mm_tCFvP',
        employee_bucket_code: 'BCKT-00001',
        employee_name: "Cristopher John Barraba",
        employee_profile_pic: "MfYggj5oHGckWp9xo52X63PimoqZXYe2LfnMHWif5hq7hXtRXOiLMcjnHZafcbmk.jpg",
        employee_position: 'QA Analyst',
        employee_email: 'cristopher.barraba@empowerteams.io'
      },
      {
        employee_code: '19-1244',
        employee_bucket_code: 'BCKT-00001',
        employee_name: "Crystal Joy Mena",
        employee_profile_pic: "FBeHzK52TQrxgaJejCOFobiqvEOHAFc3Slz4Czx8b9nPjljvQRhAWIMNM3zdBuKp.jpg",
        employee_position: 'Sr. Business Analyst',
        employee_email: 'crystal.mena@empowerteams.io'
      }
    ],
    placeholder: 'Select employee',
    label: "Sample Select With Profile",
    value: [],
    disabled: false,
    required: true
}

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

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

 <SelectWithProfile
    config={sampleSelectWithProfile}
    onChanged={(e) => inputChangedHandler(e, 'sampleSelectWithProfile')}
 />

Properties

Parameter	Data Type	Constraint	Description

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	It sets the data to display in the drop down selection. It should consist of: employee_code (String) employee_bucket_code (String) employee_name (String) employee_profile_pic (String) employee_position (String) employee_email (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 ('*').

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