@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 = require("react");
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _index = require("../../icons/index.js");
var _useId = _interopRequireDefault(require("../../shared/helpers/useId.js"));
var _UploadContext = require("./UploadContext.js");
var _UploadStatus2 = _interopRequireDefault(require("./UploadStatus.js"));
var _UploadVerify = require("./UploadVerify.js");
var _jsxRuntime = require("react/jsx-runtime");
var _UploadStatus;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const UploadFileInput = ({
  children,
  disabled,
  files,
  ...rest
}) => {
  const fileInput = (0, _react.useRef)(null);
  const context = (0, _react.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 = (0, _useId.default)(id);
  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 (0, _jsxRuntime.jsxs)("div", {
    className: "dnb-upload__file-input-area",
    children: [filesAmountLimit !== (files === null || files === void 0 ? void 0 : files.length) && (0, _jsxRuntime.jsx)(_Button.default, {
      top: variant === 'default' ? 'medium' : undefined,
      id: `${sharedId}-input`,
      className: "dnb-upload__file-input-button",
      icon: _index.folder,
      iconPosition: "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 = (0, _jsxRuntime.jsx)(_UploadStatus2.default, {})), (0, _jsxRuntime.jsx)("input", {
      "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