@blocklet/ui-react/lib/UserCenter/components/user-info/user-status.js

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

import { jsxs as w, jsx as s } from "react/jsx-runtime";
import { Tooltip as E, Box as H, Badge as z } from "@mui/material";
import B from "@emotion/styled";
import { lazy as c, useState as k, useEffect as U, useCallback as q, useMemo as A, Suspense as F } from "react";
import { useMemoizedFn as C, useInterval as L, useUnmount as Q, useCreation as G } from "ahooks";
import { useLocaleContext as J } from "@arcblock/ux/lib/Locale/context";
import { translate as K } from "@arcblock/ux/lib/Locale/util";
import { formatToDatetime as P } from "@arcblock/ux/lib/Util";
import { StatusEnum as o, DurationEnum as a } from "../../../@types/index.js";
import V from "../status-dialog/index.js";
import { translations as X } from "../../libs/locales.js";
import { isNotClear as T, isWithinTimeRange as Y, getTimeRemaining as Z } from "./utils.js";
const _ = c(() => import("@arcblock/icons/lib/Meeting")), tt = c(() => import("@arcblock/icons/lib/Community")), et = c(() => import("@arcblock/icons/lib/Holiday")), ot = c(() => import("@arcblock/icons/lib/OffSick")), nt = c(() => import("@arcblock/icons/lib/WorkingRemotely")), $ = {
  [o.Meeting]: _,
  [o.Community]: tt,
  [o.Holiday]: et,
  [o.OffSick]: ot,
  [o.WorkingRemotely]: nt
}, it = {
  [o.Meeting]: {
    duration: a.OneHour,
    durationName: "userStatus.duration.OneHour"
  },
  [o.Community]: {
    duration: a.ThirtyMinutes,
    durationName: "userStatus.duration.ThirtyMinutes"
  },
  [o.Holiday]: {
    duration: a.ThisWeek,
    durationName: "userStatus.duration.ThisWeek"
  },
  [o.OffSick]: {
    duration: a.Today,
    durationName: "userStatus.duration.Today"
  },
  [o.WorkingRemotely]: {
    duration: a.ThisWeek,
    durationName: "userStatus.duration.ThisWeek"
  }
};
function vt({
  isMobile: t = void 0,
  size: I,
  isMyself: h,
  status: i,
  onChange: d,
  timezone: R = void 0
}) {
  const { locale: l } = J(), u = C((n, e = {}) => K(X, n, l, "en", e)), [W, m] = k(void 0), p = C(() => {
    m(void 0);
  });
  U(() => {
    m(1e3);
  }, [i]);
  const b = L(() => {
    if (i?.value && i?.dateRange?.length === 2) {
      if (T(i))
        return;
      if (!Y(i.dateRange))
        p(), d(void 0);
      else {
        const r = Z(i.dateRange[1]);
        r > 0 ? m(r) : (p(), d(void 0));
      }
    } else
      p();
  }, W);
  Q(() => {
    b();
  });
  const [N, g] = k(null), S = q(() => Object.keys(a).map((e) => ({
    id: a[e],
    name: u(`userStatus.duration.${e}`)
  })), [u]), f = G(() => {
    const n = S();
    return Object.keys(o).map((e) => {
      const r = it[o[e]];
      return {
        id: o[e],
        name: u(`userStatus.${e}`),
        icon: $[o[e]],
        ...r ? { duration: r.duration, durationName: u(r.durationName) } : {},
        children: n
      };
    });
  }, [u, S, l]), O = (n) => {
    h && g(n.currentTarget);
  }, x = () => {
    g(null);
  }, D = (n) => {
    h && (d(n), x());
  }, v = $[i?.value], j = A(() => {
    const n = f.find((e) => e.id === i?.value);
    if (n) {
      const e = l === "zh" ? "zh-cn" : "en-us";
      let r;
      return T(i) || (r = i?.dateRange?.map((M) => P(M, { locale: e }))), r && r.length > 0 ? `${n.name}: ${r.join("~")}` : n.name;
    }
    return null;
  }, [i, f, l]), y = !!N;
  return /* @__PURE__ */ w(rt, { size: I, isMobile: t, children: [
    /* @__PURE__ */ s(E, { title: j, children: /* @__PURE__ */ s(
      H,
      {
        className: "status-icon",
        onClick: O,
        sx: {
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        },
        children: v ? /* @__PURE__ */ s(F, { fallback: null, children: /* @__PURE__ */ s(v, { style: { width: 16, height: 16 } }) }) : /* @__PURE__ */ s(z, { color: "success", variant: "dot" })
      }
    ) }),
    y && /* @__PURE__ */ s(
      V,
      {
        selected: i,
        data: f,
        open: y,
        onSelect: D,
        onClose: x,
        timezone: R
      }
    )
  ] });
}
const rt = B("div")`
  position: absolute;
  left: ${({ size: t }) => `${t * 3 / 4}px`};
  top: ${({ size: t }) => `${t * 0.65}px`};
  width: ${({ isMobile: t }) => t ? "22px" : "32px"};
  height: ${({ isMobile: t }) => t ? "22px" : "32px"};
  border-radius: ${({ isMobile: t }) => t ? "11px" : "16px"};
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;

  .status-icon {
    flex-shrink: 0;
    width: ${({ isMobile: t }) => t ? "16px" : "26px"};
    height: ${({ isMobile: t }) => t ? "16px" : "26px"};
    border-radius: ${({ isMobile: t }) => t ? "8px" : "13px"};
    background-color: #eff1f5;
  }
`;
export {
  vt as default
};