@payfit/unity-components
Version:
142 lines (141 loc) • 5.36 kB
JavaScript
import { Icon as e } from "../../icon/Icon.js";
import { Text as t } from "../../text/Text.js";
import { useRouter as n } from "../../../providers/router/RouterProvider.js";
import { useTaskMenuContext as r } from "../TaskMenu.context.js";
import i from "./dot.js";
import { commonTask as a } from "./task.variants.js";
import { forwardRef as o, useEffect as s } from "react";
import { uyTv as c } from "@payfit/unity-themes";
import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
import { FormattedMessage as f, useIntl as p } from "react-intl";
import { Button as m } from "react-aria-components/Button";
import { Link as h } from "react-aria-components/Link";
//#region src/components/task-menu/parts/RawSubTask.tsx
var g = c({
extend: a,
slots: {
base: ["uy:gap-300 uy:py-100", "uy:md:py-50"],
dot: [
"uy:self-center",
"uy:fill-content-neutral-lowest",
"uy:theme-legacy:group-data-[current=true]/base:fill-content-primary",
"uy:theme-rebrand:group-data-[current=true]/base:fill-surface-neutral-highest-active"
],
text: [
"uy:bg-surface-neutral-enabled",
"uy:md:bg-[transparent]",
"uy:leading-[1]",
"uy:group-data-[task-status=uncompleted]/base:group-data-[hovered=true]/element:bg-surface-neutral-hover",
"uy:group-data-[task-status=uncompleted]/base:group-data-[hovered=true]/element:text-content-neutral-hover",
"uy:group-data-[task-status=completed]/base:group-data-[hovered=true]/element:bg-surface-neutral-hover",
"uy:group-data-[task-status=completed]/base:group-data-[hovered=true]/element:text-content-neutral-hover",
"uy:group-data-[task-status=locked]/base:group-data-[hovered=true]/element:bg-surface-neutral-hover",
"uy:group-data-[task-status=locked]/base:group-data-[hovered=true]/element:text-content-neutral-hover",
"uy:group-data-[task-status=uncompleted]/base:group-data-[pressed=true]/element:bg-surface-neutral-pressed",
"uy:group-data-[task-status=uncompleted]/base:group-data-[pressed=true]/element:text-content-neutral-pressed",
"uy:group-data-[task-status=completed]/base:group-data-[pressed=true]/element:bg-surface-neutral-pressed",
"uy:group-data-[task-status=completed]/base:group-data-[pressed=true]/element:text-content-neutral-pressed",
"uy:group-data-[task-status=locked]/base:group-data-[pressed=true]/element:bg-surface-neutral-pressed",
"uy:group-data-[task-status=locked]/base:group-data-[pressed=true]/element:text-content-neutral-pressed",
"uy:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:bg-surface-neutral-selected",
"uy:md:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:bg-[transparent]",
"uy:theme-rebrand:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:bg-surface-neutral-selected"
],
element: ["uy:rounded-50"],
number: ["uy:group-data-[task-status=uncompleted]/base:group-[&[data-pressed]:not([aria-current=page])]/element:bg-surface-neutral-pressed"]
}
}), _ = (t, n, r) => {
switch (t) {
case "completed": return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(e, {
className: r?.completed,
src: "CheckCircleOutlined",
size: 20,
color: "content.success",
alt: n.formatMessage({
id: "unity:component:task-menu:task:completed:label",
defaultMessage: "Completed"
})
}), /* @__PURE__ */ u("span", {
className: "uy:sr-only",
children: /* @__PURE__ */ u(f, {
id: "unity:component:task-menu:task:completed:label",
defaultMessage: "Completed"
})
})] });
case "locked": return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(e, {
"aria-hidden": "true",
className: r?.locked,
src: "LockOutlined",
size: 20,
color: "content.neutral.lowest",
alt: n.formatMessage({
id: "unity:component:task-menu:task:lock:label",
defaultMessage: "Locked"
})
}), /* @__PURE__ */ u("span", {
className: "uy:sr-only",
children: /* @__PURE__ */ u(f, {
id: "unity:component:task-menu:task:lock:label",
defaultMessage: "Locked"
})
})] });
default: return null;
}
}, v = o(({ href: e, label: a, taskStatus: o = "uncompleted", isExact: c, isDisabled: l, onPress: f, uniqueId: v, ...y }, b) => {
let x = p(), S = n(), { currentTask: C, setCurrentTask: w, state: T } = r();
s(() => {
e && S?.isActive(e.toString(), c) && w?.({
uniqueId: v,
label: a
});
}, [
e,
c,
S,
v,
a,
w
]);
let E = C?.uniqueId === v, { base: D, element: O, text: k, dot: A, lock: j } = g({ taskStatus: o }), M = {
"data-current": E,
"aria-current": E ? "page" : void 0
}, N = e ? h : m;
return /* @__PURE__ */ d("li", {
ref: b,
"data-task-status": o,
className: D(),
...E ? { "data-current": !0 } : {},
...y,
children: [/* @__PURE__ */ u(i, {
width: 8,
height: 8,
className: A(),
role: "presentation"
}), /* @__PURE__ */ d(N, {
className: O(),
href: e,
onPress: (e) => {
w?.({
uniqueId: v,
label: a
}), T?.toggle(), f?.(e);
},
isDisabled: l,
...M,
...y,
children: [/* @__PURE__ */ u(t, {
asElement: "span",
className: k(),
variant: E ? "bodyStrong" : "body",
children: a
}), _(o, x, {
locked: j(),
completed: "uy:self-center",
uncompleted: ""
})]
})]
});
});
v.displayName = "RawSubTask";
//#endregion
export { v as RawSubTask, g as rawSubTask };