PHP Classes

File: src/components/inputs/Select2Input.tsx

Recommend this page to a friend!
  Classes of Maniruzzaman Akash   WordPress React Plugin Kit   src/components/inputs/Select2Input.tsx   Download  
File: src/components/inputs/Select2Input.tsx
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: WordPress React Plugin Kit
Environment to develop new WordPress plugins
Author: By
Last change:
Date: 2 years ago
Size: 3,441 bytes
 

Contents

Class file image Download
/** * External dependencies */ import Select from 'react-select'; import makeAnimated from 'react-select/animated'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import { formatSelect2Data, getSelectedOption, } from '../../utils/Select2Helper'; export interface Select2SingleRow { /** * Select2 option label. */ label: string; /** * Select2 option value. */ value: string; } export interface ISelect2Input { /** * Select2 options. */ options: Array<Select2SingleRow>; /** * Placeholder text. */ placeholder?: string; /** * Is Multi-Select or not. */ isMulti?: boolean; /** * Default selected value. */ defaultValue?: any; /** * On change select2 input. */ onChange?: (val: any) => void; } const Select2Input = (props: ISelect2Input) => { const { options, isMulti, placeholder, defaultValue, onChange } = props; const animatedComponents = makeAnimated(); const styles = { container: (base: any) => ({ ...base, width: '100%', height: '100%', margin: '0', padding: '0', border: 'none', borderRadius: '0', boxShadow: 'none', backgroundColor: 'transparent', '&:hover': { border: 'none', boxShadow: 'none', backgroundColor: 'transparent', }, }), control: (base: any, state: any) => ({ ...base, borderColor: state.isFocused ? '#787878' : '#dddddd', boxShadow: 'none', '&:hover': { borderColor: '#787878', }, height: '28px', minHeight: '36px', fontSize: '12px', }), menuList: (base: any) => ({ ...base, width: 'auto', minWidth: '200px', backgroundColor: '#FFFFFF', fontSize: '12px', }), multiValueLabel: (base: any) => ({ ...base, color: '#787878', fontWeight: 'normal', }), valueContainer: (base: any) => ({ ...base, padding: '0', cursor: 'pointer', paddingLeft: '12px', }), indicatorSeparator: (base: any) => ({ ...base, marginLeft: '10px', }), }; return ( <Select styles={styles} components={animatedComponents} options={formatSelect2Data(options)} isMulti={isMulti} value={ isMulti ? formatSelect2Data(defaultValue) : getSelectedOption(options, defaultValue) } defaultValue={ isMulti ? formatSelect2Data(defaultValue) : getSelectedOption(options, defaultValue) } placeholder={ placeholder ? placeholder : __('-- Select --', 'jobplace') } onChange={(value) => { if (typeof onChange === 'function') { onChange(value); } }} /> ); }; Select2Input.defaultProps = { options: [], placeholder: '', isMulti: false, }; export default Select2Input;