@payfit/unity-components
Version:
108 lines (107 loc) • 4.38 kB
JavaScript
import { Icon as e } from "../../icon/Icon.js";
import { Text as t } from "../../text/Text.js";
import { useTaskMenuContext as n } from "../TaskMenu.context.js";
import { TaskGroupContext as r } from "../TaskGroup.context.js";
import { commonTask as i } from "./task.variants.js";
import { Children as a, cloneElement as o, forwardRef as s, isValidElement as c } from "react";
import { uyTv as l } from "@payfit/unity-themes";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
import { useIntl as f } from "react-intl";
import { Button as p } from "react-aria-components/Button";
import { useId as m } from "react-aria/useId";
//#region src/components/task-menu/parts/TaskGroup.tsx
var h = l({
extend: i,
slots: {
base: ["uy:relative uy:flex-col uy:px-200", "uy:md:px-0"],
element: [
"uy:z-[1] uy:py-200",
"uy:md:py-0",
"uy:cursor-pointer"
],
bar: ["uy:absolute uy:top-0 uy:bottom-0 uy:bg-surface-neutral-low uy:w-300 uy:z-[0] uy:rounded-200 uy:mt-250 uy:mb-75", "uy:md:my-75"],
containerSubTasks: [
"uy:list-none uy:ml-100 uy:flex uy:flex-col uy:gap-100 uy:z-[1] uy:relative uy:transition-opacity uy:duration-150 uy:delay-25 uy:ease-linear uy:mt-100",
"uy:group-data-[expanded=true]/base:opacity-100 uy:group-data-[expanded=true]/base:visible",
"uy:group-data-[expanded=false]/base:opacity-0 uy:group-data-[expanded=false]/base:invisible uy:group-data-[expanded=false]/base:pointer-events-none"
],
containerSubTasksWrapper: ["uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none"],
number: [
"uy:bg-surface-neutral-lowest",
"uy:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:text-content-inverted",
"uy:theme-legacy:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:bg-surface-primary-active",
"uy:theme-rebrand:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:bg-surface-neutral-highest-active"
],
text: ["uy:theme-legacy:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:text-content-primary-active", "uy:theme-rebrand:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:text-content-neutral-active"]
}
}), g = (e, t) => e ? a.toArray(t).some((t) => c(t) && t.props.uniqueId === e) : !1, _ = (e) => e ? a.toArray(e).find((e) => c(e) && e.props.taskStatus !== "completed" && e.props.taskStatus !== "locked") : null, v = s(({ children: i, label: s, taskNumber: l, taskStatus: v = "uncompleted", uniqueId: y, ...b }, x) => {
let { currentTask: S, setCurrentTask: C, toggleTaskGroup: w, expandedTaskGroup: T } = n(), E = m(), D = f(), O = T === y, k = (e) => {
if (w?.(y), !e) {
let e = _(i);
if (c(e)) {
let { uniqueId: t, label: n } = e.props;
C?.({
uniqueId: t,
label: n
}, y);
}
}
}, A = a.map(i, (e) => c(e) ? o(e, { isDisabled: !O }) : e), j = `${E}-toggle`, M = `${E}-content`, N = g(S?.uniqueId, i), { base: P, number: F, text: I, bar: L, element: R, containerSubTasks: z } = h({ taskStatus: v });
return /* @__PURE__ */ d("li", {
ref: x,
"data-group": "true",
"data-task-status": v,
"data-expanded": O,
"data-active-group": N,
className: P(),
children: [/* @__PURE__ */ d(p, {
id: j,
className: R(),
onPress: () => {
k(O);
},
"aria-expanded": O,
"aria-controls": M,
...b,
children: [/* @__PURE__ */ u("div", {
className: F(),
children: v === "completed" ? /* @__PURE__ */ u(e, {
size: 24,
src: "CheckOutlined",
alt: D.formatMessage({
id: "unity:component:task-menu:task:completed:label",
defaultMessage: "Completed"
})
}) : /* @__PURE__ */ u(t, {
asElement: "span",
variant: N ? "bodyStrong" : "body",
className: "uy:leading-[1]",
children: l
})
}), /* @__PURE__ */ u(t, {
asElement: "span",
className: I(),
variant: N ? "bodyStrong" : "body",
children: s
})]
}), /* @__PURE__ */ d("div", {
style: { maxHeight: O ? 1e3 : 0 },
children: [/* @__PURE__ */ u("ol", {
id: M,
"aria-labelledby": j,
"aria-hidden": !O,
className: z(),
children: /* @__PURE__ */ u(r.Provider, {
value: y,
children: A
})
}), O && /* @__PURE__ */ u("div", {
role: "presentation",
className: L()
})]
})]
});
});
v.displayName = "TaskGroup";
//#endregion
export { v as TaskGroup };