jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
152 lines (146 loc) • 8.36 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var index = require('../01-button/index.js');
var index$1 = require('../11-form-item/01-form-label/index.js');
var index$2 = require('../11-form-item/02-form-description/index.js');
var index$3 = require('../09-inline-error/index.js');
var index$4 = require('../../06-layout/03-flex/index.js');
var index$5 = require('../../06-layout/03-flex/02-flex-item/index.js');
var index$6 = require('../../06-layout/07-spacing/index.js');
var index$7 = require('../../13-text/03-text/index.js');
var Close = require('../../../../icons/Close.js');
var Download = require('../../../../icons/Download.js');
var Info = require('../../../../icons/Info.js');
var JobPerFile = require('../../../../icons/JobPerFile.js');
var styles = require('./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 React.Component {
constructor(props) {
super(props);
this.state = {
files: [],
errors: []
};
/**
* 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];
const { maxSizeMessage = 'File is too large' } = this.props;
this.setState({
errors: fileItems
.filter(f => {
return (this.props.maxSize && f.size > this.props.maxSize * 1024 * 1024);
})
.map(fileItem => {
return `${fileItem.name} : ${maxSizeMessage}`;
}),
files: fileItems
.filter(f => {
return (!this.props.maxSize ||
(this.props.maxSize && f.size <= this.props.maxSize * 1024 * 1024));
})
.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]);
}
});
};
/**
* Handle change on the input field.
*/
this.removeFile = fileIndex => {
this.setState({
files: this.state.files
.filter((f, index) => index !== fileIndex)
.map(fileItem => {
return {
file: fileItem.file,
filename: fileItem.filename,
fileSize: fileItem.fileSize,
type: fileItem.type
};
})
}, () => {
if (this.props.multiple) {
this.props.onChange(this.state.files);
}
else {
this.props.onChange(this.state.files[0]);
}
});
};
// create a ref to store the textInput DOM element
this.fileInput = React__default.createRef();
}
render() {
const { label = 'File', placeholder = 'Choose file', id, description, fileTypes, error = false, required = false, multiple = false, buttonStyle = 'default', onClick } = this.props;
return (React__default.createElement(React__default.Fragment, null,
label && multiple && (React__default.createElement(React__default.Fragment, null,
React__default.createElement(index$1.FormLabel, { error: error, required: required, htmlFor: id }, label),
React__default.createElement(index$6.default, null))),
React__default.createElement(styles.Wrapper, { multiple: multiple },
multiple && (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Download.default, { height: "100px", width: "100px", color: "gray2", title: "Upload" }),
React__default.createElement(index$6.default, null))),
React__default.createElement(React__default.Fragment, null,
label && !multiple && (React__default.createElement(index$1.FormLabel, { error: error, required: required, htmlFor: id }, label)),
description && multiple && (React__default.createElement(index$7.default, { tag: "p", color: "gray3", textAlign: "center" }, description)),
React__default.createElement(index$6.default, null),
React__default.createElement(styles.FileWidgetInput, Object.assign({ ref: this.fileInput, onChange: this.handleChange, type: "file" }, (fileTypes ? { accept: fileTypes.join(', ') } : null), { id: id, name: id, onClick: onClick, multiple: multiple })),
React__default.createElement(index.Button, { onClick: this.handleClick, "data-testid": "trigger", buttonStyle: buttonStyle, type: "button" }, placeholder),
description && !multiple && (React__default.createElement(index$2.FormDescription, null, description)),
React__default.createElement(index$4.default, { flexWrap: "wrap", alignItems: "center" }, this.state.files.map((fileUploaded, index) => (React__default.createElement(index$5.default, { margin: 4, key: index },
React__default.createElement(styles.BoxFilePreviewWrapper, null,
React__default.createElement(styles.RemoveFileButton, null,
React__default.createElement("button", { onClick: e => this.removeFile(index) },
React__default.createElement(Close.default, { title: "Remove file" }))),
React__default.createElement(styles.FilePreviewWrapper, null,
React__default.createElement(styles.ImagePreviewWrapper, null, fileUploaded.file ? (React__default.createElement(styles.Preview, { src: fileUploaded.file })) : (React__default.createElement(JobPerFile.JobPerFileIcon, { title: "Attachment" }))),
React__default.createElement(styles.PreviewInfo, null,
React__default.createElement("div", null,
React__default.createElement(styles.ImagePreviewInfoLabel, null,
React__default.createElement(styles.PreviewIcon, { name: "weight", title: label })),
fileUploaded.fileSize,
" KB")))))))),
this.state.errors &&
this.state.errors.map(errorMessage => (React__default.createElement("div", null,
React__default.createElement(index$6.default, null),
React__default.createElement(index$4.default, { alignItems: "center" },
React__default.createElement(index$5.default, { marginRight: 4 },
React__default.createElement(Info.default, { title: "error", color: "danger" }),
' '),
React__default.createElement(index$3.default, { message: errorMessage })))))))));
}
}
exports.FileInput = FileInput;