Versions Compared

Old Version 2

changes.mady.by.user mariel.quibal

Saved on

compared with

New Version Current

changes.mady.by.user Dio Danganan

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Description

Image Removed

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

...

Image Added

...

The package can be installed via npm empower-inputs:

Code Block
npm i empower-inputs
Code Block
import { SelectWithProfileSelectWithLinks } from 'empower-inputs';

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


const sampleSelectWithProfilesampleSelectWithLinks = {
    id: 'selectTalentlink',
    type: 'multi-select',
    options: [
      {
        employee_codecategory: '8WzFa_veynqMfD9h'"Csa",
        employee_bucket_code: 'BCKT-00001',
        employee_name: "Annie Ruth Suficiencialabel: "Sample 1 Links",
        employee_profile_piclink: "r8gbRpma2erKC0VZmhrsK8ko5TnDlLWZUOgOYM0DSOMz2BhoUXvdcTOB9KeIxTrj.jpg/sample-1",
        employee_position: 'QA Analyst',value: "sample-1"
        employee_email: 'annie.suficiencia@empowerteams.io'
      },
      {
        employee_codecategory: '20-0520'"Csa",
        employee_bucket_code: 'BCKT-00001',
        employee_namelabel: "ClaroSample Abelardo2 LagmanLinks",
        employee_profile_piclink: "DLyv4BQMrGeNYLHWueWGjSe3mHXXlhT7mzYa9tzJgJ45BMdy04D5qwhOVk1hzoUd.jpeg/sample-2",
        employee_positionvalue: 'Experience Manager',"sample-2"
    
    employee_email: 'claro.lagman@empowerteams.io'
      },
      {
        employee_codecategory: '9shB7xW6Mm_tCFvP'"Csa",
        employee_bucket_code: 'BCKT-00001',
        employee_name: "Cristopher John Barrabalabel: "Sample 3 Links",
        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"link: "/sample-3",
        employee_profile_picvalue: "FBeHzK52TQrxgaJejCOFobiqvEOHAFc3Slz4Czx8b9nPjljvQRhAWIMNM3zdBuKp.jpg",
        employee_position: 'Sr. Business Analyst',sample-3"
          employee_email: 'crystal.mena@empowerteams.io'
      }
    ],
    placeholder: 'SelectSearch for employeedeals',
    label: "Sample Select With ProfileLinks",
    value: [],
    disabled: false,
    required: true,
    isMultiple: false
}

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

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

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

Parameter

Data Type

Constraint

Description

id

String

Required

Set It set the id for the select.

type

String

Required

Set It set the type of component to display if multiple select drop down will be use.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:

  • employee_code

  • employee_bucket_code

  • employee_name

  • employee_profile_pic

  • employee_position

  • employee_email

  • category (String)

  • label (String)

  • link (String)

  • value (String)

placeholder

String

Optional

Set It displays the placeholder of the select.

label

String

Optional

Set It displays the title/ label of the select.

value

Array

Required

Set It sets the value that selected in drop down.

disabled

Boolean

Optional

Set It sets if the select is should be disable or not.

required

Boolean

Optional

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

isMultiple

Boolean

Required

It sets if the component is multiple select.

Repository Link: https://gitlabbitbucket.comorg/empowerteams/empower-custom-inputs.git/src/master/

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

...