重构-开关Switch

素颜马尾好姑娘i 2021-07-24 13:00 435阅读 0赞

收获:
    	当给根类设置transition:ns时,当根类的属性变化都会产生过渡态,即当再添加一个类,这个类出现/消失会出现两种过渡态
    
    动画:
    	按钮移动、轨道颜色渐变
    
    参数:
        static propTypes={
            trackWidth:PropTypes.string,   		开关轨道宽度
            trackHeight:PropTypes.string,		开关轨道高度
            circleWidth:PropTypes.string,		圆圈宽度
            gap:PropTypes.string,			    圆圈距离两边的距离
            trackCheckedkColor:PropTypes.string,开启轨道颜色
            circleColor:PropTypes.string,		圆圈颜色
            trackColor:PropTypes.string,		轨道未选中颜色
            disabled:PropTypes.bool,			禁用
            checked:PropTypes.bool,				选中
            onChange:PropTypes.func				开关回调,第一个参数为当前状态布尔值
    	}

效果图:  
![在这里插入图片描述][20201124232428105.png_pic_center]

使用:

import React,{ Component} from 'react'
    import Switch from './switch/switch'
    
    class App extends Component{ 
    
        _onChange(checked)
        { 
            console.log(checked);
        }
    
        render()
        { 
            return(
    
                <div>
                    <Switch gap='20px' onChange={ this._onChange.bind(this)} checked />
                    <Switch gap='20px' onChange={ this._onChange.bind(this)} disabled />
                </div>
            )
        }
    }
    
    export default App

Switch.jsx:

import React,{ Component} from 'react'
    import PropTypes from 'prop-types'
    import './switch.css'
    
    class App extends Component{ 
    
        static propTypes={ 
            trackWidth:PropTypes.string,
            trackHeight:PropTypes.string,
            circleWidth:PropTypes.string,
            gap:PropTypes.string,
            trackCheckedkColor:PropTypes.string,
            circleColor:PropTypes.string,
            trackColor:PropTypes.string,
            disabled:PropTypes.bool,
            checked:PropTypes.bool,
            onChange:PropTypes.func
            
        }
    
        state={ 
            isChecked:false
        }
    
        componentDidMount()
        { 
            const { disabled,checked,trackCheckedkColor,trackHeight,trackWidth,circleColor,circleWidth,gap,trackColor} = this.props;
            const switchf=this.switchf.style;
    
            trackCheckedkColor&&switchf.setProperty('--trackCheckedkColor',trackCheckedkColor);
            trackHeight&&switchf.setProperty('--trackHeight',trackHeight);
            circleWidth&&switchf.setProperty('--circleWidth',circleWidth);
            gap&&switchf.setProperty('--gap',gap);
            trackWidth&&switchf.setProperty('--trackWidth',trackWidth);
            circleColor&&switchf.setProperty('--circleColor',circleColor);
            trackColor&&switchf.setProperty('--trackColor',trackColor);
            checked&&this.setState({ isChecked:true});
            disabled&&switchf.setProperty('--circlePointer','not-allowed');
            
        }
    
        _switchClick()
        { 
            if(!this.props.disabled)
            { 
                this.setState({ 
                    isChecked:!this.state.isChecked
                },()=>{ 
                    this.props.onChange(this.state.isChecked);
                })
            }
        }
    
        render()
        { 
            let { isChecked} = this.state;
            const { disabled} = this.props;
            return(
    
                <div ref={ (v)=>{ this.switchf=v}} className='jf-switch-container'>
                    <div className={ `jf-switch-track ${ isChecked&&'jf-switch-track-checked'} ${ disabled&&'jf-switch-disabled'} `}>
                        
                    </div>
                    <div onClick={ this._switchClick.bind(this)} className={ `jf-switch-circle ${ isChecked&&'jf-switch-checked'}`}>
    
                    </div>
                </div>
            )
        }
    }
    
    export default App

Switch.css:

.jf-switch-container{ 
        position: relative;
        width: var(--trackWidth,40px);
        height:var(--trackHeight,25px);
        border-radius: var(--trackHeight,25px);
        display: inline-block;
        box-sizing: border-box;
    
        --trackWidth:40px;
        --trackHeight:20px;
        --circleWidth:16px;
        --gap:2px;
        --trackCheckedkColor:#13CE66;
        --circleColor:white;
        --trackColor:#EAECF0;
        --circlePointer:pointer;
    }
    .jf-switch-track{ 
        width: 100%;
        height: 100%;
        border-radius: var(--trackWidth,40px);
        background-color: var(--trackColor);
        overflow: hidden;
        transition: 1s;
    }
    
    .jf-switch-track-checked{ 
        background-color: var(--trackCheckedkColor);
    }
    
    .jf-switch-circle{ 
        position: absolute;
        height:var(--circleWidth,16px);
        width: var(--circleWidth,16px);
        left: var(--gap,5px);
        border-radius: 100%;
        background-color: var(--circleColor);
        cursor: var(--circlePointer);
        top:50%;
        transition: .5s;
        transform: translateY(-50%);
    }
    
    .jf-switch-checked{ 
        left: 100%;
        margin-left: calc(-1 * var(--circleWidth) + -1 * var(--gap));
    }
    
    .jf-switch-disabled{ 
        background-color: #EAECF0;
        cursor: var(--circlePointer);
    }

[20201124232428105.png_pic_center]: /images/20210724/f3520717e19446d6a15e24974b37013f.png