@vimeo/iris/components/inputs/Dropzone/Dropzone.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../../tslib.es6-3ec409b7.js');
var React = require('react');
var styled = require('styled-components');
var polished = require('polished');
var utils_HOCs_withIris = require('../../../utils/HOCs/withIris.js');
var utils_hooks_useForwardRef = require('../../../utils/hooks/useForwardRef.js');
var utils_events_stopPrevent = require('../../../utils/events/stopPrevent.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

var Dropzone = utils_HOCs_withIris.withIris(DropzoneComponent);
function DropzoneComponent(_a) {
    var accept = _a.accept, active = _a.active, children = _a.children; _a.defaultValue; var disabled = _a.disabled, _b = _a.format, format = _b === void 0 ? 'primary' : _b, forwardRef = _a.forwardRef, multiple = _a.multiple, onChange = _a.onChange, onDragEnter = _a.onDragEnter, onDragLeave = _a.onDragLeave, onDragOver = _a.onDragOver, props = tslib_es6.__rest(_a, ["accept", "active", "children", "defaultValue", "disabled", "format", "forwardRef", "multiple", "onChange", "onDragEnter", "onDragLeave", "onDragOver"]);
    var ref = utils_hooks_useForwardRef.useForwardRef(forwardRef);
    var _c = tslib_es6.__read(React.useState(false), 2), drag = _c[0], dragSet = _c[1];
    var handleDragOver = utils_events_stopPrevent.stopPrevent(function (e) {
        onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(e);
        dragSet(true);
    });
    var handleDragLeave = utils_events_stopPrevent.stopPrevent(function (e) {
        onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(e);
        dragSet(false);
    });
    var onDrop = utils_events_stopPrevent.stopPrevent(function (event) {
        onChange && onChange(event);
        dragSet(false);
    });
    return (React__default["default"].createElement(DropzoneContainer, tslib_es6.__assign({ drag: active || drag, format: format, onDragEnter: onDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: onDrop }, props),
        React__default["default"].createElement("input", { accept: accept, disabled: disabled, multiple: multiple, onChange: onChange, ref: ref, type: "file", style: { display: 'none' } }),
        typeof children === 'function'
            ? children(active || drag)
            : children));
}
var DropzoneContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  width: 100%;\n  min-height: 5rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  border: ", " solid ", ";\n  will-change: transform;\n  transition: background 100ms ease-in-out;\n  ", ";\n"], ["\n  width: 100%;\n  min-height: 5rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  border: ", " solid ", ";\n  will-change: transform;\n  transition: background 100ms ease-in-out;\n  ", ";\n"])), polished.rem(10), polished.rem(3), function (p) { return p.theme.item.bg2; }, formats);
function formats(_a) {
    var drag = _a.drag, format = _a.format, theme = _a.theme;
    if (!drag)
        return;
    switch (format) {
        case 'primary':
            return styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n        background: ", ";\n        border: ", " dashed ", ";\n      "], ["\n        background: ", ";\n        border: ", " dashed ", ";\n      "])), polished.rgba(theme.formats.primary, 0.2), polished.rem(3), theme.formats.primary);
        case 'secondary':
            // note: if we're using a 'secondary' format prop, we should
            // be following a consistent pattern with other components
            //
            // return css`
            //   background: ${rgba(theme.formats.secondary, 0.2)};
            //   border: ${rem(3)} dashed ${theme.formats.secondary};
            // `;
            return styled.css(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n        background: ", ";\n        border: ", " dashed ", ";\n      "], ["\n        background: ", ";\n        border: ", " dashed ", ";\n      "])), polished.rgba(theme.formats.soft, 0.1), polished.rem(3), polished.rgba(theme.formats.soft, 0.5));
    }
}
var templateObject_1, templateObject_2, templateObject_3;

exports.Dropzone = Dropzone;