@itwin/itwinui-react/cjs/core/FileUpload/FileUpload.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'FileUpload', {
  enumerable: true,
  get: function () {
    return FileUpload;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _index = require('../../utils/index.js');
const FileUpload = _react.forwardRef((props, forwardedRef) => {
  let { dragContent, children, onFileDropped, contentProps, ...rest } = props;
  let [isDragActive, setIsDragActive] = _react.useState(false);
  let onDragOverHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };
  let onDragEnterHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file')
      setIsDragActive(true);
  };
  let onDragLeaveHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (isDragActive && !e.currentTarget?.contains(e.relatedTarget))
      setIsDragActive(false);
  };
  let onDropHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (isDragActive) {
      setIsDragActive(false);
      onFileDropped(e.dataTransfer?.files, e);
    }
  };
  return _react.createElement(
    _index.Box,
    {
      ...rest,
      className: (0, _classnames.default)(
        'iui-file-upload',
        {
          'iui-drag': isDragActive,
        },
        props?.className,
      ),
      ref: forwardedRef,
      onDragEnter: (0, _index.mergeEventHandlers)(
        props.onDragEnter,
        onDragEnterHandler,
      ),
      onDragOver: (0, _index.mergeEventHandlers)(
        props.onDragOver,
        onDragOverHandler,
      ),
      onDragLeave: (0, _index.mergeEventHandlers)(
        props.onDragLeave,
        onDragLeaveHandler,
      ),
      onDrop: (0, _index.mergeEventHandlers)(props.onDrop, onDropHandler),
    },
    dragContent
      ? children
      : _react.createElement(
          _index.Box,
          {
            as: 'div',
            ...contentProps,
            className: (0, _classnames.default)(
              'iui-content',
              contentProps?.className,
            ),
          },
          children,
        ),
    dragContent &&
      _react.createElement(
        _index.Box,
        {
          as: 'div',
          ...contentProps,
          className: (0, _classnames.default)(
            'iui-content',
            contentProps?.className,
          ),
        },
        dragContent,
      ),
  );
});
if ('development' === process.env.NODE_ENV)
  FileUpload.displayName = 'FileUpload';