@egjs/react-children-differ
Version:
A React module that checks diff when child elements are added, removed, or changed
141 lines (112 loc) • 3.65 kB
JavaScript
/*
Copyright (c) 2019-present NAVER Corp.
name: @egjs/react-children-differ
license: MIT
author: NAVER Corp.
repository: https://github.com/naver/egjs-children-differ
version: 1.0.1
*/
;
var React = require('react');
var NativeChildrenDiffer = require('@egjs/children-differ');
var reactDom = require('react-dom');
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf || {
__proto__: []
} instanceof Array && function (d, b) {
d.__proto__ = b;
} || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
};
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var ElementDetector =
/*#__PURE__*/
function (_super) {
__extends(ElementDetector, _super);
function ElementDetector() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.element = null;
return _this;
}
var __proto = ElementDetector.prototype;
__proto.componentDidUpdate = function () {
this.element = reactDom.findDOMNode(this);
};
__proto.componentDidMount = function () {
this.element = reactDom.findDOMNode(this);
};
__proto.render = function () {
return this.props.children;
};
return ElementDetector;
}(React.Component);
var ChildrenDiffer =
/*#__PURE__*/
function (_super) {
__extends(ChildrenDiffer, _super);
function ChildrenDiffer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.elements = [];
return _this;
}
var __proto = ChildrenDiffer.prototype;
__proto.render = function () {
this.elements = [];
var elements = this.elements;
var children = React.Children.toArray(this.props.children);
return children.map(function (child, i) {
return React.createElement(ElementDetector, {
key: child.key,
ref: function (e) {
if (e) {
elements[i] = e.element;
}
}
}, child);
});
};
__proto.getElements = function () {
return this.elements.filter(function (el) {
return el;
});
};
__proto.componentDidUpdate = function () {
var result = this.childrenDiffer.update(this.getElements());
this.props.onUpdate(result);
};
__proto.componentDidMount = function () {
this.childrenDiffer = new NativeChildrenDiffer(this.getElements());
};
ChildrenDiffer.defaultProps = {
onUpdate: function (result) {}
};
return ChildrenDiffer;
}(React.PureComponent);
/*
egjs-children-differ
Copyright (c) 2019-present NAVER Corp.
MIT license
*/
module.exports = ChildrenDiffer;
//# sourceMappingURL=children-differ.cjs.js.map