@scaleflex/widget-explorer 0.0.1

package/lib/components/Details/MultiItemsDetails.js

@@ -0,0 +1,69 @@
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { getActualVisibility, getVisibilityI18nLabel } from '@scaleflex/widget-utils/lib/visibility';
+import { selectAllSelectedItems, selectSelectedFiles, selectSelectedFolders } from '../../slices/selections.slice';
+import { generateMultiItemsDetails } from './Details.utils';
+import MultipleItems from './MultipleItems';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DetailsSidebarMultipleItems = function DetailsSidebarMultipleItems(_ref) {
+  var TabPanelWrapper = _ref.TabPanelWrapper;
+  var allSelectedItems = useSelector(selectAllSelectedItems);
+  var selectedFolders = useSelector(selectSelectedFolders);
+  var selectedFiles = useSelector(selectSelectedFiles);
+  var selectedFoldersCount = selectedFolders.length;
+  var selectedFilesCount = selectedFiles.length;
+  var visibility = useMemo(function () {
+    var _allSelectedItems$, _selectedItemsVisibil;
+    var selectedItemsVisibility = (_allSelectedItems$ = allSelectedItems[0]) === null || _allSelectedItems$ === void 0 ? void 0 : _allSelectedItems$.visibility;
+    var firstVisibility = selectedItemsVisibility === null || selectedItemsVisibility === void 0 ? void 0 : (_selectedItemsVisibil = selectedItemsVisibility.in_cdn) === null || _selectedItemsVisibil === void 0 ? void 0 : _selectedItemsVisibil.actual;
+    var isMixed = allSelectedItems.some(function (obj) {
+      return obj.visibility.in_cdn.actual !== firstVisibility;
+    });
+    var actualVisibility = getActualVisibility(selectedItemsVisibility);
+    return isMixed ? 'detailSideBarVisibilityMixedLabel' : getVisibilityI18nLabel(actualVisibility);
+  }, [allSelectedItems]);
+  var selectedFoldersDetails = selectedFolders.reduce(function (acc, _ref2) {
+    var _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? {} : _ref2$size,
+      _ref2$count = _ref2.count,
+      count = _ref2$count === void 0 ? {} : _ref2$count;
+    var totalRecursiveBytes = size.total_recursive_bytes;
+    var filesDirect = count.files_direct,
+      filesRecursive = count.files_recursive;
+    acc.sizeBytes += totalRecursiveBytes;
+    acc.directFilesCount += filesDirect;
+    acc.subFilesCount += filesRecursive - filesDirect;
+    acc.totalFilesCount += filesRecursive;
+    return acc;
+  }, {
+    sizeBytes: 0,
+    directFilesCount: 0,
+    subFilesCount: 0,
+    totalFilesCount: 0
+  });
+  var selectedFilesDetails = selectedFiles.reduce(function (acc, _ref3) {
+    var size = _ref3.size;
+    var bytes = size.bytes;
+    acc.sizeBytes += bytes;
+    return acc;
+  }, {
+    sizeBytes: 0
+  });
+  var totalSizeBytes = selectedFoldersDetails.sizeBytes + selectedFilesDetails.sizeBytes;
+  var totalFilesCount = selectedFoldersDetails.totalFilesCount + selectedFilesCount;
+  var multiItemsDetails = generateMultiItemsDetails({
+    totalSizeBytes: totalSizeBytes,
+    totalFilesCount: totalFilesCount,
+    directFilesCount: selectedFoldersDetails.directFilesCount,
+    subFilesCount: selectedFoldersDetails.subFilesCount,
+    selectedFoldersCount: selectedFoldersCount,
+    selectedFilesCount: selectedFilesCount,
+    visibility: visibility
+  });
+  return /*#__PURE__*/_jsx(TabPanelWrapper, {
+    children: /*#__PURE__*/_jsx(MultipleItems, {
+      details: multiItemsDetails
+    })
+  });
+};
+export default DetailsSidebarMultipleItems;

package/lib/components/Details/MultipleItems.js

