64 lines
1.3 KiB
TypeScript
64 lines
1.3 KiB
TypeScript
import type { ChangeEvent, RefObject } from 'react';
|
|
import type { FC } from '../../lib/teact/teact';
|
|
import React, { memo } from '../../lib/teact/teact';
|
|
|
|
import buildClassName from '../../util/buildClassName';
|
|
|
|
type OwnProps = {
|
|
id?: string;
|
|
value?: string;
|
|
label?: string;
|
|
error?: string;
|
|
ref?: RefObject<HTMLSelectElement>;
|
|
hasArrow?: boolean;
|
|
placeholder?: string;
|
|
tabIndex?: number;
|
|
onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
const Select: FC<OwnProps> = (props) => {
|
|
const {
|
|
id,
|
|
value,
|
|
label,
|
|
hasArrow,
|
|
error,
|
|
ref,
|
|
placeholder,
|
|
tabIndex,
|
|
onChange,
|
|
children,
|
|
} = props;
|
|
const labelText = error || label;
|
|
const fullClassName = buildClassName(
|
|
'input-group',
|
|
value && 'touched',
|
|
error && 'error',
|
|
labelText && 'with-label',
|
|
hasArrow && 'with-arrow',
|
|
'input-group',
|
|
);
|
|
|
|
return (
|
|
<div className={fullClassName}>
|
|
<select
|
|
className="form-control"
|
|
id={id}
|
|
value={value || ''}
|
|
onChange={onChange}
|
|
placeholder={placeholder || label}
|
|
tabIndex={tabIndex}
|
|
ref={ref}
|
|
>
|
|
{children}
|
|
</select>
|
|
{labelText && id && (
|
|
<label htmlFor={id}>{labelText}</label>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(Select);
|