Import React, {PureComponent} from 'react' import {change, WrappedFieldProps} from 'redux-form' import {InjectedIntlProps}

Question

Import React, {PureComponent} from 'react' import {change, WrappedFieldProps} from 'redux-form' import {InjectedIntlProps}

from 'react-intl'
import Select from 'react-select'
import {OptionsType} from 'react-select/lib/types'
import {Text} from 'appComponents'
import {showWarning} from 'utilities'

export type SelectOption<E = {id: number}> = E & {label: string, value: string | number}
export type SelectOptions<O = {}> = OptionsType<SelectOption<O>>

type Props = WrappedFieldProps & InjectedIntlProps & {
defaultValue: SelectOption,
className: string,
required: boolean,
isDisabled: boolean,
htmlFor: string,
label: string,
autoFocus: boolean,
options: SelectOptions,
placeholder?: string,
localize?: boolean,
isSearchable?: boolean,

onChange: (value: SelectOption) => void
}

export class InputSelect extends PureComponent<Props, {}> {
componentWillUnmount() {
if (this.props.meta && this.props.meta.dispatch) {
this.props.meta.dispatch(change(this.props.meta.form, this.props.input.name,null))
}
}

componentWillReceiveProps(nextProps: Props) {
if (!this.props.defaultValue && nextProps.defaultValue && nextProps.defaultValue.value) {
this.onChange(nextProps.defaultValue)
}
}

componentDidMount() {
if (this.props.defaultValue) {
this.onChange(this.props.defaultValue)
}
}

onChange = (value: SelectOption) => {
const {input, onChange} = this.props

if (input) {
input.onChange(value)
input.onBlur(value)
}
if (onChange) {
onChange(value)
}
}

checkValue = () => {
const {localize, input} = this.props
if (localize && (input && input.value)) {
return {
...input.value,
label: <Text text={input.value.label} type="bare"/>,
value: input.value.value
}
} else if (input && input.value) {
return input.value
} else {
return
}
}

select = (classNames: string) => {
const {placeholder = 'select', autoFocus, options, localize} = this.props

return (
<Select
{...this.props}
menuRenderer={() => showWarning('No menuRenderer handler in InputSelect')}
placeholder={placeholder && ((<Text text={placeholder} type="bare" /> as unknown) as string)}
classNamePrefix={classNames}
autoFocus={autoFocus}
options={options.map(option => ({
...option,
label: localize ? <Text text={option.label} type="bare"/> : option.label,
value: option.value
}))}
value={this.checkValue()}
// @ts-ignore
onChange={this.onChange}
noOptionsMessage={() => (<Text text="noData" type="bare"/> as unknown) as string}
/>
)
}

input = () => {
const {className, meta, required, input, isDisabled} = this.props

let classNames = className ? ${className} react-select : 'react-select'

// подсказка ошибок
if (meta && meta.error && meta.touched) {
classNames += ' validation__select-error'
}

return input
? (
<div className={form__validation${isDisabled ? ' disabled' : ''}}>
{this.select(classNames)}

{required && !meta.touched ? <div className="validation__input-required"/> : null}
</div>
)
: this.select(classNames)
}

render() {
const {htmlFor, input, label} = this.props

return label
? (
<div className="form__label">
<label htmlFor={htmlFor || input.name}>
{<Text text={label} type="label"/>}
</label>
{this.input()}
</div>
)
: (
this.input()
)
}
}