Skip to content

Commit bb39b55

Browse files
hedgecoxhedgecox
authored
fix(CustomInput): hidden attribute #1741 (#1777)
* Investigation * Fix for custom input hidden attr * Updated CustomFileInput to output hidden attr * fix(CustomInput): Input hidden whitespace * fix(CustomInput): Hidden attr import quotes
1 parent 54648b6 commit bb39b55

File tree

2 files changed

+134
-104
lines changed

2 files changed

+134
-104
lines changed

‎src/CustomFileInput.js

Lines changed: 87 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -13,99 +13,113 @@ const propTypes = {
1313
htmlFor: PropTypes.string,
1414
cssModule: PropTypes.object,
1515
onChange: PropTypes.func,
16-
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
16+
children: PropTypes.oneOfType([
17+
PropTypes.node,
18+
PropTypes.array,
19+
PropTypes.func
20+
]),
1721
innerRef: PropTypes.oneOfType([
1822
PropTypes.object,
1923
PropTypes.string,
20-
PropTypes.func,
24+
PropTypes.func
2125
])
2226
};
2327

2428
class CustomFileInput extends React.Component {
25-
constructor(props) {
26-
super(props);
29+
constructor(props) {
30+
super(props);
2731

28-
this.state = {
29-
files:null,
30-
};
32+
this.state = {
33+
files: null
34+
};
3135

32-
this.onChange = this.onChange.bind(this);
33-
}
34-
35-
onChange(e) {
36-
let input = e.target;
37-
let {onChange} = this.props;
38-
let files = this.getSelectedFiles(input);
36+
this.onChange = this.onChange.bind(this);
37+
}
3938

40-
if (typeof(onChange) === 'function') {
41-
onChange(...arguments);
42-
}
39+
onChange(e) {
40+
let input = e.target;
41+
let { onChange } = this.props;
42+
let files = this.getSelectedFiles(input);
4343

44-
this.setState({files})
44+
if (typeof onChange === "function") {
45+
onChange(...arguments);
4546
}
4647

47-
getSelectedFiles(input) {
48-
let {multiple} = this.props;
48+
this.setState({ files });
49+
}
4950

50-
if (multiple && input.files) {
51-
let files = [].slice.call(input.files);
51+
getSelectedFiles(input) {
52+
let { multiple } = this.props;
5253

53-
return files.map(file => file.name).join(', ');
54-
}
54+
if (multiple && input.files) {
55+
let files = [].slice.call(input.files);
5556

56-
if (input.value.indexOf('fakepath') !== -1) {
57-
let parts = input.value.split('\\');
57+
return files.map(file => file.name).join(", ");
58+
}
5859

59-
return parts[parts.length - 1];
60-
}
60+
if (input.value.indexOf("fakepath") !== -1) {
61+
let parts = input.value.split("\\");
6162

62-
return input.value;
63+
return parts[parts.length - 1];
6364
}
6465

65-
render() {
66-
const {
67-
className,
68-
label,
69-
valid,
70-
invalid,
71-
cssModule,
72-
children,
73-
bsSize,
74-
innerRef,
75-
htmlFor,
76-
type,
77-
onChange,
78-
dataBrowse,
79-
...attributes
80-
} = this.props;
81-
82-
const customClass = mapToCssModules(
83-
classNames(
84-
className,
85-
`custom-file`,
86-
),
87-
cssModule
88-
);
89-
90-
const validationClassNames = mapToCssModules(
91-
classNames(
92-
invalid && 'is-invalid',
93-
valid && 'is-valid',
94-
),
95-
cssModule
96-
);
97-
98-
const labelHtmlFor = htmlFor || attributes.id;
99-
const {files} = this.state;
100-
101-
return (
102-
<div className={customClass}>
103-
<input type="file" {...attributes} ref={innerRef} className={classNames(validationClassNames, mapToCssModules('custom-file-input', cssModule))} onChange={this.onChange}/>
104-
<label className={mapToCssModules('custom-file-label', cssModule)} htmlFor={labelHtmlFor} data-browse={ dataBrowse }>{files || label || 'Choose file'}</label>
105-
{children}
106-
</div>
107-
);
108-
}
66+
return input.value;
67+
}
68+
69+
render() {
70+
const {
71+
className,
72+
label,
73+
valid,
74+
invalid,
75+
cssModule,
76+
children,
77+
bsSize,
78+
innerRef,
79+
htmlFor,
80+
type,
81+
onChange,
82+
dataBrowse,
83+
hidden,
84+
...attributes
85+
} = this.props;
86+
87+
const customClass = mapToCssModules(
88+
classNames(className, `custom-file`),
89+
cssModule
90+
);
91+
92+
const validationClassNames = mapToCssModules(
93+
classNames(invalid && "is-invalid", valid && "is-valid"),
94+
cssModule
95+
);
96+
97+
const labelHtmlFor = htmlFor || attributes.id;
98+
const { files } = this.state;
99+
100+
return (
101+
<div className={customClass} hidden={hidden || false}>
102+
<input
103+
type="file"
104+
{...attributes}
105+
ref={innerRef}
106+
className={classNames(
107+
validationClassNames,
108+
mapToCssModules("custom-file-input", cssModule)
109+
)}
110+
onChange={this.onChange}
111+
/>
112+
<label
113+
className={mapToCssModules("custom-file-label", cssModule)}
114+
htmlFor={labelHtmlFor}
115+
data-browse={dataBrowse}
116+
>
117+
{files || label || "Choose file"}
118+
</label>
119+
{children}
120+
</div>
121+
);
122+
}
109123
}
110124

111125
CustomFileInput.propTypes = propTypes;

‎src/CustomInput.js

Lines changed: 47 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,7 @@ const propTypes = {
1616
htmlFor: PropTypes.string,
1717
cssModule: PropTypes.object,
1818
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
19-
innerRef: PropTypes.oneOfType([
20-
PropTypes.object,
21-
PropTypes.string,
22-
PropTypes.func,
23-
])
19+
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func])
2420
};
2521

