Change `showTransformModal` to pass an object with properties. Fix transform not working in `text` and `preview` mode.
This commit is contained in:
parent
6ece0f9acb
commit
aba0a58383
|
@ -35,10 +35,12 @@
|
||||||
Click on the "Transform" button and try it out.
|
Click on the "Transform" button and try it out.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
The example uses lodash functions <code>filter</code>, <code>sort</code>, and <code>pick</code>.
|
This basic example uses lodash functions <code>filter</code>, <code>sort</code>, and <code>pick</code>,
|
||||||
|
but you can run any JavaScript code.
|
||||||
</p>
|
</p>
|
||||||
<p class="warning">
|
<p class="warning">
|
||||||
WARNING: this example uses <code>new Function()</code> which can be dangerous when executed with arbitrary code.
|
WARNING: this example uses <code>new Function()</code> which can be dangerous when executed with arbitrary code.
|
||||||
|
Don't use it in production.
|
||||||
</p>
|
</p>
|
||||||
<div id="jsoneditor"></div>
|
<div id="jsoneditor"></div>
|
||||||
|
|
||||||
|
|
|
@ -3865,8 +3865,12 @@ export class Node {
|
||||||
const anchor = this.editor.options.modalAnchor || DEFAULT_MODAL_ANCHOR
|
const anchor = this.editor.options.modalAnchor || DEFAULT_MODAL_ANCHOR
|
||||||
const json = node.getValue()
|
const json = node.getValue()
|
||||||
const { createQuery, executeQuery } = this.editor.options
|
const { createQuery, executeQuery } = this.editor.options
|
||||||
showTransformModal(anchor, json, createQuery, executeQuery, query => {
|
showTransformModal({
|
||||||
node.transform(query)
|
anchor,
|
||||||
|
json,
|
||||||
|
createQuery,
|
||||||
|
executeQuery,
|
||||||
|
onTransform: query => { node.transform(query) }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -387,20 +387,24 @@ previewmode._showSortModal = function () {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
previewmode._showTransformModal = function () {
|
previewmode._showTransformModal = function () {
|
||||||
const me = this
|
|
||||||
|
|
||||||
this.executeWithBusyMessage(() => {
|
this.executeWithBusyMessage(() => {
|
||||||
const anchor = me.options.modalAnchor || DEFAULT_MODAL_ANCHOR
|
const anchor = this.options.modalAnchor || DEFAULT_MODAL_ANCHOR
|
||||||
const json = me.get()
|
const json = this.get()
|
||||||
const { createQuery, executeQuery } = this.editor.options
|
const { createQuery, executeQuery } = this.options
|
||||||
|
|
||||||
me._renderPreview() // update array count
|
this._renderPreview() // update array count
|
||||||
|
|
||||||
showTransformModal(anchor, json, createQuery, executeQuery, query => {
|
showTransformModal({
|
||||||
me.executeWithBusyMessage(() => {
|
anchor,
|
||||||
const updatedJson = this.options.executeQuery(json, query)
|
json,
|
||||||
me._setAndFireOnChange(updatedJson)
|
createQuery,
|
||||||
}, 'transforming...')
|
executeQuery,
|
||||||
|
onTransform: query => {
|
||||||
|
this.executeWithBusyMessage(() => {
|
||||||
|
const updatedJson = this.options.executeQuery(json, query)
|
||||||
|
this._setAndFireOnChange(updatedJson)
|
||||||
|
}, 'transforming...')
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}, 'parsing...')
|
}, 'parsing...')
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,16 +7,17 @@ import { MAX_PREVIEW_CHARACTERS } from './constants'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Show advanced filter and transform modal using JMESPath
|
* Show advanced filter and transform modal using JMESPath
|
||||||
* @param {HTMLElement} container The container where to center
|
* @param {Object} params
|
||||||
* the modal and create an overlay
|
* @property {HTMLElement} container The container where to center
|
||||||
* @param {JSON} json The json data to be transformed
|
* the modal and create an overlay
|
||||||
* @param {function} createQuery Function called to create a query
|
* @property {JSON} json The json data to be transformed
|
||||||
* from the wizard form
|
* @property {function} createQuery Function called to create a query
|
||||||
* @param {function} executeQuery Execute a query for the preview pane
|
* from the wizard form
|
||||||
* @param {function} onTransform Callback invoked with the created
|
* @property {function} executeQuery Execute a query for the preview pane
|
||||||
* query as callback
|
* @property {function} onTransform Callback invoked with the created
|
||||||
|
* query as callback
|
||||||
*/
|
*/
|
||||||
export function showTransformModal (container, json, createQuery, executeQuery, onTransform) {
|
export function showTransformModal ({ container, json, createQuery, executeQuery, onTransform }) {
|
||||||
const value = json
|
const value = json
|
||||||
|
|
||||||
const content = '<label class="pico-modal-contents">' +
|
const content = '<label class="pico-modal-contents">' +
|
||||||
|
|
|
@ -427,13 +427,19 @@ textmode._showSortModal = function () {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
textmode._showTransformModal = function () {
|
textmode._showTransformModal = function () {
|
||||||
const me = this
|
|
||||||
const anchor = this.options.modalAnchor || DEFAULT_MODAL_ANCHOR
|
const anchor = this.options.modalAnchor || DEFAULT_MODAL_ANCHOR
|
||||||
const json = this.get()
|
const json = this.get()
|
||||||
const { createQuery, executeQuery } = this.editor.options
|
const { createQuery, executeQuery } = this.options
|
||||||
showTransformModal(anchor, json, createQuery, executeQuery, query => {
|
|
||||||
const updatedJson = this.options.executeQuery(json, query)
|
showTransformModal({
|
||||||
me.set(updatedJson)
|
anchor,
|
||||||
|
json,
|
||||||
|
createQuery,
|
||||||
|
executeQuery,
|
||||||
|
onTransform: query => {
|
||||||
|
const updatedJson = this.options.executeQuery(json, query)
|
||||||
|
this.set(updatedJson)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue