@scaleflex/widget-explorer 0.0.1

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/index.js

@@ -0,0 +1,431 @@
+var _excluded = ["variantUrl", "name"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _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; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState, useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Button, InputGroup } from '@scaleflex/ui/core';
+import { PC } from '@scaleflex/widget-common';
+import { Download, Lock, Rename } from '@scaleflex/icons';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import getFileNameAndExtension from '@scaleflex/widget-utils/lib/getFileNameAndExtension';
+import { useModal } from '@scaleflex/widget-core/lib/hooks';
+import { isVisibilityPublic } from '@scaleflex/widget-utils/lib/visibility';
+import getFileLink from '@scaleflex/widget-utils/lib/getFileLink';
+import isFunction from '@scaleflex/widget-utils/lib/isFunction';
+import cuid from 'cuid';
+import { useExplorer } from '../../../../hooks';
+import StyledVariants from './Variations.styled';
+import VariationsSearch from './VariationsSearch';
+import { createRemovedBackgroundVariantObject } from './Variations.utils';
+import { addNewVariant, deleteVariant, editVariant, getVariants } from './Variations.thunks';
+import { fetchFileByUuid, filesVariationsUpdated, fileUpdated, selectFilesVariations } from '../../../../slices/files.slice';
+import { useTransformedDownloadModal } from '../../../Modals/TransformedDownload';
+import VariationsContent from './VariationsContent';
+import VariationsSkeleton from './VariationsSkeleton';
+import ErroredViewPlaceholder from '../../../Views/ErroredViewPlaceholder';
+import UrlBuilderModal from '../../../UrlBuilderModal';
+import getQueryStringFromUrl from '../../../../utils/getQueryStringFromUrl';
+import { VARIATIONS_TAB_IDS } from './Variations.constants';
+import { selectPresets } from '../../../../slices/metadata.slice';
+import VariationsTabNavigator from './VariationsTabNavigator';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var _isUnMounting = false;
+var extractVariantQuery = function extractVariantQuery(variantUrl) {
+  return variantUrl.substr(variantUrl.indexOf('?') + 1);
+};
+var VariationsTab = function VariationsTab(_ref) {
+  var originalFile = _ref.originalFile,
+    previewedFile = _ref.previewedFile,
+    setPreviewedFile = _ref.setPreviewedFile,
+    activeVariationsTabId = _ref.activeVariationsTabId,
+    setActiveVariationsTabId = _ref.setActiveVariationsTabId;
+  var dispatch = useDispatch();
+  var toggleModal = useModal();
+  var theme = useTheme();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    info = _useExplorer.info,
+    hideDownloadVariationsOption = _useExplorer.opts.hideDownloadVariationsOption;
+  var triggerTransformedDownloadModal = useTransformedDownloadModal();
+  var displayedFileVariant = useSelector(selectFilesVariations);
+  var presets = useSelector(selectPresets);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchQuery = _useState4[0],
+    setSearchQuery = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    originalVariants = _useState6[0],
+    setOriginalVariants = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showUrlBuilderModal = _useState8[0],
+    setShowUrlBuilderModal = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    queryString = _useState10[0],
+    setQueryString = _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectedVariant = _useState12[0],
+    setSelectedVariant = _useState12[1];
+  var url = getFileLink(originalFile, 'cdn');
+  var isAutomaticTabActive = activeVariationsTabId === VARIATIONS_TAB_IDS.AUTOMATIC;
+  var customVariants = useMemo(function () {
+    return originalVariants.filter(function (variant) {
+      return !presets.includes(variant.name) && !variant.bgRemoved;
+    });
+  }, [originalVariants, presets]);
+  var presetsVariants = useMemo(function () {
+    var presetMappedVariants = presets.map(function (preset) {
+      return {
+        url: "".concat(url, "&p=").concat(preset),
+        name: preset,
+        uuid: cuid()
+      };
+    });
+    var bgRemovedVariants = originalVariants.filter(function (variant) {
+      return variant.bgRemoved && !presets.includes(variant.name);
+    });
+    return [].concat(_toConsumableArray(bgRemovedVariants), _toConsumableArray(presetMappedVariants));
+  }, [url, presets, originalVariants]);
+  var nextVariants = isAutomaticTabActive ? presetsVariants : customVariants;
+  var searchedVariants = useMemo(function () {
+    if (!searchQuery) {
+      return nextVariants;
+    }
+    var loweredCaseValue = searchQuery.toLowerCase();
+    return nextVariants.filter(function (variant) {
+      return variant.name.toLowerCase().includes(loweredCaseValue);
+    });
+  }, [searchQuery, originalVariants, nextVariants]);
+  var triggerVariantRequest = function triggerVariantRequest(requestPromise, successFn) {
+    setIsLoading(true);
+    return handlePromise(requestPromise, function () {
+      if (_isUnMounting) {
+        return;
+      }
+      successFn.apply(void 0, arguments);
+    }, info, function () {
+      if (_isUnMounting) {
+        return;
+      }
+      setIsLoading(false);
+    });
+  };
+  var handleSavingNewVariant = function handleSavingNewVariant(_ref2) {
+    var variantUrl = _ref2.variantUrl,
+      name = _ref2.name,
+      moreProps = _objectWithoutProperties(_ref2, _excluded);
+    var _ref3 = moreProps || {},
+      onClose = _ref3.onClose;
+    if (isFunction(onClose)) {
+      onClose();
+    }
+    var _getFileNameAndExtens = getFileNameAndExtension(originalFile.name, originalFile.type),
+      extension = _getFileNameAndExtens.extension;
+    info(i18n('explorerFileWindowVariationSavedInfo', 3000));
+    var newVariantData = {
+      name: name,
+      url: variantUrl,
+      query: extractVariantQuery(variantUrl),
+      extension: extension
+    };
+    triggerVariantRequest(dispatch(addNewVariant({
+      fileUuid: originalFile.uuid,
+      data: newVariantData
+    })), function (newVariant) {
+      info(i18n('explorerFileWindowVariationAddedInfo'), 'success');
+      dispatch(filesVariationsUpdated(newVariant));
+      setShowUrlBuilderModal(false);
+      setOriginalVariants([].concat(_toConsumableArray(originalVariants), [newVariant]));
+    }, setIsLoading);
+  };
+  var triggerAddVariantModal = function triggerAddVariantModal(variantUrl) {
+    var moreProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var _ref4 = moreProps || {},
+      ratioGroupKey = _ref4.ratioGroupKey,
+      ratioTitleKey = _ref4.ratioTitleKey;
+    var name = '';
+    if (ratioGroupKey && ratioTitleKey) {
+      name = "".concat(i18n(ratioGroupKey) || ratioGroupKey, " - ").concat(i18n(ratioTitleKey) || ratioTitleKey);
+    } else {
+      var _getFileNameAndExtens2 = getFileNameAndExtension(originalFile.name),
+        existingName = _getFileNameAndExtens2.name;
+      name = "".concat(existingName, " (").concat((customVariants.length || 1) + 1, ")");
+    }
+    var updateName = function updateName(e, setPrimaryButtonDisabled, updateData) {
+      var error = '';
+      var newName = e.target.value;
+      var isExistingName = presets.includes(newName) || customVariants.some(function (variant) {
+        return variant.name === newName;
+      });
+      name = newName;
+      if (!newName) {
+        error = i18n('mutualizedFieldRequired');
+      } else if (isExistingName) {
+        error = i18n('explorerFileWindowVariationsNameExistsError');
+      }
+      setPrimaryButtonDisabled(Boolean(error) || !newName || isExistingName);
+      updateData({
+        name: name,
+        error: error
+      });
+    };
+    var variantNameInputId = 'filerobotVariantNameModalInput';
+    toggleModal({
+      icon: /*#__PURE__*/_jsx(Rename, {
+        size: 29,
+        color: theme.palette[PC.AccentPrimary]
+      }),
+      showTitleLabel: true,
+      title: i18n('explorerFileWindowAddVariationTitle'),
+      content: function content(_ref5) {
+        var updateData = _ref5.updateData,
+          data = _ref5.data,
+          setPrimaryButtonDisabled = _ref5.setPrimaryButtonDisabled;
+        return /*#__PURE__*/_jsx(InputGroup, {
+          onChange: function onChange(e) {
+            return updateName(e, setPrimaryButtonDisabled, updateData);
+          },
+          error: Boolean(data.error),
+          hint: data.error,
+          label: "".concat(i18n('mutualizedNameFieldLabel'), " *"),
+          value: name || data.name || '',
+          fullWidth: true,
+          focusOnMount: true
+        });
+      },
+      onButtonPrimaryClick: function onButtonPrimaryClick() {
+        return handleSavingNewVariant(_objectSpread({
+          variantUrl: variantUrl,
+          name: name
+        }, moreProps));
+      },
+      inputToFocus: variantNameInputId,
+      enterKeySubmits: true,
+      modalStyle: {
+        width: 450,
+        maxWidth: 'none'
+      },
+      rootModalStyles: {
+        zIndex: 1500
+      },
+      modalBodyStyle: {
+        textAlign: 'center',
+        padding: '12px 32px'
+      },
+      modalFooterStyle: {
+        flexDirection: 'row',
+        padding: '12px 32px 32px 32px'
+      },
+      primaryTitleStyle: {
+        textAlign: 'center'
+      },
+      modalSecondaryButtonColor: 'basic',
+      contentStyle: {
+        textAlign: 'center'
+      },
+      modalPrimaryButton: {
+        width: 187
+      },
+      modalSecondaryButton: {
+        width: 187
+      },
+      inlineActionButtons: true
+    });
+  };
+  var addNewVariantFile = function addNewVariantFile() {
+    if (originalFile.uuid !== previewedFile.uuid) {
+      return;
+    }
+    setQueryString('');
+    setShowUrlBuilderModal(true);
+  };
+  var downloadAllVariants = function downloadAllVariants() {
+    var variantsWithExtensions = searchedVariants.map(function (variant) {
+      var _ref6, _variant$info, _variant$info2;
+      return _objectSpread(_objectSpread({}, variant), {}, {
+        extension: variant.bgRemoved ? 'png' : getFileNameAndExtension(variant.name).extension || ((_ref6 = ((_variant$info = variant.info) === null || _variant$info === void 0 ? void 0 : _variant$info.ext) || ((_variant$info2 = variant.info) === null || _variant$info2 === void 0 ? void 0 : _variant$info2.img_type)) === null || _ref6 === void 0 ? void 0 : _ref6.toLowerCase())
+      });
+    });
+    triggerTransformedDownloadModal(variantsWithExtensions, {
+      isVariant: true,
+      hideResizeCropOptions: true
+    });
+  };
+  var submitVariantEdit = function submitVariantEdit(data) {
+    toggleModal(null);
+    triggerVariantRequest(dispatch(editVariant({
+      fileUuid: originalFile.uuid,
+      data: data
+    })), function (updatedVariant) {
+      setOriginalVariants(originalVariants.map(function (variant) {
+        return variant.uuid === data.uuid ? updatedVariant : variant;
+      }));
+      dispatch(filesVariationsUpdated(updatedVariant));
+      info(i18n('mutualizedVariantUpdatedInfo'), 'success');
+    });
+  };
+  var editVariantFile = function editVariantFile(variant) {
+    // order here is important as we must use the preview url if exists
+    var variantUrl = variant.preview || (_typeof(variant.url) === 'object' ? variant.url.cdn : variant.url);
+    var queryString = getQueryStringFromUrl(variantUrl);
+    setQueryString(queryString);
+    setShowUrlBuilderModal(true);
+  };
+  var deleteVariantFile = function deleteVariantFile(variantUuid) {
+    toggleModal(null);
+    if (variantUuid === originalFile.uuid) {
+      info(i18n('variantDeleteOriginalError'));
+      return;
+    }
+    triggerVariantRequest(dispatch(deleteVariant({
+      fileUuid: originalFile.uuid,
+      variantUuid: variantUuid
+    })), function (_) {
+      setOriginalVariants(originalVariants.filter(function (variant) {
+        return variant.uuid !== variantUuid;
+      }));
+      info(i18n('explorerFileWindowDeletePopupText'), 'success');
+      dispatch(filesVariationsUpdated(originalFile));
+    });
+  };
+  useEffect(function () {
+    _isUnMounting = false;
+    var mainFile = previewedFile || displayedFileVariant || originalFile;
+    if (previewedFile.uuid) {
+      triggerVariantRequest(dispatch(getVariants(previewedFile.uuid)), function (loadedVariants) {
+        var mainVariants = [mainFile];
+        if (mainFile.info.remove_background) {
+          mainVariants.push(createRemovedBackgroundVariantObject(mainFile));
+        }
+        setOriginalVariants([].concat(mainVariants, _toConsumableArray(loadedVariants)));
+        dispatch(filesVariationsUpdated(mainVariants[0]));
+      }, setIsLoading);
+    }
+    if (mainFile.removedBackground && !mainFile.info.remove_background) {
+      triggerVariantRequest(dispatch(fetchFileByUuid(originalFile.uuid)), function (updatedFile) {
+        var originalVariantsWithRemovedBg = [mainFile];
+        if (updatedFile.info.remove_background) {
+          originalVariantsWithRemovedBg.push(createRemovedBackgroundVariantObject(updatedFile));
+          setOriginalVariants(originalVariantsWithRemovedBg);
+        }
+        dispatch(fileUpdated({
+          info: _objectSpread(_objectSpread({}, originalFile.info), {}, {
+            remove_background: updatedFile.info.remove_background
+          })
+        }));
+      }, setIsLoading);
+    }
+    return function () {
+      dispatch(filesVariationsUpdated({}));
+      _isUnMounting = true;
+    };
+  }, [previewedFile.uuid]);
+  useEffect(function () {
+    setSearchQuery('');
+  }, [originalVariants]);
+  useEffect(function () {
+    var nextActiveTabId = presetsVariants.length === 0 || activeVariationsTabId === VARIATIONS_TAB_IDS.MANUAL ? VARIATIONS_TAB_IDS.MANUAL : VARIATIONS_TAB_IDS.AUTOMATIC;
+    setActiveVariationsTabId(nextActiveTabId);
+    return function () {
+      setActiveVariationsTabId(null);
+    };
+  }, [presetsVariants]);
+  if (isLoading) {
+    return /*#__PURE__*/_jsx(VariationsSkeleton, {
+      i18n: i18n,
+      activeTabId: activeVariationsTabId
+    });
+  }
+  var isPublicFile = isVisibilityPublic(originalFile === null || originalFile === void 0 ? void 0 : originalFile.visibility);
+  if (!isPublicFile) {
+    return /*#__PURE__*/_jsx(ErroredViewPlaceholder, {
+      icon: /*#__PURE__*/_jsx(Lock, {
+        size: 60
+      }),
+      title: i18n('explorerFileWindowVariationsTabDisabledTitle'),
+      description: i18n('explorerFileWindowVariationsTabDisabledDesc')
+    });
+  }
+  var currentVariantsCount = searchedVariants.length;
+  var originalVariantsCount = nextVariants.length;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(VariationsTabNavigator, {
+      i18n: i18n,
+      activeTabId: activeVariationsTabId,
+      setActiveTabId: setActiveVariationsTabId,
+      customVariants: customVariants,
+      presetsVariants: presetsVariants
+    }), /*#__PURE__*/_jsxs(StyledVariants.Actions, {
+      children: [/*#__PURE__*/_jsx(StyledVariants.Title, {
+        children: isAutomaticTabActive ? i18n('explorerFileWindowVariationsPresetsTabLabel') : i18n('explorerFileWindowVariationsCustomTabLabel')
+      }), !hideDownloadVariationsOption && originalVariantsCount > 1 && currentVariantsCount > 0 && /*#__PURE__*/_jsx(Button, {
+        badge: "(".concat(currentVariantsCount, ")"),
+        startIcon: /*#__PURE__*/_jsx(Download, {}),
+        size: "sm",
+        color: "link-primary",
+        onClick: downloadAllVariants,
+        disabled: currentVariantsCount === 0,
+        children: i18n('explorerFileWindowVariationsDownloadAllButton')
+      })]
+    }), /*#__PURE__*/_jsx(VariationsSearch, {
+      originalVariants: originalVariants || [],
+      setSearchQuery: setSearchQuery,
+      isAutomaticTabActive: isAutomaticTabActive
+    }), /*#__PURE__*/_jsx(VariationsContent, {
+      variants: searchedVariants,
+      originalFile: originalFile,
+      previewedFile: previewedFile,
+      displayedFileVariant: displayedFileVariant,
+      setPreviewedFile: setPreviewedFile,
+      addNewVariant: addNewVariantFile,
+      editVariantFile: editVariantFile,
+      editVariantName: submitVariantEdit,
+      setSelectedVariant: setSelectedVariant,
+      deleteVariant: deleteVariantFile,
+      searchQuery: searchQuery,
+      originalVariantsCount: originalVariantsCount,
+      isLoading: isLoading,
+      i18n: i18n,
+      activeTabId: activeVariationsTabId
+    }), /*#__PURE__*/_jsx(UrlBuilderModal, {
+      queryString: queryString,
+      showUrlBuilderModal: showUrlBuilderModal,
+      setShowUrlBuilderModal: setShowUrlBuilderModal,
+      originalFile: originalFile,
+      triggerAddVariantModal: triggerAddVariantModal,
+      headerTitle: i18n('explorerFileWindowAddVariationButton'),
+      actionButtonLabel: i18n('mutualizedSaveButton'),
+      urlTitle: i18n('explorerFileWindowVariationsUrlBuilderModalTitle'),
+      i18n: i18n,
+      selectedVariant: selectedVariant,
+      extractVariantQuery: extractVariantQuery,
+      submitVariantEdit: submitVariantEdit,
+      info: info
+    })]
+  });
+};
+export default VariationsTab;

