@scaleflex/widget-common 4.4.0 → 4.5.1

package/lib/UsersAutocomplete/index.js

@@ -0,0 +1,303 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState, useMemo, useRef, useEffect } from 'react';
+import { FormHint, Menu, TooltipV2, TextWithHighlights, Button } from '@scaleflex/ui/core';
+import InfoIcon from '@scaleflex/icons/info-outline';
+import Spinner from '../Spinner';
+import Avatar from '../Avatar';
+import Tag from './Tag';
+import Styled from './UsersAutocomplete.styled';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export var INPUT_TYPE = {
+  USER_INPUT: 'UserInput',
+  SUGGESTION: 'Suggestion'
+};
+var UsersAutocomplete = function UsersAutocomplete(_ref) {
+  var _ref$suggestions = _ref.suggestions,
+    suggestions = _ref$suggestions === void 0 ? [] : _ref$suggestions,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? [] : _ref$value,
+    onAdd = _ref.onAdd,
+    _onRemove = _ref.onRemove,
+    label = _ref.label,
+    onClickPrimaryButton = _ref.onClickPrimaryButton,
+    onClickSecondaryButton = _ref.onClickSecondaryButton,
+    primaryActionButtonText = _ref.primaryActionButtonText,
+    secondaryActionButtonText = _ref.secondaryActionButtonText,
+    renderMenuItem = _ref.renderMenuItem,
+    renderTagIcon = _ref.renderTagIcon,
+    renderTagLabel = _ref.renderTagLabel,
+    placeholder = _ref.placeholder,
+    error = _ref.error,
+    loading = _ref.loading,
+    hint = _ref.hint,
+    _ref$getValue = _ref.getValue,
+    getValue = _ref$getValue === void 0 ? function (item) {
+      return (item === null || item === void 0 ? void 0 : item.uuid) || (item === null || item === void 0 ? void 0 : item.id);
+    } : _ref$getValue,
+    maxHeight = _ref.maxHeight,
+    fullWidth = _ref.fullWidth,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    _ref$showPlaceholderO = _ref.showPlaceholderOnlyWhenNoSelection,
+    showPlaceholderOnlyWhenNoSelection = _ref$showPlaceholderO === void 0 ? false : _ref$showPlaceholderO,
+    suggestionsGroups = _ref.suggestionsGroups,
+    _ref$maxMenuHeight = _ref.maxMenuHeight,
+    maxMenuHeight = _ref$maxMenuHeight === void 0 ? 190 : _ref$maxMenuHeight,
+    disabledOptionTooltip = _ref.disabledOptionTooltip,
+    _ref$onEnterSelectFir = _ref.onEnterSelectFirstSuggestion,
+    onEnterSelectFirstSuggestion = _ref$onEnterSelectFir === void 0 ? true : _ref$onEnterSelectFir,
+    onOpenMenu = _ref.onOpenMenu,
+    menuStyles = _ref.menuStyles,
+    onCloseMenu = _ref.onCloseMenu;
+  var selectedItems = useMemo(function () {
+    return (value || []).map(function (id) {
+      return (suggestions || []).find(function (suggestion) {
+        return getValue(suggestion) === id;
+      });
+    }).filter(Boolean);
+  }, [value, suggestions]);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    userInput = _useState2[0],
+    setUserInput = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    suggestionsAnchorEl = _useState4[0],
+    setSuggestionsAnchorEl = _useState4[1];
+  var fieldContainerRef = useRef(null);
+  var fieldInputRef = useRef(null);
+  var isMenuOpened = Boolean(suggestionsAnchorEl);
+  var showPrimaryButton = Boolean(typeof onClickPrimaryButton === 'function' && primaryActionButtonText);
+  var showSecondaryButton = Boolean(typeof onClickSecondaryButton === 'function' && secondaryActionButtonText && value.length > 0);
+  var showActionButtons = showPrimaryButton || showSecondaryButton;
+  var availableSuggestions = useMemo(function () {
+    return (suggestions || []).filter(function (suggestion) {
+      return !value.includes(getValue(suggestion));
+    });
+  }, [suggestions, value]);
+  var filteredSuggestions = useMemo(function () {
+    var loweredInput = userInput.toLowerCase();
+    return userInput ? availableSuggestions.filter(function (_ref2) {
+      var name = _ref2.name,
+        email = _ref2.email;
+      return name && name.toLowerCase().includes(loweredInput) || email && email.toLowerCase().includes(loweredInput);
+    }) : availableSuggestions;
+  }, [userInput, availableSuggestions]);
+  var handleTagAdd = function handleTagAdd(item, type) {
+    if (!item) return;
+    onAdd(item, type);
+  };
+  var handleSelectSuggestion = function handleSelectSuggestion(selectedSuggestion) {
+    closeMenu(); // TODO: do we need this?
+    setUserInput('');
+    handleTagAdd(selectedSuggestion, INPUT_TYPE.SUGGESTION);
+  };
+  var handleUserInputKeyDown = function handleUserInputKeyDown(event) {
+    if (event.key === 'Enter' && userInput) {
+      event.preventDefault();
+      var firstNotDisabledFilteredSuggestion = filteredSuggestions.find(function (suggestion) {
+        return !(suggestion !== null && suggestion !== void 0 && suggestion.disabled);
+      });
+      if (onEnterSelectFirstSuggestion && firstNotDisabledFilteredSuggestion) {
+        handleSelectSuggestion(firstNotDisabledFilteredSuggestion);
+      } else {
+        handleTagAdd(userInput, INPUT_TYPE.USER_INPUT);
+      }
+      setUserInput('');
+    } else if (event.key === 'Backspace' && !userInput) {
+      var index = selectedItems.length - 1;
+      if (index > -1) {
+        _onRemove(getValue(selectedItems[index]), index);
+      }
+    } else if (event.key === 'Escape') {
+      event.stopPropagation();
+      event.preventDefault();
+      setUserInput('');
+      closeMenu();
+    }
+  };
+  var openMenu = function openMenu() {
+    return setSuggestionsAnchorEl(fieldContainerRef.current);
+  };
+  var closeMenu = function closeMenu() {
+    return setSuggestionsAnchorEl(null);
+  };
+  var highlightSearchQuery = function highlightSearchQuery(text) {
+    return userInput ? /*#__PURE__*/_jsx(TextWithHighlights, {
+      text: text || '',
+      highlightText: userInput || ''
+    }) : text;
+  };
+  var renderMenuItemFn = typeof renderMenuItem === 'function' ? renderMenuItem : function (suggestion, _ref3) {
+    var selectSuggestion = _ref3.selectSuggestion;
+    return /*#__PURE__*/_jsxs(Styled.OptionMenuItem, {
+      disabled: !!suggestion.disabled,
+      onClick: function onClick() {
+        return selectSuggestion(suggestion);
+      },
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        photo: suggestion.photo_uri || suggestion.photo
+      }), /*#__PURE__*/_jsxs(Styled.OptionDesc, {
+        children: [/*#__PURE__*/_jsxs(Styled.OptionDescTitle, {
+          children: [/*#__PURE__*/_jsx("span", {
+            children: suggestion.name ? highlightSearchQuery(suggestion.name) : '---'
+          }), suggestion.disabled && disabledOptionTooltip && /*#__PURE__*/_jsx(TooltipV2, {
+            title: disabledOptionTooltip,
+            position: "right",
+            children: /*#__PURE__*/_jsx(InfoIcon, {})
+          })]
+        }), /*#__PURE__*/_jsx(Styled.OptionDescSubtitle, {
+          children: highlightSearchQuery(suggestion.email)
+        })]
+      })]
+    }, getValue(suggestion));
+  };
+  var handleRenderMenuItem = function handleRenderMenuItem(suggestion) {
+    return renderMenuItemFn(suggestion, {
+      selectSuggestion: disabled || suggestion !== null && suggestion !== void 0 && suggestion.disabled ? function () {} : handleSelectSuggestion
+    });
+  };
+  var removeAllItems = function removeAllItems() {
+    setUserInput('');
+    onClickSecondaryButton();
+  };
+  var getTagsIcon = function getTagsIcon(item) {
+    if (typeof renderTagIcon === 'function') return renderTagIcon(item);
+    return /*#__PURE__*/_jsx(Avatar, {
+      photo: item.photo_uri || item.photo,
+      size: 16,
+      iconSize: 7
+    });
+  };
+  var menuItemsArray = suggestionsGroups && suggestionsGroups.length > 0 ? suggestionsGroups.reduce(function (accum, _ref4) {
+    var label = _ref4.label,
+      filterFn = _ref4.filterFn;
+    var filteredItems = filteredSuggestions.filter(filterFn);
+    return filteredItems.length > 0 ? [].concat(_toConsumableArray(accum), [/*#__PURE__*/_jsx(Styled.Label, {
+      children: label
+    }, label)], _toConsumableArray(filteredItems.map(handleRenderMenuItem))) : accum;
+  }, []) : filteredSuggestions.map(handleRenderMenuItem);
+  useEffect(function () {
+    if (isMenuOpened && typeof onOpenMenu === 'function') {
+      onOpenMenu();
+    } else if (!isMenuOpened && typeof onCloseMenu === 'function') {
+      onCloseMenu();
+    }
+  }, [isMenuOpened]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Styled.Container, {
+      className: "filerobot-common-UsersAutocomplete",
+      children: [label && /*#__PURE__*/_jsx(Styled.Label, {
+        error: error,
+        children: label
+      }), /*#__PURE__*/_jsxs(Styled.FieldContainerWrapper, {
+        children: [/*#__PURE__*/_jsxs(Styled.FieldContainer, {
+          fullWidth: Boolean(fullWidth),
+          ref: fieldContainerRef,
+          maxHeight: maxHeight,
+          tabIndex: -1,
+          onClick: function onClick(_ref5) {
+            var currentTarget = _ref5.currentTarget;
+            if (currentTarget) {
+              var inputElem = currentTarget.querySelector('input');
+              if (inputElem) inputElem.focus();
+            }
+          },
+          onBlur: function onBlur() {
+            if (!isMenuOpened) {
+              setUserInput('');
+            }
+          },
+          children: [(selectedItems || []).map(function (item, index) {
+            return /*#__PURE__*/_jsx(Styled.FieldItem, {
+              children: /*#__PURE__*/_jsx(Tag, {
+                label: typeof renderTagLabel === 'function' ? renderTagLabel(item) : item === null || item === void 0 ? void 0 : item.email,
+                icon: function icon() {
+                  return getTagsIcon(item);
+                },
+                onRemove: function onRemove() {
+                  return _onRemove(getValue(item), index);
+                },
+                onClick: function onClick(event) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                }
+              })
+            }, getValue(item));
+          }), loading ? /*#__PURE__*/_jsx(Styled.FieldItemLoader, {
+            children: /*#__PURE__*/_jsx(Spinner, {
+              color: "#768184"
+            })
+          }) : /*#__PURE__*/_jsx(Styled.FieldItemInput, {
+            ref: fieldInputRef,
+            value: userInput,
+            type: "text",
+            autoComplete: "off",
+            placeholder: !showPlaceholderOnlyWhenNoSelection || selectedItems.length === 0 ? placeholder : undefined,
+            onChange: function onChange(ev) {
+              setUserInput(ev.target.value);
+              if (ev.target.value) openMenu();
+            },
+            onKeyDown: handleUserInputKeyDown,
+            readOnly: readOnly,
+            disabled: disabled,
+            onFocus: function onFocus() {
+              // TODO: Do we need this?
+              // if (userInput) {
+              //   openMenu()
+              // }
+            },
+            noSelection: selectedItems.length === 0,
+            isMenuOpened: isMenuOpened
+          })]
+        }), showActionButtons && /*#__PURE__*/_jsxs(Styled.ActionButtonWrapper, {
+          children: [showPrimaryButton && /*#__PURE__*/_jsx(Button, {
+            size: "sm",
+            color: "link-basic-primary",
+            onClick: onClickPrimaryButton,
+            children: primaryActionButtonText
+          }), showSecondaryButton && /*#__PURE__*/_jsx(Button, {
+            color: "link-secondary",
+            size: "sm",
+            onClick: removeAllItems,
+            children: secondaryActionButtonText
+          })]
+        })]
+      }), hint && /*#__PURE__*/_jsx(FormHint, {
+        error: error,
+        children: hint
+      })]
+    }), menuItemsArray.length > 0 && isMenuOpened && /*#__PURE__*/_jsx(Menu, {
+      anchorEl: suggestionsAnchorEl,
+      open: isMenuOpened,
+      onClose: function onClose() {
+        closeMenu();
+        setUserInput('');
+      },
+      hideScroll: false,
+      style: _objectSpread({
+        maxHeight: maxMenuHeight,
+        padding: 8,
+        marginTop: 1,
+        background: '#ffffff'
+      }, menuStyles),
+      children: menuItemsArray
+    })]
+  });
+};
+export default UsersAutocomplete;

