@payfit/unity-components
Version:
144 lines (143 loc) • 5.47 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 { useTaskGroupId as i } from "../TaskGroup.context.js";
import a from "./dot.js";
import { commonTask as o } from "./task.variants.js";
import { forwardRef as s, useEffect as c } from "react";
import { uyTv as l } from "@payfit/unity-themes";
import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
import { FormattedMessage as p, useIntl as m } from "react-intl";
import { Button as h } from "react-aria-components/Button";
import { Link as g } from "react-aria-components/Link";
//#region src/components/task-menu/parts/RawSubTask.tsx
var _ = l({
extend: o,
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"]
}
}), v = (t, n, r) => {
switch (t) {
case "completed": return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(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__ */ d("span", {
className: "uy:sr-only",
children: /* @__PURE__ */ d(p, {
id: "unity:component:task-menu:task:completed:label",
defaultMessage: "Completed"
})
})] });
case "locked": return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(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__ */ d("span", {
className: "uy:sr-only",
children: /* @__PURE__ */ d(p, {
id: "unity:component:task-menu:task:lock:label",
defaultMessage: "Locked"
})
})] });
default: return null;
}
}, y = s(({ href: e, label: o, taskStatus: s = "uncompleted", isExact: l, isDisabled: u, onPress: p, uniqueId: y, ...b }, x) => {
let S = m(), C = n(), w = i(), { currentTask: T, setCurrentTask: E, state: D } = r();
c(() => {
e && C?.isActive(e.toString(), l) && E?.({
uniqueId: y,
label: o
}, w ?? void 0);
}, [
e,
l,
C,
y,
o,
E,
w
]);
let O = T?.uniqueId === y, { base: k, element: A, text: j, dot: M, lock: N } = _({ taskStatus: s }), P = {
"data-current": O,
"aria-current": O ? "page" : void 0
}, F = e ? g : h;
return /* @__PURE__ */ f("li", {
ref: x,
"data-task-status": s,
className: k(),
...O ? { "data-current": !0 } : {},
...b,
children: [/* @__PURE__ */ d(a, {
width: 8,
height: 8,
className: M(),
role: "presentation"
}), /* @__PURE__ */ f(F, {
className: A(),
href: e,
onPress: (e) => {
E?.({
uniqueId: y,
label: o
}, w ?? void 0), D?.toggle(), p?.(e);
},
isDisabled: u,
...P,
...b,
children: [/* @__PURE__ */ d(t, {
asElement: "span",
className: j(),
variant: O ? "bodyStrong" : "body",
children: o
}), v(s, S, {
locked: N(),
completed: "uy:self-center",
uncompleted: ""
})]
})]
});
});
y.displayName = "RawSubTask";
//#endregion
export { y as RawSubTask, _ as rawSubTask };