beyond-rails 0.0.245 → 0.0.246

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 14a11baddc8aa18a29a74c0774442e2b5486b49ad44a7e435497176aa8a0c230
-  data.tar.gz: 92a0ac4ab51c30bac1f93cc092bb05c6ac4fd4e0c53eb792b983e967dd77f0a9
+  metadata.gz: ebefc15d0cab8d8554a18f030ae3041af23f3aab56633bd12aa9e80f823454d9
+  data.tar.gz: a54e416999fce854ecdcc3194d3e7226475f56f8d3ae63d59d638a1651eb8751
 SHA512:
-  metadata.gz: 480156108ca39681b88309ac8554648af5d2aa47dfcf9ee077a940f19f4fd87de40a3a630d5a9b81a3a5244529ca07d377ef94f7ff64a3189bd6a065e76c0cff
-  data.tar.gz: 1b458994269fcc000dd7e5b670e7c69cb816fe56e251a51b55ff7ce78a6925c6951df7897c1f21e86dc5d130def90f4d71c60167ec515ff1b3c0eb4d3cf1c482
+  metadata.gz: acb1c4dba756a4d2fa6a0ca378c02e52d2ffb7703bc5d13d1ff298e9604e76250c7124066918e7b45809355f358d100f2b8a293be81292ec00579d93a91433f9
+  data.tar.gz: 78dc63e30de5eb027bba31a7cbdefe1c9737774f3090dc69a3f2e243a3d2ffd9a2bb17a33248e6f1d5c5928b5558f50629d460fac15e5eef96d2a4bfb8b66604

data/src/js/components/MonthInput.js

@@ -0,0 +1,75 @@
+import { DEFAULT_TIMEZONE } from '../consts'
+import supportDom from '../decorators/supportDom'
+import isTouchDevice from '../utils/isTouchDevice'
+import { format } from '../utils'
+
+@supportDom
+export default class MonthInput {
+
+  constructor(dom, date, options = {}) {
+    this.active = false
+    this.danger = false
+    this.dom = dom
+    this.date = date
+    this.options = options
+    this.tz = options.tz || DEFAULT_TIMEZONE
+    this.datePattern = options.datePattern || 'yyyy/MM'
+    this.init()
+  }
+
+  focus() {
+    this.dom.focus()
+  }
+
+  init() {
+    this.initInput()
+    this.addEvents()
+  }
+
+  initInput() {
+    const { dom } = this
+    if (this.date) {
+      dom.value = this.format(this.date)
+    }
+    if (! dom.hasAttribute('placeholder')) {
+      dom.setAttribute('placeholder', this.datePattern.toUpperCase())
+    }
+    if (isTouchDevice()) {
+      dom.setAttribute('readonly', 'readonly')
+    }
+  }
+
+  format(date) {
+    return format(date, this.datePattern, { timezone: this.tz })
+  }
+
+  setDate(date) {
+    this.date = date
+    this.dom.value = date ? this.format(date) : ''
+  }
+
+  setActive(active) {
+    this.active = active
+    const func = active ? 'add' : 'remove'
+    this.dom.classList[func]('active')
+  }
+
+  setDanger(danger) {
+    this.danger = danger
+    const func = danger ? 'add' : 'remove'
+    this.dom.classList[func]('danger')
+  }
+
+  clearStatus() {
+    this.setActive(false)
+    this.setDanger(false)
+  }
+
+  addEvents() {
+    const { dom } = this
+    this.addEvent(dom, 'click', event => this.fire('click', event))
+    this.addEvent(dom, 'focus', event => this.fire('focus', event))
+    this.addEvent(dom, 'keyup', event => this.fire('keyup', event))
+    this.addEvent(dom, 'blur', event => this.fire('blur', event))
+  }
+}

data/src/js/components/MonthMenu.js