2622
function CustomInput(props) {
@@ -40,51 +36,71 @@ function CustomInput(props) {
4036

4137
const type = attributes.type;
4238

43-
const customClass = mapToCssModules(classNames(
44-
className,
45-
`custom-${type}`,
46-
bsSize ? `custom-${type}-${bsSize}` : false,
47-
), cssModule);
39+
const customClass = mapToCssModules(
40+
classNames(className, `custom-${type}`, bsSize ? `custom-${type}-${bsSize}` : false),
41+
cssModule
42+
);
4843

49-
const validationClassNames = mapToCssModules(classNames(
50-
invalid && 'is-invalid',
51-
valid && 'is-valid',
52-
), cssModule);
44+
const validationClassNames = mapToCssModules(
45+
classNames(invalid && "is-invalid", valid && "is-valid"),
46+
cssModule
47+
);
5348

5449
const labelHtmlFor = htmlFor || attributes.id;
5550

56-
if (type === 'select') {
51+
if (type === "select") {
5752
const { type, ...rest } = attributes;
58-
return <select {...rest} ref={innerRef} className={classNames(validationClassNames, customClass)}>{children}</select>;
59-
}
60-
61-
if (type === 'file') {
6253
return (
63-
<CustomFileInput {...props}/>
54+
<select
55+
{...rest}
56+
ref={innerRef}
57+
className={classNames(validationClassNames, customClass)}
58+
>
59+
{children}
60+
</select>
6461
);
6562
}
6663

67-
if (type !== 'checkbox' && type !== 'radio' && type !== 'switch') {
68-
return <input {...attributes} ref={innerRef} className={classNames(validationClassNames, customClass)} />;
64+
if (type === "file") {
65+
return <CustomFileInput {...props} />;
66+
}
67+
68+
if (type !== "checkbox" && type !== "radio" && type !== "switch") {
69+
return (
70+
<input
71+
{...attributes}
72+
ref={innerRef}
73+
className={classNames(validationClassNames, customClass)}
74+
/>
75+
);
6976
}
7077

7178
const wrapperClasses = classNames(
7279
customClass,
73-
mapToCssModules(classNames(
74-
'custom-control',
75-
{ 'custom-control-inline': inline }
76-
), cssModule)
80+
mapToCssModules(
81+
classNames("custom-control", { "custom-control-inline": inline }),
82+
cssModule
83+
)
7784
);
7885

86+
const { hidden, ...rest } = attributes;
7987
return (
80-
<div className={wrapperClasses}>
88+
<div className={wrapperClasses} hidden={hidden || false}>
8189
<input
82-
{...attributes}
83-
type={type === 'switch' ? 'checkbox' : type}
90+
{...rest}
91+
type={type === "switch" ? "checkbox" : type}
8492
ref={innerRef}
85-
className={classNames(validationClassNames, mapToCssModules('custom-control-input', cssModule))}
93+
className={classNames(
94+
validationClassNames,
95+
mapToCssModules("custom-control-input", cssModule)
96+
)}
8697
/>
87-
<label className={mapToCssModules('custom-control-label', cssModule)} htmlFor={labelHtmlFor}>{label}</label>
98+
<label
99+
className={mapToCssModules("custom-control-label", cssModule)}
100+
htmlFor={labelHtmlFor}
101+
>
102+
{label}
103+
</label>
88104
{children}
89105
</div>
90106
);

0 commit comments

Comments
 (0)