@wulperstudio/cms/modern/components/AttachFile/AttachFile.js

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _Typography;
var _excluded = ["id", "onChange", "animation"];
/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
import React from 'react';
import { Icon } from '@iconify/react';
import { Box, useTheme, Typography } from '@mui/material';
import CircularProgress, { circularProgressClasses } from '@mui/material/CircularProgress';
import { WithoutFile, WrapperInputFile, InputFile } from './styled';
import { TextForLinesOutput } from '../TextForLinesOutput';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function CircularProgressWithLabel(props) {
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      position: 'relative',
      display: 'inline-flex'
    },
    children: [/*#__PURE__*/_jsx(CircularProgress, {
      size: 90,
      thickness: 4,
      variant: "determinate",
      value: 100,
      sx: {
        color: function color(theme) {
          return theme.palette.grey[theme.palette.mode === 'light' ? 100 : 800];
        }
      }
    }), /*#__PURE__*/_jsx(CircularProgress, Object.assign({
      variant: "determinate",
      size: 90,
      thickness: 4,
      sx: _defineProperty({
        color: function color(theme) {
          return theme.palette.primary.main;
        },
        position: 'absolute',
        left: 0
      }, "& .".concat(circularProgressClasses.circle), {
        strokeLinecap: 'round'
      })
    }, props)), /*#__PURE__*/_jsx(Box, {
      sx: {
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        position: 'absolute',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      },
      children: /*#__PURE__*/_jsx(Typography, {
        variant: "subtitle1",
        component: "div",
        color: "text.primary",
        fontWeight: 600,
        children: "".concat(Math.round(props.value), "%")
      })
    })]
  });
}
export var AttachFile = function AttachFile(_ref2) {
  var id = _ref2.id,
    onChange = _ref2.onChange,
    animation = _ref2.animation,
    rest = _objectWithoutProperties(_ref2, _excluded);
  var theme = useTheme();
  var _React$useState = React.useState(10),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    progress = _React$useState2[0],
    setProgress = _React$useState2[1];
  var _React$useState3 = React.useState(false),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    isLoadFile = _React$useState4[0],
    setIsLoadFile = _React$useState4[1];
  var _React$useState5 = React.useState(null),
    _React$useState6 = _slicedToArray(_React$useState5, 2),
    files = _React$useState6[0],
    setFiles = _React$useState6[1];
  var handleChange = function handleChange(e) {
    var _e$target;
    var filesConvert = Array.from((e == null || (_e$target = e.target) == null ? void 0 : _e$target.files) || []);
    setFiles(filesConvert);
    if (onChange) onChange(filesConvert);
  };
  React.useEffect(function () {
    var timer;
    if (files) {
      timer = setInterval(function () {
        setProgress(function (prevProgress) {
          return prevProgress >= 100 ? 0 : prevProgress + 10;
        });
      }, 800);
    }
    return function () {
      clearInterval(timer);
    };
  }, [files]);
  React.useEffect(function () {
    if (progress >= 100) {
      setIsLoadFile(true);
    }
  }, [progress]);
  return /*#__PURE__*/_jsxs("label", {
    htmlFor: id,
    children: [/*#__PURE__*/_jsx(WrapperInputFile, {
      children: /*#__PURE__*/_jsxs(WithoutFile, {
        isLoadFiles: Boolean(files),
        children: [files && (isLoadFile ? /*#__PURE__*/_jsx(Box, {
          sx: {
            bgcolor: 'primary.main',
            padding: '.2rem .5rem',
            borderRadius: '.4rem',
            maxWidth: 200
          },
          children: /*#__PURE__*/_jsx(TextForLinesOutput, {
            text: files[0].name,
            clines: 1,
            variant: "subtitle1",
            fontWeight: 600,
            color: "background.default"
          })
        }) : /*#__PURE__*/_jsx(CircularProgressWithLabel, {
          value: progress
        })), !files && /*#__PURE__*/_jsxs(Box, {
          sx: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '.7rem'
          },
          children: [/*#__PURE__*/_jsx(Icon, {
            icon: "line-md:downloading-loop",
            color: theme.palette.divider,
            width: "52",
            height: "52"
          }), _Typography || (_Typography = /*#__PURE__*/_jsxs(Typography, {
            textAlign: "center",
            fontWeight: 600,
            variant: "body1",
            children: ["Drag file here", ' ', /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(Box, {
              component: "span",
              fontWeight: 400,
              fontSize: "14px",
              color: "text.secondary",
              children: "or, click to browse"
            })]
          }))]
        })]
      })
    }), /*#__PURE__*/_jsx(InputFile, Object.assign({
      id: id,
      type: "file",
      onChange: function onChange(event) {
        return handleChange(event);
      }
    }, rest))]
  });
};
export default AttachFile;