16753253862

Committed 05 Aug 2025 02:38PM UTC coverage: 61.554% (-0.09%) from 61.648%

Build # 16753253862

Build Type

Pull #1942

github

Committed by

Fondryext

Commit Message

add more handler, fix tests

Pull Request Pull Request #1942: ksearch: update v1.14 to fire click events on click

Run Details

1964 of 3341 branches covered (58.78%)

Branch coverage included in aggregate %.

7 of 11 new or added lines in 2 files covered. (63.64%)

5 existing lines in 1 file now uncovered.

3374 of 5331 relevant lines covered (63.29%)

27.02 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

80.95

/src/ui/components/component.js

/** @module Component */

import cloneDeep from 'lodash.clonedeep';

import { Renderers } from '../rendering/const';

import DOM from '../dom/dom';
import State from './state';
import { AnalyticsReporter } from '../../core'; // eslint-disable-line no-unused-vars
import AnalyticsEvent from '../../core/analytics/analyticsevent';
import { AnswersComponentError } from '../../core/errors/errors';

/**
 * Component is an abstraction that encapsulates state, behavior,
 * and view for a particular chunk of functionality on the page.
 *
 * The API exposes event life cycle hooks for when things are rendered,
 * mounted, created, etc.
 */
export default class Component {
  constructor (config = {}, systemConfig = {}) {
    this.moduleId = null;

    /**
     * A unique id number for the component.
     * @type {number}
     */
    this.uniqueId = systemConfig.uniqueId;

    /**
     * Name of this component instance.
     * @type {String}
     */
    this.name = config.name || this.constructor.type;

    /**
     * Cache the options so that we can propogate properly to child components
     * @type {Object}
     */
    this._config = config;

    /**
     * An identifier used to classify the type of component.
     * The component manager uses this information in order to persist and organize components
     * @type {string|ComponentType}
     */
    this._type = this.constructor.name;

    /**
     * A local reference to the parent component, if exists
     * @type {Component}
     */
    this._parentContainer = config.parentContainer || null;

    /**
     * A container for all the child components
     * @type {Component[]}
     */
    this._children = [];

    /**
     * The state (data) of the component to be provided to the template for rendering
     * @type {object}
     */
    this._state = new State(config.state);

    /**
     * TODO(billy) This should be 'services'
     */
    this.core = systemConfig.core || null;

    /**
     * A local reference to the component manager, which contains all of the component classes
     * eligible to be created
     * @type {ComponentManager}
     */
    this.componentManager = systemConfig.componentManager || null;

    /**
     * A local reference to the analytics reporter, used to report events for this component
     * @type {AnalyticsReporter}
     */
    this.analyticsReporter = systemConfig.analyticsReporter || null;

    /**
     * Options to include with all analytic events sent by this component
     * @type {object}
     * @private
     */
    this._analyticsOptions = config.analyticsOptions || {};

    /**
     * Allows the main thread to regain control while rendering child components
     * @type {boolean}
     */
    this._progressivelyRenderChildren = config.progressivelyRenderChildren;

    /**
     * A reference to the DOM node that the component will be appended to when mounted/rendered.
     * @type {HTMLElement}
     */
    if (this._parentContainer === null) {
      if (typeof config.container === 'string') {
        this._container = DOM.query(config.container) || null;
        if (this._container === null) {
          throw new Error('Cannot find container DOM node: ' + config.container);
        }
      }
    } else {
      this._container = DOM.query(this._parentContainer, config.container);

      // If we have a parent, and the container is missing from the DOM,
      // we construct the container and append it to the parent
      if (this._container === null) {
        this._container = DOM.createEl('div', {
          class: config.container.substring(1, config.container.length)
        });
        DOM.append(this._parentContainer, this._container);
      }
    }

    /**
     * A custom class to be applied to {this._container} node. Note that the class
     * 'yxt-Answers-component' will be included as well.
     * @type {string}
     */
    this._className = config.class || 'component';

    /**
     * A custom render function to be used instead of using the default renderer
     * @type {Renderer}
     */
    this._render = config.render || null;

    /**
     * A local reference to the default {Renderer} that will be used for rendering the template
     * @type {Renderer}
     */
    this._renderer = systemConfig.renderer || Renderers.Handlebars;

    /**
     * The template string to use for rendering the component
     * If this is left empty, we lookup the template the base templates using the templateName
     * @type {string}
     */
    this._template = config.template ? this._renderer.compile(config.template) : null;

    /**
     * The templateName to use for rendering the component.
     * This is only used if _template is empty.
     * @type {string}
     */
    this._templateName = config.templateName || this.constructor.defaultTemplateName(config);

    /**
     * An internal state indicating whether or not the component has been mounted to the DOM
     * @type {boolean}
     */
    this._isMounted = false;

    /**
     * A local reference to the callback, thats used to transform the internal data
     * models of the components, before it gets applied to the component state.
     * By default, no transformation happens.
     * @type {function}
     */
    this.transformData = config.transformData;

    /**
     * A local reference to the callback that will be invoked when a component is created.
     * @type {function}
     */
    this.onCreate = config.onCreateOverride || this.onCreate || function () {};
    this.onCreate = this.onCreate.bind(this);

    /**
     * A local reference to the callback that will be invoked before a component is mounted.
     * @type {function}
     */
    this.beforeMount = config.beforeMountOverride || this.beforeMount || function () {};
    this.beforeMount = this.beforeMount.bind(this);

    /**
     * A local reference to the callback that will be invoked when a component is mounted.
     * @type {function}
     */
    this.onMount = config.onMountOverride || this.onMount || function () {};
    this.onMount = this.onMount.bind(this);

    /**
     * A local reference to the callback that will be invoked when a components state is updated.
     * @type {function}
     */
    this.onUpdate = config.onUpdateOverride || this.onUpdate || function () { };
    this.onUpdate = this.onUpdate.bind(this);

    /**
     * A user provided onCreate callback
     * @type {function}
     */
    this.userOnCreate = config.onCreate || function () {};

    /**
     * A user provided onMount callback
     * @type {function}
     */
    this.userOnMount = config.onMount || function () {};

    /**
     * A user provided onUpdate callback
     * @type {function}
     */
    this.userOnUpdate = config.onUpdate || function () {};
  }

