ev-ui/src/components/Confirm.js

An ui library,some awesome components.

import React from 'react'
import {render} from 'react-dom'
import styled,{keyframes} from 'styled-components'
const confirmIn=keyframes`
    0%{
        left:100%;
        top:0; 
    }
    70%{
        left:60%;
        top:100%;
    }
    100%{
        left:50%;
        top:50%;
    }
`;
const confirmOut=keyframes`
    0%{
        transform:translate(-100px,-50%);
        color:transparent;
    }
    100%{
        transform:translate(-100px,-50%) scale(30);
        color:transparent;
        opacity:.3;
    }
`;
const cancelIn=keyframes`
    0%{
        left:0;
        top:100%
    }
    70%{
        left:40%;
        top:0;
    }
    100%{
        left:50%;
        top:50%;
    }
`;
const cancelOut=keyframes`
    0%{
        transform:translate(100px,-50%);
        color:transparent;
    }
    100%{
        transform:translate(100px,-50%) scale(30);
        color:transparent;
        opacity:.3;
    }
`;
const Root=styled.div`
    z-index:1000;
    user-select:none;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    .btn{
        position:fixed;
        top:50%;
        left:50%;
        width:100px;
        height:100px;
        line-height:100px;
        text-align:center;
        font-size:20px;
        font-weight:100;
        border-radius:50%;
        color:white;
        cursor:pointer;
    }
    .btn-confirm{
        background:#33bb77;
        transform:translate(-100px,-50%);
        &:hover{
            box-shadow:0px 0px 70px #33bb77;
        }
        &.confirm-in{
            animation:${confirmIn} .3s;
        }
        &.confirm-out{
            animation:${confirmOut} .3s;
        }
    }
    .btn-cancel{
        background:#ee5533;
        transform:translate(100px,-50%);
        &:hover{
            box-shadow:0px 0px 50px #ee5533;
        }
        &.cancel-in{
            animation:${cancelIn} .3s;
        }
        &.cancel-out{
            animation:${cancelOut} .3s;
        }
    }
`;
class Confirm extends React.Component{

    constructor(props){
        super(props);
        this.state={
            confirmed:false,
            canceled:false
        }
    }

    componentDidMount(){
        this.setState({
            winWidth:window.innerWidth,
            winHeight:window.innerHeight
        })
        // this.Root.style.display=this.props.visible?'inherit':'none';
        // this.props.onVisible?this.props.onVisible(this.props.visible):'';
        this.btnConfirm.addEventListener('animationend',this.animationEnd.bind(this));
        this.btnCancel.addEventListener('animationend',this.animationEnd.bind(this));
    }
    componentWillReceiveProps(nextProps){
        if(this.props.visible!==nextProps.visible){
            this.props.onVisible ?this.props.onVisible(nextProps.visible):''
        }
    }

    animationEnd(){
        this.setState({
            confirmed:false,
            canceled:false
        })
    }

    onConfirm(){
        this.setState({
            confirmed:true
        })
        this.props.onConfirm ?this.props.onConfirm() :'';
        this.onClick();
    }
    onCancel(){
        this.setState({
            canceled:true
        })
        this.props.onCancel ?this.props.onCancel() :'';
        this.onClick();
    }
    onClick(){
       setTimeout(()=>{
            ConfirmOpt.hide()
       },300)
    }

    render() {
        return(
            <Root innerRef={root=>this.Root=root} >
                <div ref={btnConfirm=>this.btnConfirm=btnConfirm} 
                    onClick={this.onConfirm.bind(this)} 
                    style={{display:this.state.canceled?'none':''}}
                    className={"btn btn-confirm"+(this.state.confirmed?' confirm-out':' confirm-in')}>确 认</div>
                <div ref={btnCancel=>this.btnCancel=btnCancel} 
                    onClick={this.onCancel.bind(this)} 
                    style={{display:this.state.confirmed?'none':''}}
                    className={"btn btn-cancel"+(this.state.canceled?' cancel-out':' cancel-in')}>取 消</div>
            </Root> 
        )
    }
}
const ConfirmOpt={
    observer:null,
    view:null,
    onChange(){
        if(this.observer && typeof this.observer === 'function'){
            this.observer()
        }
    },
    subscribe(observer){
        this.observer=observer
    },
    show(onConfirm,onCancel){
        this.view=<Confirm onConfirm={onConfirm} onCancel={onCancel}/>
        this.onChange()
    },
    hide(){
        this.view=null
        this.onChange()
    }
}
export default ConfirmOpt