beyond-rails 0.0.168 → 0.0.169

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 703ebdb0a1c1eb6e9455b1d5fd7fb59f213fc05982b9e28e88118355a8ebea4c
-  data.tar.gz: 9762c05edd97cfeae03c7b463002ffc279e032fc25754b9f614ae73ce35b507e
+  metadata.gz: 49ec4ce14c6dc10a0421a4a1ea13e7e84d43e16733c0f03e5e24d08d868a861d
+  data.tar.gz: 207de6d5af44a0cd8e886cc99e04f2fabae1345a986a0f107ea58a9341913c6e
 SHA512:
-  metadata.gz: c74193e9a1ddc3f99ff63b277722f542af50d84e9097caeb4ea23f449f0472356654d355285807fec523c28fb3c01a5532654313d0a46eb694e76972ebe924bb
-  data.tar.gz: 1a03b4780d221cbd8d57e6d132bfded963ae81c0d902ffe72645d1a1867ba2f867b539da84d02b95a03a23d6e5d84a8c337c3210d5d713704248f3b1d5dbbd83
+  metadata.gz: e5c34deb7ade4b8f7e5c75a1c06729c363ddec9aa8d39566b3d215cd4895db48c79a82c8da51977e6bb09699dda59b114415f0143524f8688d57a718b0543d9d
+  data.tar.gz: 3229d5c3480d21320655a067c36b6fb597e74acf74348634796fb192c0213a66345dc87c6d8f8d812ba12d75ba1ce1ec25fdbb82e43c800dd6bac09c043d2f38

data/src/js/components/Timepicker.js

@@ -0,0 +1,131 @@
+import parse from 'date-fns/parse'
+import set from 'date-fns/set'
+import noop from 'lodash.noop'
+import TimeInput from './TimeInput'
+import TimeMenu from './TimeMenu'
+import supportDom from '../helpers/supportDom'
+import { DEFAULT_TIMEZONE } from '../consts'
+import dateToTimestamp from '@superlanding/datetotimestamp'
+import timestampToDate from '@superlanding/timestamptodate'
+
+@supportDom
+export default class Timepicker {
+
+  constructor(dom, timestamp, options = {}) {
+    this.dom = dom
+    this.options = options
+    this.options.change = options.change || noop
+    this.tz = options.tz || DEFAULT_TIMEZONE
+
+    this.date = (timestamp === null) ? null : timestampToDate(timestamp)
+    this.focused = false
+    this.backdropMode = options.backdropMode || 'auto'
+    this.init()
+  }
+
+  init() {
+    this.timeInput = new TimeInput(
+      this.dom,
+      this.date,
+      this.options
+    )
+    this.timeMenu = new TimeMenu()
+    this.addEvents()
+  }
+
+  clearInputStatus() {
+    this.timeInput.clearStatus()
+  }
+
+  handleTimeInputFocus() {
+    const { timeInput } = this
+    this.focused = true
+    this.clearInputStatus()
+    timeInput.setActive(true)
+    this.timeMenu.show({ src: this.dom, date: timeInput.date })
+  }
+
+  handleTimeInputKeyUp(event) {
+    const { date, timeInput } = this
+    const { value } = event.target
+
+    if ((! timeInput.required) && (value === '')) {
+      this.nextDate = null
+      return
+    }
+    const res = parse(event.target.value, timeInput.timePattern, date)
+    this.nextDate = null
+
+    if (res.toString() === 'Invalid Date') {
+      return timeInput.setDanger(true)
+    }
+    timeInput.setDanger(false)
+    this.nextDate = res
+  }
+
+  handleTimeInputBlur() {
+    const { nextDate, date, timeInput } = this
+
+    if (nextDate) {
+      this.date = nextDate
+      timeInput.setDate(nextDate)
+      this.nextDate = null
+    }
+    else if (date) {
+      timeInput.setDate(date)
+    }
+  }
+
+  emitChange() {
+    const { date } = this
+    this.options.change({
+      date,
+      timestamp: dateToTimestamp(date)
+    })
+  }
+
+  hide() {
+    this.focused = false
+    this.clearInputStatus()
+    this.timeMenu.hide()
+  }
+
+  addEvents() {
+
+    this.timeInput.on('focus', () => this.handleTimeInputFocus())
+    this.timeInput.on('keyup', event => this.handleTimeInputKeyUp(event))
+    this.timeInput.on('blur', () => this.handleTimeInputBlur())
+
+    this.timeMenu.on('click', (event, res) => {
+      if (this.date === null) {
+        this.date = set(new Date(), { hours: res.hour, minutes: res.minute })
+      }
+      else {
+        this.date = set(this.date, { hours: res.hour, minutes: res.minute })
+      }
+      this.timeInput.setDate(this.date)
+      this.timeMenu.hide()
+      this.clearInputStatus()
+      this.emitChange()
+    })
+
+    this.addEvent(document, 'click', event => {
+      if (this.focused) {
+        this.focused = false
+        return
+      }
+      if (this.backdropMode === 'manual') {
+        return
+      }
+      if (event.target === this.dom) {
+        return
+      }
+      this.hide()
+    })
+  }
+
+  destroy() {
+    this.timeInput.destroy()
+    this.timeMenu.destroy()
+  }
+}

data/src/js/index.js

@@ -17,6 +17,7 @@ import Navbar from './components/Navbar'
 import Radio from './components/Radio'
 import SearchDropdown from './components/SearchDropdown'
 import Sidebar from './components/Sidebar'
+import Timepicker from './components/Timepicker'
 import Tabbox from './components/Tabbox'
 import Toast from './components/Toast'
 import Tooltip from './components/Tooltip'
@@ -38,6 +39,7 @@ export {
   Radio,
   SearchDropdown,
   Sidebar,
+  Timepicker,
   Tabbox,
   Toast,
   Tooltip,

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.168
+  version: 0.0.169
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-05-15 00:00:00.000000000 Z
+date: 2020-05-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -112,6 +112,7 @@ files:
 - src/js/components/Tabbox.js
 - src/js/components/TimeInput.js
 - src/js/components/TimeMenu.js
+- src/js/components/Timepicker.js
 - src/js/components/Toast.js
 - src/js/components/ToastItem.js
 - src/js/components/Tooltip.js