  /**
   * The template to render
   * @returns {string}
   * @override
   */
  static defaultTemplateName (config) {
    return 'default';
  }

  static get type () {
    return 'Component';
  }

  static areDuplicateNamesAllowed () {
    return false;
  }

  init (opts) {
    try {
      this.setState(opts.data || opts.state || {});
      this.onCreate();
      this.userOnCreate();
    } catch (e) {
      throw new AnswersComponentError(
        'Error initializing component',
        this.constructor.type,
        e);
    }

    this._state.on('update', () => {
      try {
        this.onUpdate();
        this.userOnUpdate();
        this.unMount();
        this.mount();
      } catch (e) {
        throw new AnswersComponentError(
          'Error updating component',
          this.constructor.type,
          e);
      }
    });

    DOM.addClass(this._container, this._className);
    DOM.addClass(this._container, 'yxt-Answers-component');
    return this;
  }

  /**
   * Adds a class to the container of the component.
   * @param {string} className A comma separated value of classes
   */
  addContainerClass (className) {
    DOM.addClass(this._container, className);
  }

  /**
   * Removes the specified classes from the container of the component
   * @param {string} className A comma separated value of classes
   */
  removeContainerClass (className) {
    DOM.removeClass(this._container, className);
  }

  setState (data) {
    const newState = Object.assign({}, { _config: this._config }, data);
    this._state.set(newState);
    return this;
  }

  getState (prop) {
    return this._state.get(prop);
  }

  hasState (prop) {
    return this._state.has(prop);
  }

  addChild (data, type, opts) {
    const childComponent = this.componentManager.create(
      type,
      Object.assign({
        name: data.name,
        parentContainer: this._container,
        data: data
      }, opts || {}, {
        _parentOpts: this._config
      })
    );

    this._children.push(childComponent);
    return childComponent;
  }

