@blocklet/payment-react
Version:
Reusable react components for payment kit v2
307 lines (306 loc) • 9.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PaymentThemeProvider = PaymentThemeProvider;
Object.defineProperty(exports, "typography", {
enumerable: true,
get: function () {
return _typography.typography;
}
});
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _Theme = require("@arcblock/ux/lib/Theme");
var _Util = require("@arcblock/ux/lib/Util");
var _styles = require("@mui/material/styles");
var _react = require("react");
require("./index.css");
require("./types");
var _typography = require("./typography");
function PaymentThemeProvider({
children,
theme: customTheme = {}
}) {
const {
sx: themeSX = {},
...restTheme
} = customTheme || {};
const parentTheme = (0, _styles.useTheme)();
const mergeTheme = (0, _react.useMemo)(() => {
const blockletTheme = parentTheme.themeName === "ArcBlock" ? parentTheme : (0, _Theme.create)();
const {
mode
} = blockletTheme.palette;
let paymentThemeOptions = (0, _Theme.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 = (0, _Util.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 (0, _material.createTheme)(paymentThemeOptions);
}, [parentTheme, restTheme]);
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
theme: mergeTheme,
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CssBaseline, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
height: "100%",
...themeSX
},
children
})]
});
}