taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
246 lines (245 loc) • 6.93 kB
JavaScript
import { p as b, c as $ } from "./index-CoM8QAjP.js";
import * as l from "react";
import t from "prop-types";
import { z as R, A as j, E as w, G as A, aQ as n, H as D, I as E } from "./JBrowsePanel-BNE3gNW1.js";
import { jsx as P } from "react/jsx-runtime";
const T = /* @__PURE__ */ l.createContext();
b.env.NODE_ENV !== "production" && (T.displayName = "TableContext");
const z = /* @__PURE__ */ l.createContext();
b.env.NODE_ENV !== "production" && (z.displayName = "Tablelvl2Context");
function M(e) {
return j("MuiTableCell", e);
}
const S = R("MuiTableCell", ["root", "head", "body", "footer", "sizeSmall", "sizeMedium", "paddingCheckbox", "paddingNone", "alignLeft", "alignCenter", "alignRight", "alignJustify", "stickyHeader"]), U = (e) => {
const {
classes: a,
variant: o,
align: s,
padding: p,
size: y,
stickyHeader: d
} = e, f = {
root: ["root", o, d && "stickyHeader", s !== "inherit" && `align${n(s)}`, p !== "normal" && `padding${n(p)}`, `size${n(y)}`]
};
return D(f, M, a);
}, V = A("td", {
name: "MuiTableCell",
slot: "Root",
overridesResolver: (e, a) => {
const {
ownerState: o
} = e;
return [a.root, a[o.variant], a[`size${n(o.size)}`], o.padding !== "normal" && a[`padding${n(o.padding)}`], o.align !== "inherit" && a[`align${n(o.align)}`], o.stickyHeader && a.stickyHeader];
}
})(E(({
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" ? e.lighten(e.alpha(e.palette.divider, 1), 0.88) : e.darken(e.alpha(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",
[`&.${S.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
}
}]
}))), _ = /* @__PURE__ */ l.forwardRef(function(a, o) {
const s = w({
props: a,
name: "MuiTableCell"
}), {
align: p = "inherit",
className: y,
component: d,
padding: f,
scope: h,
size: k,
sortDirection: x,
variant: O,
...H
} = s, i = l.useContext(T), c = l.useContext(z), u = c && c.variant === "head";
let r;
d ? r = d : r = u ? "th" : "td";
let g = h;
r === "td" ? g = void 0 : !g && u && (g = "col");
const v = O || c && c.variant, C = {
...s,
align: p,
component: r,
padding: f || (i && i.padding ? i.padding : "normal"),
size: k || (i && i.size ? i.size : "medium"),
sortDirection: x,
stickyHeader: v === "head" && i && i.stickyHeader,
variant: v
}, N = U(C);
let m = null;
return x && (m = x === "asc" ? "ascending" : "descending"), /* @__PURE__ */ P(V, {
as: r,
ref: o,
className: $(N.root, y),
"aria-sort": m,
scope: g,
ownerState: C,
...H
});
});
b.env.NODE_ENV !== "production" && (_.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 {
T,
z as a,
_ as b
};
//# sourceMappingURL=TableCell-BMrUTE1N.js.map