  /**
   * Unmount and remove this component and its children from the list
   * of active components
   */
  remove () {
    this._children.forEach(c => c.remove());
    this.componentManager.remove(this);
  }

  /**
   * Set the render method to be used for rendering the component
   * @param {Function} render
   * @return {string}
   */
  setRender (render) {
    this._render = render;
    return this;
  }

  /**
   * Set the renderer for the component
   * @param {RendererType} renderer
   */
  setRenderer (renderer) {
    this._renderer = Renderers[renderer];
    return this;
  }

  /**
   * Sets the template for the component to use when rendering
   * @param {string} template
   */
  setTemplate (template) {
    this._template = this._renderer.compile(template);
  }

  unMount () {
    if (!this._container) {
      return this;
    }

    this._children.forEach(child => {
      child.unMount();
    });

    DOM.empty(this._container);
    this._children.forEach(c => c.remove());
    this._children = [];
    this.onUnMount();
  }

  mount (container) {
    if (container) {
      this._container = container;
    }

    if (!this._container) {
      return this;
    }

    if (this.beforeMount() === false) {
      return this;
    }

    DOM.append(this._container, this.render(this._state.asJSON()));

    // Process the DOM to determine if we should create
    // in-memory sub-components for rendering
    const domComponents = DOM.queryAll(this._container, '[data-component]:not([data-is-component-mounted])');
    let data;
    try {
      data = this.transformData
        ? this.transformData(cloneDeep(this._state.get()))
        : this._state.get();
    } catch (e) {
      console.error(`The following problem occurred while transforming data for sub-components of ${this.name}: `, e);
    }
    domComponents.forEach(c => {
      try {
        this._createSubcomponent(c, data);
      } catch (e) {
        console.error('The following problem occurred while initializing sub-component: ', c, e);
      }
    });
    if (this._progressivelyRenderChildren) {
      this._children.forEach(child => {
        setTimeout(() => {
          try {
            child.mount();
          } catch (e) {
            console.error('The following problem occurred while mounting sub-component: ', child, e);
          }
        });
      });
    } else {
      this._children.forEach(child => {
        try {
          child.mount();
        } catch (e) {
          console.error('The following problem occurred while mounting sub-component: ', child, e);
        }
      });
    }

    // Attach analytics hooks as necessary
    if (this.analyticsReporter) {
      const domHooks = DOM.queryAll(this._container, '[data-eventtype]:not([data-is-analytics-attached])');
      domHooks.forEach(this._createAnalyticsHook.bind(this));
    }

    this._isMounted = true;
    this.onMount(this);
    this.userOnMount(this);

    return this;
  }

  /**
   * render the template using the {Renderer} with the current state and template of the component
   * @returns {string}
   */
  render (data = this._state.get()) {
    this.beforeRender();
    // Temporary fix for passing immutable data to transformData().
    data = this.transformData
      ? this.transformData(cloneDeep(data))
      : data;

    let html = '';
    // Use either the custom render function or the internal renderer
    // dependant on the component configuration
    if (typeof this._render === 'function') {
      html = this._render(data);
      if (typeof html !== 'string') {
        throw new Error('Render method must return HTML as type {string}');
      }
    } else {
      // Render the existing templates as a string
      html = this._renderer.render({
        template: this._template,
        templateName: this._templateName
      }, data);
    }

    this.afterRender();
    return html;
  }

  _createSubcomponent (domComponent, data) {
    domComponent.dataset.isComponentMounted = true;
    const dataset = domComponent.dataset;
    const type = dataset.component;
    const prop = dataset.prop;
    let opts = dataset.opts ? JSON.parse(dataset.opts) : {};

    const childData = data[prop] || {};

    opts = {
      ...opts,
      container: domComponent
    };

    // TODO(billy) Right now, if we provide an array as the data prop,
    // the behavior is to create many components for each item in the array.
    // THAT interface SHOULD change to use a different property that defines
    // whether to array data should be used for a single component or
    // to create many components for each item.
    // Overloading and having this side effect is unintuitive and WRONG
    if (!Array.isArray(childData)) {
      // Rendering a sub component should be within the context,
      // of the node that we processed it from
      this.addChild(childData, type, opts);
      return;
    }

    childData.reverse();
    childData.forEach(data => {
      this.addChild(data, type, opts);
    });
  }

