From 37323148442465c872907805ee442567c1c0e3ce Mon Sep 17 00:00:00 2001 From: Honza2 Date: Wed, 10 Aug 2016 20:21:59 +0700 Subject: [PATCH 1/4] Rewrite component as ES6 class --- dist/index.js | 181 +++++++++++++++++++++++++++++++------------------- src/index.jsx | 121 +++++++++++++++++---------------- 2 files changed, 178 insertions(+), 124 deletions(-) diff --git a/dist/index.js b/dist/index.js index 71ea7d0..ab31b6d 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,83 +1,130 @@ 'use strict'; +Object.defineProperty(exports, "__esModule", { + value: true +}); + 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; }; +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; }; }(); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _geminiScrollbar = require('gemini-scrollbar'); + +var _geminiScrollbar2 = _interopRequireDefault(_geminiScrollbar); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } -var React = require('react'); -var ReactDOM = require('react-dom'); -var GeminiScrollbar = require('gemini-scrollbar'); +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +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; } + +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; } + +var GeminiScrollbar = function (_Component) { + _inherits(GeminiScrollbar, _Component); + + function GeminiScrollbar() { + var _Object$getPrototypeO; + + var _temp, _this, _ret; -module.exports = React.createClass({ - displayName: 'GeminiScrollbar', + _classCallCheck(this, GeminiScrollbar); - propTypes: { - autoshow: React.PropTypes.bool, - forceGemini: React.PropTypes.bool - }, + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } - getDefaultProps: function getDefaultProps() { - return { - autoshow: false, - forceGemini: false - }; - }, + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(GeminiScrollbar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.scrollbar = null, _temp), _possibleConstructorReturn(_this, _ret); + } + _createClass(GeminiScrollbar, [{ + key: 'getDefaultProps', + value: function getDefaultProps() { + return { + autoshow: false, + forceGemini: false + }; + } /** * Holds the reference to the GeminiScrollbar instance. * @property scrollbar [Object] */ - scrollbar: null, - - componentDidMount: function componentDidMount() { - this.scrollbar = new GeminiScrollbar({ - element: ReactDOM.findDOMNode(this), - autoshow: this.props.autoshow, - forceGemini: this.props.forceGemini, - createElements: false - }).create(); - }, - componentDidUpdate: function componentDidUpdate() { - this.scrollbar.update(); - }, - componentWillUnmount: function componentWillUnmount() { - if (this.scrollbar) { - this.scrollbar.destroy(); - } - this.scrollbar = null; - }, - render: function render() { - var _props = this.props; - var className = _props.className; - var children = _props.children; - var autoshow = _props.autoshow; - var forceGemini = _props.forceGemini; - var other = _objectWithoutProperties(_props, ['className', 'children', 'autoshow', 'forceGemini']); - var classes = ''; - - if (className) { - classes += ' ' + className; - } - - return React.createElement( - 'div', - _extends({}, other, { className: classes }), - React.createElement( - 'div', - { className: 'gm-scrollbar -vertical' }, - React.createElement('div', { className: 'thumb' }) - ), - React.createElement( - 'div', - { className: 'gm-scrollbar -horizontal' }, - React.createElement('div', { className: 'thumb' }) - ), - React.createElement( - 'div', - { className: 'gm-scroll-view', ref: 'scroll-view' }, - children - ) - ); + + }, { + key: 'componentDidMount', + value: function componentDidMount() { + console.log(this.refs.container); + this.scrollbar = new _geminiScrollbar2.default({ + element: this.refs.container, + autoshow: this.props.autoshow, + forceGemini: this.props.forceGemini, + createElements: false + }).create(); } -}); + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + this.scrollbar.update(); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + if (this.scrollbar) { + this.scrollbar.destroy(); + } + this.scrollbar = null; + } + }, { + key: 'render', + value: function render() { + var _props = this.props; + var className = _props.className; + var children = _props.children; + var autoshow = _props.autoshow; + var forceGemini = _props.forceGemini; + + var other = _objectWithoutProperties(_props, ['className', 'children', 'autoshow', 'forceGemini']); + + var classes = ''; + + if (className) { + classes += ' ' + className; + } + + return _react2.default.createElement( + 'div', + _extends({ className: classes, ref: 'container' }, other), + _react2.default.createElement( + 'div', + { className: 'gm-scrollbar -vertical' }, + _react2.default.createElement('div', { className: 'thumb' }) + ), + _react2.default.createElement( + 'div', + { className: 'gm-scrollbar -horizontal' }, + _react2.default.createElement('div', { className: 'thumb' }) + ), + _react2.default.createElement( + 'div', + { className: 'gm-scroll-view', ref: 'scroll-view' }, + children + ) + ); + } + }]); + + return GeminiScrollbar; +}(_react.Component); + +GeminiScrollbar.propTypes = { + autoshow: _react2.default.PropTypes.bool, + forceGemini: _react2.default.PropTypes.bool +}; +exports.default = GeminiScrollbar; diff --git a/src/index.jsx b/src/index.jsx index 3f04140..9826e52 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,68 +1,75 @@ -var React = require('react'); -var ReactDOM = require('react-dom'); -var GeminiScrollbar = require('gemini-scrollbar'); -module.exports = React.createClass({ - displayName: 'GeminiScrollbar', +import React, { Component } from 'react'; +import Gemini from 'gemini-scrollbar'; - propTypes: { - autoshow: React.PropTypes.bool, - forceGemini: React.PropTypes.bool - }, +export default class GeminiScrollbar extends Component { + static propTypes = { + autoshow: React.PropTypes.bool, + forceGemini: React.PropTypes.bool + }; - getDefaultProps() { - return { - autoshow: false, - forceGemini: false - } - }, + getDefaultProps() { + return { + autoshow: false, + forceGemini: false + } + } - /** - * Holds the reference to the GeminiScrollbar instance. - * @property scrollbar [Object] - */ - scrollbar: null, + /** + * Holds the reference to the GeminiScrollbar instance. + * @property scrollbar [Object] + */ + scrollbar = null; - componentDidMount() { - this.scrollbar = new GeminiScrollbar({ - element: ReactDOM.findDOMNode(this), - autoshow: this.props.autoshow, - forceGemini: this.props.forceGemini, - createElements: false - }).create(); - }, + componentDidMount() { + console.log(this.refs.container); + this.scrollbar = new Gemini({ + element: this.refs.container, + autoshow: this.props.autoshow, + forceGemini: this.props.forceGemini, + createElements: false + }).create(); + } - componentDidUpdate() { - this.scrollbar.update(); - }, + componentDidUpdate() { + this.scrollbar.update(); + } - componentWillUnmount() { - if (this.scrollbar) { - this.scrollbar.destroy(); - } - this.scrollbar = null; - }, + componentWillUnmount() { + if (this.scrollbar) { + this.scrollbar.destroy(); + } + this.scrollbar = null; + } - render() { - var {className, children, autoshow, forceGemini, ...other} = this.props, - classes = ''; + render() { + const { + className, + children, + autoshow, + forceGemini, + ...other + } = this.props; - if (className) { - classes += ' ' + className; - } + let classes = ''; - return ( -
-
-
-
-
-
-
-
- {children} -
-
- ); + if (className) { + classes += ` ${className}`; } -}); + + return ( +
+
+
+
+
+
+
+
+ {children} +
+
+ ); + } +} + From 780680b1246959f368d4848164f0551893bc8fda Mon Sep 17 00:00:00 2001 From: Honza2 Date: Wed, 10 Aug 2016 20:35:15 +0700 Subject: [PATCH 2/4] fix typo --- src/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.jsx b/src/index.jsx index 9826e52..ae33da9 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -12,7 +12,8 @@ export default class GeminiScrollbar extends Component { return { autoshow: false, forceGemini: false - } + }; + } } /** @@ -22,7 +23,6 @@ export default class GeminiScrollbar extends Component { scrollbar = null; componentDidMount() { - console.log(this.refs.container); this.scrollbar = new Gemini({ element: this.refs.container, autoshow: this.props.autoshow, From 64baf784de786f4e7298a9435bc0a45d5691a2e7 Mon Sep 17 00:00:00 2001 From: Honza2 Date: Wed, 10 Aug 2016 20:35:39 +0700 Subject: [PATCH 3/4] add child context support --- src/index.jsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/index.jsx b/src/index.jsx index ae33da9..7bdfdcd 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -8,12 +8,23 @@ export default class GeminiScrollbar extends Component { forceGemini: React.PropTypes.bool }; + static childContextTypes = { + geminiScrollbar: React.PropTypes.object + }; + getDefaultProps() { return { autoshow: false, forceGemini: false }; } + + getChildContext() { + return { + geminiScrollbar: { + get: () => this.scrollbar + } + }; } /** From 72c26f9b4e8202b6b26570558b74113911df8385 Mon Sep 17 00:00:00 2001 From: Honza2 Date: Wed, 10 Aug 2016 20:36:56 +0700 Subject: [PATCH 4/4] add build --- dist/index.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/dist/index.js b/dist/index.js index ab31b6d..0da1fb5 100644 --- a/dist/index.js +++ b/dist/index.js @@ -51,6 +51,19 @@ var GeminiScrollbar = function (_Component) { forceGemini: false }; } + }, { + key: 'getChildContext', + value: function getChildContext() { + var _this2 = this; + + return { + geminiScrollbar: { + get: function get() { + return _this2.scrollbar; + } + } + }; + } /** * Holds the reference to the GeminiScrollbar instance. @@ -60,7 +73,6 @@ var GeminiScrollbar = function (_Component) { }, { key: 'componentDidMount', value: function componentDidMount() { - console.log(this.refs.container); this.scrollbar = new _geminiScrollbar2.default({ element: this.refs.container, autoshow: this.props.autoshow, @@ -127,4 +139,7 @@ GeminiScrollbar.propTypes = { autoshow: _react2.default.PropTypes.bool, forceGemini: _react2.default.PropTypes.bool }; +GeminiScrollbar.childContextTypes = { + geminiScrollbar: _react2.default.PropTypes.object +}; exports.default = GeminiScrollbar;