lm-carpicker/src/popupHoc.js

* 作者：liuduan * 邮箱：liuduan.05.05@163.com * 版本：**`0.3.5`**

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Backtop from 'lm-backtop'
import classNames from 'classnames'
import { createPortal } from 'react-dom';



const PopupHoc = Picker => {
    return class Popup extends Component {
        static propTypes = {
            title: PropTypes.oneOfType([              // 左侧文本
                PropTypes.string, PropTypes.element
            ]),
            rightText: PropTypes.oneOfType([              // 右侧文本
                PropTypes.string, PropTypes.element
            ]),
            data: PropTypes.array
        };

        static defaultProps = {
            rightText: '取消',
            data: []
        };

        constructor(props) {
            super(props);
            const doc = window.document;
            this.node = doc.body
        }


        render() {
            const { className, title, rightText, visible, onDismiss, index, backTopShow, ...others } = this.props;
            const prefixed = 'lm-carpicker';

            const cls = classNames({
                'popup': true,
                'hidden': !visible
            }, className);

            return createPortal(
                <div className={prefixed}>
                    <div className={cls}>
                        <div className="header">
                            <h3 className="title">{title}</h3>
                            <span className="btn" onClick={onDismiss}>{rightText}</span>
                        </div>
                        <section ref={el => this.targetRef = el} className="body">
                            {this.props.data.length ? <Picker index={index} {...others} /> : null}
                        </section>
                        {(index === 0 && backTopShow) && <Backtop target={() => this.targetRef} />}
                    </div>
                </div>,
                this.node
            )
        }
    }
}


export default PopupHoc;