@@ -0,0 +1,262 @@
+import supportDom from '../decorators/supportDom'
+import getFloatedTargetPos from '../utils/getFloatedTargetPos'
+import isTouchDevice from '../utils/isTouchDevice'
+import { DEFAULT_TIMEZONE, DEFAULT_LOCALE } from '../consts'
+import {
+  chunk,
+  format,
+  range,
+  setYear,
+  setMonth,
+  getYear,
+  getMonth,
+  addYears,
+  toPixel,
+  subYears,
+  noop
+} from '../utils'
+
+@supportDom
+export default class MonthMenu {
+
+  constructor(options = {}) {
+    const { dom, date } = options
+    this.container = dom
+    this.date = date
+    this.menuDate = this.date || new Date()
+    this.options = options
+    this.tz = options.tz || DEFAULT_TIMEZONE
+    this.locale = options.locale || DEFAULT_LOCALE
+    this.change = options.change || noop
+    this.isVisible = false
+    this.loopIndex = 0
+    this.init()
+  }
+
+  init() {
+    this.addMenu()
+    this.addEvents()
+  }
+
+  renderTableContent() {
+    const { date, menuDate, locale } = this
+
+    const currentYear = date ? getYear(date) : null
+    const currentMonth = date ? getMonth(date) : null
+
+    return chunk(range(0, 12), 3)
+      .map(months => {
+        const tds = months.map(month => {
+          const d = setMonth(menuDate, month)
+          const text = format(d, 'MMM', { locale })
+
+          const isCurrentMonth = (currentYear === getYear(d)) && (currentMonth === getMonth(d))
+
+          const classname = isCurrentMonth ? 'cell selected-ex' : 'cell'
+          return `<td class="${classname}" data-month-td="${month}">${text}</td>`
+        }).join('')
+        return `<tr>${tds}</tr>`
+      })
+      .join('')
+  }
+
+  updateTableContent() {
+    this.table.innerHTML = this.renderTableContent()
+  }
+
+  addMenu() {
+    const { container } = this
+    const dom = document.createElement('div')
+    dom.classList.add('month-menu')
+
+    if (container) {
+      dom.classList.add('static')
+    }
+    const title = getYear(this.menuDate)
+    dom.innerHTML = `
+      <div class="month-menu-content">
+        <div class="month-menu-caption">
+          <button class="month-menu-caption-btn"
+                  type="button"
+                  data-prev-month-btn>
+            <i class="icon-chevron-left"></i>
+          </button>
+          <div data-month-menu-title>${title}</div>
+          <button class="month-menu-caption-btn"
+                  type="button"
+                  data-next-month-btn>
+            <i class="icon-chevron-right"></i>
+          </button>
+        </div>
+        <table class="month-menu-table"
+               data-month-table>
+          ${this.renderTableContent()}
+        </table>
+      </div>
+    `
+    if (container) {
+      container.appendChild(dom)
+    }
+    else {
+      document.body.appendChild(dom)
+    }
+    this.menuTitle = dom.querySelector('[data-month-menu-title]')
+    this.prevBtn = dom.querySelector('[data-prev-month-btn]')
+    this.nextBtn = dom.querySelector('[data-next-month-btn]')
+    this.table = dom.querySelector('[data-month-table]')
+    this.dom = dom
+  }
+
+  setTitle(date) {
+    this.menuTitle.textContent = getYear(date)
+  }
+
+  addYear(year = 1) {
+    this.menuDate = addYears(this.menuDate, year)
+    this.setTitle(this.menuDate)
+    this.updateTableContent()
+  }
+
+  addYearLoop() {
+    const duration = (this.loopIndex === 0) ? 500 : 100
+    this.addYearTimer = setTimeout(() => {
+      this.loopIndex += 1
+      const year = parseInt((this.loopIndex / 5) + 1, 10)
+      this.addYear(year)
+      this.addYearLoop()
+    }, duration)
+  }
+
+  clearAddYearLoop() {
+    clearTimeout(this.addYearTimer)
+    this.loopIndex = 0
+  }
+
+  subYear(year = 1) {
+    this.menuDate = subYears(this.menuDate, year)
+    this.setTitle(this.menuDate)
+    this.updateTableContent()
+  }
+
+  subYearLoop() {
+    const duration = (this.loopIndex === 0) ? 500 : 100
+    this.subYearTimer = setTimeout(() => {
+      this.loopIndex += 1
+      const year = parseInt((this.loopIndex / 5) + 1, 10)
+      const currentYear = getYear(this.menuDate)
+      if ((currentYear - year) > 0) {
+        this.subYear(year)
+        this.subYearLoop()
+      }
+    }, duration)
+  }
+
+  clearSubYearLoop() {
+    clearTimeout(this.subYearTimer)
+    this.loopIndex = 0
+  }
+
+  stop(event) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  addEvents() {
+    const isTouch = isTouchDevice()
+    const downEvent = isTouch ? 'touchstart' : 'mousedown'
+
+    this.addEvent(this.prevBtn, downEvent, event => {
+      this.stop(event)
+      const currentYear = getYear(this.menuDate)
+      if ((currentYear - 1) <= 0) {
+        return
+      }
+      this.subYear()
+      this.subYearLoop()
+    })
+
+    this.addEvent(this.nextBtn, 'click', event => event.stopPropagation())
+    this.addEvent(this.prevBtn, 'click', event => event.stopPropagation())
+
+    this.addEvent(this.nextBtn, downEvent, event => {
+      this.stop(event)
+      this.addYear()
+      this.addYearLoop()
+    })
+
+    const upEvent = isTouch ? 'touchend' : 'mouseup'
+    this.addEvent(this.prevBtn, upEvent, event => {
+      this.stop(event)
+      this.clearSubYearLoop()
+    })
+    this.addEvent(this.nextBtn, upEvent, event => {
+      this.stop(event)
+      this.clearAddYearLoop()
+    })
+
+    this.addEvent(this.table, 'click', event => {
+      this.stop(event)
+      const { target } = event
+      if ('monthTd' in target.dataset) {
+        const year = getYear(this.menuDate)
+        const month = parseInt(target.dataset.monthTd, 10)
+
+        if (! this.date) {
+          this.date = new Date(this.menuDate.getTime())
+        }
+
+        this.date = setYear(this.date, year)
+        this.date = setMonth(this.date, month)
+        this.updateTableContent()
+        this.emitChange()
+      }
+    })
+  }
+
+  setDate(date) {
+    this.date = date
+    this.menuDate = date
+    this.setTitle(date)
+    this.updateTableContent()
+  }
+
+  emitChange() {
+    this.change(this.date)
+  }
+
+  pos(src) {
+    const { dom } = this
+    const { pos } = getFloatedTargetPos({
+      src,
+      target: dom,
+      place: 'bottom',
+      align: 'left',
+      offset: 4
+    })
+    dom.style.left = toPixel(pos.left)
+    dom.style.top = toPixel(pos.top)
+  }
+
+  show(src) {
+    const { dom } = this
+    dom.style.display = 'block'
+    if (src) {
+      this.pos(src)
+    }
+    dom.style.opacity = 1
+    this.isVisible = true
+  }
+
+  hide() {
+    this.dom.style.display = 'none'
+    this.isVisible = false
+  }
+
+  destroy() {
+    this.menuTitle = null
+    this.prevBtn = null
+    this.nextBtn = null
+    this.table = null
+    this.dom.remove()
+  }
+}

