ExpandToggle-e41acdfc.js 4.6 KB

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