|
1
|
|
/* eslint-disable react/prop-types */
|
|
2
|
|
|
|
3
|
1
|
import React from 'react';
|
|
4
|
|
|
|
5
|
1
|
import { ADMIN_URLS, STRINGS, LOCALE_NAMES } from '../../config/wagtailConfig';
|
|
6
|
1
|
import Icon from '../../components/Icon/Icon';
|
|
7
|
1
|
import Button from '../../components/Button/Button';
|
|
8
|
1
|
import PublicationStatus from '../../components/PublicationStatus/PublicationStatus';
|
|
9
|
|
import { PageState } from './reducers/nodes';
|
|
10
|
|
|
|
11
|
|
// Hoist icons in the explorer item, as it is re-rendered many times.
|
|
12
|
|
const childrenIcon = (
|
|
13
|
1
|
<Icon name="folder-inverse" className="icon--menuitem" />
|
|
14
|
|
);
|
|
15
|
|
|
|
16
|
|
interface ExplorerItemProps {
|
|
17
|
|
item: PageState;
|
|
18
|
|
onClick(): void;
|
|
19
|
|
}
|
|
20
|
|
|
|
21
|
|
/**
|
|
22
|
|
* One menu item in the page explorer, with different available actions
|
|
23
|
|
* and information depending on the metadata of the page.
|
|
24
|
|
*/
|
|
25
|
1
|
const ExplorerItem: React.FunctionComponent<ExplorerItemProps> = ({ item, onClick }) => {
|
|
26
|
1
|
const { id, admin_display_title: title, meta } = item;
|
|
27
|
1
|
const hasChildren = meta.children.count > 0;
|
|
28
|
1
|
const isPublished = meta.status.live && !meta.status.has_unpublished_changes;
|
|
29
|
1
|
const localeName = meta.parent?.id === 1 && meta.locale && (LOCALE_NAMES.get(meta.locale) || meta.locale);
|
|
30
|
|
|
|
31
|
1
|
return (
|
|
32
|
|
<div className="c-explorer__item">
|
|
33
|
|
<Button href={`${ADMIN_URLS.PAGES}${id}/`} className="c-explorer__item__link">
|
|
34
|
1
|
{hasChildren ? childrenIcon : null}
|
|
35
|
|
|
|
36
|
|
<h3 className="c-explorer__item__title">
|
|
37
|
|
{title}
|
|
38
|
|
</h3>
|
|
39
|
|
|
|
40
|
1
|
{(!isPublished || localeName) &&
|
|
41
|
1
|
<span className="c-explorer__meta">
|
|
42
|
1
|
{localeName && <span className="o-pill c-status">{localeName}</span>}
|
|
43
|
1
|
{!isPublished && <PublicationStatus status={meta.status} />}
|
|
44
|
|
</span>
|
|
45
|
|
}
|
|
46
|
|
</Button>
|
|
47
|
|
<Button
|
|
48
|
|
href={`${ADMIN_URLS.PAGES}${id}/edit/`}
|
|
49
|
|
className="c-explorer__item__action c-explorer__item__action--small"
|
|
50
|
|
>
|
|
51
|
|
<Icon name="edit" title={STRINGS.EDIT_PAGE.replace('{title}', title)} className="icon--item-action" />
|
|
52
|
|
</Button>
|
|
53
|
|
{hasChildren ? (
|
|
54
|
1
|
<Button
|
|
55
|
|
className="c-explorer__item__action"
|
|
56
|
|
onClick={onClick}
|
|
57
|
|
href={`${ADMIN_URLS.PAGES}${id}/`}
|
|
58
|
|
>
|
|
59
|
|
<Icon
|
|
60
|
|
name="arrow-right"
|
|
61
|
|
title={STRINGS.VIEW_CHILD_PAGES_OF_PAGE.replace('{title}', title)}
|
|
62
|
|
className="icon--item-action"
|
|
63
|
|
/>
|
|
64
|
|
</Button>
|
|
65
|
1
|
) : null}
|
|
66
|
|
</div>
|
|
67
|
|
);
|
|
68
|
|
};
|
|
69
|
|
|
|
70
|
1
|
export default ExplorerItem;
|
kaedroho