package/lib/components/FileWindowPanel/FileTabs/index.js

@@ -0,0 +1,83 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useMemo, useState } from 'react';
+import { PLUGINS_IDS, FILE_WINDOW_TAB_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { useEditFileDetails, useExplorer } from '../../../hooks';
+import { TABS_COMPONENTS } from './FileTabs.constants';
+import Styled from './FileTabs.styled';
+import FileTabsList from './FileTabsList';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var FileTabs = function FileTabs(_ref) {
+  var _ref$originalFile = _ref.originalFile,
+    originalFile = _ref$originalFile === void 0 ? {} : _ref$originalFile,
+    _ref$previewedFile = _ref.previewedFile,
+    previewedFile = _ref$previewedFile === void 0 ? {} : _ref$previewedFile,
+    setPreviewedFile = _ref.setPreviewedFile,
+    activeTabId = _ref.activeTabId,
+    setActiveTabId = _ref.setActiveTabId,
+    isPreUpload = _ref.isPreUpload,
+    alertUnsavedChangesFirst = _ref.alertUnsavedChangesFirst,
+    hasUnsavedChangesRef = _ref.hasUnsavedChangesRef,
+    isVariantsOpened = _ref.isVariantsOpened,
+    activeVariationsTabId = _ref.activeVariationsTabId,
+    setActiveVariationsTabId = _ref.setActiveVariationsTabId;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    filerobot = _useExplorer.filerobot;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTabsHidden = _useState2[0],
+    setIsTabsHidden = _useState2[1];
+  var approvalPlugin = filerobot.getPlugin(PLUGINS_IDS.APPROVALS);
+  var editFileDetailsProps = useEditFileDetails({
+    file: originalFile,
+    useFileWindow: true,
+    customHasUnsavedChangesRef: hasUnsavedChangesRef
+  });
+  var ActiveTabComponent = useMemo(function () {
+    if (activeTabId === FILE_WINDOW_TAB_IDS.APPROVALS) {
+      return approvalPlugin === null || approvalPlugin === void 0 ? void 0 : approvalPlugin.render();
+    }
+    return TABS_COMPONENTS[activeTabId];
+  }, [activeTabId]);
+  var isFileLoading = originalFile.loading;
+  var commonProps = {
+    isPreUpload: isPreUpload,
+    originalFile: originalFile,
+    isFileLoading: isFileLoading,
+    alertUnsavedChangesFirst: alertUnsavedChangesFirst,
+    hasUnsavedChangesRef: hasUnsavedChangesRef,
+    setIsTabsHidden: setIsTabsHidden,
+    editFileDetailsProps: editFileDetailsProps
+  };
+  return /*#__PURE__*/_jsxs(Styled.Container, {
+    isCommentsTab: activeTabId === FILE_WINDOW_TAB_IDS.COMMENTS,
+    isVariantsOpened: isVariantsOpened,
+    showTabs: true,
+    children: [/*#__PURE__*/_jsx(FileTabsList, _objectSpread(_objectSpread({}, commonProps), {}, {
+      activeTabId: activeTabId,
+      setActiveTabId: setActiveTabId,
+      isTabsHidden: isTabsHidden
+    })), /*#__PURE__*/_jsx(Styled.ActiveTabWrapper, {
+      children: ActiveTabComponent && /*#__PURE__*/_jsx(ActiveTabComponent, _objectSpread(_objectSpread({}, commonProps), {}, {
+        i18n: i18n,
+        previewedFile: previewedFile,
+        setPreviewedFile: setPreviewedFile,
+        activeVariationsTabId: activeVariationsTabId,
+        setActiveVariationsTabId: setActiveVariationsTabId,
+        activeTabId: activeTabId
+      }))
+    })]
+  });
+};
+export default FileTabs;