Skip to content
Snippets Groups Projects
Commit 9f36a451 authored by Anthony's avatar Anthony
Browse files

WIP Commit de la victoire, need to be cleaned

parent 1bac432a
No related branches found
No related tags found
1 merge request!20Fix ref forwarding from Mirador to Mirador CanvasAnnotationPlugin
Pipeline #1679 failed
...@@ -110,6 +110,10 @@ export class CanvasAnnotations extends Component { ...@@ -110,6 +110,10 @@ export class CanvasAnnotations extends Component {
console.log('CanvasAnnotations containerRef : ', containerRef); console.log('CanvasAnnotations containerRef : ', containerRef);
if (!containerRef.current) {
return <div>containerRef is null</div>;
}
return ( return (
<> <>
<Typography sx={{ paddingLeft: 2, paddingRight: 1, paddingTop: 2 }} variant="overline"> <Typography sx={{ paddingLeft: 2, paddingRight: 1, paddingTop: 2 }} variant="overline">
...@@ -145,11 +149,10 @@ export class CanvasAnnotations extends Component { ...@@ -145,11 +149,10 @@ export class CanvasAnnotations extends Component {
containerRef={containerRef} containerRef={containerRef}
key={`${annotation.id}-scroll`} key={`${annotation.id}-scroll`}
offsetTop={96} // offset for the height of the form above offsetTop={96} // offset for the height of the form above
scrollTo={autoScroll ? (selectedAnnotationId === annotation.id) : false} scrollTo={selectedAnnotationId === annotation.id}
selected={selectedAnnotationId === annotation.id} selected={selectedAnnotationId === annotation.id}
> >
<MenuItem <MenuItem
component={listContainerComponent}
variant="multiline" variant="multiline"
divider divider
sx={{ sx={{
......
import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles'; import { styled } from '@mui/material/styles';
import Badge from '@mui/material/Badge'; import Badge from '@mui/material/Badge';
......
...@@ -18,8 +18,6 @@ export class ScrollTo extends Component { ...@@ -18,8 +18,6 @@ export class ScrollTo extends Component {
const { scrollTo, containerRef } = this.props; const { scrollTo, containerRef } = this.props;
if (!scrollTo) return; if (!scrollTo) return;
console.log('Did mount Scroll to containerRef : ', containerRef);
this.scrollToElement(); this.scrollToElement();
} }
...@@ -38,7 +36,6 @@ export class ScrollTo extends Component { ...@@ -38,7 +36,6 @@ export class ScrollTo extends Component {
*/ */
containerBoundingRect() { containerBoundingRect() {
const { containerRef } = this.props; const { containerRef } = this.props;
console.log('DcontainerBoundingRect Scroll to containerRef : ', containerRef);
if (!containerRef || !containerRef.current) return {}; if (!containerRef || !containerRef.current) return {};
...@@ -68,7 +65,6 @@ export class ScrollTo extends Component { ...@@ -68,7 +65,6 @@ export class ScrollTo extends Component {
*/ */
scrollableContainer() { scrollableContainer() {
const { containerRef } = this.props; const { containerRef } = this.props;
console.log('scrollableContainer Scroll to containerRef : ', containerRef);
if (!containerRef || !containerRef.current) return null; if (!containerRef || !containerRef.current) return null;
return containerRef.current.getElementsByClassName('mirador-scrollto-scrollable')[0]; return containerRef.current.getElementsByClassName('mirador-scrollto-scrollable')[0];
} }
......
import { createRef, Component } from 'react'; import { useRef, useEffect, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import AnnotationSettings from '../containers/AnnotationSettings'; import AnnotationSettings from '../containers/AnnotationSettings';
...@@ -10,28 +10,29 @@ import ns from '../config/css-ns'; ...@@ -10,28 +10,29 @@ import ns from '../config/css-ns';
/** /**
* WindowSideBarAnnotationsPanel ~ * WindowSideBarAnnotationsPanel ~
*/ */
export class WindowSideBarAnnotationsPanel extends Component { function WindowSideBarAnnotationsPanel({
annotationCount, canvasIds, t, windowId, id,
}) {
/** */ /** */
constructor(props) { const containerRef = useRef();
super(props); 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 ( return (
<CompanionWindow <CompanionWindow
title={t('annotations')} title={t('annotations')}
paperClassName={ns('window-sidebar-annotation-panel')} paperClassName={ns('window-sidebar-annotation-panel')}
windowId={windowId} windowId={windowId}
className="mirador-annotations-panel"
id={id} id={id}
ref={this.containerRef} ref={containerRef}
titleControls={<AnnotationSettings windowId={windowId} />} titleControls={<AnnotationSettings windowId={windowId} />}
> >
<CompanionWindowSection> <CompanionWindowSection>
...@@ -41,17 +42,17 @@ export class WindowSideBarAnnotationsPanel extends Component { ...@@ -41,17 +42,17 @@ export class WindowSideBarAnnotationsPanel extends Component {
{canvasIds.map((canvasId, index) => ( {canvasIds.map((canvasId, index) => (
<CanvasAnnotations <CanvasAnnotations
canvasId={canvasId} canvasId={canvasId}
containerRef={this.containerRef} containerRef={containerRef}
key={canvasId} key={canvasId}
index={index} index={index}
totalSize={canvasIds.length} totalSize={canvasIds.length}
windowId={windowId} windowId={windowId}
/> />
))} ))}
</CompanionWindow> </CompanionWindow>
); );
} }
}
WindowSideBarAnnotationsPanel.propTypes = { WindowSideBarAnnotationsPanel.propTypes = {
annotationCount: PropTypes.number.isRequired, annotationCount: PropTypes.number.isRequired,
...@@ -65,3 +66,5 @@ WindowSideBarAnnotationsPanel.defaultProps = { ...@@ -65,3 +66,5 @@ WindowSideBarAnnotationsPanel.defaultProps = {
canvasIds: [], canvasIds: [],
t: key => key, t: key => key,
}; };
export default WindowSideBarAnnotationsPanel;
...@@ -48,7 +48,7 @@ const enhance = compose( ...@@ -48,7 +48,7 @@ const enhance = compose(
withRef(), withRef(),
withTranslation(), withTranslation(),
withSize(), withSize(),
connect(mapStateToProps, mapDispatchToProps), connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true }),
withPlugins('CompanionWindow'), withPlugins('CompanionWindow'),
); );
......
...@@ -6,7 +6,7 @@ import { ...@@ -6,7 +6,7 @@ import {
getVisibleCanvasIds, getVisibleCanvasIds,
getAnnotationResourcesByMotivation, getAnnotationResourcesByMotivation,
} from '../state/selectors'; } from '../state/selectors';
import { WindowSideBarAnnotationsPanel } from '../components/WindowSideBarAnnotationsPanel'; import WindowSideBarAnnotationsPanel from '../components/WindowSideBarAnnotationsPanel';
/** /**
* mapStateToProps - to hook up connect * mapStateToProps - to hook up connect
...@@ -23,7 +23,7 @@ const mapStateToProps = (state, { windowId }) => ({ ...@@ -23,7 +23,7 @@ const mapStateToProps = (state, { windowId }) => ({
const enhance = compose( const enhance = compose(
withTranslation(), withTranslation(),
connect(mapStateToProps, null), connect(mapStateToProps, null, null, { forwardRef: true }),
withPlugins('WindowSideBarAnnotationsPanel'), withPlugins('WindowSideBarAnnotationsPanel'),
// further HOC // further HOC
); );
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment