From 9f36a451d213fffb794e41198bc312e2b9cfa80e Mon Sep 17 00:00:00 2001
From: Anthony Geourjon <anthony.geourjon@tetras-libre.fr>
Date: Tue, 9 Jan 2024 00:38:39 +0100
Subject: [PATCH] WIP Commit de la victoire, need to be cleaned
---
src/components/CanvasAnnotations.js | 7 +-
src/components/MiradorMenuButton.js | 1 +
src/components/ScrollTo.js | 4 -
.../WindowSideBarAnnotationsPanel.js | 79 ++++++++++---------
src/containers/CompanionWindow.js | 2 +-
.../WindowSideBarAnnotationsPanel.js | 4 +-
6 files changed, 50 insertions(+), 47 deletions(-)
diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js
index 83a6a1dd2..870fd099f 100644
--- a/src/components/CanvasAnnotations.js
+++ b/src/components/CanvasAnnotations.js
@@ -110,6 +110,10 @@ export class CanvasAnnotations extends Component {
console.log('CanvasAnnotations containerRef : ', containerRef);
+ if (!containerRef.current) {
+ return <div>containerRef is null</div>;
+ }
+
return (
<>
<Typography sx={{ paddingLeft: 2, paddingRight: 1, paddingTop: 2 }} variant="overline">
@@ -145,11 +149,10 @@ export class CanvasAnnotations extends Component {
containerRef={containerRef}
key={`${annotation.id}-scroll`}
offsetTop={96} // offset for the height of the form above
- scrollTo={autoScroll ? (selectedAnnotationId === annotation.id) : false}
+ scrollTo={selectedAnnotationId === annotation.id}
selected={selectedAnnotationId === annotation.id}
>
<MenuItem
- component={listContainerComponent}
variant="multiline"
divider
sx={{
diff --git a/src/components/MiradorMenuButton.js b/src/components/MiradorMenuButton.js
index e1def5a7b..3ac8cbf8b 100644
--- a/src/components/MiradorMenuButton.js
+++ b/src/components/MiradorMenuButton.js
@@ -1,3 +1,4 @@
+import React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import Badge from '@mui/material/Badge';
diff --git a/src/components/ScrollTo.js b/src/components/ScrollTo.js
index f073642cf..cb5856953 100644
--- a/src/components/ScrollTo.js
+++ b/src/components/ScrollTo.js
@@ -18,8 +18,6 @@ export class ScrollTo extends Component {
const { scrollTo, containerRef } = this.props;
if (!scrollTo) return;
- console.log('Did mount Scroll to containerRef : ', containerRef);
-
this.scrollToElement();
}
@@ -38,7 +36,6 @@ export class ScrollTo extends Component {
*/
containerBoundingRect() {
const { containerRef } = this.props;
- console.log('DcontainerBoundingRect Scroll to containerRef : ', containerRef);
if (!containerRef || !containerRef.current) return {};
@@ -68,7 +65,6 @@ export class ScrollTo extends Component {
*/
scrollableContainer() {
const { containerRef } = this.props;
- console.log('scrollableContainer Scroll to containerRef : ', containerRef);
if (!containerRef || !containerRef.current) return null;
return containerRef.current.getElementsByClassName('mirador-scrollto-scrollable')[0];
}
diff --git a/src/components/WindowSideBarAnnotationsPanel.js b/src/components/WindowSideBarAnnotationsPanel.js
index d2e6f781d..a83699fda 100644
--- a/src/components/WindowSideBarAnnotationsPanel.js
+++ b/src/components/WindowSideBarAnnotationsPanel.js
@@ -1,4 +1,4 @@
-import { createRef, Component } from 'react';
+import { useRef, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import Typography from '@mui/material/Typography';
import AnnotationSettings from '../containers/AnnotationSettings';
@@ -10,47 +10,48 @@ import ns from '../config/css-ns';
/**
* WindowSideBarAnnotationsPanel ~
*/
-export class WindowSideBarAnnotationsPanel extends Component {
+function WindowSideBarAnnotationsPanel({
+ annotationCount, canvasIds, t, windowId, id,
+}) {
/** */
- constructor(props) {
- super(props);
+ const containerRef = useRef();
+ const [display, setDisplay] = useState(false);
- this.containerRef = createRef();
- }
+ useEffect(() => {
+ console.log(`Use effect ${containerRef}`);
+ console.log(`Use effect ${containerRef.current}`);
+ if(containerRef.current) {
+ containerRef.current.focus();
+ }
+ });
- /**
- * Returns the rendered component
- */
- render() {
- const {
- annotationCount, canvasIds, t, windowId, id,
- } = this.props;
- return (
- <CompanionWindow
- title={t('annotations')}
- paperClassName={ns('window-sidebar-annotation-panel')}
- windowId={windowId}
- id={id}
- ref={this.containerRef}
- titleControls={<AnnotationSettings windowId={windowId} />}
- >
- <CompanionWindowSection>
- <Typography component="p" variant="subtitle2">{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}</Typography>
- </CompanionWindowSection>
+ return (
+ <CompanionWindow
+ title={t('annotations')}
+ paperClassName={ns('window-sidebar-annotation-panel')}
+ windowId={windowId}
+ className="mirador-annotations-panel"
+ id={id}
+ ref={containerRef}
+ titleControls={<AnnotationSettings windowId={windowId} />}
+ >
+ <CompanionWindowSection>
+ <Typography component="p" variant="subtitle2">{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}</Typography>
+ </CompanionWindowSection>
- {canvasIds.map((canvasId, index) => (
- <CanvasAnnotations
- canvasId={canvasId}
- containerRef={this.containerRef}
- key={canvasId}
- index={index}
- totalSize={canvasIds.length}
- windowId={windowId}
- />
- ))}
- </CompanionWindow>
- );
- }
+ {canvasIds.map((canvasId, index) => (
+ <CanvasAnnotations
+ canvasId={canvasId}
+ containerRef={containerRef}
+ key={canvasId}
+ index={index}
+ totalSize={canvasIds.length}
+ windowId={windowId}
+
+ />
+ ))}
+ </CompanionWindow>
+ );
}
WindowSideBarAnnotationsPanel.propTypes = {
@@ -65,3 +66,5 @@ WindowSideBarAnnotationsPanel.defaultProps = {
canvasIds: [],
t: key => key,
};
+
+export default WindowSideBarAnnotationsPanel;
diff --git a/src/containers/CompanionWindow.js b/src/containers/CompanionWindow.js
index 64a180644..7323003cc 100644
--- a/src/containers/CompanionWindow.js
+++ b/src/containers/CompanionWindow.js
@@ -48,7 +48,7 @@ const enhance = compose(
withRef(),
withTranslation(),
withSize(),
- connect(mapStateToProps, mapDispatchToProps),
+ connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true }),
withPlugins('CompanionWindow'),
);
diff --git a/src/containers/WindowSideBarAnnotationsPanel.js b/src/containers/WindowSideBarAnnotationsPanel.js
index 8370a0c37..4d1a3ec1f 100644
--- a/src/containers/WindowSideBarAnnotationsPanel.js
+++ b/src/containers/WindowSideBarAnnotationsPanel.js
@@ -6,7 +6,7 @@ import {
getVisibleCanvasIds,
getAnnotationResourcesByMotivation,
} from '../state/selectors';
-import { WindowSideBarAnnotationsPanel } from '../components/WindowSideBarAnnotationsPanel';
+import WindowSideBarAnnotationsPanel from '../components/WindowSideBarAnnotationsPanel';
/**
* mapStateToProps - to hook up connect
@@ -23,7 +23,7 @@ const mapStateToProps = (state, { windowId }) => ({
const enhance = compose(
withTranslation(),
- connect(mapStateToProps, null),
+ connect(mapStateToProps, null, null, { forwardRef: true }),
withPlugins('WindowSideBarAnnotationsPanel'),
// further HOC
);
--
GitLab