@wulperstudio/cms/modern/components/AttachFileDrop/Results.js

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useCallback } from 'react';
import { alpha, useTheme } from '@mui/material';
import { Icon } from '@iconify/react';
import { DeleteWrapper, FixedElement, IconButton, WrapperElement, WrapperResults, ImageInputFile } from './styled';
import { ICONS_NAME } from '../../helpers/icons';
import { validateMimeImage } from './helper';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
var icons = {
  file: 'akar-icons:file',
  audio: 'akar-icons:music',
  document: 'carbon:document',
  video: 'akar-icons:video'
};
export var Results = function Results(_ref) {
  var multiple = _ref.multiple,
    files = _ref.files,
    disabled = _ref.disabled,
    variantShape = _ref.variantShape,
    variantSize = _ref.variantSize,
    filesDb = _ref.filesDB,
    deleteFile = _ref.deleteFile,
    deleteFilesDb = _ref.deleteFilesDb,
    _ref$iconSet = _ref.iconSet,
    iconSet = _ref$iconSet === void 0 ? 'file' : _ref$iconSet,
    _ref$customIcons = _ref.customIcons,
    customIcons = _ref$customIcons === void 0 ? icons : _ref$customIcons,
    shapeProps = _ref.shapeProps;
  var theme = useTheme();
  var ref = React.useRef(null);
  var _React$useState = React.useState({
      isDragging: false,
      lastClientX: 0
    }),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    dragHelpers = _React$useState2[0],
    setDragHelpers = _React$useState2[1];

  // Mouse Events compatible with desktop devices
  var handleMouseDown = useCallback(function (e) {
    setDragHelpers(function (prev) {
      return Object.assign({}, prev, {
        isDragging: true,
        lastClientX: e.clientX
      });
    });
  }, []);
  var handleMouseMove = useCallback(function (e) {
    if (dragHelpers.isDragging && ref.current) {
      var deltaX = e.clientX - dragHelpers.lastClientX;
      var _ref$current = ref.current,
        clientWidth = _ref$current.clientWidth,
        scrollWidth = _ref$current.scrollWidth;
      var maxScrollLeft = scrollWidth - clientWidth;
      if (deltaX !== 0) {
        ref.current.scrollLeft -= deltaX;
      }
      if (deltaX !== 0 && ref.current.scrollLeft <= 0) {
        ref.current.scrollLeft = 0;
      }
      if (deltaX !== 0 && ref.current.scrollLeft >= maxScrollLeft) {
        ref.current.scrollLeft = maxScrollLeft;
      }
      setDragHelpers(function (prev) {
        return Object.assign({}, prev, {
          lastClientX: e.clientX
        });
      });
    }
  }, [ref, dragHelpers]);
  var handleMouseUp = useCallback(function (_e) {
    setDragHelpers(function (prev) {
      return Object.assign({}, prev, {
        isDragging: false
      });
    });
  }, []);

  // Touch Events compatible with mobile devices
  var handleTouchStart = useCallback(function (e) {
    setDragHelpers(function (prev) {
      return Object.assign({}, prev, {
        isDragging: true,
        lastClientX: e.touches[0].clientX
      });
    });
  }, []);
  var handleTouchMove = useCallback(function (e) {
    if (dragHelpers.isDragging && ref.current) {
      var deltaX = e.touches[0].clientX - dragHelpers.lastClientX;
      var _ref$current2 = ref.current,
        clientWidth = _ref$current2.clientWidth,
        scrollWidth = _ref$current2.scrollWidth;
      var maxScrollLeft = scrollWidth - clientWidth;
      if (deltaX !== 0) {
        ref.current.scrollLeft -= deltaX;
      }
      if (deltaX !== 0 && ref.current.scrollLeft <= 0) {
        ref.current.scrollLeft = 0;
      }
      if (deltaX !== 0 && ref.current.scrollLeft >= maxScrollLeft) {
        ref.current.scrollLeft = maxScrollLeft;
      }
      ref.current.scrollLeft -= deltaX;
      setDragHelpers(function (prev) {
        return Object.assign({}, prev, {
          lastClientX: e.touches[0].clientX
        });
      });
    }
  }, [ref, dragHelpers]);
  var handleTouchEnd = useCallback(function (_e) {
    setDragHelpers(function (prev) {
      return Object.assign({}, prev, {
        isDragging: false
      });
    });
  }, []);
  return /*#__PURE__*/_jsx(WrapperResults, {
    ref: ref,
    onMouseUp: handleMouseUp,
    onMouseMove: handleMouseMove,
    onMouseDown: handleMouseDown,
    onTouchStart: handleTouchStart,
    onTouchEnd: handleTouchEnd,
    onTouchMove: handleTouchMove,
    children: /*#__PURE__*/_jsxs(_Fragment, {
      children: [multiple && (files == null ? void 0 : files.map(function (_ref2) {
        var id = _ref2.id,
          file = _ref2.file;
        return /*#__PURE__*/_jsxs(DeleteWrapper, {
          children: [!disabled && /*#__PURE__*/_jsx(FixedElement, {
            children: /*#__PURE__*/_jsx(IconButton, {
              size: "small",
              onClick: function onClick(e) {
                e.stopPropagation();
                deleteFile == null || deleteFile(id);
              },
              sx: {
                backgroundColor: 'background.default',
                width: '24px',
                height: '24px',
                '&:hover': {
                  backgroundColor: alpha(theme.palette.background["default"], 0.9)
                }
              },
              children: /*#__PURE__*/_jsx(Icon, {
                icon: ICONS_NAME.close,
                color: theme.palette.text.secondary
              })
            })
          }), /*#__PURE__*/_jsx(WrapperElement, Object.assign({
            variant: variantShape,
            size: variantSize,
            border: !file.type.includes('image/')
          }, shapeProps, {
            onClick: function onClick(e) {
              var _shapeProps$onClick;
              e.stopPropagation();
              shapeProps == null || (_shapeProps$onClick = shapeProps.onClick) == null || _shapeProps$onClick.call(shapeProps, e);
            },
            children: file.type.includes('image/') ? /*#__PURE__*/_jsx(ImageInputFile, {
              src: URL.createObjectURL(file),
              alt: file.name || 'unknown'
            }) : /*#__PURE__*/_jsx(Icon, {
              icon: customIcons[iconSet],
              width: "48px",
              color: "inherit"
            })
          }))]
        }, id);
      })), multiple && (filesDb == null ? void 0 : filesDb.map(function (_ref3) {
        var id = _ref3.id,
          url = _ref3.url;
        return /*#__PURE__*/_jsxs(DeleteWrapper, {
          children: [!disabled && /*#__PURE__*/_jsx(FixedElement, {
            children: /*#__PURE__*/_jsx(IconButton, {
              size: "small",
              onClick: function onClick(e) {
                e.stopPropagation();
                deleteFilesDb == null || deleteFilesDb(id);
              },
              sx: {
                width: '24px',
                height: '24px',
                backgroundColor: 'background.default',
                '&:hover': {
                  backgroundColor: alpha(theme.palette.background["default"], 0.9)
                }
              },
              children: /*#__PURE__*/_jsx(Icon, {
                icon: ICONS_NAME.close,
                color: theme.palette.text.secondary
              })
            })
          }), /*#__PURE__*/_jsx(WrapperElement, Object.assign({
            size: variantSize,
            variant: variantShape,
            border: !validateMimeImage(url)
          }, shapeProps, {
            onClick: function onClick(e) {
              var _shapeProps$onClick2;
              e.stopPropagation();
              shapeProps == null || (_shapeProps$onClick2 = shapeProps.onClick) == null || _shapeProps$onClick2.call(shapeProps, e);
            },
            children: validateMimeImage(url) ? /*#__PURE__*/_jsx(ImageInputFile, {
              src: url,
              alt: url || 'unknown'
            }) : /*#__PURE__*/_jsx(Icon, {
              icon: customIcons[iconSet],
              width: "48px",
              color: "inherit"
            })
          }))]
        }, id);
      }))]
    })
  });
};