@stellar-expert/ui-framework 1.13.0 → 1.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/date/date-selector.js +25 -14
- package/package.json +1 -1
package/date/date-selector.js
CHANGED
|
@@ -2,19 +2,12 @@ import React, {useCallback, useEffect, useState} from 'react'
|
|
|
2
2
|
import {debounce} from 'throttle-debounce'
|
|
3
3
|
import {normalizeDate, toUnixTimestamp} from '@stellar-expert/formatter'
|
|
4
4
|
|
|
5
|
-
export function trimIsoDateSeconds(date) {
|
|
6
|
-
if (typeof date === 'number') {
|
|
7
|
-
date = new Date(date)
|
|
8
|
-
}
|
|
9
|
-
return date.toISOString().replace(/:\d{2}\.\d*Z/, '')
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const minSelectableValue = trimIsoDateSeconds(new Date('2015-09-30T16:46:00Z'))
|
|
13
|
-
|
|
14
5
|
/**
|
|
15
|
-
* @param {String} value
|
|
16
|
-
* @param {
|
|
17
|
-
* @
|
|
6
|
+
* @param {String} value - Current input value
|
|
7
|
+
* @param {DateSelector~OnChange} onChange - Onchange event handler
|
|
8
|
+
* @param {String} [min] - Minimum allowed date
|
|
9
|
+
* @param {String} [max] - Maximum allowed date
|
|
10
|
+
* @param {*} [ref]
|
|
18
11
|
*/
|
|
19
12
|
export function DateSelector({value, onChange, min, max, ref, ...otherProps}) {
|
|
20
13
|
const [date, setDate] = useState(value ? trimIsoDateSeconds(normalizeDate(value)) : '')
|
|
@@ -30,7 +23,7 @@ export function DateSelector({value, onChange, min, max, ref, ...otherProps}) {
|
|
|
30
23
|
if (value !== newDate) {
|
|
31
24
|
setDate(newDate)
|
|
32
25
|
if (onChange) {
|
|
33
|
-
onChange(toUnixTimestamp(normalizeDate(newDate)))
|
|
26
|
+
onChange(newDate ? toUnixTimestamp(normalizeDate(newDate)) : null)
|
|
34
27
|
}
|
|
35
28
|
}
|
|
36
29
|
}), [onChange, value])
|
|
@@ -41,4 +34,22 @@ export function DateSelector({value, onChange, min, max, ref, ...otherProps}) {
|
|
|
41
34
|
return <input type="datetime-local" value={date} className="date-selector condensed" step={60} ref={ref}
|
|
42
35
|
min={min || minSelectableValue} max={max} onChange={e => selectDate(e.target.value)}
|
|
43
36
|
style={{width: '11em', overflow: 'hidden'}} {...otherProps}/>
|
|
44
|
-
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* @param {Date|Number} date
|
|
41
|
+
* @return {String}
|
|
42
|
+
*/
|
|
43
|
+
export function trimIsoDateSeconds(date) {
|
|
44
|
+
if (typeof date === 'number') {
|
|
45
|
+
date = new Date(date)
|
|
46
|
+
}
|
|
47
|
+
return date.toISOString().replace(/:\d{2}\.\d*Z/, '')
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const minSelectableValue = trimIsoDateSeconds(new Date('2015-09-30T16:46:00Z'))
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* @callback DateSelector~OnChange
|
|
54
|
+
* @param {number|null} value - Selected value represented as a Unix timestamp or null for invalid date value
|
|
55
|
+
*/
|