jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
77 lines (74 loc) • 3.78 kB
JavaScript
import React__default, { Component } from 'react';
import { Button } from '../01-button/index.js';
import { FormItem, FormLabel } from '../11-form-item/index.js';
import FlexItems from '../../06-layout/03-flex/index.js';
import FlexItem from '../../06-layout/03-flex/02-flex-item/index.js';
import { JobPerFileIcon } from '../../../../icons/JobPerFile.js';
import { FilePreviewWrapper, ImagePreviewWrapper, Preview, PreviewInfo, ImagePreviewInfoLabel, PreviewIcon } from './styles.js';
/**
* @file index.tsx
*
* @fileoverview File input component. Renders a button input together with its label.
*/
/**
* A file input is a form element where users can chose a file from their local
* computer and use it to upload.
*/
class FileInput extends Component {
constructor(props) {
super(props);
this.state = {
files: []
};
/**
* Triggers a click on the input.
*/
this.handleClick = event => {
this.fileInput.current.click();
};
/**
* Handle change on the input field.
*/
this.handleChange = event => {
const fileItems = [...event.target.files];
this.setState({
files: fileItems.map(fileItem => {
return {
file: fileItem.type.substring(0, 5) === 'image'
? URL.createObjectURL(fileItem)
: null,
filename: fileItem.name,
fileSize: fileItem.size,
type: fileItem.type
};
})
}, () => {
if (this.props.multiple) {
this.props.onChange(fileItems);
}
else {
this.props.onChange(fileItems[0]);
}
});
};
// create a ref to store the textInput DOM element
this.fileInput = React__default.createRef();
}
render() {
const { label = 'File', placeholder = 'Choose file', id, error = false, required = false, multiple = false, buttonStyle = 'default', onClick } = this.props;
return (React__default.createElement(FormItem, null,
label && (React__default.createElement(FormLabel, { error: error, required: required, htmlFor: id }, label)),
React__default.createElement("input", { hidden: true, ref: this.fileInput, onChange: this.handleChange, type: "file", id: id, name: id, onClick: onClick, multiple: multiple }),
React__default.createElement(Button, { onClick: this.handleClick, "data-testid": "trigger", buttonStyle: buttonStyle, type: "button" }, placeholder),
React__default.createElement(FlexItems, { flexWrap: "wrap", alignItems: "center" }, this.state.files.map((fileUploaded, index) => (React__default.createElement(FlexItem, { margin: 4, key: index },
React__default.createElement(FilePreviewWrapper, null,
React__default.createElement(ImagePreviewWrapper, null, fileUploaded.file ? (React__default.createElement(Preview, { src: fileUploaded.file })) : (React__default.createElement(JobPerFileIcon, { title: "Attachment" }))),
React__default.createElement(PreviewInfo, null,
React__default.createElement("div", null,
React__default.createElement(ImagePreviewInfoLabel, null,
React__default.createElement(PreviewIcon, { name: "weight", title: label })),
fileUploaded.fileSize,
" KB")))))))));
}
}
export { FileInput };