2020-07-16 08:42:10 +00:00
|
|
|
import React, { Component } from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2020-07-16 13:38:34 +00:00
|
|
|
import styled, { css } from 'styled-components';
|
2020-07-17 12:28:58 +00:00
|
|
|
import isEqual from "lodash/isEqual";
|
2020-07-16 13:38:34 +00:00
|
|
|
|
|
|
|
import IconButton from '../icon-button';
|
|
|
|
import TextInput from '../text-input';
|
|
|
|
|
|
|
|
|
|
|
|
const StyledFileInput = styled.div`
|
|
|
|
display: flex;
|
2020-07-16 14:40:45 +00:00
|
|
|
position: relative;
|
|
|
|
|
|
|
|
width: ${props =>
|
|
|
|
(props.scale && '100%') ||
|
|
|
|
(props.size === 'base' && '173px') ||
|
|
|
|
(props.size === 'middle' && '300px') ||
|
|
|
|
(props.size === 'big' && '350px') ||
|
|
|
|
(props.size === 'huge' && '500px') ||
|
|
|
|
(props.size === 'large' && '550px')
|
|
|
|
};
|
2020-07-16 13:38:34 +00:00
|
|
|
|
2020-07-16 20:32:18 +00:00
|
|
|
.text-input {
|
|
|
|
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#D0D5DA'};
|
2020-07-17 09:16:53 +00:00
|
|
|
text-overflow: ellipsis;
|
|
|
|
padding-right: 40px;
|
|
|
|
padding-right: ${ props => props.size === 'large' ? '64px'
|
|
|
|
: props.size === 'huge' ? '58px'
|
|
|
|
: props.size === 'big' ? '53px'
|
|
|
|
: props.size === 'middle' ? '48px'
|
|
|
|
: '37px'
|
|
|
|
}
|
2020-07-16 20:32:18 +00:00
|
|
|
}
|
|
|
|
|
2020-07-17 07:15:58 +00:00
|
|
|
:hover{
|
|
|
|
.icon {
|
|
|
|
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#A3A9AE'};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
:active {
|
|
|
|
.icon {
|
|
|
|
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#2DA7DB'};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-16 13:38:34 +00:00
|
|
|
.icon {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
position: absolute;
|
2020-07-16 14:40:45 +00:00
|
|
|
right: 0;
|
2020-07-16 13:38:34 +00:00
|
|
|
|
|
|
|
width: ${props => props.size === 'large' ? '48px'
|
|
|
|
: props.size === 'huge' ? '38px'
|
|
|
|
: props.size === 'big' ? '37px'
|
|
|
|
: props.size === 'middle' ? '36px'
|
|
|
|
: '30px'
|
|
|
|
};
|
|
|
|
|
|
|
|
height: ${props => props.size === 'large' ? '43px'
|
|
|
|
: props.size === 'huge' ? '37px'
|
|
|
|
: props.size === 'big' ? '36px'
|
|
|
|
: props.size === 'middle' ? '36px'
|
|
|
|
: '30px'
|
|
|
|
};
|
|
|
|
|
|
|
|
margin: 0;
|
2020-07-16 14:40:45 +00:00
|
|
|
border: 1px solid;
|
2020-07-16 13:38:34 +00:00
|
|
|
border-radius: 0 3px 3px 0;
|
|
|
|
|
2020-07-16 14:40:45 +00:00
|
|
|
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#D0D5DA'};
|
|
|
|
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}
|
2020-07-16 13:38:34 +00:00
|
|
|
}
|
2020-07-17 09:16:53 +00:00
|
|
|
|
|
|
|
|
2020-07-16 13:38:34 +00:00
|
|
|
`;
|
2020-07-16 08:42:10 +00:00
|
|
|
|
|
|
|
class FileInput extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
2020-07-16 13:38:34 +00:00
|
|
|
this.inputRef = React.createRef();
|
2020-07-16 08:42:10 +00:00
|
|
|
|
|
|
|
this.state = {
|
2020-07-17 11:33:59 +00:00
|
|
|
fileName: ''
|
2020-07-16 08:42:10 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-17 12:28:58 +00:00
|
|
|
shouldComponentUpdate(nextProps) {
|
|
|
|
return !isEqual(this.props, nextProps);
|
|
|
|
}
|
|
|
|
|
2020-07-16 08:42:10 +00:00
|
|
|
onIconFileClick = e => {
|
2020-07-17 12:58:28 +00:00
|
|
|
const { isDisabled } = this.props;
|
|
|
|
|
|
|
|
if(isDisabled) {
|
|
|
|
return false;
|
|
|
|
}
|
2020-07-16 08:42:10 +00:00
|
|
|
e.target.blur();
|
|
|
|
this.inputRef.current.click();
|
|
|
|
}
|
|
|
|
|
2020-07-17 08:31:23 +00:00
|
|
|
onChangeHandler = e => {
|
|
|
|
this.setState({
|
2020-07-17 11:33:59 +00:00
|
|
|
fileName: e.target.value
|
2020-07-17 08:31:23 +00:00
|
|
|
})
|
|
|
|
}
|
2020-07-16 08:42:10 +00:00
|
|
|
|
2020-07-17 08:31:23 +00:00
|
|
|
onInputFile = () => {
|
2020-07-17 12:58:28 +00:00
|
|
|
const { onInput, isDisabled } = this.props;
|
|
|
|
|
2020-07-17 11:33:59 +00:00
|
|
|
if ( this.inputRef.current.files ) {
|
2020-07-17 08:31:23 +00:00
|
|
|
this.setState({
|
2020-07-17 11:33:59 +00:00
|
|
|
fileName: this.inputRef.current.files[0].name
|
2020-07-17 08:49:54 +00:00
|
|
|
});
|
2020-07-17 12:58:28 +00:00
|
|
|
|
|
|
|
if(onInput) onInput(this.inputRef.current.files[0]);
|
|
|
|
|
2020-07-17 08:31:23 +00:00
|
|
|
} else {
|
|
|
|
this.setState({
|
|
|
|
fileName: 'file not choose'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
2020-07-16 08:42:10 +00:00
|
|
|
|
|
|
|
render() {
|
2020-07-17 12:28:58 +00:00
|
|
|
//console.log('render FileInput');
|
2020-07-16 08:42:10 +00:00
|
|
|
const { fileName } = this.state;
|
2020-07-16 14:40:45 +00:00
|
|
|
const {
|
|
|
|
size,
|
2020-07-17 07:15:58 +00:00
|
|
|
placeholder,
|
2020-07-16 14:40:45 +00:00
|
|
|
isDisabled,
|
|
|
|
scale,
|
|
|
|
hasError,
|
|
|
|
hasWarning,
|
2020-07-17 08:34:52 +00:00
|
|
|
accept,
|
2020-07-17 11:33:59 +00:00
|
|
|
onInput,
|
2020-07-16 14:40:45 +00:00
|
|
|
...rest
|
|
|
|
} = this.props;
|
2020-07-16 13:38:34 +00:00
|
|
|
|
|
|
|
let iconSize = 0;
|
|
|
|
|
|
|
|
switch (size) {
|
|
|
|
case 'base':
|
|
|
|
iconSize = 15;
|
|
|
|
break;
|
|
|
|
case 'middle':
|
|
|
|
iconSize = 15;
|
|
|
|
break;
|
|
|
|
case 'big':
|
|
|
|
iconSize = 16;
|
|
|
|
break;
|
|
|
|
case 'huge':
|
|
|
|
iconSize = 16;
|
|
|
|
break;
|
|
|
|
case 'large':
|
|
|
|
iconSize = 16;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
return(
|
2020-07-16 14:40:45 +00:00
|
|
|
<StyledFileInput
|
|
|
|
size={size}
|
2020-07-16 20:32:18 +00:00
|
|
|
scale={scale ? 1 : 0}
|
2020-07-16 14:40:45 +00:00
|
|
|
hasError={hasError}
|
|
|
|
hasWarning={hasWarning}
|
|
|
|
isDisabled={isDisabled}
|
2020-07-17 11:33:59 +00:00
|
|
|
{...rest}
|
2020-07-16 14:40:45 +00:00
|
|
|
>
|
2020-07-16 13:38:34 +00:00
|
|
|
<TextInput
|
2020-07-16 20:32:18 +00:00
|
|
|
className="text-input"
|
2020-07-17 07:15:58 +00:00
|
|
|
placeholder={placeholder}
|
2020-07-16 13:38:34 +00:00
|
|
|
value={fileName}
|
|
|
|
size={size}
|
2020-07-16 14:40:45 +00:00
|
|
|
isDisabled={isDisabled}
|
|
|
|
hasError={hasError}
|
|
|
|
hasWarning={hasWarning}
|
2020-07-16 20:32:18 +00:00
|
|
|
scale={scale}
|
2020-07-17 07:15:58 +00:00
|
|
|
onFocus={this.onIconFileClick}
|
2020-07-17 08:31:23 +00:00
|
|
|
onChange={this.onChangeHandler}
|
2020-07-16 08:42:10 +00:00
|
|
|
/>
|
2020-07-16 20:32:18 +00:00
|
|
|
<input
|
|
|
|
type="file"
|
|
|
|
ref={this.inputRef}
|
|
|
|
style={{ display: 'none' }}
|
2020-07-17 08:34:52 +00:00
|
|
|
accept={accept}
|
2020-07-17 07:15:58 +00:00
|
|
|
onInput={this.onInputFile}
|
2020-07-16 20:32:18 +00:00
|
|
|
/>
|
2020-07-17 07:15:58 +00:00
|
|
|
<div
|
|
|
|
className="icon"
|
|
|
|
onClick={this.onIconFileClick}
|
|
|
|
>
|
2020-07-16 13:38:34 +00:00
|
|
|
<IconButton
|
|
|
|
iconName={"CatalogFolderIcon"}
|
|
|
|
size={iconSize}
|
2020-07-16 14:40:45 +00:00
|
|
|
isDisabled={isDisabled}
|
2020-07-16 13:38:34 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</StyledFileInput>
|
2020-07-16 08:42:10 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
FileInput.propTypes = {
|
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
|
|
placeholder: PropTypes.string,
|
2020-07-17 12:16:14 +00:00
|
|
|
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'large']),
|
|
|
|
scale: PropTypes.bool,
|
|
|
|
className: PropTypes.string,
|
|
|
|
hasError: PropTypes.bool,
|
|
|
|
hasWarning: PropTypes.bool,
|
|
|
|
id: PropTypes.string,
|
|
|
|
isDisabled: PropTypes.bool,
|
|
|
|
name: PropTypes.string,
|
|
|
|
onInput: PropTypes.func,
|
|
|
|
accept: PropTypes.string
|
|
|
|
};
|
|
|
|
|
|
|
|
FileInput.defaultProps = {
|
|
|
|
size: 'base',
|
|
|
|
scale: false,
|
|
|
|
hasWarning: false,
|
|
|
|
hasError: false,
|
|
|
|
isDisabled: false,
|
|
|
|
accept: ''
|
2020-07-16 08:42:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default FileInput;
|