@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/slices/panels.slice.js

@@ -0,0 +1,351 @@
+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 _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); }
+import { createSlice } from '@reduxjs/toolkit';
+import { uploadsAdded, allUploadsCancelled, selectUploadsCount } from '@scaleflex/widget-core/lib/slices/uploads.slice';
+import { IMAGE_EDITOR_MODES, PLUGINS_IDS, FILE_WINDOW_TAB_IDS } from '@scaleflex/widget-utils/lib/constants';
+import createThunk from '@scaleflex/widget-utils/lib/createThunk';
+import { selectTargetByIdAndType } from './targets.slice';
+import { viewChanged } from './views.slice';
+import { renameFolder } from './folders.slice';
+import { searchSuggestionsUpdated } from './search.slice';
+import { selectIsItemSelected } from './selections.slice';
+var slicePropName = 'panels';
+var sliceName = "".concat(PLUGINS_IDS.EXPLORER, "/").concat(slicePropName);
+export var ACTION_BAR_DEFAULT_Z_INDEX = 1113;
+export var ACTION_BAR_INSIDE_MODALS_Z_INDEX = 1201;
+var initialState = {
+  actionBarZIndex: ACTION_BAR_DEFAULT_Z_INDEX,
+  pickerPanel: null,
+  activeOverlayType: null,
+  showAddFilesPanel: false,
+  showUploadsPanel: false,
+  facetedSearchSidebarExpanded: false,
+  minimizedUploadPanel: false,
+  showDetailsView: false,
+  fileWindow: {
+    "for": null,
+    enableEdit: false,
+    enableRename: false,
+    tabId: null
+  },
+  imageEditor: {
+    file: null,
+    // not the uuid/id of the file, cause we might provide other files like variants...etc.
+    mode: IMAGE_EDITOR_MODES.DEFAULT,
+    showBackButton: 'auto',
+    hideSavingOptions: false
+  },
+  mainMenu: {
+    opened: false,
+    collapsed: false
+  },
+  pdfFilePreviewFor: null,
+  renameItem: {
+    "for": null,
+    fromSidebar: false
+  },
+  bulkEditPanelFor: null,
+  cropPanelFile: null // file not uuid, as we might provide variant or some other file.
+};
+export var setNewPickerPanel = createThunk(function (_ref, thunkApi) {
+  var pickerPanelId = _ref.pickerPanelId,
+    pickerPanelType = _ref.pickerPanelType;
+  return thunkApi.dispatch(pickerPanelUpdated({
+    pickerPanel: selectTargetByIdAndType(thunkApi.getState(), pickerPanelId, pickerPanelType)
+  }));
+});
+
+// As we might need to open a panel over another one (panel opened from a panel and then we should get back again to the first panel).
+var keepCurrOrCloseOtherPanels = function keepCurrOrCloseOtherPanels(state, closeOthers) {
+  return closeOthers ? initialState : state;
+};
+var getPanelForOrNull = function getPanelForOrNull(payload) {
+  var _ref2 = payload || {},
+    _ref2$for = _ref2["for"],
+    openPanelFor = _ref2$for === void 0 ? null : _ref2$for;
+  return !openPanelFor && _typeof(payload) !== 'object' ? payload || null : openPanelFor;
+};
+var panelsSlice = createSlice({
+  name: sliceName,
+  initialState: initialState,
+  reducers: {
+    pickerPanelUpdated: function pickerPanelUpdated(state, action) {
+      var _action$payload$picke, _action$payload;
+      var value = (_action$payload$picke = action.payload.pickerPanel) !== null && _action$payload$picke !== void 0 ? _action$payload$picke : action.payload;
+      return _objectSpread(_objectSpread({}, keepCurrOrCloseOtherPanels(state, (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : _action$payload.closeOthers)), {}, {
+        pickerPanel: value,
+        activeOverlayType: value ? 'PickerPanel' : null
+      });
+    },
+    showAddFilesPanelUpdated: function showAddFilesPanelUpdated(state, action) {
+      var _action$payload$show, _action$payload2;
+      var value = (_action$payload$show = action.payload.show) !== null && _action$payload$show !== void 0 ? _action$payload$show : action.payload;
+      return _objectSpread(_objectSpread({}, keepCurrOrCloseOtherPanels(state, (_action$payload2 = action.payload) === null || _action$payload2 === void 0 ? void 0 : _action$payload2.closeOthers)), {}, {
+        showAddFilesPanel: value,
+        activeOverlayType: value ? 'AddFiles' : null
+      });
+    },
+    minimizedUploadPanelUpdated: function minimizedUploadPanelUpdated(state, action) {
+      var _action$payload$minim;
+      var value = (_action$payload$minim = action.payload.minimized) !== null && _action$payload$minim !== void 0 ? _action$payload$minim : action.payload;
+      return _objectSpread(_objectSpread({}, state), {}, {
+        minimizedUploadPanel: value
+      });
+    },
+    fileWindowUpdated: function fileWindowUpdated(state, action) {
+      var _ref4, _ref5, _action$payload3, _ref6;
+      // It's possible to enable edit/rename only without providing the file uuid again, so we need to check about that
+      // If enable edit/rename or close others is provided means we need to keep the file window opened so we keep the file uuid there
+      // Otherwise (no file uuid, not enable edit/rename or closeOthers) then we close the file window
+      var _ref3 = action.payload || {},
+        enableEdit = _ref3.enableEdit,
+        enableRename = _ref3.enableRename,
+        closeOthers = _ref3.closeOthers,
+        tabId = _ref3.tabId;
+      var isOtherValueChanged = typeof ((_ref4 = (_ref5 = enableEdit !== null && enableEdit !== void 0 ? enableEdit : enableRename) !== null && _ref5 !== void 0 ? _ref5 : closeOthers) !== null && _ref4 !== void 0 ? _ref4 : tabId) !== 'undefined';
+      var forValue = getPanelForOrNull(action.payload);
+      return _objectSpread(_objectSpread({}, keepCurrOrCloseOtherPanels(state, closeOthers)), {}, {
+        activeOverlayType: forValue || isOtherValueChanged ? 'FileWindow' : null,
+        fileWindow: {
+          "for": forValue !== null && forValue !== void 0 ? forValue : isOtherValueChanged ? state.fileWindow["for"] : null,
+          enableEdit: action.payload === null || ((_action$payload3 = action.payload) === null || _action$payload3 === void 0 ? void 0 : _action$payload3["for"]) === null ? false : (_ref6 = enableEdit !== null && enableEdit !== void 0 ? enableEdit : enableRename) !== null && _ref6 !== void 0 ? _ref6 : state.fileWindow.enableEdit,
+          enableRename: enableRename || false,
+          tabId: tabId !== null && tabId !== void 0 ? tabId : null
+        }
+      });
+    },
+    itemRenameOpened: function itemRenameOpened(state, action) {
+      var _action$payload$for, _action$payload4, _action$payload5, _action$payload$fromS, _action$payload6;
+      var itemId = (_action$payload$for = (_action$payload4 = action.payload) === null || _action$payload4 === void 0 ? void 0 : _action$payload4["for"]) !== null && _action$payload$for !== void 0 ? _action$payload$for : action.payload;
+      // If rename is triggered for the same file opened in the file window, means it's called from the window's context menu
+      // then enable edit and focus rename field, instead of enabling rename in the file item.
+      if (itemId && state.fileWindow["for"] === itemId) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          fileWindow: _objectSpread(_objectSpread({}, state.fileWindow), {}, {
+            enableRename: true,
+            enableEdit: true,
+            tabId: FILE_WINDOW_TAB_IDS.GENERAL
+          })
+        });
+      }
+      return _objectSpread(_objectSpread({}, keepCurrOrCloseOtherPanels(state, (_action$payload5 = action.payload) === null || _action$payload5 === void 0 ? void 0 : _action$payload5.closeOthers)), {}, {
+        renameItem: {
+          "for": itemId,
+          fromSidebar: (_action$payload$fromS = (_action$payload6 = action.payload) === null || _action$payload6 === void 0 ? void 0 : _action$payload6.fromSidebar) !== null && _action$payload$fromS !== void 0 ? _action$payload$fromS : false
+        }
+      });
+    },
+    imageEditorOpened: function imageEditorOpened(state, action) {
+      var _action$payload7, _payload$showBackButt, _payload$hideSavingOp;
+      var payload = action.payload || {};
+      var value = (_action$payload7 = action.payload) === null || _action$payload7 === void 0 ? void 0 : _action$payload7.file;
+      return _objectSpread(_objectSpread({}, keepCurrOrCloseOtherPanels(state, payload.closeOthers)), {}, {
+        activeOverlayType: value ? 'ImageEditor' : null,
+        imageEditor: _objectSpread(_objectSpread({}, state.imageEditor), {}, {
+          file: value,
+          mode: payload.mode || IMAGE_EDITOR_MODES.DEFAULT,
+          showBackButton: (_payload$showBackButt = payload.showBackButton) !== null && _payload$showBackButt !== void 0 ? _payload$showBackButt : 'auto',
+          hideSavingOptions: (_payload$hideSavingOp = payload.hideSavingOptions) !== null && _payload$hideSavingOp !== void 0 ? _payload$hideSavingOp : false
+        })
+      });
+    },
+    mainMenuUpdated: function mainMenuUpdated(state, action) {
+      var _action$payload$opene, _action$payload$colla;
+      return _objectSpread(_objectSpread({}, state), {}, {
+        mainMenu: {
+          opened: (_action$payload$opene = action.payload.opened) !== null && _action$payload$opene !== void 0 ? _action$payload$opene : state.mainMenu.opened,
+          collapsed: (_action$payload$colla = action.payload.collapsed) !== null && _action$payload$colla !== void 0 ? _action$payload$colla : state.mainMenu.collapsed
+        }
+      });
+    },
+    bulkEditPanelOpened: function bulkEditPanelOpened(state, action) {
+      var _action$payload8;
+      var value = getPanelForOrNull(action.payload);
+      return _objectSpread(_objectSpread({}, keepCurrOrCloseOtherPanels(state, (_action$payload8 = action.payload) === null || _action$payload8 === void 0 ? void 0 : _action$payload8.closeOthers)), {}, {
+        bulkEditPanelFor: value,
+        activeOverlayType: value ? 'BulkEditPanel' : null
+      });
+    },
+    cropPanelFileSet: function cropPanelFileSet(state, action) {
+      var _action$payload9;
+      var value = action.payload;
+      return _objectSpread(_objectSpread({}, keepCurrOrCloseOtherPanels(state, (_action$payload9 = action.payload) === null || _action$payload9 === void 0 ? void 0 : _action$payload9.closeOthers)), {}, {
+        cropPanelFile: action.payload,
+        activeOverlayType: value ? 'CropPanel' : null
+      });
+    },
+    uploadsPanelOpened: function uploadsPanelOpened(state, action) {
+      var _action$payload$show2, _action$payload10, _action$payload11;
+      var show = (_action$payload$show2 = (_action$payload10 = action.payload) === null || _action$payload10 === void 0 ? void 0 : _action$payload10.show) !== null && _action$payload$show2 !== void 0 ? _action$payload$show2 : action.payload;
+      if (show === state.showUploadsPanel) {
+        return state;
+      }
+      return _objectSpread(_objectSpread({}, keepCurrOrCloseOtherPanels(state, (_action$payload11 = action.payload) === null || _action$payload11 === void 0 ? void 0 : _action$payload11.closeOthers)), {}, {
+        showUploadsPanel: show,
+        activeOverlayType: show ? 'UploadsPanel' : null
+      });
+    },
+    pdfFilePreviewOpened: function pdfFilePreviewOpened(state, action) {
+      var _action$payload12;
+      var value = getPanelForOrNull(action.payload);
+      return _objectSpread(_objectSpread({}, keepCurrOrCloseOtherPanels(state, (_action$payload12 = action.payload) === null || _action$payload12 === void 0 ? void 0 : _action$payload12.closeOthers)), {}, {
+        pdfFilePreviewFor: value,
+        activeOverlayType: value ? 'PdfFilePreview' : null
+      });
+    },
+    detailsViewToggled: function detailsViewToggled(state, action) {
+      var _action$payload13;
+      return _objectSpread(_objectSpread({}, state), {}, {
+        showDetailsView: (_action$payload13 = action.payload) !== null && _action$payload13 !== void 0 ? _action$payload13 : !state.showDetailsView
+      });
+    },
+    facetedSearchSidebarToggled: function facetedSearchSidebarToggled(state, action) {
+      var _action$payload14;
+      return _objectSpread(_objectSpread({}, state), {}, {
+        facetedSearchSidebarExpanded: (_action$payload14 = action.payload) !== null && _action$payload14 !== void 0 ? _action$payload14 : !state.facetedSearchSidebarExpanded
+      });
+    },
+    allPanelsClosed: function allPanelsClosed(state) {
+      // As long as initialState is already set to the default values (no panels opened), then we can just return it.
+      // If for any reason we changed the initialState to some auto opened panel, then we should override it to consider closing it.
+      return initialState;
+    },
+    setActionBarZIndex: function setActionBarZIndex(state, action) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        actionBarZIndex: action.payload || ACTION_BAR_DEFAULT_Z_INDEX
+      });
+    }
+  },
+  extraReducers: function extraReducers(builder) {
+    builder.addCase(uploadsAdded.type, function (state, action) {
+      var _action$payload15;
+      var _ref7 = action.payload || {},
+        files = _ref7.files,
+        skipOpenUploadsPanel = _ref7.skipOpenUploadsPanel;
+      if (!(files !== null && files !== void 0 && files.length) || (_action$payload15 = action.payload) !== null && _action$payload15 !== void 0 && _action$payload15.length || skipOpenUploadsPanel) {
+        return state;
+      }
+      return _objectSpread(_objectSpread({}, panelsSlice.caseReducers.uploadsPanelOpened(state, _objectSpread(_objectSpread({}, action), {}, {
+        payload: {
+          show: true,
+          closeOthers: true
+        }
+      }))), {}, {
+        showAddFilesPanel: false,
+        pickerPanel: null
+      });
+    }).addCase(allUploadsCancelled.type, function (state, action) {
+      return _objectSpread(_objectSpread({}, panelsSlice.caseReducers.uploadsPanelOpened(state, _objectSpread(_objectSpread({}, action), {}, {
+        payload: false
+      }))), {}, {
+        fileWindow: initialState.fileWindow
+      });
+    }).addCase(viewChanged.type, function () {
+      return initialState;
+    }).addCase(renameFolder.fulfilled, function (state) {
+      return panelsSlice.caseReducers.itemRenameOpened(state, {
+        payload: null
+      });
+    }).addCase(searchSuggestionsUpdated.type, function (state, action) {
+      var _ref8, _action$payload$sugge, _action$payload$sugge2;
+      if (((_ref8 = ((_action$payload$sugge = action.payload.suggestions) === null || _action$payload$sugge === void 0 ? void 0 : _action$payload$sugge.tags) || ((_action$payload$sugge2 = action.payload.suggestions) === null || _action$payload$sugge2 === void 0 ? void 0 : _action$payload$sugge2.filters)) === null || _ref8 === void 0 ? void 0 : _ref8.length) > 0) {
+        return panelsSlice.caseReducers.fileWindowUpdated(state, {
+          payload: null
+        });
+      }
+    });
+  }
+});
+var _panelsSlice$actions = panelsSlice.actions,
+  pickerPanelUpdated = _panelsSlice$actions.pickerPanelUpdated,
+  activeOverlayTypeUpdated = _panelsSlice$actions.activeOverlayTypeUpdated,
+  fileWindowUpdated = _panelsSlice$actions.fileWindowUpdated,
+  showFileEditorUpdated = _panelsSlice$actions.showFileEditorUpdated,
+  showAddFilesPanelUpdated = _panelsSlice$actions.showAddFilesPanelUpdated,
+  bulkEditPanelOpened = _panelsSlice$actions.bulkEditPanelOpened,
+  cropPanelFileSet = _panelsSlice$actions.cropPanelFileSet,
+  allPanelsClosed = _panelsSlice$actions.allPanelsClosed,
+  itemRenameOpened = _panelsSlice$actions.itemRenameOpened,
+  imageEditorOpened = _panelsSlice$actions.imageEditorOpened,
+  uploadsPanelOpened = _panelsSlice$actions.uploadsPanelOpened,
+  pdfFilePreviewOpened = _panelsSlice$actions.pdfFilePreviewOpened,
+  mainMenuUpdated = _panelsSlice$actions.mainMenuUpdated,
+  detailsViewToggled = _panelsSlice$actions.detailsViewToggled,
+  setActionBarZIndex = _panelsSlice$actions.setActionBarZIndex,
+  minimizedUploadPanelUpdated = _panelsSlice$actions.minimizedUploadPanelUpdated,
+  facetedSearchSidebarToggled = _panelsSlice$actions.facetedSearchSidebarToggled;
+export { pickerPanelUpdated, activeOverlayTypeUpdated, fileWindowUpdated, showFileEditorUpdated, showAddFilesPanelUpdated, bulkEditPanelOpened, cropPanelFileSet, allPanelsClosed, itemRenameOpened, imageEditorOpened, uploadsPanelOpened, pdfFilePreviewOpened, mainMenuUpdated, detailsViewToggled, setActionBarZIndex, minimizedUploadPanelUpdated, facetedSearchSidebarToggled };
+export var selectAllPanels = function selectAllPanels(state) {
+  var _state$PLUGINS_IDS$EX;
+  return ((_state$PLUGINS_IDS$EX = state[PLUGINS_IDS.EXPLORER]) === null || _state$PLUGINS_IDS$EX === void 0 ? void 0 : _state$PLUGINS_IDS$EX[slicePropName]) || initialState;
+};
+export var selectActivePickerPanel = function selectActivePickerPanel(state) {
+  return selectAllPanels(state).pickerPanel;
+};
+export var selectActiveOverlayType = function selectActiveOverlayType(state) {
+  return selectAllPanels(state).activeOverlayType;
+};
+export var selectFileWindow = function selectFileWindow(state) {
+  return selectAllPanels(state).fileWindow;
+};
+export var selectFileWindowFor = function selectFileWindowFor(state) {
+  return selectFileWindow(state)["for"];
+};
+export var selectFileWindowTabId = function selectFileWindowTabId(state) {
+  return selectFileWindow(state).tabId;
+};
+export var selectImageEditor = function selectImageEditor(state) {
+  return selectAllPanels(state).imageEditor;
+};
+export var selectImageEditorFile = function selectImageEditorFile(state) {
+  return selectImageEditor(state).file;
+};
+export var selectShowBulkEditPanelFor = function selectShowBulkEditPanelFor(state) {
+  return selectAllPanels(state).bulkEditPanelFor;
+};
+export var selectCropPanelFile = function selectCropPanelFile(state) {
+  return selectAllPanels(state).cropPanelFile;
+};
+export var selectRenameItemFor = function selectRenameItemFor(state) {
+  return selectAllPanels(state).renameItem["for"];
+};
+export var selectIsRenameItemFromSidebar = function selectIsRenameItemFromSidebar(state) {
+  return selectAllPanels(state).renameItem.fromSidebar;
+};
+export var selectShowAddFilesPanel = function selectShowAddFilesPanel(state) {
+  return selectAllPanels(state).showAddFilesPanel;
+};
+export var selectIsUploadsPanelOpened = function selectIsUploadsPanelOpened(state) {
+  return selectUploadsCount(state) > 0 && selectAllPanels(state).showUploadsPanel;
+};
+export var selectFacetedSearchSidebarExpanded = function selectFacetedSearchSidebarExpanded(state) {
+  return selectAllPanels(state).facetedSearchSidebarExpanded;
+};
+export var selectShowPdfFilePreviewFor = function selectShowPdfFilePreviewFor(state) {
+  return selectAllPanels(state).pdfFilePreviewFor;
+};
+
+// Kept In-case we need to change its implementation in the future.
+export var selectIsActionBarHidden = function selectIsActionBarHidden(state) {
+  return !selectIsItemSelected(state);
+};
+export var selectIsMainMenuOpened = function selectIsMainMenuOpened(state) {
+  return selectAllPanels(state).mainMenu.opened;
+};
+export var selectIsMainMenuCollapsed = function selectIsMainMenuCollapsed(state) {
+  return selectAllPanels(state).mainMenu.collapsed;
+};
+export var selectIsDetailsViewOpened = function selectIsDetailsViewOpened(state) {
+  return selectAllPanels(state).showDetailsView;
+};
+export var selectActionBarZIndex = function selectActionBarZIndex(state) {
+  return selectAllPanels(state).actionBarZIndex;
+};
+export var selectIsMinimizedUploadPanel = function selectIsMinimizedUploadPanel(state) {
+  return selectAllPanels(state).minimizedUploadPanel;
+};
+export default panelsSlice.reducer;