react-pageflip/main.js at master · codence-x/react-pageflip · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('page-flip')) :
  typeof define === 'function' && define.amd ? define(['react', 'page-flip'], factory) :
  (global = global || self, global.HTMLFlipBook = factory(global.React, global.pageFlip));
}(this, (function (React, pageFlip) { 'use strict';

  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;

  class HTMLFlipBook extends React.Component {
    componentDidMount() {
      this.pageFlip = new pageFlip.PageFlip(this.el, this.props);

      this.pageFlip.loadFromHTML(this.childRef);
      this.setHandlers();
    }

    setHandlers() {
      if (this.props.onFlip)
        this.pageFlip.on("flip", (e) => this.props.onFlip(e));

      if (this.props.onChangeOrientation)
        this.pageFlip.on("changeOrientation", (e) =>
          this.props.onChangeOrientation(e)
        );

      if (this.props.onChangeState)
        this.pageFlip.on("changeState", (e) => this.props.onChangeState(e));

      if (this.props.onInit)
        this.pageFlip.on("init", (e) => this.props.onInit(e));

      if (this.props.onUpdate)
        this.pageFlip.on("update", (e) => this.props.onUpdate(e));
    }

    componentWillUnmount() {
      this.pageFlip.destroy();
      this.pageFlip = null;
    }

    componentDidUpdate(prevProps) {
      if (prevProps.children !== this.props.children) {
        this.pageFlip.off("flip");
        this.pageFlip.off("changeOrientation");
        this.pageFlip.off("changeState");
        this.pageFlip.off("init");
        this.pageFlip.off("update");

        this.pageFlip.updateFromHtml(this.childRef);
        this.setHandlers();
      }
    }

    getPageFlip() {
      return this.pageFlip;
    }

    render() {
      this.childRef = [];

      const childWithRef = React.Children.map(this.props.children, (child) => {
        return React.cloneElement(child, {
          ref: (dom) => {
            if (dom) this.childRef.push(dom);
          },
        });
      });

      return React.createElement(
        "div",
        {
          ref: (el) => (this.el = el),
          className: this.props.className,
          style: this.props.style,
        },
        childWithRef
      );
    }
  }

  return HTMLFlipBook;

})));