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 4 Next »

🔹 Description

Description

🔹System Dependencies

🔹 Installation

The package can be installed via npm:

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

id

String

Required

Set the id for the select.

type

String

Required

Set the component to display if multiple select drop down will be use.

options

Array

Required

Set 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

Set the placeholder of the select.

label

String

Optional

Set the title/label of the select

value

Array

Required

Set the value that selected in drop down.

disabled

Boolean

Optional

Set if the select is disable or not.

required

Boolean

Optional

Set to display asterisk ('*') or not.

🔹 References

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

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

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

  • No labels