/
index.js
63 lines (53 loc) · 1.86 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { compose, branch, renderNothing } from 'recompose';
import { createStructuredSelector } from 'reselect';
import { has } from 'lodash';
import {
selectInfoActivePanel,
selectInfoDetailLevel,
} from 'pages/QuizPage/selectors';
import QuizInfoReadings from 'containers/QuizInfoReadings';
import QuizInfoSynonyms from 'containers/QuizInfoSynonyms';
import ReviewLock from 'containers/ReviewLock';
import { withContentRect } from 'react-measure';
import smoothScrollY from 'utils/smoothScrollY';
import shouldUpdateDeepEqual from 'utils/shouldUpdateDeepEqual';
import { QuizInfoWrapper, LockWrapper } from '../styles';
InfoPanel.propTypes = {
id: PropTypes.number.isRequired,
category: PropTypes.string.isRequired,
detailLevel: PropTypes.number.isRequired,
measureRef: PropTypes.func.isRequired,
contentRect: PropTypes.object.isRequired,
};
function InfoPanel({
id, category, detailLevel, measureRef, contentRect,
}) {
if (has(contentRect, 'bounds', 'top')) {
smoothScrollY(contentRect.bounds.top);
}
return (
<QuizInfoWrapper innerRef={measureRef} detailLevel={detailLevel}>
<QuizInfoReadings id={id} detailLevel={detailLevel} />
<QuizInfoSynonyms id={id} detailLevel={detailLevel} />
{category !== 'lessons' &&
detailLevel > 1 && (
<LockWrapper>
<ReviewLock id={id} data-ignore-hotkeys />
</LockWrapper>
)}
</QuizInfoWrapper>
);
}
const mapStateToProps = createStructuredSelector({
activePanel: selectInfoActivePanel,
detailLevel: selectInfoDetailLevel,
});
export default compose(
connect(mapStateToProps),
branch(({ activePanel }) => activePanel !== 'INFO', renderNothing),
withContentRect('bounds'),
shouldUpdateDeepEqual(['bounds', 'id', 'detailLevel']),
)(InfoPanel);