@cerberus-design/react/build/modern/chunk-KJYNKQX4.js

The Cerberus Design React component library.

import {
  ProgressBar
} from "./chunk-BHZN6P2K.js";
import {
  Field
} from "./chunk-6LU43Z4K.js";
import {
  IconButton
} from "./chunk-ZFVQQJIQ.js";
import {
  Avatar
} from "./chunk-AOLWIMWV.js";
import {
  FieldHelperText
} from "./chunk-5L5PT37R.js";
import {
  useCerberusContext
} from "./chunk-GITT5645.js";

// src/components/file-upload/file-status.tsx
import {
  useCallback,
  useMemo
} from "react";
import { fileStatus } from "styled-system/recipes";
import { css, cx } from "styled-system/css";
import { hstack, vstack } from "styled-system/patterns";
import { jsx, jsxs } from "react/jsx-runtime";
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 = useMemo(() => getStatusActionLabel(status), [status]);
  const palette = useMemo(() => getPalette(status), [status]);
  const modalIconPalette = useMemo(() => getModalIconPalette(status), [status]);
  const styles = useMemo(() => {
    switch (status) {
      case "todo" /* TODO */:
        return fileStatus({ status: "todo" });
      case "processing" /* PROCESSING */:
        return fileStatus({ status: "processing" });
      case "done" /* DONE */:
        return fileStatus({ status: "done" });
      case "error" /* ERROR */:
        return fileStatus({ status: "error" });
      default:
        return fileStatus();
    }
  }, [status]);
  const handleClick = useCallback(
    (e) => {
      const actionStatus = getStatusActionLabel(
        status
      ).toLocaleLowerCase();
      onClick(actionStatus, e);
    },
    [onClick, status]
  );
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ...nativeProps,
      className: cx(nativeProps.className, styles.root, hstack()),
      children: [
        /* @__PURE__ */ jsx(
          Avatar,
          {
            gradient: modalIconPalette,
            fallback: /* @__PURE__ */ jsx(MatchFileStatusIcon, { size: 24, status })
          }
        ),
        /* @__PURE__ */ jsxs(
          "div",
          {
            className: vstack({
              alignItems: "flex-start",
              gap: "0.12rem",
              w: "full"
            }),
            children: [
              /* @__PURE__ */ jsx(
                "small",
                {
                  className: css({
                    color: "page.text.initial",
                    textStyle: "label-sm"
                  }),
                  children: file
                }
              ),
              /* @__PURE__ */ jsx(
                ProgressBar,
                {
                  id: props.id,
                  label: "File upload status",
                  now,
                  size: "sm"
                }
              ),
              /* @__PURE__ */ jsx(Field, { label: "", invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ jsx(
                FieldHelperText,
                {
                  className: css({
                    color: "page.text.100"
                  }),
                  id: `help:${file}`,
                  children: /* @__PURE__ */ jsx(MatchFileStatusText, { status, now })
                }
              ) })
            ]
          }
        ),
        /* @__PURE__ */ jsx(
          IconButton,
          {
            ariaLabel: actionLabel,
            onClick: handleClick,
            palette,
            size: "sm",
            children: /* @__PURE__ */ jsx(MatchStatusAction, { status })
          }
        )
      ]
    }
  );
}
function MatchFileStatusIcon(props) {
  const { icons } = useCerberusContext();
  const {
    waitingFileUploader: TodoIcon,
    fileUploader: FileUploaderIcon,
    invalidAlt: InvalidIcon,
    successNotification: DoneIcon
  } = icons;
  switch (props.status) {
    case "todo" /* TODO */:
      return /* @__PURE__ */ jsx(TodoIcon, { size: props.size });
    case "processing" /* PROCESSING */:
      return /* @__PURE__ */ jsx(FileUploaderIcon, { size: props.size });
    case "done" /* DONE */:
      return /* @__PURE__ */ jsx(DoneIcon, { size: props.size });
    case "error" /* ERROR */:
      return /* @__PURE__ */ 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 } = useCerberusContext();
  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = icons;
  switch (props.status) {
    case "todo" /* TODO */:
    case "processing" /* PROCESSING */:
      return /* @__PURE__ */ jsx(CloseIcon, {});
    case "error" /* ERROR */:
      return /* @__PURE__ */ jsx(RedoIcon, {});
    case "done" /* DONE */:
      return /* @__PURE__ */ 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";
  }
}

export {
  processStatus,
  FileStatus
};
//# sourceMappingURL=chunk-KJYNKQX4.js.map