@blocklet/payment-react
Version:
Reusable react components for payment kit v2
289 lines (288 loc) • 9.14 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { createTheme, Box, CssBaseline } from "@mui/material";
import { create as createBlockletTheme, deepmerge } from "@arcblock/ux/lib/Theme";
import { deepmergeAll } from "@arcblock/ux/lib/Util";
import { ThemeProvider, useTheme } from "@mui/material/styles";
import { useMemo } from "react";
import "./index.css";
import "./types";
import { typography } from "./typography.js";
export function PaymentThemeProvider({
children,
theme: customTheme = {}
}) {
const { sx: themeSX = {}, ...restTheme } = customTheme || {};
const parentTheme = useTheme();
const mergeTheme = useMemo(() => {
const blockletTheme = parentTheme.themeName === "ArcBlock" ? parentTheme : createBlockletTheme();
const { mode } = blockletTheme.palette;
let paymentThemeOptions = deepmerge(blockletTheme, {
palette: {
chip: {
success: {
text: mode === "dark" ? "#10b981" : "#047857",
background: mode === "dark" ? "#022c22" : "#d1fae5",
border: mode === "dark" ? "#064e3b" : "#a7f3d0"
},
default: {
text: mode === "dark" ? "#adb1b8" : "#4b5563",
background: mode === "dark" ? "#2e3035" : "#f3f4f6",
border: mode === "dark" ? "#3c3f44" : "#e5e7eb"
},
secondary: {
text: mode === "dark" ? "#8b5cf6" : "#6d28d9",
background: mode === "dark" ? "#2e1064" : "#ede9fe",
border: mode === "dark" ? "#3c3f44" : "#ddd6fe"
},
error: {
text: mode === "dark" ? "#ff6369" : "#be123c",
background: mode === "dark" ? "#4c0519" : "#ffe4e6",
border: mode === "dark" ? "#881337" : "#fecdd3"
},
warning: {
text: mode === "dark" ? "#f59e0b" : "#b45309",
background: mode === "dark" ? "#451a03" : "#fef4c7",
border: mode === "dark" ? "#78350f" : "#fde68a"
},
info: {
text: mode === "dark" ? "#3b82f6" : "#1d4ed8",
background: mode === "dark" ? "#172554" : "#dbeafe",
border: mode === "dark" ? "#1e3a8a" : "#bfdbfe"
}
}
}
});
const {
palette,
shape: { borderRadius },
shadows
} = paymentThemeOptions;
paymentThemeOptions = deepmergeAll([
paymentThemeOptions,
{
palette: {
text: {
lighter: palette.grey[400],
link: palette.secondary.main
}
}
},
{
components: {
MuiOutlinedInput: {
styleOverrides: {
root: {
borderRadius,
backgroundColor: palette.grey[50],
"&.Mui-disabled": {
backgroundColor: palette.grey[100]
},
".MuiInputBase-input": {
fontSize: "14px",
minHeight: "1.65em",
lineHeight: "1.65em"
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "1px"
}
}
}
},
MuiButton: {
defaultProps: {
size: "small"
},
styleOverrides: {
root: {
fontSize: "0.875rem",
fontWeight: 500,
textTransform: "none",
boxShadow: "none"
},
sizeSmall: {
height: 32
},
outlinedPrimary: {
borderColor: palette.divider,
"&:hover": {
borderColor: palette.divider
}
}
}
},
MuiIconButton: {
defaultProps: {
size: "small"
},
styleOverrides: {
root: {
textTransform: "none"
},
colorPrimary: {
backgroundColor: palette.background.default
}
}
},
MuiToggleButton: {
styleOverrides: {
root: {
textTransform: "none"
}
}
},
MuiTab: {
styleOverrides: {
root: {
textTransform: "none",
fontSize: "0.875rem"
}
}
},
MuiTooltip: {
defaultProps: {
enterTouchDelay: 3e3,
leaveTouchDelay: 100
},
styleOverrides: {
tooltip: {
fontSize: "0.875rem"
}
}
},
MuiPopover: {
styleOverrides: {
root: {
zIndex: 1200
},
paper: {
border: `1px solid ${palette.divider}`,
boxShadow: shadows[2]
}
}
},
MuiCssBaseline: {
styleOverrides: {
".base-card": {
padding: "20px",
borderRadius: 1.5 * borderRadius,
// 12px
background: palette.background.default,
border: `1px solid ${palette.divider}`,
boxShadow: shadows[1]
},
".base-label": {
color: palette.grey.A700,
fontSize: "16px",
fontWeight: "500",
lineHeight: "24px"
},
".base-dialog": {
".MuiPaper-root>.MuiDialogContent-root": {
paddingTop: "0"
}
},
a: {
textDecoration: "none !important"
}
}
},
MuiRadio: {
styleOverrides: {
root: {
"&:hover": {
background: "none"
},
"&.Mui-checked": {
color: palette.primary.main
}
}
}
},
MuiCheckbox: {
styleOverrides: {
root: {
color: palette.primary.main,
"&.Mui-checked": {
color: palette.primary.main
}
}
}
},
MuiInputBase: {
defaultProps: {
size: "small"
},
styleOverrides: {
root: {
fontSize: "0.875rem",
backgroundColor: palette.grey[50]
}
}
},
MuiInputLabel: {
defaultProps: {
size: "small"
},
styleOverrides: {
root: {
fontSize: "0.875rem"
}
}
},
MuiChip: {
styleOverrides: {
root: {
borderRadius: `${borderRadius * 2}px`,
border: "1px solid transparent",
"&.MuiChip-filledSuccess": {
color: palette.chip.success.text,
backgroundColor: palette.chip.success.background,
borderColor: palette.chip.success.border
},
"&.MuiChip-filledDefault": {
color: palette.chip.default.text,
backgroundColor: palette.chip.default.background,
borderColor: palette.chip.default.border
},
"&.MuiChip-filled.MuiChip-colorSecondary": {
color: palette.chip.secondary.text,
backgroundColor: palette.chip.secondary.background,
borderColor: palette.chip.secondary.border
},
"&.MuiChip-filledError": {
color: palette.chip.error.text,
backgroundColor: palette.chip.error.background,
borderColor: palette.chip.error.border
},
"&.MuiChip-filledWarning": {
color: palette.chip.warning.text,
backgroundColor: palette.chip.warning.background,
borderColor: palette.chip.warning.border
},
"&.MuiChip-filled.MuiChip-colorPrimary,&.MuiChip-filledInfo": {
color: palette.chip.info.text,
backgroundColor: palette.chip.info.background,
borderColor: palette.chip.info.border
}
}
}
},
MuiDialog: {
styleOverrides: {
root: {
zIndex: 1200
}
}
}
}
},
restTheme
]);
return createTheme(paymentThemeOptions);
}, [parentTheme, restTheme]);
return /* @__PURE__ */ jsxs(ThemeProvider, { theme: mergeTheme, children: [
/* @__PURE__ */ jsx(CssBaseline, {}),
/* @__PURE__ */ jsx(Box, { sx: { height: "100%", ...themeSX }, children })
] });
}
export { typography };