newICSS/src/components/PushItems/DetailsModal/index.jsx

import React, { Component } from "react";
import styles from "./index.less";
import NewPortal from './NewPortal'
import close from "./../img/close.png";
import $ from "jquery";
import { imageUrlPrefix } from '@utils/config.js';
import { dragBox } from '@utils/tools';
class DetailsModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0
        }
        this.hideTips = this.hideTips.bind(this)
    }
    componentDidMount(){
      dragBox('detailsContentWrap','detailsContentTitle')
    }
    hideTips() {
        const { hideTips } = this.props;
        hideTips && hideTips();
    }
    handleClickMenu(index, item, tipsDetails) {
        const that = this
        setTimeout(function(){
            that.setState({
                currentIndex: index
            })
        },0)
        
        let scrollTop = 0
        tipsDetails.details.map((it, ii) => {
            if( ii < index) {
                scrollTop = scrollTop + parseInt($('#' + it.title).css('height'))
            }
        })
        $('#detailsContent').scrollTop(scrollTop)
    }
    handleScrollModal(tipsDetails) {
        const scrollTop = $('#detailsContent').scrollTop()
        let divHeight = 0;
        for (let i = 0; i < tipsDetails.details.length; i++) {
            divHeight = divHeight + parseInt($('#' + tipsDetails.details[i].title).css('height')) -5
            if(divHeight > scrollTop) {
                this.setState({
                    currentIndex: i
                })
                return
            }
        }
    }
    
    render() {
        const {showTipsDetails, tipsDetails} = this.props;
        const { currentIndex } = this.state
      return <NewPortal visible = {showTipsDetails}>

                <div className={styles['details-wrapper']}>
                    <div className={styles['details-content-wrapper']} id="detailsContentWrap">
                        <h1 id="detailsContentTitle" className={`${styles['details-content-name']} drag-title`} >{tipsDetails && tipsDetails.tagName} <img className={styles['details-close']} onClick={this.hideTips} src={close} /></h1>
                        <div className={styles['details-content']} id= 'detailsContent' onScroll={this.handleScrollModal.bind(this, tipsDetails)}>
                            {tipsDetails && tipsDetails.details && tipsDetails.details.map((item, index) => {
                                return (<div id={item.title}>
                                    <div className={styles['details-content-title-box']} >
                                        <span className={styles['details-content-title-name']}>{item.title}</span>
                                        <div className={styles['details-content-title-line']}></div>
                                    </div>
                                    <div dangerouslySetInnerHTML ={{__html: item.content.replace(/{imageUrlPrefix}/g, imageUrlPrefix)}}></div>
                                </div>)
                            })}
                            
                        </div>
                        <div className={styles['content-menu-box']}>
                            <div className={styles['content-menu']}>
                                {tipsDetails && tipsDetails.details && tipsDetails.details.map((item, index) => {
                                        return (<div>
                                            <div className={styles['details-menu-title-box']}>
                                                {index === 0 ? '' : <div className={styles['details-content-menu-line']}></div>}
                                                <span onClick={this.handleClickMenu.bind(this, index, item, tipsDetails)} className={styles['details-content-menu-name']} style = {index === currentIndex ? {color:'#0089be'} : ''}>
                                                    <span className={styles['details-content-menu-circle']} style = {index === currentIndex ? {background:'#0089be'} : ''}></span>{item.title}
                                                </span>
                                            </div>
                                        </div>)
                                    })}
                            </div>
                        </div>
                            
                    </div>
                    <div className={styles['details-mask']} onClick={this.hideTips}>
                    </div>
                </div>


      </NewPortal>
      
      
      
    }
}

export default DetailsModal;