@eeacms/volto-cca-policy 0.2.1 → 0.2.3
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 +32 -0
- package/README.md +0 -57
- 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/RASTBlock/RASTMap.jsx +9 -4
- 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,38 @@ 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.3](https://github.com/eea/volto-cca-policy/compare/0.2.2...0.2.3) - 11 April 2024
|
|
8
|
+
|
|
9
|
+
#### :hammer_and_wrench: Others
|
|
10
|
+
|
|
11
|
+
- Change readme [Tiberiu Ichim - [`b1b5fc5`](https://github.com/eea/volto-cca-policy/commit/b1b5fc5d878a2843db04904186268cdd6f530d4c)]
|
|
12
|
+
- Refs #260715 - rast check folder skip update skip null [Tripon Eugen - [`e17794f`](https://github.com/eea/volto-cca-policy/commit/e17794f9f202133f64862178995fbb32ef737d50)]
|
|
13
|
+
- Refs #260715 - rast check folder skip update [Tripon Eugen - [`4548818`](https://github.com/eea/volto-cca-policy/commit/45488183008e274c3d2523315028c57ae6e37c6e)]
|
|
14
|
+
### [0.2.2](https://github.com/eea/volto-cca-policy/compare/0.2.1...0.2.2) - 10 April 2024
|
|
15
|
+
|
|
16
|
+
#### :house: Internal changes
|
|
17
|
+
|
|
18
|
+
- style: Automated code fix [eea-jenkins - [`bef8d95`](https://github.com/eea/volto-cca-policy/commit/bef8d955f006a5216d2950c3b926e1ee152acd7f)]
|
|
19
|
+
- style: Automated code fix [eea-jenkins - [`eaaecb2`](https://github.com/eea/volto-cca-policy/commit/eaaecb2612d36b0385a7ddd77aaac15f20b3a6f4)]
|
|
20
|
+
|
|
21
|
+
#### :hammer_and_wrench: Others
|
|
22
|
+
|
|
23
|
+
- Remove unneeded var [Tiberiu Ichim - [`f2b3d08`](https://github.com/eea/volto-cca-policy/commit/f2b3d08ffdeedbeddb012e12e35439b357518d8e)]
|
|
24
|
+
- Just retry. [Ghiță Bizău - [`0358369`](https://github.com/eea/volto-cca-policy/commit/035836983f9ef42a53204c2e87892d27bd420944)]
|
|
25
|
+
- Refs #267791 - Fix eslint error. [GhitaB - [`69a5bf8`](https://github.com/eea/volto-cca-policy/commit/69a5bf8f5902577e4e25de6e0be2bc4515569768)]
|
|
26
|
+
- Refs #267791 - Get rid of some duplicate lines. [GhitaB - [`a45a540`](https://github.com/eea/volto-cca-policy/commit/a45a540e10a888300dbd7f99bf7f740e704e96e3)]
|
|
27
|
+
- Try to avoid code duplicates [Tiberiu Ichim - [`67bc6f9`](https://github.com/eea/volto-cca-policy/commit/67bc6f9ad01290c21a0008f439e777ad072ebf8c)]
|
|
28
|
+
- 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)]
|
|
29
|
+
- Add test [Tiberiu Ichim - [`056f5b2`](https://github.com/eea/volto-cca-policy/commit/056f5b24a6ca611e08a53acd5c69e48a9705830a)]
|
|
30
|
+
- Add dependency for volto-tabs-block [Tiberiu Ichim - [`f8298e2`](https://github.com/eea/volto-cca-policy/commit/f8298e2a024399f9926007a6439badbfd210b311)]
|
|
31
|
+
- Add Tabs spotlight [Tiberiu Ichim - [`959e34d`](https://github.com/eea/volto-cca-policy/commit/959e34db80983edc0052e7d307103681a30008db)]
|
|
32
|
+
- Refs #267791 - Fix test. [GhitaB - [`5536f63`](https://github.com/eea/volto-cca-policy/commit/5536f63efd43f3144cfed53f063e56d57ee1d8f5)]
|
|
33
|
+
- Refs #267791 - Fix test. [GhitaB - [`4d27c61`](https://github.com/eea/volto-cca-policy/commit/4d27c61f18d486bab47ef77e80dd152db223eda5)]
|
|
34
|
+
- Refs #267791 - Solve disclaimer position, add styles. [GhitaB - [`62afa43`](https://github.com/eea/volto-cca-policy/commit/62afa4305837bb02af62c15551f524a76eb19a58)]
|
|
35
|
+
- Add button for content tree migration [Tiberiu Ichim - [`48d08b1`](https://github.com/eea/volto-cca-policy/commit/48d08b18f1e97e95ce66558a998b62a2ec745672)]
|
|
36
|
+
- Refs #267791 - Add test for MissionFundingCCAView. [GhitaB - [`2ef7e62`](https://github.com/eea/volto-cca-policy/commit/2ef7e62ef716f568641e280dcf56c91789d374f8)]
|
|
37
|
+
- Refs #267791 - Improve conditions for visible fields. [GhitaB - [`6fac780`](https://github.com/eea/volto-cca-policy/commit/6fac7800680df3858e7d5df7e3d3ec268c757470)]
|
|
38
|
+
- Refs #267791 - Add MissionFundingCCAView for mission_funding_cca. [GhitaB - [`8e6943f`](https://github.com/eea/volto-cca-policy/commit/8e6943f81cbfc4fc211762c0e556ef9d3ab99eb5)]
|
|
7
39
|
### [0.2.1](https://github.com/eea/volto-cca-policy/compare/0.2.0...0.2.1) - 5 April 2024
|
|
8
40
|
|
|
9
41
|
#### :bug: Bug Fixes
|
package/README.md
CHANGED
|
@@ -14,65 +14,8 @@
|
|
|
14
14
|
[](https://sonarqube.eea.europa.eu/dashboard?id=volto-cca-policy-develop)
|
|
15
15
|
[](https://sonarqube.eea.europa.eu/dashboard?id=volto-cca-policy-develop)
|
|
16
16
|
|
|
17
|
-
|
|
18
17
|
[Volto](https://github.com/plone/volto) add-on
|
|
19
18
|
|
|
20
|
-
## Features
|
|
21
|
-
|
|
22
|
-
Demo GIF
|
|
23
|
-
|
|
24
|
-
## Getting started
|
|
25
|
-
|
|
26
|
-
### Try volto-cca-policy with Docker
|
|
27
|
-
|
|
28
|
-
git clone https://github.com/eea/volto-cca-policy.git
|
|
29
|
-
cd volto-cca-policy
|
|
30
|
-
make
|
|
31
|
-
make start
|
|
32
|
-
|
|
33
|
-
Go to http://localhost:3000
|
|
34
|
-
|
|
35
|
-
### Add volto-cca-policy to your Volto project
|
|
36
|
-
|
|
37
|
-
1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
|
|
38
|
-
|
|
39
|
-
```Bash
|
|
40
|
-
docker compose up backend
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
1. Start Volto frontend
|
|
44
|
-
|
|
45
|
-
* If you already have a volto project, just update `package.json`:
|
|
46
|
-
|
|
47
|
-
```JSON
|
|
48
|
-
"addons": [
|
|
49
|
-
"@eeacms/volto-cca-policy"
|
|
50
|
-
],
|
|
51
|
-
|
|
52
|
-
"dependencies": {
|
|
53
|
-
"@eeacms/volto-cca-policy": "*"
|
|
54
|
-
}
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
* If not, create one:
|
|
58
|
-
|
|
59
|
-
```
|
|
60
|
-
npm install -g yo @plone/generator-volto
|
|
61
|
-
yo @plone/volto my-volto-project --canary --addon @eeacms/volto-cca-policy
|
|
62
|
-
cd my-volto-project
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
1. Install new add-ons and restart Volto:
|
|
66
|
-
|
|
67
|
-
```
|
|
68
|
-
yarn
|
|
69
|
-
yarn start
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
1. Go to http://localhost:3000
|
|
73
|
-
|
|
74
|
-
1. Happy editing!
|
|
75
|
-
|
|
76
19
|
## Release
|
|
77
20
|
|
|
78
21
|
See [RELEASE.md](https://github.com/eea/volto-cca-policy/blob/master/RELEASE.md).
|
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.3",
|
|
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
|
|
@@ -23,11 +23,16 @@ export default function RASTMap(props) {
|
|
|
23
23
|
|
|
24
24
|
const items = props.items;
|
|
25
25
|
let data = skip_items.split(',');
|
|
26
|
-
let
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
let currentMenu = activeMenu;
|
|
27
|
+
if (activeMenu !== null && data.includes(activeMenu.toString())) {
|
|
28
|
+
currentMenu = -1;
|
|
29
|
+
} else {
|
|
30
|
+
let activeMenuMinus = 0;
|
|
31
|
+
for (let i = 0; i < data.length; i++) {
|
|
32
|
+
if (data[i].length && data[i] <= activeMenu) activeMenuMinus++;
|
|
33
|
+
}
|
|
34
|
+
currentMenu -= activeMenuMinus;
|
|
29
35
|
}
|
|
30
|
-
let currentMenu = activeMenu - activeMenuMinus;
|
|
31
36
|
|
|
32
37
|
return (
|
|
33
38
|
<div className="rast-map-block">
|
|
@@ -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));
|