@ndla/ui 3.3.9 → 3.3.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Article/Article.js +23 -1
- package/es/Article/ArticleNotions.js +80 -32
- package/es/Breadcrumblist/Breadcrumblist.js +14 -10
- package/es/CloseButton/CloseButton.js +62 -0
- package/es/CloseButton/index.js +9 -0
- package/es/Figure/Figure.js +3 -1
- package/es/Frontpage/FrontpageAllSubjects.js +7 -7
- package/es/Frontpage/FrontpageProgramMenu.js +10 -10
- package/es/Frontpage/FrontpageSearch.js +2 -4
- package/es/MediaList/MediaList.js +22 -73
- package/es/MessageBox/MessageBox.js +146 -78
- package/es/MessageBox/MessageBoxTag.js +37 -0
- package/es/MessageBox/index.js +3 -1
- package/es/NDLAFilm/AboutNdlaFilm.js +6 -17
- package/es/NDLAFilm/AllMoviesAlphabetically.js +11 -11
- package/es/NDLAFilm/CategorySelect.js +17 -18
- package/es/NDLAFilm/FilmContentCard.js +8 -22
- package/es/NDLAFilm/FilmContentCardTags.js +4 -8
- package/es/NDLAFilm/FilmMovieList.js +6 -21
- package/es/NDLAFilm/FilmMovieSearch.js +18 -26
- package/es/NDLAFilm/FilmSlideshow.js +2 -1
- package/es/NDLAFilm/MovieGrid.js +10 -19
- package/es/NDLAFilm/VisualElement.js +22 -29
- package/es/Programme/Programme.js +15 -8
- package/es/Search/SearchResultSleeve.js +12 -15
- package/es/SearchTypeResult/SearchFieldHeader.js +5 -5
- package/es/SearchTypeResult/SearchHeader.js +9 -9
- package/es/SearchTypeResult/SearchItem.js +19 -19
- package/es/SearchTypeResult/SearchNotionItem.js +12 -12
- package/es/SearchTypeResult/SearchNotionsResult.js +9 -14
- package/es/TopicIntroductionList/TopicIntroduction.js +14 -33
- package/es/TopicIntroductionList/TopicIntroductionList.js +6 -23
- package/es/TopicIntroductionList/TopicIntroductionShortcuts.js +71 -110
- package/es/TopicIntroductionList/TopicShortcutItem.js +0 -9
- package/es/all.css +1 -4
- package/es/index-javascript.js +1 -5
- package/es/index.js +6 -1
- package/es/locale/messages-en.js +10 -0
- package/es/locale/messages-nb.js +10 -0
- package/es/locale/messages-nn.js +10 -0
- package/es/shapes.js +0 -6
- package/lib/Article/Article.d.ts +3 -1
- package/lib/Article/Article.js +25 -3
- package/lib/Article/ArticleNotions.js +79 -30
- package/lib/Breadcrumblist/Breadcrumblist.d.ts +2 -1
- package/lib/Breadcrumblist/Breadcrumblist.js +15 -10
- package/lib/CloseButton/CloseButton.d.ts +6 -0
- package/lib/CloseButton/CloseButton.js +69 -0
- package/lib/CloseButton/index.d.ts +9 -0
- package/lib/CloseButton/index.js +15 -0
- package/lib/Figure/Figure.js +3 -1
- package/lib/Frontpage/FrontpageAllSubjects.d.ts +1 -1
- package/lib/Frontpage/FrontpageAllSubjects.js +7 -7
- package/lib/Frontpage/FrontpageProgramMenu.js +10 -10
- package/lib/Frontpage/FrontpageSearch.d.ts +3 -5
- package/lib/Frontpage/FrontpageSearch.js +2 -4
- package/lib/MediaList/MediaList.d.ts +48 -0
- package/lib/MediaList/MediaList.js +24 -78
- package/lib/MediaList/index.d.ts +8 -0
- package/lib/MessageBox/MessageBox.d.ts +22 -6
- package/lib/MessageBox/MessageBox.js +146 -77
- package/lib/MessageBox/MessageBoxTag.d.ts +12 -0
- package/lib/MessageBox/MessageBoxTag.js +44 -0
- package/lib/MessageBox/index.d.ts +3 -1
- package/lib/MessageBox/index.js +22 -2
- package/lib/NDLAFilm/AboutNdlaFilm.d.ts +15 -0
- package/lib/NDLAFilm/AboutNdlaFilm.js +6 -18
- package/lib/NDLAFilm/AllMoviesAlphabetically.d.ts +2 -2
- package/lib/NDLAFilm/AllMoviesAlphabetically.js +11 -11
- package/lib/NDLAFilm/CategorySelect.d.ts +11 -0
- package/lib/NDLAFilm/CategorySelect.js +20 -19
- package/lib/NDLAFilm/FilmContentCard.d.ts +11 -0
- package/lib/NDLAFilm/FilmContentCard.js +8 -23
- package/lib/NDLAFilm/FilmContentCardTags.d.ts +7 -0
- package/lib/NDLAFilm/FilmContentCardTags.js +4 -9
- package/lib/NDLAFilm/FilmMovieList.d.ts +19 -0
- package/lib/NDLAFilm/FilmMovieList.js +5 -21
- package/lib/NDLAFilm/FilmMovieSearch.d.ts +21 -0
- package/lib/NDLAFilm/FilmMovieSearch.js +25 -30
- package/lib/NDLAFilm/FilmSlideshow.d.ts +5 -5
- package/lib/NDLAFilm/MovieGrid.d.ts +13 -0
- package/lib/NDLAFilm/MovieGrid.js +9 -21
- package/lib/NDLAFilm/SlideshowIndicator.d.ts +2 -2
- package/lib/NDLAFilm/VisualElement.d.ts +16 -0
- package/lib/NDLAFilm/VisualElement.js +22 -30
- package/lib/NDLAFilm/index.d.ts +14 -0
- package/lib/NDLAFilm/types.d.ts +6 -4
- package/lib/Programme/Programme.d.ts +2 -1
- package/lib/Programme/Programme.js +18 -9
- package/lib/Search/SearchResultSleeve.d.ts +4 -6
- package/lib/Search/SearchResultSleeve.js +10 -11
- package/lib/SearchTypeResult/SearchFieldHeader.d.ts +3 -3
- package/lib/SearchTypeResult/SearchFieldHeader.js +5 -5
- package/lib/SearchTypeResult/SearchHeader.d.ts +3 -3
- package/lib/SearchTypeResult/SearchHeader.js +9 -9
- package/lib/SearchTypeResult/SearchItem.d.ts +2 -3
- package/lib/SearchTypeResult/SearchItem.js +19 -19
- package/lib/SearchTypeResult/SearchNotionItem.d.ts +1 -1
- package/lib/SearchTypeResult/SearchNotionItem.js +12 -12
- package/lib/SearchTypeResult/SearchNotionsResult.js +8 -13
- package/lib/SearchTypeResult/index.d.ts +1 -0
- package/lib/TopicIntroductionList/TopicIntroduction.d.ts +21 -0
- package/lib/TopicIntroductionList/TopicIntroduction.js +16 -36
- package/lib/TopicIntroductionList/TopicIntroductionList.d.ts +35 -0
- package/lib/TopicIntroductionList/TopicIntroductionList.js +6 -25
- package/lib/TopicIntroductionList/TopicIntroductionShortcuts.d.ts +8 -0
- package/lib/TopicIntroductionList/TopicIntroductionShortcuts.js +72 -110
- package/lib/TopicIntroductionList/TopicShortcutItem.d.ts +6 -0
- package/lib/TopicIntroductionList/TopicShortcutItem.js +0 -11
- package/lib/TopicIntroductionList/index.d.ts +9 -0
- package/lib/all.css +1 -4
- package/lib/index-javascript.js +3 -137
- package/lib/index.d.ts +6 -1
- package/lib/index.js +178 -0
- package/lib/locale/messages-en.d.ts +10 -0
- package/lib/locale/messages-en.js +10 -0
- package/lib/locale/messages-nb.d.ts +10 -0
- package/lib/locale/messages-nb.js +10 -0
- package/lib/locale/messages-nn.d.ts +10 -0
- package/lib/locale/messages-nn.js +10 -0
- package/lib/shapes.js +1 -10
- package/lib/types.d.ts +2 -2
- package/package.json +12 -12
- package/src/Article/Article.tsx +17 -0
- package/src/Article/ArticleNotions.tsx +10 -7
- package/src/Breadcrumblist/Breadcrumblist.tsx +5 -3
- package/src/CloseButton/CloseButton.tsx +40 -0
- package/src/CloseButton/index.ts +11 -0
- package/src/Figure/Figure.tsx +2 -1
- package/src/Figure/component.figure.scss +37 -3
- package/src/Frontpage/FrontpageAllSubjects.tsx +2 -2
- package/src/Frontpage/FrontpageProgramMenu.tsx +1 -0
- package/src/Frontpage/FrontpageSearch.tsx +3 -7
- package/src/MediaList/MediaList.tsx +158 -0
- package/src/MediaList/{index.js → index.ts} +0 -0
- package/src/MessageBox/MessageBox.tsx +117 -96
- package/src/MessageBox/MessageBoxTag.tsx +35 -0
- package/src/MessageBox/index.ts +3 -1
- package/src/NDLAFilm/{AboutNdlaFilm.jsx → AboutNdlaFilm.tsx} +19 -18
- package/src/NDLAFilm/AllMoviesAlphabetically.tsx +3 -3
- package/src/NDLAFilm/{CategorySelect.jsx → CategorySelect.tsx} +23 -20
- package/src/NDLAFilm/{FilmContentCard.jsx → FilmContentCard.tsx} +21 -21
- package/src/NDLAFilm/{FilmContentCardTags.jsx → FilmContentCardTags.tsx} +7 -7
- package/src/NDLAFilm/{FilmMovieList.jsx → FilmMovieList.tsx} +17 -27
- package/src/NDLAFilm/FilmMovieSearch.tsx +71 -0
- package/src/NDLAFilm/FilmSlideshow.tsx +7 -6
- package/src/NDLAFilm/MovieGrid.tsx +76 -0
- package/src/NDLAFilm/SlideshowIndicator.tsx +2 -2
- package/src/NDLAFilm/VisualElement.tsx +40 -0
- package/src/NDLAFilm/{index.js → index.ts} +0 -0
- package/src/NDLAFilm/types.ts +7 -4
- package/src/Programme/Programme.tsx +7 -3
- package/src/Search/SearchResultSleeve.tsx +7 -19
- package/src/SearchTypeResult/SearchFieldHeader.tsx +3 -3
- package/src/SearchTypeResult/SearchHeader.tsx +3 -3
- package/src/SearchTypeResult/SearchItem.tsx +4 -5
- package/src/SearchTypeResult/SearchNotionItem.tsx +1 -2
- package/src/SearchTypeResult/SearchNotionsResult.tsx +3 -8
- package/src/SearchTypeResult/index.ts +2 -0
- package/src/TopicIntroductionList/{TopicIntroduction.jsx → TopicIntroduction.tsx} +22 -35
- package/src/TopicIntroductionList/{TopicIntroductionList.jsx → TopicIntroductionList.tsx} +32 -26
- package/src/TopicIntroductionList/TopicIntroductionShortcuts.tsx +71 -0
- package/src/TopicIntroductionList/{TopicShortcutItem.jsx → TopicShortcutItem.tsx} +5 -13
- package/src/TopicIntroductionList/{index.js → index.ts} +0 -0
- package/src/index-javascript.js +0 -30
- package/src/index.ts +33 -1
- package/src/locale/messages-en.ts +14 -0
- package/src/locale/messages-nb.ts +14 -0
- package/src/locale/messages-nn.ts +14 -0
- package/src/shapes.js +0 -7
- package/src/types.ts +2 -2
- package/es/NDLAFilm/interfaces.js +0 -0
- package/es/NDLAFilm/shapes.js +0 -15
- package/lib/NDLAFilm/interfaces.d.ts +0 -10
- package/lib/NDLAFilm/interfaces.js +0 -1
- package/lib/NDLAFilm/shapes.d.ts +0 -15
- package/lib/NDLAFilm/shapes.js +0 -30
- package/src/MediaList/MediaList.jsx +0 -182
- package/src/NDLAFilm/FilmMovieSearch.jsx +0 -66
- package/src/NDLAFilm/MovieGrid.jsx +0 -75
- package/src/NDLAFilm/VisualElement.jsx +0 -48
- package/src/NDLAFilm/interfaces.ts +0 -10
- package/src/NDLAFilm/shapes.ts +0 -17
- package/src/TopicIntroductionList/TopicIntroductionShortcuts.jsx +0 -92
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2016-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import React from 'react';
|
|
10
|
-
import PropTypes from 'prop-types';
|
|
11
|
-
import BEMHelper from 'react-bem-helper';
|
|
12
|
-
import { OneColumn } from '@ndla/ui';
|
|
13
|
-
import SafeLink from '@ndla/safelink';
|
|
14
|
-
import { withTranslation } from 'react-i18next';
|
|
15
|
-
import CategorySelect from './CategorySelect';
|
|
16
|
-
|
|
17
|
-
import { topicShape } from './shapes';
|
|
18
|
-
|
|
19
|
-
const classes = new BEMHelper({
|
|
20
|
-
name: 'film-moviesearch',
|
|
21
|
-
prefix: 'c-',
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
const classesMovieList = new BEMHelper({
|
|
25
|
-
name: 'film-movielist',
|
|
26
|
-
prefix: 'c-',
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
const FilmMovieSearch = ({ topics, t, ...props }) => (
|
|
30
|
-
<div {...classes('')}>
|
|
31
|
-
<OneColumn>
|
|
32
|
-
<div {...classes('topic-navigation')}>
|
|
33
|
-
<h2 {...classesMovieList('heading', '', 'u-12/12 u-4/12@tablet')}>{t('ndlaFilm.subjectsInMovies')}:</h2>
|
|
34
|
-
<nav className="u-12/12 u-8/12@tablet">
|
|
35
|
-
<ul>
|
|
36
|
-
{topics.map((topic) => (
|
|
37
|
-
<li key={topic.id}>
|
|
38
|
-
<SafeLink to={topic.path} key={topic.id}>
|
|
39
|
-
<span>{topic.name}</span>
|
|
40
|
-
</SafeLink>
|
|
41
|
-
</li>
|
|
42
|
-
))}
|
|
43
|
-
</ul>
|
|
44
|
-
</nav>
|
|
45
|
-
</div>
|
|
46
|
-
<CategorySelect {...props} />
|
|
47
|
-
</OneColumn>
|
|
48
|
-
</div>
|
|
49
|
-
);
|
|
50
|
-
|
|
51
|
-
FilmMovieSearch.propTypes = {
|
|
52
|
-
topics: PropTypes.arrayOf(topicShape),
|
|
53
|
-
onChangeResourceType: PropTypes.func.isRequired,
|
|
54
|
-
resourceTypeSelected: PropTypes.shape({
|
|
55
|
-
name: PropTypes.string,
|
|
56
|
-
id: PropTypes.string,
|
|
57
|
-
}),
|
|
58
|
-
ariaControlId: PropTypes.string.isRequired,
|
|
59
|
-
t: PropTypes.func.isRequired,
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
FilmMovieSearch.defaultProps = {
|
|
63
|
-
topics: [],
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
export default withTranslation()(FilmMovieSearch);
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import BEMHelper from 'react-bem-helper';
|
|
4
|
-
import { css } from '@emotion/core';
|
|
5
|
-
import { withTranslation } from 'react-i18next';
|
|
6
|
-
import FilmContentCard from './FilmContentCard';
|
|
7
|
-
|
|
8
|
-
const movieListClasses = new BEMHelper({
|
|
9
|
-
name: 'film-movielist',
|
|
10
|
-
prefix: 'c-',
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
const MovieGrid = ({
|
|
14
|
-
resourceTypeName,
|
|
15
|
-
fetchingMoviesByType,
|
|
16
|
-
moviesByType,
|
|
17
|
-
resourceTypes,
|
|
18
|
-
loadingPlaceholderHeight,
|
|
19
|
-
autoSizedProps,
|
|
20
|
-
resizeThumbnailImages,
|
|
21
|
-
t,
|
|
22
|
-
}) => (
|
|
23
|
-
<section>
|
|
24
|
-
<h1
|
|
25
|
-
{...movieListClasses('heading')}
|
|
26
|
-
css={css`
|
|
27
|
-
margin-left: ${autoSizedProps.margin}px;
|
|
28
|
-
`}>
|
|
29
|
-
{resourceTypeName && resourceTypeName.name}
|
|
30
|
-
<small>
|
|
31
|
-
{fetchingMoviesByType
|
|
32
|
-
? t('ndlaFilm.loadingMovies')
|
|
33
|
-
: `${moviesByType.length} ${t('ndlaFilm.movieMatchInCategory')}`}
|
|
34
|
-
</small>
|
|
35
|
-
</h1>
|
|
36
|
-
<div
|
|
37
|
-
{...movieListClasses('movie-listing')}
|
|
38
|
-
css={css`
|
|
39
|
-
margin-left: ${autoSizedProps.margin}px;
|
|
40
|
-
`}>
|
|
41
|
-
{fetchingMoviesByType && (
|
|
42
|
-
<div
|
|
43
|
-
css={css`
|
|
44
|
-
height: ${loadingPlaceholderHeight};
|
|
45
|
-
`}
|
|
46
|
-
/>
|
|
47
|
-
)}
|
|
48
|
-
{!fetchingMoviesByType &&
|
|
49
|
-
moviesByType.map((movie) => (
|
|
50
|
-
<FilmContentCard
|
|
51
|
-
hideTags
|
|
52
|
-
movie={movie}
|
|
53
|
-
columnWidth={autoSizedProps.columnWidth}
|
|
54
|
-
distanceBetweenItems={autoSizedProps.distanceBetweenItems}
|
|
55
|
-
resourceTypes={resourceTypes}
|
|
56
|
-
resizeThumbnailImages={resizeThumbnailImages}
|
|
57
|
-
/>
|
|
58
|
-
))}
|
|
59
|
-
</div>
|
|
60
|
-
</section>
|
|
61
|
-
);
|
|
62
|
-
|
|
63
|
-
MovieGrid.propTypes = {
|
|
64
|
-
autoSizedProps: PropTypes.shape({}),
|
|
65
|
-
resourceTypeName: PropTypes.shape({
|
|
66
|
-
name: PropTypes.string,
|
|
67
|
-
}),
|
|
68
|
-
fetchingMoviesByType: PropTypes.bool,
|
|
69
|
-
moviesByType: PropTypes.array,
|
|
70
|
-
classes: PropTypes.func,
|
|
71
|
-
resourceTypes: PropTypes.array,
|
|
72
|
-
loadingPlaceholderHeight: PropTypes.string,
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
export default withTranslation()(MovieGrid);
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2019-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import React from 'react';
|
|
10
|
-
import PropTypes from 'prop-types';
|
|
11
|
-
import { Image } from '@ndla/ui';
|
|
12
|
-
import styled from '@emotion/styled';
|
|
13
|
-
|
|
14
|
-
const StylediFrame = styled.iframe`
|
|
15
|
-
height: 100%;
|
|
16
|
-
width: 100%;
|
|
17
|
-
border: 0;
|
|
18
|
-
margin: 0;
|
|
19
|
-
padding: 0;
|
|
20
|
-
`;
|
|
21
|
-
|
|
22
|
-
const VisualElement = ({ visualElement }) => {
|
|
23
|
-
switch (visualElement.type) {
|
|
24
|
-
case 'image':
|
|
25
|
-
return <Image src={visualElement.url} alt={visualElement.alt} />;
|
|
26
|
-
case 'brightcove':
|
|
27
|
-
return (
|
|
28
|
-
<StylediFrame
|
|
29
|
-
allowfullscreen="true"
|
|
30
|
-
webkitallowfullscreen="true"
|
|
31
|
-
mozallowfullscreen="true"
|
|
32
|
-
src={visualElement.url}
|
|
33
|
-
/>
|
|
34
|
-
);
|
|
35
|
-
default:
|
|
36
|
-
return null;
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
VisualElement.propTypes = {
|
|
41
|
-
visualElement: PropTypes.shape({
|
|
42
|
-
url: PropTypes.string,
|
|
43
|
-
alt: PropTypes.string,
|
|
44
|
-
type: PropTypes.string,
|
|
45
|
-
}).isRequired,
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
export default VisualElement;
|
package/src/NDLAFilm/shapes.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
|
-
|
|
3
|
-
export const movieShape = PropTypes.shape({
|
|
4
|
-
id: PropTypes.string.isRequired,
|
|
5
|
-
metaDescription: PropTypes.string.isRequired,
|
|
6
|
-
title: PropTypes.string.isRequired,
|
|
7
|
-
metaImage: PropTypes.shape({
|
|
8
|
-
url: PropTypes.string.isRequired,
|
|
9
|
-
alt: PropTypes.string.isRequired,
|
|
10
|
-
}),
|
|
11
|
-
path: PropTypes.string.isRequired,
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
export const topicShape = PropTypes.shape({
|
|
15
|
-
id: PropTypes.string,
|
|
16
|
-
name: PropTypes.string,
|
|
17
|
-
});
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import React, { Component } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import BEMHelper from 'react-bem-helper';
|
|
4
|
-
import { Forward } from '@ndla/icons/common';
|
|
5
|
-
|
|
6
|
-
import ShortcutItem from './TopicShortcutItem';
|
|
7
|
-
|
|
8
|
-
import { ShortcutShape } from '../shapes';
|
|
9
|
-
|
|
10
|
-
const classes = new BEMHelper({
|
|
11
|
-
name: 'topic-shortcuts',
|
|
12
|
-
prefix: 'c-',
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
class TopicIntroductionShortcuts extends Component {
|
|
16
|
-
constructor(props) {
|
|
17
|
-
super(props);
|
|
18
|
-
this.state = {
|
|
19
|
-
open: props.alwaysExpanded,
|
|
20
|
-
returned: false,
|
|
21
|
-
showButtonText: true,
|
|
22
|
-
};
|
|
23
|
-
this.handleOnToggle = this.handleOnToggle.bind(this);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
handleOnToggle(open) {
|
|
27
|
-
this.setState({
|
|
28
|
-
open,
|
|
29
|
-
showButtonText: !open,
|
|
30
|
-
returned: !open,
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
render() {
|
|
35
|
-
const { shortcuts, messages, id, alwaysExpanded } = this.props;
|
|
36
|
-
const { open, returned, showButtonText } = this.state;
|
|
37
|
-
|
|
38
|
-
let onMouseEnter = null;
|
|
39
|
-
let onMouseLeave = null;
|
|
40
|
-
|
|
41
|
-
let buttonView = null;
|
|
42
|
-
|
|
43
|
-
if (!alwaysExpanded) {
|
|
44
|
-
onMouseEnter = () => this.handleOnToggle(true);
|
|
45
|
-
onMouseLeave = () => this.handleOnToggle(false);
|
|
46
|
-
|
|
47
|
-
buttonView = (
|
|
48
|
-
<button
|
|
49
|
-
type="button"
|
|
50
|
-
aria-expanded={this.state.open}
|
|
51
|
-
aria-label={messages.toggleButtonText}
|
|
52
|
-
aria-controls={id}
|
|
53
|
-
{...classes('button', returned ? 're-enter' : '')}
|
|
54
|
-
onClick={() => {
|
|
55
|
-
this.handleOnToggle(!open);
|
|
56
|
-
}}>
|
|
57
|
-
<Forward />
|
|
58
|
-
{showButtonText && <span {...classes('label')}>{messages.toggleButtonText}</span>}
|
|
59
|
-
</button>
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
return (
|
|
63
|
-
<div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...classes()}>
|
|
64
|
-
{buttonView}
|
|
65
|
-
{open && (
|
|
66
|
-
<ul className={classes('list', open ? 'visible' : '').className}>
|
|
67
|
-
{shortcuts.map((shortcut) => (
|
|
68
|
-
<li {...classes('item')} key={shortcut.id}>
|
|
69
|
-
<ShortcutItem shortcut={shortcut} />
|
|
70
|
-
</li>
|
|
71
|
-
))}
|
|
72
|
-
</ul>
|
|
73
|
-
)}
|
|
74
|
-
</div>
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
TopicIntroductionShortcuts.propTypes = {
|
|
80
|
-
id: PropTypes.string.isRequired,
|
|
81
|
-
alwaysExpanded: PropTypes.bool,
|
|
82
|
-
messages: PropTypes.shape({
|
|
83
|
-
toggleButtonText: PropTypes.string.isRequired,
|
|
84
|
-
}),
|
|
85
|
-
shortcuts: PropTypes.arrayOf(ShortcutShape).isRequired,
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
TopicIntroductionShortcuts.defaultProps = {
|
|
89
|
-
alwaysExpanded: false,
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
export default TopicIntroductionShortcuts;
|