@@ -0,0 +1,71 @@
+import { useSelector } from 'react-redux';
+import { Assets, Folders } from '@scaleflex/icons';
+import { TooltipV2 } from '@scaleflex/ui/core';
+import { NoAssets } from '@scaleflex/widget-icons/lib';
+import { selectAllSelectedItemsCount, selectIsFileSelected, selectIsFolderSelected } from '../../slices/selections.slice';
+import { useExplorerI18n, useToLocaleNumber } from '../../hooks';
+import Styled from './DetailsSideBar.styled';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var MultipleItems = function MultipleItems(_ref) {
+  var details = _ref.details;
+  var i18n = useExplorerI18n();
+  var toLocaleNumber = useToLocaleNumber();
+  var selectedItemsCount = useSelector(selectAllSelectedItemsCount);
+  var isFolderSelected = useSelector(selectIsFolderSelected);
+  var isFileSelected = useSelector(selectIsFileSelected);
+  var renderAssetsPlaceholder = function renderAssetsPlaceholder() {
+    if (isFolderSelected && isFileSelected) {
+      return /*#__PURE__*/_jsx(Styled.AssetsIcon, {
+        children: /*#__PURE__*/_jsx(Assets, {
+          size: 120
+        })
+      });
+    }
+    if (isFolderSelected && selectedItemsCount) {
+      return /*#__PURE__*/_jsx(Styled.AssetsIcon, {
+        children: /*#__PURE__*/_jsx(Folders, {
+          size: 120
+        })
+      });
+    }
+    if (!selectedItemsCount) {
+      return /*#__PURE__*/_jsxs(Styled.AssetsPreview, {
+        children: [/*#__PURE__*/_jsx(NoAssets, {}), /*#__PURE__*/_jsx("label", {
+          children: i18n('detailSideBarPreviewAssetLabel')
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsx(Styled.AssetsIcon, {
+      children: /*#__PURE__*/_jsx(Assets, {
+        size: 120
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [renderAssetsPlaceholder(), /*#__PURE__*/_jsx(Styled.SideDetailsScrollableBody, {
+      children: !!selectedItemsCount && /*#__PURE__*/_jsx(Styled.SideDetailsNavWrapper, {
+        children: details.map(function (_ref2) {
+          var i18nKey = _ref2.i18nKey,
+            translatableValue = _ref2.translatableValue,
+            value = _ref2.value;
+          return /*#__PURE__*/_jsxs("li", {
+            children: [/*#__PURE__*/_jsx(Styled.ItemLabelWrapper, {
+              children: /*#__PURE__*/_jsx(TooltipV2, {
+                size: "md",
+                title: i18n(i18nKey),
+                children: /*#__PURE__*/_jsx(Styled.ItemLabel, {
+                  children: i18n(i18nKey)
+                })
+              })
+            }), /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(Styled.MultipleItem, {
+                children: toLocaleNumber(translatableValue ? i18n(value) || value : value)
+              })
+            })]
+          }, i18nKey);
+        })
+      })
+    })]
+  });
+};
+export default MultipleItems;

package/lib/components/Details/TabChips.js

@@ -0,0 +1,46 @@
+import { useSelector } from 'react-redux';
+import { DETAILS_SIDEBAR_TAB, DETAILS_SIDEBAR_TABS } from './Details.constants';
+import { useExplorerI18n } from '../../hooks';
+import Styled from './DetailsSideBar.styled';
+import { selectIsM0LegacyMeta } from '../../slices/metadata.slice';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DetailsSidebarTabChips = function DetailsSidebarTabChips(_ref) {
+  var activeTabId = _ref.activeTabId,
+    setActiveTabId = _ref.setActiveTabId,
+    variantComponents = _ref.variantComponents;
+  var i18n = useExplorerI18n();
+  var isM0LegacyMeta = useSelector(selectIsM0LegacyMeta);
+  var isAtMaxOneTab = Object.values(variantComponents || {}).length < 2;
+  if (isAtMaxOneTab) {
+    return null;
+  }
+  var handleChangeTab = function handleChangeTab(newTabId) {
+    var _DETAILS_SIDEBAR_TAB$, _DETAILS_SIDEBAR_TAB$2;
+    var isTabDisabled = !variantComponents[newTabId] || ((_DETAILS_SIDEBAR_TAB$ = DETAILS_SIDEBAR_TAB[newTabId]) === null || _DETAILS_SIDEBAR_TAB$ === void 0 ? void 0 : (_DETAILS_SIDEBAR_TAB$2 = _DETAILS_SIDEBAR_TAB$.disabled) === null || _DETAILS_SIDEBAR_TAB$2 === void 0 ? void 0 : _DETAILS_SIDEBAR_TAB$2.call(_DETAILS_SIDEBAR_TAB$, {
+      isM0LegacyMeta: isM0LegacyMeta
+    }));
+    if (isTabDisabled) {
+      return;
+    }
+    setActiveTabId(newTabId);
+  };
+  return /*#__PURE__*/_jsx(Styled.Tabs, {
+    onChange: handleChangeTab,
+    value: activeTabId,
+    children: DETAILS_SIDEBAR_TABS.map(function (_ref2) {
+      var i18nKey = _ref2.i18nKey,
+        id = _ref2.id,
+        disabled = _ref2.disabled;
+      return /*#__PURE__*/_jsx(Styled.Tab, {
+        size: "lg",
+        label: i18n(i18nKey),
+        value: id,
+        disabled: !variantComponents[id] || (disabled === null || disabled === void 0 ? void 0 : disabled({
+          isM0LegacyMeta: isM0LegacyMeta
+        })),
+        active: id === activeTabId
+      }, id);
+    })
+  });
+};
+export default DetailsSidebarTabChips;

package/lib/components/Details/TabPanels.js

@@ -0,0 +1,42 @@
+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); }
+var _excluded = ["SharedDataComponent"];
+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 _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; }
+import Styled from './DetailsSideBar.styled';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+var TabPanels = function TabPanels(_ref) {
+  var _ref$variantComponent = _ref.variantComponents,
+    _ref$variantComponent2 = _ref$variantComponent === void 0 ? {} : _ref$variantComponent,
+    SharedDataComponent = _ref$variantComponent2.SharedDataComponent,
+    itemVariantComponents = _objectWithoutProperties(_ref$variantComponent2, _excluded),
+    activeTabId = _ref.activeTabId,
+    setActiveTabId = _ref.setActiveTabId;
+  var renderTabPanel = function renderTabPanel(id) {
+    var sharedData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var ItemVariantComponent = itemVariantComponents[id];
+    return activeTabId === id && /*#__PURE__*/_createElement(ItemVariantComponent, _objectSpread(_objectSpread({}, sharedData), {}, {
+      TabPanelWrapper: Styled.TabPanel,
+      key: id,
+      activeTabId: activeTabId
+    }));
+  };
+  var renderTabPanels = function renderTabPanels(sharedData) {
+    return Object.keys(itemVariantComponents || {}).map(function (id) {
+      return renderTabPanel(id, sharedData);
+    });
+  };
+
+  // If we have shared/common data to be shared between the item's variants/tabs then we wrap the item's tabs function to get the shared data as param.
+  return SharedDataComponent ? /*#__PURE__*/_jsx(SharedDataComponent, {
+    setActiveTabId: setActiveTabId,
+    activeTabId: activeTabId,
+    renderTabPanels: renderTabPanels
+  }) : renderTabPanels();
+};
+export default TabPanels;

package/lib/components/Details/Title.js

@@ -0,0 +1,52 @@
+import { useSelector } from 'react-redux';
+import { TooltipV2 } from '@scaleflex/ui/core';
+import { selectSelectedFiles, selectSelectedFilesUuids, selectSelectedFolders, selectSelectedFoldersUuids } from '../../slices/selections.slice';
+import { prepareHeader } from './Details.utils';
+import { useExplorerI18n, useToLocaleNumber } from '../../hooks';
+import Styled from './DetailsSideBar.styled';
+import { selectIsFoldersView } from '../../slices/views.slice';
+import { selectCurrentFolder } from '../../slices/folders.slice';
+import { jsx as _jsx } from "react/jsx-runtime";
+var selectSelectedItemName = function selectSelectedItemName(state) {
+  var currentFoldersCount = selectSelectedFoldersUuids(state).length;
+  var currentFilesCount = selectSelectedFilesUuids(state).length;
+  if (currentFoldersCount === 1 && currentFilesCount === 0) {
+    var _selectSelectedFolder;
+    return (_selectSelectedFolder = selectSelectedFolders(state)[0]) === null || _selectSelectedFolder === void 0 ? void 0 : _selectSelectedFolder.name;
+  }
+  if (currentFilesCount === 1 && currentFoldersCount === 0) {
+    var _selectSelectedFiles$;
+    return (_selectSelectedFiles$ = selectSelectedFiles(state)[0]) === null || _selectSelectedFiles$ === void 0 ? void 0 : _selectSelectedFiles$.name;
+  }
+  return selectIsFoldersView(state) && currentFoldersCount + currentFilesCount === 0 && selectCurrentFolder(state).name;
+};
+var DetailsSidebarTitle = function DetailsSidebarTitle() {
+  var i18n = useExplorerI18n();
+  var toLocaleNumber = useToLocaleNumber();
+  var selectedFoldersCount = useSelector(function (state) {
+    return selectSelectedFoldersUuids(state).length;
+  });
+  var selectedFilesCount = useSelector(function (state) {
+    return selectSelectedFilesUuids(state).length;
+  });
+  var itemName = useSelector(selectSelectedItemName);
+  var title = prepareHeader({
+    itemName: itemName,
+    selectedFoldersCount: selectedFoldersCount,
+    selectedFilesCount: selectedFilesCount,
+    i18n: i18n,
+    toLocaleNumber: toLocaleNumber
+  });
+  return /*#__PURE__*/_jsx(Styled.SideDetailsTitle, {
+    children: /*#__PURE__*/_jsx(TooltipV2, {
+      position: "left",
+      size: "md",
+      title: title,
+      arrow: true,
+      children: /*#__PURE__*/_jsx("span", {
+        children: title
+      })
+    })
+  });
+};
+export default DetailsSidebarTitle;

package/lib/components/Details/index.js

@@ -0,0 +1,53 @@
+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 } from 'react';
+import { useSelector } from 'react-redux';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import { selectSelectedFiles, selectSelectedFolders } from '../../slices/selections.slice';
+import { DETAILS_SIDEBAR_TAB_IDS } from './Details.constants';
+import { detailsVariantToComponents, getDetailsType } from './Details.utils';
+import Styled from './DetailsSideBar.styled';
+import DetailsSidebarTabs from './TabChips';
+import TabPanels from './TabPanels';
+import DetailsSidebarTitle from './Title';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var defaultTabId = DETAILS_SIDEBAR_TAB_IDS.GENERAL;
+var Details = function Details(_ref) {
+  var showCurrentFolderIfNoneSelected = _ref.showCurrentFolderIfNoneSelected;
+  var selectedFolders = useSelector(selectSelectedFolders);
+  var selectedFiles = useSelector(selectSelectedFiles);
+  var _useState = useState(defaultTabId),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTabId = _useState2[0],
+    setActiveTabId = _useState2[1];
+  var variantType = getDetailsType({
+    showCurrentFolderIfNoneSelected: showCurrentFolderIfNoneSelected,
+    selectedFiles: selectedFiles,
+    selectedFolders: selectedFolders
+  });
+  var variantComponents = detailsVariantToComponents[variantType];
+  useUpdateEffect(function () {
+    if (selectedFolders.length + selectedFiles.length === 0 || !(variantComponents !== null && variantComponents !== void 0 && variantComponents[activeTabId])) {
+      setActiveTabId(defaultTabId);
+    }
+  }, [selectedFolders, selectedFiles]);
+  return /*#__PURE__*/_jsxs(Styled.DetailsWrapper, {
+    className: "filerobot-Explorer-Details",
+    children: [/*#__PURE__*/_jsxs(Styled.DetailsHeader, {
+      children: [/*#__PURE__*/_jsx(DetailsSidebarTitle, {}), /*#__PURE__*/_jsx(DetailsSidebarTabs, {
+        activeTabId: activeTabId,
+        setActiveTabId: setActiveTabId,
+        variantComponents: variantComponents
+      })]
+    }), variantComponents && /*#__PURE__*/_jsx(TabPanels, {
+      activeTabId: activeTabId,
+      variantComponents: variantComponents,
+      setActiveTabId: setActiveTabId
+    })]
+  });
+};
+export default Details;

package/lib/components/DnD/Dnd.styled.js

@@ -0,0 +1,11 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { PC } from '@scaleflex/widget-common';
+import styled from 'styled-components';
+var DragImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  min-width: 200px;\n  background-color: ", ";\n  z-index: 1400;\n  pointer-events: none;\n"])), function (props) {
+  return props.theme.palette[PC.BackgroundPrimaryHover];
+});
+var Styled = {
+  DragImage: DragImage
+};
+export default Styled;

package/lib/components/DnD/DragImage.js

@@ -0,0 +1,61 @@
+import { useSelector } from 'react-redux';
+import { Badge } from '@scaleflex/ui/core';
+import { Assets, Folders } from '@scaleflex/icons';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { PC } from '@scaleflex/widget-common';
+import Styled from './Dnd.styled';
+import useExplorerI18n from '../../hooks/useExplorerI18n';
+import { selectSelectedFilesUuids, selectSelectedFoldersUuids } from '../../slices/selections.slice';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DragImage = function DragImage() {
+  var i18n = useExplorerI18n();
+  var theme = useTheme();
+  var iconPrimaryColor = theme.palette[PC.IconsPrimary];
+  var selectedFoldersCount = useSelector(function (state) {
+    return selectSelectedFoldersUuids(state).length;
+  });
+  var selectedFilesCount = useSelector(function (state) {
+    return selectSelectedFilesUuids(state).length;
+  });
+  var getIcon = function getIcon() {
+    if (selectedFoldersCount === 0) {
+      return /*#__PURE__*/_jsx(Assets, {
+        color: iconPrimaryColor
+      });
+    }
+    return /*#__PURE__*/_jsx(Folders, {
+      color: iconPrimaryColor
+    });
+  };
+  var getText = function getText() {
+    if (selectedFilesCount === 0) {
+      return i18n('mutualizeFoldersLabel');
+    } else if (selectedFoldersCount === 0) {
+      return i18n('mutualizedFilesLabel');
+    } else {
+      return i18n('mutualizedFoldersFilesLabel');
+    }
+  };
+  return /*#__PURE__*/_jsx(Styled.DragImage, {
+    id: "filerobot-drag-img",
+    className: "filerobot-ProviderBrowserItem item-folder",
+    children: /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      className: "filerobot-u-reset filerobot-ProviderBrowserItem-inner-folder",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "filerobot-ProviderBrowserItem-folderLiIcon",
+        children: getIcon()
+      }), /*#__PURE__*/_jsx("div", {
+        className: "filerobot-ProviderBrowserItem-inner-folder-title",
+        children: getText()
+      }), /*#__PURE__*/_jsx(Badge, {
+        badgeContent: selectedFoldersCount + selectedFilesCount,
+        color: "secondary",
+        fontSize: 12,
+        inline: true,
+        size: 20
+      })]
+    })
+  });
+};
+export default DragImage;

