@scaleflex/widget-provider-views 4.3.0 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +5 -5
  3. package/dist/style.css +0 -787
  4. package/dist/style.min.css +0 -1
  5. package/lib/components/AuthView.js +0 -35
  6. package/lib/components/AuthView.styled.js +0 -21
  7. package/lib/components/Browser.js +0 -58
  8. package/lib/components/FolderImportProgress/FolderImportProgress.styled.js +0 -50
  9. package/lib/components/FolderImportProgress/index.js +0 -50
  10. package/lib/components/Items/AssetsSection/AssetsSectionTableHeader.js +0 -41
  11. package/lib/components/Items/AssetsSection/AssetsSectionTableRow.js +0 -147
  12. package/lib/components/Items/AssetsSection/index.js +0 -65
  13. package/lib/components/Items/FoldersSection/FoldersSectionTableHeader.js +0 -41
  14. package/lib/components/Items/FoldersSection/FoldersSectionTableRow.js +0 -102
  15. package/lib/components/Items/FoldersSection/index.js +0 -64
  16. package/lib/components/Items/Items.styled.js +0 -156
  17. package/lib/components/Items/List.js +0 -96
  18. package/lib/components/Items/index.js +0 -172
  19. package/lib/components/SearchProviderView/FooterActions.js +0 -25
  20. package/lib/components/SearchProviderView/SearchFilterInput.js +0 -76
  21. package/lib/components/SearchProviderView/SearchProviderBrowser.js +0 -74
  22. package/lib/components/SearchProviderView/SearchProviderBrowser.styled.js +0 -65
  23. package/lib/components/SearchProviderView/SearchProviderView.js +0 -248
  24. package/lib/components/SearchProviderView/index.js +0 -1
  25. package/lib/context/index.js +0 -2
  26. package/lib/hooks/useBrowserContext.js +0 -5
  27. package/lib/utils/View.js +0 -219
  28. package/lib/utils/remoteFileObjToLocal.js +0 -13
