Improve `timestampTag` API (see #847)

This commit is contained in:
jos 2019-11-27 15:28:50 +01:00
parent 42dd2aeb93
commit 39dfc41100
6 changed files with 92 additions and 36 deletions

View File

@ -8,7 +8,7 @@ https://github.com/josdejong/jsoneditor
- Implemented callbacks `onFocus` and `onBlur` (PR #809, issue #727). - Implemented callbacks `onFocus` and `onBlur` (PR #809, issue #727).
Thanks @123survesh. Thanks @123survesh.
- Fixed #847: allow customizing the in rules determining whether a value - Fixed #847: allow customizing the in rules determining whether a value
is a timestamp or not. is a timestamp or not by passing a callback function to `timestampTag`.
## 2019-10-27, version 7.2.1 ## 2019-10-27, version 7.2.1

View File

@ -432,16 +432,44 @@ Constructs a new JSONEditor.
} }
``` ```
- `{boolean | function(value: any) -> boolean} timestampTag` - `{boolean | function({field, value, path}) -> boolean} timestampTag`
If `true` (default), a tag with the date/time of a timestamp is displayed If `true` (default), a tag with the date/time of a timestamp is displayed
right from values containing a timestamp. A value is considered a timestamp right from values containing a timestamp. By default, a value is
when it is a number with value larger than Jan 1th 2000, `946684800000`. considered a timestamp when it is a number and it's field name contains any
of the following strings (case insensitive): `'date'`, `'time'`, `'created'`,
`'updated'`, `'deleted'`.
When `timestampTag` a is a function, a timestamp tag will be displayed for When `timestampTag` a is a function, a timestamp tag will be displayed when
values for which `timestampTag(value)` returns `true`. This way it is this function returns `true`. The function is invoked with an object as first
possible to alter the default rules for determining whether a value parameter:
is a timestamp or not.
```
{
field: string,
value: string,
path: string[]
}
```
Whether a value is a timestamp can be determined implicitly based on
the `value`, or explicitly based on `field` or `path`.
Example:
```js
var options = {
timestampTag: function ({ field, value, path }) {
if (field === 'dateCreated') {
return true
}
return false
}
}
```
Only applicable for modes `tree`, `form`, and `view`.
- `{string} language` - `{string} language`

View File

@ -18,12 +18,14 @@ import {
getAbsoluteTop, getAbsoluteTop,
getInnerText, getInnerText,
getType, getType,
isTimestampFieldName,
isUrl, isUrl,
isValidColor, isValidColor,
makeFieldTooltip, makeFieldTooltip,
parse, parse,
parsePath, parsePath,
parseString, removeAllClassNames, parseString,
removeAllClassNames,
removeClassName, removeClassName,
removeEventListener, removeEventListener,
selectContentEditable, selectContentEditable,
@ -1782,7 +1784,7 @@ export class Node {
} }
// show date tag when value is a timestamp in milliseconds // show date tag when value is a timestamp in milliseconds
if (this.editor.showTimestampTag(value)) { if (this._showTimestampTag()) {
if (!this.dom.date) { if (!this.dom.date) {
this.dom.date = document.createElement('div') this.dom.date = document.createElement('div')
this.dom.date.className = 'jsoneditor-date' this.dom.date.className = 'jsoneditor-date'
@ -1933,6 +1935,31 @@ export class Node {
} }
} }
/**
* Test whether to show a timestamp tag or not
* @return {boolean} Returns true when the value is a timestamp
*/
_showTimestampTag () {
if (typeof this.value !== 'number') {
return false
}
const timestampTag = this.editor.options.timestampTag
if (typeof timestampTag === 'function') {
return timestampTag({
field: this.field,
value: this.value,
path: this.getPath()
})
}
if (timestampTag === true) {
return isTimestampFieldName(this.field)
}
return false
}
/** /**
* Clear the dom of the node * Clear the dom of the node
*/ */

View File

@ -18,7 +18,6 @@ import {
hasParentNode, hasParentNode,
improveSchemaError, improveSchemaError,
isPromise, isPromise,
isTimestamp,
isValidValidationError, isValidValidationError,
parse, parse,
removeClassName, removeClassName,
@ -1786,23 +1785,6 @@ treemode.getNodesByRange = function (start, end) {
return serializableNodes return serializableNodes
} }
/**
* Test whether to show a timestamp tag or not
* @param {*} value Any type of value
* @return {boolean} Returns true when the value is a timestamp
*/
treemode.showTimestampTag = function (value) {
if (typeof this.options.timestampTag === 'function') {
return this.options.timestampTag(value)
}
if (this.options.timestampTag === true) {
return isTimestamp(value)
}
return false
}
// define modes // define modes
export const treeModeMixins = [ export const treeModeMixins = [
{ {

View File

@ -1355,15 +1355,23 @@ export function parseString (str) {
return str return str
} }
const TIMESTAMP_FIELDS = [
'DATE',
'TIME',
'CREATED',
'UPDATED',
'DELETED'
]
/** /**
* Test whether some value contains a timestamp. * Test whether some field has a naming like "date" or "time"
* @param {*} value Any type of value * @param {string} field
* @return {boolean} Returns true when the value is a timestamp * @return {boolean}
*/ */
export function isTimestamp (value) { export function isTimestampFieldName (field) {
return typeof value === 'number' && const fieldUpper = field.toUpperCase()
value > YEAR_2000 &&
!isNaN(new Date(value).valueOf()) return TIMESTAMP_FIELDS.some(search => fieldUpper.indexOf(search) !== -1)
} }
/** /**

View File

@ -6,7 +6,7 @@ import {
get, get,
getChildPaths, getChildPaths,
getIndexForPosition, getIndexForPosition,
isObject, isObject, isTimestampFieldName,
limitCharacters, limitCharacters,
makeFieldTooltip, makeFieldTooltip,
parsePath, parsePath,
@ -476,5 +476,16 @@ describe('util', () => {
assert.strictEqual(compileJSONPointer([]), '') assert.strictEqual(compileJSONPointer([]), '')
}) })
it('should test whether a field is a timestamp', () => {
assert.strictEqual(isTimestampFieldName('dateCreated'), true)
assert.strictEqual(isTimestampFieldName('updatedAt'), true)
assert.strictEqual(isTimestampFieldName('deletedAt'), true)
assert.strictEqual(isTimestampFieldName('DATE'), true)
assert.strictEqual(isTimestampFieldName('TIMESTAMP'), true)
assert.strictEqual(isTimestampFieldName('timestamp'), true)
assert.strictEqual(isTimestampFieldName('hello'), false)
assert.strictEqual(isTimestampFieldName('TIM'), false)
})
// TODO: thoroughly test all util methods // TODO: thoroughly test all util methods
}) })