taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
461 lines (460 loc) • 12.5 kB
JavaScript
import { c as Q, d as S } from "./index-dFotuATn.js";
import * as X from "react";
import o from "prop-types";
import { b4 as I, z as Y, A as w, G as rr, b5 as j, H as N, aC as n, I as or, J as ar, b2 as tr } from "./JBrowsePanel-uJIA-L6s.js";
import { jsxs as nr, jsx as er } from "react/jsx-runtime";
function ir(a) {
const {
badgeContent: r,
invisible: t = !1,
max: e = 99,
showZero: l = !1
} = a, f = I({
badgeContent: r,
max: e
});
let c = t;
t === !1 && r === 0 && !l && (c = !0);
const {
badgeContent: i,
max: p = e
} = c ? f : a, m = i && Number(i) > p ? `${p}+` : i;
return {
badgeContent: i,
invisible: c,
max: p,
displayValue: m
};
}
function sr(a) {
return w("MuiBadge", a);
}
const s = Y("MuiBadge", [
"root",
"badge",
"dot",
"standard",
"anchorOriginTopRight",
"anchorOriginBottomRight",
"anchorOriginTopLeft",
"anchorOriginBottomLeft",
"invisible",
"colorError",
"colorInfo",
"colorPrimary",
"colorSecondary",
"colorSuccess",
"colorWarning",
"overlapRectangular",
"overlapCircular",
// TODO: v6 remove the overlap value from these class keys
"anchorOriginTopLeftCircular",
"anchorOriginTopLeftRectangular",
"anchorOriginTopRightCircular",
"anchorOriginTopRightRectangular",
"anchorOriginBottomLeftCircular",
"anchorOriginBottomLeftRectangular",
"anchorOriginBottomRightCircular",
"anchorOriginBottomRightRectangular"
]), h = 10, v = 4, lr = (a) => {
const {
color: r,
anchorOrigin: t,
invisible: e,
overlap: l,
variant: f,
classes: c = {}
} = a, i = {
root: ["root"],
badge: ["badge", f, e && "invisible", `anchorOrigin${n(t.vertical)}${n(t.horizontal)}`, `anchorOrigin${n(t.vertical)}${n(t.horizontal)}${n(l)}`, `overlap${n(l)}`, r !== "default" && `color${n(r)}`]
};
return or(i, sr, c);
}, cr = N("span", {
name: "MuiBadge",
slot: "Root"
})({
position: "relative",
display: "inline-flex",
// For correct alignment with the text.
verticalAlign: "middle",
flexShrink: 0
}), pr = N("span", {
name: "MuiBadge",
slot: "Badge",
overridesResolver: (a, r) => {
const {
ownerState: t
} = a;
return [r.badge, r[t.variant], r[`anchorOrigin${n(t.anchorOrigin.vertical)}${n(t.anchorOrigin.horizontal)}${n(t.overlap)}`], t.color !== "default" && r[`color${n(t.color)}`], t.invisible && r.invisible];
}
})(ar(({
theme: a
}) => ({
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "center",
alignContent: "center",
alignItems: "center",
position: "absolute",
boxSizing: "border-box",
fontFamily: a.typography.fontFamily,
fontWeight: a.typography.fontWeightMedium,
fontSize: a.typography.pxToRem(12),
minWidth: h * 2,
lineHeight: 1,
padding: "0 6px",
height: h * 2,
borderRadius: h,
zIndex: 1,
// Render the badge on top of potential ripples.
transition: a.transitions.create("transform", {
easing: a.transitions.easing.easeInOut,
duration: a.transitions.duration.enteringScreen
}),
variants: [...Object.entries(a.palette).filter(tr(["contrastText"])).map(([r]) => ({
props: {
color: r
},
style: {
backgroundColor: (a.vars || a).palette[r].main,
color: (a.vars || a).palette[r].contrastText
}
})), {
props: {
variant: "dot"
},
style: {
borderRadius: v,
height: v * 2,
minWidth: v * 2,
padding: 0
}
}, {
props: ({
ownerState: r
}) => r.anchorOrigin.vertical === "top" && r.anchorOrigin.horizontal === "right" && r.overlap === "rectangular",
style: {
top: 0,
right: 0,
transform: "scale(1) translate(50%, -50%)",
transformOrigin: "100% 0%",
[`&.${s.invisible}`]: {
transform: "scale(0) translate(50%, -50%)"
}
}
}, {
props: ({
ownerState: r
}) => r.anchorOrigin.vertical === "bottom" && r.anchorOrigin.horizontal === "right" && r.overlap === "rectangular",
style: {
bottom: 0,
right: 0,
transform: "scale(1) translate(50%, 50%)",
transformOrigin: "100% 100%",
[`&.${s.invisible}`]: {
transform: "scale(0) translate(50%, 50%)"
}
}
}, {
props: ({
ownerState: r
}) => r.anchorOrigin.vertical === "top" && r.anchorOrigin.horizontal === "left" && r.overlap === "rectangular",
style: {
top: 0,
left: 0,
transform: "scale(1) translate(-50%, -50%)",
transformOrigin: "0% 0%",
[`&.${s.invisible}`]: {
transform: "scale(0) translate(-50%, -50%)"
}
}
}, {
props: ({
ownerState: r
}) => r.anchorOrigin.vertical === "bottom" && r.anchorOrigin.horizontal === "left" && r.overlap === "rectangular",
style: {
bottom: 0,
left: 0,
transform: "scale(1) translate(-50%, 50%)",
transformOrigin: "0% 100%",
[`&.${s.invisible}`]: {
transform: "scale(0) translate(-50%, 50%)"
}
}
}, {
props: ({
ownerState: r
}) => r.anchorOrigin.vertical === "top" && r.anchorOrigin.horizontal === "right" && r.overlap === "circular",
style: {
top: "14%",
right: "14%",
transform: "scale(1) translate(50%, -50%)",
transformOrigin: "100% 0%",
[`&.${s.invisible}`]: {
transform: "scale(0) translate(50%, -50%)"
}
}
}, {
props: ({
ownerState: r
}) => r.anchorOrigin.vertical === "bottom" && r.anchorOrigin.horizontal === "right" && r.overlap === "circular",
style: {
bottom: "14%",
right: "14%",
transform: "scale(1) translate(50%, 50%)",
transformOrigin: "100% 100%",
[`&.${s.invisible}`]: {
transform: "scale(0) translate(50%, 50%)"
}
}
}, {
props: ({
ownerState: r
}) => r.anchorOrigin.vertical === "top" && r.anchorOrigin.horizontal === "left" && r.overlap === "circular",
style: {
top: "14%",
left: "14%",
transform: "scale(1) translate(-50%, -50%)",
transformOrigin: "0% 0%",
[`&.${s.invisible}`]: {
transform: "scale(0) translate(-50%, -50%)"
}
}
}, {
props: ({
ownerState: r
}) => r.anchorOrigin.vertical === "bottom" && r.anchorOrigin.horizontal === "left" && r.overlap === "circular",
style: {
bottom: "14%",
left: "14%",
transform: "scale(1) translate(-50%, 50%)",
transformOrigin: "0% 100%",
[`&.${s.invisible}`]: {
transform: "scale(0) translate(-50%, 50%)"
}
}
}, {
props: {
invisible: !0
},
style: {
transition: a.transitions.create("transform", {
easing: a.transitions.easing.easeInOut,
duration: a.transitions.duration.leavingScreen
})
}
}]
})));
function D(a) {
return {
vertical: (a == null ? void 0 : a.vertical) ?? "top",
horizontal: (a == null ? void 0 : a.horizontal) ?? "right"
};
}
const gr = /* @__PURE__ */ X.forwardRef(function(r, t) {
const e = rr({
props: r,
name: "MuiBadge"
}), {
anchorOrigin: l,
className: f,
classes: c,
component: i,
components: p = {},
componentsProps: m = {},
children: A,
overlap: O = "rectangular",
color: y = "default",
invisible: F = !1,
max: L = 99,
badgeContent: x,
slots: g,
slotProps: d,
showZero: T = !1,
variant: b = "standard",
...M
} = e, {
badgeContent: P,
invisible: U,
max: V,
displayValue: W
} = ir({
max: L,
invisible: F,
badgeContent: x,
showZero: T
}), k = I({
anchorOrigin: D(l),
color: y,
overlap: O,
variant: b,
badgeContent: x
}), C = U || P == null && b !== "dot", {
color: E = y,
overlap: H = O,
anchorOrigin: Z,
variant: R = b
} = C ? k : e, _ = D(Z), B = R !== "dot" ? W : void 0, u = {
...e,
badgeContent: P,
invisible: C,
max: V,
displayValue: B,
showZero: T,
anchorOrigin: _,
color: E,
overlap: H,
variant: R
}, $ = lr(u), z = {
slots: {
root: (g == null ? void 0 : g.root) ?? p.Root,
badge: (g == null ? void 0 : g.badge) ?? p.Badge
},
slotProps: {
root: (d == null ? void 0 : d.root) ?? m.root,
badge: (d == null ? void 0 : d.badge) ?? m.badge
}
}, [G, J] = j("root", {
elementType: cr,
externalForwardedProps: {
...z,
...M
},
ownerState: u,
className: Q($.root, f),
ref: t,
additionalProps: {
as: i
}
}), [q, K] = j("badge", {
elementType: pr,
externalForwardedProps: z,
ownerState: u,
className: $.badge
});
return /* @__PURE__ */ nr(G, {
...J,
children: [A, /* @__PURE__ */ er(q, {
...K,
children: B
})]
});
});
S.process.env.NODE_ENV !== "production" && (gr.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The anchor of the badge.
* @default {
* vertical: 'top',
* horizontal: 'right',
* }
*/
anchorOrigin: o.shape({
horizontal: o.oneOf(["left", "right"]),
vertical: o.oneOf(["bottom", "top"])
}),
/**
* The content rendered within the badge.
*/
badgeContent: o.node,
/**
* The badge will be added relative to this node.
*/
children: o.node,
/**
* Override or extend the styles applied to the component.
*/
classes: o.object,
/**
* @ignore
*/
className: o.string,
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'default'
*/
color: o.oneOfType([o.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), o.string]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: o.elementType,
/**
* The components used for each slot inside.
*
* @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*
* @default {}
*/
components: o.shape({
Badge: o.elementType,
Root: o.elementType
}),
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*
* @default {}
*/
componentsProps: o.shape({
badge: o.oneOfType([o.func, o.object]),
root: o.oneOfType([o.func, o.object])
}),
/**
* If `true`, the badge is invisible.
* @default false
*/
invisible: o.bool,
/**
* Max count to show.
* @default 99
*/
max: o.number,
/**
* Wrapped shape the badge should overlap.
* @default 'rectangular'
*/
overlap: o.oneOf(["circular", "rectangular"]),
/**
* Controls whether the badge is hidden when `badgeContent` is zero.
* @default false
*/
showZero: o.bool,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: o.shape({
badge: o.oneOfType([o.func, o.object]),
root: o.oneOfType([o.func, o.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: o.shape({
badge: o.elementType,
root: o.elementType
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
/**
* The variant to use.
* @default 'standard'
*/
variant: o.oneOfType([o.oneOf(["dot", "standard"]), o.string])
});
export {
gr as B
};
//# sourceMappingURL=Badge-DOFO0p9p.js.map