@eeacms/volto-cca-policy 0.2.1 → 0.2.2
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/CHANGELOG.md +25 -8
- package/README.md +1 -0
- package/package.json +3 -1
- package/src/components/MigrationButtons.jsx +6 -0
- package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyExplorerView.js +0 -27
- package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyMap.jsx +1 -0
- package/src/components/manage/Blocks/CaseStudyExplorer/InfoOverlay.jsx +3 -2
- package/src/components/manage/Blocks/CollectionStatistics/CollectionStatsView.test.jsx +0 -1
- package/src/components/manage/Blocks/MKHMap/View.jsx +2 -1
- package/src/components/manage/Blocks/TabsBlock/Spotlight.jsx +260 -0
- package/src/components/manage/Blocks/TabsBlock/Spotlight.test.jsx +1380 -0
- package/src/components/manage/Blocks/TabsBlock/index.js +13 -0
- package/src/components/manage/Blocks/TabsBlock/spotlight.less +20 -0
- package/src/components/manage/Blocks/index.js +4 -2
- package/src/components/theme/Views/MissionFundingCCAView.jsx +190 -0
- package/src/components/theme/Views/MissionFundingCCAView.test.jsx +106 -0
- package/src/components/theme/Views/styles.less +7 -0
- package/src/customizations/@plone/volto-slate/blocks/Table/TableBlockView.jsx +146 -0
- package/src/customizations/@plone/volto-slate/blocks/Table/index.js +1 -1
- package/src/index.js +2 -0
- package/src/search/health_observatory/config-health.js +4 -9
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,31 @@ All notable changes to this project will be documented in this file. Dates are d
|
|
|
4
4
|
|
|
5
5
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
6
6
|
|
|
7
|
+
### [0.2.2](https://github.com/eea/volto-cca-policy/compare/0.2.1...0.2.2) - 10 April 2024
|
|
8
|
+
|
|
9
|
+
#### :house: Internal changes
|
|
10
|
+
|
|
11
|
+
- style: Automated code fix [eea-jenkins - [`bef8d95`](https://github.com/eea/volto-cca-policy/commit/bef8d955f006a5216d2950c3b926e1ee152acd7f)]
|
|
12
|
+
- style: Automated code fix [eea-jenkins - [`eaaecb2`](https://github.com/eea/volto-cca-policy/commit/eaaecb2612d36b0385a7ddd77aaac15f20b3a6f4)]
|
|
13
|
+
|
|
14
|
+
#### :hammer_and_wrench: Others
|
|
15
|
+
|
|
16
|
+
- Remove unneeded var [Tiberiu Ichim - [`f2b3d08`](https://github.com/eea/volto-cca-policy/commit/f2b3d08ffdeedbeddb012e12e35439b357518d8e)]
|
|
17
|
+
- Just retry. [Ghiță Bizău - [`0358369`](https://github.com/eea/volto-cca-policy/commit/035836983f9ef42a53204c2e87892d27bd420944)]
|
|
18
|
+
- Refs #267791 - Fix eslint error. [GhitaB - [`69a5bf8`](https://github.com/eea/volto-cca-policy/commit/69a5bf8f5902577e4e25de6e0be2bc4515569768)]
|
|
19
|
+
- Refs #267791 - Get rid of some duplicate lines. [GhitaB - [`a45a540`](https://github.com/eea/volto-cca-policy/commit/a45a540e10a888300dbd7f99bf7f740e704e96e3)]
|
|
20
|
+
- Try to avoid code duplicates [Tiberiu Ichim - [`67bc6f9`](https://github.com/eea/volto-cca-policy/commit/67bc6f9ad01290c21a0008f439e777ad072ebf8c)]
|
|
21
|
+
- Refs #267791 - Why was Sonarqube feeling down? It wanted to clean up duplicate code and comments, but it couldn't stop crying when it realized they were its only friends in the code!. [GhitaB - [`3ecebff`](https://github.com/eea/volto-cca-policy/commit/3ecebff4124470f27d7487ec1674d72284b1f11b)]
|
|
22
|
+
- Add test [Tiberiu Ichim - [`056f5b2`](https://github.com/eea/volto-cca-policy/commit/056f5b24a6ca611e08a53acd5c69e48a9705830a)]
|
|
23
|
+
- Add dependency for volto-tabs-block [Tiberiu Ichim - [`f8298e2`](https://github.com/eea/volto-cca-policy/commit/f8298e2a024399f9926007a6439badbfd210b311)]
|
|
24
|
+
- Add Tabs spotlight [Tiberiu Ichim - [`959e34d`](https://github.com/eea/volto-cca-policy/commit/959e34db80983edc0052e7d307103681a30008db)]
|
|
25
|
+
- Refs #267791 - Fix test. [GhitaB - [`5536f63`](https://github.com/eea/volto-cca-policy/commit/5536f63efd43f3144cfed53f063e56d57ee1d8f5)]
|
|
26
|
+
- Refs #267791 - Fix test. [GhitaB - [`4d27c61`](https://github.com/eea/volto-cca-policy/commit/4d27c61f18d486bab47ef77e80dd152db223eda5)]
|
|
27
|
+
- Refs #267791 - Solve disclaimer position, add styles. [GhitaB - [`62afa43`](https://github.com/eea/volto-cca-policy/commit/62afa4305837bb02af62c15551f524a76eb19a58)]
|
|
28
|
+
- Add button for content tree migration [Tiberiu Ichim - [`48d08b1`](https://github.com/eea/volto-cca-policy/commit/48d08b18f1e97e95ce66558a998b62a2ec745672)]
|
|
29
|
+
- Refs #267791 - Add test for MissionFundingCCAView. [GhitaB - [`2ef7e62`](https://github.com/eea/volto-cca-policy/commit/2ef7e62ef716f568641e280dcf56c91789d374f8)]
|
|
30
|
+
- Refs #267791 - Improve conditions for visible fields. [GhitaB - [`6fac780`](https://github.com/eea/volto-cca-policy/commit/6fac7800680df3858e7d5df7e3d3ec268c757470)]
|
|
31
|
+
- Refs #267791 - Add MissionFundingCCAView for mission_funding_cca. [GhitaB - [`8e6943f`](https://github.com/eea/volto-cca-policy/commit/8e6943f81cbfc4fc211762c0e556ef9d3ab99eb5)]
|
|
7
32
|
### [0.2.1](https://github.com/eea/volto-cca-policy/compare/0.2.0...0.2.1) - 5 April 2024
|
|
8
33
|
|
|
9
34
|
#### :bug: Bug Fixes
|
|
@@ -848,13 +873,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
|
848
873
|
- Refs #260715 rast-block wip [Tripon Eugen - [`f19d54e`](https://github.com/eea/volto-cca-policy/commit/f19d54e0b9a6a86bf344eb85b6a1cda7f3de91bf)]
|
|
849
874
|
- Refs #260715 rast-block wip [Tripon Eugen - [`2828537`](https://github.com/eea/volto-cca-policy/commit/2828537b6c084cd1a82162d552fb4ef025b71f9f)]
|
|
850
875
|
- Refs #260715 rast-block updates [Tripon Eugen - [`1e803e5`](https://github.com/eea/volto-cca-policy/commit/1e803e5bd3d3fb7558f261c76c68866be7beb8b5)]
|
|
851
|
-
- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`0a15e1b`](https://github.com/eea/volto-cca-policy/commit/0a15e1b2ad081233685e80d5b3c60a8663f6b896)]
|
|
852
|
-
- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`9554e44`](https://github.com/eea/volto-cca-policy/commit/9554e44c92a621a52b2adb5a4830fb084ee5734b)]
|
|
853
876
|
### [0.1.49](https://github.com/eea/volto-cca-policy/compare/0.1.48...0.1.49) - 15 November 2023
|
|
854
877
|
|
|
855
878
|
#### :house: Internal changes
|
|
856
879
|
|
|
857
|
-
- chore: [JENKINS] Refactor automated testing [valentinab25 - [`7b820a6`](https://github.com/eea/volto-cca-policy/commit/7b820a6369c2ddd5203b1a4abe352cb4bb43db7a)]
|
|
858
880
|
- chore: husky, lint-staged use fixed versions [valentinab25 - [`f0a8061`](https://github.com/eea/volto-cca-policy/commit/f0a8061c275c236deb00087c23fac9860a073106)]
|
|
859
881
|
|
|
860
882
|
#### :hammer_and_wrench: Others
|
|
@@ -871,9 +893,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
|
871
893
|
- Refs #259267 - jenkins test [Tripon Eugen - [`cacd31e`](https://github.com/eea/volto-cca-policy/commit/cacd31e7b1afe0983674ed5c7632d2e1d7fa752e)]
|
|
872
894
|
- Refs #259267 - jenkins [Tripon Eugen - [`5b3affe`](https://github.com/eea/volto-cca-policy/commit/5b3affee8401239de10097884c1b7f2349d15ec0)]
|
|
873
895
|
- Refs #259267 - add When, lead image and title to files [Tripon Eugen - [`2cedb23`](https://github.com/eea/volto-cca-policy/commit/2cedb237f898af9057e13fba94b615ef71077204)]
|
|
874
|
-
- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`4d607a5`](https://github.com/eea/volto-cca-policy/commit/4d607a576e9d0a5c34e48c41b409e7df616ee3d6)]
|
|
875
|
-
- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`b7f74d5`](https://github.com/eea/volto-cca-policy/commit/b7f74d53513a6edbfbca5cb6d19687929bb1e5db)]
|
|
876
|
-
- test: [JENKINS] Improve cypress time [valentinab25 - [`db65617`](https://github.com/eea/volto-cca-policy/commit/db656173391f65157098d95d388c25f6429753d8)]
|
|
877
896
|
- Refs #259267 - cca event blocks attachments and check not mandatoty fields [Tripon Eugen - [`3138e5a`](https://github.com/eea/volto-cca-policy/commit/3138e5afb5bfbdbed14e27ed457b16867b7fa414)]
|
|
878
897
|
- Refs #256681 - Fix error in CCA Event view menu. ([React Intl] An id must be provided to format a message.) [GhitaB - [`517eeb8`](https://github.com/eea/volto-cca-policy/commit/517eeb817264a47bbfd6b9b7d22aaf22d44ed224)]
|
|
879
898
|
- Refs #161485 - Fix ECDE name conflict. [GhitaB - [`8bfd99f`](https://github.com/eea/volto-cca-policy/commit/8bfd99ff68bb82a04d1c0ed625fa514fcf46289e)]
|
|
@@ -1090,7 +1109,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
|
1090
1109
|
|
|
1091
1110
|
#### :house: Internal changes
|
|
1092
1111
|
|
|
1093
|
-
- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`ad1ced0`](https://github.com/eea/volto-cca-policy/commit/ad1ced0971ba116c13a3b5fcc039172cc915c919)]
|
|
1094
1112
|
|
|
1095
1113
|
#### :hammer_and_wrench: Others
|
|
1096
1114
|
|
|
@@ -1571,7 +1589,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
|
1571
1589
|
#### :hammer_and_wrench: Others
|
|
1572
1590
|
|
|
1573
1591
|
- Refs #158294 - Update supported languages list. [GhitaB - [`0a4f91f`](https://github.com/eea/volto-cca-policy/commit/0a4f91f39b7edc367bd4c127d6a8f273c7788361)]
|
|
1574
|
-
- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`8f1f9ce`](https://github.com/eea/volto-cca-policy/commit/8f1f9ce6c22805670cc0800d3c779b6d619d0f31)]
|
|
1575
1592
|
### [0.1.1](https://github.com/eea/volto-cca-policy/compare/0.1.0...0.1.1) - 13 December 2022
|
|
1576
1593
|
|
|
1577
1594
|
#### :hammer_and_wrench: Others
|
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eeacms/volto-cca-policy",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "@eeacms/volto-cca-policy: Volto add-on",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"author": "European Environment Agency: IDM2 A-Team",
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"@eeacms/volto-datablocks",
|
|
27
27
|
"@eeacms/volto-eea-design-system",
|
|
28
28
|
"@eeacms/volto-eea-website-theme",
|
|
29
|
+
"@eeacms/volto-tabs-block",
|
|
29
30
|
"@eeacms/volto-globalsearch"
|
|
30
31
|
],
|
|
31
32
|
"dependencies": {
|
|
@@ -38,6 +39,7 @@
|
|
|
38
39
|
"@eeacms/volto-openlayers-map": "*",
|
|
39
40
|
"@eeacms/volto-searchlib": "*",
|
|
40
41
|
"@eeacms/volto-slate-label": "*",
|
|
42
|
+
"@eeacms/volto-tabs-block": "*",
|
|
41
43
|
"@eeacms/volto-widget-dataprovenance": "*",
|
|
42
44
|
"@eeacms/volto-widget-geolocation": "*",
|
|
43
45
|
"@eeacms/volto-widget-temporal-coverage": "*",
|
|
@@ -34,6 +34,12 @@ function MigrationButtons(props) {
|
|
|
34
34
|
'M',
|
|
35
35
|
`http://localhost:8080/cca/${base}/@@volto_migrate`,
|
|
36
36
|
),
|
|
37
|
+
button(
|
|
38
|
+
'migrationtree',
|
|
39
|
+
'Migrate Tree',
|
|
40
|
+
'MT',
|
|
41
|
+
`http://localhost:8080/cca/${base}/@@volto_contenttree`,
|
|
42
|
+
),
|
|
37
43
|
button(
|
|
38
44
|
'view',
|
|
39
45
|
'View original',
|
|
@@ -86,30 +86,3 @@ export default function CaseStudyExplorerView(props) {
|
|
|
86
86
|
</div>
|
|
87
87
|
);
|
|
88
88
|
}
|
|
89
|
-
|
|
90
|
-
// import { useDispatch } from 'react-redux'; // , useSelector
|
|
91
|
-
// import { getVocabulary } from '@plone/volto/actions'; // , searchContent
|
|
92
|
-
// const IPCC = 'eea.climateadapt.aceitems_ipcc_category';
|
|
93
|
-
// const dispatch = useDispatch();
|
|
94
|
-
// React.useEffect(() => {
|
|
95
|
-
// const action = getVocabulary({
|
|
96
|
-
// vocabNameOrURL: IPCC,
|
|
97
|
-
// });
|
|
98
|
-
// dispatch(action);
|
|
99
|
-
// }, [dispatch]);
|
|
100
|
-
// setMapKey(
|
|
101
|
-
// activeItems.length +
|
|
102
|
-
// '-' +
|
|
103
|
-
// activeFilters.sectors +
|
|
104
|
-
// '-' +
|
|
105
|
-
// activeFilters.impacts,
|
|
106
|
-
// );
|
|
107
|
-
//console.log('activeFilters filter cases', data);
|
|
108
|
-
// setMapKey(
|
|
109
|
-
// activeItems.length +
|
|
110
|
-
// '-' +
|
|
111
|
-
// activeFilters.sectors +
|
|
112
|
-
// '-' +
|
|
113
|
-
// activeFilters.impacts,
|
|
114
|
-
// );
|
|
115
|
-
// const [mapKey, setMapKey] = React.useState('-');
|
|
@@ -61,6 +61,7 @@ export default function CaseStudyMap(props) {
|
|
|
61
61
|
selectedFeature={selectedCase}
|
|
62
62
|
onFeatureSelect={onSelectedCase}
|
|
63
63
|
layerId={tileWMSSources[0]}
|
|
64
|
+
hasCusters={true}
|
|
64
65
|
/>
|
|
65
66
|
<FeatureInteraction onFeatureSelect={onSelectedCase} />
|
|
66
67
|
<Layer.Tile source={tileWMSSources[0]} zIndex={0} />
|
|
@@ -12,6 +12,7 @@ export default function InfoOverlay({
|
|
|
12
12
|
selectedFeature,
|
|
13
13
|
onFeatureSelect,
|
|
14
14
|
layerId,
|
|
15
|
+
hasCusters = false,
|
|
15
16
|
}) {
|
|
16
17
|
const { map } = useMapContext();
|
|
17
18
|
const [tooltip, setTooltipRef] = React.useState();
|
|
@@ -41,7 +42,7 @@ export default function InfoOverlay({
|
|
|
41
42
|
const { pixel, target } = evt;
|
|
42
43
|
const features = target.getFeaturesAtPixel(pixel);
|
|
43
44
|
|
|
44
|
-
if (features.length && !isCluster(features)) {
|
|
45
|
+
if (features.length && (hasCusters ? !isCluster(features) : true)) {
|
|
45
46
|
overlay.setPosition(coordinate);
|
|
46
47
|
setShowTooltip(true);
|
|
47
48
|
} else {
|
|
@@ -58,7 +59,7 @@ export default function InfoOverlay({
|
|
|
58
59
|
map.un('click', handler);
|
|
59
60
|
map.removeOverlay(overlay);
|
|
60
61
|
};
|
|
61
|
-
}, [map, tooltip, onFeatureSelect]);
|
|
62
|
+
}, [map, tooltip, onFeatureSelect, hasCusters]);
|
|
62
63
|
|
|
63
64
|
const [isClient, setIsClient] = React.useState(false);
|
|
64
65
|
React.useEffect(() => setIsClient(true), []);
|
|
@@ -11,7 +11,7 @@ import { openlayers as ol } from '@eeacms/volto-openlayers-map';
|
|
|
11
11
|
|
|
12
12
|
import * as layers from './layers';
|
|
13
13
|
import FeatureInteraction from './FeatureInteraction';
|
|
14
|
-
import InfoOverlay from '
|
|
14
|
+
import InfoOverlay from '@eeacms/volto-cca-policy/components/manage/Blocks/CaseStudyExplorer/InfoOverlay';
|
|
15
15
|
|
|
16
16
|
import './styles.less';
|
|
17
17
|
|
|
@@ -87,6 +87,7 @@ export default function View(props) {
|
|
|
87
87
|
<InfoOverlay
|
|
88
88
|
selectedFeature={selectedFeature}
|
|
89
89
|
layerId={sources?.[0]}
|
|
90
|
+
hasClusters={false}
|
|
90
91
|
/>
|
|
91
92
|
<Controls attribution={false} zoom={false} />
|
|
92
93
|
<Interactions
|
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import { compose } from 'redux';
|
|
3
|
+
import { withRouter } from 'react-router';
|
|
4
|
+
import cx from 'classnames';
|
|
5
|
+
import { Menu, Tab, Container, Icon, Image } from 'semantic-ui-react';
|
|
6
|
+
import { RenderBlocks } from '@plone/volto/components';
|
|
7
|
+
import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
|
|
8
|
+
import {
|
|
9
|
+
SimpleMarkdown,
|
|
10
|
+
getMenuPosition,
|
|
11
|
+
} from '@eeacms/volto-tabs-block/utils';
|
|
12
|
+
|
|
13
|
+
import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
|
|
14
|
+
|
|
15
|
+
import '@eeacms/volto-tabs-block/less/menu.less';
|
|
16
|
+
import './spotlight.less';
|
|
17
|
+
|
|
18
|
+
export const AssetTab = ({ props, tabIndex, tabTitle }) => {
|
|
19
|
+
const {
|
|
20
|
+
icon,
|
|
21
|
+
image,
|
|
22
|
+
assetType,
|
|
23
|
+
assetPosition,
|
|
24
|
+
iconSize,
|
|
25
|
+
imageSize,
|
|
26
|
+
hideTitle,
|
|
27
|
+
} = props;
|
|
28
|
+
const imageObject = image?.[0];
|
|
29
|
+
return (
|
|
30
|
+
<div
|
|
31
|
+
className={cx('asset-position', {
|
|
32
|
+
'asset-top': assetPosition === 'top',
|
|
33
|
+
'asset-left': assetPosition === 'left',
|
|
34
|
+
'asset-right': assetPosition === 'right',
|
|
35
|
+
})}
|
|
36
|
+
>
|
|
37
|
+
{assetType === 'icon' && icon && (
|
|
38
|
+
<Icon
|
|
39
|
+
className={cx('tab-icon', icon, iconSize, 'aligned')}
|
|
40
|
+
{...{
|
|
41
|
+
...(hideTitle && {
|
|
42
|
+
role: 'img',
|
|
43
|
+
'aria-hidden': 'false',
|
|
44
|
+
'aria-label': tabTitle,
|
|
45
|
+
}),
|
|
46
|
+
}}
|
|
47
|
+
/>
|
|
48
|
+
)}
|
|
49
|
+
|
|
50
|
+
{assetType === 'image' && imageObject && (
|
|
51
|
+
<Image
|
|
52
|
+
src={
|
|
53
|
+
isInternalURL(imageObject['@id'])
|
|
54
|
+
? `${flattenToAppURL(imageObject['@id'])}/${
|
|
55
|
+
imageObject?.image_scales?.image?.[0].scales?.[imageSize]
|
|
56
|
+
?.download || imageObject?.image_scales?.image?.[0].download
|
|
57
|
+
}`
|
|
58
|
+
: imageObject['@id']
|
|
59
|
+
}
|
|
60
|
+
className={cx('ui', imageSize, 'aligned')}
|
|
61
|
+
alt={hideTitle ? tabTitle : ''}
|
|
62
|
+
/>
|
|
63
|
+
)}
|
|
64
|
+
|
|
65
|
+
{!hideTitle && (
|
|
66
|
+
<div>
|
|
67
|
+
<span className="menu-item-count">{tabIndex}</span>
|
|
68
|
+
<span className="menu-item-text">{tabTitle}</span>
|
|
69
|
+
</div>
|
|
70
|
+
)}
|
|
71
|
+
</div>
|
|
72
|
+
);
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
const MenuItem = (props) => {
|
|
76
|
+
const {
|
|
77
|
+
activeTab = null,
|
|
78
|
+
tabs = {},
|
|
79
|
+
setActiveTab = () => {},
|
|
80
|
+
tabsTitle,
|
|
81
|
+
tabsDescription,
|
|
82
|
+
blockId,
|
|
83
|
+
} = props;
|
|
84
|
+
|
|
85
|
+
const { tab, index } = props;
|
|
86
|
+
const tabIndex = index + 1;
|
|
87
|
+
const [tabChanged, setTabChanged] = useState(false);
|
|
88
|
+
const defaultTitle = `Tab ${tabIndex}`;
|
|
89
|
+
const tabSettings = tabs[tab];
|
|
90
|
+
const { title, assetType } = tabSettings;
|
|
91
|
+
const tabTitle = title || defaultTitle;
|
|
92
|
+
|
|
93
|
+
useEffect(() => {
|
|
94
|
+
if (
|
|
95
|
+
tabChanged === true &&
|
|
96
|
+
document?.getElementById(blockId)?.querySelector('#tab-pane-' + tab)
|
|
97
|
+
) {
|
|
98
|
+
document
|
|
99
|
+
.getElementById(blockId)
|
|
100
|
+
.querySelector('#tab-pane-' + tab)
|
|
101
|
+
.focus();
|
|
102
|
+
setTabChanged(false);
|
|
103
|
+
}
|
|
104
|
+
}, [tabChanged, tab, blockId]);
|
|
105
|
+
|
|
106
|
+
const focusTab = () => {
|
|
107
|
+
if (activeTab !== tab) {
|
|
108
|
+
setActiveTab(tab);
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
return (
|
|
113
|
+
<React.Fragment>
|
|
114
|
+
{index === 0 && (tabsTitle || tabsDescription) && (
|
|
115
|
+
<Menu.Item className="menu-title">
|
|
116
|
+
<SimpleMarkdown md={tabsTitle} defaultTag="##" className="title" />
|
|
117
|
+
<SimpleMarkdown md={tabsDescription} className="description" />
|
|
118
|
+
</Menu.Item>
|
|
119
|
+
)}
|
|
120
|
+
<Menu.Item
|
|
121
|
+
name={defaultTitle}
|
|
122
|
+
active={tab === activeTab}
|
|
123
|
+
aria-selected={tab === activeTab}
|
|
124
|
+
tabIndex={0}
|
|
125
|
+
role={'tab'}
|
|
126
|
+
onMouseOver={focusTab}
|
|
127
|
+
onFocus={focusTab}
|
|
128
|
+
onClick={focusTab}
|
|
129
|
+
onKeyDown={(e) => {
|
|
130
|
+
if (e.key === 'Enter') {
|
|
131
|
+
e.preventDefault();
|
|
132
|
+
if (activeTab !== tab) {
|
|
133
|
+
setActiveTab(tab);
|
|
134
|
+
}
|
|
135
|
+
setTabChanged(true);
|
|
136
|
+
}
|
|
137
|
+
}}
|
|
138
|
+
>
|
|
139
|
+
<>
|
|
140
|
+
{assetType ? (
|
|
141
|
+
<AssetTab
|
|
142
|
+
props={tabSettings}
|
|
143
|
+
tabTitle={tabTitle}
|
|
144
|
+
tabIndex={tabIndex}
|
|
145
|
+
/>
|
|
146
|
+
) : (
|
|
147
|
+
<>
|
|
148
|
+
<span className="menu-item-count">{tabIndex}</span>
|
|
149
|
+
<span className="menu-item-text">{tabTitle}</span>
|
|
150
|
+
</>
|
|
151
|
+
)}
|
|
152
|
+
</>
|
|
153
|
+
</Menu.Item>
|
|
154
|
+
</React.Fragment>
|
|
155
|
+
);
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
const View = (props) => {
|
|
159
|
+
const {
|
|
160
|
+
metadata = {},
|
|
161
|
+
data = {},
|
|
162
|
+
tabsList = [],
|
|
163
|
+
tabs = {},
|
|
164
|
+
activeTabIndex = 0,
|
|
165
|
+
} = props;
|
|
166
|
+
const [menuPosition, setMenuPosition] = React.useState({});
|
|
167
|
+
React.useEffect(() => {
|
|
168
|
+
if (Object.keys(menuPosition).length === 0) {
|
|
169
|
+
setMenuPosition(getMenuPosition(data));
|
|
170
|
+
}
|
|
171
|
+
}, [data, menuPosition]);
|
|
172
|
+
|
|
173
|
+
const {
|
|
174
|
+
title,
|
|
175
|
+
description,
|
|
176
|
+
align,
|
|
177
|
+
menuBorderless,
|
|
178
|
+
menuColor,
|
|
179
|
+
menuCompact,
|
|
180
|
+
menuFluid,
|
|
181
|
+
menuInverted,
|
|
182
|
+
menuPointing,
|
|
183
|
+
// menuSecondary,
|
|
184
|
+
menuSize,
|
|
185
|
+
menuStackable,
|
|
186
|
+
menuTabular,
|
|
187
|
+
menuText,
|
|
188
|
+
menuAlign,
|
|
189
|
+
} = data;
|
|
190
|
+
const isContainer = align === 'full';
|
|
191
|
+
|
|
192
|
+
const panes = tabsList.map((tab, index) => {
|
|
193
|
+
return {
|
|
194
|
+
id: tab,
|
|
195
|
+
menuItem: (
|
|
196
|
+
<MenuItem
|
|
197
|
+
{...props}
|
|
198
|
+
key={tab}
|
|
199
|
+
tab={tab}
|
|
200
|
+
index={index}
|
|
201
|
+
tabsTitle={title}
|
|
202
|
+
tabsDescription={description}
|
|
203
|
+
blockId={props?.id || ''}
|
|
204
|
+
/>
|
|
205
|
+
),
|
|
206
|
+
pane: (
|
|
207
|
+
<Tab.Pane key={tab} as={isContainer ? Container : undefined}>
|
|
208
|
+
<div
|
|
209
|
+
id={tabs[tab]?.title || `Tab ${tabsList.indexOf(tab) + 1}`}
|
|
210
|
+
className="tab-name"
|
|
211
|
+
>
|
|
212
|
+
<div tabIndex={0} role="tabpanel" id={'tab-pane-' + tab}>
|
|
213
|
+
<RenderBlocks
|
|
214
|
+
{...props}
|
|
215
|
+
metadata={metadata}
|
|
216
|
+
content={tabs[tab]}
|
|
217
|
+
/>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
</Tab.Pane>
|
|
221
|
+
),
|
|
222
|
+
};
|
|
223
|
+
});
|
|
224
|
+
|
|
225
|
+
return (
|
|
226
|
+
<Tab
|
|
227
|
+
activeIndex={activeTabIndex}
|
|
228
|
+
className="tabs spotlight-tabs tabs-accessibility"
|
|
229
|
+
renderActiveOnly={false}
|
|
230
|
+
menu={{
|
|
231
|
+
role: 'tablist',
|
|
232
|
+
attached: menuPosition.attached,
|
|
233
|
+
borderless: menuBorderless,
|
|
234
|
+
color: menuColor,
|
|
235
|
+
compact: menuCompact,
|
|
236
|
+
fluid: menuFluid,
|
|
237
|
+
inverted: menuInverted,
|
|
238
|
+
pointing: menuPointing,
|
|
239
|
+
size: menuSize,
|
|
240
|
+
stackable: menuStackable,
|
|
241
|
+
tabular: menuTabular,
|
|
242
|
+
text: menuText,
|
|
243
|
+
vertical: menuPosition.vertical,
|
|
244
|
+
className: cx(
|
|
245
|
+
'menu-tabs-spotlight-variant',
|
|
246
|
+
menuAlign,
|
|
247
|
+
menuPosition.direction === 'left' ? 'border-right' : '',
|
|
248
|
+
menuPosition.direction === 'right' ? 'border-left' : '',
|
|
249
|
+
menuPosition.direction === 'top' ? 'border-bottom' : '',
|
|
250
|
+
menuPosition.direction === 'bottom' ? 'border-top' : '',
|
|
251
|
+
{ container: isContainer },
|
|
252
|
+
),
|
|
253
|
+
}}
|
|
254
|
+
menuPosition={menuPosition.direction}
|
|
255
|
+
panes={panes}
|
|
256
|
+
/>
|
|
257
|
+
);
|
|
258
|
+
};
|
|
259
|
+
|
|
260
|
+
export default compose(withScrollToTarget)(withRouter(View));
|