data/src/js/components/Monthpicker.js

@@ -0,0 +1,90 @@
+import MonthInput from './MonthInput'
+import MonthMenu from './MonthMenu'
+import supportDom from '../decorators/supportDom'
+import { DEFAULT_TIMEZONE } from '../consts'
+import { noop, parse } from '../utils'
+
+@supportDom
+export default class Monthpicker {
+
+  constructor(dom, options = {}) {
+    this.dom = dom
+    this.tz = options.tz || DEFAULT_TIMEZONE
+    this.date = options.date
+    this.menuDate = this.date
+
+    this.options = options
+    this.backdropMode = options.backdropMode || 'auto'
+    this.change = options.change || noop
+    this.init()
+  }
+
+  init() {
+    const { dom } = this
+    this.monthInput = new MonthInput(
+      dom.querySelector('[data-month]'),
+      this.date,
+      this.options
+    )
+    this.monthMenu = new MonthMenu({
+      date: this.menuDate,
+      change: date => {
+        this.monthInput.setDate(date)
+        this.monthInput.clearStatus()
+        this.monthMenu.hide()
+      }
+    })
+    this.addEvents()
+  }
+
+  handleMonthInputFocus() {
+    const { monthInput } = this
+    monthInput.clearStatus()
+    monthInput.setActive(true)
+    this.monthMenu.show(this.dom)
+  }
+
+  handleMonthInputKeyUp(event) {
+    const { monthInput } = this
+    const { value } = event.target
+    const res = parse(value, monthInput.datePattern, this.date)
+
+    if (res.toString() === 'Invalid Date') {
+      monthInput.setDanger(true)
+      this.nextDate = null
+    }
+    else {
+      monthInput.setDanger(false)
+      this.nextDate = res
+    }
+  }
+
+  handleMonthInputBlur() {
+    if (this.nextDate) {
+      this.date = this.nextDate
+      this.menuDate = this.date
+      this.monthMenu.setDate(this.menuDate)
+      this.nextDate = null
+    }
+  }
+
+  addEvents() {
+    const { monthInput } = this
+    monthInput.on('focus', () => this.handleMonthInputFocus())
+    monthInput.on('click', event => event.stopPropagation())
+    monthInput.on('keyup', event => this.handleMonthInputKeyUp(event))
+    monthInput.on('blur', () => this.handleMonthInputBlur())
+
+    if (this.backdropMode === 'auto') {
+      this.addEvent(document, 'click', () => {
+        this.monthMenu.hide()
+        this.monthInput.clearStatus()
+      })
+    }
+  }
+
+  destroy() {
+    this.monthInput.destroy()
+    this.monthMenu.destroy()
+  }
+}

