ExpandToggle.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  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.97
  5. */
  6. import { forceUpdate, h } from '@stencil/core/internal/client/index.js';
  7. import { c as getElementDir } from './dom.js';
  8. import { S as SLOTS } from './action-menu.js';
  9. import { S as SLOTS$1 } from './action-group.js';
  10. const overflowActionsDebounceInMs = 150;
  11. const groupBufferPx = 2;
  12. const getAverage = (arr) => arr.reduce((p, c) => p + c, 0) / arr.length;
  13. const geActionDimensions = (actions) => {
  14. const actionLen = actions === null || actions === void 0 ? void 0 : actions.length;
  15. return {
  16. actionWidth: actionLen ? getAverage(actions.map((action) => action.clientWidth || 0)) : 0,
  17. actionHeight: actionLen ? getAverage(actions.map((action) => action.clientHeight || 0)) : 0
  18. };
  19. };
  20. const getMaxActionCount = ({ width, actionWidth, layout, height, actionHeight, groupCount }) => {
  21. const maxContainerPx = layout === "horizontal" ? width : height;
  22. const avgItemPx = layout === "horizontal" ? actionWidth : actionHeight;
  23. return Math.floor((maxContainerPx - groupCount * groupBufferPx) / avgItemPx);
  24. };
  25. const getOverflowCount = ({ layout, actionCount, actionWidth, width, actionHeight, height, groupCount }) => {
  26. return Math.max(actionCount - getMaxActionCount({ width, actionWidth, layout, height, actionHeight, groupCount }), 0);
  27. };
  28. const queryActions = (el) => {
  29. return Array.from(el.querySelectorAll("calcite-action")).filter((action) => action.closest("calcite-action-menu") ? action.slot === SLOTS.trigger : true);
  30. };
  31. const overflowActions = ({ actionGroups, expanded, overflowCount }) => {
  32. let needToSlotCount = overflowCount;
  33. actionGroups.reverse().forEach((group) => {
  34. let slottedWithinGroupCount = 0;
  35. const groupActions = queryActions(group).reverse();
  36. groupActions.forEach((groupAction) => {
  37. if (groupAction.slot === SLOTS$1.menuActions) {
  38. groupAction.removeAttribute("slot");
  39. groupAction.textEnabled = expanded;
  40. }
  41. });
  42. if (needToSlotCount > 0) {
  43. groupActions.some((groupAction) => {
  44. const unslottedActions = groupActions.filter((action) => !action.slot);
  45. if (unslottedActions.length > 1 && groupActions.length > 2 && !groupAction.closest("calcite-action-menu")) {
  46. groupAction.textEnabled = true;
  47. groupAction.setAttribute("slot", SLOTS$1.menuActions);
  48. slottedWithinGroupCount++;
  49. if (slottedWithinGroupCount > 1) {
  50. needToSlotCount--;
  51. }
  52. }
  53. return needToSlotCount < 1;
  54. });
  55. }
  56. forceUpdate(group);
  57. });
  58. };
  59. const ICONS = {
  60. chevronsLeft: "chevrons-left",
  61. chevronsRight: "chevrons-right"
  62. };
  63. function getCalcitePosition(position, el) {
  64. var _a;
  65. return position || ((_a = el.closest("calcite-shell-panel")) === null || _a === void 0 ? void 0 : _a.position) || "start";
  66. }
  67. function toggleChildActionText({ parent, expanded }) {
  68. queryActions(parent)
  69. .filter((el) => el.slot !== SLOTS$1.menuActions)
  70. .forEach((action) => (action.textEnabled = expanded));
  71. parent
  72. .querySelectorAll("calcite-action-group, calcite-action-menu")
  73. .forEach((el) => (el.expanded = expanded));
  74. }
  75. const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
  76. if (tooltip) {
  77. tooltip.referenceElement = !expanded && referenceElement ? referenceElement : null;
  78. }
  79. if (ref) {
  80. ref(referenceElement);
  81. }
  82. return referenceElement;
  83. };
  84. const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
  85. const rtl = getElementDir(el) === "rtl";
  86. const expandText = expanded ? intlCollapse : intlExpand;
  87. const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
  88. if (rtl) {
  89. icons.reverse();
  90. }
  91. const end = getCalcitePosition(position, el) === "end";
  92. const expandIcon = end ? icons[1] : icons[0];
  93. const collapseIcon = end ? icons[0] : icons[1];
  94. const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
  95. return actionNode;
  96. };
  97. export { ExpandToggle as E, overflowActions as a, getOverflowCount as b, geActionDimensions as g, overflowActionsDebounceInMs as o, queryActions as q, toggleChildActionText as t };