@@ -1,102 +0,0 @@
1
- import { TooltipV2 } from '@scaleflex/ui/core';
2
- import { VISIBILITY_OPTIONS } from '@scaleflex/widget-utils/lib/constants';
3
- import FileInfo from '@scaleflex/widget-explorer/lib/components/FileItem/FileInfo';
4
- import humanReadableDateWithTranslations from '@scaleflex/widget-utils/lib/humanReadableDateWithTranslations';
5
- import { getActualVisibility } from '@scaleflex/widget-utils/lib/visibility';
6
- import { useBrowserContext } from '../../../hooks/useBrowserContext';
7
- import Styled from '../Items.styled';
8
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
- var checkboxOnChange = function checkboxOnChange() {};
10
- var COL_EMPTY_PLACEHOLDER = '';
11
- var FoldersSectionTableRow = function FoldersSectionTableRow(_ref) {
12
- var folder = _ref.folder,
13
- handleNavigatingThroughArrows = _ref.handleNavigatingThroughArrows,
14
- handleContextMenuToggle = _ref.handleContextMenuToggle,
15
- toggleCheckbox = _ref.toggleCheckbox,
16
- openFolderOnClick = _ref.openFolderOnClick;
17
- var i18n = useBrowserContext(function (_ref2) {
18
- var i18n = _ref2.i18n;
19
- return i18n;
20
- });
21
- var isChecked = useBrowserContext(function (_ref3) {
22
- var isChecked = _ref3.isChecked;
23
- return isChecked;
24
- });
25
- var showMeta = useBrowserContext(function (_ref4) {
26
- var showMeta = _ref4.showMeta;
27
- return showMeta;
28
- });
29
- var iconPrimaryColor = useBrowserContext(function (_ref5) {
30
- var iconPrimaryColor = _ref5.iconPrimaryColor;
31
- return iconPrimaryColor;
32
- });
33
- var loading = useBrowserContext(function (_ref6) {
34
- var loading = _ref6.loading;
35
- return loading;
36
- });
37
- var id = folder.uuid;
38
- var visibility = VISIBILITY_OPTIONS[getActualVisibility(folder === null || folder === void 0 ? void 0 : folder.visibilities)];
39
- var visibilityName = i18n(visibility === null || visibility === void 0 ? void 0 : visibility.i18nLabel);
40
- var lastModify = folder.modified_at || folder.updated_at || folder.modifiedDate;
41
- var lastModifyTime = lastModify ? humanReadableDateWithTranslations(lastModify, i18n) : COL_EMPTY_PLACEHOLDER;
42
- var isFolderChecked = isChecked(folder);
43
- var handleSelect = function handleSelect(e, isMultiple) {
44
- toggleCheckbox(e, folder, isMultiple, false);
45
- };
46
- return /*#__PURE__*/_jsxs(Styled.TableRow, {
47
- hover: true,
48
- selected: isFolderChecked,
49
- onClick: handleSelect,
50
- onDoubleClick: loading ? null : function () {
51
- return openFolderOnClick(folder);
52
- },
53
- onContextMenu: function onContextMenu() {},
54
- onKeyDown: handleNavigatingThroughArrows,
55
- "data-filerobot-focusable-id": id,
56
- tabIndex: "-1",
57
- children: [/*#__PURE__*/_jsx(Styled.HeaderTableCell, {
58
- component: "th",
59
- children: /*#__PURE__*/_jsxs(Styled.HeaderCheckboxWrapper, {
60
- children: [/*#__PURE__*/_jsx(Styled.CheckBox, {
61
- // TODO: fix
62
- // we use onClick instead of onChange as onChange causes multiple rerenders
63
- // we add onChnage as emty function to avoid type warning
64
- onClick: function onClick(e) {
65
- return handleSelect(e, true);
66
- },
67
- onChange: checkboxOnChange,
68
- checked: isFolderChecked,
69
- onContextMenu: function onContextMenu() {},
70
- size: "md"
71
- }), /*#__PURE__*/_jsx(Styled.FolderIcon, {
72
- color: "#D8E0E8",
73
- width: "48px",
74
- height: "48px"
75
- }), !loading && /*#__PURE__*/_jsx(FileInfo, {
76
- file: folder,
77
- showMeta: showMeta,
78
- handleContextMenuToggle: handleContextMenuToggle,
79
- noTruncate: true,
80
- isListView: true
81
- })]
82
- })
83
- }), /*#__PURE__*/_jsx(Styled.TableCell, {
84
- children: (visibility === null || visibility === void 0 ? void 0 : visibility.icon) && /*#__PURE__*/_jsx(TooltipV2, {
85
- arrow: true,
86
- position: "top",
87
- size: "md",
88
- title: visibilityName,
89
- children: /*#__PURE__*/_jsx(visibility.icon, {
90
- size: 14,
91
- color: iconPrimaryColor
92
- })
93
- })
94
- }), /*#__PURE__*/_jsx(Styled.TableCell, {
95
- children: /*#__PURE__*/_jsx(Styled.ModifyAtLabel, {
96
- title: lastModifyTime,
97
- children: lastModifyTime
98
- })
99
- })]
100
- });
101
- };
102
- export default FoldersSectionTableRow;
@@ -1,64 +0,0 @@
1
- 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); }
2
- function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
3
- 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."); }
4
- 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; } }
5
- function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
6
- function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
7
- 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; }
8
- 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; }
9
- 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; }
10
- 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; }
11
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
12
- 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); }
13
- import { Table, TableBody, TableRow } from '@scaleflex/ui/core';
14
- import { VirtualList } from '@scaleflex/widget-common';
15
- import { LIST_VIEW_FOLDERS_COLS_IDS } from '@scaleflex/widget-utils/lib/constants';
16
- import { useBrowserContext } from '../../../hooks/useBrowserContext';
17
- import FoldersSectionTableRow from './FoldersSectionTableRow';
18
- import FoldersSectionTableHeader from './FoldersSectionTableHeader';
19
- import Styled from '../Items.styled';
20
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
21
- var renderTableRowSpacer = function renderTableRowSpacer(props) {
22
- return /*#__PURE__*/_jsx("tr", _objectSpread({}, props));
23
- };
24
- var FoldersSection = function FoldersSection(_ref) {
25
- var folders = _ref.folders,
26
- handleNavigatingThroughArrows = _ref.handleNavigatingThroughArrows,
27
- handleContextMenuToggle = _ref.handleContextMenuToggle,
28
- toggleCheckbox = _ref.toggleCheckbox,
29
- openFolderOnClick = _ref.openFolderOnClick;
30
- var selectedListViewFoldersCols = useBrowserContext(function (_ref2) {
31
- var selectedListViewFoldersCols = _ref2.selectedListViewFoldersCols;
32
- return selectedListViewFoldersCols;
33
- });
34
- var filteredListViewCols = function filteredListViewCols() {
35
- return selectedListViewFoldersCols.filter(function (item) {
36
- return item === LIST_VIEW_FOLDERS_COLS_IDS.VISIBILITY || item === LIST_VIEW_FOLDERS_COLS_IDS.LAST_MODIFY;
37
- });
38
- };
39
- var listViewCols = [LIST_VIEW_FOLDERS_COLS_IDS.NAME].concat(_toConsumableArray(filteredListViewCols()));
40
- return /*#__PURE__*/_jsxs(Table, {
41
- children: [/*#__PURE__*/_jsx(Styled.TableHead, {
42
- children: /*#__PURE__*/_jsx(TableRow, {
43
- children: listViewCols.map(function (columnId) {
44
- return /*#__PURE__*/_jsx(FoldersSectionTableHeader, {
45
- columnId: columnId
46
- }, columnId);
47
- })
48
- })
49
- }), /*#__PURE__*/_jsx(TableBody, {
50
- children: /*#__PURE__*/_jsx(VirtualList, {
51
- items: folders,
52
- injectedItemPropName: "folder",
53
- renderSpacer: renderTableRowSpacer,
54
- children: /*#__PURE__*/_jsx(FoldersSectionTableRow, {
55
- handleNavigatingThroughArrows: handleNavigatingThroughArrows,
56
- handleContextMenuToggle: handleContextMenuToggle,
57
- toggleCheckbox: toggleCheckbox,
58
- openFolderOnClick: openFolderOnClick
59
- })
60
- })
61
- })]
62
- });
63
- };
64
- export default FoldersSection;
@@ -1,156 +0,0 @@
1
- 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;
2
- function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
3
- import styled, { css } from 'styled-components';
4
- import { PC, FV, PSH } from '@scaleflex/widget-common';
5
- import { Label as SfxLabel, Button, TableHead as SfxTableHead, IconButton, Skeleton as SfxSkeleton, TableCell as SfxTableCell, Tag as SfxTag, TableRow as SfxTableRow, TooltipV2, CheckBox as SfxCheckBox, Accordion as SfxAccordion } from '@scaleflex/ui/core';
6
- import { Folder } from '@scaleflex/icons';
7
- var BrowserBody = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1;\n z-index: 1000;\n position: relative;\n display: flex;\n overflow: hidden;\n\n ", "\n"])), function (_ref) {
8
- var isListLayout = _ref.isListLayout;
9
- return isListLayout && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n "])));
10
- });
11
- var HeaderTableCell = styled(SfxTableCell)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: sticky;\n left: 0;\n background-color: ", ";\n border-bottom: ", ";\n z-index: 1;\n width: 500px;\n min-width: 500px;\n max-width: 500px;\n"])), function (_ref2) {
12
- var theme = _ref2.theme,
13
- selected = _ref2.selected;
14
- return selected ? theme.palette[PC.BackgroundActive] : theme.palette[PC.BackgroundStateless];
15
- }, function (_ref3) {
16
- var theme = _ref3.theme;
17
- return "1px solid ".concat(theme.palette[PC.BordersSecondary]);
18
- });
19
- var TableCell = styled(SfxTableCell)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-bottom: ", ";\n width: 300px;\n"])), function (_ref4) {
20
- var theme = _ref4.theme;
21
- return "1px solid ".concat(theme.palette[PC.BordersSecondary]);
22
- });
23
- var FileExtension = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n text-align: start;\n text-transform: lowercase;\n ", "\n color: ", ";\n max-width: 60px;\n margin-left: 4px;\n"])), function (_ref5) {
24
- var theme = _ref5.theme;
25
- return theme.typography.font[FV.LabelSmall];
26
- }, function (_ref6) {
27
- var theme = _ref6.theme;
28
- return theme.palette[PC.TextSecondary];
29
- });
30
- var Label = styled(SfxLabel)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n cursor: ", ";\n"])), function (_ref7) {
31
- var defaultCursor = _ref7.defaultCursor;
32
- return defaultCursor ? 'default' : 'pointer';
33
- });
34
- var ModifyAtLabel = styled(SfxLabel)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n color: ", ";\n"])), function (_ref8) {
35
- var theme = _ref8.theme;
36
- return theme.palette[PC.TextPrimary];
37
- });
38
- var ClickableText = styled(Button)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n color: ", ";\n cursor: pointer;\n text-decoration: underline;\n\n .SfxButton-Label {\n ", ";\n }\n\n .SfxButton-StartIcon {\n margin-right: 4px;\n }\n\n &:not(:last-child) {\n margin-right: 8px;\n }\n"])), function (_ref9) {
39
- var theme = _ref9.theme;
40
- return theme.palette[PC.AccentStateless];
41
- }, function (_ref10) {
42
- var typography = _ref10.theme.typography;
43
- return typography.font[FV.ButtonSm];
44
- });
45
- var InnerHeaderTableCell = styled(SfxTableCell)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n&:first-child {\n display: flex;\n align-items: center;\n position: sticky;\n left: 0;\n z-index: 2;\n background-color: ", ";\n}"])), function (_ref11) {
46
- var theme = _ref11.theme;
47
- return theme.palette[PC.BackgroundStateless];
48
- });
49
- var FadedWrapper = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n white-space: nowrap;\n max-width: 175px;\n overflow: hidden;\n position: relative;\n\n &:after {\n content: \"\";\n position: absolute;\n z-index: ", ";\n top: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n background: linear-gradient(270deg, #FFFFFF 1.56%, rgba(255, 255, 255, 0.89) 52.4%, rgba(255, 255, 255, 0.532165) 76.04%, rgba(255, 255, 255, 0) 100%);\n width: 70px;\n }\n "])), function (_ref12) {
50
- var fade = _ref12.fade;
51
- return fade ? 1 : -1;
52
- });
53
- var TableRow = styled(SfxTableRow)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n cursor: pointer;\n ", " {\n &:after {\n background: ", ";\n }\n }\n &:hover {\n ", " {\n &:after {\n background:", ";\n }\n }\n\n ", " {\n background-color: ", ";\n }\n }\n"])), FadedWrapper, function (_ref13) {
54
- var selected = _ref13.selected;
55
- return selected && 'linear-gradient(270deg, #F3F7FA 1.56%, #F3F7FA 52.4%, rgba(243, 247, 250, 0.53) 76.04%, rgba(243, 247, 250, 0) 100%)';
56
- }, FadedWrapper, function (_ref14) {
57
- var selected = _ref14.selected;
58
- return selected ? 'linear-gradient(270deg, #F3F7FA 1.56%, #F3F7FA 52.4%, rgba(243, 247, 250, 0.53) 76.04%, rgba(243, 247, 250, 0) 100%)' : 'linear-gradient(270deg, #F9FBFC 1.56%, #F9FBFC 52.4%, rgba(249, 251, 252, 0.53) 76.04%, rgba(249, 251, 252, 0) 100%)';
59
- }, HeaderTableCell, function (_ref15) {
60
- var theme = _ref15.theme,
61
- selected = _ref15.selected;
62
- return selected ? theme.palette[PC.BackgroundActive] : theme.palette[PC.BackgroundHover];
63
- });
64
- var HeaderCheckboxWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
65
- var CheckBox = styled(SfxCheckBox)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n margin-right: 20px;\n"])));
66
- var FirstColumnWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
67
- var FirstColumnContentWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n display: flex;\n column-gap: 12px;\n"])));
68
- var AssetPreviewSkeleton = styled(SfxSkeleton)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n width: 70px;\n height: 52px;\n border-radius: 4px;\n"])));
69
- var FolderSkeleton = styled(SfxSkeleton)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n width: 48px;\n height: 38px;\n margin: 8px 0px;\n border-radius: 4px;\n"])));
70
- var FileInfoSkeletonWrapper = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n row-gap: 8px;\n"])));
71
- var FileNameSkeleton = styled(SfxSkeleton)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n width: 174px;\n height: 16px;\n"])));
72
- var FileSizAndResolutionSkeleton = styled(SfxSkeleton)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n width: 80px;\n height: 16px;\n"])));
73
- var TableCellSkeleton = styled(SfxSkeleton)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n width: 185px;\n height: 16px;\n"])));
74
- var TableHead = styled(SfxTableHead)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n position: sticky;\n top: -1px;\n z-index: 100;\n background-color: ", ";\n box-shadow: rgb(236, 240, 243) 0px 1px 0px;\n border-bottom: none;\n "])), function (_ref16) {
75
- var theme = _ref16.theme;
76
- return theme.palette[PC.BackgroundStateless];
77
- });
78
- var SortLabel = styled(Button)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n font-weight: 400;\n color: ", ";\n\n .SfxButton-Label {\n font-weight: 400;\n }\n"])), function (_ref17) {
79
- var palette = _ref17.theme.palette,
80
- active = _ref17.active;
81
- return active ? palette[PC.LinkPressed] : '';
82
- });
83
- var TableCheckboxSkeleton = styled(SfxSkeleton)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n width: 20px;\n height: 20px;\n margin-right: 20px;\n"])));
84
- var TableHeaderSkeleton = styled(SfxSkeleton)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n width: 185px;\n height: 16px;\n margin: 4px;\n background-color: ", ";\n"])), function (_ref18) {
85
- var palette = _ref18.theme.palette;
86
- return palette[PC.BordersSecondary];
87
- });
88
- var Tag = styled(SfxTag)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n margin-right: 8px;\n margin-bottom: 8px;\n\n\n &:hover {\n background-color: ", ";\n border: 1px solid ", ";\n }\n"])), function (_ref19) {
89
- var palette = _ref19.theme.palette;
90
- return palette[PC.BordersSecondary];
91
- }, function (_ref20) {
92
- var palette = _ref20.theme.palette;
93
- return palette[PC.BorderPrimaryStateless];
94
- });
95
- var TagsTooltip = styled(TooltipV2)(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n background-color: ", ";\n padding-bottom: 0px;\n max-width: 499px;\n gap: 8px;\n border-radius: 4px;\n padding: 8px 12px;\n box-shadow: ", ";\n\n &> .SfxTooltip-root {\n box-shadow: none;\n padding: 0;\n gap:0;\n }\n\n & + .SfxPopper-arrow::before {\n background: ", ";\n }\n"])), function (_ref21) {
96
- var theme = _ref21.theme;
97
- return theme.palette[PC.BackgroundStateless];
98
- }, function (_ref22) {
99
- var theme = _ref22.theme;
100
- return theme.shadows[PSH.ShadowLg];
101
- }, function (_ref23) {
102
- var theme = _ref23.theme;
103
- return theme.palette[PC.BackgroundStateless];
104
- });
105
- var LabelsTooltip = styled(TagsTooltip)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n gap: 12px;\n"])));
106
- var HeaderIconButton = styled(IconButton)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n margin-right: 12px;\n"])));
107
- var AssetPreviewWrapper = styled.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n position: relative;\n width: 70px;\n height: 52px;\n border: 1px solid ", ";\n border-radius: 2px;\n display: flex;\n align-items: center;\n"])), function (_ref24) {
108
- var theme = _ref24.theme;
109
- return theme.palette[PC.BordersPrimary];
110
- });
111
- var Accordion = styled(SfxAccordion)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n\n ", "\n\n margin-top: 24px;\n\n .SfxAccordionHeader-root {\n padding: 0 24px;\n display: ", "\n }\n\n .SfxAccordionHeader-label {\n ", ";\n color: ", "\n }\n"])), function (_ref25) {
112
- var isListView = _ref25.isListView;
113
- return isListView && "\n max-width: 2200px;\n margin: auto;\n ";
114
- }, function (_ref26) {
115
- var hideHeader = _ref26.hideHeader;
116
- return hideHeader ? 'none' : 'inline-flex';
117
- }, function (props) {
118
- return props.theme.typography.font[FV.LabelMediumEmphasis];
119
- }, function (props) {
120
- return props.theme.palette[PC.TextSecondary];
121
- });
122
- var FolderIcon = styled(Folder)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n margin-right: 4px;\n"])));
123
- var Styled = {
124
- BrowserBody: BrowserBody,
125
- FileExtension: FileExtension,
126
- Label: Label,
127
- ClickableText: ClickableText,
128
- InnerHeaderTableCell: InnerHeaderTableCell,
129
- TableCell: TableCell,
130
- HeaderCheckboxWrapper: HeaderCheckboxWrapper,
131
- CheckBox: CheckBox,
132
- FadedWrapper: FadedWrapper,
133
- TableHead: TableHead,
134
- SortLabel: SortLabel,
135
- TableCheckboxSkeleton: TableCheckboxSkeleton,
136
- TableHeaderSkeleton: TableHeaderSkeleton,
137
- FirstColumnWrapper: FirstColumnWrapper,
138
- FirstColumnContentWrapper: FirstColumnContentWrapper,
139
- AssetPreviewSkeleton: AssetPreviewSkeleton,
140
- FolderSkeleton: FolderSkeleton,
141
- FileInfoSkeletonWrapper: FileInfoSkeletonWrapper,
142
- FileNameSkeleton: FileNameSkeleton,
143
- FileSizAndResolutionSkeleton: FileSizAndResolutionSkeleton,
144
- TableCellSkeleton: TableCellSkeleton,
145
- Tag: Tag,
146
- TableRow: TableRow,
147
- HeaderTableCell: HeaderTableCell,
148
- TagsTooltip: TagsTooltip,
149
- LabelsTooltip: LabelsTooltip,
150
- HeaderIconButton: HeaderIconButton,
151
- ModifyAtLabel: ModifyAtLabel,
152
- AssetPreviewWrapper: AssetPreviewWrapper,
153
- Accordion: Accordion,
154
- FolderIcon: FolderIcon
155
- };
156
- export default Styled;
@@ -1,96 +0,0 @@
1
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
2
- 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."); }
3
- 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; } }
4
- 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; }
5
- 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; } }
6
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
7
- import { useState } from 'react';
8
- import { useBrowserContext } from '../../hooks/useBrowserContext';
9
- import FoldersSection from './FoldersSection';
10
- import AssetsSection from './AssetsSection';
11
- import Styled from './Items.styled';
12
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
13
- var List = function List(_ref) {
14
- var currentViewedFolders = _ref.currentViewedFolders,
15
- currentViewedFiles = _ref.currentViewedFiles,
16
- hasFolders = _ref.hasFolders,
17
- hasFiles = _ref.hasFiles,
18
- handleNavigatingThroughArrows = _ref.handleNavigatingThroughArrows,
19
- handleContextMenuToggle = _ref.handleContextMenuToggle,
20
- openFolderOnClick = _ref.openFolderOnClick;
21
- var totalFoldersCount = useBrowserContext(function (_ref2) {
22
- var totalFoldersCount = _ref2.totalFoldersCount;
23
- return totalFoldersCount;
24
- });
25
- var i18n = useBrowserContext(function (_ref3) {
26
- var i18n = _ref3.i18n;
27
- return i18n;
28
- });
29
- var toggleCheckbox = useBrowserContext(function (_ref4) {
30
- var toggleCheckbox = _ref4.toggleCheckbox;
31
- return toggleCheckbox;
32
- });
33
- var _useState = useState(true),
34
- _useState2 = _slicedToArray(_useState, 2),
35
- showFiles = _useState2[0],
36
- setShowFiles = _useState2[1];
37
- var _useState3 = useState(true),
38
- _useState4 = _slicedToArray(_useState3, 2),
39
- showFolders = _useState4[0],
40
- setShowFolders = _useState4[1];
41
- var foldersLength = (currentViewedFolders === null || currentViewedFolders === void 0 ? void 0 : currentViewedFolders.length) || 0;
42
- var filesLength = currentViewedFiles.length;
43
- var handleToggleFolders = function handleToggleFolders() {
44
- if (!showFiles && showFolders) {
45
- setShowFiles(true);
46
- }
47
- setShowFolders(!showFolders);
48
- };
49
- var handleToggleFiles = function handleToggleFiles() {
50
- if (!showFolders && showFiles) {
51
- setShowFolders(true);
52
- }
53
- setShowFiles(!showFiles);
54
- };
55
- return /*#__PURE__*/_jsxs(_Fragment, {
56
- children: [hasFolders && /*#__PURE__*/_jsx(Styled.Accordion, {
57
- expanded: showFolders,
58
- label: i18n('foldersViewFoldersWithCountLabel', {
59
- folders_count: totalFoldersCount || foldersLength
60
- }),
61
- onClick: handleToggleFolders,
62
- detailStyle: {
63
- paddingLeft: '20px'
64
- },
65
- onContextMenu: function onContextMenu(e) {
66
- return e.stopPropagation();
67
- },
68
- children: /*#__PURE__*/_jsx(FoldersSection, {
69
- folders: currentViewedFolders,
70
- toggleCheckbox: toggleCheckbox,
71
- handleContextMenuToggle: handleContextMenuToggle,
72
- handleNavigatingThroughArrows: handleNavigatingThroughArrows,
73
- openFolderOnClick: openFolderOnClick
74
- })
75
- }), hasFiles && /*#__PURE__*/_jsx(Styled.Accordion, {
76
- expanded: showFiles,
77
- label: i18n('mutualizedFilesWithCountLabel', {
78
- files_count: filesLength
79
- }),
80
- onClick: handleToggleFiles,
81
- detailStyle: {
82
- paddingLeft: '20px'
83
- },
84
- onContextMenu: function onContextMenu(e) {
85
- return e.stopPropagation();
86
- },
87
- isListView: true,
88
- children: /*#__PURE__*/_jsx(AssetsSection, {
89
- files: currentViewedFiles,
90
- toggleCheckbox: toggleCheckbox,
91
- handleNavigatingThroughArrows: handleNavigatingThroughArrows
92
- })
93
- })]
94
- });
95
- };
96
- export default List;
@@ -1,172 +0,0 @@
1
- import { useCallback, useEffect, useRef } from 'react';
2
- import findIndex from '@scaleflex/widget-utils/lib/findIndex';
3
- import { LAYOUTS_IDS } from '@scaleflex/widget-utils/lib/constants';
4
- import EmptyViewPlaceholder from '@scaleflex/widget-explorer/lib/components/EmptyViewPlaceholder';
5
- import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
6
- import { useBrowserContext } from '../../hooks/useBrowserContext';
7
- import List from './List';
8
- import StyledProviderViews from '../../ProviderViews.Styled';
9
- import Styled from './Items.styled';
10
- import { jsx as _jsx } from "react/jsx-runtime";
11
- var mouseClickTimeout = null;
12
- var Items = function Items() {
13
- var folders = useBrowserContext(function (_ref) {
14
- var folders = _ref.folders;
15
- return folders;
16
- });
17
- var files = useBrowserContext(function (_ref2) {
18
- var files = _ref2.files;
19
- return files;
20
- });
21
- var layoutType = useBrowserContext(function (_ref3) {
22
- var layoutType = _ref3.layoutType;
23
- return layoutType;
24
- });
25
- var currentSelection = useBrowserContext(function (_ref4) {
26
- var currentSelection = _ref4.currentSelection;
27
- return currentSelection;
28
- });
29
- var containerWidth = useBrowserContext(function (_ref5) {
30
- var containerWidth = _ref5.containerWidth;
31
- return containerWidth;
32
- });
33
- var toggleCheckbox = useBrowserContext(function (_ref6) {
34
- var toggleCheckbox = _ref6.toggleCheckbox;
35
- return toggleCheckbox;
36
- });
37
- var handleViewReset = useBrowserContext(function (_ref7) {
38
- var handleViewReset = _ref7.handleViewReset;
39
- return handleViewReset;
40
- });
41
- var openedFolders = useBrowserContext(function (_ref8) {
42
- var openedFolders = _ref8.openedFolders;
43
- return openedFolders;
44
- });
45
- var handleFolderClick = useBrowserContext(function (_ref9) {
46
- var handleFolderClick = _ref9.handleFolderClick;
47
- return handleFolderClick;
48
- });
49
- var loading = useBrowserContext(function (_ref10) {
50
- var loading = _ref10.loading;
51
- return loading;
52
- });
53
- var itemsContainer = useRef();
54
- var hasItems = files.length > 0 || (folders === null || folders === void 0 ? void 0 : folders.length) > 0;
55
- var isList = layoutType === LAYOUTS_IDS.LIST;
56
- var foldersLength = (folders === null || folders === void 0 ? void 0 : folders.length) || 0;
57
- var filesLength = files.length;
58
- var hasFolders = foldersLength > 0;
59
- var hasFiles = filesLength > 0;
60
- var getItemsContainerWidth = useCallback(function () {
61
- var _itemsContainer$curre;
62
- return itemsContainer ? (_itemsContainer$curre = itemsContainer.current) === null || _itemsContainer$curre === void 0 ? void 0 : _itemsContainer$curre.getBoundingClientRect().width : containerWidth;
63
- }, [itemsContainer, containerWidth]);
64
- var openFolderOnClick = useCallback(function (folder) {
65
- clearTimeout(mouseClickTimeout);
66
- mouseClickTimeout = null;
67
- handleFolderClick(folder);
68
- }, [mouseClickTimeout, handleFolderClick]);
69
- var navigateToItem = useCallback(function (event, navigatedItemIndexOffset) {
70
- if (!event || !navigatedItemIndexOffset) {
71
- return;
72
- }
73
- var selectedItemsCount = currentSelection.length;
74
- var lastFocusedItem = currentSelection[selectedItemsCount - 1];
75
- if (!lastFocusedItem) {
76
- return;
77
- }
78
- var isFolder = lastFocusedItem.isFolder;
79
- if (navigatedItemIndexOffset === 'enter') {
80
- return isFolder ? openFolderOnClick === null || openFolderOnClick === void 0 ? void 0 : openFolderOnClick(lastFocusedItem) : function () {};
81
- }
82
- if (selectedItemsCount) {
83
- var items = isFolder ? folders : files;
84
- var navigatedItemIndex = findIndex(items, function (i) {
85
- return (i.uuid || i.id) === (lastFocusedItem.uuid || lastFocusedItem.id);
86
- }) + navigatedItemIndexOffset;
87
- var navigatedItem;
88
- if (isFolder && navigatedItemIndex >= folders.length) {
89
- navigatedItem = files[0];
90
- } else if (!isFolder && navigatedItemIndex < 0) {
91
- navigatedItem = folders[folders.length - 1];
92
- } else if (isFolder && navigatedItemIndex < 0 || !isFolder && navigatedItemIndex === files.length) {
93
- return;
94
- } else {
95
- navigatedItem = items[navigatedItemIndex];
96
- }
97
- if (navigatedItem) {
98
- toggleCheckbox(event, navigatedItem);
99
- var item = itemsContainer.current.querySelector("[data-filerobot-focusable-id=\"".concat(navigatedItem.uuid || navigatedItem.id, "\"]"));
100
- if (item) {
101
- item.focus();
102
- item.scrollIntoViewIfNeeded();
103
- }
104
- }
105
- }
106
- }, [currentSelection, files, openFolderOnClick, toggleCheckbox]);
107
- var handleNavigatingThroughArrows = useCallback(function (e) {
108
- var calcIndexOffset = function calcIndexOffset() {
109
- return parseInt(getItemsContainerWidth() / e.currentTarget.getBoundingClientRect().width);
110
- };
111
- var navigatedItemIndexOffset = {
112
- ArrowRight: 1,
113
- ArrowLeft: -1,
114
- ArrowUp: -calcIndexOffset(),
115
- ArrowDown: calcIndexOffset(),
116
- Enter: 'enter'
117
- };
118
- navigateToItem(e, navigatedItemIndexOffset[e.key]);
119
- }, [navigateToItem]);
120
- var handleNavigatingBack = function handleNavigatingBack(e) {
121
- if (e.key === 'Backspace') {
122
- var openedDirsLength = openedFolders.length;
123
- if (openedDirsLength) {
124
- var previousFolder = openedFolders[openedDirsLength - 2];
125
- if (previousFolder) {
126
- openFolderOnClick(previousFolder);
127
- }
128
- }
129
- }
130
- };
131
- useEffect(function () {
132
- if (itemsContainer !== null && itemsContainer !== void 0 && itemsContainer.current) {
133
- itemsContainer.current.scrollTo(0, 0);
134
- }
135
- }, [loading]);
136
- if (!loading && !hasItems) {
137
- return /*#__PURE__*/_jsx(EmptyViewPlaceholder, {
138
- useSearchAndFilterKeysIfApplied: false
139
- });
140
- }
141
- return /*#__PURE__*/_jsx(Styled.BrowserBody, {
142
- isList: isList,
143
- role: "modal-for-3rd-party-data",
144
- className: "filerobot-ProviderBrowser-body",
145
- children: /*#__PURE__*/_jsx("div", {
146
- className: "filerobot-ProviderBrowser-mainContent",
147
- children: /*#__PURE__*/_jsx(StyledProviderViews.ProviderBrowserList, {
148
- className: "filerobot-ProviderBrowser-list",
149
- onClick: function onClick() {
150
- return handleViewReset === null || handleViewReset === void 0 ? void 0 : handleViewReset();
151
- },
152
- role: "listbox"
153
- // making <ul> not focusable for firefox
154
- ,
155
- tabIndex: "-1",
156
- ref: itemsContainer,
157
- onKeyDown: handleNavigatingBack,
158
- children: /*#__PURE__*/_jsx(List, {
159
- className: "filerobot-ProviderBrowserItem",
160
- handleNavigatingThroughArrows: handleNavigatingThroughArrows,
161
- openFolderOnClick: openFolderOnClick,
162
- hasFolders: hasFolders,
163
- hasFiles: hasFiles,
164
- currentViewedFolders: folders,
165
- currentViewedFiles: files,
166
- handleContextMenuToggle: ignoreEvent
167
- })
168
- })
169
- })
170
- });
171
- };
172
- export default Items;
@@ -1,25 +0,0 @@
1
- import { Button } from '@scaleflex/ui/core';
2
- import Styled from './SearchProviderBrowser.styled';
3
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
- var FooterActionBar = function FooterActionBar(_ref) {
5
- var cancel = _ref.cancel,
6
- done = _ref.done,
7
- i18n = _ref.i18n,
8
- selected = _ref.selected;
9
- return /*#__PURE__*/_jsxs(Styled.FooterWrapper, {
10
- children: [/*#__PURE__*/_jsx(Button, {
11
- onClick: cancel,
12
- type: "button",
13
- color: "basic",
14
- children: i18n('unsplashCancelButton')
15
- }), /*#__PURE__*/_jsx(Button, {
16
- color: "primary",
17
- size: "md",
18
- onClick: done,
19
- children: i18n('unsplashSelectButton', {
20
- smart_count: selected
21
- })
22
- })]
23
- });
24
- };
25
- export default FooterActionBar;