beyond-rails 0.0.166 → 0.0.171

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 79511da8ea9b14e7b49b62eccaaf2c36372320dea558bac4aba6ff60d23b0bf8
-  data.tar.gz: a216822a034bcd04a2b72e4465c2b9b8ff029e928d89b26f2bc8bd5ecb0f6905
+  metadata.gz: b84dbd1920d2a65c0435e41614a3ddf98649ee787afc7e8f69d4e5c72f436d83
+  data.tar.gz: 575de4b1d3e26e92f1b8d1e6dd78dcb1e65473f009fe9b1c33d66be189afaffb
 SHA512:
-  metadata.gz: 8ac592c3ba4c54433e12544bbf68e68ce2981ee5f3853ea1a4fe9aae21c0c41adb24a1803459ec282f5f03731be9f925c5e025b137e748128b857a9db446cb99
-  data.tar.gz: 465e5a45929198f38cc4de13f5f9dacbfd76452d5f8c16b2e186ca7ca10b1926c4398346cc0a44547e7c7cb5de0eb3d470aa6e946cda992876124933984ab82d
+  metadata.gz: 8b0ed1fc46eeb29dae5fd2f8055dddc168102071b47f745a990c30c143baf65f5694df46770d8a97721dd8bf469ff73d130907e8dcabf016f0fa8ac3fa0c5487
+  data.tar.gz: 6b2f28021ed4a0e68309aada0c81ce3ac94b41ebce2c7916ff81f322e36b917a397ca5ad29b2788a71b967646804c5b6a74e8c807101df886b43dfb8c117b331

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()
   }
 
@@ -225,6 +226,9 @@ export default class Datepicker {
         this.focused = false
         return
       }
+      if (this.backdropMode === 'manual') {
+        return
+      }
       if ((! dateMenu.isVisible) && (timeMenu && (! timeMenu.isVisible))) {
         return
       }

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;
 }
@@ -140,3 +143,8 @@ $color-active: #5469d4;
   clip-path: inset(50%);
   border: 0;
 }
+
+input[type=file], /* FF, IE7+, chrome (except button) */
+input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
+  cursor: pointer;
+}

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.166
+  version: 0.0.171
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-05-13 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