forked from vegeta999/Rocket.Chat
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathInput.js
More file actions
67 lines (63 loc) · 1.68 KB
/
Copy pathInput.js
File metadata and controls
67 lines (63 loc) · 1.68 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import React, { useEffect, useRef } from 'react';
import { Icon } from './Icon';
export const Input = ({
error,
title,
icon,
type = 'text',
className,
placeholder,
options,
focused,
...props
}) => {
const ref = useRef(null);
useEffect(() => {
if (focused && ref.current) {
ref.current.focus();
}
}, [focused]);
return <div
className={[
'rc-input',
error && 'rc-input--error',
].filter(Boolean).join(' ')}
>
<label className='rc-input__label'>
{title && <div className='rc-input__title'>{title}</div>}
{['text', 'email', 'password'].includes(type) && <div className='rc-input__wrapper'>
{icon && <div className='rc-input__icon'>
<Icon block='rc-input__icon-sv' icon={icon} />
</div>}<input
type={type}
className={['rc-input__element', className].filter(Boolean).join(' ')}
placeholder={placeholder}
ref={ref}
{...props}
/>
</div>}
{type === 'select' && <div className='rc-select'>
<select
className={['rc-select__element', className].filter(Boolean).join(' ')}
ref={ref}
{...props}
>
{placeholder && <option
disabled
value=''
>{placeholder}</option>}
{options.map(({ label, value }, i) =>
<option key={i} className='rc-select__option' value={value}>{label}</option>,
)}
</select>
<Icon block='rc-select__arrow' icon='arrow-down' />
</div>}
{typeof error === 'string' && error && <div className='rc-input__error'>
<div className='rc-input__error-icon'>
<Icon block='rc-input__error-icon' icon='warning' className='rc-input__error-icon-svg'/>
</div>
<div className='rc-input__error-message'>{error}</div>
</div>}
</label>
</div>;
};