mini_program/components/calendar/func/day.js

import WxData from './wxData'
import CalendarConfig from './config'
import convertSolarLunar from './convertSolarLunar'
import {
  Logger,
  GetDate,
  getDateTimeStamp,
  uniqueArrayByDate,
  delRepeatedEnableDay,
  convertEnableAreaToTimestamp,
  converEnableDaysToTimestamp
} from './utils'

const logger = new Logger()
const getDate = new GetDate()
const toString = Object.prototype.toString

class Day extends WxData {
  constructor(component) {
    super(component)
    this.Component = component
  }
  getCalendarConfig() {
    return this.Component.config
  }
  /**
   *
   * @param {number} year
   * @param {number} month
   */
  buildDate(year, month) {
    const today = getDate.todayDate()
    const thisMonthDays = getDate.thisMonthDays(year, month)
    const dates = []
    for (let i = 1; i <= thisMonthDays; i++) {
      const isToday =
        +today.year === +year && +today.month === +month && i === +today.date
      const config = this.getCalendarConfig()
      const date = {
        year,
        month,
        day: i,
        choosed: false,
        week: getDate.dayOfWeek(year, month, i),
        isToday: isToday && config.highlightToday,
        lunar: convertSolarLunar.solar2lunar(+year, +month, +i)
      }
      dates.push(date)
    }
    return dates
  }
  /**
   * 指定可选日期范围
   * @param {array} area 日期访问数组
   */
  enableArea(dateArea = []) {
    if (dateArea.length === 2) {
      const isRight = this.__judgeParam(dateArea)
      if (isRight) {
        let { days = [], selectedDay = [] } = this.getData('calendar')
        const { startTimestamp, endTimestamp } = convertEnableAreaToTimestamp(
          dateArea
        )
        const dataAfterHandle = this.__handleEnableArea(
          {
            dateArea,
            days,
            startTimestamp,
            endTimestamp
          },
          selectedDay
        )
        this.setData({
          'calendar.enableArea': dateArea,
          'calendar.days': dataAfterHandle.dates,
          'calendar.selectedDay': dataAfterHandle.selectedDay,
          'calendar.enableAreaTimestamp': [startTimestamp, endTimestamp]
        })
      }
    } else {
      logger.warn(
        'enableArea()参数需为时间范围数组，形如：["2018-8-4" , "2018-8-24"]'
      )
    }
  }
  /**
   * 指定特定日期可选
   * @param {array} days 指定日期数组
   */
  enableDays(dates = []) {
    const { enableArea = [] } = this.getData('calendar')
    let expectEnableDaysTimestamp = []
    if (enableArea.length) {
      expectEnableDaysTimestamp = delRepeatedEnableDay(dates, enableArea)
    } else {
      expectEnableDaysTimestamp = converEnableDaysToTimestamp(dates)
    }
    let { days = [], selectedDay = [] } = this.getData('calendar')
    const dataAfterHandle = this.__handleEnableDays(
      {
        days,
        expectEnableDaysTimestamp
      },
      selectedDay
    )
    this.setData({
      'calendar.days': dataAfterHandle.dates,
      'calendar.selectedDay': dataAfterHandle.selectedDay,
      'calendar.enableDays': dates,
      'calendar.enableDaysTimestamp': expectEnableDaysTimestamp
    })
  }
  /**
   * 设置多个日期选中
   * @param {array} selected 需选中日期
   */
  setSelectedDays(selected) {
    const config = CalendarConfig(this.Component).getCalendarConfig()
    if (!config.multi) {
      return logger.warn('单选模式下不能设置多日期选中，请配置 multi')
    }
    let { days } = this.getData('calendar')
    let newSelectedDay = []
    if (!selected) {
      days.map(item => {
        item.choosed = true
        item.showTodoLabel = false
      })
      newSelectedDay = days
    } else if (selected && selected.length) {
      const { dates, selectedDates } = this.__handleSelectedDays(
        days,
        newSelectedDay,
        selected
      )
      days = dates
      newSelectedDay = selectedDates
    }
    CalendarConfig(this.Component).setCalendarConfig('multi', true)
    this.setData({
      'calendar.days': days,
      'calendar.selectedDay': newSelectedDay
    })
  }
  /**
   * 禁用指定日期
   * @param {array} dates  禁用
   */
  disableDays(dates) {
    const { disableDays = [], days } = this.getData('calendar')
    if (Object.prototype.toString.call(dates) !== '[object Array]') {
      return logger.warn('disableDays 参数为数组')
    }
    let _disableDays = []
    if (dates.length) {
      _disableDays = uniqueArrayByDate(dates.concat(disableDays))
      const disableDaysCol = _disableDays.map(d => getDate.toTimeStr(d))
      days.forEach(item => {
        const cur = getDate.toTimeStr(item)
        if (disableDaysCol.includes(cur)) item.disable = true
      })
    } else {
      days.forEach(item => {
        item.disable = false
      })
    }
    this.setData({
      'calendar.days': days,
      'calendar.disableDays': _disableDays
    })
  }
  /**
   * 设置连续日期选择区域
   * @param {array} dateArea 区域开始结束日期数组
   */
  chooseArea(dateArea = []) {
    return new Promise((resolve, reject) => {
      if (dateArea.length === 1) {
        dateArea = dateArea.concat(dateArea)
      }
      if (dateArea.length === 2) {
        const isRight = this.__judgeParam(dateArea)
        if (isRight) {
          const config = CalendarConfig(this.Component).getCalendarConfig()
          const { startTimestamp, endTimestamp } = convertEnableAreaToTimestamp(
            dateArea
          )
          this.setData(
            {
              calendarConfig: {
                ...config,
                chooseAreaMode: true,
                mulit: true
              },
              'calendar.chooseAreaTimestamp': [startTimestamp, endTimestamp]
            },
            () => {
              this.__chooseContinuousDates(startTimestamp, endTimestamp)
                .then(resolve)
                .catch(reject)
            }
          )
        }
      }
    })
  }
  __pusheNextMonthDateArea(item, startTimestamp, endTimestamp, selectedDates) {
    const days = this.buildDate(item.year, item.month)
    let daysLen = days.length
    for (let i = 0; i < daysLen; i++) {
      const item = days[i]
      const timeStamp = getDateTimeStamp(item)
      if (timeStamp <= endTimestamp && timeStamp >= startTimestamp) {
        selectedDates.push({
          ...item,
          choosed: true
        })
      }
      if (i === daysLen - 1 && timeStamp < endTimestamp) {
        this.__pusheNextMonthDateArea(
          getDate.nextMonth(item),
          startTimestamp,
          endTimestamp,
          selectedDates
        )
      }
    }
  }
  __pushPrevMonthDateArea(item, startTimestamp, endTimestamp, selectedDates) {
    const days = getDate.sortDates(
      this.buildDate(item.year, item.month),
      'desc'
    )
    let daysLen = days.length
    let firstDate = getDateTimeStamp(days[0])
    for (let i = 0; i < daysLen; i++) {
      const item = days[i]
      const timeStamp = getDateTimeStamp(item)
      if (timeStamp >= startTimestamp && timeStamp <= endTimestamp) {
        selectedDates.push({
          ...item,
          choosed: true
        })
      }
      if (i === daysLen - 1 && firstDate > startTimestamp) {
        this.__pushPrevMonthDateArea(
          getDate.prevMonth(item),
          startTimestamp,
          endTimestamp,
          selectedDates
        )
      }
    }
  }
  /**
   * 当设置日期区域非当前时保存其他月份的日期至已选日期数组
   * @param {object} info
   */
  __calcDateWhenNotInOneMonth(info) {
    const {
      firstDate,
      lastDate,
      startTimestamp,
      endTimestamp,
      filterSelectedDate
    } = info
    if (getDateTimeStamp(firstDate) > startTimestamp) {
      this.__pushPrevMonthDateArea(
        getDate.prevMonth(firstDate),
        startTimestamp,
        endTimestamp,
        filterSelectedDate
      )
    }
    if (getDateTimeStamp(lastDate) < endTimestamp) {
      this.__pusheNextMonthDateArea(
        getDate.nextMonth(lastDate),
        startTimestamp,
        endTimestamp,
        filterSelectedDate
      )
    }
    const newSelectedDates = [...getDate.sortDates(filterSelectedDate)]
    return newSelectedDates
  }
  /**
   * 设置连续日期段
   * @param {number} startTimestamp 连续日期段开始日期时间戳
   * @param {number} endTimestamp 连续日期段结束日期时间戳
   */
  __chooseContinuousDates(startTimestamp, endTimestamp) {
    return new Promise((resolve, reject) => {
      const { days, selectedDay = [] } = this.getData('calendar')
      const selectedDateStr = []
      let filterSelectedDate = []
      selectedDay.forEach(item => {
        const timeStamp = getDateTimeStamp(item)
        if (timeStamp >= startTimestamp && timeStamp <= endTimestamp) {
          filterSelectedDate.push(item)
          selectedDateStr.push(getDate.toTimeStr(item))
        }
      })
      days.forEach(item => {
        const timeStamp = getDateTimeStamp(item)
        const dateInSelecedArray = selectedDateStr.includes(
          getDate.toTimeStr(item)
        )
        if (timeStamp >= startTimestamp && timeStamp <= endTimestamp) {
          if (dateInSelecedArray) {
            return
          }
          item.choosed = true
          filterSelectedDate.push(item)
        } else {
          item.choosed = false
          if (dateInSelecedArray) {
            const idx = filterSelectedDate.findIndex(
              selectedDate =>
                getDate.toTimeStr(selectedDate) === getDate.toTimeStr(item)
            )
            if (idx > -1) {
              filterSelectedDate.splice(idx, 1)
            }
          }
        }
      })
      const firstDate = days[0]
      const lastDate = days[days.length - 1]
      const newSelectedDates = this.__calcDateWhenNotInOneMonth({
        firstDate,
        lastDate,
        startTimestamp,
        endTimestamp,
        filterSelectedDate
      })
      try {
        this.setData(
          {
            'calendar.days': [...days],
            'calendar.selectedDay': newSelectedDates
          },
          () => {
            resolve(newSelectedDates)
          }
        )
      } catch (err) {
        reject(err)
      }
    })
  }
  /**
   * 设置指定日期样式
   * @param {array} dates 待设置特殊样式的日期
   */
  setDateStyle(dates) {
    if (toString.call(dates) !== '[object Array]') return
    const { days, specialStyleDates } = this.getData('calendar')
    if (toString.call(specialStyleDates) === '[object Array]') {
      dates = uniqueArrayByDate([...specialStyleDates, ...dates])
    }
    const _specialStyleDates = dates.map(
      item => `${item.year}_${item.month}_${item.day}`
    )
    const _days = days.map(item => {
      const idx = _specialStyleDates.indexOf(
        `${item.year}_${item.month}_${item.day}`
      )
      if (idx > -1) {
        return {
          ...item,
          class: dates[idx].class
        }
      } else {
        return { ...item }
      }
    })
    this.setData({
      'calendar.days': _days,
      'calendar.specialStyleDates': dates
    })
  }
  __judgeParam(dateArea) {
    const {
      start,
      end,
      startTimestamp,
      endTimestamp
    } = convertEnableAreaToTimestamp(dateArea)
    if (!start || !end) return
    const startMonthDays = getDate.thisMonthDays(start[0], start[1])
    const endMonthDays = getDate.thisMonthDays(end[0], end[1])
    if (start[2] > startMonthDays || start[2] < 1) {
      logger.warn('enableArea() 开始日期错误，指定日期不在当前月份天数范围内')
      return false
    } else if (start[1] > 12 || start[1] < 1) {
      logger.warn('enableArea() 开始日期错误，月份超出1-12月份')
      return false
    } else if (end[2] > endMonthDays || end[2] < 1) {
      logger.warn('enableArea() 截止日期错误，指定日期不在当前月份天数范围内')
      return false
    } else if (end[1] > 12 || end[1] < 1) {
      logger.warn('enableArea() 截止日期错误，月份超出1-12月份')
      return false
    } else if (startTimestamp > endTimestamp) {
      logger.warn('enableArea()参数最小日期大于了最大日期')
      return false
    } else {
      return true
    }
  }
  __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
    }
  }
  __handleEnableArea(data = {}, selectedDay = []) {
    const { area, days, startTimestamp, endTimestamp } = data
    const enableDays = this.getData('calendar.enableDays') || []
    let expectEnableDaysTimestamp = []
    if (enableDays.length) {
      expectEnableDaysTimestamp = delRepeatedEnableDay(enableDays, area)
    }
    const {
      disableDateTimestamp,
      disableType
    } = this.__getDisableDateTimestamp()
    const dates = [...days]
    dates.forEach(item => {
      const timestamp = +getDate
        .newDate(item.year, item.month, item.day)
        .getTime()
      const ifOutofArea =
        (+startTimestamp > timestamp || timestamp > +endTimestamp) &&
        !expectEnableDaysTimestamp.includes(timestamp)
      if (
        ifOutofArea ||
        (disableType === 'before' &&
          disableDateTimestamp &&
          timestamp < disableDateTimestamp) ||
        (disableType === 'after' &&
          disableDateTimestamp &&
          timestamp > disableDateTimestamp)
      ) {
        item.disable = true
        if (item.choosed) {
          item.choosed = false
          selectedDay = selectedDay.filter(
            d => getDate.toTimeStr(item) !== getDate.toTimeStr(d)
          )
        }
      } else if (item.disable) {
        item.disable = false
      }
    })
    return {
      dates,
      selectedDay
    }
  }
  __handleEnableDays(data = {}, selectedDay = []) {
    const { days, expectEnableDaysTimestamp } = data
    const { enableAreaTimestamp = [] } = this.getData('calendar')
    const dates = [...days]
    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]) &&
          !expectEnableDaysTimestamp.includes(+timestamp)
        ) {
          setDisable = true
        }
      } else if (!expectEnableDaysTimestamp.includes(+timestamp)) {
        setDisable = true
      }
      if (setDisable) {
        item.disable = true
        if (item.choosed) {
          item.choosed = false
          selectedDay = selectedDay.filter(
            d => getDate.toTimeStr(item) !== getDate.toTimeStr(d)
          )
        }
      } else {
        item.disable = false
      }
    })
    return {
      dates,
      selectedDay
    }
  }
  __handleSelectedDays(days = [], newSelectedDay = [], selected) {
    const { selectedDay, showLabelAlways } = this.getData('calendar')
    if (selectedDay && selectedDay.length) {
      newSelectedDay = uniqueArrayByDate(selectedDay.concat(selected))
    } else {
      newSelectedDay = selected
    }
    const { year: curYear, month: curMonth } = days[0]
    const currentSelectedDays = []
    newSelectedDay.forEach(item => {
      if (+item.year === +curYear && +item.month === +curMonth) {
        currentSelectedDays.push(getDate.toTimeStr(item))
      }
    })
    ;[...days].map(item => {
      if (currentSelectedDays.includes(getDate.toTimeStr(item))) {
        item.choosed = true
        if (showLabelAlways && item.showTodoLabel) {
          item.showTodoLabel = true
        } else {
          item.showTodoLabel = false
        }
      }
    })
    return {
      dates: days,
      selectedDates: newSelectedDay
    }
  }
}

export default component => new Day(component)