+const pathPromise = {};
+
+export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState) => ({
+ auth: state.auth,
+ collectionPanel: state.collectionPanel,
+ collectionPanelFiles: state.collectionPanelFiles,
+}))((props: CollectionPanelFilesProps & WithStyles<CssRules> & { auth: AuthState }) => {
+ const { classes, onItemMenuOpen, onUploadDataClick, isWritable, dispatch, collectionPanelFiles, collectionPanel } = props;
+ const { apiToken, config } = props.auth;
+
+ const webdavClient = new WebDAV({
+ baseURL: config.keepWebServiceUrl,
+ headers: {
+ Authorization: `Bearer ${apiToken}`
+ },
+ });
+
+ const webDAVRequestConfig: WebDAVRequestConfig = {
+ headers: {
+ Depth: '1',
+ },
+ };
+
+ const parentRef = React.useRef(null);
+ const [path, setPath] = React.useState<string[]>([]);
+ const [pathData, setPathData] = React.useState({});
+ const [isLoading, setIsLoading] = React.useState(false);
+ const [leftSearch, setLeftSearch] = React.useState('');
+ const [rightSearch, setRightSearch] = React.useState('');
+
+ const leftKey = (path.length > 1 ? path.slice(0, path.length - 1) : path).join('/');
+ const rightKey = path.join('/');
+
+ const leftData = pathData[leftKey] || [];
+ const rightData = pathData[rightKey];
+
+ React.useEffect(() => {
+ if (props.currentItemUuid && extractUuidKind(props.currentItemUuid) === ResourceKind.COLLECTION) {
+ setPathData({});
+ setPath([props.currentItemUuid]);
+ }
+ }, [props.currentItemUuid]);
+
+ const fetchData = (keys, ignoreCache = false) => {
+ const keyArray = Array.isArray(keys) ? keys : [keys];
+
+ Promise.all(keyArray.filter(key => !!key)
+ .map((key) => {
+ const dataExists = !!pathData[key];
+ const runningRequest = pathPromise[key];
+
+ if (ignoreCache || (!dataExists && !runningRequest)) {
+ if (!isLoading) {
+ setIsLoading(true);
+ }
+
+ pathPromise[key] = true;
+
+ return webdavClient.propfind(`c=${key}`, webDAVRequestConfig);
+ }
+
+ return Promise.resolve(null);
+ })
+ .filter((promise) => !!promise)
+ )
+ .then((requests) => {
+ const newState = requests.map((request, index) => {
+ if (request && request.responseXML != null) {
+ const key = keyArray[index];
+ const result: any = extractFilesData(request.responseXML);
+ const sortedResult = sortBy(result, (n) => n.name).sort((n1, n2) => {
+ if (n1.type === 'directory' && n2.type !== 'directory') {
+ return -1;
+ }
+ if (n1.type !== 'directory' && n2.type === 'directory') {
+ return 1;
+ }
+ return 0;
+ });
+
+ return { [key]: sortedResult };
+ }
+ return {};
+ }).reduce((prev, next) => {
+ return { ...next, ...prev };
+ }, {});
+ setPathData((state) => ({ ...state, ...newState }));
+ })
+ .finally(() => {
+ setIsLoading(false);
+ keyArray.forEach(key => delete pathPromise[key]);
+ });
+ };
+
+ React.useEffect(() => {
+ if (rightKey) {
+ fetchData(rightKey);
+ setLeftSearch('');
+ setRightSearch('');
+ }
+ }, [rightKey, rightData]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const currentPDH = (collectionPanel.item || {}).portableDataHash;
+ React.useEffect(() => {
+ if (currentPDH) {
+ fetchData([leftKey, rightKey], true);
+ }
+ }, [currentPDH]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ React.useEffect(() => {
+ if (rightData) {
+ const filtered = rightData.filter(({ name }) => name.indexOf(rightSearch) > -1);
+ setCollectionFiles(filtered, false)(dispatch);
+ }
+ }, [rightData, dispatch, rightSearch]);
+
+ const handleRightClick = React.useCallback(
+ (event) => {
+ event.preventDefault();
+ let elem = event.target;
+
+ while (elem && elem.dataset && !elem.dataset.item) {
+ elem = elem.parentNode;
+ }
+
+ if (!elem || !elem.dataset) {
+ return;
+ }
+
+ const { id } = elem.dataset;
+
+ const item: any = {
+ id,
+ data: rightData.find((elem) => elem.id === id),
+ };
+
+ if (id) {
+ onItemMenuOpen(event, item, isWritable);
+ }
+ },
+ [onItemMenuOpen, isWritable, rightData]);
+
+ React.useEffect(() => {
+ let node = null;
+
+ if (parentRef?.current) {
+ node = parentRef.current;
+ (node as any).addEventListener('contextmenu', handleRightClick);
+ }
+
+ return () => {
+ if (node) {
+ (node as any).removeEventListener('contextmenu', handleRightClick);
+ }
+ };
+ }, [parentRef, handleRightClick]);
+
+ const handleClick = React.useCallback(
+ (event: any) => {
+ let isCheckbox = false;
+ let isMoreButton = false;
+ let elem = event.target;
+
+ if (elem.type === 'checkbox') {
+ isCheckbox = true;
+ }
+ // The "More options" button click event could be triggered on its
+ // internal graphic element.
+ else if ((elem.dataset && elem.dataset.id === 'moreOptions') || (elem.parentNode && elem.parentNode.dataset && elem.parentNode.dataset.id === 'moreOptions')) {
+ isMoreButton = true;
+ }
+
+ while (elem && elem.dataset && !elem.dataset.item) {
+ elem = elem.parentNode;
+ }
+
+ if (elem && elem.dataset && !isCheckbox && !isMoreButton) {
+ const { parentPath, subfolderPath, breadcrumbPath, type } = elem.dataset;
+
+ if (breadcrumbPath) {
+ const index = path.indexOf(breadcrumbPath);
+ setPath((state) => ([...state.slice(0, index + 1)]));
+ }
+
+ if (parentPath && type === 'directory') {
+ if (path.length > 1) {
+ path.pop()
+ }
+
+ setPath((state) => ([...state, parentPath]));
+ }
+
+ if (subfolderPath && type === 'directory') {
+ setPath((state) => ([...state, subfolderPath]));
+ }
+
+ if (elem.dataset.id && type === 'file') {
+ const item = rightData.find(({ id }) => id === elem.dataset.id) || leftData.find(({ id }) => id === elem.dataset.id);
+ const enhancedItem = servicesProvider.getServices().collectionService.extendFileURL(item);
+ const fileUrl = sanitizeToken(getInlineFileUrl(enhancedItem.url, config.keepWebServiceUrl, config.keepWebInlineServiceUrl), true);
+ window.open(fileUrl, '_blank');
+ }
+ }
+
+ if (isCheckbox) {
+ const { id } = elem.dataset;
+ const item = collectionPanelFiles[id];
+ props.onSelectionToggle(event, item);
+ }
+ if (isMoreButton) {
+ const { id } = elem.dataset;
+ const item: any = {
+ id,
+ data: rightData.find((elem) => elem.id === id),
+ };
+ onItemMenuOpen(event, item, isWritable);