src/Swipe.js File

import React,{PropTypes} from 'react';
import Component from './utils/Component';
import classnames from 'classnames';
import {setPhoenixPrefix} from './utils/Tool';

import Drag from './Drag';
import Button from './Button';

/**
 * 左滑组件<br/>
 * - 向左滑动出现可操作按钮, 类似IOS列表操作的组件。
 * - 通过buttons设置可操作按钮的文字text、样式phStyle以及点击按钮的回调函数onHandle。
 * - buttons的phStyle默认'primary', 可选primary、info、error、warning、danger、link、gray、success。
 *
 * 示例:
 * ```code
 *     <Swipe buttons={[
 *         {text: '删除', onHandle: this.onDelete, phStyle: 'error'},
 *         {text: '取消', onHandle: this.onCancle, phStyle: 'info'}
 *     ]}>
 *         <div style={{padding: '1rem'}}>
 *             // 内容
 *         </div>
 *     </Swipe>
 * ```
 *
 * @class Swipe
 * @module 操作类组件
 * @extends Component
 * @constructor
 * @since 0.3.0
 * @demo swipe|swipe.js {展示}
 * @show true
 * */

export default class Swipe extends Component{

    static propTypes = {
        /**
         * 样式前缀
         * @property classPrefix
         * @type String
         * @default 'swipe'
         * */
        classPrefix: PropTypes.string,
        /**
         * 标签tagName
         * @property componentTag
         * @type String
         * */
        componentTag:PropTypes.string,
        /**
         * 按钮组
         * @property buttons
         * @type Array
         * */
        buttons: PropTypes.array
    };

    static defaultProps = {
        buttons: [],
        classPrefix:'swipe',
        componentTag:'div',
        classMapping : {}
    };

    constructor(props, context) {
        super(props, context);

        this.state = {
            translateX: -1,
            preTranslateX : -1,
            btnsWidth: 0,
            isBtnsShow: false,
            OPE_RANGE: 10
        }
    }

    renderOperationButton(buttons){
        let buttonsDom = [];

        if(buttons.length!=0) buttonsDom.push(this.renderButtonByType(buttons));

        return buttonsDom;
    }

    renderButtonByType(btnInfo){
        return (
            <div className={setPhoenixPrefix("swipe-btns")} key='buttons' ref={(buttons)=>{this.buttons = buttons;}}>
                {
                    btnInfo.map((item,index) => {
                        return <Button key={index} phStyle={item.phStyle || 'primary'}>{item.text}</Button>
                    })
                }
            </div>
        );
    }

    componentDidMount(){ // 获取btns的宽度
        if(this.buttons) this.state.btnsWidth = this.buttons.offsetWidth;
    }

    onDrag(event, position){ // position.start position.move
        let target = event.currentTarget;
        this.state.translateX = position.move.x - position.start.x + this.state.preTranslateX;

        if(position.move.x < position.start.x){
            this.state.isBtnsShow = true;
        }else{
            this.state.isBtnsShow = false;
        }

        if(this.state.translateX >= 0) this.state.translateX = 0;
        if(this.state.translateX <= - this.state.btnsWidth) this.state.translateX = - this.state.btnsWidth;

        target.style.transform = 'translateX('+ this.state.translateX +'px)';
    }

    onDrop(event, position){ // position.end
        let target = event.currentTarget;

        if(Math.abs(this.state.translateX) < 10){ // 微弱操作保持不变
            this.state.isBtnsShow = !this.state.isBtnsShow;

            if(this.state.isBtnsShow){
                this.state.translateX = 0;
            }else{
                this.state.translateX = - this.state.btnsWidth;
            }
        }else{
            if(this.state.isBtnsShow){
                this.state.translateX = - this.state.btnsWidth;
            }else{
                this.state.translateX = 0;
            }
        }
        // console.log(this.state.isBtnsShow);

        this.state.preTranslateX = this.state.translateX;
        target.style.transform = 'translateX('+ this.state.translateX +'px)';
    }

    render(){
        let {componentTag:Component, buttons, className} = this.props;

        return (
            <Component className={classnames(
                this.getProperty(true),
                className
            )} style={this.getStyles(this.props.style)}>
                <Drag className={setPhoenixPrefix("swipe-content")} onDrag={::this.onDrag} onDrop={::this.onDrop}>
                    {this.props.children}
                </Drag>
                {this.renderOperationButton(buttons)}
            </Component>
        );
    }

}