You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

OutlineItem.jsx 3.0 KiB

3 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. import React, { PureComponent } from 'react';
  2. import PropTypes from 'prop-types';
  3. import DocumentContext from './DocumentContext';
  4. import OutlineContext from './OutlineContext';
  5. import Ref from './Ref';
  6. import { isDefined } from './shared/utils';
  7. import { isPdf } from './shared/propTypes';
  8. export class OutlineItemInternal extends PureComponent {
  9. getDestination = async () => {
  10. const { item, pdf } = this.props;
  11. if (!isDefined(this.destination)) {
  12. if (typeof item.dest === 'string') {
  13. this.destination = await pdf.getDestination(item.dest);
  14. } else {
  15. this.destination = item.dest;
  16. }
  17. }
  18. return this.destination;
  19. }
  20. getPageIndex = async () => {
  21. const { pdf } = this.props;
  22. if (!isDefined(this.pageIndex)) {
  23. const destination = await this.getDestination();
  24. if (destination) {
  25. const [ref] = destination;
  26. this.pageIndex = await pdf.getPageIndex(new Ref(ref));
  27. }
  28. }
  29. return this.pageIndex;
  30. }
  31. getPageNumber = async () => {
  32. if (!isDefined(this.pageNumber)) {
  33. this.pageNumber = await this.getPageIndex() + 1;
  34. }
  35. return this.pageNumber;
  36. }
  37. onClick = async (event) => {
  38. const { onClick } = this.props;
  39. event.preventDefault();
  40. const pageIndex = await this.getPageIndex();
  41. const pageNumber = await this.getPageNumber();
  42. if (onClick) {
  43. onClick({
  44. pageIndex,
  45. pageNumber,
  46. });
  47. }
  48. }
  49. renderSubitems() {
  50. const { item, ...otherProps } = this.props;
  51. if (!item.items || !item.items.length) {
  52. return null;
  53. }
  54. const { items: subitems } = item;
  55. return (
  56. <ul>
  57. {
  58. subitems.map((subitem, subitemIndex) => (
  59. <OutlineItemInternal
  60. key={
  61. typeof subitem.destination === 'string'
  62. ? subitem.destination
  63. : subitemIndex
  64. }
  65. item={subitem}
  66. {...otherProps}
  67. />
  68. ))
  69. }
  70. </ul>
  71. );
  72. }
  73. render() {
  74. const { item } = this.props;
  75. /* eslint-disable jsx-a11y/anchor-is-valid */
  76. return (
  77. <li>
  78. <a
  79. href="#"
  80. onClick={this.onClick}
  81. >
  82. {item.title}
  83. </a>
  84. {this.renderSubitems()}
  85. </li>
  86. );
  87. }
  88. }
  89. const isDestination = PropTypes.oneOfType([
  90. PropTypes.string,
  91. PropTypes.arrayOf(PropTypes.any),
  92. ]);
  93. OutlineItemInternal.propTypes = {
  94. item: PropTypes.shape({
  95. dest: isDestination,
  96. items: PropTypes.arrayOf(PropTypes.shape({
  97. dest: isDestination,
  98. title: PropTypes.string,
  99. })),
  100. title: PropTypes.string,
  101. }).isRequired,
  102. onClick: PropTypes.func,
  103. pdf: isPdf.isRequired,
  104. };
  105. const OutlineItem = props => (
  106. <DocumentContext.Consumer>
  107. {documentContext => (
  108. <OutlineContext.Consumer>
  109. {outlineContext => (
  110. <OutlineItemInternal {...documentContext} {...outlineContext} {...props} />
  111. )}
  112. </OutlineContext.Consumer>
  113. )}
  114. </DocumentContext.Consumer>
  115. );
  116. export default OutlineItem;