From bb39b55d521632162acaf5c1b45201f78dab9135 Mon Sep 17 00:00:00 2001 From: hedgecox <41297418+hedgecox@users.noreply.github.com> Date: Fri, 31 Jan 2020 17:07:11 +0000 Subject: [PATCH] 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 --- src/CustomFileInput.js | 160 ++++++++++++++++++++++------------------- src/CustomInput.js | 78 ++++++++++++-------- 2 files changed, 134 insertions(+), 104 deletions(-) diff --git a/src/CustomFileInput.js b/src/CustomFileInput.js index 0cbf54b82..9ac4bc3f8 100644 --- a/src/CustomFileInput.js +++ b/src/CustomFileInput.js @@ -13,99 +13,113 @@ const propTypes = { htmlFor: PropTypes.string, cssModule: PropTypes.object, onChange: PropTypes.func, - children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]), + children: PropTypes.oneOfType([ + PropTypes.node, + PropTypes.array, + PropTypes.func + ]), innerRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.string, - PropTypes.func, + PropTypes.func ]) }; class CustomFileInput extends React.Component { - constructor(props) { - super(props); + constructor(props) { + super(props); - this.state = { - files:null, - }; + this.state = { + files: null + }; - this.onChange = this.onChange.bind(this); - } - - onChange(e) { - let input = e.target; - let {onChange} = this.props; - let files = this.getSelectedFiles(input); + this.onChange = this.onChange.bind(this); + } - if (typeof(onChange) === 'function') { - onChange(...arguments); - } + onChange(e) { + let input = e.target; + let { onChange } = this.props; + let files = this.getSelectedFiles(input); - this.setState({files}) + if (typeof onChange === "function") { + onChange(...arguments); } - getSelectedFiles(input) { - let {multiple} = this.props; + this.setState({ files }); + } - if (multiple && input.files) { - let files = [].slice.call(input.files); + getSelectedFiles(input) { + let { multiple } = this.props; - return files.map(file => file.name).join(', '); - } + if (multiple && input.files) { + let files = [].slice.call(input.files); - if (input.value.indexOf('fakepath') !== -1) { - let parts = input.value.split('\\'); + return files.map(file => file.name).join(", "); + } - return parts[parts.length - 1]; - } + if (input.value.indexOf("fakepath") !== -1) { + let parts = input.value.split("\\"); - return input.value; + return parts[parts.length - 1]; } - render() { - const { - className, - label, - valid, - invalid, - cssModule, - children, - bsSize, - innerRef, - htmlFor, - type, - onChange, - dataBrowse, - ...attributes - } = this.props; - - const customClass = mapToCssModules( - classNames( - className, - `custom-file`, - ), - cssModule - ); - - const validationClassNames = mapToCssModules( - classNames( - invalid && 'is-invalid', - valid && 'is-valid', - ), - cssModule - ); - - const labelHtmlFor = htmlFor || attributes.id; - const {files} = this.state; - - return ( -