lm-carpicker/src/pickerHoc.js

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

import React, { Component, cloneElement } from 'react'
import Abc from './abc'

const PickerHoc = (List) => {

    return class Popup extends Component {

        constructor(props) {
            super(props);
            this.renderSpell = this.renderSpell.bind(this);
        }

        componentDidMount() {
            // 当 数据不为空时 且 有选中城市 时不执行
            const { data, selected, index } = this.props;
            if (data.length && selected) {
                // 获取滚动容器dom
                const container = document.querySelectorAll('.lm-carpicker .popup .body')[index];
                // 获取选中dom
                const selectedDom = container ? container.querySelector('.active') : null;
                if (container && selectedDom) {
                    let leader, selectedDomHeight, thirdHeight;
                    // 选中dom的距离顶部高度
                    selectedDomHeight = selectedDom.offsetTop;
                    thirdHeight = container.parentElement.offsetHeight / 3
                    // 计算实际需要滚动高度
                    leader = selectedDomHeight - thirdHeight;
                    // 初始位置滚动动画
                    if (leader > 0) container.scrollTop = leader;
                }
            }
        }

        // 点击abc索引事件
        onAbcClick(value) {
            if (!value) return;
            value = value.trim().toLocaleUpperCase();
            const anchorElement = document.getElementById(value);
            if (anchorElement) anchorElement.scrollIntoView()
        }

        renderSpell() {
            const { index, spellComponent, spellList, spellShow } = this.props;
            if (index !== 0 || !spellShow) return null;
            if (spellComponent) return cloneElement(spellComponent, {
                onAbcClick: this.onAbcClick
            });
            return (
                <React.Fragment>
                    <h4 className={"title"}>请按拼音字母选择品牌</h4>
                    <Abc data={spellList} onAbcClick={this.onAbcClick} />
                </React.Fragment>
            );
        }

        render() {
            const { ref, spellComponent, spellList, spellShow, ...others } = this.props;
            return (
                <React.Fragment>
                    {this.renderSpell()}
                    <List {...others} />
                </React.Fragment>
            )
        }
    };
};

export default PickerHoc;