@dnb/eufemia/cjs/components/upload/UploadFileInput.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _index = require("../../icons/index.js");
var _componentHelper = require("../../shared/component-helper.js");
var _UploadContext = require("./UploadContext.js");
var _UploadStatus2 = _interopRequireDefault(require("./UploadStatus.js"));
var _UploadVerify = require("./UploadVerify.js");
var _UploadStatus;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const UploadFileInput = ({
  children,
  disabled,
  files,
  ...rest
}) => {
  const fileInput = (0, _react.useRef)(null);
  const context = _react.default.useContext(_UploadContext.UploadContext);
  const {
    id,
    acceptedFileTypes,
    buttonText,
    onInputUpload,
    filesAmountLimit,
    variant,
    buttonProps
  } = context;
  const openFileDialog = () => {
    var _fileInput$current;
    return (_fileInput$current = fileInput.current) === null || _fileInput$current === void 0 ? void 0 : _fileInput$current.click();
  };
  const sharedId = id || (0, _componentHelper.makeUniqueId)();
  const accept = (0, _UploadVerify.getAcceptedFileTypes)(acceptedFileTypes);
  const onChangeHandler = (0, _react.useCallback)(event => {
    const target = event.target;
    const {
      files
    } = target;
    onInputUpload(Array.from(files).map(file => {
      return {
        file
      };
    }));
  }, [onInputUpload]);
  const onClickHandler = (0, _react.useCallback)(event => {
    const target = event.target;
    target.value = null;
  }, []);
  return _react.default.createElement("div", {
    className: "dnb-upload__file-input-area"
  }, filesAmountLimit !== (files === null || files === void 0 ? void 0 : files.length) && _react.default.createElement(_Button.default, _extends({
    top: variant === 'normal' ? 'medium' : undefined,
    id: `${sharedId}-input`,
    className: "dnb-upload__file-input-button",
    icon: _index.folder,
    icon_position: "left",
    variant: "secondary",
    wrap: true,
    disabled: disabled,
    text: buttonText
  }, buttonProps, {
    onClick: e => {
      var _buttonProps$onClick;
      openFileDialog();
      buttonProps === null || buttonProps === void 0 || (_buttonProps$onClick = buttonProps.onClick) === null || _buttonProps$onClick === void 0 || _buttonProps$onClick.call(buttonProps, e);
    }
  })), _UploadStatus || (_UploadStatus = _react.default.createElement(_UploadStatus2.default, null)), _react.default.createElement("input", _extends({
    "aria-labelledby": `${sharedId}-input`,
    ref: fileInput,
    accept: accept,
    className: "dnb-upload__file-input",
    type: "file",
    onChange: onChangeHandler,
    onClick: onClickHandler,
    multiple: filesAmountLimit > 1,
    disabled: disabled
  }, rest)));
};
var _default = exports.default = UploadFileInput;
//# sourceMappingURL=UploadFileInput.js.map