beyond-rails 0.0.165 → 0.0.170

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c566f462a1c5ab7bd07c4a464781468362d052bf32835c439ed671f2c6c64835
-  data.tar.gz: 6367fd44d0201414c5dfbdef0a656af28d3adcc3030af649613900e1b9c9b10c
+  metadata.gz: fe9348107090c2e538edc8e94a959f81fd266e2c91c6232df99ccb756f63b24e
+  data.tar.gz: ce7d73d7eae3fc61e1bab8552b0131835d9be9407b43b6643cb3903021a7cefd
 SHA512:
-  metadata.gz: bde745d9b8bce315503cc37212039050e7bb78b71fc736e072ce237f425398d8c0a662800e8c46c79e721c463d4f73e82eade87786189a4a9735e731740626c7
-  data.tar.gz: 7fa94ede9cd08b6013e9829289457dacd958227c1a64fed26e595ee8faf31addc8b64c990cc1bde968f711c155111d2c66d71257b656367fd8e7dec0a77a91ed
+  metadata.gz: 5578befc18d0efdd300b2fd76cc1b3d25b34a53aee556c229eac678316bf8df8a567dc0f0fe73be30b5289a67ca8860e9514e4356a36c91725b78a24f4e73ee1
+  data.tar.gz: 0174a26b7683af4f7bb9ef23e815615959de7b0723aee64743b23be047bbdd9ba5adb3cb11a45b6db875ee84fdce7510605029b81d66d5203d293a28d9c6d083

data/src/js/components/Datepicker.js

@@ -24,6 +24,7 @@ export default class Datepicker {
     this.menuDate = (timestamp === null) ? toDate(new Date()) : toDate(this.date)
     this.focused = false
     this.nextDate = null
+    this.backdropMode = options.backdropMode || 'auto'
     this.init()
   }
 
@@ -172,6 +173,14 @@ export default class Datepicker {
     })
   }
 
+  hide() {
+    const { timeMenu } = this
+    this.focused = false
+    this.clearInputStatus()
+    this.dateMenu.hide()
+    timeMenu && timeMenu.hide()
+  }
+
   addEvents() {
 
     this.addDateInputEvents()
@@ -217,6 +226,9 @@ export default class Datepicker {
         this.focused = false
         return
       }
+      if (this.backdropMode === 'manual') {
+        return
+      }
       if ((! dateMenu.isVisible) && (timeMenu && (! timeMenu.isVisible))) {
         return
       }
@@ -235,9 +247,7 @@ export default class Datepicker {
       if (timeMenuDom && (timeMenuDom === target)) {
         return
       }
-      this.clearInputStatus()
-      dateMenu.hide()
-      timeMenu && timeMenu.hide()
+      this.hide()
     })
   }
 

data/src/js/components/Dropdown.js

@@ -15,6 +15,7 @@ export default class Dropdown {
     this.align = null
     this.defaultTextNode = this.getDefaultTextNode(dom, options.textIndex)
     this.defaultText = this.defaultTextNode ? this.defaultTextNode.textContent.trim() : ''
+    this.backdropMode = options.backdropMode || 'auto'
     this.init()
   }
 
@@ -121,6 +122,9 @@ export default class Dropdown {
       if (! this.isMenuVisible) {
         return
       }
+      if (this.backdropMode === 'manual') {
+        return
+      }
       // is backdrop
       if ((event.target !== this.dom) && (! this.dom.contains(event.target))) {
         this.hideMenu()

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,

data/src/sass/_main.scss

@@ -122,6 +122,9 @@ $color-active: #5469d4;
   -webkit-overflow-scrolling: touch;
 }
 
+.align-left {
+  text-align: left;
+}
 .align-right {
   text-align: right;
 }

data/src/sass/components/_form.scss

@@ -125,6 +125,9 @@ label {
 
 .form-control {
   @extend %form-control;
+  &::placeholder {
+    color: #a9aebf;
+  }
   padding: 5px 7px 6px;
   background-color: #fff;
   background-clip: padding-box;

data/src/sass/components/_input.scss

@@ -42,7 +42,7 @@
     border: 0;
     box-shadow: none;
     &::placeholder {
-      color: #697396;
+      color: #a9aebf;
     }
   }
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.165
+  version: 0.0.170
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-05-12 00:00:00.000000000 Z
+date: 2020-06-05 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