@blocklet/payment-react
Version:
Reusable react components for payment kit v2
240 lines (239 loc) • 7.11 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import Empty from "@arcblock/ux/lib/Empty";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { Box, Chip, Link, Stack, Typography } from "@mui/material";
function SourceDataViewer({
data,
compact = false,
maxItems = void 0,
locale: propLocale = void 0,
showGroups = false
}) {
const { locale: contextLocale, t } = useLocaleContext();
const currentLocale = propLocale || contextLocale || "en";
if (!data || Array.isArray(data) && data.length === 0 || typeof data === "object" && Object.keys(data).length === 0) {
return /* @__PURE__ */ jsx(Empty, { children: t("common.none") });
}
const getLocalizedText = (text) => {
if (typeof text === "string") {
return text;
}
return text[currentLocale] || text.en || "";
};
const isSimpleSourceData = (sourceData) => {
return typeof sourceData === "object" && !Array.isArray(sourceData) && sourceData !== null;
};
const isUrlLike = (str) => {
try {
new URL(str);
return true;
} catch {
return /^https?:\/\/.+/.test(str) || /^www\..+/.test(str);
}
};
const normalizeData = (inputData) => {
if (isSimpleSourceData(inputData)) {
return Object.entries(inputData).map(([key, value]) => {
const stringValue = String(value);
const isUrl = isUrlLike(stringValue);
return {
key,
label: key.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
value: stringValue,
type: isUrl ? "url" : "text",
url: isUrl ? stringValue : void 0
};
});
}
return inputData;
};
const renderFieldValue = (field) => {
const displayValue = field.value;
if (field.type === "url") {
return /* @__PURE__ */ jsx(
Link,
{
href: field.url || field.value,
target: "_blank",
rel: "noopener noreferrer",
sx: {
color: "primary.main",
textDecoration: "none",
fontSize: "0.85rem",
fontWeight: 600,
lineHeight: 1.4,
"&:hover": {
textDecoration: "underline",
color: "primary.dark"
},
"&:visited": {
color: "primary.main"
}
},
children: displayValue
}
);
}
if (field.type === "image") {
return /* @__PURE__ */ jsxs(
Box,
{
sx: {
display: "flex",
alignItems: "center",
gap: 1
},
children: [
/* @__PURE__ */ jsx(
Box,
{
component: "img",
src: field.url || field.value,
alt: displayValue,
sx: {
width: 24,
height: 24,
borderRadius: 1,
objectFit: "cover"
}
}
),
/* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500 }, children: displayValue })
]
}
);
}
return /* @__PURE__ */ jsx(
Typography,
{
variant: "body2",
sx: {
fontWeight: 500,
color: "text.primary"
},
children: displayValue
}
);
};
if (!data || Array.isArray(data) && data.length === 0 || typeof data === "object" && Object.keys(data).length === 0) {
return null;
}
const normalizedData = normalizeData(data);
const displayItems = maxItems ? normalizedData.slice(0, maxItems) : normalizedData;
if (compact) {
return /* @__PURE__ */ jsxs(
Stack,
{
direction: "row",
spacing: 1,
useFlexGap: true,
sx: {
flexWrap: "wrap"
},
children: [
displayItems.map((field) => /* @__PURE__ */ jsx(
Chip,
{
label: `${getLocalizedText(field.label)}: ${field.value}`,
size: "small",
variant: "outlined",
sx: { maxWidth: 200 }
},
field.key
)),
maxItems && normalizedData.length > maxItems && /* @__PURE__ */ jsx(Chip, { label: `+${normalizedData.length - maxItems} more`, size: "small", color: "primary", variant: "outlined" })
]
}
);
}
if (showGroups) {
const groupedData = displayItems.reduce(
(acc, field) => {
const group = field.group || "default";
if (!acc[group]) acc[group] = [];
acc[group].push(field);
return acc;
},
{}
);
return /* @__PURE__ */ jsx(Stack, { spacing: 2.5, children: Object.entries(groupedData).map(([group, fields]) => /* @__PURE__ */ jsxs(Box, { children: [
group !== "default" && /* @__PURE__ */ jsx(
Typography,
{
variant: "subtitle2",
sx: {
mb: 1.5,
fontWeight: 700,
color: "text.primary",
letterSpacing: "0.5px",
borderBottom: "1px solid",
borderColor: "divider",
pb: 0.5
},
children: group.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())
}
),
/* @__PURE__ */ jsx(Stack, { spacing: 1.2, sx: { pl: group !== "default" ? 1 : 0 }, children: fields.map((field) => /* @__PURE__ */ jsxs(
Box,
{
sx: {
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
gap: 3,
minHeight: 20
},
children: [
/* @__PURE__ */ jsx(
Typography,
{
variant: "body2",
sx: {
color: "text.secondary",
fontSize: "0.8rem",
minWidth: 100,
fontWeight: 600,
lineHeight: 1.4
},
children: getLocalizedText(field.label)
}
),
/* @__PURE__ */ jsx(Box, { sx: { flex: 1, minWidth: 0, wordBreak: "break-all", whiteSpace: "wrap" }, children: renderFieldValue(field) })
]
},
field.key
)) })
] }, group)) });
}
return /* @__PURE__ */ jsx(Stack, { spacing: 1.5, children: displayItems.map((field) => /* @__PURE__ */ jsxs(
Box,
{
sx: {
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
gap: 3,
minHeight: 20
},
children: [
/* @__PURE__ */ jsx(
Typography,
{
variant: "body2",
sx: {
color: "text.secondary",
fontSize: "0.8rem",
minWidth: 100,
fontWeight: 600,
lineHeight: 1.4
},
children: getLocalizedText(field.label)
}
),
/* @__PURE__ */ jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: renderFieldValue(field) })
]
},
field.key
)) });
}
export default SourceDataViewer;