ExpandToggle.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. /*!
  2. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  4. * v1.0.0-beta.82
  5. */
  6. import { h } from "@stencil/core";
  7. import { getElementDir } from "../../utils/dom";
  8. import { queryActions } from "../action-bar/utils";
  9. import { SLOTS as ACTION_GROUP_SLOTS } from "../action-group/resources";
  10. const ICONS = {
  11. chevronsLeft: "chevrons-left",
  12. chevronsRight: "chevrons-right"
  13. };
  14. function getCalcitePosition(position, el) {
  15. var _a;
  16. return position || ((_a = el.closest("calcite-shell-panel")) === null || _a === void 0 ? void 0 : _a.position) || "start";
  17. }
  18. export function toggleChildActionText({ parent, expanded }) {
  19. queryActions(parent)
  20. .filter((el) => el.slot !== ACTION_GROUP_SLOTS.menuActions)
  21. .forEach((action) => (action.textEnabled = expanded));
  22. parent.querySelectorAll("calcite-action-group").forEach((group) => (group.expanded = expanded));
  23. }
  24. const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
  25. if (tooltip) {
  26. tooltip.referenceElement = !expanded && referenceElement ? referenceElement : null;
  27. }
  28. if (ref) {
  29. ref(referenceElement);
  30. }
  31. return referenceElement;
  32. };
  33. export const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
  34. const rtl = getElementDir(el) === "rtl";
  35. const expandText = expanded ? intlCollapse : intlExpand;
  36. const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
  37. if (rtl) {
  38. icons.reverse();
  39. }
  40. const end = getCalcitePosition(position, el) === "end";
  41. const expandIcon = end ? icons[1] : icons[0];
  42. const collapseIcon = end ? icons[0] : icons[1];
  43. const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
  44. return actionNode;
  45. };