@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
255 lines (251 loc) • 7 kB
JavaScript
import { jsx as r, jsxs as m, Fragment as v } from "react/jsx-runtime";
import { useState as N } from "react";
import l from "prop-types";
import { useCreation as $ } from "ahooks";
import j from "lodash/isInteger";
import I from "lodash/isString";
import { styled as z } from "@arcblock/ux/lib/Theme";
import c from "clsx";
import { ExpandMore as M } from "@mui/icons-material";
import C from "../Icon/index.js";
import A from "../hooks/use-mobile.js";
import { splitNavColumns as E } from "../utils.js";
function F({ links: e = [], flowLayout: d = !1, columns: u, ...x }) {
const [g, b] = N(-1), y = A({ key: "md" }), h = e.some((t) => t.items?.length), k = !y && h && j(u) && u > 1, p = ({ label: t, link: o, icon: i, render: a, props: n }) => {
let s = t;
if (a)
s = a({ label: t, link: o, props: n });
else if (o && I(o)) {
const f = o.startsWith("http") || o.startsWith("//");
s = /* @__PURE__ */ r(
"a",
{
href: o,
"aria-label": `Footer link for ${t}`,
target: f ? "_blank" : "_self",
rel: f ? "noreferrer noopener" : void 0,
...n,
children: t
}
);
}
return /* @__PURE__ */ m(v, { children: [
i && /* @__PURE__ */ r(C, { icon: i, size: 20, sx: { mr: 0.5 } }),
s
] });
}, w = $(() => e?.length ? d ? e.map((t, o) => /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(t) }, o)) : k ? E(e, { columns: u }).map((t, o) => /* @__PURE__ */ r("div", { className: "footer-links-column", children: t.filter((i) => i.group).map((i, a) => {
const { items: n } = i;
return /* @__PURE__ */ m("div", { className: "footer-links-group", children: [
/* @__PURE__ */ r("span", { className: "footer-links-item", children: p(i) }),
!!n?.length && /* @__PURE__ */ r("div", { className: "footer-links-sub", children: n.map((s, f) => /* @__PURE__ */ r(
"span",
{
className: c("footer-links-item", { "footer-links-item--new": s.isNew }),
children: p(s)
},
f
)) })
] }, a);
}) }, o)) : e.map((t, o) => {
const { items: i } = t, a = o === g;
return /* @__PURE__ */ m(
"div",
{
className: c("footer-links-group", {
"footer-links-group--active": a
}),
onClick: () => b(g === o ? -1 : o),
children: [
/* @__PURE__ */ m("span", { className: "footer-links-item", children: [
p(t),
!!i?.length && /* @__PURE__ */ r("span", { className: "footer-links-group-expand-icon", children: /* @__PURE__ */ r(
M,
{
style: {
transform: `rotate(${a ? 180 : 0}deg)`
}
}
) })
] }),
!!i?.length && /* @__PURE__ */ r("div", { className: "footer-links-sub", children: i.map((n, s) => /* @__PURE__ */ r("span", { className: c("footer-links-item", { "footer-links-item--new": n.isNew }), children: p(n) }, s)) })
]
},
o
);
}) : null, [e, d, k, g]);
return e?.length ? /* @__PURE__ */ r(
R,
{
...x,
className: c(x.className, {
"footer-links--grouped": h,
"footer-links--flow": d,
"footer-links--columns": k
}),
children: /* @__PURE__ */ r("div", { className: "footer-links-inner", children: w })
}
) : null;
}
F.propTypes = {
links: l.arrayOf(
l.shape({
label: l.string,
link: l.string,
render: l.func,
props: l.object
})
),
// 流动布局, 简单的从左到右排列
flowLayout: l.bool,
// 列布局
columns: l.number.isRequired
};
const R = z("div")`
overflow: hidden;
color: ${({ theme: e }) => e.palette.text.secondary};
.footer-links-inner {
display: flex;
justify-content: space-between;
margin: 0 -8px;
}
.footer-links-group,
.footer-links-sub {
display: flex;
flex-direction: column;
}
.footer-links-group-expand-icon {
display: none;
position: absolute;
right: 16px;
top: 50%;
transform: translate(0, -50%);
line-height: 1;
svg {
width: auto;
height: 0.75em;
}
}
.footer-links-item {
display: inline-flex;
align-items: center;
position: relative;
padding: 6px 8px;
font-size: 14px;
&--new::after {
content: 'New';
color: ${({ theme: e }) => e.palette.info.main};
background-color: ${({ theme: e }) => e.palette.info.light};
padding: 1px 8px;
border-radius: 10px/50%;
margin-left: 8px;
}
}
&.footer-links--grouped {
.footer-links-group {
> .footer-links-item {
font-weight: 600;
color: ${({ theme: e }) => e.palette.text.primary};
}
.footer-links-sub {
margin-top: 8px;
}
}
}
a {
display: inline-block;
max-width: 150px;
color: inherit;
text-decoration: none;
transition: color 0.2s ease-in-out;
&:hover {
color: ${({ theme: e }) => e.palette.text.primary};
}
}
/* columns 布局 */
&.footer-links--columns {
.footer-links-inner {
gap: 96px;
}
.footer-links-column {
display: flex;
flex-direction: column;
}
.footer-links-group {
.footer-links-sub {
margin-top: 2px;
margin-bottom: 12px;
}
}
}
/* flow 布局 */
&.footer-links--flow {
display: inline-flex;
.footer-links-inner {
justify-content: center;
flex-wrap: wrap;
margin: 0 -8px;
.footer-links-item {
padding: 0 8px;
}
.footer-links-item + .footer-links-item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
height: 1em;
border-left: 1px solid ${(e) => e.theme.palette.text.secondary};
}
}
}
/* 移动端样式 */
${(e) => e.theme.breakpoints.down("md")} {
.footer-links-inner {
flex-direction: column;
margin: 0;
}
.footer-links-sub {
display: none;
}
.footer-links-group {
position: relative;
padding: 12px 0;
.footer-links-item .footer-links-group-expand-icon {
display: inline-block;
}
}
.footer-links-group + .footer-links-group {
border-top: 1px solid ${(e) => e.theme.palette.grey[200]};
}
.footer-links-group--active {
.footer-links-sub {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.footer-links-item {
flex: 0 0 50%;
}
}
}
.footer-links-item {
padding-left: 0;
padding-right: 0;
font-size: 13px;
}
&.footer-links--grouped {
.footer-links-group {
> .footer-links-item {
font-size: 14px;
}
}
}
&.footer-links--flow {
.footer-links-inner {
flex-direction: row;
}
}
}
`;
export {
F as default
};