ExpandToggle-8c61677e.js 3.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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. 'use strict';
  7. const index = require('./index-5c65e149.js');
  8. const dom = require('./dom-9ac0341c.js');
  9. const resources = require('./resources-1a214670.js');
  10. const resources$1 = require('./resources-5da94c46.js');
  11. const overflowActionsDebounceInMs = 150;
  12. const groupBufferHeight = 2;
  13. const getMaxActionCount = ({ height, actionHeight, groupCount }) => {
  14. return Math.floor((height - groupCount * groupBufferHeight) / actionHeight);
  15. };
  16. const getOverflowCount = ({ actionCount, actionHeight, height, groupCount }) => {
  17. return Math.max(actionCount - getMaxActionCount({ height, actionHeight, groupCount }), 0);
  18. };
  19. const queryActions = (el) => {
  20. return Array.from(el.querySelectorAll("calcite-action")).filter((action) => action.closest("calcite-action-menu") ? action.slot === resources.SLOTS.trigger : true);
  21. };
  22. const overflowActions = ({ actionGroups, expanded, overflowCount }) => {
  23. let needToSlotCount = overflowCount;
  24. actionGroups.reverse().forEach((group) => {
  25. let slottedWithinGroupCount = 0;
  26. const groupActions = queryActions(group).reverse();
  27. groupActions.forEach((groupAction) => {
  28. if (groupAction.slot === resources$1.SLOTS.menuActions) {
  29. groupAction.removeAttribute("slot");
  30. groupAction.textEnabled = expanded;
  31. }
  32. });
  33. if (needToSlotCount > 0) {
  34. groupActions.some((groupAction) => {
  35. const unslottedActions = groupActions.filter((action) => !action.slot);
  36. if (unslottedActions.length > 1 && groupActions.length > 2 && !groupAction.closest("calcite-action-menu")) {
  37. groupAction.textEnabled = true;
  38. groupAction.setAttribute("slot", resources$1.SLOTS.menuActions);
  39. slottedWithinGroupCount++;
  40. if (slottedWithinGroupCount > 1) {
  41. needToSlotCount--;
  42. }
  43. }
  44. return needToSlotCount < 1;
  45. });
  46. }
  47. index.forceUpdate(group);
  48. });
  49. };
  50. const ICONS = {
  51. chevronsLeft: "chevrons-left",
  52. chevronsRight: "chevrons-right"
  53. };
  54. function getCalcitePosition(position, el) {
  55. var _a;
  56. return position || ((_a = el.closest("calcite-shell-panel")) === null || _a === void 0 ? void 0 : _a.position) || "start";
  57. }
  58. function toggleChildActionText({ parent, expanded }) {
  59. queryActions(parent)
  60. .filter((el) => el.slot !== resources$1.SLOTS.menuActions)
  61. .forEach((action) => (action.textEnabled = expanded));
  62. parent.querySelectorAll("calcite-action-group").forEach((group) => (group.expanded = expanded));
  63. }
  64. const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
  65. if (tooltip) {
  66. tooltip.referenceElement = !expanded && referenceElement ? referenceElement : null;
  67. }
  68. if (ref) {
  69. ref(referenceElement);
  70. }
  71. return referenceElement;
  72. };
  73. const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
  74. const rtl = dom.getElementDir(el) === "rtl";
  75. const expandText = expanded ? intlCollapse : intlExpand;
  76. const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
  77. if (rtl) {
  78. icons.reverse();
  79. }
  80. const end = getCalcitePosition(position, el) === "end";
  81. const expandIcon = end ? icons[1] : icons[0];
  82. const collapseIcon = end ? icons[0] : icons[1];
  83. const actionNode = (index.h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
  84. return actionNode;
  85. };
  86. exports.ExpandToggle = ExpandToggle;
  87. exports.getOverflowCount = getOverflowCount;
  88. exports.overflowActions = overflowActions;
  89. exports.overflowActionsDebounceInMs = overflowActionsDebounceInMs;
  90. exports.queryActions = queryActions;
  91. exports.toggleChildActionText = toggleChildActionText;