@scaleflex/widget-explorer 4.4.0 → 4.5.1

package/lib/components/BulkEditPanel/components/AssetsList/Columns/FileTagField.js

@@ -0,0 +1,228 @@
+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 _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 _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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useDebounce } from '@scaleflex/widget-common/lib/hooks';
+import { updateUploadInfoMetaTags } from '@scaleflex/widget-core/lib/slices/uploads.slice';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import handleError from '@scaleflex/widget-utils/lib/handleError';
+import { useExplorer } from '../../../../../hooks';
+import { adaptFileTags, generateTabI18nKey, tagFilterFn, splitTagsToAdaptedAndSuggested } from '../../Tabs/tabs.utils';
+import StyledAssetsList from '../AssetsList.styled';
+import TagsField from './TagsField';
+import { selectActiveRegionalLang } from '../../../../../slices/metadata.slice';
+import { updateFileTags } from '../../../../../slices/files.slice';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FileTagField = function FileTagField(_ref) {
+  var isAddingTags = _ref.isAddingTags,
+    file = _ref.file,
+    isOnUpload = _ref.isOnUpload;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    info = _useExplorer.info,
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts$con = _useExplorer.opts.config,
+    _useExplorer$opts$con2 = _useExplorer$opts$con === void 0 ? {} : _useExplorer$opts$con,
+    _useExplorer$opts$con3 = _useExplorer$opts$con2.tagging,
+    _useExplorer$opts$con4 = _useExplorer$opts$con3.suggestionList,
+    allTags = _useExplorer$opts$con4 === void 0 ? [] : _useExplorer$opts$con4,
+    suggestedTagsOnly = _useExplorer$opts$con3.suggestedTagsOnly;
+  var currentLanguage = useSelector(selectActiveRegionalLang);
+  var fileTags = useMemo(function () {
+    var _file$tags;
+    return ((_file$tags = file.tags) === null || _file$tags === void 0 ? void 0 : _file$tags[currentLanguage]) || [];
+  }, [file, currentLanguage]);
+  var fileAdaptedTags = useMemo(function () {
+    return adaptFileTags(fileTags, currentLanguage);
+  }, [fileTags, currentLanguage]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTagsPaperOpen = _useState2[0],
+    setIsTagsPaperOpen = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchTerm = _useState4[0],
+    setSearchTerm = _useState4[1];
+  var _useState5 = useState(fileAdaptedTags),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tagsValue = _useState6[0],
+    _setTagsValue = _useState6[1];
+  var debouncedSearchValue = useDebounce(searchTerm, 150);
+  var tagsInputRef = useRef();
+  var tagsValueRef = useRef(tagsValue);
+  var fileTagsRef = useRef(fileTags);
+  var currentLanguageRef = useRef(currentLanguage);
+  var setTagsValue = function setTagsValue(data) {
+    tagsValueRef.current = data;
+    _setTagsValue(data);
+  };
+  var _useMemo = useMemo(function () {
+      return splitTagsToAdaptedAndSuggested(allTags, currentLanguage, tagFilterFn, debouncedSearchValue, tagsValue);
+    }, [allTags, currentLanguage, tagsValue, debouncedSearchValue]),
+    adaptedAllTags = _useMemo.adaptedAllTags,
+    suggestedTags = _useMemo.suggestedTags;
+  var allAndSuggestedTags = [].concat(_toConsumableArray(adaptedAllTags), _toConsumableArray(suggestedTags));
+  var focusTagsInput = function focusTagsInput() {
+    var tagsContainerEl = tagsInputRef.current;
+    if (tagsContainerEl) {
+      var tagsInput = tagsContainerEl.querySelector('input');
+      tagsInput === null || tagsInput === void 0 ? void 0 : tagsInput.focus();
+      setIsTagsPaperOpen(true);
+    }
+  };
+  var handleAddTag = useCallback(function (tagLabel) {
+    var targetTag = allAndSuggestedTags.find(function (_ref2) {
+      var label = _ref2.label;
+      return new RegExp(tagLabel.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'i').test(label);
+    });
+    focusTagsInput();
+    setSearchTerm('');
+    if (targetTag && suggestedTagsOnly) {
+      var nextTags = [].concat(_toConsumableArray(tagsValue), [targetTag]);
+      setTagsValue(nextTags);
+      return;
+    }
+    if (tagLabel.length >= 3 && !suggestedTagsOnly) {
+      var newTag = {
+        label: tagLabel,
+        sid: null
+      };
+      var _nextTags = [].concat(_toConsumableArray(tagsValue), [newTag]);
+      setTagsValue(_nextTags);
+    }
+  }, [tagsValue, allAndSuggestedTags]);
+  var handleRemoveTag = useCallback(function (tagIndex) {
+    var nextTags = _toConsumableArray(tagsValue);
+    nextTags.splice(tagIndex, 1);
+    focusTagsInput();
+    setTagsValue(nextTags);
+  }, [tagsValue]);
+  var handleClearTags = function handleClearTags() {
+    focusTagsInput();
+    setTagsValue([]);
+  };
+  var onSaveSuccessfully = function onSaveSuccessfully(newFile) {
+    info(i18n(generateTabI18nKey('successfullyInfo'), {
+      count: 1
+    }), 'success', 3000);
+    if (newFile) {
+      var _newFile$tags;
+      var newfileTags = ((_newFile$tags = newFile.tags) === null || _newFile$tags === void 0 ? void 0 : _newFile$tags[currentLanguage]) || [];
+      setTagsValue(adaptFileTags(newfileTags, currentLanguage));
+    }
+  };
+  var saveTags = function saveTags(existingTagsBySid, newTagsByLabel) {
+    handlePromise(dispatch(updateFileTags({
+      uuid: file.uuid,
+      languageKey: currentLanguageRef.current,
+      existingTags: existingTagsBySid,
+      newTags: newTagsByLabel
+    })), onSaveSuccessfully, function (error) {
+      setTagsValue(adaptFileTags(fileTagsRef.current, currentLanguage));
+      handleError(error, info);
+    });
+  };
+  var saveTagsLocally = function saveTagsLocally(existingTagsByLabel, newTagsByLabel) {
+    try {
+      var uniqueTags = _toConsumableArray(new Set([].concat(_toConsumableArray(existingTagsByLabel), _toConsumableArray(newTagsByLabel)))).map(function (label) {
+        return {
+          label: label,
+          sid: null
+        };
+      });
+      dispatch(updateUploadInfoMetaTags({
+        filesIds: [file.id],
+        tags: _defineProperty({}, currentLanguage, uniqueTags),
+        tagsForceUpdate: true
+      }));
+      onSaveSuccessfully();
+    } catch (error) {
+      handleError(error, info);
+    }
+  };
+  var handleTagsSubmit = function handleTagsSubmit() {
+    var availableTagSids = tagsValueRef.current.map(function (_ref3) {
+      var sid = _ref3.sid;
+      return sid;
+    });
+    var existingTags = fileTagsRef.current.filter(function (fileTag) {
+      return availableTagSids.includes(fileTag.sid);
+    });
+    var existingTagsByLabel = existingTags.map(function (_ref4) {
+      var label = _ref4.label;
+      return label;
+    });
+    var existingTagsBySid = existingTags.map(function (_ref5) {
+      var sid = _ref5.sid;
+      return sid;
+    });
+    var newTagsByLabel = tagsValueRef.current.filter(function (_ref6) {
+      var label = _ref6.label;
+      return !existingTagsByLabel.includes(label);
+    }).map(function (_ref7) {
+      var label = _ref7.label;
+      return label;
+    });
+    var isTagsChanged = JSON.stringify(fileTagsRef.current.map(function (_ref8) {
+      var label = _ref8.label;
+      return label;
+    }).sort()) !== JSON.stringify(tagsValueRef.current.map(function (_ref9) {
+      var label = _ref9.label;
+      return label;
+    }).sort());
+    if (!isTagsChanged) return;
+    if (isOnUpload) {
+      saveTagsLocally(existingTagsByLabel, newTagsByLabel);
+    } else {
+      saveTags(existingTagsBySid, newTagsByLabel);
+    }
+  };
+  useEffect(function () {
+    fileTagsRef.current = fileTags;
+    var adaptedFileTags = adaptFileTags(fileTags, currentLanguage);
+    setTagsValue(adaptedFileTags);
+  }, [fileTags]);
+  useEffect(function () {
+    currentLanguageRef.current = currentLanguage;
+    setTagsValue(adaptFileTags(fileTags, currentLanguage));
+    setSearchTerm('');
+  }, [currentLanguage]);
+  return /*#__PURE__*/_jsx(StyledAssetsList.TableCell, {
+    children: /*#__PURE__*/_jsx(StyledAssetsList.TagFieldWrapper, {
+      children: /*#__PURE__*/_jsx(TagsField, {
+        defaultTagStyle: true,
+        isAdding: isAddingTags,
+        tagsValue: tagsValue,
+        allTags: adaptedAllTags,
+        suggestedTags: suggestedTags,
+        isTagsPaperOpen: isTagsPaperOpen,
+        searchTerm: searchTerm,
+        tagsInputRef: tagsInputRef,
+        fieldId: file.uuid,
+        addedOrRemovedLength: Math.abs(tagsValue.length - fileAdaptedTags.length),
+        disabled: file.loading,
+        loading: file.loading,
+        clickOutSideHandler: handleTagsSubmit,
+        setIsTagsPaperOpen: setIsTagsPaperOpen,
+        handleAddTag: handleAddTag,
+        handleRemoveTag: handleRemoveTag,
+        handleClearTags: handleClearTags,
+        setSearchTerm: setSearchTerm,
+        debouncedSearchValue: debouncedSearchValue
+      })
+    })
+  });
+};
+export default FileTagField;

package/lib/components/BulkEditPanel/components/AssetsList/Columns/FileTextField.js

@@ -0,0 +1,107 @@
+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 { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Success } from '@scaleflex/icons';
+import { updateUploadInfoMetaTags } from '@scaleflex/widget-core/lib/slices/uploads.slice';
+import { BULK_EDIT_GENERAL_IDS } from '@scaleflex/widget-utils/lib/constants';
+import handleError from '@scaleflex/widget-utils/lib/handleError';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import { updateFileMeta } from '../../../../../slices/files.slice';
+import { useExplorer } from '../../../../../hooks';
+import { generateTabI18nKey } from '../../Tabs/tabs.utils';
+import StyledAssetsList from '../AssetsList.styled';
+import Styled from './Columns.styled';
+import { TEXT_FIELDS } from '../../Tabs/tabs.constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FileTextField = function FileTextField(_ref) {
+  var file = _ref.file,
+    textValue = _ref.textValue,
+    currentLanguage = _ref.currentLanguage,
+    activeSidebarKey = _ref.activeSidebarKey,
+    isOnUpload = _ref.isOnUpload;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    info = _useExplorer.info,
+    i18n = _useExplorer.i18n;
+  var _useState = useState(textValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    fieldValue = _useState2[0],
+    setFieldValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isSubmitting = _useState4[0],
+    setIsSubmitting = _useState4[1];
+  var isDesc = activeSidebarKey === BULK_EDIT_GENERAL_IDS.DESCRIPTION.toLowerCase();
+  var handleChangeFieldValue = function handleChangeFieldValue(_ref2) {
+    var value = _ref2.target.value;
+    setFieldValue(value);
+  };
+  var onSaveSuccessfully = function onSaveSuccessfully() {
+    setIsSubmitting(false);
+    info(i18n(generateTabI18nKey('successfullyInfo'), {
+      count: 1
+    }), 'success', 3000);
+  };
+  var handleSubmitLocally = function handleSubmitLocally() {
+    try {
+      var changes = _defineProperty({}, activeSidebarKey, currentLanguage ? _objectSpread(_objectSpread(_objectSpread({}, file[activeSidebarKey] || {}), file.meta[activeSidebarKey]), {}, _defineProperty({}, currentLanguage, fieldValue)) : fieldValue);
+      dispatch(updateUploadInfoMetaTags({
+        filesIds: [file.uuid],
+        meta: changes
+      }));
+      onSaveSuccessfully();
+    } catch (error) {
+      setIsSubmitting(false);
+      handleError(error, info);
+    }
+  };
+  var handleSubmit = function handleSubmit() {
+    var changedTextField = isDesc ? TEXT_FIELDS.DESCRIPTION : TEXT_FIELDS.TITLE;
+    var changes = currentLanguage ? _objectSpread(_objectSpread({}, file.meta[changedTextField]), {}, _defineProperty({}, currentLanguage, fieldValue)) : fieldValue;
+    var updatedFile = _objectSpread(_objectSpread({}, file), {}, {
+      meta: _objectSpread(_objectSpread({}, file.meta || {}), {}, _defineProperty({}, changedTextField, changes))
+    });
+    handlePromise(dispatch(updateFileMeta({
+      uuid: file.uuid,
+      meta: updatedFile.meta
+    })), onSaveSuccessfully, info);
+  };
+  var handleSubmitFieldValue = function handleSubmitFieldValue() {
+    if (textValue === fieldValue) return;
+    setIsSubmitting(true);
+    if (isOnUpload) handleSubmitLocally();else handleSubmit();
+  };
+  useEffect(function () {
+    setFieldValue(textValue);
+  }, [activeSidebarKey, textValue]);
+  return /*#__PURE__*/_jsx(StyledAssetsList.TableCell, {
+    children: /*#__PURE__*/_jsx(Styled.TextInput, {
+      value: fieldValue || '',
+      disabled: isSubmitting,
+      type: isDesc ? 'textarea' : 'input',
+      TextareaProps: {
+        rows: 3,
+        onBlur: handleSubmitFieldValue
+      },
+      onChange: handleChangeFieldValue,
+      onBlur: handleSubmitFieldValue,
+      hideCopyIcon: false,
+      copyTextMessage: i18n('mutualizedCopyLink'),
+      copySuccessIcon: /*#__PURE__*/_jsx(Success, {
+        size: 16
+      })
+    })
+  });
+};
+export default FileTextField;

package/lib/components/BulkEditPanel/components/AssetsList/Columns/MetadataColumn.js

@@ -0,0 +1,142 @@
+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 { useDebounce } from '@scaleflex/widget-common/lib/hooks';
+import { useExplorer } from '../../../../../hooks';
+import StyledAssetsList from '../AssetsList.styled';
+import { adaptFieldNewValue, adaptFieldOldValue, checkHasValue } from './columns.utils';
+import Styled from './Columns.styled';
+import FileMetadataField from './FileMetadataField';
+import { OPERATIONS, TEXT_FIELDS_TYPES } from '../../Tabs/tabs.constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var MetadataColumn = function MetadataColumn(_ref) {
+  var _file$meta;
+  var _ref$activeSidebarIte = _ref.activeSidebarItem,
+    activeSidebarItem = _ref$activeSidebarIte === void 0 ? {} : _ref$activeSidebarIte,
+    _ref$file = _ref.file,
+    file = _ref$file === void 0 ? {} : _ref$file,
+    isOnUpload = _ref.isOnUpload,
+    _ref$changedMetadataF = _ref.changedMetadataFields,
+    changedMetadataFields = _ref$changedMetadataF === void 0 ? [] : _ref$changedMetadataF,
+    _ref$tabSelectedAsset = _ref.tabSelectedAssets,
+    tabSelectedAssets = _ref$tabSelectedAsset === void 0 ? [] : _ref$tabSelectedAsset,
+    activeMetadataValue = _ref.activeMetadataValue,
+    fileCustomMetadataGroups = _ref.fileCustomMetadataGroups,
+    metadataEmptyAssetsValues = _ref.metadataEmptyAssetsValues,
+    fetchedFiles = _ref.fetchedFiles,
+    setFetchedFiles = _ref.setFetchedFiles;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditMode = _useState2[0],
+    setIsEditMode = _useState2[1];
+  var currentFetchedFile = useMemo(function () {
+    return fetchedFiles.find(function (_ref2) {
+      var uuid = _ref2.uuid;
+      return uuid === file.uuid;
+    });
+  }, [fetchedFiles, file]);
+  var fileMetadata = (_file$meta = file.meta) === null || _file$meta === void 0 ? void 0 : _file$meta[activeSidebarItem.key];
+  var changedMetadataField = changedMetadataFields.find(function (_ref3) {
+    var uuid = _ref3.uuid;
+    return uuid === activeSidebarItem.uuid;
+  }) || {};
+  var isSelectedAsset = tabSelectedAssets.includes(file.uuid);
+  var operator = changedMetadataField === null || changedMetadataField === void 0 ? void 0 : changedMetadataField.operator;
+  var isDeleteOperator = operator === OPERATIONS.DELETE;
+  var adaptedOldFieldValue = adaptFieldOldValue({
+    value: fileMetadata,
+    activeSidebarItem: activeSidebarItem,
+    activeLanguage: activeMetadataValue
+  });
+  var adaptedNewFieldValue = useMemo(function () {
+    return adaptFieldNewValue({
+      oldValue: fileMetadata,
+      value: changedMetadataField.value,
+      activeSidebarItem: activeSidebarItem,
+      activeLanguage: activeMetadataValue,
+      operator: operator
+    });
+  }, [fileMetadata, changedMetadataField.value, activeSidebarItem, activeMetadataValue, operator]);
+  var debouncedAdaptedNewFieldValue = useDebounce(adaptedNewFieldValue, 250);
+  var isTextField = TEXT_FIELDS_TYPES.includes(changedMetadataField.type);
+  var value = isTextField ? debouncedAdaptedNewFieldValue : adaptedNewFieldValue;
+  var hasPrevValue = checkHasValue({
+    value: adaptedOldFieldValue,
+    type: activeSidebarItem.type,
+    activeLanguage: activeMetadataValue
+  });
+  var hasNewValue = checkHasValue({
+    value: adaptedNewFieldValue,
+    type: activeSidebarItem.type,
+    activeLanguage: activeMetadataValue
+  });
+  var hasDeleteValue = hasNewValue && isDeleteOperator;
+  var isEmpty = !hasPrevValue && !hasNewValue && !hasDeleteValue || !isSelectedAsset && !hasPrevValue;
+  var renderChips = function renderChips(value, isAdded) {
+    var TagElement = isAdded ? Styled.AddedTag : Styled.ExistTag;
+    var replace = operator === OPERATIONS.SET;
+    if (Array.isArray(value)) {
+      return value.map(function (adaptedFieldValue, index) {
+        return /*#__PURE__*/_jsx(TagElement, {
+          title: adaptedFieldValue,
+          hasNewValue: hasNewValue || hasDeleteValue,
+          replace: replace,
+          remove: isDeleteOperator && (adaptedNewFieldValue || []).includes(adaptedFieldValue),
+          children: adaptedFieldValue
+        }, "".concat(adaptedFieldValue).concat(index));
+      });
+    }
+    if (value !== null && value !== void 0 && value.translatable) {
+      return /*#__PURE__*/_jsx(TagElement, {
+        title: i18n(value.label18nKey),
+        hasNewValue: hasNewValue,
+        children: i18n(value.label18nKey)
+      });
+    }
+    return /*#__PURE__*/_jsx(TagElement, {
+      title: value,
+      hasNewValue: hasNewValue,
+      replace: replace,
+      children: value
+    });
+  };
+  if (!hasNewValue && !hasDeleteValue) {
+    var oldTags = renderChips(adaptedOldFieldValue);
+    return /*#__PURE__*/_jsx(StyledAssetsList.TableCell, {
+      children: /*#__PURE__*/_jsx(Styled.ExtraTagsWrapper, {
+        $isOpen: isEditMode,
+        children: /*#__PURE__*/_jsx(FileMetadataField, {
+          file: file,
+          hasPrevValue: hasPrevValue,
+          currentFetchedFile: currentFetchedFile,
+          isOnUpload: isOnUpload,
+          fileMetadata: fileMetadata,
+          fileCustomMetadataGroups: fileCustomMetadataGroups,
+          activeSidebarItem: activeSidebarItem,
+          activeMetadataValue: activeMetadataValue,
+          changedMetadataField: changedMetadataField,
+          metadataEmptyAssetsValues: metadataEmptyAssetsValues,
+          fetchedFiles: fetchedFiles,
+          setFetchedFiles: setFetchedFiles,
+          oldTags: oldTags,
+          isEditMode: isEditMode,
+          setIsEditMode: setIsEditMode
+        }, activeSidebarItem === null || activeSidebarItem === void 0 ? void 0 : activeSidebarItem.key)
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(StyledAssetsList.TableCell, {
+    children: /*#__PURE__*/_jsxs(Styled.TagsWrapper, {
+      children: [hasPrevValue && renderChips(adaptedOldFieldValue), !isDeleteOperator && hasNewValue && isSelectedAsset && renderChips(value, true), isEmpty && /*#__PURE__*/_jsx(Styled.EmptyValuePlaceholder, {
+        children: "-"
+      })]
+    })
+  });
+};
+export default MetadataColumn;

package/lib/components/BulkEditPanel/components/AssetsList/Columns/TableRow.js

@@ -0,0 +1,139 @@
+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 } from 'react';
+import AssetPreview from '@scaleflex/widget-common/lib/AssetPreview';
+import { LAYOUTS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import _getItemIcon from '@scaleflex/widget-utils/lib/getItemIcon';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { EllipsedText } from '@scaleflex/ui/core';
+import { useExplorer } from '../../../../../hooks';
+import FileInfo from '../../../../FileItem/FileInfo';
+import { PREIVEW_MODAL_STATUS } from '../AssetsList.constants';
+import FloatyPreview from '../FloatyPreview';
+import Styled from '../AssetsList.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var TableRow = function TableRow(_ref) {
+  var file = _ref.file,
+    tabSelectedAssets = _ref.tabSelectedAssets,
+    handleSelectAsset = _ref.handleSelectAsset,
+    ActiveColumnElement = _ref.ActiveColumnElement,
+    activeSidebarItem = _ref.activeSidebarItem,
+    metadataEmptyAssetsValues = _ref.metadataEmptyAssetsValues,
+    changedMetadataFields = _ref.changedMetadataFields,
+    noImgTransformations = _ref.noImgTransformations,
+    tagsDetails = _ref.tagsDetails,
+    isOnUpload = _ref.isOnUpload,
+    activeMetadataValue = _ref.activeMetadataValue,
+    fileCustomMetadataGroups = _ref.fileCustomMetadataGroups,
+    fetchedFiles = _ref.fetchedFiles,
+    setFetchedFiles = _ref.setFetchedFiles,
+    textFieldsDetails = _ref.textFieldsDetails,
+    setTextFieldsDetails = _ref.setTextFieldsDetails;
+  var _useExplorer = useExplorer(),
+    isDevEnv = _useExplorer.isDevEnv,
+    handleRequestThumbnail = _useExplorer.handleRequestThumbnail,
+    handleCancelThumbnail = _useExplorer.handleCancelThumbnail;
+  var _useCore = useCore(),
+    container = _useCore.opts.container;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    previewAnchorEl = _useState2[0],
+    setPreviewAnchorEl = _useState2[1];
+  var _useState3 = useState(PREIVEW_MODAL_STATUS.CLOSE),
+    _useState4 = _slicedToArray(_useState3, 2),
+    previewStatus = _useState4[0],
+    setPreviewStatus = _useState4[1];
+  var handlePreviewMouseEnter = function handlePreviewMouseEnter(_ref2) {
+    var target = _ref2.target;
+    setPreviewAnchorEl(target);
+    setPreviewStatus(PREIVEW_MODAL_STATUS.OPEN);
+  };
+  var handlePreviewMouseLeave = function handlePreviewMouseLeave() {
+    setTimeout(function () {
+      setPreviewStatus(function (prevState) {
+        if (prevState !== PREIVEW_MODAL_STATUS.KEEP) {
+          return PREIVEW_MODAL_STATUS.CLOSE;
+        }
+        return prevState;
+      });
+    }, 50);
+  };
+  useEffect(function () {
+    if (!(file !== null && file !== void 0 && file.preview)) {
+      handleRequestThumbnail(file);
+    }
+    return function () {
+      if (!(file !== null && file !== void 0 && file.preview)) {
+        handleCancelThumbnail(file);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_jsxs(Styled.TableRow, {
+    children: [/*#__PURE__*/_jsx(Styled.TableCell, {
+      children: /*#__PURE__*/_jsxs(Styled.ActionCellWrapper, {
+        children: [/*#__PURE__*/_jsx(Styled.Checkbox, {
+          checked: tabSelectedAssets.includes(file.uuid),
+          onChange: function onChange(e) {
+            return handleSelectAsset(e, file);
+          }
+        }), /*#__PURE__*/_jsx(AssetPreview, {
+          file: file,
+          isDevEnv: isDevEnv,
+          lazyloading: true,
+          noImgTransformations: noImgTransformations || isOnUpload,
+          getItemIcon: function getItemIcon() {
+            return _getItemIcon({
+              fileOrFolder: file,
+              viewLayout: LAYOUTS_IDS.LIST
+            });
+          },
+          viewLayout: LAYOUTS_IDS.LIST,
+          onMouseEnter: handlePreviewMouseEnter,
+          onMouseLeave: handlePreviewMouseLeave,
+          container: container,
+          containerHeight: "100%",
+          isSmallSizePreview: true
+        }), /*#__PURE__*/_jsx(FloatyPreview, {
+          noImgTransformations: isOnUpload,
+          previewAnchorEl: previewAnchorEl,
+          file: file,
+          previewStatus: previewStatus,
+          setPreviewStatus: setPreviewStatus,
+          container: container
+        }), /*#__PURE__*/_jsx(Styled.FileName, {
+          children: /*#__PURE__*/_jsx(EllipsedText, {
+            maxLinesCount: 1,
+            children: file.name
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Styled.TableCell, {
+      children: /*#__PURE__*/_jsx(Styled.FileInfoWrapper, {
+        children: /*#__PURE__*/_jsx(FileInfo, {
+          file: file,
+          hideFileName: true,
+          isListView: true
+        })
+      })
+    }), ActiveColumnElement && /*#__PURE__*/_jsx(ActiveColumnElement, {
+      file: file,
+      tagsDetails: tagsDetails,
+      activeSidebarItem: activeSidebarItem,
+      changedMetadataFields: changedMetadataFields,
+      tabSelectedAssets: tabSelectedAssets,
+      activeMetadataValue: activeMetadataValue,
+      isOnUpload: isOnUpload,
+      fileCustomMetadataGroups: fileCustomMetadataGroups,
+      metadataEmptyAssetsValues: metadataEmptyAssetsValues,
+      fetchedFiles: fetchedFiles,
+      textFieldsDetails: textFieldsDetails,
+      setFetchedFiles: setFetchedFiles,
+      setTextFieldsDetails: setTextFieldsDetails
+    })]
+  });
+};
+export default TableRow;