@wix/design-system
Version:
@wix/design-system
58 lines • 2.65 kB
JavaScript
import React from 'react';
import { Add } from '@wix/wix-ui-icons-common';
import uniqueId from 'lodash/uniqueId';
import { classes } from './FilePicker.st.css.js';
import FormField from '../FormField';
import TextButton from '../TextButton';
import Text from '../Text';
import FileUpload from '../FileUpload';
import { IconThemeContext } from '../WixDesignSystemIconThemeProvider/IconThemeContext';
/**
* # `<FilePicker/>`
*
* Component that opens system browser dialog for choosing files to upload
*/
class FilePicker extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
selectedFileName: props.subLabel,
};
this.id = props.id || uniqueId('file_picker_input_');
}
/** A callback which is invoked every time a file is chosen */
onChooseFile(file) {
const { maxSize, onChange } = this.props;
if (file) {
onChange(file);
if (file.size <= maxSize) {
this.setState({ selectedFileName: file.name });
}
}
}
render() {
const { header, mainLabel, supportedFormats, error, errorMessage, name, dataHook, } = this.props;
return (React.createElement(IconThemeContext.Consumer, null, ({ icons = {} }) => {
const AddIcon = icons.FilePicker?.Add || Add;
return (React.createElement(FileUpload, { accept: supportedFormats, onChange: files => this.onChooseFile(files[0]), name: name }, ({ openFileUploadDialog }) => (React.createElement(FormField, { label: header, dataHook: dataHook },
React.createElement("label", { className: classes.label, onClick: openFileUploadDialog },
React.createElement("div", { className: classes.icon },
React.createElement(AddIcon, null)),
React.createElement("div", { className: classes.content },
React.createElement(TextButton, { dataHook: "main-label" }, mainLabel),
React.createElement(Text, { className: classes.info, size: "small", secondary: true, dataHook: "sub-label" }, this.state.selectedFileName),
error && (React.createElement(Text, { skin: "error", size: "small", dataHook: "filePicker-error" }, errorMessage))))))));
}));
}
}
FilePicker.displayName = 'FilePicker';
FilePicker.defaultProps = {
mainLabel: 'Choose File',
subLabel: 'No file chosen (Max size 5 MB)',
onChange: () => { },
supportedFormats: '*',
errorMessage: '',
maxSize: 5000000, // 5MB
};
export default FilePicker;
//# sourceMappingURL=FilePicker.js.map