@tritium-research/react-component
Version:
A react component library based on material-ui, build for tritium internal usecases.
688 lines (687 loc) • 22.8 kB
JavaScript
import { jsx as e, jsxs as x, Fragment as E } from "/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+react@18.2.0/node_modules/react/jsx-runtime.js";
import { styled as y, Button as K, Stack as w, IconButton as Q, Tooltip as A, Typography as C, Fade as J, Box as S, Dialog as U, DialogTitle as Y, DialogContent as ee, Select as te, MenuItem as $, useTheme as ne, useMediaQuery as I, TableRow as re, TableCell as N, TableContainer as ie, Table as le, TableHead as ae, TableBody as oe, Link as ce, Tabs as se, Tab as de } from "/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+@mui+material@5.14.5_@emotion+react@11.11.1_@emotion+styled@11.11.0_@t_rcc7vezmuc62xe5oxkl3n2o63q/node_modules/@mui/material/index.js";
import he, { useRef as G, useState as M, useEffect as O, forwardRef as ue, useMemo as fe, createElement as pe } from "react";
import { ClickAwayListener as ge } from "/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+@mui+base@5.0.0-beta.11_@types+react@18.2.15_react-dom@18.2.0_react@18.2.0/node_modules/@mui/base/index.js";
import { FormattedMessage as xe, FormattedNumber as me } from "/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+react-intl@6.4.4_react@18.2.0_typescript@5.0.2/node_modules/react-intl/lib/index.js";
import ye from "/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+copy-to-clipboard@3.3.3/node_modules/copy-to-clipboard/index.js";
import R from "/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+@mui+material@5.14.5_@emotion+react@11.11.1_@emotion+styled@11.11.0_@t_rcc7vezmuc62xe5oxkl3n2o63q/node_modules/@mui/material/Stack/index.js";
import H from "/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+@mui+material@5.14.5_@emotion+react@11.11.1_@emotion+styled@11.11.0_@t_rcc7vezmuc62xe5oxkl3n2o63q/node_modules/@mui/material/TextField/index.js";
const be = ({
size: t = 24,
color: r = "#fff",
children: c,
variant: l = "standard",
viewBox: i = "0 0 24 24"
}) => {
const o = () => l === "small" ? 16 : l === "standard" ? 24 : l === "large" ? 36 : t, s = {
width: `${o()}px`,
height: `${o()}px`,
stroke: "transparent",
// not a standard solution, but works for this project
fill: r
};
return /* @__PURE__ */ e(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
style: s,
viewBox: (() => l === "small" ? "0 0 16 16" : l === "standard" ? "0 0 24 24" : l === "large" ? "0 0 36 36" : i)(),
children: c
}
);
};
function we(t) {
const { color: r = "#000" } = t;
return /* @__PURE__ */ x(be, { viewBox: "0 0 16 16", variant: "small", children: [
/* @__PURE__ */ e("title", { children: "Loading" }),
/* @__PURE__ */ e(
"g",
{
id: "Page-1",
stroke: "none",
strokeWidth: "1",
fill: "none",
fillRule: "evenodd",
children: /* @__PURE__ */ e("g", { id: "Popup", transform: "translate(-586.000000, -1564.000000)", children: /* @__PURE__ */ e("g", { id: "Group-4", transform: "translate(552.000000, 1415.000000)", children: /* @__PURE__ */ x("g", { id: "Group-7", transform: "translate(34.000000, 149.000000)", children: [
/* @__PURE__ */ e("rect", { id: "Rectangle", x: "0", y: "0", width: "16", height: "16" }),
/* @__PURE__ */ e(
"rect",
{
id: "Rectangle",
fill: r,
x: "7.33333333",
y: "1.33333333",
width: "1.33333333",
height: "4",
rx: "0.666666667"
}
),
/* @__PURE__ */ e(
"rect",
{
id: "Rectangle",
fill: r,
opacity: "0.800000012",
transform: "translate(11.299832, 4.700168) rotate(45.000000) translate(-11.299832, -4.700168) ",
x: "10.633165",
y: "2.70016835",
width: "1.33333333",
height: "4",
rx: "0.666666667"
}
),
/* @__PURE__ */ e(
"rect",
{
id: "Rectangle",
fill: r,
opacity: "0.600000024",
transform: "translate(12.666667, 8.000000) rotate(90.000000) translate(-12.666667, -8.000000) ",
x: "12",
y: "6",
width: "1.33333333",
height: "4",
rx: "0.666666667"
}
),
/* @__PURE__ */ e(
"rect",
{
id: "Rectangle",
fill: r,
opacity: "0.5",
transform: "translate(11.299832, 11.299832) rotate(135.000000) translate(-11.299832, -11.299832) ",
x: "10.633165",
y: "9.29983165",
width: "1.33333333",
height: "4",
rx: "0.666666667"
}
),
/* @__PURE__ */ e(
"rect",
{
id: "Rectangle",
fill: r,
opacity: "0.400000006",
transform: "translate(8.000000, 12.666667) rotate(180.000000) translate(-8.000000, -12.666667) ",
x: "7.33333333",
y: "10.6666667",
width: "1.33333333",
height: "4",
rx: "0.666666667"
}
),
/* @__PURE__ */ e(
"rect",
{
id: "Rectangle",
fill: r,
opacity: "0.300000012",
transform: "translate(4.700168, 11.299832) rotate(225.000000) translate(-4.700168, -11.299832) ",
x: "4.03350169",
y: "9.29983165",
width: "1.33333333",
height: "4",
rx: "0.666666667"
}
),
/* @__PURE__ */ e(
"rect",
{
id: "Rectangle",
fill: r,
opacity: "0.100000001",
transform: "translate(4.700168, 4.700168) rotate(315.000000) translate(-4.700168, -4.700168) ",
x: "4.03350169",
y: "2.70016835",
width: "1.33333333",
height: "4",
rx: "0.666666667"
}
)
] }) }) })
}
)
] });
}
const B = y(K)({
textTransform: "capitalize"
}), Ce = y("a")({
textDecoration: "none"
}), Te = y(w)({
width: "100%",
height: "100%",
alignItems: "center",
justifyContent: "center",
animation: "spin 1s linear infinite",
"@keyframes spin": {
from: { transform: "rotate(0deg)" },
to: { transform: "rotate(360deg)" }
}
});
function Ne(t) {
const {
variant: r = "outlined",
href: c = "",
loading: l = !1,
spin: i = !1,
loadingComponent: o = /* @__PURE__ */ e(we, {}),
...s
} = t, h = () => /* @__PURE__ */ e(w, { children: i ? /* @__PURE__ */ e(Te, { children: o }) : o });
return r === "link" ? /* @__PURE__ */ e(Ce, { href: c, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e(B, { variant: "outlined", ...s, onClick: () => {
} }) }) : r === "round" ? /* @__PURE__ */ e(
B,
{
variant: "outlined",
...s,
sx: {
...s.sx,
borderRadius: 50
},
children: l ? h() : t.children
}
) : r == "icon" ? /* @__PURE__ */ e(Q, { ...s, children: l ? h() : t.icon || t.children }) : /* @__PURE__ */ e(B, { variant: r, ...s, children: l ? h() : t.children });
}
function P(t) {
const { contentKey: r, tooltipTrigger: c = "hover", tooltipProps: l, ...i } = t, o = G(null), [s, h] = M(!1), [g, d] = M(!1);
O(() => {
if (i.noWrap) {
const f = o.current, p = f == null ? void 0 : f.clientWidth, a = f == null ? void 0 : f.scrollWidth;
p && a && a > p && h(!0);
}
}, []);
const u = () => r ? /* @__PURE__ */ e(xe, { id: r }) : /* @__PURE__ */ e(E, {}), n = (f) => Number.isFinite(f) ? /* @__PURE__ */ e(
me,
{
value: f,
maximumFractionDigits: 18
}
) : f;
return i.noWrap ? c === "click" ? /* @__PURE__ */ e(ge, { onClickAway: () => d(!1), children: /* @__PURE__ */ e(
A,
{
open: s && g,
title: /* @__PURE__ */ e(C, { variant: "body2", color: "primary.main", children: t.children ? n(t.children) : u() }),
...l,
children: /* @__PURE__ */ e(
C,
{
ref: o,
noWrap: !0,
...i,
onClick: () => d(!g),
children: t.children ? n(t.children) : u()
}
)
}
) }) : /* @__PURE__ */ e(
A,
{
open: s && g,
title: /* @__PURE__ */ e(C, { variant: "body2", color: "primary.main", children: t.children ? n(t.children) : u() }),
children: /* @__PURE__ */ e(
C,
{
ref: o,
noWrap: !0,
...i,
onMouseEnter: () => d(!0),
onMouseLeave: () => d(!1),
children: t.children ? n(t.children) : u()
}
)
}
) : /* @__PURE__ */ e(C, { ...i, children: t.children ? n(t.children) : u() });
}
function ve() {
return /* @__PURE__ */ x(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink",
width: "15",
height: "15",
viewBox: "0 0 15 15",
children: [
/* @__PURE__ */ x("defs", { children: [
/* @__PURE__ */ e("style", { children: ".aCopy{fill:none;}.bCopy{clip-path:url(#aCopy);}" }),
/* @__PURE__ */ e("clipPath", { id: "aCopy", children: /* @__PURE__ */ e("rect", { className: "aCopy", width: "15", height: "15" }) })
] }),
/* @__PURE__ */ x("g", { className: "bCopy", children: [
/* @__PURE__ */ e(
"path",
{
d: "M-.644-3h7.2A2.359,2.359,0,0,1,8.912-.644v7.2A2.359,2.359,0,0,1,6.556,8.912h-7.2A2.359,2.359,0,0,1-3,6.556v-7.2A2.359,2.359,0,0,1-.644-3Zm7.2,10.588A1.034,1.034,0,0,0,7.588,6.556v-7.2A1.034,1.034,0,0,0,6.556-1.676h-7.2A1.034,1.034,0,0,0-1.676-.644v7.2A1.034,1.034,0,0,0-.644,7.588Z",
transform: "translate(3 6.088)"
}
),
/* @__PURE__ */ e(
"path",
{
d: "M23.265,11.912V10.588h.291a1.057,1.057,0,0,0,1.032-1.032v-7.2a1.034,1.034,0,0,0-1.032-1.032h-7.2a1.037,1.037,0,0,0-1.028.944l0,.379H14V2.356A2.412,2.412,0,0,1,16.356,0h7.2a2.359,2.359,0,0,1,2.356,2.356v7.2A2.369,2.369,0,0,1,23.754,11.9Z",
transform: "translate(-10.912)"
}
)
] })
]
}
);
}
const ke = y(w, { name: "CopierContainer" })`
width: 100%;
height: 100%;
gap: 4px;
flex-direction: row;
align-items: center;
cursor: ${({ clickable: t }) => t ? "pointer" : "default"};
`, Ie = y(w, { name: "IconWrapper" })(({ theme: t }) => ({
alignItems: "center",
justifyContent: "center",
width: "16px",
height: "16px",
cursor: "pointer",
opacity: 0.8,
transition: t.transitions.create("opacity"),
":hover": {
opacity: 1
}
}));
function Ge(t) {
const {
content: r = "",
value: c,
textProps: l,
abbreviate: i = !1,
clickableArea: o = "icon"
} = t, s = c ?? r, h = (d) => d ? `${d.slice(0, 6)}...${d.slice(-4)}` : "", g = (d, u) => {
var n;
o === u && (ye(d), (n = t.onCopy) == null || n.call(t));
};
return /* @__PURE__ */ x(
ke,
{
clickable: o === "entire",
onClick: o === "entire" ? () => g(s, "entire") : () => {
},
children: [
/* @__PURE__ */ e(P, { ...l, children: i ? h(r) : r }),
/* @__PURE__ */ e(Ie, { onClick: () => g(s, "icon"), children: t.icon ?? /* @__PURE__ */ e(ve, {}) })
]
}
);
}
const Pe = y("span")`
color: rgba(250, 59, 88, 1);
`, Re = y("span")`
opacity: 0.4;
`, Be = y("span", {
shouldForwardProp: (t) => t !== "exceeded"
})(({ theme: { palette: t }, exceeded: r }) => ({
color: r ? t.error.main : t.primary.main
})), Me = ue((t, r) => {
var F;
const {
label: c,
showCount: l = !1,
required: i = !1,
errorMessage: o = "",
numberOnly: s = !1,
disabled: h = !1,
labelGap: g,
errorMeesageGap: d,
height: u,
...n
} = t, f = ((F = n.value) == null ? void 0 : F.length) ?? 0, p = n.maxLength ?? 0, a = G(null), [m, T] = M(0);
O(() => {
var b;
T(u ?? ((b = a.current) == null ? void 0 : b.clientHeight) ?? 0);
}, [u, o]);
const W = (b) => {
var v, k, L;
if (!(s && !/^[0-9]*$/.test(b.target.value)))
return l ? b.nativeEvent.inputType === "deleteContentBackward" ? (v = n.onChange) == null ? void 0 : v.call(n, b) : f >= p || (k = n.onChange) == null ? void 0 : k.call(n, b) : (L = n.onChange) == null ? void 0 : L.call(n, b);
}, Z = () => /* @__PURE__ */ e(
R,
{
sx: {
position: "absolute",
right: 0,
bottom: n.multiline ? t.errorMessage ? 29 : -8 : void 0,
top: n.multiline ? void 0 : 34.5 + Math.floor(m / 2),
transform: n.multiline ? "translate(-16px, -100%)" : "translate(-16px, -50%)"
},
children: /* @__PURE__ */ x(P, { children: [
/* @__PURE__ */ e(Be, { exceeded: f > p, children: f }),
" ",
/* @__PURE__ */ x(Re, { children: [
"/ ",
p ?? 0
] })
] })
}
), X = () => /* @__PURE__ */ x(R, { flexDirection: "row", sx: { marginBottom: g }, children: [
typeof c == "string" ? /* @__PURE__ */ e(P, { children: c }) : c,
i && /* @__PURE__ */ e(Pe, { children: "*" })
] }), _ = () => {
var v, k;
if (n.multiline)
return /* @__PURE__ */ e(
H,
{
...n,
ref: l ? a : r,
onChange: W,
required: i,
InputProps: {
sx: {
paddingBottom: "40px",
...(v = n.InputProps) == null ? void 0 : v.sx
},
...n.InputProps
}
}
);
const b = t.height ?? 48;
return /* @__PURE__ */ e(
H,
{
...n,
sx: { ...n.sx, height: b },
InputProps: {
...n.InputProps,
sx: {
...(k = n.InputProps) == null ? void 0 : k.sx,
height: b
}
},
variant: "outlined",
inputProps: {
style: {
paddingTop: 0,
paddingBottom: 0,
paddingRight: l ? 88 : 14
}
},
ref: l ? a : r,
onChange: W,
required: i
}
);
}, q = () => /* @__PURE__ */ e(J, { in: !0, children: /* @__PURE__ */ e(S, { sx: { marginTop: d }, children: /* @__PURE__ */ e(P, { variant: "body2", color: "error.main", children: o }) }) });
return /* @__PURE__ */ x(
R,
{
sx: {
position: "relative",
pointerEvents: h ? "none" : "auto",
opacity: h ? 0.5 : 1,
width: "fit-content"
},
children: [
!!c && X(),
_(),
l && Z(),
!!t.errorMessage && q()
]
}
);
});
Me.displayName = "Input";
function V() {
return /* @__PURE__ */ e(
"svg",
{
width: "24px",
height: "24px",
viewBox: "0 0 24 24",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink",
children: /* @__PURE__ */ e(
"path",
{
d: "M17.657 17.657c-.363.362-.96.364-1.384.02l-.094-.084L12 13.414l-4.179 4.179c-.425.426-1.087.454-1.478.064-.362-.363-.364-.96-.02-1.384l.084-.094L10.586 12 6.407 7.821c-.426-.425-.454-1.087-.064-1.478.363-.362.96-.364 1.384-.02l.094.084L12 10.586l4.179-4.179c.425-.426 1.087-.454 1.478-.064.362.363.364.96.02 1.384l-.084.094L13.414 12l4.179 4.179c.426.425.454 1.087.064 1.478z",
fillRule: "nonzero"
}
)
}
);
}
function Oe(t) {
const {
title: r,
width: c = 336,
hideCloseIcon: l = !1,
hideTitle: i = !1,
...o
} = t, s = (h, g) => {
var d;
g !== "backdropClick" && ((d = t.onClose) == null || d.call(t, h ?? {}, g ?? "backdropClick"));
};
return /* @__PURE__ */ x(
U,
{
...o,
PaperProps: {
sx: { width: c, borderRadius: "12px" }
},
onClose: s,
children: [
!i && /* @__PURE__ */ e(Y, { sx: { padding: "24px" }, children: /* @__PURE__ */ x(
w,
{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
children: [
r,
!l && /* @__PURE__ */ e(
w,
{
onClick: s,
alignItems: "center",
justifyContent: "center",
sx: {
cursor: "pointer",
opacity: 0.8,
transition: ({ transitions: h }) => h.create("all"),
":hover": {
opacity: 1,
transform: "scale(1.2)"
}
},
children: /* @__PURE__ */ e(V, {})
}
)
]
}
) }),
/* @__PURE__ */ x(ee, { sx: { padding: i ? "24px" : "0 24px 24px 24px" }, children: [
t.children,
!l && i && /* @__PURE__ */ e(
w,
{
onClick: s,
alignItems: "center",
justifyContent: "center",
sx: {
cursor: "pointer",
position: "absolute",
top: 24,
right: 24,
opacity: 0.8,
transition: ({ transitions: h }) => h.create("all"),
":hover": {
opacity: 1,
transform: "scale(1.2)"
}
},
children: /* @__PURE__ */ e(V, {})
}
)
] })
]
}
);
}
function Ze(t) {
return /* @__PURE__ */ e(w, { flexDirection: "row", alignItems: "center", ...t });
}
function Xe(t) {
const { options: r, menuItemProps: c, ...l } = t;
return /* @__PURE__ */ e(te, { ...l, children: r.map((i) => {
if (typeof i == "string")
return /* @__PURE__ */ e($, { value: i, ...c, children: i }, i);
const { value: o, children: s } = i;
return /* @__PURE__ */ e($, { value: o, ...c, children: s }, o);
}) });
}
function Se() {
const { breakpoints: t } = ne(), r = I(t.up("md")), c = I(t.between("sm", "md")), l = I(t.between("xs", "sm")), i = I(t.down("xs"));
return { lg: r, md: c, sm: l, xs: i };
}
const j = y(re, { name: "TableRow" })``, We = y(N, {
name: "TableHeadCell",
shouldForwardProp: (t) => t !== "offset"
})``, D = y(N, {
name: "TableBodyCell"
})``;
function _e(t) {
const {
rows: r,
columns: c,
sx: l,
headerCellSx: i,
bodyCellSx: o,
tableHeadProps: s,
tableBodyProps: h
} = t, g = he.useMemo(() => r, [r]), { md: d, sm: u, xs: n } = Se(), f = (a) => n ? a.slice(0, 2) : u ? a.slice(0, 4) : d ? a.slice(0, 5) : a, p = fe(
() => f(c),
[c, n, u, d]
);
return /* @__PURE__ */ e(ie, { sx: { maxHeight: 440, ...l }, children: /* @__PURE__ */ x(le, { stickyHeader: !0, "aria-label": "sti cky table", children: [
/* @__PURE__ */ e(ae, { ...s, children: /* @__PURE__ */ e(j, { children: p == null ? void 0 : p.map((a) => /* @__PURE__ */ e(
We,
{
align: a.align,
sx: i,
style: {
minWidth: a.minWidth
},
children: a.enableSort ? /* @__PURE__ */ e(
w,
{
flexDirection: "row",
alignItems: "center",
justifyContent: a.align === "right" ? "flex-end" : a.align === "center" ? "center" : "flex-start",
children: /* @__PURE__ */ x(
w,
{
flexDirection: "row",
width: "fit-content",
gap: 0.4,
sx: { cursor: "pointer" },
children: [
/* @__PURE__ */ e(C, { variant: "subtitle1", children: a.label }),
t.sortIcon
]
}
)
}
) : /* @__PURE__ */ e(C, { variant: "subtitle1", children: a.label })
},
a.id
)) }) }),
/* @__PURE__ */ e(oe, { ...h, children: g == null ? void 0 : g.map((a) => /* @__PURE__ */ e(
j,
{
sx: {
cursor: a.link ? "pointer" : "auto"
},
children: p == null ? void 0 : p.map((m) => {
const T = a[m.id];
return a.link ? /* @__PURE__ */ e(
D,
{
align: m.align,
sx: { ...o },
children: /* @__PURE__ */ e(ce, { href: a.link, children: m.renderValue ? m.renderValue(T) : T })
},
m.id + a.id
) : /* @__PURE__ */ e(
D,
{
align: m.align,
sx: { ...o },
children: m.renderValue ? m.renderValue(T) : T
},
m.id + a.id
);
})
},
a.id
)) })
] }) });
}
const Fe = y(S, { name: "TabsWrapper" })``;
function qe(t) {
const {
options: r,
currentValue: c = 0,
tabsProps: l,
tabProps: i,
onChange: o,
tabsWrapperProps: s,
tabPanelProps: h
} = t;
function g(d) {
const { children: u, value: n, index: f, ...p } = d;
return /* @__PURE__ */ e("div", { role: "tabpanel", hidden: n !== f, id: `tabpanel-${f}`, children: n === f && /* @__PURE__ */ e(S, { sx: { py: 2.4, ...p == null ? void 0 : p.sx }, ...p, children: u }) });
}
return /* @__PURE__ */ x(E, { children: [
/* @__PURE__ */ e(Fe, { ...s, children: /* @__PURE__ */ e(se, { value: c, onChange: o, ...l, children: r.map((d) => {
const { label: u, value: n } = d;
return /* @__PURE__ */ e(
de,
{
label: u,
...i,
sx: {
textTransform: "capitalize",
padding: 0,
minWidth: 40,
marginRight: "20px",
...i == null ? void 0 : i.sx
},
disableRipple: !0
},
n
);
}) }) }),
r == null ? void 0 : r.map((d) => {
const { value: u, children: n } = d;
return n ? /* @__PURE__ */ pe(
g,
{
...h,
value: c,
index: u,
key: u
},
n
) : null;
})
] });
}
export {
Ne as Button,
Ge as Copier,
Me as Input,
Oe as Modal,
Ze as Row,
Xe as Select,
_e as Table,
qe as Tabs,
P as Text
};