@scaleflex/widget-explorer 0.0.1

package/lib/components/FoldersView/FoldersTree/FoldersTree.styled.js

@@ -0,0 +1,193 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { FV, PC, PSH } from '@scaleflex/widget-common';
+import styled, { css } from 'styled-components';
+import { Search as SfxSearch } from '@scaleflex/ui/core';
+import { Arrow, CollapseFolders, Loading, Slash } from '@scaleflex/icons';
+var NoFolder = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  margin: ", ";\n  color: ", ";\n\n  svg {\n    width: 150px;\n    height: 60px;\n  }\n"])), function (_ref) {
+  var margin = _ref.margin;
+  return margin || '80px 20px 20px 0';
+}, function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.IconsPlaceholder];
+});
+var FoldersList = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  outline: 0;\n  flex-direction: column;\n  background-color: #FFFFFF;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  text-align: left;\n"])));
+var disabledFolderItemCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &[aria-disabled=\"true\"] {\n    opacity: 0.4;\n    cursor: not-allowed !important;\n    * {\n      cursor: not-allowed !important;\n    }\n  }\n"])));
+var FoldersListItem = styled.li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  list-style: none;\n  ", ";\n"])), disabledFolderItemCss);
+var NoFolderLabel = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 16px 0 0;\n  padding: 0;\n  color: ", ";\n  ", ";\n"])), function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return palette[PC.TextPlaceholder];
+}, function (_ref4) {
+  var typography = _ref4.theme.typography;
+  return typography.font[FV.LabelLarge];
+});
+var NoResultLabel = styled.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin: 16px 0 4px 0;\n  padding: 0;\n  color: ", ";\n  ", ";\n"])), function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return palette[PC.TextSecondary];
+}, function (_ref6) {
+  var typography = _ref6.theme.typography;
+  return typography.font[FV.LabelLargeEmphasis];
+});
+var NoResultSubLabel = styled.p(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  color: ", ";\n  ", ";\n"])), function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return palette[PC.TextSecondary];
+}, function (_ref8) {
+  var typography = _ref8.theme.typography;
+  return typography.font[FV.TextLarge];
+});
+var SubFoldersWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding-left: 12px;\n"])));
+var RootIcon = styled(Slash)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref9) {
+  var palette = _ref9.theme.palette;
+  return palette[PC.IconsSecondary];
+});
+var FoldersTreeSkeletonTitle = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 12px;\n  margin-left: 12px;\n"])));
+var FoldersTreeSkeletonSubTitle = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: 12px;\n  margin-left: 20px;\n"])));
+var FoldersTreeSkeletonInnerSubTitle = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: 12px;\n  margin-left: 28px;\n"])));
+var Item = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  column-gap: 6px;\n  padding: 0 12px;\n  cursor: pointer;\n  transition: all 100ms ease-out;\n  border-radius: 4px;\n  margin-right: 16px;\n  color: ", ";\n\n  ", "\n\n  &:hover, &:focus {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_ref10) {
+  var palette = _ref10.theme.palette;
+  return palette[PC.TextPrimary];
+}, function (_ref11) {
+  var isExpanded = _ref11.isExpanded,
+    isSelected = _ref11.isSelected,
+    theme = _ref11.theme;
+  return isExpanded && "\n    position: sticky;\n    top: 0;\n    z-index: 1;\n\n    &::before {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      top: 0;\n      left: -100%;\n      right: 100%;\n      background-color: ".concat(theme.palette[PC.BackgroundSecondary], ";\n      z-index: -1;\n    }\n\n    ").concat(!isSelected && "\n      background-color: ".concat(theme.palette[PC.BackgroundSecondary], ";\n      // background-color: ").concat(theme.palette[PC.BackgroundHover], ";\n      // box-shadow: ").concat(theme.shadows[PSH.ShadowSm], ";\n    "), "\n  ");
+}, function (_ref12) {
+  var palette = _ref12.theme.palette;
+  return palette[PC.BackgroundHover];
+}, function (_ref13) {
+  var isSelected = _ref13.isSelected,
+    isLoading = _ref13.isLoading,
+    palette = _ref13.theme.palette;
+  if (isSelected) {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        background-color: ", ";\n        color: ", ";\n\n        svg {\n          color: ", ";\n        }\n      "])), palette[PC.BackgroundActive], palette[PC.AccentStateless], palette[PC.AccentStateless]);
+  }
+  if (isLoading) {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        background-color: ", ";\n      "])), palette[PC.BackgroundHover]);
+  }
+});
+var IconWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  min-width: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var LoadingIcon = styled(Loading)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  animation: rotating-spinner 2s linear infinite;\n\n  ", "\n"])), function (_ref14) {
+  var palette = _ref14.theme.palette;
+  return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    color: ", ";\n    fill: ", ";\n  "])), palette[PC.AccentPrimary], palette[PC.AccentPrimary]);
+});
+var FoldersTreeWrapper = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  padding: 32px 4px 24px 24px;\n  height: 100%;\n\n  ", "\n"])), function (_ref15) {
+  var hideHeader = _ref15.hideHeader;
+  return hideHeader && css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      padding: 0;\n  "])));
+});
+var FoldersTreeLabel = styled.p(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  margin-bottom: 16px;\n  ", ";\n"])), function (_ref16) {
+  var typography = _ref16.theme.typography;
+  return typography.font[FV.TitleH4];
+});
+var ArrowWrapper = styled.span(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  visibility: ", ";\n  pointer-events: ", ";\n  transform: ", ";\n  transition: all 100ms ease-out;\n  color: inherit;\n"])), function (_ref17) {
+  var hideTick = _ref17.hideTick;
+  return hideTick ? 0 : 1;
+}, function (_ref18) {
+  var hideTick = _ref18.hideTick;
+  return hideTick ? 'hidden' : 'visible';
+}, function (_ref19) {
+  var hideTick = _ref19.hideTick;
+  return hideTick ? 'none' : 'all';
+}, function (_ref20) {
+  var isExpanded = _ref20.isExpanded;
+  return isExpanded ? 'rotate(90deg)' : 'none';
+});
+var ArrowIcon = styled(Arrow)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  color: inherit;\n"])));
+var LabelWrapper = styled.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  width: calc(100% - 28px);\n"])));
+var ItemLabel = styled.label(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  display: block;\n  line-height: 16px;\n  font-size: 14px;\n  cursor: pointer;\n"])));
+var Header = styled.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n  margin-right: 20px; // we have 4px from the wrapper.\n"])));
+var FoldersListWrapper = styled.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n    ", "\n\n    overflow-y: auto;\n    padding-right: 8px; // we already have 4px from the whole tree wrapper + 12px for the border of scrollbar thumb..\n    padding-bottom: 24px;\n"])), function (_ref21) {
+  var hideHeader = _ref21.hideHeader;
+  return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n      max-height: calc(100% - ", "px);"])), hideHeader ? 57 : 110);
+});
+var SearchWrapper = styled.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  z-index: 1111;\n  background-color: ", ";\n  ", "\n"])), function (_ref22) {
+  var palette = _ref22.theme.palette;
+  return palette[PC.BackgroundStateless];
+}, function (_ref23) {
+  var fullWidth = _ref23.fullWidth;
+  return fullWidth && 'flex-grow: 1;';
+});
+var Search = styled(SfxSearch)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral([""])));
+var SelectedFolder = styled.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 80%;\n"])));
+var SelectedFolderName = styled.span(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  color: ", ";\n  ", ";\n"])), function (_ref24) {
+  var palette = _ref24.theme.palette,
+    isCurrentFolder = _ref24.isCurrentFolder;
+  return isCurrentFolder ? palette[PC.AccentStateless] : palette[PC.TextPrimary];
+}, function (_ref25) {
+  var typography = _ref25.theme.typography;
+  return typography.font[FV.LabelMediumEmphasis];
+});
+var SelectedFolderPath = styled.span(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  color: ", ";\n  ", ";\n"])), function (_ref26) {
+  var palette = _ref26.theme.palette;
+  return palette[PC.TextSecondary];
+}, function (_ref27) {
+  var typography = _ref27.theme.typography;
+  return typography.font[FV.LabelSmall];
+});
+var ResultFolders = styled.div(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  align-items: start;\n  column-gap: 12px;\n  position: relative;\n  padding: ", ";\n  ", ";\n\n  ", ";\n"])), function (_ref28) {
+  var _ref28$noHorizontalPa = _ref28.noHorizontalPadding,
+    noHorizontalPadding = _ref28$noHorizontalPa === void 0 ? false : _ref28$noHorizontalPa;
+  return "12px ".concat(noHorizontalPadding ? 0 : '16px');
+}, disabledFolderItemCss, function (_ref29) {
+  var _ref29$noHover = _ref29.noHover,
+    noHover = _ref29$noHover === void 0 ? false : _ref29$noHover;
+  return !noHover && css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n    &:hover {\n      background-color: ", ";\n      cursor: pointer;\n    }\n  "])), function (_ref30) {
+    var palette = _ref30.theme.palette;
+    return palette[PC.BackgroundHover];
+  });
+});
+var NewFolderInput = styled.input(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  display: inline-block;\n  align-items: center;\n  height: 18px;\n  padding: 0 4px;\n  column-gap: 6px;\n  margin: 10px 16px 10px 35px;\n  cursor: pointer;\n  outline: none;\n  transition: all 100ms ease-out;\n  border-radius: 4px;\n  border-radius: 2px;\n  width: calc(100% - 35px - 16px); // width - left and right margins\n  color: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  ", ";\n\n  &::selection {\n    background-color: ", ";\n  }\n"])), function (_ref31) {
+  var palette = _ref31.theme.palette;
+  return palette[PC.TextPrimary];
+}, function (_ref32) {
+  var palette = _ref32.theme.palette,
+    isNewFolderInputError = _ref32.isNewFolderInputError;
+  return isNewFolderInputError ? palette[PC.Error] : palette[PC.AccentStateless];
+}, function (_ref33) {
+  var palette = _ref33.theme.palette;
+  return palette[PC.BackgroundHover];
+}, function (_ref34) {
+  var typography = _ref34.theme.typography;
+  return typography.font[FV.LabelMedium];
+}, function (_ref35) {
+  var palette = _ref35.theme.palette;
+  return palette[PC.Accent_1_8_Opacity];
+});
+var FoldersToolsWrapper = styled.div(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 16px;\n  align-items: center;\n"])));
+var CollapseFoldersIcon = styled(CollapseFolders)(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n  color: ", ";\n  cursor: pointer;\n"])), function (_ref36) {
+  var palette = _ref36.theme.palette;
+  return palette[PC.IconsSecondary];
+});
+var Styled = {
+  Item: Item,
+  LoadingIcon: LoadingIcon,
+  SubFoldersWrapper: SubFoldersWrapper,
+  NoFolder: NoFolder,
+  NoResultLabel: NoResultLabel,
+  NoResultSubLabel: NoResultSubLabel,
+  NoFolderLabel: NoFolderLabel,
+  FoldersTreeWrapper: FoldersTreeWrapper,
+  FoldersTreeLabel: FoldersTreeLabel,
+  ItemLabel: ItemLabel,
+  Header: Header,
+  FoldersListWrapper: FoldersListWrapper,
+  FoldersTreeSkeletonTitle: FoldersTreeSkeletonTitle,
+  FoldersTreeSkeletonSubTitle: FoldersTreeSkeletonSubTitle,
+  FoldersTreeSkeletonInnerSubTitle: FoldersTreeSkeletonInnerSubTitle,
+  Search: Search,
+  SearchWrapper: SearchWrapper,
+  LabelWrapper: LabelWrapper,
+  ArrowWrapper: ArrowWrapper,
+  ArrowIcon: ArrowIcon,
+  IconWrapper: IconWrapper,
+  RootIcon: RootIcon,
+  FoldersList: FoldersList,
+  FoldersListItem: FoldersListItem,
+  ResultFolders: ResultFolders,
+  SelectedFolder: SelectedFolder,
+  SelectedFolderName: SelectedFolderName,
+  SelectedFolderPath: SelectedFolderPath,
+  FoldersToolsWrapper: FoldersToolsWrapper,
+  CollapseFoldersIcon: CollapseFoldersIcon,
+  NewFolderInput: NewFolderInput
+};
+export default Styled;

