@flexis/ui/components/FileDrop/FileDrop.babel.js

Styleless React Components

import { __decorate } from "tslib";
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Bind, omit } from '../../helpers';
import { style, classes } from './FileDrop.st.css';
let FileSelect = /** @class */ (() => {
    class FileSelect extends PureComponent {
        constructor() {
            super(...arguments);
            this.state = {
                dragOver: false
            };
        }
        render() {
            const { className, disabled, children, ...props } = this.props;
            const { dragOver } = this.state;
            return (<div {...omit(props, ['onChange'])} className={style(classes.root, {
                disabled,
                dragOver
            }, className)} onDrag={this.onIgnoredEvent} onDragStart={this.onIgnoredEvent} onDragOver={this.onDragOver} onDragEnter={this.onDragOver} onDragLeave={this.onDragLeave} onDragEnd={this.onDragLeave} onDrop={this.onChange} aria-disabled={disabled}>
				{children}
			</div>);
        }
        onIgnoredEvent(event) {
            event.stopPropagation();
            event.preventDefault();
        }
        onDragOver(event) {
            event.stopPropagation();
            event.preventDefault();
            this.setState(() => ({
                dragOver: true
            }));
        }
        onDragLeave(event) {
            event.stopPropagation();
            event.preventDefault();
            this.setState(() => ({
                dragOver: false
            }));
        }
        onChange(event) {
            event.stopPropagation();
            event.preventDefault();
            const { disabled } = this.props;
            if (disabled) {
                return;
            }
            this.setState(() => ({
                dragOver: false
            }));
            const { onChange } = this.props;
            if (typeof onChange === 'function') {
                onChange(Array.from(event.dataTransfer.files), event);
            }
        }
    }
    FileSelect.propTypes = {
        onChange: PropTypes.func,
        disabled: PropTypes.bool,
        children: PropTypes.node
    };
    FileSelect.defaultProps = {
        disabled: false
    };
    __decorate([
        Bind()
    ], FileSelect.prototype, "onDragOver", null);
    __decorate([
        Bind()
    ], FileSelect.prototype, "onDragLeave", null);
    __decorate([
        Bind()
    ], FileSelect.prototype, "onChange", null);
    return FileSelect;
})();
export default FileSelect;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmlsZURyb3AuanN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvRmlsZURyb3AvRmlsZURyb3AudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUliLGFBQWEsRUFDYixNQUFNLE9BQU8sQ0FBQztBQUNmLE9BQU8sU0FBUyxNQUFNLFlBQVksQ0FBQztBQUNuQyxPQUFPLEVBRU4sSUFBSSxFQUNKLElBQUksRUFDSixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ04sS0FBSyxFQUNMLE9BQU8sRUFDUCxNQUFNLG1CQUFtQixDQUFDO0FBaUIzQjtJQUFBLE1BQXFCLFVBQVcsU0FBUSxhQUE2QjtRQUFyRTs7WUFZQyxVQUFLLEdBQUc7Z0JBQ1AsUUFBUSxFQUFFLEtBQUs7YUFDZixDQUFDO1FBMkZILENBQUM7UUF6RkEsTUFBTTtZQUVMLE1BQU0sRUFDTCxTQUFTLEVBQ1QsUUFBUSxFQUNSLFFBQVEsRUFDUixHQUFHLEtBQUssRUFDUixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7WUFDZixNQUFNLEVBQ0wsUUFBUSxFQUNSLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUVmLE9BQU8sQ0FDTixDQUFDLEdBQUcsQ0FDSCxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQzlCLFNBQVMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFO2dCQUM5QixRQUFRO2dCQUNSLFFBQVE7YUFDUixFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQ2QsTUFBTSxDQUFDLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUM1QixXQUFXLENBQUMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQ2pDLFVBQVUsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FDNUIsV0FBVyxDQUFDLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUM3QixXQUFXLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQzlCLFNBQVMsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FDNUIsTUFBTSxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUN0QixhQUFhLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FFeEI7SUFBQSxDQUFDLFFBQVEsQ0FDVjtHQUFBLEVBQUUsR0FBRyxDQUFDLENBQ04sQ0FBQztRQUNILENBQUM7UUFFTyxjQUFjLENBQUMsS0FBZ0I7WUFDdEMsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3hCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN4QixDQUFDO1FBR08sVUFBVSxDQUFDLEtBQWdCO1lBRWxDLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztZQUN4QixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7WUFFdkIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDO2dCQUNwQixRQUFRLEVBQUUsSUFBSTthQUNkLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQztRQUdPLFdBQVcsQ0FBQyxLQUFnQjtZQUVuQyxLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7WUFDeEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBRXZCLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQztnQkFDcEIsUUFBUSxFQUFFLEtBQUs7YUFDZixDQUFDLENBQUMsQ0FBQztRQUNMLENBQUM7UUFHTyxRQUFRLENBQUMsS0FBZ0I7WUFFaEMsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3hCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUV2QixNQUFNLEVBQ0wsUUFBUSxFQUNSLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUVmLElBQUksUUFBUSxFQUFFO2dCQUNiLE9BQU87YUFDUDtZQUVELElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQztnQkFDcEIsUUFBUSxFQUFFLEtBQUs7YUFDZixDQUFDLENBQUMsQ0FBQztZQUVKLE1BQU0sRUFDTCxRQUFRLEVBQ1IsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1lBRWYsSUFBSSxPQUFPLFFBQVEsS0FBSyxVQUFVLEVBQUU7Z0JBQ25DLFFBQVEsQ0FDUCxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLEVBQ3BDLEtBQUssQ0FDTCxDQUFDO2FBQ0Y7UUFDRixDQUFDOztJQXRHTSxvQkFBUyxHQUFHO1FBQ2xCLFFBQVEsRUFBRSxTQUFTLENBQUMsSUFBSTtRQUN4QixRQUFRLEVBQUUsU0FBUyxDQUFDLElBQUk7UUFDeEIsUUFBUSxFQUFFLFNBQVMsQ0FBQyxJQUFJO0tBQ3hCLENBQUM7SUFFSyx1QkFBWSxHQUFHO1FBQ3JCLFFBQVEsRUFBRSxLQUFLO0tBQ2YsQ0FBQztJQTZDRjtRQURDLElBQUksRUFBRTtnREFTTjtJQUdEO1FBREMsSUFBSSxFQUFFO2lEQVNOO0lBR0Q7UUFEQyxJQUFJLEVBQUU7OENBNEJOO0lBQ0YsaUJBQUM7S0FBQTtlQXpHb0IsVUFBVSJ9