@blocklet/ui-react/lib/UserCenter/components/status-selector/duration-menu.js

Some useful front-end web components that can be used in Blocklets.

import { jsxs as s, Fragment as M, jsx as r } from "react/jsx-runtime";
import { styled as g, Menu as x, Typography as v } from "@mui/material";
import { useState as y } from "react";
import { useLocaleContext as z } from "@arcblock/ux/lib/Locale/context";
import { useMemoizedFn as C } from "ahooks";
import { translate as b } from "@arcblock/ux/lib/Locale/util";
import { translations as k } from "../../libs/locales.js";
import u, { StyledMenu as D } from "./menu-item.js";
function B({ data: n, selected: t, onSelect: a }) {
  const { locale: m } = z(), p = C((o, e = {}) => b(k, o, m, "en", e)), [i, l] = y(null), d = !!i, f = (o) => {
    l(o.currentTarget);
  }, c = () => {
    l(null);
  }, h = (o) => {
    f(o);
  }, S = (o, e) => {
    a({
      ...t ?? {},
      value: n.id,
      duration: e.id
    }), c();
  };
  return /* @__PURE__ */ s(M, { children: [
    /* @__PURE__ */ r(u, { icon: n.icon, selected: t?.value === n.id, onClick: h, children: n.name }),
    /* @__PURE__ */ s(
      D,
      {
        anchorOrigin: {
          vertical: "top",
          horizontal: "right"
        },
        transformOrigin: {
          vertical: "top",
          horizontal: "left"
        },
        open: d,
        onClose: c,
        anchorEl: i,
        children: [
          /* @__PURE__ */ r(
            v,
            {
              component: "span",
              sx: {
                color: "text.secondary",
                pl: 2,
                fontSize: "14px"
              },
              children: p("profile.removeStatusAfter")
            }
          ),
          n.children?.map((o) => /* @__PURE__ */ r(
            u,
            {
              selected: t?.duration === o.id,
              onClick: (e) => S(e, o),
              children: o.name
            },
            o.id
          ))
        ]
      }
    )
  ] });
}
const I = g(x)`
  .MuiList-root {
    min-width: 160px;
  }
  .selected {
    background-color: ${({ theme: n }) => n.palette.grey[50]};
  }
`;
export {
  I as MenuDiv,
  B as default
};