package/lib/VirtualGrid/VirtualGrid.styled.js

@@ -0,0 +1,33 @@
+var _templateObject, _templateObject2, _templateObject3;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+var RootContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
+var GridContainer = styled.div.attrs(function (_ref) {
+  var _ref$$transform = _ref.$transform,
+    $transform = _ref$$transform === void 0 ? 0 : _ref$$transform,
+    $height = _ref.$height;
+  return {
+    style: {
+      transform: "translateY(".concat($transform, "px)"),
+      height: $height
+    }
+  };
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  gap: ", ";\n  will-change: transform;\n  display: grid;\n  grid-template-columns: ", ";\n  grid-auto-rows: max-content;\n  padding-right: 1px; // for making sure that the last items in the row borders/edges will be shown without being hidden.\n"])), function (_ref2) {
+  var _ref2$gap = _ref2.gap,
+    gap = _ref2$gap === void 0 ? '16px' : _ref2$gap;
+  return gap;
+}, function (_ref3) {
+  var _ref3$columnMinWidth = _ref3.columnMinWidth,
+    columnMinWidth = _ref3$columnMinWidth === void 0 ? 214 : _ref3$columnMinWidth;
+  return "repeat(auto-fill, minmax(".concat(columnMinWidth, "px, 1fr))");
+});
+var EmptyItem = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  visibility: hidden;\n  pointer-events: none;\n  flex-basis: ", "px;\n"])), function (_ref4) {
+  var $width = _ref4.$width;
+  return $width;
+});
+var Styled = {
+  RootContainer: RootContainer,
+  GridContainer: GridContainer,
+  EmptyItem: EmptyItem
+};
+export default Styled;

