sam-samples/react-spinner/index.html at master · jdubray/sam-samples · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Basic CSS Spinner Example with JSX</title>
    <!-- Spinner CSS Created by Luke Haas
         https://twitter.com/lukehaas
         http://projects.lukehaas.me/css-loaders/
    -->
    <style type="text/css">
    .loader,
    .loader:before,
    .loader:after {
      background: #ffffff;
      -webkit-animation: load1 1s infinite ease-in-out;
      animation: load1 1s infinite ease-in-out;
      width: 1em;
      height: 4em;
    }
    .loader:before,
    .loader:after {
      position: absolute;
      top: 0;
      content: '';
    }
    .loader:before {
      left: -1.5em;
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    .loader {
      color: #000000;
      text-indent: -9999em;
      margin: 88px auto;
      position: relative;
      font-size: 11px;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
    .loader:after {
      left: 1.5em;
    }
    @-webkit-keyframes load1 {
      0%,
      80%,
      100% {
        box-shadow: 0 0;
        height: 4em;
      }
      40% {
        box-shadow: 0 -2em;
        height: 5em;
      }
    }
    @keyframes load1 {
      0%,
      80%,
      100% {
        box-shadow: 0 0;
        height: 4em;
      }
      40% {
        box-shadow: 0 -2em;
        height: 5em;
      }
    }

    </style>
  </head>
  <body>
    <h1>SAM Implementation of the Basic Spinner Example with JSX</h1>
    <div id="container" style="height: 300px;">
      <p>
        To install React, follow the instructions on
        <a href="https://github.com/facebook/react/">GitHub</a>.
      </p>
      <p>
        If you can see this, React is <strong>not</strong> working right.
        If you checked out the source from GitHub make sure to run <code>grunt</code>.
      </p>
    </div>
    <br><br>
    <h4>Example Details</h4>
    <p>This is written with with React, using JSX and transformed in the browser.</p>
    <p>This example has been implemented following the SAM pattern which makes the view components stateless.</p>
    <p>
      Learn more about SAM at
      <a href="https://sam.js.org/" target="_blank">sam.js.org</a>.<br>
      Learn more about React at
      <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
    </p>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
    <script type="text/babel">

        // modified by Jean-Jacques Dubray  jdubray@xgen.io

        // SAM Implementation

        // Theme (View components)
        var theme = { }

        theme.spinner = (a) => <Spinner action={a}/>

        theme.display = (m) => ReactDOM.render(
                              <SAMContainer model={m}/>,
                              document.getElementById('container')
                             )


        var Spinner = ({action}) =>  (
            <div id="spinner-component">
                <button onClick={() => {
                        action({spinner: "spinner"})
                        document.getElementById("spinner").className = "loader"
                    }
                }>
                  Start spinning!
                </button>
                <div id="spinner" className=""></div>
            </div>
          )


        // App Container
        // With React, we have to implement SAM in a "container" class
        // model, actions and state are in the same container

        var SAMContainer = React.createClass({

            // Model -------------------------------------------------------
            getInitialState: function() {
                return this.props.model
            },

            present: function(data) {
                if (data.spinning) {
                    this.setState( {spinner: data.spinner} )
                }
            },


            // Actions -----------------------------------------------------
            click: function(data) {
                // spin for 5 second
                setTimeout(() => {
                    console.log('ready to stop spinning') ;
                    this.present({spinning:true, spinner: data.spinner})
                }, 5000);
            },


            // State -------------------------------------------------------
            nap: function() {
                // there are no automatic action in this example
            },

            render: function() {
                // stop spinning
                if (this.state.spinner !== undefined) {
                    document.getElementById(this.state.spinner).className = ""
                }

                this.nap()

                return theme.spinner(this.click)
            }

        })

        // init
        theme.display({ })

    </script>
  </body>
</html>