variable-react/example.js at gh-pages · dela3499/variable-react · 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
/** @jsx React.DOM */

var pluralize = function (singular, plural, num) {
        return num == 1 ? singular : plural;
    };

Number.prototype.formatMoney = function(c, d, t){
var n = this,
    c = isNaN(c = Math.abs(c)) ? 2 : c,
    d = d == undefined ? "." : d,
    t = t == undefined ? "," : t,
    s = n < 0 ? "-" : "",
    i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
    j = (j = i.length) > 3 ? j % 3 : 0;
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };

var SomeComponent = React.createClass({
    getInitialState: function () {
        return {payrate: 15,
               hours: 8,
               days: 5,
               weeks: 3};
    },
    render: function () {
        var t = this;
        var format = function (x) {
            var value = Math.floor(x),
                noun = value == 1 ? "banana" : "bananas";
            return value + " " + noun + " ";
        };
        var payrate = <Variable
                        value={t.state.payrate}
                        limits={[0,100]}
                        sensitivity={1}
                        format={function (value) {return "$" + value}}
                        transformation={function (x) {return Math.floor(x)}}
                        callback={function (x) {t.setState({payrate: x})}}
                      />,
            hours   = <Variable
                        value={t.state.hours}
                        limits={[0,24]}
                        sensitivity={1}
                        format={function (value) {return value + " " + pluralize("hour", "hours", value)}}
                        transformation={function (x) {return Math.floor(x)}}
                        callback={function (x) {t.setState({hours: x})}}
                      />,
            days    = <Variable
                        value={t.state.days}
                        limits={[0,7]}
                        sensitivity={1}
                        format={function (value) {
                            return value + " " + pluralize("day", "days", value)}}
                        transformation={function (x) {return Math.floor(x)}}
                        callback={function (x) {t.setState({days: x})}}
                      />,
            weeks   = <Variable
                        value={t.state.weeks}
                        limits={[0,10]}
                        sensitivity={1}
                        format={function (value) {return value + " " + pluralize("week", "weeks", value)}}
                        transformation={function (x) {return Math.floor(x)}}
                        callback={function (x) {t.setState({weeks: x})}}
                      />,
            rawTotal = Math.floor(t.state.payrate * t.state.hours * t.state.days * (52 - t.state.weeks)),
            total = "$" + (rawTotal).formatMoney(0);
        return (
            <div>
                <div className="explanation">Drag the underlined numbers up or down<br/> and see the annual earnings figure update. </div>
                I get paid {payrate} per hour. <br/>
                I work {hours} a day. <br/>
                I go to work {days} a week. <br/>

                <div id="total">So I make <span className="value">{total}</span> a year.</div>

            </div>
        );
    }
});


React.renderComponent(
    <SomeComponent/>,
    document.getElementById('content')
);