@cerberus-design/react/dist/components/file-upload/file-status.cjs

The Cerberus Design React component library.

'use client';
'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const recipes = require('styled-system/recipes');
const css = require('styled-system/css');
const patterns = require('styled-system/patterns');
const cerberus = require('../../context/cerberus.cjs');
const progressBar = require('../progress/progress-bar.cjs');
const avatar = require('../avatar/avatar.cjs');
const field = require('../field/field.cjs');
const primitives = require('../field/primitives.cjs');
const button = require('../icon-button/button.cjs');

var processStatus = /* @__PURE__ */ ((processStatus2) => {
  processStatus2["TODO"] = "todo";
  processStatus2["PROCESSING"] = "processing";
  processStatus2["DONE"] = "done";
  processStatus2["ERROR"] = "error";
  return processStatus2;
})(processStatus || {});
function FileStatus(props) {
  const { file, now, status, onClick, ...nativeProps } = props;
  const actionLabel = React.useMemo(() => getStatusActionLabel(status), [status]);
  const palette = React.useMemo(() => getPalette(status), [status]);
  const modalIconPalette = React.useMemo(() => getModalIconPalette(status), [status]);
  const styles = React.useMemo(() => {
    switch (status) {
      case "todo" /* TODO */:
        return recipes.fileStatus({ status: "todo" });
      case "processing" /* PROCESSING */:
        return recipes.fileStatus({ status: "processing" });
      case "done" /* DONE */:
        return recipes.fileStatus({ status: "done" });
      case "error" /* ERROR */:
        return recipes.fileStatus({ status: "error" });
      default:
        return recipes.fileStatus();
    }
  }, [status]);
  const handleClick = React.useCallback(
    (e) => {
      const actionStatus = getStatusActionLabel(
        status
      ).toLocaleLowerCase();
      onClick(actionStatus, e);
    },
    [onClick, status]
  );
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      ...nativeProps,
      className: css.cx(nativeProps.className, styles.root, patterns.hstack()),
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          avatar.Avatar,
          {
            gradient: modalIconPalette,
            fallback: /* @__PURE__ */ jsxRuntime.jsx(MatchFileStatusIcon, { size: 24, status })
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsxs(
          "div",
          {
            className: patterns.vstack({
              alignItems: "flex-start",
              gap: "0.12rem",
              w: "full"
            }),
            children: [
              /* @__PURE__ */ jsxRuntime.jsx(
                "small",
                {
                  className: css.css({
                    color: "page.text.initial",
                    textStyle: "label-sm"
                  }),
                  children: file
                }
              ),
              /* @__PURE__ */ jsxRuntime.jsx(
                progressBar.ProgressBar,
                {
                  id: props.id,
                  label: "File upload status",
                  now,
                  size: "sm"
                }
              ),
              /* @__PURE__ */ jsxRuntime.jsx(field.Field, { label: "", invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ jsxRuntime.jsx(
                primitives.FieldHelperText,
                {
                  className: css.css({
                    color: "page.text.100"
                  }),
                  id: `help:${file}`,
                  children: /* @__PURE__ */ jsxRuntime.jsx(MatchFileStatusText, { status, now })
                }
              ) })
            ]
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          button.IconButton,
          {
            ariaLabel: actionLabel,
            onClick: handleClick,
            palette,
            size: "sm",
            children: /* @__PURE__ */ jsxRuntime.jsx(MatchStatusAction, { status })
          }
        )
      ]
    }
  );
}
function MatchFileStatusIcon(props) {
  const { icons } = cerberus.useCerberusContext();
  const {
    waitingFileUploader: TodoIcon,
    fileUploader: FileUploaderIcon,
    invalidAlt: InvalidIcon,
    successNotification: DoneIcon
  } = icons;
  switch (props.status) {
    case "todo" /* TODO */:
      return /* @__PURE__ */ jsxRuntime.jsx(TodoIcon, { size: props.size });
    case "processing" /* PROCESSING */:
      return /* @__PURE__ */ jsxRuntime.jsx(FileUploaderIcon, { size: props.size });
    case "done" /* DONE */:
      return /* @__PURE__ */ jsxRuntime.jsx(DoneIcon, { size: props.size });
    case "error" /* ERROR */:
      return /* @__PURE__ */ jsxRuntime.jsx(InvalidIcon, { size: props.size });
    default:
      throw new Error("Unknown status");
  }
}
function MatchFileStatusText(props) {
  switch (props.status) {
    case "todo" /* TODO */:
      return "Waiting to upload";
    case "processing" /* PROCESSING */:
      return `${props.now}% Complete`;
    case "done" /* DONE */:
      return "File uploaded successfully";
    case "error" /* ERROR */:
      return "There was an error uploading the file";
    default:
      throw new Error("Invalid status");
  }
}
function MatchStatusAction(props) {
  const { icons } = cerberus.useCerberusContext();
  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = icons;
  switch (props.status) {
    case "todo" /* TODO */:
    case "processing" /* PROCESSING */:
      return /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {});
    case "error" /* ERROR */:
      return /* @__PURE__ */ jsxRuntime.jsx(RedoIcon, {});
    case "done" /* DONE */:
      return /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, {});
    default:
      throw new Error("Invalid status");
  }
}
function getStatusActionLabel(status) {
  switch (status) {
    case "todo" /* TODO */:
    case "processing" /* PROCESSING */:
      return "Cancel";
    case "error" /* ERROR */:
      return "Retry";
    case "done" /* DONE */:
      return "Delete";
    default:
      return "";
  }
}
function getPalette(status) {
  switch (status) {
    case "todo" /* TODO */:
    case "processing" /* PROCESSING */:
      return "danger";
    case "error" /* ERROR */:
      return "action";
    case "done" /* DONE */:
      return "danger";
    default:
      return "action";
  }
}
function getModalIconPalette(status) {
  switch (status) {
    case "todo" /* TODO */:
    case "processing" /* PROCESSING */:
      return "charon-light";
    case "error" /* ERROR */:
      return "hades-dark";
    case "done" /* DONE */:
      return "thanatos-dark";
    default:
      return "charon-light";
  }
}

exports.FileStatus = FileStatus;
exports.processStatus = processStatus;