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;

Read our documentation on viewing source code .

Loading