Repository URL to install this package:
|
Version:
3.12.20 ▾
|
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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
import { useEffect, useMemo, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import ignoreEvent from '@filerobot/utils/lib/ignoreEvent';
import { PERMISSIONS } from '@filerobot/utils/lib/constants';
import { uploadUpdated } from '@filerobot/core/lib/slices/uploads.slice';
import handlePromise from '@filerobot/utils/lib/handlePromise';
import isFile from '@filerobot/utils/lib/isFile';
import isUploadableFile from '@filerobot/utils/lib/isUploadableFile';
import { Filerobot } from '@filerobot/core/lib';
import extractFileDataNoBlob from '@filerobot/utils/lib/extractFileDataNoBlob';
import truncateString from '../../../utils/truncateString';
import Styled from './FileInfo.styled';
import { itemRenameOpened, selectRenameItemFor } from '../../../slices/panels.slice';
import { renameFile } from '../../../slices/files.slice';
import { renameFolder } from '../../../slices/folders.slice';
import { useExplorer, useValidateFileRenaming } from '../../../hooks';
import { selectIsItemChecked } from '../../../slices/selections.slice';
// TODO: seems like it's used from both folders & files, then we need to change to more referrable naming, not file but (item).
import { jsx as _jsx } from "react/jsx-runtime";
var FileName = function FileName(_ref) {
var _item$info;
var item = _ref.file,
noTruncate = _ref.noTruncate,
containerWidth = _ref.containerWidth,
isListView = _ref.isListView,
renameOnDblClick = _ref.renameOnDblClick;
var dispatch = useDispatch();
var renameItemFor = useSelector(selectRenameItemFor);
var _useExplorer = useExplorer(),
i18n = _useExplorer.i18n,
info = _useExplorer.info,
checkUserPermissions = _useExplorer.checkUserPermissions;
var handleItemRenamingValidation = useValidateFileRenaming();
var stagedFileName = useRef(item.name);
var isFileType = isFile(item);
var isFileSelected = useSelector(function (state) {
return selectIsItemChecked(state, item.uuid);
});
var isLoading = item.loading;
var isUserPermittedToRename = useMemo(function () {
return checkUserPermissions([PERMISSIONS[isFileType ? 'FILE_RENAME' : 'FOLDER_RENAME']]);
}, [checkUserPermissions, isFileType]);
if (stagedFileName.current !== item.name) {
stagedFileName.current = item.name;
}
var isRenamingEnabled = isUserPermittedToRename && renameItemFor && renameItemFor === (item.uuid || item.id);
// Take up at most 2 lines on any screen
var maxNameLength;
// For very small mobile screens
if (containerWidth <= 352) {
maxNameLength = 35;
// For regular mobile screens
} else if (containerWidth <= 576) {
maxNameLength = 60;
// For desktops
} else {
maxNameLength = 30;
}
var fileName = item.name || (item === null || item === void 0 ? void 0 : (_item$info = item.info) === null || _item$info === void 0 ? void 0 : _item$info.name);
var handleMouseDown = function handleMouseDown(event) {
if (!isRenamingEnabled || isLoading || !isUserPermittedToRename || event.target.dataset.fileName === item.name) return;
event.target.value = stagedFileName.current;
handleRenaming(event.target.value);
};
var triggerRenaming = function triggerRenaming(newName) {
var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
beforeRequest = _ref2.beforeRequest;
if (typeof beforeRequest === 'function') {
beforeRequest();
}
// Before/Pre upload case, if the file has id property means it's uploadable item.
var isPreUpload = isUploadableFile(item);
if (isPreUpload && isFileType) {
var newFile = _objectSpread(_objectSpread({}, item), {}, {
data: Filerobot.uploadFilesData[item.id]
});
var fileRelativePath = newFile.data.relativePath;
var renamedFileData = new File([newFile.data], newName, {
type: newFile.data.type
});
newFile.name = newName;
newFile.data = extractFileDataNoBlob(renamedFileData);
newFile.data.relativePath = fileRelativePath; // for not losing it after changing the data object.
if (newFile.info) {
newFile.info = _objectSpread(_objectSpread({}, newFile.info), {}, {
name: newName
});
}
dispatch(uploadUpdated(newFile));
dispatch(itemRenameOpened(null));
// Updating the file data in Filerobot's static object that has all uploads [File] class instance.
Filerobot.uploadFilesData[item.id] = renamedFileData;
info(i18n('mutualizedRenamedSuccessfullyInfo'), 'success');
return;
}
var renameAction = isFileType ? renameFile({
uuid: item.uuid,
name: newName
}) : renameFolder({
uuid: item.uuid,
name: newName
});
handlePromise(dispatch(renameAction), function () {
return info(i18n('mutualizedRenamedSuccessfullyInfo'), 'success');
}, info, function () {
dispatch(itemRenameOpened(null));
});
};
var handleRenaming = function handleRenaming(newName) {
var oldName = item.name;
if (!newName || newName === oldName) {
dispatch(itemRenameOpened(null));
return;
}
if (isFileType) {
var renameValidation = handleItemRenamingValidation(oldName, newName, {
onChangeExtension: function onChangeExtension(handleCancellation) {
return triggerRenaming(newName, {
beforeRequest: function beforeRequest() {
return handleCancellation();
}
});
},
onKeepOldExtension: function onKeepOldExtension(newNameWithOldExtension, handleCancellation) {
if (newNameWithOldExtension !== oldName) {
triggerRenaming(newNameWithOldExtension, {
beforeRequest: function beforeRequest() {
return handleCancellation();
}
});
} else {
dispatch(itemRenameOpened(null));
handleCancellation();
}
}
});
if (!renameValidation.valid) {
return;
}
}
if (newName) {
triggerRenaming(newName);
} else if (newName === '') {
// 'else if' not 'else' Cuz maybe the user would cancel then we don't need to show the msg.
info(i18n('explorerInvalidNameInfo'));
}
};
var handleKeyUp = function handleKeyUp(event) {
if (!isUserPermittedToRename || isLoading) return;
event.stopPropagation();
event.preventDefault();
var eventKey = event.key.toLowerCase();
var newName = event.target.value;
if (eventKey === 'escape') {
dispatch(itemRenameOpened(null));
return;
}
stagedFileName.current = newName;
if (eventKey !== 'enter') {
return;
}
handleRenaming(newName);
};
var startRenameSecondClick = function startRenameSecondClick(event) {
if (!isUserPermittedToRename || event.detail !== 1 && !renameOnDblClick) return;
event.stopPropagation();
dispatch(itemRenameOpened(item.uuid || item.id));
};
useEffect(function () {
if (isRenamingEnabled) {
window.addEventListener('mousedown', handleMouseDown);
}
return function () {
window.removeEventListener('mousedown', handleMouseDown);
};
}, [isRenamingEnabled, isLoading]);
if (isRenamingEnabled) {
return /*#__PURE__*/_jsx(Styled.FileRename, {
type: "text",
"data-file-name": item.name,
defaultValue: fileName,
onKeyUp: handleKeyUp,
onKeyDown: ignoreEvent,
onClick: ignoreEvent,
disabled: isLoading,
focusOnMount: true,
size: "sm"
});
}
return /*#__PURE__*/_jsx(Styled.FileName, {
isListView: isListView,
title: fileName,
onClick: isFileSelected && !renameOnDblClick ? startRenameSecondClick : undefined,
onDoubleClick: renameOnDblClick ? startRenameSecondClick : undefined,
children: noTruncate ? fileName : truncateString(fileName, maxNameLength)
});
};
export default FileName;