nd_wxapp/component/calendar/func/week.js

import Day from './day'
import WxData from './wxData'
import Render from './render'
import CalendarConfig from './config'
import convertSolarLunar from './convertSolarLunar'
import { GetDate, Logger, getDateTimeStamp } from './utils'

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

class WeekMode extends WxData {
  constructor(component) {
    super(component)
    this.Component = component
    this.getCalendarConfig = CalendarConfig(this.Component).getCalendarConfig
  }
  /**
   * 周、月视图切换
   * @param {string} view  视图 [week, month]
   * @param {object} date  {year: 2017, month: 11, day: 1}
   */
  switchWeek(view, date) {
    return new Promise((resolve, reject) => {
      const config = CalendarConfig(this.Component).getCalendarConfig()
      if (config.multi) return logger.warn('多选模式不能切换周月视图')
      const { selectedDay = [], curYear, curMonth } = this.getData('calendar')
      let currentDate = []
      let disableSelected = false
      if (!selectedDay.length) {
        currentDate = getDate.todayDate()
        currentDate.day = currentDate.date
        disableSelected = true
        // return this.__tipsWhenCanNotSwtich();
      } else {
        currentDate = selectedDay[0]
      }
      let selectedDate = date || currentDate
      const { year, month } = selectedDate
      const notInCurrentMonth = curYear !== year || curMonth !== month
      if (view === 'week') {
        if (this.Component.weekMode) return
        if ((selectedDay.length && notInCurrentMonth) || !selectedDay.length) {
          // return this.__tipsWhenCanNotSwtich();
          disableSelected = true
          selectedDate = {
            year: curYear,
            month: curMonth,
            day: selectedDate.day
          }
        }
        this.Component.weekMode = true
        this.setData({
          'calendarConfig.weekMode': true
        })
        this.jump(selectedDate, disableSelected)
          .then(resolve)
          .catch(reject)
      } else {
        this.Component.weekMode = false
        this.setData({
          'calendarConfig.weekMode': false
        })
        const disableSelected =
          (selectedDay.length && notInCurrentMonth) || !selectedDay.length
        Render(this.Component)
          .renderCalendar(curYear, curMonth, selectedDate.day, disableSelected)
          .then(resolve)
          .catch(reject)
      }
    })
  }
  /**
   * 更新当前年月
   */
  updateCurrYearAndMonth(type) {
    let { days, curYear, curMonth } = this.getData('calendar')
    const { month: firstMonth } = days[0]
    const { month: lastMonth } = days[days.length - 1]
    const lastDayOfThisMonth = getDate.thisMonthDays(curYear, curMonth)
    const lastDayOfThisWeek = days[days.length - 1]
    const firstDayOfThisWeek = days[0]
    if (
      (lastDayOfThisWeek.day + 7 > lastDayOfThisMonth ||
        (curMonth === firstMonth && firstMonth !== lastMonth)) &&
      type === 'next'
    ) {
      curMonth = curMonth + 1
      if (curMonth > 12) {
        curYear = curYear + 1
        curMonth = 1
      }
    } else if (
      (+firstDayOfThisWeek.day <= 7 ||
        (curMonth === lastMonth && firstMonth !== lastMonth)) &&
      type === 'prev'
    ) {
      curMonth = curMonth - 1
      if (curMonth <= 0) {
        curYear = curYear - 1
        curMonth = 12
      }
    }
    return {
      Uyear: curYear,
      Umonth: curMonth
    }
  }
  /**
   * 计算周视图下当前这一周和当月的最后一天
   */
  calculateLastDay() {
    const { days = [], curYear, curMonth } = this.getData('calendar')
    const lastDayInThisWeek = days[days.length - 1].day
    const lastDayInThisMonth = getDate.thisMonthDays(curYear, curMonth)
    return { lastDayInThisWeek, lastDayInThisMonth }
  }
  /**
   * 计算周视图下当前这一周第一天
   */
  calculateFirstDay() {
    const { days } = this.getData('calendar')
    const firstDayInThisWeek = days[0].day
    return { firstDayInThisWeek }
  }
  /**
   * 当月第一周所有日期范围
   * @param {number} year
   * @param {number} month
   * @param {boolean} firstDayOfWeekIsMon 每周是否配置为以周一开始
   */
  firstWeekInMonth(year, month, firstDayOfWeekIsMon) {
    let firstDay = getDate.dayOfWeek(year, month, 1)
    if (firstDayOfWeekIsMon && firstDay === 0) {
      firstDay = 7
    }
    const [, end] = [0, 7 - firstDay]
    let days = this.getData('calendar.days') || []
    if (this.Component.weekMode) {
      days = Day(this.Component).buildDate(year, month)
    }
    const daysCut = days.slice(0, firstDayOfWeekIsMon ? end + 1 : end)
    return daysCut
  }
  /**
   * 当月最后一周所有日期范围
   * @param {number} year
   * @param {number} month
   * @param {boolean} firstDayOfWeekIsMon 每周是否配置为以周一开始
   */
  lastWeekInMonth(year, month, firstDayOfWeekIsMon) {
    const lastDay = getDate.thisMonthDays(year, month)
    const lastDayWeek = getDate.dayOfWeek(year, month, lastDay)
    const [start, end] = [lastDay - lastDayWeek, lastDay]
    let days = this.getData('calendar.days') || []
    if (this.Component.weekMode) {
      days = Day(this.Component).buildDate(year, month)
    }
    const daysCut = days.slice(firstDayOfWeekIsMon ? start : start - 1, end)
    return daysCut
  }
  __getDisableDateTimestamp(config) {
    const { date, type } = config.disableMode || {}
    let disableDateTimestamp
    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
    }
  }
  /**
   * 渲染日期之前初始化已选日期
   * @param {array} dates 当前日期数组
   */
  initSelectedDay(dates) {
    let datesCopy = [...dates]
    const { selectedDay = [] } = this.getData('calendar')
    const selectedDayStr = selectedDay.map(
      item => `${+item.year}-${+item.month}-${+item.day}`
    )
    const config = this.getCalendarConfig()
    const {
      disableDateTimestamp,
      disableType
    } = this.__getDisableDateTimestamp(config)
    datesCopy = datesCopy.map(item => {
      if (!item) return {}
      const dateTimestamp = getDateTimeStamp(item)
      let date = { ...item }
      if (
        selectedDayStr.includes(`${+date.year}-${+date.month}-${+date.day}`)
      ) {
        date.choosed = true
      } else {
        date.choosed = false
      }
      if (
        (disableType === 'after' && dateTimestamp > disableDateTimestamp) ||
        (disableType === 'before' && dateTimestamp < disableDateTimestamp)
      ) {
        date.disable = true
      }
      date = this.__setTodoWhenJump(date, config)
      if (config.showLunar) {
        date = this.__setSolarLunar(date)
      }
      if (config.highlightToday) {
        date = this.__highlightToday(date)
      }
      return date
    })
    return datesCopy
  }
  /**
   * 周视图下设置可选日期范围
   * @param {object} days 当前展示的日期
   */
  setEnableAreaOnWeekMode(dates = []) {
    let { enableAreaTimestamp = [], enableDaysTimestamp = [] } = this.getData(
      'calendar'
    )
    dates.forEach(item => {
      const timestamp = getDate
        .newDate(item.year, item.month, item.day)
        .getTime()

      let setDisable = false
      if (enableAreaTimestamp.length) {
        if (
          (+enableAreaTimestamp[0] > +timestamp ||
            +timestamp > +enableAreaTimestamp[1]) &&
          !enableDaysTimestamp.includes(+timestamp)
        ) {
          setDisable = true
        }
      } else if (
        enableDaysTimestamp.length &&
        !enableDaysTimestamp.includes(+timestamp)
      ) {
        setDisable = true
      }
      if (setDisable) {
        item.disable = true
        item.choosed = false
      }
      const config = CalendarConfig(this.Component).getCalendarConfig()
      const {
        disableDateTimestamp,
        disableType
      } = this.__getDisableDateTimestamp(config)
      if (
        (disableType === 'before' && timestamp < disableDateTimestamp) ||
        (disableType === 'after' && timestamp > disableDateTimestamp)
      ) {
        item.disable = true
      }
    })
  }
  updateYMWhenSwipeCalendarHasSelected(dates) {
    const hasSelectedDate = dates.filter(date => date.choosed)
    if (hasSelectedDate && hasSelectedDate.length) {
      const { year, month } = hasSelectedDate[0]
      return {
        year,
        month
      }
    }
    return {}
  }
  /**
   * 计算下一周的日期
   */
  calculateNextWeekDays() {
    let { lastDayInThisWeek, lastDayInThisMonth } = this.calculateLastDay()
    let { curYear, curMonth } = this.getData('calendar')
    let days = []
    if (lastDayInThisMonth - lastDayInThisWeek >= 7) {
      const { Uyear, Umonth } = this.updateCurrYearAndMonth('next')
      curYear = Uyear
      curMonth = Umonth
      for (let i = lastDayInThisWeek + 1; i <= lastDayInThisWeek + 7; i++) {
        days.push({
          year: curYear,
          month: curMonth,
          day: i,
          week: getDate.dayOfWeek(curYear, curMonth, i)
        })
      }
    } else {
      for (let i = lastDayInThisWeek + 1; i <= lastDayInThisMonth; i++) {
        days.push({
          year: curYear,
          month: curMonth,
          day: i,
          week: getDate.dayOfWeek(curYear, curMonth, i)
        })
      }
      const { Uyear, Umonth } = this.updateCurrYearAndMonth('next')
      curYear = Uyear
      curMonth = Umonth
      for (let i = 1; i <= 7 - (lastDayInThisMonth - lastDayInThisWeek); i++) {
        days.push({
          year: curYear,
          month: curMonth,
          day: i,
          week: getDate.dayOfWeek(curYear, curMonth, i)
        })
      }
    }
    days = this.initSelectedDay(days)
    const {
      year: updateYear,
      month: updateMonth
    } = this.updateYMWhenSwipeCalendarHasSelected(days)
    if (updateYear && updateMonth) {
      curYear = updateYear
      curMonth = updateMonth
    }
    this.setEnableAreaOnWeekMode(days)
    this.setData(
      {
        'calendar.curYear': curYear,
        'calendar.curMonth': curMonth,
        'calendar.days': days
      },
      () => {
        Day(this.Component).setDateStyle()
      }
    )
  }
  /**
   * 计算上一周的日期
   */
  calculatePrevWeekDays() {
    let { firstDayInThisWeek } = this.calculateFirstDay()
    let { curYear, curMonth } = this.getData('calendar')
    let days = []

    if (firstDayInThisWeek - 7 > 0) {
      const { Uyear, Umonth } = this.updateCurrYearAndMonth('prev')
      curYear = Uyear
      curMonth = Umonth
      for (let i = firstDayInThisWeek - 7; i < firstDayInThisWeek; i++) {
        days.push({
          year: curYear,
          month: curMonth,
          day: i,
          week: getDate.dayOfWeek(curYear, curMonth, i)
        })
      }
    } else {
      let temp = []
      for (let i = 1; i < firstDayInThisWeek; i++) {
        temp.push({
          year: curYear,
          month: curMonth,
          day: i,
          week: getDate.dayOfWeek(curYear, curMonth, i)
        })
      }
      const { Uyear, Umonth } = this.updateCurrYearAndMonth('prev')
      curYear = Uyear
      curMonth = Umonth
      const prevMonthDays = getDate.thisMonthDays(curYear, curMonth)
      for (
        let i = prevMonthDays - Math.abs(firstDayInThisWeek - 7);
        i <= prevMonthDays;
        i++
      ) {
        days.push({
          year: curYear,
          month: curMonth,
          day: i,
          week: getDate.dayOfWeek(curYear, curMonth, i)
        })
      }
      days = days.concat(temp)
    }
    days = this.initSelectedDay(days)
    const {
      year: updateYear,
      month: updateMonth
    } = this.updateYMWhenSwipeCalendarHasSelected(days)
    if (updateYear && updateMonth) {
      curYear = updateYear
      curMonth = updateMonth
    }
    this.setEnableAreaOnWeekMode(days)
    this.setData(
      {
        'calendar.curYear': curYear,
        'calendar.curMonth': curMonth,
        'calendar.days': days
      },
      () => {
        Day(this.Component).setDateStyle()
      }
    )
  }
  calculateDatesWhenJump(
    { year, month, day },
    { firstWeekDays, lastWeekDays },
    firstDayOfWeekIsMon
  ) {
    const inFirstWeek = this.__dateIsInWeek({ year, month, day }, firstWeekDays)
    const inLastWeek = this.__dateIsInWeek({ year, month, day }, lastWeekDays)
    let dates = []
    if (inFirstWeek) {
      dates = this.__calculateDatesWhenInFirstWeek(
        firstWeekDays,
        firstDayOfWeekIsMon
      )
    } else if (inLastWeek) {
      dates = this.__calculateDatesWhenInLastWeek(
        lastWeekDays,
        firstDayOfWeekIsMon
      )
    } else {
      dates = this.__calculateDates({ year, month, day }, firstDayOfWeekIsMon)
    }
    return dates
  }
  jump({ year, month, day }, disableSelected) {
    return new Promise(resolve => {
      if (!day) return
      const config = this.getCalendarConfig()
      const firstDayOfWeekIsMon = config.firstDayOfWeek === 'Mon'
      const firstWeekDays = this.firstWeekInMonth(
        year,
        month,
        firstDayOfWeekIsMon
      )
      let lastWeekDays = this.lastWeekInMonth(year, month, firstDayOfWeekIsMon)
      let dates = this.calculateDatesWhenJump(
        { year, month, day },
        {
          firstWeekDays,
          lastWeekDays
        },
        firstDayOfWeekIsMon
      )
      dates = dates.map(d => {
        let date = { ...d }
        if (
          +date.year === +year &&
          +date.month === +month &&
          +date.day === +day &&
          !disableSelected
        ) {
          date.choosed = true
        }
        date = this.__setTodoWhenJump(date, config)
        if (config.showLunar) {
          date = this.__setSolarLunar(date)
        }
        if (config.highlightToday) {
          date = this.__highlightToday(date)
        }
        return date
      })
      this.setEnableAreaOnWeekMode(dates)
      const tmpData = {
        'calendar.days': dates,
        'calendar.curYear': year,
        'calendar.curMonth': month,
        'calendar.empytGrids': [],
        'calendar.lastEmptyGrids': []
      }
      if (!disableSelected) {
        tmpData['calendar.selectedDay'] = dates.filter(item => item.choosed)
      }
      this.setData(tmpData, () => {
        Day(this.Component).setDateStyle()
        resolve({ year, month, date: day })
      })
    })
  }
  __setTodoWhenJump(dateInfo) {
    const date = { ...dateInfo }
    const { todoLabels = [], showLabelAlways } = this.getData('calendar')
    const todosStr = todoLabels.map(d => `${+d.year}-${+d.month}-${+d.day}`)
    const idx = todosStr.indexOf(`${+date.year}-${+date.month}-${+date.day}`)
    if (idx !== -1) {
      if (showLabelAlways) {
        date.showTodoLabel = true
      } else {
        date.showTodoLabel = !date.choosed
      }
      const todo = todoLabels[idx] || {}
      if (date.showTodoLabel && todo.todoText) date.todoText = todo.todoText
      if (todo.color) date.color = todo.color
    }
    return date
  }
  __setSolarLunar(dateInfo) {
    const date = { ...dateInfo }
    date.lunar = convertSolarLunar.solar2lunar(
      +date.year,
      +date.month,
      +date.day
    )
    return date
  }
  __highlightToday(dateInfo) {
    const date = { ...dateInfo }
    const today = getDate.todayDate()
    const isToday =
      +today.year === +date.year &&
      +today.month === +date.month &&
      +date.day === +today.date
    date.isToday = isToday
    return date
  }
  __calculateDatesWhenInFirstWeek(firstWeekDays) {
    const dates = [...firstWeekDays]
    if (dates.length < 7) {
      let { year, month } = dates[0]
      let len = 7 - dates.length
      let lastDate
      if (month > 1) {
        month -= 1
        lastDate = getDate.thisMonthDays(year, month)
      } else {
        month = 12
        year -= 1
        lastDate = getDate.thisMonthDays(year, month)
      }
      while (len) {
        dates.unshift({
          year,
          month,
          day: lastDate,
          week: getDate.dayOfWeek(year, month, lastDate)
        })
        lastDate -= 1
        len -= 1
      }
    }
    return dates
  }
  __calculateDatesWhenInLastWeek(lastWeekDays) {
    const dates = [...lastWeekDays]
    if (dates.length < 7) {
      let { year, month } = dates[0]
      let len = 7 - dates.length
      let firstDate = 1
      if (month > 11) {
        month = 1
        year += 1
      } else {
        month += 1
      }
      while (len) {
        dates.push({
          year,
          month,
          day: firstDate,
          week: getDate.dayOfWeek(year, month, firstDate)
        })
        firstDate += 1
        len -= 1
      }
    }
    return dates
  }
  __calculateDates({ year, month, day }, firstDayOfWeekIsMon) {
    const week = getDate.dayOfWeek(year, month, day)
    let range = [day - week, day + (6 - week)]
    if (firstDayOfWeekIsMon) {
      range = [day + 1 - week, day + (7 - week)]
    }
    const dates = Day(this.Component).buildDate(year, month)
    const weekDates = dates.slice(range[0] - 1, range[1])
    return weekDates
  }
  __dateIsInWeek(date, week) {
    return week.find(
      item =>
        +item.year === +date.year &&
        +item.month === +date.month &&
        +item.day === +date.day
    )
  }
  __tipsWhenCanNotSwtich() {
    logger.info(
      '当前月份未选中日期下切换为周视图，不能明确该展示哪一周的日期，故此情况不允许切换'
    )
  }
}

export default component => new WeekMode(component)