@appbuckets/react-ui/Dropzone/atoms/DropzoneFiles.js

Just Another React UI Framework

'use strict';

var tslib = require('tslib');
var React = require('react');
var prettyBytes = require('pretty-bytes');
var useInputValue = require('../../hooks/useInputValue.js');
var Input = require('../../Input/Input.js');
var Item = require('../../Item/Item.js');
var Dropzone_context = require('../Dropzone.context.js');

function _interopDefaultLegacy(e) {
  return e && typeof e === 'object' && 'default' in e ? e : { default: e };
}

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(
          n,
          k,
          d.get
            ? d
            : {
                enumerable: true,
                get: function () {
                  return e[k];
                },
              }
        );
      }
    });
  }
  n['default'] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/ _interopNamespace(React);
var prettyBytes__default = /*#__PURE__*/ _interopDefaultLegacy(prettyBytes);

/* --------
 * Internal Component
 * -------- */
var DropzoneFileItem = function (props) {
  var file = props.file;
  // ----
  // State and Hook declaration
  // ----
  var _a = tslib.__read(useInputValue.useInputValue(file.name), 2),
    newItemName = _a[0],
    handleItemNameChange = _a[1];
  var _b = tslib.__read(React__namespace.useState(false), 2),
    isEditing = _b[0],
    setIsEditing = _b[1];
  var dropzone = Dropzone_context.useDropzone();
  // ----
  // Remove the isEditing state on upload
  // ----
  React__namespace.useEffect(
    function () {
      if (dropzone.isUploading) {
        setIsEditing(false);
      }
    },
    [dropzone.isUploading]
  );
  // ----
  // Handlers
  // ----
  var handleEditStart = React__namespace.useCallback(
    function () {
      setIsEditing(true);
    },
    [setIsEditing]
  );
  var handleEditEnd = React__namespace.useCallback(
    function () {
      /** Save the new Item name */
      dropzone.editFile(
        tslib.__assign(tslib.__assign({}, file), {
          name: newItemName.length ? newItemName : file.name,
        })
      );
      setIsEditing(false);
    },
    [dropzone, file, newItemName, setIsEditing]
  );
  var handleFileRemove = React__namespace.useCallback(
    function () {
      dropzone.deleteFile(file);
    },
    [dropzone, file]
  );
  // ----
  // Memoized Parts
  // ----
  var itemHeader = React__namespace.useMemo(
    function () {
      if (!isEditing) {
        return file.name;
      }
      return React__namespace.createElement(Input, {
        autoFocus: true,
        selectAllOnClick: true,
        value: newItemName,
        onChange: handleItemNameChange,
        actions: [
          {
            key: 1,
            disabled: !newItemName,
            icon: 'check',
            success: true,
            onClick: handleEditEnd,
          },
        ],
      });
    },
    [isEditing, file.name, newItemName, handleItemNameChange, handleEditEnd]
  );
  // ----
  // Component Render
  // ----
  return React__namespace.createElement(Item, {
    centered: true,
    loading: file.state.isUploading,
    disabled: dropzone.isUploading || file.state.success,
    primary: file.state.isUploading,
    danger: file.state.error,
    success: file.state.success,
    avatar: {
      icon: file.state.isUploading
        ? 'sync'
        : file.state.error
        ? 'times'
        : file.state.success
        ? 'check'
        : file.icon,
      type: 'square',
    },
    header: itemHeader,
    content: !isEditing
      ? prettyBytes__default['default'](file.size)
      : undefined,
    tools: [
      dropzone.props.editItemTool &&
        !isEditing &&
        tslib.__assign(tslib.__assign({}, dropzone.props.editItemTool), {
          key: 0,
          onClick: handleEditStart,
        }),
      dropzone.props.removeItemTool &&
        tslib.__assign(tslib.__assign({}, dropzone.props.removeItemTool), {
          key: 1,
          onClick: handleFileRemove,
        }),
    ],
  });
};
/* --------
 * Component Definition
 * -------- */
var DropzoneFiles = function () {
  var dropzone = Dropzone_context.useDropzone();
  if (!dropzone.files.length) {
    return null;
  }
  return React__namespace.createElement(
    Item.Group,
    { relaxed: true, divided: true },
    dropzone.files.map(function (file) {
      return React__namespace.createElement(DropzoneFileItem, {
        key: file.id,
        file: file,
      });
    })
  );
};
DropzoneFiles.displayName = 'DropzoneFiles';

module.exports = DropzoneFiles;