nd_wxapp/component/calendar/func/render.js

import Day from './day'
import Todo from './todo'
import WxData from './wxData'
import convertSolarLunar from './convertSolarLunar'
import {
  Logger,
  GetDate,
  delRepeatedEnableDay,
  getDateTimeStamp,
  converEnableDaysToTimestamp
} from './utils'

const getDate = new GetDate()
const logger = new Logger()

class Calendar extends WxData {
  constructor(component) {
    super(component)
    this.Component = component
  }
  getCalendarConfig() {
    return this.Component.config
  }
  /**
   * 渲染日历
   * @param {number} curYear 年份
   * @param {number} curMonth  月份
   * @param {number} curDate  日期
   * @param {boolean} disableSelect 是否禁用选中
   */
  renderCalendar(curYear, curMonth, curDate, disableSelect) {
    return new Promise(resolve => {
      const config = this.getCalendarConfig()
      this.calculateEmptyGrids(curYear, curMonth)
      this.calculateDays(curYear, curMonth, curDate, disableSelect).then(() => {
        const { todoLabels, specialStyleDates, enableDays, selectedDay } =
          this.getData('calendar') || {}
        if (
          todoLabels &&
          todoLabels.find(
            item => +item.month === +curMonth && +item.year === +curYear
          )
        ) {
          Todo(this.Component).setTodoLabels()
        }
        if (
          specialStyleDates &&
          specialStyleDates.length &&
          specialStyleDates.find(
            item => +item.month === +curMonth && +item.year === +curYear
          )
        ) {
          Day(this.Component).setDateStyle(specialStyleDates)
        }

        if (
          enableDays &&
          enableDays.length &&
          enableDays.find(item => {
            let ymd = item.split('-')
            return +ymd[1] === +curMonth && +ymd[0] === +curYear
          })
        ) {
          Day(this.Component).enableDays(enableDays)
        }

        if (
          selectedDay &&
          selectedDay.length &&
          selectedDay.find(
            item => +item.month === +curMonth && +item.year === +curYear
          ) &&
          config.mulit
        ) {
          Day(this.Component).setSelectedDays(selectedDay)
        }

        if (!this.Component.firstRender) {
          resolve({
            firstRender: true
          })
        } else {
          resolve({
            firstRender: false
          })
        }
      })
    })
  }
  /**
   * 计算当前月份前后两月应占的格子
   * @param {number} year 年份
   * @param {number} month 月份
   */
  calculateEmptyGrids(year, month) {
    this.calculatePrevMonthGrids(year, month)
    this.calculateNextMonthGrids(year, month)
  }
  /**
   * 计算上月应占的格子
   * @param {number} year 年份
   * @param {number} month 月份
   */
  calculatePrevMonthGrids(year, month) {
    let empytGrids = []
    const prevMonthDays = getDate.thisMonthDays(year, month - 1)
    let firstDayOfWeek = getDate.firstDayOfWeek(year, month)
    const config = this.getCalendarConfig() || {}
    if (config.firstDayOfWeek === 'Mon') {
      if (firstDayOfWeek === 0) {
        firstDayOfWeek = 6
      } else {
        firstDayOfWeek -= 1
      }
    }
    if (firstDayOfWeek > 0) {
      const len = prevMonthDays - firstDayOfWeek
      const { onlyShowCurrentMonth } = config
      const { showLunar } = this.getCalendarConfig()
      for (let i = prevMonthDays; i > len; i--) {
        if (onlyShowCurrentMonth) {
          empytGrids.push('')
        } else {
          empytGrids.push({
            day: i,
            lunar: showLunar
              ? convertSolarLunar.solar2lunar(year, month - 1, i)
              : null
          })
        }
      }
      this.setData({
        'calendar.empytGrids': empytGrids.reverse()
      })
    } else {
      this.setData({
        'calendar.empytGrids': null
      })
    }
  }
  /**
   * 计算下一月日期是否需要多展示的日期
   * 某些月份日期为5排，某些月份6排，统一为6排
   * @param {number} year
   * @param {number} month
   * @param {object} config
   */
  calculateExtraEmptyDate(year, month, config) {
    let extDate = 0
    if (+month === 2) {
      extDate += 7
      let firstDayofMonth = getDate.dayOfWeek(year, month, 1)
      if (config.firstDayOfWeek === 'Mon') {
        if (+firstDayofMonth === 1) extDate += 7
      } else {
        if (+firstDayofMonth === 0) extDate += 7
      }
    } else {
      let firstDayofMonth = getDate.dayOfWeek(year, month, 1)
      if (config.firstDayOfWeek === 'Mon') {
        if (firstDayofMonth !== 0 && firstDayofMonth < 6) {
          extDate += 7
        }
      } else {
        if (firstDayofMonth <= 5) {
          extDate += 7
        }
      }
    }
    return extDate
  }
  /**
   * 计算下月应占的格子
   * @param {number} year 年份
   * @param {number} month  月份
   */
  calculateNextMonthGrids(year, month) {
    let lastEmptyGrids = []
    const thisMonthDays = getDate.thisMonthDays(year, month)
    let lastDayWeek = getDate.dayOfWeek(year, month, thisMonthDays)
    const config = this.getCalendarConfig() || {}
    if (config.firstDayOfWeek === 'Mon') {
      if (lastDayWeek === 0) {
        lastDayWeek = 6
      } else {
        lastDayWeek -= 1
      }
    }
    let len = 7 - (lastDayWeek + 1)
    const { onlyShowCurrentMonth, showLunar } = config
    if (!onlyShowCurrentMonth) {
      len = len + this.calculateExtraEmptyDate(year, month, config)
    }
    for (let i = 1; i <= len; i++) {
      if (onlyShowCurrentMonth) {
        lastEmptyGrids.push('')
      } else {
        lastEmptyGrids.push({
          day: i,
          lunar: showLunar
            ? convertSolarLunar.solar2lunar(year, month + 1, i)
            : null
        })
      }
    }
    this.setData({
      'calendar.lastEmptyGrids': lastEmptyGrids
    })
  }
  /**
   * 日历初始化将默认值写入 selectDay
   * @param {number} year
   * @param {number} month
   * @param {number} curDate
   */
  setSelectedDay(year, month, curDate) {
    let selectedDay = []
    const config = this.getCalendarConfig()
    if (config.noDefault) {
      selectedDay = []
      config.noDefault = false
    } else {
      const data = this.getData('calendar') || {}
      const { showLunar } = this.getCalendarConfig()
      selectedDay = curDate
        ? [
            {
              year,
              month,
              day: curDate,
              choosed: true,
              week: getDate.dayOfWeek(year, month, curDate),
              lunar: showLunar
                ? convertSolarLunar.solar2lunar(year, month, curDate)
                : null
            }
          ]
        : data.selectedDay
    }
    return selectedDay
  }
  __getDisableDateTimestamp() {
    let disableDateTimestamp
    const { date, type } = this.getCalendarConfig().disableMode || {}
    if (date) {
      const t = date.split('-')
      if (t.length < 3) {
        logger.warn('配置 disableMode.date 格式错误')
        return {}
      }
      disableDateTimestamp = getDateTimeStamp({
        year: +t[0],
        month: +t[1],
        day: +t[2]
      })
    }
    return {
      disableDateTimestamp,
      disableType: type
    }
  }
  resetDates() {
    this.setData({
      'calendar.days': []
    })
  }
  /**
   * 设置日历面板数据
   * @param {number} year 年份
   * @param {number} month  月份
   * @param {number} curDate  日期
   * @param {boolean} disableSelect 是否禁用选中
   */
  calculateDays(year, month, curDate, disableSelect) {
    return new Promise(resolve => {
      // 避免切换日期时样式残影
      this.resetDates()
      let days = []
      const {
        disableDays = [],
        chooseAreaTimestamp = [],
        selectedDay: selectedDates = []
      } = this.getData('calendar')
      days = Day(this.Component).buildDate(year, month)
      let selectedDay = selectedDates
      if (!disableSelect) {
        selectedDay = this.setSelectedDay(year, month, curDate)
      }
      const selectedDayStr = selectedDay.map(d => getDate.toTimeStr(d))
      const disableDaysStr = disableDays.map(d => getDate.toTimeStr(d))
      const [areaStart, areaEnd] = chooseAreaTimestamp
      days.forEach(item => {
        const cur = getDate.toTimeStr(item)
        const timestamp = getDateTimeStamp(item)
        if (selectedDayStr.includes(cur) && !disableSelect) {
          item.choosed = true
          if (timestamp > areaEnd || timestamp < areaStart) {
            const idx = selectedDay.findIndex(
              selectedDate =>
                getDate.toTimeStr(selectedDate) === getDate.toTimeStr(item)
            )
            selectedDay.splice(idx, 1)
          }
        } else if (
          areaStart &&
          areaEnd &&
          timestamp >= areaStart &&
          timestamp <= areaEnd &&
          !disableSelect
        ) {
          item.choosed = true
          selectedDay.push(item)
        }
        if (disableDaysStr.includes(cur)) item.disable = true

        const {
          disableDateTimestamp,
          disableType
        } = this.__getDisableDateTimestamp()
        let disabelByConfig = false
        if (disableDateTimestamp) {
          if (
            (disableType === 'before' && timestamp < disableDateTimestamp) ||
            (disableType === 'after' && timestamp > disableDateTimestamp)
          ) {
            disabelByConfig = true
          }
        }
        const isDisable = disabelByConfig || this.__isDisable(timestamp)
        if (isDisable) {
          item.disable = true
          item.choosed = false
        }
      })
      this.setData(
        {
          'calendar.days': days,
          'calendar.selectedDay': [...selectedDay] || []
        },
        () => {
          resolve()
        }
      )
    })
  }
  __isDisable(timestamp) {
    const {
      enableArea = [],
      enableDays = [],
      enableAreaTimestamp = []
    } = this.getData('calendar')
    let setDisable = false
    let expectEnableDaysTimestamp = converEnableDaysToTimestamp(enableDays)
    if (enableArea.length) {
      expectEnableDaysTimestamp = delRepeatedEnableDay(enableDays, enableArea)
    }
    if (enableAreaTimestamp.length) {
      if (
        (+enableAreaTimestamp[0] > +timestamp ||
          +timestamp > +enableAreaTimestamp[1]) &&
        !expectEnableDaysTimestamp.includes(+timestamp)
      ) {
        setDisable = true
      }
    } else if (
      expectEnableDaysTimestamp.length &&
      !expectEnableDaysTimestamp.includes(+timestamp)
    ) {
      setDisable = true
    }
    return setDisable
  }
}

export default component => new Calendar(component)