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

Just Another React UI Framework

import { __read, __assign } from 'tslib';
import * as React from 'react';
import prettyBytes from 'pretty-bytes';
import { useInputValue } from '../../hooks/useInputValue.js';
import Input from '../../Input/Input.js';
import Item from '../../Item/Item.js';
import { useDropzone } from '../Dropzone.context.js';

/* --------
 * Internal Component
 * -------- */
var DropzoneFileItem = function (props) {
  var file = props.file;
  // ----
  // State and Hook declaration
  // ----
  var _a = __read(useInputValue(file.name), 2),
    newItemName = _a[0],
    handleItemNameChange = _a[1];
  var _b = __read(React.useState(false), 2),
    isEditing = _b[0],
    setIsEditing = _b[1];
  var dropzone = useDropzone();
  // ----
  // Remove the isEditing state on upload
  // ----
  React.useEffect(
    function () {
      if (dropzone.isUploading) {
        setIsEditing(false);
      }
    },
    [dropzone.isUploading]
  );
  // ----
  // Handlers
  // ----
  var handleEditStart = React.useCallback(
    function () {
      setIsEditing(true);
    },
    [setIsEditing]
  );
  var handleEditEnd = React.useCallback(
    function () {
      /** Save the new Item name */
      dropzone.editFile(
        __assign(__assign({}, file), {
          name: newItemName.length ? newItemName : file.name,
        })
      );
      setIsEditing(false);
    },
    [dropzone, file, newItemName, setIsEditing]
  );
  var handleFileRemove = React.useCallback(
    function () {
      dropzone.deleteFile(file);
    },
    [dropzone, file]
  );
  // ----
  // Memoized Parts
  // ----
  var itemHeader = React.useMemo(
    function () {
      if (!isEditing) {
        return file.name;
      }
      return React.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.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(file.size) : undefined,
    tools: [
      dropzone.props.editItemTool &&
        !isEditing &&
        __assign(__assign({}, dropzone.props.editItemTool), {
          key: 0,
          onClick: handleEditStart,
        }),
      dropzone.props.removeItemTool &&
        __assign(__assign({}, dropzone.props.removeItemTool), {
          key: 1,
          onClick: handleFileRemove,
        }),
    ],
  });
};
/* --------
 * Component Definition
 * -------- */
var DropzoneFiles = function () {
  var dropzone = useDropzone();
  if (!dropzone.files.length) {
    return null;
  }
  return React.createElement(
    Item.Group,
    { relaxed: true, divided: true },
    dropzone.files.map(function (file) {
      return React.createElement(DropzoneFileItem, {
        key: file.id,
        file: file,
      });
    })
  );
};
DropzoneFiles.displayName = 'DropzoneFiles';

export { DropzoneFiles as default };