Skip to content

Commit 7302893

Browse files
ahstroaaronshaf
ahstro
authored and
aaronshaf
committed
Use newer React and JS features (aaronshaf#60)
* Use newer React features Use newer features, like stateless functions for the Check and X, and ES6 class syntax for the main component. * Add linting (aaronshaf#62) * Add ESLint with standard and standard-react configs * Fix all lint errors
1 parent e0ed4f8 commit 7302893

13 files changed

+720
-736
lines changed

‎.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist/
2+
**/*bundle.js

‎.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["standard", "standard-react"]
3+
}

‎dist/check.js

+14-17
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
1-
"use strict";
1+
'use strict';
22

33
Object.defineProperty(exports, "__esModule", {
44
value: true
55
});
66

7-
var _react = require("react");
7+
var _react = require('react');
88

99
var _react2 = _interopRequireDefault(_react);
1010

1111
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1212

13-
exports.default = _react2.default.createClass({
14-
displayName: "check",
15-
render: function render() {
16-
return _react2.default.createElement(
17-
"svg",
18-
{ width: "14", height: "11", viewBox: "0 0 14 11" },
19-
_react2.default.createElement(
20-
"title",
21-
null,
22-
"switch-check"
23-
),
24-
_react2.default.createElement("path", { d: "M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0", fill: "#fff", fillRule: "evenodd" })
25-
);
26-
}
27-
});
13+
exports.default = function () {
14+
return _react2.default.createElement(
15+
'svg',
16+
{ width: '14', height: '11', viewBox: '0 0 14 11' },
17+
_react2.default.createElement(
18+
'title',
19+
null,
20+
'switch-check'
21+
),
22+
_react2.default.createElement('path', { d: 'M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0', fill: '#fff', fillRule: 'evenodd' })
23+
);
24+
};

‎dist/index.js

+107-84
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
66

77
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
88

9+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10+
911
var _react = require('react');
1012

1113
var _react2 = _interopRequireDefault(_react);
@@ -22,100 +24,121 @@ var _x = require('./x');
2224

2325
var _x2 = _interopRequireDefault(_x);
2426

25-
var _reactAddonsPureRenderMixin = require('react-addons-pure-render-mixin');
27+
var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
2628

27-
var _reactAddonsPureRenderMixin2 = _interopRequireDefault(_reactAddonsPureRenderMixin);
29+
var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
2830

2931
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
3032

31-
exports.default = _react2.default.createClass({
32-
mixins: [_reactAddonsPureRenderMixin2.default],
33-
34-
displayName: 'Toggle',
35-
36-
propTypes: {
37-
checked: _react2.default.PropTypes.bool,
38-
defaultChecked: _react2.default.PropTypes.bool,
39-
onChange: _react2.default.PropTypes.func,
40-
name: _react2.default.PropTypes.string,
41-
value: _react2.default.PropTypes.string,
42-
id: _react2.default.PropTypes.string,
43-
'aria-labelledby': _react2.default.PropTypes.string,
44-
'aria-label': _react2.default.PropTypes.string
45-
},
46-
47-
getInitialState: function getInitialState() {
48-
var checked = false;
49-
if ('checked' in this.props) {
50-
checked = this.props.checked;
51-
} else if ('defaultChecked' in this.props) {
52-
checked = this.props.defaultChecked;
53-
}
54-
return {
55-
checked: !!checked,
33+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
34+
35+
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
36+
37+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
38+
39+
var Toggle = function (_Component) {
40+
_inherits(Toggle, _Component);
41+
42+
function Toggle(props) {
43+
_classCallCheck(this, Toggle);
44+
45+
var _this = _possibleConstructorReturn(this, (Toggle.__proto__ || Object.getPrototypeOf(Toggle)).call(this, props));
46+
47+
_this.handleClick = _this.handleClick.bind(_this);
48+
_this.handleFocus = _this.setState.bind(_this, { hasFocus: true });
49+
_this.handleBlur = _this.setState.bind(_this, { hasFocus: false });
50+
_this.state = {
51+
checked: !!(props.checked || props.defaultChecked),
5652
hasFocus: false
5753
};
58-
},
59-
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
60-
if ('checked' in nextProps) {
61-
this.setState({ checked: !!nextProps.checked });
54+
return _this;
55+
}
56+
57+
_createClass(Toggle, [{
58+
key: 'componentWillReceiveProps',
59+
value: function componentWillReceiveProps(nextProps) {
60+
if ('checked' in nextProps) {
61+
this.setState({ checked: !!nextProps.checked });
62+
}
6263
}
63-
},
64-
handleClick: function handleClick(event) {
65-
var checkbox = this.input;
66-
if (event.target !== checkbox) {
67-
event.preventDefault();
68-
checkbox.focus();
69-
checkbox.click();
70-
return;
64+
}, {
65+
key: 'handleClick',
66+
value: function handleClick(event) {
67+
var checkbox = this.input;
68+
if (event.target !== checkbox) {
69+
event.preventDefault();
70+
checkbox.focus();
71+
checkbox.click();
72+
return;
73+
}
74+
75+
if (!('checked' in this.props)) {
76+
this.setState({ checked: checkbox.checked });
77+
}
7178
}
72-
73-
if (!('checked' in this.props)) {
74-
this.setState({ checked: checkbox.checked });
79+
}, {
80+
key: 'shouldComponentUpdate',
81+
value: function shouldComponentUpdate(nextProps, nextState) {
82+
return (0, _reactAddonsShallowCompare2.default)(this, nextProps, nextState);
7583
}
76-
},
77-
handleFocus: function handleFocus() {
78-
this.setState({ hasFocus: true });
79-
},
80-
handleBlur: function handleBlur() {
81-
this.setState({ hasFocus: false });
82-
},
83-
render: function render() {
84-
var _this = this;
85-
86-
var classes = (0, _classnames2.default)('react-toggle', {
87-
'react-toggle--checked': this.state.checked,
88-
'react-toggle--focus': this.state.hasFocus,
89-
'react-toggle--disabled': this.props.disabled
90-
});
91-
92-
return _react2.default.createElement(
93-
'div',
94-
{ className: classes, onClick: this.handleClick },
95-
_react2.default.createElement(
84+
}, {
85+
key: 'render',
86+
value: function render() {
87+
var _this2 = this;
88+
89+
var classes = (0, _classnames2.default)('react-toggle', {
90+
'react-toggle--checked': this.state.checked,
91+
'react-toggle--focus': this.state.hasFocus,
92+
'react-toggle--disabled': this.props.disabled
93+
});
94+
95+
return _react2.default.createElement(
9696
'div',
97-
{ className: 'react-toggle-track' },
97+
{ className: classes, onClick: this.handleClick },
9898
_react2.default.createElement(
9999
'div',
100-
{ className: 'react-toggle-track-check' },
101-
_react2.default.createElement(_check2.default, null)
100+
{ className: 'react-toggle-track' },
101+
_react2.default.createElement(
102+
'div',
103+
{ className: 'react-toggle-track-check' },
104+
_react2.default.createElement(_check2.default, null)
105+
),
106+
_react2.default.createElement(
107+
'div',
108+
{ className: 'react-toggle-track-x' },
109+
_react2.default.createElement(_x2.default, null)
110+
)
102111
),
103-
_react2.default.createElement(
104-
'div',
105-
{ className: 'react-toggle-track-x' },
106-
_react2.default.createElement(_x2.default, null)
107-
)
108-
),
109-
_react2.default.createElement('div', { className: 'react-toggle-thumb' }),
110-
_react2.default.createElement('input', _extends({
111-
ref: function ref(_ref) {
112-
_this.input = _ref;
113-
},
114-
onFocus: this.handleFocus,
115-
onBlur: this.handleBlur,
116-
className: 'react-toggle-screenreader-only',
117-
type: 'checkbox'
118-
}, this.props))
119-
);
120-
}
121-
});
112+
_react2.default.createElement('div', { className: 'react-toggle-thumb' }),
113+
_react2.default.createElement('input', _extends({
114+
ref: function ref(_ref) {
115+
_this2.input = _ref;
116+
},
117+
onFocus: this.handleFocus,
118+
onBlur: this.handleBlur,
119+
className: 'react-toggle-screenreader-only',
120+
type: 'checkbox'
121+
}, this.props))
122+
);
123+
}
124+
}]);
125+
126+
return Toggle;
127+
}(_react.Component);
128+
129+
exports.default = Toggle;
130+
131+
132+
Toggle.displayName = 'Toggle';
133+
134+
Toggle.propTypes = {
135+
checked: _react.PropTypes.bool,
136+
disabled: _react.PropTypes.bool,
137+
defaultChecked: _react.PropTypes.bool,
138+
onChange: _react.PropTypes.func,
139+
name: _react.PropTypes.string,
140+
value: _react.PropTypes.string,
141+
id: _react.PropTypes.string,
142+
'aria-labelledby': _react.PropTypes.string,
143+
'aria-label': _react.PropTypes.string
144+
};

‎dist/x.js

+14-17
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
1-
"use strict";
1+
'use strict';
22

33
Object.defineProperty(exports, "__esModule", {
44
value: true
55
});
66

7-
var _react = require("react");
7+
var _react = require('react');
88

99
var _react2 = _interopRequireDefault(_react);
1010

1111
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1212

13-
exports.default = _react2.default.createClass({
14-
displayName: "x",
15-
render: function render() {
16-
return _react2.default.createElement(
17-
"svg",
18-
{ width: "10", height: "10", viewBox: "0 0 10 10" },
19-
_react2.default.createElement(
20-
"title",
21-
null,
22-
"switch-x"
23-
),
24-
_react2.default.createElement("path", { d: "M9.9 2.12L7.78 0 4.95 2.828 2.12 0 0 2.12l2.83 2.83L0 7.776 2.123 9.9 4.95 7.07 7.78 9.9 9.9 7.776 7.072 4.95 9.9 2.12", fill: "#fff", fillRule: "evenodd" })
25-
);
26-
}
27-
});
13+
exports.default = function () {
14+
return _react2.default.createElement(
15+
'svg',
16+
{ width: '10', height: '10', viewBox: '0 0 10 10' },
17+
_react2.default.createElement(
18+
'title',
19+
null,
20+
'switch-x'
21+
),
22+
_react2.default.createElement('path', { d: 'M9.9 2.12L7.78 0 4.95 2.828 2.12 0 0 2.12l2.83 2.83L0 7.776 2.123 9.9 4.95 7.07 7.78 9.9 9.9 7.776 7.072 4.95 9.9 2.12', fill: '#fff', fillRule: 'evenodd' })
23+
);
24+
};

0 commit comments

Comments
 (0)