  _createAnalyticsHook (domComponent) {
    domComponent.dataset.isAnalyticsAttached = true;
    const dataset = domComponent.dataset;
    const type = dataset.eventtype;
    const label = dataset.eventlabel;
    const middleclick = dataset.middleclick;
    const options = dataset.eventoptions ? JSON.parse(dataset.eventoptions) : {};

    DOM.on(domComponent, 'click', e => {
      if (e.button === 0 || (middleclick && e.button === 1)) {
        const event = new AnalyticsEvent(type, label);
        event.addOptions(this._analyticsOptions);
        event.addOptions(options);
        this.analyticsReporter.report(event);
      }
    });
    DOM.on(domComponent, 'auxclick', e => {
      if (e.button === 0 || (middleclick && e.button === 1)) {
        const event = new AnalyticsEvent(type, label);
        event.addOptions(this._analyticsOptions);
        event.addOptions(options);
        this.analyticsReporter.report(event);
      }
    });
  }

  /**
   * onCreate is triggered when the component is constructed
   * @param {function} the callback to invoke upon emit
   */
  onCreate (cb) {

  }

  /**
   * onUpdate is triggered when the state of the component changes
   * @param {function} the callback to invoke upon emit
   */
  onUpdate (cb) {

  }

  /**
   * beforeRender event is triggered before the component is rendered
   * @param {function} the callback to invoke upon emit
   */
  beforeRender (cb) {

  }

  /**
   * afterRender event is triggered after the component is rendered
   * @param {function} the callback to invoke upon emit
   */
  afterRender (cb) {

  }

  /**
   * onMount is triggered when the component is appended to the DOM
   * @param {function} the callback to invoke upon emit
   */
  onMount (cb) {

  }

  /**
   * onUnMount is triggered when the component is removed from the DOM
   * @param {function} the callback to invoke upon emit
   */
  onUnMount (cb) {

  }

  /**
   * beforeMount is triggered before the component is mounted to the DOM
   * @param {function} the callback to invoke upon emit
   */
  beforeMount (cb) {

  }

  /**
   * onDestroy is triggered when the component is destroyed
   * @param {function} the callback to invoke upon emit
   */
  onDestroy (cb) {

  }
}

