@payfit/unity-components
Version:
104 lines (103 loc) • 4.24 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 { commonTask as r } from "./task.variants.js";
import { Children as i, cloneElement as a, forwardRef as o, isValidElement as s } from "react";
import { uyTv as c } from "@payfit/unity-themes";
import { jsx as l, jsxs as u } from "react/jsx-runtime";
import { useIntl as d } from "react-intl";
import { Button as f } from "react-aria-components/Button";
import { useId as p } from "react-aria/useId";
//#region src/components/task-menu/parts/TaskGroup.tsx
var m = c({
extend: r,
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"]
}
}), h = (e, t) => e ? i.toArray(t).some((t) => s(t) && t.props.uniqueId === e) : !1, g = (e) => e ? i.toArray(e).find((e) => s(e) && e.props.taskStatus !== "completed" && e.props.taskStatus !== "locked") : null, _ = o(({ children: r, label: o, taskNumber: c, taskStatus: _ = "uncompleted", uniqueId: v, ...y }, b) => {
let { currentTask: x, setCurrentTask: S, toggleTaskGroup: C, expandedTaskGroup: w } = n(), T = p(), E = d(), D = w === v, O = (e) => {
if (C?.(v), !e) {
let e = g(r);
if (s(e)) {
let { uniqueId: t, label: n } = e.props;
S?.({
uniqueId: t,
label: n
});
}
}
}, k = i.map(r, (e) => s(e) ? a(e, { isDisabled: !D }) : e), A = `${T}-toggle`, j = `${T}-content`, M = h(x?.uniqueId, r), { base: N, number: P, text: F, bar: I, element: L, containerSubTasks: R } = m({ taskStatus: _ });
return /* @__PURE__ */ u("li", {
ref: b,
"data-group": "true",
"data-task-status": _,
"data-expanded": D,
"data-active-group": M,
className: N(),
children: [/* @__PURE__ */ u(f, {
id: A,
className: L(),
onPress: () => {
O(D);
},
"aria-expanded": D,
"aria-controls": j,
...y,
children: [/* @__PURE__ */ l("div", {
className: P(),
children: _ === "completed" ? /* @__PURE__ */ l(e, {
size: 24,
src: "CheckOutlined",
alt: E.formatMessage({
id: "unity:component:task-menu:task:completed:label",
defaultMessage: "Completed"
})
}) : /* @__PURE__ */ l(t, {
asElement: "span",
variant: M ? "bodyStrong" : "body",
className: "uy:leading-[1]",
children: c
})
}), /* @__PURE__ */ l(t, {
asElement: "span",
className: F(),
variant: M ? "bodyStrong" : "body",
children: o
})]
}), /* @__PURE__ */ u("div", {
style: { maxHeight: D ? 1e3 : 0 },
children: [/* @__PURE__ */ l("ol", {
id: j,
"aria-labelledby": A,
"aria-hidden": !D,
className: R(),
children: k
}), D && /* @__PURE__ */ l("div", {
role: "presentation",
className: I()
})]
})]
});
});
_.displayName = "TaskGroup";
//#endregion
export { _ as TaskGroup };