@react-md/form/es/file-input/FileInput.js

This package is for creating all the different form input types.

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import cn from "classnames";
import { buttonThemeClassNames } from "@react-md/button";
import { TextIconSpacing, useIcon } from "@react-md/icon";
import { useInteractionStates } from "@react-md/states";
import { SrOnly } from "@react-md/typography";
import { bem } from "@react-md/utils";
var block = bem("rmd-file-input");
/**
 * This component is a wrapper for the `<input type="file" />` that can be themed
 * like a button.
 */
export var FileInput = forwardRef(function FileInput(_a, ref) {
    var style = _a.style, propClassName = _a.className, propIcon = _a.icon, _b = _a.iconAfter, iconAfter = _b === void 0 ? false : _b, propChildren = _a.children, _c = _a.theme, theme = _c === void 0 ? "primary" : _c, _d = _a.themeType, themeType = _d === void 0 ? "contained" : _d, _e = _a.buttonType, buttonType = _e === void 0 ? propChildren ? "text" : "icon" : _e, _f = _a.multiple, multiple = _f === void 0 ? false : _f, propDisableIconSpacing = _a.disableIconSpacing, _g = _a.disableRepeatableFiles, disableRepeatableFiles = _g === void 0 ? false : _g, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, onMouseLeave = _a.onMouseLeave, onClick = _a.onClick, onTouchStart = _a.onTouchStart, onTouchMove = _a.onTouchMove, onTouchEnd = _a.onTouchEnd, onChange = _a.onChange, props = __rest(_a, ["style", "className", "icon", "iconAfter", "children", "theme", "themeType", "buttonType", "multiple", "disableIconSpacing", "disableRepeatableFiles", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseUp", "onMouseLeave", "onClick", "onTouchStart", "onTouchMove", "onTouchEnd", "onChange"]);
    var id = props.id, disabled = props.disabled;
    var icon = useIcon("upload", propIcon);
    var disableIconSpacing = propDisableIconSpacing !== null && propDisableIconSpacing !== void 0 ? propDisableIconSpacing : typeof propChildren === "undefined";
    var children = propChildren;
    if (typeof propChildren === "undefined") {
        children = _jsx(SrOnly, { children: "Upload" });
    }
    var _h = useInteractionStates({
        handlers: {
            onKeyDown: onKeyDown,
            onKeyUp: onKeyUp,
            onMouseDown: onMouseDown,
            onMouseUp: onMouseUp,
            onMouseLeave: onMouseLeave,
            onClick: onClick,
            onTouchStart: onTouchStart,
            onTouchMove: onTouchMove,
            onTouchEnd: onTouchEnd,
        },
        className: buttonThemeClassNames({
            theme: theme,
            themeType: themeType,
            buttonType: buttonType,
            disabled: disabled,
            className: propClassName,
        }),
        // pressing enter or space would trigger two click events otherwise.
        disableEnterClick: true,
    }), ripples = _h.ripples, className = _h.className, handlers = _h.handlers;
    var content = icon;
    if (disableIconSpacing || (children && !icon)) {
        content = (_jsxs(_Fragment, { children: [!iconAfter && icon, children, iconAfter && icon] }));
    }
    else if (children) {
        content = (_jsx(TextIconSpacing, __assign({ icon: icon, iconAfter: iconAfter }, { children: children })));
    }
    return (_jsxs(_Fragment, { children: [_jsx("input", __assign({}, props, handlers, { ref: ref, onChange: onChange, value: disableRepeatableFiles ? undefined : "", type: "file", className: block(), multiple: multiple })), _jsxs("label", __assign({ htmlFor: id, style: style, className: cn("rmd-file-input-label", className) }, { children: [content, ripples] }))] }));
});
//# sourceMappingURL=FileInput.js.map