SubNavButtons.jsx 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import AppContainer from '~/client/services/AppContainer';
  4. import NavigationContainer from '~/client/services/NavigationContainer';
  5. import PageContainer from '~/client/services/PageContainer';
  6. import { withUnstatedContainers } from '../UnstatedUtils';
  7. import BookmarkButton from '../BookmarkButton';
  8. import LikeButtons from '../LikeButtons';
  9. import SubscribeButton from '../SubscribeButton';
  10. import PageManagement from '../Page/PageManagement';
  11. const SubnavButtons = (props) => {
  12. const {
  13. appContainer, navigationContainer, pageContainer, isCompactMode,
  14. } = props;
  15. /* eslint-disable react/prop-types */
  16. const PageReactionButtons = ({ pageContainer }) => {
  17. return (
  18. <>
  19. <span>
  20. <SubscribeButton pageId={pageContainer.state.pageId} />
  21. </span>
  22. {pageContainer.isAbleToShowLikeButtons && (
  23. <span>
  24. <LikeButtons />
  25. </span>
  26. )}
  27. <span>
  28. <BookmarkButton />
  29. </span>
  30. </>
  31. );
  32. };
  33. /* eslint-enable react/prop-types */
  34. const { editorMode } = navigationContainer.state;
  35. const isViewMode = editorMode === 'view';
  36. return (
  37. <>
  38. {isViewMode && (
  39. <>
  40. {pageContainer.isAbleToShowPageReactionButtons && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} />}
  41. {pageContainer.isAbleToShowPageManagement && <PageManagement isCompactMode={isCompactMode} />}
  42. </>
  43. )}
  44. </>
  45. );
  46. };
  47. /**
  48. * Wrapper component for using unstated
  49. */
  50. const SubnavButtonsWrapper = withUnstatedContainers(SubnavButtons, [AppContainer, NavigationContainer, PageContainer]);
  51. SubnavButtons.propTypes = {
  52. appContainer: PropTypes.instanceOf(AppContainer).isRequired,
  53. navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
  54. pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
  55. isCompactMode: PropTypes.bool,
  56. };
  57. export default SubnavButtonsWrapper;