forked from reactstrap/reactstrap
/
CustomInput.js
94 lines (81 loc) · 2.35 KB
/
CustomInput.js
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules } from './utils';
import CustomFileInput from './CustomFileInput';
const propTypes = {
className: PropTypes.string,
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
type: PropTypes.string.isRequired,
label: PropTypes.node,
inline: PropTypes.bool,
valid: PropTypes.bool,
invalid: PropTypes.bool,
bsSize: PropTypes.string,
htmlFor: PropTypes.string,
cssModule: PropTypes.object,
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
innerRef: PropTypes.oneOfType([
PropTypes.object,
PropTypes.string,
PropTypes.func,
])
};
function CustomInput(props) {
const {
className,
label,
inline,
valid,
invalid,
cssModule,
children,
bsSize,
innerRef,
htmlFor,
...attributes
} = props;
const type = attributes.type;
const customClass = mapToCssModules(classNames(
className,
`custom-${type}`,
bsSize ? `custom-${type}-${bsSize}` : false,
), cssModule);
const validationClassNames = mapToCssModules(classNames(
invalid && 'is-invalid',
valid && 'is-valid',
), cssModule);
const labelHtmlFor = htmlFor || attributes.id;
if (type === 'select') {
return <select {...attributes} ref={innerRef} className={classNames(validationClassNames, customClass)}>{children}</select>;
}
if (type === 'file') {
return (
<CustomFileInput {...props}/>
);
}
if (type !== 'checkbox' && type !== 'radio' && type !== 'switch') {
return <input {...attributes} ref={innerRef} className={classNames(validationClassNames, customClass)} />;
}
const wrapperClasses = classNames(
customClass,
mapToCssModules(classNames(
'custom-control',
{ 'custom-control-inline': inline }
), cssModule)
);
return (
<div className={wrapperClasses}>
<input
{...attributes}
type={type === 'switch' ? 'checkbox' : type}
ref={innerRef}
className={classNames(validationClassNames, mapToCssModules('custom-control-input', cssModule))}
/>
<label className={mapToCssModules('custom-control-label', cssModule)} htmlFor={labelHtmlFor}>{label}</label>
{children}
</div>
);
}
CustomInput.propTypes = propTypes;
export default CustomInput;