VxEditor41-new-event-view/coms/jenga/panel/JengaItemEvent.jsx

import React from 'react'
import LazyLoad from 'react-lazyload'
import newEventStores from 'stores/newEvent'
import BlockEvent from '../block/BlockEvent'
import { getEventNodeById } from 'stores/funcs/newEvent'
import { shallowEqualImmutable } from 'utils/utils'

export default class JengaItemEvent extends React.Component {
  constructor(props) {
    super(props)
    this.curEventNodeId = newEventStores.curEventNodeId
    this.state = {
      eventList: this.getEventList()
    }
    this.onEventChange = this.onEventChange.bind(this)
    this.isCurEventNodeId = this.isCurEventNodeId.bind(this)
    this.getEventList = this.getEventList.bind(this)
    this.getBlockRoot = this.getBlockRoot.bind(this)
  }

  shouldComponentUpdate(nextProps, nextState) {
    return (
      !shallowEqualImmutable(this.props, nextProps) ||
      !shallowEqualImmutable(this.state, nextState)
    )
  }

  componentDidMount() {
    this.unsubscribe = newEventStores.listen(this.onEventChange)
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  componentDidUpdate(preProps) {
    if (preProps.eventNodeId !== this.props.eventNodeId) {
      this.setState({
        eventList: this.getEventList()
      })
    }
  }

  onEventChange(status) {
    let obj = {}
    let forceUpdate = false
    if (status) {
      if (
        status.types.includes('curEventNodeId') &&
        this.curEventNodeId !== status.data.curEventNodeId
      ) {
        this.curEventNodeId = status.data.curEventNodeId
        if (this.isCurEventNodeId(status.data.curEventNodeId)) {
          obj.eventList = this.getEventList()
          forceUpdate = true
        }
      }
      if (
        status.types.includes('changeEventList') &&
        status.data &&
        this.curEventNodeId === status.data.curEventNodeId
      ) {
        if (this.isCurEventNodeId(status.data.curEventNodeId)) {
          obj.eventList = this.getEventList()
          forceUpdate = true
        }
      }
    }
    if (Object.keys(obj).length > 0) {
      this.setState(obj, () => {
        if (forceUpdate) {
          // eventList是对象，所以shouldComponentUpdate不会被触发，需强制更新
          this.forceUpdate()
        }
      })
    }
  }

  isCurEventNodeId(curEventNodeId) {
    return !this.props.eventNodeId || this.props.eventNodeId === curEventNodeId
  }

  getEventList() {
    let nodeId = this.props.eventNodeId || this.curEventNodeId
    if (nodeId) {
      let node = getEventNodeById(nodeId)
      if (node) {
        return node.events.list
      }
    }
    return []
  }

  getBlockRoot(event, index) {
    return (
      <BlockEvent
        key={index}
        layer={0}
        groupLayer={0}
        nestGroupLayer={0}
        offspringInNestGroupLayer={0}
        bid={event.eventId}
        eventNodeId={this.props.eventNodeId}
        visibleBlockIds={this.props.visibleBlockIds}
        isLast={index === this.state.eventList.length - 1}
      />
    )
  }

  render() {
    let jengaContent = document.getElementsByClassName('jenga-content')[0]

    if (this.props.visibleBlockIds) {
      return this.state.eventList.map((event, index) => {
        if (
          event.eventId &&
          this.props.visibleBlockIds.indexOf(event.eventId) >= 0
        ) {
          // 加lazyload是为了避免load太多
          return (
            <LazyLoad
              key={index}
              height={200}
              overflow={true}
              scrollContainer={jengaContent}
            >
              {this.getBlockRoot(event, index)}
            </LazyLoad>
          )
        } else {
          return null
        }
      })
    }

    return this.state.eventList.map((event, index) => {
      if (event.eventId) {
        // 加lazyload是为了避免load太多
        return (
          <LazyLoad
            key={index}
            height={200}
            overflow={true}
            scrollContainer={jengaContent}
          >
            {this.getBlockRoot(event, index)}
          </LazyLoad>
        )
      } else {
        return null
      }
    })
  }
}