/
AbstractPureComponent.js
144 lines (134 loc) · 5 KB
/
AbstractPureComponent.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import React from 'react';
import * as helpers from './componentHelpers';
import Context from './Context';
/**
* The base class for all pure (state-less) view components.
*
* Unlike the "regular" components, pure components do not have any external
* state, and therefore are pure functions of their props and state. This
* allows for some nice optimizations on react's part (see the link).
*
* Because of this, this class does not provide all the APIs provided by the
* {@linkcode AbstractComponent} class (e.g. {@code listen}) as there is next
* to none use of them with pure components.
*
* @abstract
* @see https://facebook.github.io/react/docs/react-api.html#react.purecomponent
*/
export default class AbstractPureComponent extends React.PureComponent {
static get contextType() {
return Context;
}
/**
* Initializes the component.
*
* @param {Object<string, *>} props The component properties.
* @param {Object<string, *>} context The component context.
*/
constructor(props, context) {
super(props, context);
/**
* The view utilities, initialized lazily upon first use from either
* the context, or the component's props.
*
* @type {?Object<string, *>}
*/
this._utils = null;
}
/**
* Returns the utilities for the view components. The returned value is the
* value bound to the {@code $Utils} object container constant.
*
* @return {Object<string, *>} The utilities for the view components.
*/
get utils() {
if (!this._utils) {
this._utils = helpers.getUtils(this.props, this.context);
}
return this._utils;
}
/**
* Returns the localized phrase identified by the specified key. The
* placeholders in the localization phrase will be replaced by the provided
* values.
*
* @param {string} key Localization key.
* @param {Object<string, (number|string)>=} params Values for replacing
* the placeholders in the localization phrase.
* @return {string} Localized phrase.
*/
localize(key, params = {}) {
return helpers.localize(this, key, params);
}
/**
* Generates an absolute URL using the provided route name (see the
* <code>app/config/routes.js</code> file). The provided parameters will
* replace the placeholders in the route pattern, while the extraneous
* parameters will be appended to the generated URL's query string.
*
* @param {string} name The route name.
* @param {Object<string, (number|string)>=} params Router parameters and
* extraneous parameters to add to the URL as a query string.
* @return {string} The generated URL.
*/
link(name, params = {}) {
return helpers.link(this, name, params);
}
/**
* Generate a string of CSS classes from the properties of the passed-in
* object that resolve to true.
*
* @example
* this.cssClasses('my-class my-class-modificator', true);
* @example
* this.cssClasses({
* 'my-class': true,
* 'my-class-modificator': this.props.modificator
* }, true);
*
* @param {(string|Object<string, boolean>)} classRules CSS classes in a
* string separated by whitespace, or a map of CSS class names to
* boolean values. The CSS class name will be included in the result
* only if the value is {@code true}.
* @param {boolean} includeComponentClassName
* @return {string} String of CSS classes that had their property resolved
* to {@code true}.
*/
cssClasses(classRules, includeComponentClassName = false) {
return helpers.cssClasses(this, classRules, includeComponentClassName);
}
/**
* Creates and sends a new IMA.js DOM custom event from this component.
*
* @param {string} eventName The name of the event.
* @param {*=} data Data to send within the event.
*/
fire(eventName, data = undefined) {
helpers.fire(this, eventName, data);
}
/**
* Registers the provided event listener for execution whenever an IMA.js
* DOM custom event of the specified name occurs at the specified event
* target.
*
* @param {(React.Element|EventTarget)} eventTarget The react component or
* event target at which the listener should listen for the event.
* @param {string} eventName The name of the event for which to listen.
* @param {function(Event)} listener The listener for event to register.
*/
listen(eventTarget, eventName, listener) {
helpers.listen(this, eventTarget, eventName, listener);
}
/**
* Deregisters the provided event listener for an IMA.js DOM custom event
* of the specified name at the specified event target.
*
* @param {(React.Element|EventTarget)} eventTarget The react component or
* event target at which the listener should listen for the event.
* @param {string} eventName The name of the event for which to listen.
* @param {function(Event)} listener The listener for event to register.
*/
unlisten(eventTarget, eventName, listener) {
helpers.unlisten(this, eventTarget, eventName, listener);
}
}