@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
251 lines (247 loc) • 7.23 kB
JavaScript
import { jsx as r, jsxs as d, Fragment as M } from "react/jsx-runtime";
import { useState as j } from "react";
import i from "prop-types";
import { useCreation as I } from "ahooks";
import z from "lodash/isInteger";
import P from "lodash/isString";
import { styled as F } from "@arcblock/ux/lib/Theme";
import u from "clsx";
import { ExpandMore as A } from "@mui/icons-material";
import E from "../Icon/index.js";
import S from "../hooks/use-mobile.js";
import { splitNavColumns as T, isMailProtocol as W } from "../utils.js";
function _({ links: e = [], flowLayout: g = !1, minColumns: f = 1, maxColumns: k = 4, ...h }) {
const [x, y] = j(-1), v = S({ key: "md" }), b = e.some((t) => t.items?.length), m = !v && b && z(f) && f > 1 && k >= f, w = m ? Math.min(Math.max(e.length, f), k) : 1, p = ({ label: t, link: o, icon: n, render: a, props: s }) => {
let l = t;
if (a)
l = a({ label: t, link: o, props: s });
else if (o && P(o)) {
const c = o.startsWith("http") || o.startsWith("//"), $ = W(o) ? {} : {
target: c ? "_blank" : "_self",
rel: c ? "noreferrer noopener" : void 0
};
l = /* @__PURE__ */ r("a", { href: o, "aria-label": `Footer link for ${t}`, ...$, ...s, children: t });
}
return /* @__PURE__ */ d(M, { children: [
n && /* @__PURE__ */ r(E, { icon: n, size: 20, sx: { mr: 0.5 } }),
l
] });
}, N = I(() => e?.length ? g ? e.map((t, o) => /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(t) }, o)) : m ? T(e, { columns: w }).map((t, o) => /* @__PURE__ */ r("div", { className: "footer-links-column", children: t.filter((n) => n.group).map((n, a) => {
const { items: s } = n;
return /* @__PURE__ */ d("div", { className: "footer-links-group", children: [
/* @__PURE__ */ r("span", { className: "footer-links-item", children: p(n) }),
!!s?.length && /* @__PURE__ */ r("div", { className: "footer-links-sub", children: s.map((l, c) => /* @__PURE__ */ r(
"span",
{
className: u("footer-links-item", { "footer-links-item--new": l.isNew }),
children: p(l)
},
c
)) })
] }, a);
}) }, o)) : e.map((t, o) => {
const { items: n } = t, a = o === x;
return /* @__PURE__ */ d(
"div",
{
className: u("footer-links-group", {
"footer-links-group--active": a
}),
onClick: () => y(x === o ? -1 : o),
children: [
/* @__PURE__ */ d("span", { className: "footer-links-item", children: [
p(t),
!!n?.length && /* @__PURE__ */ r("span", { className: "footer-links-group-expand-icon", children: /* @__PURE__ */ r(
A,
{
style: {
transform: `rotate(${a ? 180 : 0}deg)`
}
}
) })
] }),
!!n?.length && /* @__PURE__ */ r("div", { className: "footer-links-sub", children: n.map((s, l) => /* @__PURE__ */ r("span", { className: u("footer-links-item", { "footer-links-item--new": s.isNew }), children: p(s) }, l)) })
]
},
o
);
}) : null, [e, g, m, x]);
return e?.length ? /* @__PURE__ */ r(
C,
{
columns: w,
...h,
className: u(h.className, {
"footer-links--grouped": b,
"footer-links--flow": g,
"footer-links--columns": m
}),
children: /* @__PURE__ */ r("div", { className: "footer-links-inner", children: N })
}
) : null;
}
_.propTypes = {
links: i.arrayOf(
i.shape({
label: i.string,
link: i.string,
render: i.func,
props: i.object
})
),
// 流动布局, 简单的从左到右排列
flowLayout: i.bool,
// 列布局，最小列数，最大列数
minColumns: i.number,
maxColumns: i.number
};
const C = F("div", { shouldForwardProp: (e) => e !== "columns" })`
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;
white-space: nowrap;
&--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: ${({ columns: e }) => `${288 / e}px`};
}
.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 {
_ as default
};