diff --git a/.gitignore b/.gitignore index 75fa513..7a2355e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ node_modules/ coverage/ .nyc_output/ -lib \ No newline at end of file + diff --git a/lib/DelayChild.js b/lib/DelayChild.js new file mode 100644 index 0000000..74aa4b6 --- /dev/null +++ b/lib/DelayChild.js @@ -0,0 +1,95 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.DelayChild = undefined; + +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); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +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 DelayChild = exports.DelayChild = function (_Component) { + _inherits(DelayChild, _Component); + + function DelayChild() { + _classCallCheck(this, DelayChild); + + var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(DelayChild).call(this)); + + _this.state = { ready: false }; + return _this; + } + + _createClass(DelayChild, [{ + key: 'componentWillMount', + value: function componentWillMount() { + var _this2 = this; + + if (this.props.delay) { + this.timeout = setTimeout(function () { + _this2.setState({ ready: true }); + }, this.props.delay); + } else { + this.setState({ ready: true }); + } + } + // if a component did not have a delay prop then it will not trigger + // componentDidUpdate + + }, { + key: 'componentDidMount', + value: function componentDidMount() { + if (!this.props.delay && this.props.onDone) { + this.props.onDone(); + } + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + if (this.props.onDone) { + this.props.onDone(); + } + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + clearTimeout(this.timeout); + } + }, { + key: 'render', + value: function render() { + if (this.state.ready) { + if (this.props.delay) { + // fix: Remove unknown prop from the element + var props = Object.assign({}, this.props); + delete props.delay; + delete props.onDone; + return _react2.default.createElement(this.props.children.type, props, this.props.children.props.children); + } + return this.props.children; + } + return null; + } + }]); + + return DelayChild; +}(_react.Component); + +DelayChild.propTypes = { + delay: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number]), + children: _react2.default.PropTypes.node, + onDone: _react2.default.PropTypes.func +}; + +exports.default = DelayChild; \ No newline at end of file diff --git a/lib/DelayRender.js b/lib/DelayRender.js new file mode 100644 index 0000000..82b7e38 --- /dev/null +++ b/lib/DelayRender.js @@ -0,0 +1,106 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.DelayChild = exports.ReactDelayRender = undefined; + +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 _DelayChild = require('./DelayChild'); + +var _DelayChild2 = _interopRequireDefault(_DelayChild); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +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 ReactDelayRender = exports.ReactDelayRender = function (_Component) { + _inherits(ReactDelayRender, _Component); + + function ReactDelayRender() { + _classCallCheck(this, ReactDelayRender); + + var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ReactDelayRender).call(this)); + + _this.state = { ready: false }; + _this.done = 0; + _this.onDoneFn = _this.onDone.bind(_this); + return _this; + } + + _createClass(ReactDelayRender, [{ + key: 'componentWillMount', + value: function componentWillMount() { + var _this2 = this; + + if (this.props.delay) { + this.timeout = setTimeout(function () { + _this2.setState({ ready: true }); + }, this.props.delay); + } else { + this.setState({ ready: true }); + } + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + clearTimeout(this.timeout); + } + }, { + key: 'onDone', + value: function onDone() { + this.done += 1; + var childLen = this.props.children.length || 1; + if (this.done === childLen) { + if (this.props.onFinishRender) { + this.props.onFinishRender(); + } + } + } + }, { + key: 'render', + value: function render() { + var _this3 = this; + + if (this.state.ready) { + var children = this.props.children.length ? this.props.children : [this.props.children]; + return _react2.default.createElement( + 'span', + null, + children.map(function (d, i) { + if (d.type.displayName === 'ReactDelayRender') { + var props = Object.assign({}, d.props, { key: i }); + return _react2.default.createElement(d.type, props, d.props.children); + } + return _react2.default.createElement( + _DelayChild2.default, + { key: i, delay: d.props.delay, onDone: _this3.onDoneFn }, + d + ); + }) + ); + } + return _react2.default.createElement('span', null); + } + }]); + + return ReactDelayRender; +}(_react.Component); + +ReactDelayRender.propTypes = { + children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.node), _react2.default.PropTypes.node]).isRequired, + delay: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number]), + onFinishRender: _react2.default.PropTypes.func +}; + +exports.DelayChild = _DelayChild2.default; +exports.default = ReactDelayRender; \ No newline at end of file diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 0000000..5aef5d4 --- /dev/null +++ b/lib/index.js @@ -0,0 +1,80 @@ +'use strict'; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _reactDom = require('react-dom'); + +var _DelayRender = require('./DelayRender'); + +var _DelayRender2 = _interopRequireDefault(_DelayRender); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var app = _react2.default.createElement( + 'span', + null, + _react2.default.createElement( + _DelayRender2.default, + { delay: '250', onFinishRender: function onFinishRender() { + console.log('Single parent'); + } }, + _react2.default.createElement( + 'h1', + { delay: '1250' }, + 'I am rendered after 1.25 s' + ), + _react2.default.createElement( + 'h2', + { delay: '350' }, + 'I am rendered after 0.35 s' + ) + ), + _react2.default.createElement( + _DelayRender2.default, + { delay: '2000', onFinishRender: function onFinishRender() { + console.log('Parent'); + } }, + _react2.default.createElement( + 'p', + { delay: '500' }, + ' I am rendered after 2.5 s' + ), + _react2.default.createElement( + _DelayRender2.default, + { delay: '250', onFinishRender: function onFinishRender() { + console.log('Child'); + } }, + _react2.default.createElement( + 'p', + { delay: '1250' }, + 'Child' + ), + _react2.default.createElement( + 'p', + { delay: '100' }, + 'Children' + ) + ) + ) +); + +var app2 = _react2.default.createElement( + _DelayRender2.default, + { delay: '500', onFinishRender: function onFinishRender() { + console.log('done'); + } }, + _react2.default.createElement( + 'h2', + { delay: '250' }, + 'Hello' + ), + _react2.default.createElement( + 'h1', + null, + 'Hello' + ) +); + +(0, _reactDom.render)(app, document.getElementById('app')); \ No newline at end of file diff --git a/package.json b/package.json index 212a7b4..d861371 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-delay-render", - "version": "0.0.4", + "version": "0.0.42", "description": "a component that delays the rendering of child components", "main": "./lib/DelayRender.js", "scripts": {