Skip to content

Instantly share code, notes, and snippets.

@lazyTai
Last active October 1, 2017 03:07
Show Gist options
  • Save lazyTai/fe809c5005a40cd7617635370a5daff0 to your computer and use it in GitHub Desktop.
Save lazyTai/fe809c5005a40cd7617635370a5daff0 to your computer and use it in GitHub Desktop.
react trasition
import React from 'react'
import ReactDOM, { findDOMNode } from 'react-dom'
// import addClass from 'dom-helpers/class/addClass';
import { addClass } from 'dom-helpers/class';
import raf from 'dom-helpers/util/requestAnimationFrame';
import { querySelectorAll } from 'dom-helpers/query';
const timeout = 400
export class Group extends React.Component {
constructor(props) {
super(props)
this.state = {
currentChildren: this.props.children,
triggerRender: false
}
this.childRefs = {};
}
componentWillReceiveProps(nextProps) {
var self = this;
self.prevMap = {};
self.nextMap = {};
self.state.currentChildren.map((children) => {
self.prevMap[children.key] = children
})
nextProps.children.map((children) => {
self.nextMap[children.key] = children
})
self.changeOne = []
/* find the change one */
for (let key in self.prevMap) {
let hasNext = self.nextMap && self.nextMap.hasOwnProperty(key);
if (!hasNext) {
self.changeOne.push(key);
}
}
var component = self.childRefs[self.changeOne[0]];
if (component) {
component.componentWillLeave(() => {
delete self.childRefs[self.changeOne[0]];
self.setState({
currentChildren: nextProps.children
})
})
} else {
console.error("not this component")
console.warn(self.changeOne[0])
}
}
setChildRefs(children) {
var self = this
var childrenToRender = [];
self.childRefs = Object.create(null);
children.forEach(function (child, index) {
var key = child.key
let ref = (r) => {
self.childRefs[key] = r;
};
childrenToRender.push(React.cloneElement(
child,
{
key,
ref,
},
));
}, self);
return childrenToRender
}
render() {
var self = this;
var childrenToRender = self.setChildRefs(self.state.currentChildren)
return React.createElement(
"div",
{},
childrenToRender,
);
}
}
export class GroupItem extends React.Component {
static propTypes = {
isFinishAnimation: React.PropTypes.bool
};
constructor(props) {
super(props)
this.state = {
}
this.componentWillLeave = this.componentWillLeave.bind(this)
}
componentWillLeave(callback) {
this.trasition(callback)
}
trasition(callback) {
var node = findDOMNode(this)
raf(() => {
if (node) {
addClass(node, 'example-leave')
addClass(node, 'example-leave-active')
setTimeout(callback, timeout)
}
})
}
render() {
var self = this;
var { onClick } = this.props
return React.cloneElement(React.Children.only(this.props.children), {
onClick
});
}
}
render() {
const items = this.state.items.map((item, i) => (
<GroupItem onClick={() => this.handleRemove(i)} key={item} ref={item}>
{/* <div onClick={() => this.handleRemove(i)} key={item}>>{item}</div> */}
<div>{item}</div>
</GroupItem>
));
return <div>
<Group>
{items}
</Group>
</div>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment