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

Vimeo Design System

import { a as __makeTemplateObject, b as __rest, _ as __read, c as __assign } from '../../../tslib.es6-7f0e734f.js';
import React__default, { useState } from 'react';
import styled, { css } from 'styled-components';
import { rem, rgba } from 'polished';
import { withIris } from '../../../utils/HOCs/withIris.esm.js';
import { useForwardRef } from '../../../utils/hooks/useForwardRef.esm.js';
import { stopPrevent } from '../../../utils/events/stopPrevent.esm.js';

var Dropzone = 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 = __rest(_a, ["accept", "active", "children", "defaultValue", "disabled", "format", "forwardRef", "multiple", "onChange", "onDragEnter", "onDragLeave", "onDragOver"]);
    var ref = useForwardRef(forwardRef);
    var _c = __read(useState(false), 2), drag = _c[0], dragSet = _c[1];
    var handleDragOver = stopPrevent(function (e) {
        onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(e);
        dragSet(true);
    });
    var handleDragLeave = stopPrevent(function (e) {
        onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(e);
        dragSet(false);
    });
    var onDrop = stopPrevent(function (event) {
        onChange && onChange(event);
        dragSet(false);
    });
    return (React__default.createElement(DropzoneContainer, __assign({ drag: active || drag, format: format, onDragEnter: onDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: onDrop }, props),
        React__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.div(templateObject_1 || (templateObject_1 = __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"])), rem(10), 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 css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        background: ", ";\n        border: ", " dashed ", ";\n      "], ["\n        background: ", ";\n        border: ", " dashed ", ";\n      "])), rgba(theme.formats.primary, 0.2), 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 css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        background: ", ";\n        border: ", " dashed ", ";\n      "], ["\n        background: ", ";\n        border: ", " dashed ", ";\n      "])), rgba(theme.formats.soft, 0.1), rem(3), rgba(theme.formats.soft, 0.5));
    }
}
var templateObject_1, templateObject_2, templateObject_3;

export { Dropzone };