2020-08-15

king

2020-08-15 41239717c4446af79268b968557274f88a0afaeb

 src/tabviews/zshare/calendar/index.jsx

@@ -12,7 +12,8 @@
class Calendar extends Component {
  static propTpyes = {
    data: PropTypes.any,            // 事件数据
    levels: PropTypes.any
    calendar: PropTypes.any,
    loading: false
  }

  state = {
@@ -22,11 +23,11 @@
    selectYear: moment().format('YYYY'),
    selectMonth: moment().format('MM'),
    datelist: null,
    monthlist: null,
    monthlist: null
  }

  UNSAFE_componentWillMount() {
    const { levels } = this.props
    const { calendar, data } = this.props

    let yearlist = []
    let _selectYear = +this.state.selectYear
@@ -38,17 +39,14 @@
    }

    let datelist = this.getDateList(this.state.selectYear)
    let _levels = null

    if (!levels) {
      _levels = ['day', 'month', 'year']
    } else {
      _levels = levels
    if (data && data.length > 0) {
      datelist = this.mountdata(datelist, data)
    }

    let _levels = calendar.levels
    let level = _levels[0]
    let monthlist = null
    level = 'month'

    if (_levels.includes('month')) {
      monthlist = datelist.filter(item => item.month === moment().format('MM'))[0]
@@ -65,12 +63,112 @@

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
      let datelist = this.mountdata(this.state.datelist, nextProps.data)
      let monthlist = null
      
      if (this.state.levels.includes('month')) {
        monthlist = datelist.filter(item => item.month === this.state.selectMonth)[0]
      }

      this.setState({
        datelist: datelist,
        monthlist
      })
    } else if (!is(fromJS(this.props.calendar), fromJS(nextProps.calendar))) {
      this.setState({
        levels: nextProps.calendar.levels
      })
    }
  }

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

  mountdata = (datelist, data) => {
    const { calendar } = this.props

    let datalist = []
    let levels = {
      black: 1,
      red: 2,
      orange: 3,
      yellow: 4,
      green: 5,
      lightgreen: 6,
      cyan: 7,
      blue: 8,
      purple: 9,
      white: 10
    }

    data.forEach(item => {
      let startTime = item[calendar.startfield]
      let endTime = item[calendar.endfield]
      let color = item[calendar.colorfield]

      if (!startTime || !/^(1|2)\d{3}(-|\/)\d{2}(-|\/)\d{2}/.test(startTime)) return
      if (!endTime || !/^(1|2)\d{3}(-|\/)\d{2}(-|\/)\d{2}/.test(endTime)) return
      if (!item[calendar.remarkfield]) return

      datalist.push({
        color: color,
        level: color && levels[color] ? levels[color] : 100,
        remark: item[calendar.remarkfield],
        startMonth: startTime.substr(0, 4) + startTime.substr(5, 2),
        endMonth: endTime.substr(0, 4) + endTime.substr(5, 2),
        start: startTime.substr(0, 4) + startTime.substr(5, 2) + startTime.substr(8, 2),
        startTime: `${startTime.substr(5, 2)}-${startTime.substr(8, 2)}`,
        end: endTime.substr(0, 4) + endTime.substr(5, 2) + endTime.substr(8, 2),
        endTime: `${endTime.substr(5, 2)}-${endTime.substr(8, 2)}`
      })
    })

    if (datalist.length === 0) return datelist

    datalist.sort((a, b) => a.level - b.level)

    let styles = [
      {background: 'black', color: '#ffffff'},
      {background: 'red', color: '#ffffff'},
      {background: 'orange', color: '#ffffff'},
      {background: 'yellow', color: 'rgba(0,0,0,.65)'},
      {background: 'green', color: '#ffffff'},
      {background: 'lightgreen', color: 'rgba(0,0,0,.65)'},
      {background: 'cyan', color: 'rgba(0,0,0,.65)'},
      {background: 'blue', color: '#ffffff'},
      {background: 'purple', color: '#ffffff'},
      {background: 'white', color: 'rgba(0,0,0,.65)'},
    ]

    return datelist.map(month => {
      datalist.forEach(item => {
        if (item.startMonth <= month.time && item.endMonth >= month.time) {
          month.subData.push(item)
        }
      })
      month.sublist = month.sublist.map(week => {
        week.sublist = week.sublist.map(day => {
          if (!day) return null

          datalist.forEach(item => {
            if (item.start <= day.time && item.end >= day.time) {
              day.subData.push(item)
            }
          })

          if (day.subData[0]) {
            day.style = styles[day.subData[0].level - 1] || null
          }

          return day
        })

        return week
      })

      return month
    })
  }