package/lib/VirtualGrid/VirtualGrid.utils.js

@@ -0,0 +1,38 @@
+var _excluded = ["height"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+export var getLayoutInfo = function getLayoutInfo(gridContainer, scrollableParent, columnMinWidth) {
+  if (!gridContainer || !scrollableParent) return {};
+  var _gridContainer$getBou = gridContainer.getBoundingClientRect(),
+    width = _gridContainer$getBou.width;
+  var _gridContainer$firstC = gridContainer.firstChild,
+    firstChild = _gridContainer$firstC === void 0 ? {} : _gridContainer$firstC;
+  var _ref = (firstChild === null || firstChild === void 0 ? void 0 : firstChild.getBoundingClientRect()) || {},
+    elementHeight = _ref.height,
+    boundingRect = _objectWithoutProperties(_ref, _excluded);
+  var elementWidth = boundingRect.width || columnMinWidth;
+  var _window$getComputedSt = window.getComputedStyle(gridContainer),
+    rowGap = _window$getComputedSt.rowGap,
+    columnGap = _window$getComputedSt.columnGap;
+  rowGap = parseFloat(rowGap) || 0;
+  columnGap = parseFloat(columnGap) || 0;
+  var visibleHeight = scrollableParent.clientHeight;
+  // We are adding the row/column gap to the height/width, cause the gaps are applied for the rows/columns' count - 1
+  // if we didn't add the gap to the height/width, the equation's result won't be accurate as there is additional pixels (for additional un-rendered gap) considered
+  // So we are considering removing that additional pixels by adding the gap to the height/width and in that case it will be removed after dividing by the element's height/width + gap
+  // Summary: grid N elements have N-1 gaps, adding the gap to the element's height/width will add additional gap in the calculations but it is not added in the DOM, we're removing that by adding the gap to the container's height/width
+  var rowsCount = Math.floor((visibleHeight + rowGap) / (elementHeight + rowGap)) || 1;
+  var columnsCount = Math.floor((width + columnGap) / (elementWidth + columnGap)) || 1;
+  return {
+    elementWidth: elementWidth,
+    elementHeight: elementHeight,
+    columnsCount: columnsCount,
+    rowsCount: rowsCount,
+    rowGap: rowGap,
+    columnGap: columnGap
+  };
+};
+export var defaultGetItemKey = function defaultGetItemKey(item, index) {
+  return (_typeof(item) === 'object' ? item.uuid || item.id : item) || index;
+};

package/lib/VirtualGrid/VirtualGridItem.js

@@ -0,0 +1,15 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { memo, cloneElement, Children } from 'react';
+var VirtualGridItem = function VirtualGridItem(_ref) {
+  var children = _ref.children,
+    item = _ref.item,
+    itemPropName = _ref.itemPropName,
+    index = _ref.index;
+  return typeof children === 'function' ? children(item) : Children.map(children, function (child) {
+    return /*#__PURE__*/cloneElement(child, _defineProperty(_defineProperty({}, itemPropName, item), "index", index));
+  });
+};
+export default /*#__PURE__*/memo(VirtualGridItem);

package/lib/VirtualGrid/index.js

@@ -0,0 +1,252 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { memo, useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import getScrollableParent from '@scaleflex/widget-explorer/lib/utils/getScrollableParent';
+import StyledVirtualGrid from './VirtualGrid.styled';
+import VirtualGridItem from './VirtualGridItem';
+import { defaultGetItemKey, getLayoutInfo } from './VirtualGrid.utils';
+
+// TODO: Refactor the VirtualGrid to consider also the skeleton loading to avoid jumping, and use the same size of skeleton's and align items size.
+/**
+ * A Virtual grid that applies (windowing) concept for reusing the DOM elements and avoid rerendering for all items.
+ * @param {Array} items - The items that will be used in the grid (required).
+ * @param {ReactNode} children - The children that will be rendered for each item (required).
+ * @param {String} injectedItemPropName - The name of the prop that will be injected in the children  (optional).
+ * @param {Number} overscan - The number of items that will be rendered before and after the viewport in rows  (optional).
+ * @param {Function} getItemKey - The function that will be used to get the item key (optional).
+ * @param {Boolean} stopChildEventsPropagation - if `true`, the children's items click events won't be propagated outside of the virtual grid component (incase of needing to handle some specific case on grid's container empty space click).
+ * @param {Number} columnMinWidth - The minimum width of the column in pixels (optional - default is 214px).
+ * @param {String} scrollToKeyOnMount - The key of the item that will be scrolled to on mount the grid (optional).
+ * @param {ReactRef} apiRef - the reference that will contain the api functions to deal with the grid (optional)
+ *        1- `scrollToItem({ key, index })` function that scrolls the grid to the specified item's key, the key should be the same property that's returned from getItemKey, index should be the item's index.
+ * @returns {ReactNode} - The VirtualGrid component.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var MARGIN_BOTTOM_SPACE = 24;
+var DEFAULT_LAYOUT_INFO = {
+  // ELEMENT_HEIGHT => Used to know that we haven't auto recognized the element's height yet hence fit to the container's height for avoiding jumping effect.
+  ELEMENT_HEIGHT: -1,
+  COLS_COUNT: 6,
+  ROWS_COUNT: 6,
+  ROW_GAP: 0
+};
+var calcGappedElementHeight = function calcGappedElementHeight(elementHeight, rowGap) {
+  return Math.abs(elementHeight) + rowGap;
+};
+var VirtualGrid = function VirtualGrid(_ref) {
+  var children = _ref.children,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$injectedItemProp = _ref.injectedItemPropName,
+    injectedItemPropName = _ref$injectedItemProp === void 0 ? 'item' : _ref$injectedItemProp,
+    _ref$overscan = _ref.overscan,
+    overscan = _ref$overscan === void 0 ? 3 : _ref$overscan,
+    _ref$columnMinWidth = _ref.columnMinWidth,
+    columnMinWidth = _ref$columnMinWidth === void 0 ? 214 : _ref$columnMinWidth,
+    _ref$getItemKey = _ref.getItemKey,
+    getItemKey = _ref$getItemKey === void 0 ? defaultGetItemKey : _ref$getItemKey,
+    _ref$stopChildEventsP = _ref.stopChildEventsPropagation,
+    stopChildEventsPropagation = _ref$stopChildEventsP === void 0 ? true : _ref$stopChildEventsP,
+    apiRef = _ref.apiRef,
+    gap = _ref.gap,
+    role = _ref.role,
+    ariaLabel = _ref.ariaLabel;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollTop = _useState2[0],
+    setScrollTop = _useState2[1];
+  var _useState3 = useState({
+      elementHeight: DEFAULT_LAYOUT_INFO.ELEMENT_HEIGHT,
+      columnsCount: DEFAULT_LAYOUT_INFO.COLS_COUNT,
+      rowsCount: DEFAULT_LAYOUT_INFO.ROWS_COUNT,
+      rowGap: DEFAULT_LAYOUT_INFO.ROW_GAP
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    layoutInfo = _useState4[0],
+    setLayoutInfo = _useState4[1];
+  var isUnMounting = useRef(false);
+  var scrollableElementRef = useRef(null);
+  // Same value of the state, but to be used in static reference functions for avoiding re-rendering and improve perf.
+  var layoutInfoRef = useRef(layoutInfo);
+  var gridContainerRef = useRef(null);
+  var animationFramesIds = useRef({
+    resize: null,
+    scroll: null
+  });
+  var gappedElementHeight = calcGappedElementHeight(layoutInfo.elementHeight, layoutInfo.rowGap);
+  var rowsOffset = Math.max(Math.floor(scrollTop / gappedElementHeight) - overscan, 0);
+  var offsetY = Math.max(0, rowsOffset * gappedElementHeight - MARGIN_BOTTOM_SPACE);
+  var containerHeight = useMemo(function () {
+    // Fit the container's height if the element's height not yet recognized for avoiding jumping effect.
+    if (layoutInfo.elementHeight === DEFAULT_LAYOUT_INFO.ELEMENT_HEIGHT) {
+      return '100%';
+    }
+    var totalRowsCount = Math.ceil(items.length / layoutInfo.columnsCount);
+    return Math.ceil(totalRowsCount * layoutInfo.elementHeight + layoutInfo.rowGap * (totalRowsCount - 1)) + MARGIN_BOTTOM_SPACE;
+  }, [items.length, layoutInfo.columnsCount, layoutInfo.elementHeight, layoutInfo.rowGap]);
+  var calculateLayoutInfo = useCallback(function () {
+    if (isUnMounting.current) {
+      return;
+    }
+    if (animationFramesIds.current.resize) {
+      cancelAnimationFrame(animationFramesIds.current.resize);
+      animationFramesIds.current.resize = null;
+    }
+    animationFramesIds.current.resize = requestAnimationFrame(function () {
+      var gridContainer = gridContainerRef.current;
+      var _getLayoutInfo = getLayoutInfo(gridContainer, scrollableElementRef.current, columnMinWidth),
+        _getLayoutInfo$elemen = _getLayoutInfo.elementWidth,
+        elementWidth = _getLayoutInfo$elemen === void 0 ? 1 : _getLayoutInfo$elemen,
+        _getLayoutInfo$elemen2 = _getLayoutInfo.elementHeight,
+        elementHeight = _getLayoutInfo$elemen2 === void 0 ? DEFAULT_LAYOUT_INFO.ELEMENT_HEIGHT : _getLayoutInfo$elemen2,
+        _getLayoutInfo$column = _getLayoutInfo.columnsCount,
+        columnsCount = _getLayoutInfo$column === void 0 ? DEFAULT_LAYOUT_INFO.COLS_COUNT : _getLayoutInfo$column,
+        _getLayoutInfo$rowsCo = _getLayoutInfo.rowsCount,
+        rowsCount = _getLayoutInfo$rowsCo === void 0 ? DEFAULT_LAYOUT_INFO.ROWS_COUNT : _getLayoutInfo$rowsCo,
+        _getLayoutInfo$rowGap = _getLayoutInfo.rowGap,
+        rowGap = _getLayoutInfo$rowGap === void 0 ? DEFAULT_LAYOUT_INFO.ROW_GAP : _getLayoutInfo$rowGap;
+      animationFramesIds.current.resize = null;
+      if (elementWidth === 0 || elementHeight === 0) {
+        return;
+      }
+      var newLayoutInfo = {
+        elementHeight: elementHeight,
+        columnsCount: columnsCount,
+        rowsCount: rowsCount,
+        rowGap: rowGap
+      };
+      layoutInfoRef.current = newLayoutInfo;
+      setLayoutInfo(newLayoutInfo);
+      handleScroll();
+    });
+  }, [columnMinWidth]);
+  var calculateLayoutInfoOnUiEffect = useCallback(function (element) {
+    isUnMounting.current = !element;
+    calculateLayoutInfo();
+  }, [calculateLayoutInfo]);
+  var scrollToItem = useCallback(function (_ref2) {
+    var key = _ref2.key,
+      index = _ref2.index;
+    var currentLayoutInfo = layoutInfoRef.current;
+    var hasKeyOrIndex = key || index || key === 0 || index === 0;
+    if (currentLayoutInfo && hasKeyOrIndex && items.length > 0) {
+      var itemIndex = index !== null && index !== void 0 ? index : items.findIndex(function (item) {
+        return getItemKey(item) === key;
+      });
+      if (itemIndex > -1) {
+        var _gridContainerRef$cur;
+        var itemRow = Math.floor(itemIndex / currentLayoutInfo.columnsCount);
+        var currentGappedElementHeight = calcGappedElementHeight(currentLayoutInfo.elementHeight, currentLayoutInfo.rowGap);
+        var itemOffset = itemRow * currentGappedElementHeight - currentGappedElementHeight;
+        scrollableElementRef.current.scrollTo({
+          top: (((_gridContainerRef$cur = gridContainerRef.current) === null || _gridContainerRef$cur === void 0 ? void 0 : _gridContainerRef$cur.offsetTop) || 0) + itemOffset,
+          behavior: 'smooth'
+        });
+      }
+    }
+  }, [items]);
+  var handleScroll = useCallback(function (e) {
+    var _target$scrollTop;
+    if (isUnMounting.current) {
+      return;
+    }
+    if (animationFramesIds.current.scroll) {
+      cancelAnimationFrame(animationFramesIds.current.scroll);
+      animationFramesIds.current.scroll = null;
+    }
+    var target = (e === null || e === void 0 ? void 0 : e.currentTarget) || scrollableElementRef.current;
+    var scrollTopValue = target ? (_target$scrollTop = target.scrollTop) !== null && _target$scrollTop !== void 0 ? _target$scrollTop : target.scrollY : 0;
+    var _ref3 = gridContainerRef.current || {},
+      _ref3$offsetTop = _ref3.offsetTop,
+      offsetTop = _ref3$offsetTop === void 0 ? 0 : _ref3$offsetTop,
+      _ref3$offsetHeight = _ref3.offsetHeight,
+      offsetHeight = _ref3$offsetHeight === void 0 ? 0 : _ref3$offsetHeight;
+    var scrollTopRelativeToGridContainer = scrollTopValue - offsetTop;
+    animationFramesIds.current.scroll = requestAnimationFrame(function () {
+      animationFramesIds.current.scroll = null;
+      // TODO: Check maybe we shouldn't trigger change in state unless the row is almost getting to change for avoiding additional rerender?.
+      // But maybe it won't make the component's scroll smooth so it's need a check to make sure of that.
+      setScrollTop(Math.min(Math.max(0, scrollTopRelativeToGridContainer), offsetHeight));
+    });
+  }, []);
+  var handleGridContainerClick = useCallback(function (e) {
+    if (e.target !== e.currentTarget && stopChildEventsPropagation) {
+      e.stopPropagation();
+    }
+  }, []);
+  useEffect(function () {
+    if (apiRef) {
+      apiRef.current = _objectSpread(_objectSpread({}, apiRef.current), {}, {
+        scrollToItem: scrollToItem
+      });
+    }
+  }, [scrollToItem]);
+  useEffect(function () {
+    scrollableElementRef.current = getScrollableParent(gridContainerRef.current);
+    var scrollableElement = scrollableElementRef.current;
+    scrollableElement.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return function () {
+      scrollableElement.removeEventListener('scroll', handleScroll);
+      cancelAnimationFrame(animationFramesIds.current.scroll);
+      cancelAnimationFrame(animationFramesIds.current.resize);
+    };
+  }, [containerHeight]);
+  useEffect(function () {
+    window.addEventListener('resize', calculateLayoutInfo);
+    var gridContainer = gridContainerRef.current;
+    var resizeObserver;
+    if (gridContainer) {
+      resizeObserver = new ResizeObserver(calculateLayoutInfo);
+      resizeObserver.observe(gridContainer);
+    }
+    return function () {
+      window.removeEventListener('resize', calculateLayoutInfo);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [calculateLayoutInfo]);
+  var renderItem = useCallback(function (item, index) {
+    return /*#__PURE__*/_jsx(VirtualGridItem, {
+      itemPropName: injectedItemPropName,
+      item: item,
+      index: index,
+      children: children
+    }, getItemKey(item, index));
+  }, [children, getItemKey, injectedItemPropName]);
+  var startItemIndex = Math.max(0, Math.min(rowsOffset * layoutInfo.columnsCount, items.length - layoutInfo.columnsCount));
+  var visibleItemsCount = useMemo(function () {
+    return layoutInfo.rowsCount * layoutInfo.columnsCount + overscan * layoutInfo.columnsCount * 2;
+  }, [layoutInfo.rowsCount, layoutInfo.columnsCount, overscan]);
+  return (
+    /*#__PURE__*/
+    // Adding calculateLayoutInfo in ref here to make sure we call it directly on loading the UI for allowing scrollToItem effect and others.
+    _jsx(StyledVirtualGrid.RootContainer, {
+      ref: calculateLayoutInfoOnUiEffect,
+      children: /*#__PURE__*/_jsx(StyledVirtualGrid.GridContainer, {
+        ref: gridContainerRef,
+        onClick: handleGridContainerClick,
+        $transform: offsetY,
+        $height: containerHeight,
+        columnMinWidth: columnMinWidth,
+        gap: gap,
+        role: role,
+        "aria-label": ariaLabel,
+        children: items.slice(startItemIndex, startItemIndex + visibleItemsCount).map(renderItem)
+      })
+    })
+  );
+};
+export default /*#__PURE__*/memo(VirtualGrid);