react trasition

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
        });
    }
}

use

 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>
    }