1	/** @module Component */
2
3	import cloneDeep from 'lodash.clonedeep';
4
5	import { Renderers } from '../rendering/const';
6
7	import DOM from '../dom/dom';
8	import State from './state';
9	import { AnalyticsReporter } from '../../core'; // eslint-disable-line no-unused-vars
10	import AnalyticsEvent from '../../core/analytics/analyticsevent';
11	import { AnswersComponentError } from '../../core/errors/errors';
12
13	/**
14	* Component is an abstraction that encapsulates state, behavior,
15	* and view for a particular chunk of functionality on the page.
16	*
17	* The API exposes event life cycle hooks for when things are rendered,
18	* mounted, created, etc.
19	*/
20	export default class Component {
21	constructor (config = {}, systemConfig = {}) {	×
22	this.moduleId = null;	242✔
23
24	/**
25	* A unique id number for the component.
26	* @type {number}
27	*/
28	this.uniqueId = systemConfig.uniqueId;	242✔
29
30	/**
31	* Name of this component instance.
32	* @type {String}
33	*/
34	this.name = config.name \|\| this.constructor.type;	242✔
35
36	/**
37	* Cache the options so that we can propogate properly to child components
38	* @type {Object}
39	*/
40	this._config = config;	242✔
41
42	/**
43	* An identifier used to classify the type of component.
44	* The component manager uses this information in order to persist and organize components
45	* @type {string\|ComponentType}
46	*/
47	this._type = this.constructor.name;	242✔
48
49	/**
50	* A local reference to the parent component, if exists
51	* @type {Component}
52	*/
53	this._parentContainer = config.parentContainer \|\| null;	242✔
54
55	/**
56	* A container for all the child components
57	* @type {Component[]}
58	*/
59	this._children = [];	242✔
60
61	/**
62	* The state (data) of the component to be provided to the template for rendering
63	* @type {object}
64	*/
65	this._state = new State(config.state);	242✔
66
67	/**
68	* TODO(billy) This should be 'services'
69	*/
70	this.core = systemConfig.core \|\| null;	242!
71
72	/**
73	* A local reference to the component manager, which contains all of the component classes
74	* eligible to be created
75	* @type {ComponentManager}
76	*/
77	this.componentManager = systemConfig.componentManager \|\| null;	242✔
78
79	/**
80	* A local reference to the analytics reporter, used to report events for this component
81	* @type {AnalyticsReporter}
82	*/
83	this.analyticsReporter = systemConfig.analyticsReporter \|\| null;	242✔
84
85	/**
86	* Options to include with all analytic events sent by this component
87	* @type {object}
88	* @private
89	*/
90	this._analyticsOptions = config.analyticsOptions \|\| {};	242✔
91
92	/**
93	* Allows the main thread to regain control while rendering child components
94	* @type {boolean}
95	*/
96	this._progressivelyRenderChildren = config.progressivelyRenderChildren;	242✔
97
98	/**
99	* A reference to the DOM node that the component will be appended to when mounted/rendered.
100	* @type {HTMLElement}
101	*/
102	if (this._parentContainer === null) {	242✔
103	if (typeof config.container === 'string') {	187✔
104	this._container = DOM.query(config.container) \|\| null;	149!
105	if (this._container === null) {	149!
106	throw new Error('Cannot find container DOM node: ' + config.container);	×
107	}
108	}
109	} else {
110	this._container = DOM.query(this._parentContainer, config.container);	55✔
111
112	// If we have a parent, and the container is missing from the DOM,
113	// we construct the container and append it to the parent
114	if (this._container === null) {	55✔
115	this._container = DOM.createEl('div', {	1✔
116	class: config.container.substring(1, config.container.length)
117	});
118	DOM.append(this._parentContainer, this._container);	1✔
119	}
120	}
121
122	/**
123	* A custom class to be applied to {this._container} node. Note that the class
124	* 'yxt-Answers-component' will be included as well.
125	* @type {string}
126	*/
127	this._className = config.class \|\| 'component';	242✔
128
129	/**
130	* A custom render function to be used instead of using the default renderer
131	* @type {Renderer}
132	*/
133	this._render = config.render \|\| null;	242✔
134
135	/**
136	* A local reference to the default {Renderer} that will be used for rendering the template
137	* @type {Renderer}
138	*/
139	this._renderer = systemConfig.renderer \|\| Renderers.Handlebars;	242✔
140
141	/**
142	* The template string to use for rendering the component
143	* If this is left empty, we lookup the template the base templates using the templateName
144	* @type {string}
145	*/
146	this._template = config.template ? this._renderer.compile(config.template) : null;	242✔
147
148	/**
149	* The templateName to use for rendering the component.
150	* This is only used if _template is empty.
151	* @type {string}
152	*/
153	this._templateName = config.templateName \|\| this.constructor.defaultTemplateName(config);	242✔
154
155	/**
156	* An internal state indicating whether or not the component has been mounted to the DOM
157	* @type {boolean}
158	*/
159	this._isMounted = false;	242✔
160
161	/**
162	* A local reference to the callback, thats used to transform the internal data
163	* models of the components, before it gets applied to the component state.
164	* By default, no transformation happens.
165	* @type {function}
166	*/
167	this.transformData = config.transformData;	242✔
168
169	/**
170	* A local reference to the callback that will be invoked when a component is created.
171	* @type {function}
172	*/
173	this.onCreate = config.onCreateOverride \|\| this.onCreate \|\| function () {};	242!
174	this.onCreate = this.onCreate.bind(this);	242✔
175
176	/**
177	* A local reference to the callback that will be invoked before a component is mounted.
178	* @type {function}
179	*/
180	this.beforeMount = config.beforeMountOverride \|\| this.beforeMount \|\| function () {};	242!
181	this.beforeMount = this.beforeMount.bind(this);	242✔
182
183	/**
184	* A local reference to the callback that will be invoked when a component is mounted.
185	* @type {function}
186	*/
187	this.onMount = config.onMountOverride \|\| this.onMount \|\| function () {};	242!
188	this.onMount = this.onMount.bind(this);	242✔
189
190	/**
191	* A local reference to the callback that will be invoked when a components state is updated.
192	* @type {function}
193	*/
194	this.onUpdate = config.onUpdateOverride \|\| this.onUpdate \|\| function () { };	242!
195	this.onUpdate = this.onUpdate.bind(this);	242✔
196
197	/**
198	* A user provided onCreate callback
199	* @type {function}
200	*/
201	this.userOnCreate = config.onCreate \|\| function () {};	242✔
202
203	/**
204	* A user provided onMount callback
205	* @type {function}
206	*/
207	this.userOnMount = config.onMount \|\| function () {};	242✔
208
209	/**
210	* A user provided onUpdate callback
211	* @type {function}
212	*/
213	this.userOnUpdate = config.onUpdate \|\| function () {};	242✔
214	}
215
216	/**
217	* The template to render
218	* @returns {string}
219	* @override
220	*/
221	static defaultTemplateName (config) {
222	return 'default';	9✔
223	}
224
225	static get type () {
226	return 'Component';	33✔
227	}
228
229	static areDuplicateNamesAllowed () {
230	return false;	1✔
231	}
232
233	init (opts) {
234	try {	236✔
235	this.setState(opts.data \|\| opts.state \|\| {});	236✔
236	this.onCreate();	236✔
237	this.userOnCreate();	236✔
238	} catch (e) {
239	throw new AnswersComponentError(	×
240	'Error initializing component',
241	this.constructor.type,
242	e);
243	}
244
245	this._state.on('update', () => {	236✔
246	try {	121✔
247	this.onUpdate();	121✔
248	this.userOnUpdate();	121✔
249	this.unMount();	121✔
250	this.mount();	121✔
251	} catch (e) {
252	throw new AnswersComponentError(	×
253	'Error updating component',
254	this.constructor.type,
255	e);
256	}
257	});
258
259	DOM.addClass(this._container, this._className);	236✔
260	DOM.addClass(this._container, 'yxt-Answers-component');	236✔
261	return this;	236✔
262	}
263
264	/**
265	* Adds a class to the container of the component.
266	* @param {string} className A comma separated value of classes
267	*/
268	addContainerClass (className) {
269	DOM.addClass(this._container, className);	73✔
270	}
271
272	/**
273	* Removes the specified classes from the container of the component
274	* @param {string} className A comma separated value of classes
275	*/
276	removeContainerClass (className) {
277	DOM.removeClass(this._container, className);	219✔
278	}
279
280	setState (data) {
281	const newState = Object.assign({}, { _config: this._config }, data);	357✔
282	this._state.set(newState);	357✔
283	return this;	357✔
284	}
285
286	getState (prop) {
287	return this._state.get(prop);	51✔
288	}
289
290	hasState (prop) {
291	return this._state.has(prop);	4✔
292	}
293
294	addChild (data, type, opts) {
295	const childComponent = this.componentManager.create(	2✔
296	type,
297	Object.assign({
298	name: data.name,
299	parentContainer: this._container,
300	data: data
301	}, opts \|\| {}, {	2!
302	_parentOpts: this._config
303	})
304	);
305
306	this._children.push(childComponent);	2✔
307	return childComponent;	2✔
308	}
309
310	/**
311	* Unmount and remove this component and its children from the list
312	* of active components
313	*/
314	remove () {
315	this._children.forEach(c => c.remove());	10✔
316	this.componentManager.remove(this);	10✔
317	}
318
319	/**
320	* Set the render method to be used for rendering the component
321	* @param {Function} render
322	* @return {string}
323	*/
324	setRender (render) {
325	this._render = render;	×
326	return this;	×
327	}
328
329	/**
330	* Set the renderer for the component
331	* @param {RendererType} renderer
332	*/
333	setRenderer (renderer) {
334	this._renderer = Renderers[renderer];	×
335	return this;	×
336	}
337
338	/**
339	* Sets the template for the component to use when rendering
340	* @param {string} template
341	*/
342	setTemplate (template) {
343	this._template = this._renderer.compile(template);	5✔
344	}
345
346	unMount () {
347	if (!this._container) {	121✔
348	return this;	15✔
349	}
350
351	this._children.forEach(child => {	106✔
352	child.unMount();	×
353	});
354
355	DOM.empty(this._container);	106✔
356	this._children.forEach(c => c.remove());	106✔
357	this._children = [];	106✔
358	this.onUnMount();	106✔
359	}
360
361	mount (container) {
362	if (container) {	285✔
363	this._container = container;	106✔
364	}
365
366	if (!this._container) {	285✔
367	return this;	16✔
368	}
369
370	if (this.beforeMount() === false) {	269✔
371	return this;	3✔
372	}
373
374	DOM.append(this._container, this.render(this._state.asJSON()));	266✔
375
376	// Process the DOM to determine if we should create
377	// in-memory sub-components for rendering
378	const domComponents = DOM.queryAll(this._container, '[data-component]:not([data-is-component-mounted])');	266✔
379	let data;
380	try {	266✔
381	data = this.transformData	266!
382	? this.transformData(cloneDeep(this._state.get()))
383	: this._state.get();
384	} catch (e) {
385	console.error(`The following problem occurred while transforming data for sub-components of ${this.name}: `, e);	×
386	}
387	domComponents.forEach(c => {	266✔
388	try {	3✔
389	this._createSubcomponent(c, data);	3✔
390	} catch (e) {
391	console.error('The following problem occurred while initializing sub-component: ', c, e);	×
392	}
393	});
394	if (this._progressivelyRenderChildren) {	266!
395	this._children.forEach(child => {	×
396	setTimeout(() => {	×
397	try {	×
398	child.mount();	×
399	} catch (e) {
400	console.error('The following problem occurred while mounting sub-component: ', child, e);	×
401	}
402	});
403	});
404	} else {
405	this._children.forEach(child => {	266✔
406	try {	2✔
407	child.mount();	2✔
408	} catch (e) {
409	console.error('The following problem occurred while mounting sub-component: ', child, e);	×
410	}
411	});
412	}
413
414	// Attach analytics hooks as necessary
415	if (this.analyticsReporter) {	266!
416	const domHooks = DOM.queryAll(this._container, '[data-eventtype]:not([data-is-analytics-attached])');	266✔
417	domHooks.forEach(this._createAnalyticsHook.bind(this));	266✔
418	}
419
420	this._isMounted = true;	266✔
421	this.onMount(this);	266✔
422	this.userOnMount(this);	266✔
423
424	return this;	266✔
425	}
426
427	/**
428	* render the template using the {Renderer} with the current state and template of the component
429	* @returns {string}
430	*/
431	render (data = this._state.get()) {	2✔
432	this.beforeRender();	268✔
433	// Temporary fix for passing immutable data to transformData().
434	data = this.transformData	268!
435	? this.transformData(cloneDeep(data))
436	: data;
437
438	let html = '';	268✔
439	// Use either the custom render function or the internal renderer
440	// dependant on the component configuration
441	if (typeof this._render === 'function') {	268!
442	html = this._render(data);	×
443	if (typeof html !== 'string') {	×
444	throw new Error('Render method must return HTML as type {string}');	×
445	}
446	} else {
447	// Render the existing templates as a string
448	html = this._renderer.render({	268✔
449	template: this._template,
450	templateName: this._templateName
451	}, data);
452	}
453
454	this.afterRender();	268✔
455	return html;	268✔
456	}
457
458	_createSubcomponent (domComponent, data) {
459	domComponent.dataset.isComponentMounted = true;	3✔
460	const dataset = domComponent.dataset;	3✔
461	const type = dataset.component;	3✔
462	const prop = dataset.prop;	3✔
463	let opts = dataset.opts ? JSON.parse(dataset.opts) : {};	3✔
464
465	const childData = data[prop] \|\| {};	3✔
466
467	opts = {	3✔
468	...opts,
469	container: domComponent
470	};
471
472	// TODO(billy) Right now, if we provide an array as the data prop,
473	// the behavior is to create many components for each item in the array.
474	// THAT interface SHOULD change to use a different property that defines
475	// whether to array data should be used for a single component or
476	// to create many components for each item.
477	// Overloading and having this side effect is unintuitive and WRONG
478	if (!Array.isArray(childData)) {	3✔
479	// Rendering a sub component should be within the context,
480	// of the node that we processed it from
481	this.addChild(childData, type, opts);	2✔
482	return;	2✔
483	}
484
485	childData.reverse();	1✔
486	childData.forEach(data => {	1✔
487	this.addChild(data, type, opts);	×
488	});
489	}
490
491	_createAnalyticsHook (domComponent) {
492	domComponent.dataset.isAnalyticsAttached = true;	101✔
493	const dataset = domComponent.dataset;	101✔
494	const type = dataset.eventtype;	101✔
495	const label = dataset.eventlabel;	101✔
496	const middleclick = dataset.middleclick;	101✔
497	const options = dataset.eventoptions ? JSON.parse(dataset.eventoptions) : {};	101✔
498
499	DOM.on(domComponent, 'click', e => {	101✔
500	if (e.button === 0 \|\| (middleclick && e.button === 1)) {	12!
501	const event = new AnalyticsEvent(type, label);	4✔
502	event.addOptions(this._analyticsOptions);	4✔
503	event.addOptions(options);	4✔
504	this.analyticsReporter.report(event);	4✔
505	}
506	});
507	DOM.on(domComponent, 'auxclick', e => {	101✔
UNCOV 508	if (e.button === 0 \|\| (middleclick && e.button === 1)) {	×
UNCOV 509	const event = new AnalyticsEvent(type, label);	×
UNCOV 510	event.addOptions(this._analyticsOptions);	×
UNCOV 511	event.addOptions(options);	×
UNCOV 512	this.analyticsReporter.report(event);	×
513	}
514	});
515	}
516
517	/**
518	* onCreate is triggered when the component is constructed
519	* @param {function} the callback to invoke upon emit
520	*/
521	onCreate (cb) {
522
523	}
524
525	/**
526	* onUpdate is triggered when the state of the component changes
527	* @param {function} the callback to invoke upon emit
528	*/
529	onUpdate (cb) {
530
531	}
532
533	/**
534	* beforeRender event is triggered before the component is rendered
535	* @param {function} the callback to invoke upon emit
536	*/
537	beforeRender (cb) {
538
539	}
540
541	/**
542	* afterRender event is triggered after the component is rendered
543	* @param {function} the callback to invoke upon emit
544	*/
545	afterRender (cb) {
546
547	}
548
549	/**
550	* onMount is triggered when the component is appended to the DOM
551	* @param {function} the callback to invoke upon emit
552	*/
553	onMount (cb) {
554
555	}
556
557	/**
558	* onUnMount is triggered when the component is removed from the DOM
559	* @param {function} the callback to invoke upon emit
560	*/
561	onUnMount (cb) {
562
563	}
564
565	/**
566	* beforeMount is triggered before the component is mounted to the DOM
567	* @param {function} the callback to invoke upon emit
568	*/
569	beforeMount (cb) {
570
571	}
572
573	/**
574	* onDestroy is triggered when the component is destroyed
575	* @param {function} the callback to invoke upon emit
576	*/
577	onDestroy (cb) {
578
579	}
580	}

yext / answers-search-ui / 16753253862

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous