taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
246 lines (245 loc) • 6.96 kB
JavaScript
import { d as b, c as $ } from "./index-dFotuATn.js";
import * as l from "react";
import t from "prop-types";
import { z as j, A as w, G as A, H as D, aC as s, I as E, J as P, be as M, bf as S, K as T } from "./JBrowsePanel-uJIA-L6s.js";
import { jsx as U } from "react/jsx-runtime";
const h = /* @__PURE__ */ l.createContext();
b.process.env.NODE_ENV !== "production" && (h.displayName = "TableContext");
const z = /* @__PURE__ */ l.createContext();
b.process.env.NODE_ENV !== "production" && (z.displayName = "Tablelvl2Context");
function V(e) {
return w("MuiTableCell", e);
}
const _ = j("MuiTableCell", ["root", "head", "body", "footer", "sizeSmall", "sizeMedium", "paddingCheckbox", "paddingNone", "alignLeft", "alignCenter", "alignRight", "alignJustify", "stickyHeader"]), I = (e) => {
const {
classes: a,
variant: o,
align: n,
padding: p,
size: y,
stickyHeader: d
} = e, f = {
root: ["root", o, d && "stickyHeader", n !== "inherit" && `align${s(n)}`, p !== "normal" && `padding${s(p)}`, `size${s(y)}`]
};
return E(f, V, a);
}, J = D("td", {
name: "MuiTableCell",
slot: "Root",
overridesResolver: (e, a) => {
const {
ownerState: o
} = e;
return [a.root, a[o.variant], a[`size${s(o.size)}`], o.padding !== "normal" && a[`padding${s(o.padding)}`], o.align !== "inherit" && a[`align${s(o.align)}`], o.stickyHeader && a.stickyHeader];
}
})(P(({
theme: e
}) => ({
...e.typography.body2,
display: "table-cell",
verticalAlign: "inherit",
// Workaround for a rendering bug with spanned columns in Chrome 62.0.
// Removes the alpha (sets it to 1), and lightens or darkens the theme color.
borderBottom: e.vars ? `1px solid ${e.vars.palette.TableCell.border}` : `1px solid
${e.palette.mode === "light" ? M(T(e.palette.divider, 1), 0.88) : S(T(e.palette.divider, 1), 0.68)}`,
textAlign: "left",
padding: 16,
variants: [{
props: {
variant: "head"
},
style: {
color: (e.vars || e).palette.text.primary,
lineHeight: e.typography.pxToRem(24),
fontWeight: e.typography.fontWeightMedium
}
}, {
props: {
variant: "body"
},
style: {
color: (e.vars || e).palette.text.primary
}
}, {
props: {
variant: "footer"
},
style: {
color: (e.vars || e).palette.text.secondary,
lineHeight: e.typography.pxToRem(21),
fontSize: e.typography.pxToRem(12)
}
}, {
props: {
size: "small"
},
style: {
padding: "6px 16px",
[`&.${_.paddingCheckbox}`]: {
width: 24,
// prevent the checkbox column from growing
padding: "0 12px 0 16px",
"& > *": {
padding: 0
}
}
}
}, {
props: {
padding: "checkbox"
},
style: {
width: 48,
// prevent the checkbox column from growing
padding: "0 0 0 4px"
}
}, {
props: {
padding: "none"
},
style: {
padding: 0
}
}, {
props: {
align: "left"
},
style: {
textAlign: "left"
}
}, {
props: {
align: "center"
},
style: {
textAlign: "center"
}
}, {
props: {
align: "right"
},
style: {
textAlign: "right",
flexDirection: "row-reverse"
}
}, {
props: {
align: "justify"
},
style: {
textAlign: "justify"
}
}, {
props: ({
ownerState: a
}) => a.stickyHeader,
style: {
position: "sticky",
top: 0,
zIndex: 2,
backgroundColor: (e.vars || e).palette.background.default
}
}]
}))), W = /* @__PURE__ */ l.forwardRef(function(a, o) {
const n = A({
props: a,
name: "MuiTableCell"
}), {
align: p = "inherit",
className: y,
component: d,
padding: f,
scope: k,
size: O,
sortDirection: x,
variant: H,
...N
} = n, i = l.useContext(h), c = l.useContext(z), u = c && c.variant === "head";
let r;
d ? r = d : r = u ? "th" : "td";
let g = k;
r === "td" ? g = void 0 : !g && u && (g = "col");
const v = H || c && c.variant, C = {
...n,
align: p,
component: r,
padding: f || (i && i.padding ? i.padding : "normal"),
size: O || (i && i.size ? i.size : "medium"),
sortDirection: x,
stickyHeader: v === "head" && i && i.stickyHeader,
variant: v
}, R = I(C);
let m = null;
return x && (m = x === "asc" ? "ascending" : "descending"), /* @__PURE__ */ U(J, {
as: r,
ref: o,
className: $(R.root, y),
"aria-sort": m,
scope: g,
ownerState: C,
...N
});
});
b.process.env.NODE_ENV !== "production" && (W.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Set the text-align on the table cell content.
*
* Monetary or generally number fields **should be right aligned** as that allows
* you to add them up quickly in your head without having to worry about decimals.
* @default 'inherit'
*/
align: t.oneOf(["center", "inherit", "justify", "left", "right"]),
/**
* The content of the component.
*/
children: t.node,
/**
* Override or extend the styles applied to the component.
*/
classes: t.object,
/**
* @ignore
*/
className: t.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: t.elementType,
/**
* Sets the padding applied to the cell.
* The prop defaults to the value (`'default'`) inherited from the parent Table component.
*/
padding: t.oneOf(["checkbox", "none", "normal"]),
/**
* Set scope attribute.
*/
scope: t.string,
/**
* Specify the size of the cell.
* The prop defaults to the value (`'medium'`) inherited from the parent Table component.
*/
size: t.oneOfType([t.oneOf(["medium", "small"]), t.string]),
/**
* Set aria-sort direction.
*/
sortDirection: t.oneOf(["asc", "desc", !1]),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
/**
* Specify the cell type.
* The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
*/
variant: t.oneOfType([t.oneOf(["body", "footer", "head"]), t.string])
});
export {
h as T,
z as a,
W as b
};
//# sourceMappingURL=TableCell-DGdBCaoe.js.map