data/src/js/index.js

@@ -14,6 +14,8 @@ import DateTimeRanger from './components/DateTimeRanger'
 import Datepicker from './components/Datepicker'
 import Dropdown from './components/Dropdown'
 import LineChart from './components/LineChart'
+import Monthpicker from './components/Monthpicker'
+import MonthMenu from './components/MonthMenu'
 import Menu from './components/Menu'
 import Modal from './components/Modal'
 import Navbar from './components/Navbar'
@@ -51,6 +53,8 @@ export {
   Datepicker,
   Dropdown,
   LineChart,
+  Monthpicker,
+  MonthMenu,
   Menu,
   Modal,
   Navbar,

data/src/js/utils/index.js

@@ -9,6 +9,8 @@ import toPixel from '@superlanding/topixel'
 // date-fns
 import addDays from 'date-fns/addDays'
 import addMonths from 'date-fns/addMonths'
+import subYears from 'date-fns/subYears'
+import addYears from 'date-fns/addYears'
 import compareAsc from 'date-fns/compareAsc'
 import endOfDay from 'date-fns/endOfDay'
 import endOfMonth from 'date-fns/endOfMonth'
@@ -18,9 +20,11 @@ import getHours from 'date-fns/getHours'
 import getMinutes from 'date-fns/getMinutes'
 import getMonth from 'date-fns/getMonth'
 import getSeconds from 'date-fns/getSeconds'
+import setYear from 'date-fns/setYear'
 import getYear from 'date-fns/getYear'
 import parse from 'date-fns/parse'
 import set from 'date-fns/set'
+import setMonth from 'date-fns/setMonth'
 import startOfDay from 'date-fns/startOfDay'
 import startOfMonth from 'date-fns/startOfMonth'
 import subMonths from 'date-fns/subMonths'
@@ -28,6 +32,7 @@ import toDate from 'date-fns/toDate'
 import { format } from 'date-fns-tz'
 
 // lodash
+import chunk from 'lodash.chunk'
 import debounce from 'lodash.debounce'
 import isFunction from 'lodash.isfunction'
 import noop from 'lodash.noop'
@@ -50,6 +55,8 @@ export {
   // date-fns
   addDays,
   addMonths,
+  addYears,
+  subYears,
   compareAsc,
   endOfDay,
   endOfMonth,
@@ -59,9 +66,11 @@ export {
   getMinutes,
   getMonth,
   getSeconds,
+  setYear,
   getYear,
   parse,
   set,
+  setMonth,
   startOfDay,
   startOfMonth,
   subMonths,
@@ -69,6 +78,7 @@ export {
   format,
 
   // lodash
+  chunk,
   debounce,
   isFunction,
   noop,

data/src/sass/_beyond.scss

@@ -26,6 +26,7 @@
 @import './components/_checkbox';
 @import './components/_date-input';
 @import './components/_date-menu';
+@import './components/_month-menu';
 @import './components/_date-time-ranger';
 @import './components/_datepicker';
 @import './components/_dropdown';

data/src/sass/components/_month-menu.scss

@@ -0,0 +1,70 @@
+.month-menu {
+  display: none;
+  position: absolute;
+  box-shadow: 0 0 0 1px rgba(136, 152, 170, .1),
+    0 15px 35px 0 rgba(49, 49, 93, .1),
+    0 5px 15px 0 rgba(0, 0, 0, .08);
+  background-color: #fff;
+  white-space: nowrap;
+  &.static {
+    display: inline-block;
+    position: static;
+  }
+  .month-menu-content {
+    display: inline-block;
+    position: relative;
+    padding: 0 14px 14px 14px;
+    width: 252px;
+  }
+  .month-menu-caption {
+    display: flex;
+    justify-content: space-between;
+    font-size: 15px;
+    color: #3c4257;
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+  }
+  .month-menu-caption-btn {
+    border: 0;
+    background-color: transparent;
+    display: block;
+    @include size(50px);
+
+    .icon-chevron-left,
+    .icon-chevron-right {
+      font-size: 12px;
+    }
+  }
+  .month-menu-table {
+    font-size: 14px;
+    width: 100%;
+    margin-top: 2px;
+    th, td {
+      padding: 3px;
+    }
+    td {
+      text-align: center;
+      &.cell {
+        background-color: #f7fafc;
+        cursor: pointer;
+        border-width: 1px;
+        border-style: solid;
+        border-color: #e3e8ee;
+      }
+      &.cell.today {
+        background-color: #fffef4;
+      }
+      &.cell.selected {
+        background-color: #6c8eef;
+        color: #fff;
+        border-color: #6c8eef;
+      }
+      &.cell.selected-ex {
+        background-color: #5469d4;
+        color: #fff;
+        border-color: #5469d4;
+      }
+    }
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.245
+  version: 0.0.246
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-11-09 00:00:00.000000000 Z
+date: 2020-11-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -139,6 +139,9 @@ files:
 - src/js/components/LineChart.js
 - src/js/components/Menu.js
 - src/js/components/Modal.js
+- src/js/components/MonthInput.js
+- src/js/components/MonthMenu.js
+- src/js/components/Monthpicker.js
 - src/js/components/Navbar.js
 - src/js/components/PieChart.js
 - src/js/components/Radio.js
@@ -235,6 +238,7 @@ files:
 - src/sass/components/_list.scss
 - src/sass/components/_mega-menu.scss
 - src/sass/components/_modal.scss
+- src/sass/components/_month-menu.scss
 - src/sass/components/_nav.scss
 - src/sass/components/_navbar.scss
 - src/sass/components/_pagination.scss