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

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
function _export(target, all) {
  for (var name in all)
    Object.defineProperty(target, name, {
      enumerable: true,
      get: all[name],
    });
}
_export(exports, {
  FileUploadCard: function () {
    return FileUploadCard;
  },
  FileUploadCardContext: function () {
    return FileUploadCardContext;
  },
});
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 _index = require('../../utils/index.js');
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _FileEmptyCard = require('./FileEmptyCard.js');
const _Anchor = require('../Typography/Anchor.js');
const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
const toBytes = (bytes) => {
  let units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
  let i = 0;
  while (bytes >= 1024 && ++i) bytes /= 1024;
  return bytes.toFixed(bytes < 10 && i > 0 ? 2 : 0) + units[i];
};
const toDate = (dateNumber) => {
  let date = new Date(dateNumber);
  return date.toDateString() + ' ' + date.toLocaleTimeString();
};
const FileUploadCardIcon = _index.polymorphic.span('iui-file-card-icon', {
  children: _react.createElement(_index.SvgDocument, null),
});
if ('development' === process.env.NODE_ENV)
  FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
const FileUploadCardInfo = _index.polymorphic.span('iui-file-card-text');
if ('development' === process.env.NODE_ENV)
  FileUploadCardInfo.displayName = 'FileUploadCard.Info';
const FileUploadCardTitle = _react.forwardRef((props, ref) => {
  let { children, className, ...rest } = props;
  let { files } = (0, _index.useSafeContext)(FileUploadCardContext);
  let title =
    files.length > 1 ? files.length + ' files selected' : files[0].name;
  return _react.createElement(
    _index.Box,
    {
      as: 'span',
      className: (0, _classnames.default)('iui-file-card-title', className),
      ref: ref,
      ...rest,
    },
    children ?? title,
  );
});
if ('development' === process.env.NODE_ENV)
  FileUploadCardTitle.displayName = 'FileUploadCard.Title';
const FileUploadCardDescription = _react.forwardRef((props, ref) => {
  let { children, className, ...rest } = props;
  let { files } = (0, _index.useSafeContext)(FileUploadCardContext);
  let description =
    files.length > 1
      ? files[0].name + ', ' + files[1].name
      : toBytes(files[0].size) + ' ' + toDate(files[0].lastModified);
  if (files.length > 2)
    description += ', and ' + (files.length - 2) + ' others';
  return _react.createElement(
    _index.Box,
    {
      as: 'span',
      className: (0, _classnames.default)(
        'iui-file-card-description',
        className,
      ),
      ref: ref,
      ...rest,
    },
    children ?? description,
  );
});
if ('development' === process.env.NODE_ENV)
  FileUploadCardDescription.displayName = 'FileUploadCard.Description';
const FileUploadCardAction = _index.polymorphic.div('iui-file-card-action');
if ('development' === process.env.NODE_ENV)
  FileUploadCardAction.displayName = 'FileUploadCard.Action';
const FileUploadCardInputLabel = _react.forwardRef((props, ref) => {
  let { children, ...rest } = props;
  let { inputId } = (0, _index.useSafeContext)(FileUploadCardContext);
  return _react.createElement(
    _Anchor.Anchor,
    {
      as: 'label',
      ref: ref,
      htmlFor: inputId,
      ...rest,
    },
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
const FileUploadCardInput = _react.forwardRef((props, ref) => {
  let { children, onChange, id, ...rest } = props;
  let { files, onFilesChange, setInternalFiles, inputId, setInputId } = (0,
  _index.useSafeContext)(FileUploadCardContext);
  let setNativeFilesRef = _react.useCallback(
    (node) => {
      if (!node || !(0, _index.getWindow)()?.DataTransfer) return;
      let dataTransfer = new DataTransfer();
      dataTransfer.items.clear();
      Array.from(files).forEach((file) => dataTransfer.items.add(file));
      node.files = dataTransfer.files;
    },
    [files],
  );
  let refs = (0, _index.useMergedRefs)(ref, setNativeFilesRef);
  _react.useEffect(() => {
    if (id && id !== inputId) setInputId(id);
  }, [id, inputId, setInputId]);
  return _react.createElement(
    _react.Fragment,
    null,
    _react.createElement(_VisuallyHidden.VisuallyHidden, {
      as: 'input',
      type: 'file',
      unhideOnFocus: false,
      onChange: (0, _index.mergeEventHandlers)(onChange, (e) => {
        let _files = Array.from(e.currentTarget.files || []);
        onFilesChange?.(_files);
        setInternalFiles(_files);
      }),
      ref: refs,
      id: id ?? inputId,
      ...rest,
    }),
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  FileUploadCardInput.displayName = 'FileUploadCard.Input';
const FileUploadCardComponent = _react.forwardRef((props, ref) => {
  let {
    className,
    children,
    files: filesProp,
    onFilesChange,
    emptyCard = _react.createElement(_FileEmptyCard.FileEmptyCard, null),
    input,
    ...rest
  } = props;
  let [internalFiles, setInternalFiles] = _react.useState();
  let uid = (0, _index.useId)();
  let [inputId, setInputId] = _react.useState(uid);
  let files = filesProp ?? internalFiles ?? [];
  return _react.createElement(
    FileUploadCardContext.Provider,
    {
      value: {
        files,
        onFilesChange,
        setInternalFiles,
        inputId,
        setInputId,
      },
    },
    files?.length
      ? _react.createElement(
          _index.Box,
          {
            className: (0, _classnames.default)('iui-file-card', className),
            ref: ref,
            ...rest,
          },
          children ??
            _react.createElement(
              _react.Fragment,
              null,
              _react.createElement(FileUploadCard.Icon, null),
              _react.createElement(
                FileUploadCard.Info,
                null,
                _react.createElement(FileUploadCard.Title, null),
                _react.createElement(FileUploadCard.Description, null),
              ),
              _react.createElement(
                FileUploadCard.Action,
                null,
                _react.createElement(
                  FileUploadCard.InputLabel,
                  null,
                  'Replace',
                ),
              ),
            ),
        )
      : emptyCard,
    input ?? _react.createElement(FileUploadCard.Input, null),
  );
});
const FileUploadCard = Object.assign(FileUploadCardComponent, {
  Icon: FileUploadCardIcon,
  Info: FileUploadCardInfo,
  Title: FileUploadCardTitle,
  Description: FileUploadCardDescription,
  Action: FileUploadCardAction,
  InputLabel: FileUploadCardInputLabel,
  Input: FileUploadCardInput,
});
if ('development' === process.env.NODE_ENV)
  FileUploadCard.displayName = 'FileUploadCard';
const FileUploadCardContext = _react.createContext(void 0);
if ('development' === process.env.NODE_ENV)
  FileUploadCardContext.displayName = 'FileUploadCardContext';