  getDateList = (selectYear) => {
@@ -91,10 +189,12 @@
      }

      for (let i = 1; i <= end; i++) {
        let _day = i < 10 ? `0${i}` : `${i}`

        if (_weeklist[_weeklist.length - 1].sublist.length < 7) {
          _weeklist[_weeklist.length - 1].sublist.push({day: i < 10 ? `0${i}` : `${i}`, label: i})
          _weeklist[_weeklist.length - 1].sublist.push({day: _day, time: selectYear + month + _day, label: i, subData: []})
        } else {
          let _week = {week: _weeklist.length + 1, sublist: [{day: i < 10 ? `0${i}` : `${i}`, label: i}]}
          let _week = {week: _weeklist.length + 1, sublist: [{day: _day, time: selectYear + month + _day, label: i, subData: []}]}
          _weeklist.push(_week)
        }
      }
@@ -106,8 +206,10 @@

      datelist.push({
        month: month,
        time: selectYear + month,
        label: monthName[month],
        sublist: _weeklist
        sublist: _weeklist,
        subData: []
      })
    })

@@ -128,6 +230,10 @@
    }

    this.setState({ selectYear: value, datelist, monthlist })

    if (this.props.changeDate) {
      this.props.changeDate(value)
    }
  }

  monthChange = (value) => {
@@ -144,14 +250,10 @@
  }

  render() {
    const { loading } = this.props
    const { level, selectMonth, selectYear, yearlist, levels, datelist, monthlist } = this.state
    const _levelName = {day: '日', month: '月', year: '年'}
    const listData = [
      { type: 'orange', content: 'This is error event 2.' },
      { type: 'cyan', content: 'This is error event 3.' },
      { type: 'green', content: 'This is error event 4.' },
    ]
    
    console.log(loading)
    return (
      <div className="mk-calendar">
        <div className="mk-calendar-control">
@@ -194,12 +296,17 @@
                      <tr key={cell.week}>
                        {cell.sublist.map((d, i) => (
                          <td key={i}>
                            {d ? <div className={'day-wrap ' + d.class} onClick={() => this.triggerDay(d)}>
                              {d.label ? <Popover mouseEnterDelay={0.3} overlayClassName="calendar-day-pop" content={
                            {d ? <div className={'day-wrap ' + d.class} style={d.style || null} onClick={() => this.triggerDay(d)}>
                              {d.subData.length > 0 ? <Popover mouseEnterDelay={0.3} overlayClassName="calendar-day-pop" content={
                                <div>
                                  {listData.map((data, index) => (
                                  {d.subData.map((data, index) => (
                                    <div key={index} className="message">
                                      <Badge color={data.type} text={data.content} />
                                      <Badge color={data.color} text={
                                        <span>
                                          {data.remark}
                                          <span style={{color: 'rgba(0,0,0,.45)'}}>({data.startTime + ' ~ ' + data.endTime})</span>
                                        </span>}
                                      />
                                    </div>
                                  ))}
                                </div>
@@ -228,14 +335,14 @@
                  <tr key={cell.week}>
                    {cell.sublist.map((d, i) => (
                      <td key={i}>
                        {d ? <div className="month-wrap" onClick={() => this.triggerDay(d)}>
                        {d ? <div className="month-wrap" style={d.style || null} onClick={() => this.triggerDay(d)}>
                          <div className="header">
                            {d.label}
                          </div>
                          <ul className="content">
                            {[1,3,7,18,22].includes(d.label) && listData.map((data, index) => (
                              <li key={index} className="message" title={data.content}>
                                <Badge color={data.type} text={data.content} />
                            {d.subData.map((data, index) => (
                              <li key={index} className="message" title={data.remark}>
                                <Badge color={data.color} text={data.remark} />
                              </li>
                            ))}
                          </ul>
@@ -255,9 +362,9 @@
                    {item.label}
                  </div>
                  <ul className="content">
                    {['01', '05', '10'].includes(item.month) && listData.map((data, index) => (
                      <li key={index} className="message" title={data.content}>
                        <Badge color={data.type} text={data.content} />
                    {item.subData.map((data, index) => (
                      <li key={index} className="message" title={data.remark}>
                        <Badge color={data.color} text={data.remark} />
                      </li>
                    ))}
                  </ul>