useResizable.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. import * as React from 'react';
  2. function getShowCollapsibleIcon(prev, next) {
  3. if (prev.collapsible && next.collapsible) {
  4. if (prev.showCollapsibleIcon === true || next.showCollapsibleIcon === true) {
  5. return true;
  6. }
  7. if (prev.showCollapsibleIcon === 'auto' || next.showCollapsibleIcon === 'auto') {
  8. return 'auto';
  9. }
  10. return false;
  11. }
  12. if (prev.collapsible) {
  13. return prev.showCollapsibleIcon;
  14. }
  15. if (next.collapsible) {
  16. return next.showCollapsibleIcon;
  17. }
  18. return false;
  19. }
  20. export default function useResizable(items, pxSizes, isRTL) {
  21. return React.useMemo(() => {
  22. const resizeInfos = [];
  23. for (let i = 0; i < items.length - 1; i += 1) {
  24. const prevItem = items[i];
  25. const nextItem = items[i + 1];
  26. const prevSize = pxSizes[i];
  27. const nextSize = pxSizes[i + 1];
  28. const {
  29. resizable: prevResizable = true,
  30. min: prevMin,
  31. collapsible: prevCollapsible
  32. } = prevItem;
  33. const {
  34. resizable: nextResizable = true,
  35. min: nextMin,
  36. collapsible: nextCollapsible
  37. } = nextItem;
  38. const mergedResizable =
  39. // Both need to be resizable
  40. prevResizable && nextResizable && (
  41. // Prev is not collapsed and limit min size
  42. prevSize !== 0 || !prevMin) && (
  43. // Next is not collapsed and limit min size
  44. nextSize !== 0 || !nextMin);
  45. const prevEndCollapsible = !!prevCollapsible.end && prevSize > 0;
  46. const nextStartExpandable = !!nextCollapsible.start && nextSize === 0 && prevSize > 0;
  47. const startCollapsible = prevEndCollapsible || nextStartExpandable;
  48. const nextStartCollapsible = !!nextCollapsible.start && nextSize > 0;
  49. const prevEndExpandable = !!prevCollapsible.end && prevSize === 0 && nextSize > 0;
  50. const endCollapsible = nextStartCollapsible || prevEndExpandable;
  51. const showStartCollapsibleIcon = getShowCollapsibleIcon({
  52. collapsible: prevEndCollapsible,
  53. showCollapsibleIcon: prevCollapsible.showCollapsibleIcon
  54. }, {
  55. collapsible: nextStartExpandable,
  56. showCollapsibleIcon: nextCollapsible.showCollapsibleIcon
  57. });
  58. const showEndCollapsibleIcon = getShowCollapsibleIcon({
  59. collapsible: nextStartCollapsible,
  60. showCollapsibleIcon: nextCollapsible.showCollapsibleIcon
  61. }, {
  62. collapsible: prevEndExpandable,
  63. showCollapsibleIcon: prevCollapsible.showCollapsibleIcon
  64. });
  65. resizeInfos[i] = {
  66. resizable: mergedResizable,
  67. startCollapsible: !!(isRTL ? endCollapsible : startCollapsible),
  68. endCollapsible: !!(isRTL ? startCollapsible : endCollapsible),
  69. showStartCollapsibleIcon: isRTL ? showEndCollapsibleIcon : showStartCollapsibleIcon,
  70. showEndCollapsibleIcon: isRTL ? showStartCollapsibleIcon : showEndCollapsibleIcon
  71. };
  72. }
  73. return resizeInfos;
  74. }, [pxSizes, items]);
  75. }