@blocklet/payment-react
Version:
Reusable react components for payment kit v2
80 lines (79 loc) • 2.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
module.exports = TxLink;
var _jsxRuntime = require("react/jsx-runtime");
var _context = require("@arcblock/ux/lib/Locale/context");
var _iconsMaterial = require("@mui/icons-material");
var _material = require("@mui/material");
var _system = require("@mui/system");
var _util = require("../../libs/util");
function TxLink({
details,
method,
mode = "dashboard",
align = "left",
size = 20
}) {
const {
t
} = (0, _context.useLocaleContext)();
if (!details || mode === "customer" && method.type === "stripe") {
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
component: "small",
sx: {
color: "text.secondary"
},
children: t("common.none")
});
}
const {
text,
link
} = (0, _util.getTxLink)(method, details);
if (link && text) {
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
href: link,
target: "_blank",
rel: "noopener noreferrer",
children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
direction: "row",
alignItems: "center",
justifyContent: align === "left" ? "flex-start" : "flex-end",
sx: {
color: "text.link"
},
spacing: 1,
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
className: "tx-link-text",
component: "span",
sx: {
color: "text.link"
},
children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
fontSize: "small",
sx: {
width: size,
height: size
}
})]
})
});
}
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
component: "small",
sx: {
color: "text.secondary"
},
children: t("common.none")
});
}
const Root = (0, _system.styled)(_material.Stack)`
@media (max-width: 600px) {
svg.MuiSvgIcon-root {
display: none !important;
}
}
`;