52 |
53 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
54 | Proin lectus justo, varius eget tellus at, auctor suscipit tellus.
55 | Vestibulum ullamcorper urna non purus tempor, eget fermentum eros porta.
56 | Proin nulla enim, sagittis nec sagittis eu, faucibus eu erat.
57 | Etiam luctus molestie nisi aliquet malesuada.
58 | Quisque pellentesque sodales augue, in luctus enim posuere ac.
59 | Mauris posuere magna ac condimentum blandit. Proin hendrerit turpis ac vestibulum hendrerit.
60 | Quisque non interdum mi.
61 |
62 |
63 | Interdum et malesuada fames ac ante ipsum primis in faucibus.
64 | Aliquam nec sem quis dolor malesuada aliquam in at ipsum.
65 | Etiam blandit cursus sapien in molestie. Suspendisse pharetra ante elit, ut vehicula nisi faucibus sit amet.
66 | Donec faucibus eu nisi rhoncus finibus. Nunc ac rutrum sapien, in aliquet nunc.
67 | Sed at magna et enim facilisis hendrerit. Suspendisse tristique in quam in aliquam.
68 | In hac habitasse platea dictumst. Sed at elementum nulla.
69 |
70 |
71 | Nam quis tincidunt turpis. Ut egestas luctus lectus et tincidunt.
72 | Sed eget tellus ut lectus tempus iaculis. Phasellus porttitor ultricies mi ut aliquam.
73 | Etiam sollicitudin finibus nibh, vitae finibus sapien tempor scelerisque.
74 | Phasellus laoreet turpis sed lobortis facilisis.
75 | Integer venenatis lobortis ipsum, eget viverra ipsum sodales vitae.
76 | Interdum et malesuada fames ac ante ipsum primis in faucibus.
77 | Nam vitae orci feugiat, laoreet arcu a, hendrerit eros. Vivamus accumsan ante justo.
78 | In hac habitasse platea dictumst.
79 | Pellentesque fringilla, leo ut cursus viverra, ex nulla tempus diam, maximus dapibus augue magna ac nisi.
80 | Ut venenatis, diam sollicitudin euismod sollicitudin, sapien neque egestas nulla, quis venenatis dui metus id libero.
81 | Nulla pharetra, odio nec gravida dapibus, erat lectus aliquam tellus, eget consectetur risus nibh et lorem.
82 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue sem, laoreet a rhoncus ornare, dapibus consequat magna.
83 |
84 |
85 | Fusce id laoreet neque. Etiam tincidunt sem tortor, eu pharetra lorem tincidunt ut.
86 | Nulla tincidunt mattis felis convallis iaculis. Nunc viverra elit vel posuere mollis.
87 | Vivamus et ullamcorper orci, sagittis vestibulum nibh. Phasellus vitae neque aliquam, dignissim urna et, facilisis est.
88 | Nullam mollis lacinia quam, eu faucibus elit blandit vitae. Etiam tempus tempus fermentum.
89 | In eget urna rutrum, finibus purus non, interdum magna. Sed elementum a metus a elementum.
90 |
91 |
92 | Vestibulum interdum dapibus iaculis. Pellentesque a condimentum erat, non tempus erat.
93 | Sed pellentesque, arcu eget tristique facilisis, sapien ligula pharetra tellus, at malesuada nisl diam nec purus.
94 | Morbi aliquam ante erat, nec hendrerit enim malesuada vel. Sed in lorem quis enim aliquam consectetur eu nec leo.
95 | Nulla facilisi. Aenean malesuada risus sed tortor aliquam maximus.
96 |
97 | ,
98 | document.getElementById('react-shift-anchor')
99 | );
100 |
--------------------------------------------------------------------------------
/src/react-shift.jsx:
--------------------------------------------------------------------------------
1 | /* eslint react/no-did-mount-set-state:0 */
2 | import React, { Component } from 'react';
3 | import PropTypes from 'prop-types';
4 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
5 |
6 | import Arrow from './arrow.jsx';
7 | import Pagination from './pagination.jsx';
8 |
9 | import touchHandler from './touch-handler';
10 |
11 | class ReactShift extends Component {
12 | constructor(props) {
13 | super(props);
14 |
15 | this.state = {
16 | page: 0,
17 | pageCount: 0
18 | };
19 |
20 | this.next = this.next.bind(this);
21 | this.previous = this.previous.bind(this);
22 | this.setPage = this.setPage.bind(this);
23 | this.handleWheel = this.handleWheel.bind(this);
24 | this.handleTouch = this.handleTouch.bind(this);
25 | }
26 |
27 | componentWillMount() {
28 | // TODO move this out of componentDidMount
29 | const { children, scrollable } = this.props;
30 |
31 | this.setState({
32 | pageCount: children.length - 1,
33 | scrollable
34 | });
35 | }
36 |
37 | next() {
38 | const { page, pageCount } = this.state;
39 |
40 | if (page !== pageCount) {
41 | this.setState({ page: page + 1 });
42 | }
43 | }
44 |
45 | previous() {
46 | const { page } = this.state;
47 |
48 | if (page !== 0) {
49 | this.setState({ page: page - 1 });
50 | }
51 | }
52 |
53 | setPage(n) {
54 | this.setState({ page: n });
55 | }
56 |
57 | handleWheel(e) {
58 | const { scrollable } = this.props;
59 |
60 | if (scrollable) {
61 | if (e.deltaY > 0) {
62 | this.next();
63 | } else {
64 | this.previous();
65 | }
66 | }
67 | }
68 |
69 | handleTouch(e) {
70 | const { next, previous } = this;
71 |
72 | touchHandler(
73 | e.changedTouches[0].pageX,
74 | next,
75 | previous
76 | );
77 | }
78 |
79 | render() {
80 | const { fastLinks,
81 | fakeLinks,
82 | arrowLabels,
83 | transitions,
84 | children,
85 | classes,
86 | styles } = this.props;
87 | const { page, pageCount } = this.state;
88 |
89 | const filler = (
90 |