goToPage(pageIndex)} />
24 | }
25 |
26 | PageIndicatorButton.propTypes = {
27 | goToPage: PropTypes.func,
28 | pageIndex: PropTypes.number,
29 | active: PropTypes.bool,
30 | indicatorStyle: PropTypes.object,
31 | indicatorStyleActive: PropTypes.object
32 | }
33 | PageIndicatorButton.defaultProps = {
34 | pageIndex: 1,
35 | active: false,
36 | indicatorStyle: {
37 | height: '8px',
38 | width: '8px',
39 | margin: '10px',
40 | borderRadius: '4px',
41 | backgroundColor: 'white',
42 | transition: 'width 500ms ease'
43 | },
44 | indicatorStyleActive: { width: '20px' }
45 | }
46 |
47 | export default PageIndicatorButton
48 |
--------------------------------------------------------------------------------
/src/PageNav.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const PageNav = (props) => {
5 | const { goToPage, navButtons } = props
6 | const renderButtons = () => {
7 | const buttons = []
8 | navButtons.map((buttonInfo, i) => {
9 | buttons.push(
10 |
goToPage(buttonInfo.index)}
13 | style={buttonInfo.style}
14 | key={i}
15 | >
16 | {buttonInfo.title}
17 |
18 | )
19 | })
20 |
21 | return buttons
22 | }
23 | return
{renderButtons()}
24 | }
25 |
26 | PageNav.propTypes = {
27 | navButtons: PropTypes.array,
28 | goToPage: PropTypes.func
29 | }
30 |
31 | PageNav.defaultProps = {
32 | navButtons: [],
33 | goToPage: () => {}
34 | }
35 |
36 | export default PageNav
37 |
--------------------------------------------------------------------------------
/src/PageScroller.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PageNav from './PageNav'
3 | import Page from './Page'
4 | import PageIndicator from './PageIndicator'
5 | import { getValidChildren } from './helper'
6 |
7 | export default class PageScroller extends React.Component {
8 | constructor(props) {
9 | super(props)
10 |
11 | this.state = {
12 | scrollPos: 0,
13 | pageIndex: 0,
14 | scrollAgain: true,
15 | children: null
16 | }
17 |
18 | this.pages = 0
19 | this.scrollLocker = () => {}
20 | }
21 |
22 | componentDidMount = () => {
23 | const { children: childrenProp } = this.props
24 | this.setState({ children: getValidChildren(childrenProp) })
25 | window.addEventListener('scroll', this.handleScroll)
26 | }
27 |
28 | componentWillUnmount = () => {
29 | window.removeEventListener('scroll', this.handleScroll)
30 | }
31 |
32 | handleScroll = () => {
33 | const scrollPos = this.state.scrollPos
34 | const pageIndex = this.state.pageIndex
35 | const winHeight = window.innerHeight
36 |
37 | if (this.state.scrollAgain) {
38 | if (document.body.getBoundingClientRect().top > scrollPos) {
39 | // handle scroll up
40 | if (pageIndex - 1 >= 0) {
41 | // pageIndex--;
42 | this.scroll(winHeight, pageIndex - 1)
43 | }
44 | } else {
45 | // handle scroll down
46 | if (pageIndex + 1 <= this.pages - 1) {
47 | // pageIndex++;
48 | this.scroll(winHeight, pageIndex + 1)
49 | }
50 | }
51 | } else {
52 | // scroll to current position if scrolling is disabled
53 | window.scrollTo(0, pageIndex * winHeight)
54 | }
55 | }
56 |
57 | scroll = (winHeight, pageIndex) => {
58 | window.scrollTo(0, winHeight * pageIndex)
59 |
60 | this.scrollLocker = setTimeout(() => {
61 | this.setState({ scrollAgain: true })
62 | }, 1000)
63 |
64 | this.setState({
65 | scrollPos: document.body.getBoundingClientRect().top,
66 | pageIndex: pageIndex,
67 | scrollAgain: false
68 | })
69 | }
70 |
71 | goToPage = (index) => {
72 | this.scroll(window.innerHeight, index)
73 | }
74 |
75 | renderChildren = () => {
76 | const childElements = []
77 | let pageIndicator
78 | let pageNav
79 | const navButtons = []
80 | const indicatorArray = []
81 | let pageCount = 0
82 |
83 | const { children } = this.state
84 | if (children && children.length > 0) {
85 | React.Children.map(children, (child, i) => {
86 | if (child.type === Page) {
87 | if (child.props.pageNav && child.props.pageNav.length > 0) {
88 | const { title, className, style } = child.props.pageNav[pageCount]
89 | if (title) {
90 | navButtons.push({
91 | index: pageCount,
92 | title: title,
93 | className: className || null,
94 | style: style || {}
95 | })
96 | }
97 | }
98 |
99 | pageCount++
100 | childElements.push(child)
101 | } else if (child.type === PageIndicator) {
102 | if (child.props.indicatorStyle || child.props.indicatorStyleActive) {
103 | const { indicatorStyle, indicatorStyleActive } = child.props
104 | indicatorArray.push({
105 | indicatorStyle: indicatorStyle,
106 | indicatorStyleActive: indicatorStyleActive
107 | })
108 | }
109 | pageIndicator = child
110 | } else if (child.type === PageNav) {
111 | pageNav = child
112 | }
113 | })
114 | }
115 |
116 | this.pages = pageCount
117 |
118 | if (pageIndicator) {
119 | childElements.push(
120 | React.cloneElement(pageIndicator, {
121 | pageCount: this.pages,
122 | activePage: this.state.pageIndex,
123 | goToPage: this.goToPage,
124 | indicatorArray: indicatorArray
125 | })
126 | )
127 | }
128 |
129 | if (pageNav) {
130 | childElements.push(
131 | React.cloneElement(pageNav, {
132 | goToPage: this.goToPage,
133 | navButtons: navButtons
134 | })
135 | )
136 | }
137 |
138 | return childElements
139 | }
140 |
141 | render() {
142 | return
{this.renderChildren()}
143 | }
144 | }
145 |
--------------------------------------------------------------------------------
/src/helper.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const getValidChildren = (children) => {
4 | return React.Children.toArray(children).filter((child) =>
5 | React.isValidElement(child)
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PageNav from './PageNav'
3 | import PageScroller from './PageScroller'
4 | import PageIndicator from './PageIndicator'
5 | import Page from './Page'
6 | import PropTypes from 'prop-types'
7 |
8 | export const FullPage = (props) => {
9 | const { pageNav, indicatorStyle, indicatorStyleActive, children } = props
10 | if (typeof window !== 'undefined') {
11 | return (
12 |
13 | {pageNav && pageNav.length > 0 && }
14 | {indicatorStyle && (
15 |
19 | )}
20 | {React.Children.toArray(children).map((child, id) => {
21 | return (
22 |
23 | {child}
24 |
25 | )
26 | })}
27 |
28 | )
29 | } else {
30 | return null
31 | }
32 | }
33 |
34 | FullPage.propTypes = {
35 | children: PropTypes.node.isRequired,
36 | indicatorStyle: PropTypes.object,
37 | pageNav: PropTypes.array
38 | }
39 |
40 | FullPage.defaultProps = {
41 | indicator: null,
42 | pageNav: null
43 | }
44 |
45 | export default FullPage
46 |
--------------------------------------------------------------------------------
/src/index.test.js:
--------------------------------------------------------------------------------
1 | import { ExampleComponent } from '.'
2 |
3 | describe('ExampleComponent', () => {
4 | it('is truthy', () => {
5 | expect(ExampleComponent).toBeTruthy()
6 | })
7 | })
8 |
--------------------------------------------------------------------------------
77 |