Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 3x 29x 29x 29x 29x 29x 2x 2x 29x 1x 1x 5x 5x | import Chip from "@mui/material/Chip";
import { useTheme } from "@mui/material/styles";
const STATUS_MAP = {
archived: { label: "Archived", color: "warning" },
archive: { label: "Archived", color: "warning" },
inactive: { label: "Inactive", color: "default" },
hidden: { label: "Hidden", color: "default" },
disabled: { label: "Disabled", color: "default" },
active: { label: "Active", color: "success" },
in_use: { label: "Active", color: "success" },
visible: { label: "Active", color: "success" },
enabled: { label: "Active", color: "success" },
};
/**
* @param {string | undefined} value
*/
function resolveStatus(value) {
const key = String(value || "")
.toLowerCase()
.replace(/\s+/g, "_");
return STATUS_MAP[key] || null;
}
/**
* Soft status chip for archive/active states.
* @param {{ status?: string, label?: string, size?: "small" | "medium", tone?: "default" | "contrast", sx?: object }} props
*/
export default function StatusChip({ status, label, size = "small", tone = "default", sx, ...rest }) {
const theme = useTheme();
const config = resolveStatus(status) || { label: label || "Unknown", color: "default" };
const contrastSx =
tone === "contrast"
? (() => {
const paletteColor = theme.palette[config.color] || theme.palette.warning;
return {
bgcolor: paletteColor.lighter,
color: paletteColor.dark,
border: "none",
boxShadow: "none",
fontFamily: theme.typography.fontFamily,
"&:hover": {
bgcolor: paletteColor.light,
color: paletteColor.darker,
},
};
})()
: { fontFamily: theme.typography.fontFamily };
return (
<Chip
label={label ?? config.label}
size={size}
variant="soft"
color={config.color}
sx={{ fontWeight: 600, ...contrastSx, ...sx }}
{...rest}
/>
);
}
/** Soft warning chip for archived entities. */
export function ArchivedChip({ tone = "default", sx, ...rest }) {
return <StatusChip status="archived" tone={tone} sx={sx} {...rest} />;
}
/** Soft success chip for active entities. */
export function ActiveChip({ sx, ...rest }) {
return <StatusChip status="active" sx={sx} {...rest} />;
}
/**
* Chip for archive_status field values (`Archive` / `In_Use`).
* @param {{ archiveStatus?: string, sx?: object }} props
*/
export function ArchiveStatusChip({ archiveStatus, sx, ...rest }) {
const archived = (archiveStatus ?? "In_Use") === "Archive";
return <StatusChip status={archived ? "archived" : "active"} sx={sx} {...rest} />;
}
|