@vrbo/react-event-tracking
Advanced tools
Comparing version 1.1.0 to 1.2.0
@@ -26,8 +26,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
* builds on parent context. This component allows applications to build the | ||
* fields and options for events declaratively and through nesting. | ||
* payload and options for events declaratively and through nesting. | ||
*/ | ||
var TrackingProvider = | ||
/*#__PURE__*/ | ||
function (_PureComponent) { | ||
var TrackingProvider = /*#__PURE__*/function (_PureComponent) { | ||
_inheritsLoose(TrackingProvider, _PureComponent); | ||
@@ -42,5 +40,5 @@ | ||
_this.trigger = function (event, fields, options) { | ||
if (fields === void 0) { | ||
fields = {}; | ||
_this.trigger = function (event, payload, options) { | ||
if (payload === void 0) { | ||
payload = {}; | ||
} | ||
@@ -54,3 +52,3 @@ | ||
var name = event || data.event; | ||
var eventFields = data.eventFields ? data.eventFields[name] : {}; | ||
var eventPayload = data.eventPayload ? data.eventPayload[name] : {}; | ||
var eventOptions = data.eventOptions ? data.eventOptions[name] : {}; | ||
@@ -62,5 +60,5 @@ | ||
fields = _extends({}, data.fields, {}, eventFields, {}, fields); | ||
options = _extends({}, data.options, {}, eventOptions, {}, options); | ||
return data.trigger(name, fields, options); | ||
payload = _extends({}, data.payload, eventPayload, payload); | ||
options = _extends({}, data.options, eventOptions, options); | ||
return data.trigger(name, payload, options); | ||
}; | ||
@@ -82,3 +80,3 @@ | ||
return React.createElement(TrackingContext.Provider, { | ||
return /*#__PURE__*/React.createElement(TrackingContext.Provider, { | ||
value: _this.TrackingContext | ||
@@ -90,5 +88,5 @@ }, children); | ||
_data: { | ||
eventFields: _this.props.eventFields, | ||
eventPayload: _this.props.eventPayload, | ||
eventOptions: _this.props.eventOptions, | ||
fields: _this.props.fields, | ||
payload: _this.props.payload, | ||
options: _this.props.options, | ||
@@ -116,2 +114,3 @@ trigger: _this.props.trigger || | ||
data = { | ||
eventPayload: {}, | ||
eventFields: {}, | ||
@@ -128,20 +127,26 @@ eventOptions: {} | ||
overwrite = _this$props2.overwrite; | ||
var newData = {}; | ||
var _this$props3 = this.props, | ||
eventPayload = _this$props3.eventPayload, | ||
payload = _this$props3.payload; | ||
var newData = {}; // Prefer new data payload name, but fall back for backwards compatibility | ||
eventPayload = eventPayload || eventFields; | ||
payload = payload || fields; | ||
if (overwrite) { | ||
newData.eventFields = eventFields || data.eventFields; | ||
newData.eventPayload = eventPayload || data.eventPayload; | ||
newData.eventOptions = eventOptions || data.eventOptions; | ||
newData.fields = fields || data.fields; | ||
newData.payload = payload || data.payload; | ||
newData.options = options || data.options; | ||
} else { | ||
// Not an overwrite so merge the properties and context objects | ||
newData.eventFields = _extends({}, data.eventFields, {}, eventFields); | ||
newData.eventOptions = _extends({}, data.eventOptions, {}, eventOptions); | ||
newData.fields = _extends({}, data.fields, {}, fields); | ||
newData.options = _extends({}, data.options, {}, options); // if eventFields or eventOptions was specified need to do a shallow | ||
newData.eventPayload = _extends({}, data.eventPayload, eventPayload); | ||
newData.eventOptions = _extends({}, data.eventOptions, eventOptions); | ||
newData.payload = _extends({}, data.payload, payload); | ||
newData.options = _extends({}, data.options, options); // if eventFields, eventPayload or eventOptions was specified need to do a shallow | ||
// copy and another shallow copy one level deep for each key. | ||
if (eventFields) { | ||
Object.keys(newData.eventFields).forEach(function (key) { | ||
newData.eventFields[key] = _extends({}, data.eventFields[key], {}, eventFields[key]); | ||
if (eventPayload) { | ||
Object.keys(newData.eventPayload).forEach(function (key) { | ||
newData.eventPayload[key] = _extends({}, data.eventPayload[key], eventPayload[key]); | ||
}); | ||
@@ -152,3 +157,3 @@ } | ||
Object.keys(newData.eventOptions).forEach(function (key) { | ||
newData.eventOptions[key] = _extends({}, data.eventOptions[key], {}, eventOptions[key]); | ||
newData.eventOptions[key] = _extends({}, data.eventOptions[key], eventOptions[key]); | ||
}); | ||
@@ -168,3 +173,5 @@ } | ||
_proto.render = function render() { | ||
return (// Consume the context and then generate a new context provider | ||
return ( | ||
/*#__PURE__*/ | ||
// Consume the context and then generate a new context provider | ||
// as a merge of specified properties and existing context. | ||
@@ -179,13 +186,19 @@ React.createElement(TrackingContext.Consumer, null, this.renderProvider) | ||
TrackingProvider.propTypes = { | ||
/** An object of event specific fields where the event name is the key and the value is an object of field key/value pairs for the event. Event specific values will be merged with defaults from the `fields` property. */ | ||
/** (Deprecated) An object of event specific fields where the event name is the key and the value is an object of field key/value pairs for the event. Event specific values will be merged with defaults from the `fields` property. The `eventPayload` property takes precedence over this property if both are specified. */ | ||
eventFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)), | ||
/** An object of event specific payloads where the event name is the key and the value is an object of key/value pairs for the event. Event specific values will be merged with defaults from the `payload` property. */ | ||
eventPayload: PropTypes.objectOf(PropTypes.objectOf(PropTypes.any)), | ||
/** An object of event specific options where the event name is the key and the value is an object of option key/value pairs for the event. Event specific values will be merged with defaults from the `options` property. */ | ||
eventOptions: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)), | ||
eventOptions: PropTypes.objectOf(PropTypes.objectOf(PropTypes.any)), | ||
/** Object of string values that represents the default fields to apply to all events within this context. */ | ||
/** (Deprecated) Object of string values that represents the default payload to apply to all events within this context. The `payload` property takes precedence over this property if both specified. */ | ||
fields: PropTypes.objectOf(PropTypes.string), | ||
/** Object of values that represents the default payload to apply to all events within this context. */ | ||
payload: PropTypes.objectOf(PropTypes.any), | ||
/** The trigger options. */ | ||
options: PropTypes.objectOf(PropTypes.string), | ||
options: PropTypes.objectOf(PropTypes.any), | ||
@@ -192,0 +205,0 @@ /** When true, overwrites the current context with specified properties. Default is to merge instead of overwrite. */ |
@@ -26,5 +26,3 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } | ||
var TrackingTrigger = | ||
/*#__PURE__*/ | ||
function (_PureComponent) { | ||
var TrackingTrigger = /*#__PURE__*/function (_PureComponent) { | ||
_inheritsLoose(TrackingTrigger, _PureComponent); | ||
@@ -60,5 +58,7 @@ | ||
options = _this$props.options; | ||
var payload = this.props.payload; | ||
payload = payload || fields || {}; | ||
if (typeof this.trigger === 'function') { | ||
var triggerContext = this.trigger(event, fields, options); | ||
var triggerContext = this.trigger(event, payload, options); | ||
onTrigger(triggerContext); | ||
@@ -69,3 +69,3 @@ } | ||
_proto.render = function render() { | ||
return React.createElement(TrackingContext.Consumer, null, this.handleContext); | ||
return /*#__PURE__*/React.createElement(TrackingContext.Consumer, null, this.handleContext); | ||
}; | ||
@@ -80,5 +80,8 @@ | ||
/** The event specific fields. */ | ||
/** (Deprecated) The event specific fields. The `payload` property takes precedence over this property if both are specified. */ | ||
fields: PropTypes.objectOf(PropTypes.string), | ||
/** The event specific payload. */ | ||
payload: PropTypes.objectOf(PropTypes.any), | ||
/** Callback function invoked after the event successfully triggered. */ | ||
@@ -91,3 +94,2 @@ onTrigger: PropTypes.func, | ||
TrackingTrigger.defaultProps = { | ||
fields: {}, | ||
onTrigger: function onTrigger() {}, | ||
@@ -94,0 +96,0 @@ options: {} |
@@ -26,5 +26,5 @@ /* | ||
// Intended for private use only | ||
eventFields: {}, | ||
eventPayload: {}, | ||
eventOptions: {}, | ||
fields: {}, | ||
payload: {}, | ||
options: {}, | ||
@@ -42,4 +42,4 @@ // The original trigger implementation passed in to TrackingProvider | ||
var TrackingContext = React.createContext(context); | ||
var TrackingContext = /*#__PURE__*/React.createContext(context); | ||
export default TrackingContext; | ||
//# sourceMappingURL=TrackingContext.js.map |
@@ -25,7 +25,5 @@ "use strict"; | ||
* builds on parent context. This component allows applications to build the | ||
* fields and options for events declaratively and through nesting. | ||
* payload and options for events declaratively and through nesting. | ||
*/ | ||
var TrackingProvider = | ||
/*#__PURE__*/ | ||
function (_PureComponent) { | ||
var TrackingProvider = /*#__PURE__*/function (_PureComponent) { | ||
_inheritsLoose(TrackingProvider, _PureComponent); | ||
@@ -40,5 +38,5 @@ | ||
_this.trigger = function (event, fields, options) { | ||
if (fields === void 0) { | ||
fields = {}; | ||
_this.trigger = function (event, payload, options) { | ||
if (payload === void 0) { | ||
payload = {}; | ||
} | ||
@@ -52,3 +50,3 @@ | ||
var name = event || data.event; | ||
var eventFields = data.eventFields ? data.eventFields[name] : {}; | ||
var eventPayload = data.eventPayload ? data.eventPayload[name] : {}; | ||
var eventOptions = data.eventOptions ? data.eventOptions[name] : {}; | ||
@@ -60,5 +58,5 @@ | ||
fields = _extends({}, data.fields, {}, eventFields, {}, fields); | ||
options = _extends({}, data.options, {}, eventOptions, {}, options); | ||
return data.trigger(name, fields, options); | ||
payload = _extends({}, data.payload, eventPayload, payload); | ||
options = _extends({}, data.options, eventOptions, options); | ||
return data.trigger(name, payload, options); | ||
}; | ||
@@ -80,3 +78,3 @@ | ||
return _react.default.createElement(_TrackingContext.default.Provider, { | ||
return /*#__PURE__*/_react.default.createElement(_TrackingContext.default.Provider, { | ||
value: _this.TrackingContext | ||
@@ -88,5 +86,5 @@ }, children); | ||
_data: { | ||
eventFields: _this.props.eventFields, | ||
eventPayload: _this.props.eventPayload, | ||
eventOptions: _this.props.eventOptions, | ||
fields: _this.props.fields, | ||
payload: _this.props.payload, | ||
options: _this.props.options, | ||
@@ -114,2 +112,3 @@ trigger: _this.props.trigger || | ||
data = { | ||
eventPayload: {}, | ||
eventFields: {}, | ||
@@ -126,20 +125,26 @@ eventOptions: {} | ||
overwrite = _this$props2.overwrite; | ||
var newData = {}; | ||
var _this$props3 = this.props, | ||
eventPayload = _this$props3.eventPayload, | ||
payload = _this$props3.payload; | ||
var newData = {}; // Prefer new data payload name, but fall back for backwards compatibility | ||
eventPayload = eventPayload || eventFields; | ||
payload = payload || fields; | ||
if (overwrite) { | ||
newData.eventFields = eventFields || data.eventFields; | ||
newData.eventPayload = eventPayload || data.eventPayload; | ||
newData.eventOptions = eventOptions || data.eventOptions; | ||
newData.fields = fields || data.fields; | ||
newData.payload = payload || data.payload; | ||
newData.options = options || data.options; | ||
} else { | ||
// Not an overwrite so merge the properties and context objects | ||
newData.eventFields = _extends({}, data.eventFields, {}, eventFields); | ||
newData.eventOptions = _extends({}, data.eventOptions, {}, eventOptions); | ||
newData.fields = _extends({}, data.fields, {}, fields); | ||
newData.options = _extends({}, data.options, {}, options); // if eventFields or eventOptions was specified need to do a shallow | ||
newData.eventPayload = _extends({}, data.eventPayload, eventPayload); | ||
newData.eventOptions = _extends({}, data.eventOptions, eventOptions); | ||
newData.payload = _extends({}, data.payload, payload); | ||
newData.options = _extends({}, data.options, options); // if eventFields, eventPayload or eventOptions was specified need to do a shallow | ||
// copy and another shallow copy one level deep for each key. | ||
if (eventFields) { | ||
Object.keys(newData.eventFields).forEach(function (key) { | ||
newData.eventFields[key] = _extends({}, data.eventFields[key], {}, eventFields[key]); | ||
if (eventPayload) { | ||
Object.keys(newData.eventPayload).forEach(function (key) { | ||
newData.eventPayload[key] = _extends({}, data.eventPayload[key], eventPayload[key]); | ||
}); | ||
@@ -150,3 +155,3 @@ } | ||
Object.keys(newData.eventOptions).forEach(function (key) { | ||
newData.eventOptions[key] = _extends({}, data.eventOptions[key], {}, eventOptions[key]); | ||
newData.eventOptions[key] = _extends({}, data.eventOptions[key], eventOptions[key]); | ||
}); | ||
@@ -166,3 +171,5 @@ } | ||
_proto.render = function render() { | ||
return (// Consume the context and then generate a new context provider | ||
return ( | ||
/*#__PURE__*/ | ||
// Consume the context and then generate a new context provider | ||
// as a merge of specified properties and existing context. | ||
@@ -177,13 +184,19 @@ _react.default.createElement(_TrackingContext.default.Consumer, null, this.renderProvider) | ||
TrackingProvider.propTypes = { | ||
/** An object of event specific fields where the event name is the key and the value is an object of field key/value pairs for the event. Event specific values will be merged with defaults from the `fields` property. */ | ||
/** (Deprecated) An object of event specific fields where the event name is the key and the value is an object of field key/value pairs for the event. Event specific values will be merged with defaults from the `fields` property. The `eventPayload` property takes precedence over this property if both are specified. */ | ||
eventFields: _propTypes.default.objectOf(_propTypes.default.objectOf(_propTypes.default.string)), | ||
/** An object of event specific payloads where the event name is the key and the value is an object of key/value pairs for the event. Event specific values will be merged with defaults from the `payload` property. */ | ||
eventPayload: _propTypes.default.objectOf(_propTypes.default.objectOf(_propTypes.default.any)), | ||
/** An object of event specific options where the event name is the key and the value is an object of option key/value pairs for the event. Event specific values will be merged with defaults from the `options` property. */ | ||
eventOptions: _propTypes.default.objectOf(_propTypes.default.objectOf(_propTypes.default.string)), | ||
eventOptions: _propTypes.default.objectOf(_propTypes.default.objectOf(_propTypes.default.any)), | ||
/** Object of string values that represents the default fields to apply to all events within this context. */ | ||
/** (Deprecated) Object of string values that represents the default payload to apply to all events within this context. The `payload` property takes precedence over this property if both specified. */ | ||
fields: _propTypes.default.objectOf(_propTypes.default.string), | ||
/** Object of values that represents the default payload to apply to all events within this context. */ | ||
payload: _propTypes.default.objectOf(_propTypes.default.any), | ||
/** The trigger options. */ | ||
options: _propTypes.default.objectOf(_propTypes.default.string), | ||
options: _propTypes.default.objectOf(_propTypes.default.any), | ||
@@ -190,0 +203,0 @@ /** When true, overwrites the current context with specified properties. Default is to merge instead of overwrite. */ |
@@ -24,5 +24,3 @@ "use strict"; | ||
*/ | ||
var TrackingTrigger = | ||
/*#__PURE__*/ | ||
function (_PureComponent) { | ||
var TrackingTrigger = /*#__PURE__*/function (_PureComponent) { | ||
_inheritsLoose(TrackingTrigger, _PureComponent); | ||
@@ -58,5 +56,7 @@ | ||
options = _this$props.options; | ||
var payload = this.props.payload; | ||
payload = payload || fields || {}; | ||
if (typeof this.trigger === 'function') { | ||
var triggerContext = this.trigger(event, fields, options); | ||
var triggerContext = this.trigger(event, payload, options); | ||
onTrigger(triggerContext); | ||
@@ -67,3 +67,3 @@ } | ||
_proto.render = function render() { | ||
return _react.default.createElement(_TrackingContext.default.Consumer, null, this.handleContext); | ||
return /*#__PURE__*/_react.default.createElement(_TrackingContext.default.Consumer, null, this.handleContext); | ||
}; | ||
@@ -78,5 +78,8 @@ | ||
/** The event specific fields. */ | ||
/** (Deprecated) The event specific fields. The `payload` property takes precedence over this property if both are specified. */ | ||
fields: _propTypes.default.objectOf(_propTypes.default.string), | ||
/** The event specific payload. */ | ||
payload: _propTypes.default.objectOf(_propTypes.default.any), | ||
/** Callback function invoked after the event successfully triggered. */ | ||
@@ -89,3 +92,2 @@ onTrigger: _propTypes.default.func, | ||
TrackingTrigger.defaultProps = { | ||
fields: {}, | ||
onTrigger: function onTrigger() {}, | ||
@@ -92,0 +94,0 @@ options: {} |
@@ -34,5 +34,5 @@ "use strict"; | ||
// Intended for private use only | ||
eventFields: {}, | ||
eventPayload: {}, | ||
eventOptions: {}, | ||
fields: {}, | ||
payload: {}, | ||
options: {}, | ||
@@ -50,3 +50,3 @@ // The original trigger implementation passed in to TrackingProvider | ||
var TrackingContext = _react.default.createContext(context); | ||
var TrackingContext = /*#__PURE__*/_react.default.createContext(context); | ||
@@ -53,0 +53,0 @@ var _default = TrackingContext; |
@@ -1,2 +0,2 @@ | ||
!function(e,t){if("object"===typeof exports&&"object"===typeof module)module.exports=t(require("prop-types"),require("react"));else if("function"===typeof define&&define.amd)define(["prop-types","react"],t);else{var r="object"===typeof exports?t(require("prop-types"),require("react")):t(e["prop-types"],e.react);for(var n in r)("object"===typeof exports?exports:e)[n]=r[n]}}(window,(function(e,t){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=2)}([function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){"use strict";r.r(t);var n=r(1),o=r.n(n),i=o.a.createContext({_data:{eventFields:{},eventOptions:{},fields:{},options:{},trigger:null},hasProvider:!1,trigger:function(){}}),s=r(0),p=r.n(s);function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var u=function(e){var t,r;function n(t){var r;return(r=e.call(this,t)||this).trigger=function(e,t,n){void 0===t&&(t={}),void 0===n&&(n={});var o=r.TrackingContext._data,i=e||o.event,s=o.eventFields?o.eventFields[i]:{},p=o.eventOptions?o.eventOptions[i]:{};if(!i)throw new TypeError("event is a required parameter");return t=a({},o.fields,{},s,{},t),n=a({},o.options,{},p,{},n),o.trigger(i,t,n)},r.renderProvider=function(e){var t=(void 0===e?{}:e)._data,n=r.props,s=n.children,p=n.trigger;return r.TrackingContext._data=r.mergeContextData(t),r.TrackingContext._data.trigger=p||t.trigger||function(){},o.a.createElement(i.Provider,{value:r.TrackingContext},s)},r.TrackingContext={_data:{eventFields:r.props.eventFields,eventOptions:r.props.eventOptions,fields:r.props.fields,options:r.props.options,trigger:r.props.trigger||function(){}},hasProvider:!0,trigger:r.trigger},r}r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r;var s=n.prototype;return s.mergeContextData=function(e){void 0===e&&(e={eventFields:{},eventOptions:{}});var t=this.props,r=t.eventFields,n=t.eventOptions,o=t.fields,i=t.options,s=t.overwrite,p={};return s?(p.eventFields=r||e.eventFields,p.eventOptions=n||e.eventOptions,p.fields=o||e.fields,p.options=i||e.options):(p.eventFields=a({},e.eventFields,{},r),p.eventOptions=a({},e.eventOptions,{},n),p.fields=a({},e.fields,{},o),p.options=a({},e.options,{},i),r&&Object.keys(p.eventFields).forEach((function(t){p.eventFields[t]=a({},e.eventFields[t],{},r[t])})),n&&Object.keys(p.eventOptions).forEach((function(t){p.eventOptions[t]=a({},e.eventOptions[t],{},n[t])}))),p},s.render=function(){return o.a.createElement(i.Consumer,null,this.renderProvider)},n}(n.PureComponent);u.propTypes={eventFields:p.a.objectOf(p.a.objectOf(p.a.string)),eventOptions:p.a.objectOf(p.a.objectOf(p.a.string)),fields:p.a.objectOf(p.a.string),options:p.a.objectOf(p.a.string),overwrite:p.a.bool,trigger:p.a.func},u.defaultProps={overwrite:!1};var c=u;var f=function(e){var t,r;function n(){for(var t,r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return(t=e.call.apply(e,[this].concat(n))||this).handleContext=function(e){var r=e.trigger,n=t.props.children;return t.trigger=r,n},t}r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r;var s=n.prototype;return s.componentDidMount=function(){var e=this.props,t=e.event,r=e.fields,n=e.onTrigger,o=e.options;"function"===typeof this.trigger&&n(this.trigger(t,r,o))},s.render=function(){return o.a.createElement(i.Consumer,null,this.handleContext)},n}(n.PureComponent);f.propTypes={event:p.a.string.isRequired,fields:p.a.objectOf(p.a.string),onTrigger:p.a.func,options:p.a.objectOf(p.a.string)},f.defaultProps={fields:{},onTrigger:function(){},options:{}};var d=f;r.d(t,"TrackingContext",(function(){return i})),r.d(t,"TrackingProvider",(function(){return c})),r.d(t,"TrackingTrigger",(function(){return d}))}])})); | ||
!function(e,t){if("object"===typeof exports&&"object"===typeof module)module.exports=t(require("prop-types"),require("react"));else if("function"===typeof define&&define.amd)define(["prop-types","react"],t);else{var r="object"===typeof exports?t(require("prop-types"),require("react")):t(e["prop-types"],e.react);for(var n in r)("object"===typeof exports?exports:e)[n]=r[n]}}(window,(function(e,t){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=2)}([function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){"use strict";r.r(t),r.d(t,"TrackingContext",(function(){return i})),r.d(t,"TrackingProvider",(function(){return f})),r.d(t,"TrackingTrigger",(function(){return l}));var n=r(1),o=r.n(n),a={_data:{eventPayload:{},eventOptions:{},payload:{},options:{},trigger:null},hasProvider:!1,trigger:function(){}},i=o.a.createContext(a),p=r(0),c=r.n(p);function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var u=function(e){var t,r;function n(t){var r;return(r=e.call(this,t)||this).trigger=function(e,t,n){void 0===t&&(t={}),void 0===n&&(n={});var o=r.TrackingContext._data,a=e||o.event,i=o.eventPayload?o.eventPayload[a]:{},p=o.eventOptions?o.eventOptions[a]:{};if(!a)throw new TypeError("event is a required parameter");return t=s({},o.payload,i,t),n=s({},o.options,p,n),o.trigger(a,t,n)},r.renderProvider=function(e){var t=(void 0===e?{}:e)._data,n=r.props,a=n.children,p=n.trigger;return r.TrackingContext._data=r.mergeContextData(t),r.TrackingContext._data.trigger=p||t.trigger||function(){},o.a.createElement(i.Provider,{value:r.TrackingContext},a)},r.TrackingContext={_data:{eventPayload:r.props.eventPayload,eventOptions:r.props.eventOptions,payload:r.props.payload,options:r.props.options,trigger:r.props.trigger||function(){}},hasProvider:!0,trigger:r.trigger},r}r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r;var a=n.prototype;return a.mergeContextData=function(e){void 0===e&&(e={eventPayload:{},eventFields:{},eventOptions:{}});var t=this.props,r=t.eventFields,n=t.eventOptions,o=t.fields,a=t.options,i=t.overwrite,p=this.props,c=p.eventPayload,u=p.payload,f={};return c=c||r,u=u||o,i?(f.eventPayload=c||e.eventPayload,f.eventOptions=n||e.eventOptions,f.payload=u||e.payload,f.options=a||e.options):(f.eventPayload=s({},e.eventPayload,c),f.eventOptions=s({},e.eventOptions,n),f.payload=s({},e.payload,u),f.options=s({},e.options,a),c&&Object.keys(f.eventPayload).forEach((function(t){f.eventPayload[t]=s({},e.eventPayload[t],c[t])})),n&&Object.keys(f.eventOptions).forEach((function(t){f.eventOptions[t]=s({},e.eventOptions[t],n[t])}))),f},a.render=function(){return o.a.createElement(i.Consumer,null,this.renderProvider)},n}(n.PureComponent);u.propTypes={eventFields:c.a.objectOf(c.a.objectOf(c.a.string)),eventPayload:c.a.objectOf(c.a.objectOf(c.a.any)),eventOptions:c.a.objectOf(c.a.objectOf(c.a.any)),fields:c.a.objectOf(c.a.string),payload:c.a.objectOf(c.a.any),options:c.a.objectOf(c.a.any),overwrite:c.a.bool,trigger:c.a.func},u.defaultProps={overwrite:!1};var f=u;var d=function(e){var t,r;function n(){for(var t,r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return(t=e.call.apply(e,[this].concat(n))||this).handleContext=function(e){var r=e.trigger,n=t.props.children;return t.trigger=r,n},t}r=e,(t=n).prototype=Object.create(r.prototype),t.prototype.constructor=t,t.__proto__=r;var a=n.prototype;return a.componentDidMount=function(){var e=this.props,t=e.event,r=e.fields,n=e.onTrigger,o=e.options,a=this.props.payload;(a=a||r||{},"function"===typeof this.trigger)&&n(this.trigger(t,a,o))},a.render=function(){return o.a.createElement(i.Consumer,null,this.handleContext)},n}(n.PureComponent);d.propTypes={event:c.a.string.isRequired,fields:c.a.objectOf(c.a.string),payload:c.a.objectOf(c.a.any),onTrigger:c.a.func,options:c.a.objectOf(c.a.string)},d.defaultProps={onTrigger:function(){},options:{}};var l=d}])})); | ||
//# sourceMappingURL=index.min.js.map |
{ | ||
"name": "@vrbo/react-event-tracking", | ||
"version": "1.1.0", | ||
"version": "1.2.0", | ||
"description": "React shared context utilities for analytic event tracking.", | ||
@@ -5,0 +5,0 @@ "license": "Apache-2.0", |
@@ -1,2 +0,2 @@ | ||
[![Build Status](https://travis-ci.org/homeaway/react-event-tracking.svg?branch=master)](https://travis-ci.org/homeaway/react-event-tracking) | ||
[![Build Status](https://travis-ci.org/ExpediaGroup/react-event-tracking.svg?branch=master)](https://travis-ci.org/ExpediaGroup/react-event-tracking) | ||
@@ -39,28 +39,30 @@ # react-event-tracking | ||
Applications use a `TrackingProvider` to define the event triggering implementation and wrap components that trigger events with additional fields and options that will be merged into the triggered event. | ||
Applications use a `TrackingProvider` to define the event triggering implementation and wrap components that trigger events with additional payload and options that will be merged into the triggered event. | ||
Components make use of `TrackingContext` or `TrackingTrigger` to trigger events which will automatically merge the fields and options specified at higher levels in the DOM through one or more `TrackingProvider` components. | ||
Components make use of `TrackingContext` or `TrackingTrigger` to trigger events which will automatically merge the payload and options specified at higher levels in the DOM through one or more `TrackingProvider` components. | ||
### TrackingProvider | ||
The `TrackingProvider` is a [React 16 context provider](https://reactjs.org/docs/context.html) component that allows an application to define the event trigger implementation and incrementally build the fields and options for analytic events that will trigger from nested components. Using the `TrackingProvider` enables components at the lowest level to trigger events with the necessary set of fields and options. The `TrackingProvider` is intended as a generic provider that does not require the use of a specific analytic event tracking library. | ||
The `TrackingProvider` is a [React 16 context provider](https://reactjs.org/docs/context.html) component that allows an application to define the event trigger implementation and incrementally build the payload and options for analytic events that will trigger from nested components. Using the `TrackingProvider` enables components at the lowest level to trigger events with the necessary set of payload and options. The `TrackingProvider` is intended as a generic provider that does not require the use of a specific analytic event tracking library. | ||
> Note: It is strongly recommended that property values for the TrackingProvider be defined in state or constant variables instead of building the values dynamically on every render. If the values are constructed during the render, it will cause a FORCE RE-RENDER of ALL consumers of the context that are descendants of the provider, even if the consumer's shouldComponentUpdate bails out. Following a pattern of defining property values as constants or via state will prevent unnecessary renders of children context consumers. | ||
| PROPERTY | TYPE | DEFAULT | DESCRIPTION | | ||
| ------------ | ------------------- | -------- | ----------- | | ||
| eventFields | objectOf (objectOf) | ── | An object of event specific fields where the event name is the key and the value is an object of field key/value pairs for the event. Event specific values will be merged with defaults from the `fields` property. | | ||
| eventOptions | objectOf (objectOf) | ── | An object of event specific options where the event name is the key and the value is an object of option key/value pairs for the event. Event specific values will be merged with defaults from the `options` property. | | ||
| fields | objectOf (string) | ── | Object of string values that represents the default fields to apply to all events within this context. | | ||
| options | objectOf (string) | ── | The trigger options. | | ||
| overwrite | bool | false | When true, overwrites the current context with specified properties. Default is to merge instead of overwrite. | | ||
| trigger | func | () => {} | Tracking event trigger implementation. | | ||
| PROPERTY | TYPE | DEFAULT | DESCRIPTION | | ||
| -------------- | ------------------- | -------- | ----------- | | ||
| eventPayload | objectOf (objectOf) | ── | An object of event specific payload where the event name is the key and the value is an object of field key/value pairs for the event. Event specific values will be merged with defaults from the `payload` property. | | ||
| eventFields | objectOf (objectOf) | ── | (Deprecated) An object of event specific fields where the event name is the key and the value is an object of field key/value pairs for the event. Event specific values will be merged with defaults from the `fields` property. The `eventPayload` property takes precedence over this property if both are specified. | | ||
| eventOptions | objectOf (objectOf) | ── | An object of event specific options where the event name is the key and the value is an object of option key/value pairs for the event. Event specific values will be merged with defaults from the `options` property. | | ||
| payload | objectOf (any) | ── | Object of any values that represents the default payload to apply to all events within this context. | | ||
| fields | objectOf (string) | ── | (Deprecated) Object of string values that represents the default fields to apply to all events within this context. The `payload` property takes precedence over this property if both are specified. | | ||
| options | objectOf (any) | ── | The trigger options. | | ||
| overwrite | bool | false | When true, overwrites the current context with specified properties. Default is to merge instead of overwrite. | | ||
| trigger | func | () => {} | Tracking event trigger implementation. | | ||
In the example below the `Calendar` component is known to trigger some events so the consuming application wraps it with a `TrackingProvider` and the appropriate configuration of fields and options as well as the implementation of `trigger` appropriate for the application. | ||
In the example below the `Calendar` component is known to trigger some events so the consuming application wraps it with a `TrackingProvider` and the appropriate configuration of payload and options as well as the implementation of `trigger` appropriate for the application. | ||
```jsx | ||
import {TrackingProvider} from '@vrbo/react-event-tracking'; | ||
const defaultFields = {location: 'top-right'}; | ||
const defaultPayload = {location: 'top-right'}; | ||
const defaultOptions = {asynchronous: true}; | ||
const customTrigger = (event, fields, options) => { | ||
const customTrigger = (event, payload, options) => { | ||
// Implement custom event tracking. | ||
@@ -72,3 +74,3 @@ } | ||
<TrackingProvider | ||
fields={defaultFields} | ||
payload={defaultPayload} | ||
options={defaultOptions} | ||
@@ -89,3 +91,3 @@ trigger={customTrigger} | ||
While the `TrackingProvider` component is used to incrementally build the fields and options for an event and define the trigger implementation, the `TrackingContext` module is used to trigger the analytic event. Structuring a component to use `TrackingContext` will provide access to the `trigger` method to trigger analytic events via `this.context.trigger`. | ||
While the `TrackingProvider` component is used to incrementally build the payload and options for an event and define the trigger implementation, the `TrackingContext` module is used to trigger the analytic event. Structuring a component to use `TrackingContext` will provide access to the `trigger` method to trigger analytic events via `this.context.trigger`. | ||
@@ -111,3 +113,3 @@ In the example below, `MyComponent` is configured to use the `TrackingContext` module and then triggers a `generic.click` event when the `handleClick()` method is invoked: | ||
```javascript | ||
trigger(event, fields, options) | ||
trigger(event, payload, options) | ||
``` | ||
@@ -118,3 +120,3 @@ | ||
* event - The name of the event to trigger (String) | ||
* fields - The required and optional fields for the event (Object of string values). | ||
* payload - The required and optional payload for the event (Object). | ||
* options - The trigger options to use when triggering the event (Object) | ||
@@ -126,3 +128,3 @@ | ||
The `TrackingTrigger` component allows an application to declaratively trigger an analytic event. It is used in conjunction with the `TrackingProvider` component to trigger events in a standardized way. Specify the desired event name, fields and options to include when the event is triggered. The event will be triggered with a merge of the specified fields and options and the current context when the containing component’s `componentDidMount` is invoked. | ||
The `TrackingTrigger` component allows an application to declaratively trigger an analytic event. It is used in conjunction with the `TrackingProvider` component to trigger events in a standardized way. Specify the desired event name, payload and options to include when the event is triggered. The event will be triggered with a merge of the specified payload and options and the current context when the containing component’s `componentDidMount` is invoked. | ||
@@ -132,9 +134,9 @@ | PROPERTY | TYPE | DEFAULT | DESCRIPTION | | ||
| event | string | ── | The event to trigger | | ||
| fields | objectOf (string) | {} | The event specific fields | | ||
| payload | objectOf (any) | {} | The event specific payload | | ||
| onTrigger | func | () => {} | Callback function invoked after the event successfully triggered. | | ||
| options | objectOf (string) | {} | The trigger options. | | ||
| options | objectOf (any) | {} | The trigger options. | | ||
```jsx | ||
import {TrackingTrigger} from '@vrbo/react-event-tracking'; | ||
const eventFields = { | ||
const eventPayload = { | ||
location: 'searchbar', | ||
@@ -150,3 +152,3 @@ name: 'Calendar' | ||
event={'viewed'} | ||
fields={eventFields} | ||
payload={eventPayload} | ||
options={eventOptions} | ||
@@ -166,2 +168,3 @@ /> | ||
* Do not dynamically construct the property values for `TrackingProvider` unless you want all descendant consumers to force re-render. See the "Note" under the `TrackingProvider` section for more details. | ||
* Objects used in `eventPayload`, `eventOptions` and `payload` are shallow copied when merging data in the `TrackingProvider`, so changes to referenced objects would be reflected in all usages. Use new objects to avoid this. | ||
@@ -168,0 +171,0 @@ ## Development |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
126227
612
186