package/lib/components/FoldersView/FoldersTree/FoldersTree.utils.js

@@ -0,0 +1,78 @@
+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 { SORT_BY, SORT_ORDER } from '../../common/Sort/Sort.constants';
+export var extractFolderTreeSlice = function extractFolderTreeSlice(folder) {
+  var _folder$count, _folder$size, _folder$childrenUuids, _folder$isExpanded, _folder$isLoaded, _folder$loading, _folder$error, _folder$visibility, _folder$permissions;
+  return {
+    // name, created_at, modified_at, assets_count, size, props should always have the name as SORT_BY props
+    uuid: folder.uuid,
+    path: folder.path,
+    name: folder.name,
+    created_at: folder.created_at,
+    modified_at: folder.updated_at,
+    assets_count: (_folder$count = folder.count) === null || _folder$count === void 0 ? void 0 : _folder$count.files_recursive,
+    size: (_folder$size = folder.size) === null || _folder$size === void 0 ? void 0 : _folder$size.total_recursive_bytes,
+    parentUuid: folder.parentUuid,
+    childrenUuids: (_folder$childrenUuids = folder.childrenUuids) !== null && _folder$childrenUuids !== void 0 ? _folder$childrenUuids : [],
+    isExpanded: (_folder$isExpanded = folder.isExpanded) !== null && _folder$isExpanded !== void 0 ? _folder$isExpanded : false,
+    isLoaded: (_folder$isLoaded = folder.isLoaded) !== null && _folder$isLoaded !== void 0 ? _folder$isLoaded : false,
+    loading: (_folder$loading = folder.loading) !== null && _folder$loading !== void 0 ? _folder$loading : false,
+    error: (_folder$error = folder.error) !== null && _folder$error !== void 0 ? _folder$error : null,
+    isFolder: true,
+    type: 'folder',
+    visibility: (_folder$visibility = folder.visibility) !== null && _folder$visibility !== void 0 ? _folder$visibility : null,
+    permissions: (_folder$permissions = folder.permissions) !== null && _folder$permissions !== void 0 ? _folder$permissions : null
+  };
+};
+export var getNormalizedFoldersSlicesByUuids = function getNormalizedFoldersSlicesByUuids(folders, parentUuid) {
+  if ((folders === null || folders === void 0 ? void 0 : folders.length) === 0) return {
+    normalizedFoldersSlices: {},
+    uuids: []
+  };
+  var normalizedFoldersSlices = {};
+  var normalizedFoldersUuids = [];
+  folders.forEach(function (folder) {
+    normalizedFoldersSlices[folder.uuid] = extractFolderTreeSlice(_objectSpread(_objectSpread({}, folder), {}, {
+      parentUuid: parentUuid !== null && parentUuid !== void 0 ? parentUuid : folder.parentUuid
+    }));
+    normalizedFoldersUuids.push(folder.uuid);
+  });
+  return {
+    normalizedFoldersSlices: normalizedFoldersSlices,
+    uuids: normalizedFoldersUuids
+  };
+};
+
+// This works good as long as the folder path doesn't end with (/) slash.
+export var isDirectChildFolder = function isDirectChildFolder(folderPath, parentFolderPath) {
+  return folderPath.slice(0, folderPath.lastIndexOf('/')) === parentFolderPath;
+};
+export var getSortedFoldersUuids = function getSortedFoldersUuids(_ref) {
+  var sortOrder = _ref.sortOrder,
+    sortedBy = _ref.sortedBy,
+    allFolders = _ref.allFolders,
+    foldersUuidsToSort = _ref.foldersUuidsToSort;
+  var orderFactor = sortOrder === SORT_ORDER.DSC ? -1 : 1;
+  if (sortedBy === SORT_BY.NAME) {
+    var getStringWithoutSpecialChars = function getStringWithoutSpecialChars(string) {
+      return string.replace(/[$&+,:;=?@#|'<>.*()%!{}_-]/g, '');
+    };
+    return foldersUuidsToSort.sort(function (aUuid, bUuid) {
+      var _allFolders$aUuid, _allFolders$bUuid;
+      var firstName = getStringWithoutSpecialChars((_allFolders$aUuid = allFolders[aUuid]) === null || _allFolders$aUuid === void 0 ? void 0 : _allFolders$aUuid[sortedBy]);
+      var secondName = getStringWithoutSpecialChars((_allFolders$bUuid = allFolders[bUuid]) === null || _allFolders$bUuid === void 0 ? void 0 : _allFolders$bUuid[sortedBy]);
+      return firstName.toLowerCase().localeCompare(secondName.toLowerCase()) * orderFactor;
+    });
+  }
+  return foldersUuidsToSort.sort(function (aUuid, bUuid) {
+    var _allFolders$aUuid2, _allFolders$bUuid2;
+    return (((_allFolders$aUuid2 = allFolders[aUuid]) === null || _allFolders$aUuid2 === void 0 ? void 0 : _allFolders$aUuid2[sortedBy]) > ((_allFolders$bUuid2 = allFolders[bUuid]) === null || _allFolders$bUuid2 === void 0 ? void 0 : _allFolders$bUuid2[sortedBy]) ? 1 : -1) * orderFactor;
+  });
+};
+export var getFolderItemKey = function getFolderItemKey(folder, index) {
+  return "".concat(folder.uuid, "-").concat(index);
+};

package/lib/components/FoldersView/FoldersTree/FoldersTreeHeader.js

@@ -0,0 +1,52 @@
+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 { useDispatch, useSelector } from 'react-redux';
+import Styled from './FoldersTree.styled';
+import FoldersTreeSearch from './FoldersTreeSearch';
+import { useExplorerI18n } from '../../../hooks';
+import { foldersTreeAllFoldersCollapsed, selectFoldersTreeSortBy, selectFoldersTreeSortOrder, updateFoldersTreeSort } from '../../../slices/foldersTree.slice';
+import Sort from '../../common/Sort';
+import { FOLDER_TREE_SORT_OPTIONS } from '../../common/Sort/Sort.constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var FoldersTreeHeader = function FoldersTreeHeader(_ref) {
+  var searchProps = _ref.searchProps,
+    _ref$hideSort = _ref.hideSort,
+    hideSort = _ref$hideSort === void 0 ? false : _ref$hideSort;
+  var dispatch = useDispatch();
+  var i18n = useExplorerI18n();
+  var sortBy = useSelector(selectFoldersTreeSortBy);
+  var sortOrder = useSelector(selectFoldersTreeSortOrder);
+  var collapseAllFoldersOfFoldersTree = function collapseAllFoldersOfFoldersTree() {
+    dispatch(foldersTreeAllFoldersCollapsed());
+  };
+  var handleChangeSort = function handleChangeSort(sortedBy, sortOrder) {
+    dispatch(updateFoldersTreeSort({
+      sortedBy: sortedBy,
+      sortOrder: sortOrder
+    }));
+  };
+  return /*#__PURE__*/_jsxs(Styled.Header, {
+    children: [/*#__PURE__*/_jsx(Styled.FoldersTreeLabel, {
+      children: i18n('folderTreeLabel')
+    }), /*#__PURE__*/_jsx(FoldersTreeSearch, _objectSpread(_objectSpread({}, searchProps), {}, {
+      sortBy: sortBy,
+      sortOrder: sortOrder
+    })), !hideSort && /*#__PURE__*/_jsxs(Styled.FoldersToolsWrapper, {
+      children: [/*#__PURE__*/_jsx(Sort, {
+        sortBy: sortBy,
+        sortOrder: sortOrder,
+        options: FOLDER_TREE_SORT_OPTIONS,
+        onChange: handleChangeSort,
+        dontDisableIfNoFiles: true
+      }), /*#__PURE__*/_jsx(Styled.CollapseFoldersIcon, {
+        size: 18,
+        onClick: collapseAllFoldersOfFoldersTree
+      })]
+    })]
+  });
+};
+export default FoldersTreeHeader;

package/lib/components/FoldersView/FoldersTree/FoldersTreeList.js

@@ -0,0 +1,64 @@
+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 { useSelector } from 'react-redux';
+import { VirtualList } from '@scaleflex/widget-common';
+import Styled from './FoldersTree.styled';
+import { selectFoldersTreeBaseFolderUuid } from '../../../slices/foldersTree.slice';
+import { getFolderItemKey } from './FoldersTree.utils';
+import FoldersTreeListItem from './FoldersTreeListItem';
+import { useExplorer } from '../../../hooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var FoldersTreeList = function FoldersTreeList(_ref) {
+  var uuids = _ref.uuids,
+    onFolderClick = _ref.onFolderClick,
+    disabledFoldersUuids = _ref.disabledFoldersUuids,
+    selectedPath = _ref.selectedPath,
+    openFolderOnDblClick = _ref.openFolderOnDblClick,
+    setNewFolderName = _ref.setNewFolderName,
+    addFolder = _ref.addFolder,
+    showAddFolderInput = _ref.showAddFolderInput,
+    setShowAddFolderInput = _ref.setShowAddFolderInput,
+    _ref$noRootFolder = _ref.noRootFolder,
+    noRootFolder = _ref$noRootFolder === void 0 ? false : _ref$noRootFolder,
+    _ref$noContextMenu = _ref.noContextMenu,
+    noContextMenu = _ref$noContextMenu === void 0 ? false : _ref$noContextMenu,
+    _ref$isNewFolderInput = _ref.isNewFolderInputError,
+    isNewFolderInputError = _ref$isNewFolderInput === void 0 ? false : _ref$isNewFolderInput;
+  var _useExplorer = useExplorer(),
+    opts = _useExplorer.opts;
+  var baseFolderUuid = useSelector(selectFoldersTreeBaseFolderUuid);
+  var useAssetsPicker = opts.useAssetsPicker;
+  var commonProps = {
+    onFolderClick: onFolderClick,
+    openFolderOnDblClick: openFolderOnDblClick,
+    selectedPath: selectedPath,
+    setShowAddFolderInput: setShowAddFolderInput,
+    showAddFolderInput: showAddFolderInput,
+    setNewFolderName: setNewFolderName,
+    isNewFolderInputError: isNewFolderInputError,
+    addFolder: addFolder
+  };
+  return /*#__PURE__*/_jsxs(Styled.FoldersList, {
+    children: [!noRootFolder && /*#__PURE__*/_jsx(FoldersTreeListItem, _objectSpread({
+      uuid: baseFolderUuid,
+      icon: /*#__PURE__*/_jsx(Styled.RootIcon, {
+        size: 16
+      }),
+      noDrag: true,
+      noContextMenu: true
+    }, commonProps)), /*#__PURE__*/_jsx(VirtualList, {
+      items: uuids,
+      injectedItemPropName: "uuid",
+      getItemKey: getFolderItemKey,
+      children: /*#__PURE__*/_jsx(FoldersTreeListItem, _objectSpread({
+        disabledFoldersUuids: disabledFoldersUuids,
+        noContextMenu: useAssetsPicker || noContextMenu
+      }, commonProps))
+    })]
+  });
+};
+export default FoldersTreeList;