package/lib/components/DnD/index.js

@@ -0,0 +1,218 @@
+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); }
+import { cloneElement } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import getDroppedFiles from '@scaleflex/widget-utils/lib/getDroppedFiles';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import isFolder from '@scaleflex/widget-utils/lib/isFolder';
+import { useExplorer } from '../../hooks';
+import { moveItemsFromDragging } from '../../thunks/items.thunks';
+import { dragInternal, dragItemsUpdate, dragMultipleItems, dragOuter, dragToggle, selectDraggableItems, selectInternalDrag, selectIsDraggingMultipleItems, selectOuterDrag } from '../../slices/drag.slice';
+import { getAllSelectedItems } from '../../slices/selections.slice';
+var DnD = function DnD(_ref) {
+  var children = _ref.children,
+    _ref$disableDrop = _ref.disableDrop,
+    disableDrop = _ref$disableDrop === void 0 ? false : _ref$disableDrop,
+    _ref$disableDrag = _ref.disableDrag,
+    disableDrag = _ref$disableDrag === void 0 ? false : _ref$disableDrag,
+    draggedItem = _ref.item,
+    _ref$draggable = _ref.draggable,
+    draggable = _ref$draggable === void 0 ? true : _ref$draggable,
+    _ref$applyBgOnCurrent = _ref.applyBgOnCurrentTargetOnly,
+    applyBgOnCurrentTargetOnly = _ref$applyBgOnCurrent === void 0 ? false : _ref$applyBgOnCurrent;
+  var dispatch = useDispatch();
+  var draggableItems = useSelector(selectDraggableItems);
+  var outerDrag = useSelector(selectOuterDrag);
+  var internalDrag = useSelector(selectInternalDrag);
+  var isDraggingMultipleItems = useSelector(selectIsDraggingMultipleItems);
+  var _useExplorer = useExplorer(),
+    log = _useExplorer.log,
+    info = _useExplorer.info,
+    i18n = _useExplorer.i18n,
+    addFiles = _useExplorer.addFiles,
+    opts = _useExplorer.opts;
+  var disableDnDActions = opts.disableDnDActions;
+  var handleDraggedItem = function handleDraggedItem(id, type) {
+    var draggedElement = document.querySelector("[data-filerobot-focusable-uuid=\"".concat(id, "\"]"));
+    if (draggedElement) {
+      if (type === 'start') {
+        draggedElement.setAttribute('is_dragged', true);
+      } else {
+        draggedElement.removeAttribute('is_dragged');
+        draggedElement.style.opacity = '';
+      }
+    }
+  };
+  var dropToUpload = function dropToUpload(event, selectedFolder) {
+    onDragEnd();
+
+    // 3. Add all dropped files
+    var executedDropErrorOnce = false;
+    var logDropError = function logDropError(error) {
+      log(error, 'error');
+
+      // In practice all drop errors are most likely the same, so let's just show one to avoid overwhelming the user
+      if (!executedDropErrorOnce) {
+        info(error.message, 'error', 5000);
+        executedDropErrorOnce = true;
+      }
+    };
+    getDroppedFiles(event.dataTransfer, {
+      logDropError: logDropError
+    }).then(function (files) {
+      if (files.length > 0) {
+        log('[Explorer] Files were dropped');
+        addFiles(files, selectedFolder);
+      }
+    });
+  };
+  var getDraggedIds = function getDraggedIds(item) {
+    return item.map(function (item) {
+      return item === null || item === void 0 ? void 0 : item.uuid;
+    });
+  };
+  var isDropZone = function isDropZone(event) {
+    return event.target !== document.querySelector('[is_dragged]');
+  };
+  var onDragEnd = function onDragEnd() {
+    dispatch(dragToggle(false));
+    dispatch(dragMultipleItems(false));
+    dispatch(dragItemsUpdate([]));
+    dispatch(dragInternal(false));
+    dispatch(dragOuter(false));
+  };
+  var getItemIdAndUpdate = function getItemIdAndUpdate(arr, type) {
+    return arr.forEach(function (id) {
+      return handleDraggedItem(id, type);
+    });
+  };
+  var handleDragStart = function handleDragStart(event) {
+    var selectedItems = dispatch(getAllSelectedItems());
+    var uuids = getDraggedIds(selectedItems);
+    var items = selectedItems;
+    dispatch(dragInternal(true));
+    if (selectedItems.length > 1) {
+      getItemIdAndUpdate(uuids, 'start');
+      var img = new Image();
+      event.dataTransfer.setDragImage(img, 0, 0);
+      dispatch(dragMultipleItems(true));
+    } else {
+      items = [draggedItem];
+      getItemIdAndUpdate(getDraggedIds(items), 'start');
+    }
+    dispatch(dragItemsUpdate(items));
+    dispatch(dragToggle(true));
+  };
+  var getColorableTarget = function getColorableTarget(event) {
+    return applyBgOnCurrentTargetOnly ? event.currentTarget : event.target;
+  };
+  var handleDragEnd = function handleDragEnd(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    getColorableTarget(event).style.backgroundColor = '';
+    getItemIdAndUpdate(getDraggedIds(draggableItems), 'end');
+    onDragEnd();
+  };
+  var handleDragLeave = function handleDragLeave(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!applyBgOnCurrentTargetOnly) {
+      getColorableTarget(event).style.backgroundColor = '';
+    }
+  };
+  var handleDragOver = function handleDragOver(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (internalDrag) return;
+    event.dataTransfer.dropEffect = 'copy';
+    if (!outerDrag) {
+      dispatch(dragOuter(true));
+      dispatch(dragToggle(true));
+    }
+  };
+  var handleDragEnter = function handleDragEnter(event) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    // TODO(Amr): find a way to show hover color only for the hovered target and not it is children
+    // We can check if the target has draggable attribute, i tested with folderTree and it works good
+    // The issue with gridView as the drag and drop target are big in the size and we can't find the element that has the draggable attribute
+    // as an idea we can have custom small drag image instead of the default one
+    if (isDropZone(event)) {
+      getColorableTarget(event).style.backgroundColor = '#EFF3F6';
+    }
+  };
+  var handleDrag = function handleDrag(event) {
+    var dragImg = document.getElementById('filerobot-drag-img');
+    var body = document.querySelector('.filerobot-ProviderBrowser-body');
+    var top = event.clientX - body.getBoundingClientRect().left - 45;
+    var left = event.clientY - body.getBoundingClientRect().top - 45;
+    dragImg.style.left = top + 'px';
+    dragImg.style.top = left + 'px';
+  };
+  var handleDrop = function handleDrop(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    getColorableTarget(event).style.backgroundColor = '';
+    var selectedFolder = draggedItem;
+    if (outerDrag) {
+      dropToUpload(event, selectedFolder);
+      return;
+    }
+    var toFolderPath = selectedFolder.path;
+    var isMovingToSameFolder = draggableItems.some(function (_ref2) {
+      var _ref2$folder = _ref2.folder,
+        folder = _ref2$folder === void 0 ? {} : _ref2$folder,
+        _ref2$path = _ref2.path,
+        path = _ref2$path === void 0 ? '' : _ref2$path;
+      return folder.name === toFolderPath || path.substring(0, path.lastIndexOf('/')) === toFolderPath;
+    });
+    var movedFolderToItsChild = !isMovingToSameFolder && draggableItems.find(function (item) {
+      return isFolder(item) && item.path && toFolderPath.includes("".concat(item.path, "/"));
+    });
+    if (isMovingToSameFolder) {
+      info(i18n('explorerMovedAlreadyExistsInfo', {
+        smart_count: draggableItems.length
+      }), 'warning');
+    } else if (movedFolderToItsChild) {
+      info(i18n('explorerMoveFolderToChildError', {
+        movable_path: movedFolderToItsChild.path,
+        to_path: toFolderPath
+      }), 'warning');
+    } else {
+      handlePromise(dispatch(moveItemsFromDragging({
+        items: draggableItems,
+        toFolder: selectedFolder
+      })), function () {
+        info(i18n('explorerMovedSuccessfullyInfo'), 'success');
+      }, function (errorCode) {
+        if (errorCode === 'SAME_PATH') {
+          info(i18n('explorerMovedAlreadyExistsInfo', {
+            smart_count: draggableItems.length
+          }));
+        }
+      });
+    }
+    getItemIdAndUpdate(getDraggedIds(draggableItems), 'end');
+    onDragEnd();
+  };
+  var onDrag = isDraggingMultipleItems ? handleDrag : null;
+  var dragEvents = {
+    draggable: draggable,
+    onDrag: onDrag,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd
+  };
+  var dropEvents = {
+    onDrop: handleDrop,
+    onDragEnter: handleDragEnter,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave
+  };
+  return /*#__PURE__*/cloneElement(children, _objectSpread({}, draggable ? _objectSpread(_objectSpread({}, disableDrag || disableDnDActions ? {} : dragEvents), disableDrop || disableDnDActions ? {} : dropEvents) : {}));
+};
+export default DnD;