diff --git a/README.md b/README.md index d13ef52..ee01f35 100644 --- a/README.md +++ b/README.md @@ -40,9 +40,16 @@ to built-in search bar. Pass `false` to disable search. #### props.interactiveLabel -Pass component factory that would accept `value` property. Can be used to create -custom input fields for JSON property names and primitive values, see -[#3](https://github.com/Lapple/react-json-inspector/issues/3) for more information. +Pass component factory that would receive the following properties: + +- `value`, either stringified property value or key value that is being interacted with, +- `originalValue`, either the original property value or key value, +- `isKey`, boolean flag to differentiate between interacting with keys or properties, +- `keypath`, keypath of the node being interacted with, will be the same for keys and properties + +Can be used to create custom input fields for JSON property names and primitive +values, see [#3](https://github.com/Lapple/react-json-inspector/issues/3) +for more information. #### props.onClick diff --git a/lib/leaf.js b/lib/leaf.js index 815da47..1cac379 100644 --- a/lib/leaf.js +++ b/lib/leaf.js @@ -41,7 +41,7 @@ var Leaf = React.createClass({ D.span({ className: 'json-inspector__key' }, this.format(d.key), ':', - this.renderInteractiveLabel(d.key)), + this.renderInteractiveLabel(d.key, true)), this.renderTitle(), this.renderShowOriginalButton()), this.renderChildren()); @@ -60,7 +60,7 @@ var Leaf = React.createClass({ default: return D.span({ className: 'json-inspector__value json-inspector__value_' + t.toLowerCase() }, this.format(String(data)), - this.renderInteractiveLabel(String(data))); + this.renderInteractiveLabel(data, false)); } }, renderChildren: function() { @@ -99,10 +99,15 @@ var Leaf = React.createClass({ onClick: this._onShowOriginalClick }); }, - renderInteractiveLabel: function(value) { + renderInteractiveLabel: function(originalValue, isKey) { if (typeof this.props.interactiveLabel === 'function') { return this.props.interactiveLabel({ - value: value + // The distinction between `value` and `originalValue` is + // provided to have backwards compatibility. + value: String(originalValue), + originalValue: originalValue, + isKey: isKey, + keypath: this.keypath() }); }