2021-09-01

king

2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d

 src/tabviews/zshare/calendar/index.jsx

@@ -49,7 +49,7 @@
    let level = _levels[0]
    let monthlist = null

    if (_levels.includes('month')) {
    if (_levels.includes('month') || _levels.includes('year')) {
      monthlist = datelist.filter(item => item.month === moment().format('MM'))[0]
    }

@@ -64,10 +64,12 @@

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
      let datelist = this.mountdata(this.state.datelist, nextProps.data || [])
      let datelist = this.getDateList(this.state.selectYear)
      let monthlist = null
      
      datelist = this.mountdata(datelist, nextProps.data)

      if (this.state.levels.includes('month')) {
      if (this.state.levels.includes('month') || this.state.levels.includes('year')) {
        monthlist = datelist.filter(item => item.month === this.state.selectMonth)[0]
      }

@@ -83,17 +85,26 @@
  }

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

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

    let datalist = []
    let levels = { red: 1, orange: 2, yellow: 3, green: 4, cyan: 5, blue: 6, purple: 7, gray: 8 }
    let colors = { red: '#d0021b', orange: '#f5a623', yellow: '#f8e71c', green: '#7ed321', cyan: '#50e3c2', blue: '#1890ff', purple: '#bd10e0', gray: '#9b9b9b' }
    let colors = {
      transparent: 'rgba(0, 0, 0, 0)',
      red: 'rgba(208, 2, 27, 1)',
      orange: 'rgba(245, 166, 35, 1)',
      yellow: 'rgba(248, 231, 28, 1)',
      green: 'rgba(126, 211, 33, 1)',
      cyan: 'rgba(80, 227, 194, 1)',
      blue: 'rgba(24, 144, 255, 1)',
      purple: 'rgba(189, 16, 224, 1)',
      gray: 'rgba(155, 155, 155, 1)'
    }

    data.forEach(item => {
    data && data.forEach(item => {
      let startTime = item[calendar.startfield]
      let endTime = item[calendar.endfield]
      let color = item[calendar.colorfield]
@@ -102,65 +113,61 @@
      if (!endTime || !/^(1|2)\d{3}(-|\/)\d{2}(-|\/)\d{2}/.test(endTime)) return
      if (!item[calendar.remarkfield]) return

      let equal = endTime.substr(0, 4) === startTime.substr(0, 4)

      datalist.push({
        color: colors[color] || '',
        level: color && levels[color] ? levels[color] : 100,
        color: colors[color] || color,
        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)}`,
        startTime: equal ? `${startTime.substr(5, 2)}-${startTime.substr(8, 2)}` : `${startTime.substr(0, 4)}-${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)}`
        endTime: equal ?  `${endTime.substr(5, 2)}-${endTime.substr(8, 2)}` : `${endTime.substr(0, 4)}-${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: '#d0021b', color: '#ffffff'},
      {background: '#f5a623', color: '#ffffff'},
      {background: '#f8e71c', color: '#ffffff'},
      {background: '#7ed321', color: '#ffffff'},
      {background: '#50e3c2', color: '#ffffff'},
      {background: '#1890ff', color: '#ffffff'},
      {background: '#bd10e0', color: '#ffffff'},
      {background: '#9b9b9b', color: '#ffffff'},
    ]

    return datelist.map(month => {
      month.subData = []
      datalist.forEach(item => {
        if (item.startMonth <= month.time && item.endMonth >= month.time) {
          month.subData.push(item)
        }
      })
      if (month.subData[0]) {
        month.style = styles[month.subData[0].level - 1] || null
      }
      month.style = this.getStyle(month.subData[0])
      month.sublist = month.sublist.map(week => {
        week.sublist = week.sublist.map(day => {
          if (!day) return null

          day.subData = []
          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
          }

          day.style = this.getStyle(day.subData[0])
          return day
        })

        return week
      })

      return month
    })
  }

  getStyle = (item ) => {
    if (!item || !item.color) return null
    let style = {background: item.color}
    
    if (/rgb/ig.test(item.color)) {
      try {
        let colors = item.color.match(/\d+/g)
        if ((colors[0] * 0.299 + colors[1] * 0.578 + colors[2] * 0.114) * colors[3] < 192) {
          style.color = '#ffffff'
        }
      } catch (e) {}
    }

    return style
  }

  getDateList = (selectYear) => {
@@ -191,7 +198,7 @@
        }
      }

      let re = 7 - _weeklist[_weeklist.length - 1].sublist.length
      let re = 7 - _weeklist.slice(-1)[0].sublist.length
      for (let i = 0; i < re; i++) {
        _weeklist[_weeklist.length - 1].sublist.push(null)
      }
@@ -218,7 +225,7 @@
    let datelist = this.getDateList(value)
    let monthlist = null

    if (levels.includes('month')) {
    if (levels.includes('month') || levels.includes('year')) {
      monthlist = datelist.filter(item => item.month === selectMonth)[0]
    }
    
@@ -227,16 +234,26 @@

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

      this.props.changeDate(value)
      this.setState({ selectYear: value, datelist, monthlist }, () => {
        this.props.changeDate(value)
      })
    }
  }

  monthChange = (value) => {
    const { datelist } = this.state
    const { datelist, levels, selectYear } = this.state

    if (!levels.includes('month')) {
      if (this.props.triggerDate) {
        this.props.triggerDate({
          time: `${selectYear}${value}01`
        })
      }
      return
    }

    this.setState({
      level: 'month',
      selectMonth: value,
      monthlist: datelist.filter(item => item.month === value)[0]
    })
@@ -296,7 +313,7 @@
                      <tr key={cell.week}>
                        {cell.sublist.map((d, i) => (
                          <td key={i}>
                            {d ? <div className={'day-wrap ' + d.class} style={d.style || null} onClick={() => this.triggerDay(d)}>
                            {d ? <div className="day-wrap" style={d.style || null} onClick={() => this.triggerDay(d)}>
                              {d.subData.length > 0 ? <Popover mouseEnterDelay={0.3} overlayClassName="calendar-day-pop" content={
                                <div>
                                  {d.subData.map((data, index) => (
@@ -357,14 +374,14 @@
          {level === 'year' && monthlist ? <Row className="year-calendar">
            {datelist.map(item => (
              <Col span={8} key={item.month}>
                <div className="year-wrap" style={item.style || null} onClick={() => this.triggerDay(item)}>
                <div className="year-wrap" style={item.style || null} onClick={() => this.monthChange(item.month)}>
                  <div className="header" style={item.style ? null : {color: '#1890ff'}}>
                    {item.label}
                  </div>
                  <ul className="content">
                    {item.subData.map((data, index) => (
                      <li key={index} className="message">
                        <Badge color={item.style ? (data.color === item.style.background ? '#ffffff' : data.color) : data.color} text={`${data.remark}(${data.startTime} ~ ${data.endTime})`}/>
                        <Badge color={item.style ? (data.color === item.style.background ? '#ffffff' : data.color) : data.color} text={`${data.remark} (${data.startTime} ~ ${data.endTime})`}/>
                      </li>
                    ))}
                  </ul>