forked from reactstrap/reactstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
CustomInput.js
91 lines (79 loc) · 2.43 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
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules } from './utils';
const propTypes = {
className: PropTypes.string,
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
type: PropTypes.string.isRequired,
label: PropTypes.string,
inline: PropTypes.bool,
valid: PropTypes.bool,
invalid: PropTypes.bool,
bsSize: 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,
...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);
if (type === 'select') {
return <select {...attributes} ref={innerRef} className={classNames(validationClassNames, customClass)}>{children}</select>;
}
if (type === 'file') {
return (
<div className={customClass}>
<input {...attributes} ref={innerRef} className={classNames(validationClassNames, mapToCssModules('custom-file-input', cssModule))} />
<label className={mapToCssModules('custom-file-label', cssModule)} htmlFor={attributes.id}>{label || 'Choose file'}</label>
</div>
);
}
if (type !== 'checkbox' && type !== 'radio') {
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}
ref={innerRef}
className={classNames(validationClassNames, mapToCssModules('custom-control-input', cssModule))}
/>
<label className={mapToCssModules('custom-control-label', cssModule)} htmlFor={attributes.id}>{label}</label>
{children}
</div>
);
}
CustomInput.propTypes = propTypes;
export default CustomInput;