1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | 'use strict';
|
12 |
|
13 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
14 |
|
15 | var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
16 |
|
17 | var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
18 |
|
19 | var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
20 |
|
21 | var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
|
22 |
|
23 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
24 |
|
25 | var React = require('react');
|
26 |
|
27 | var areEqual = require("fbjs/lib/areEqual");
|
28 |
|
29 | var buildReactRelayContainer = require('./buildReactRelayContainer');
|
30 |
|
31 | var getRootVariablesForFragments = require('./getRootVariablesForFragments');
|
32 |
|
33 | var _require = require('./ReactRelayContainerUtils'),
|
34 | getContainerName = _require.getContainerName;
|
35 |
|
36 | var _require2 = require('./RelayContext'),
|
37 | assertRelayContext = _require2.assertRelayContext;
|
38 |
|
39 | var _require3 = require('relay-runtime'),
|
40 | createFragmentSpecResolver = _require3.createFragmentSpecResolver,
|
41 | getDataIDsFromObject = _require3.getDataIDsFromObject,
|
42 | isScalarAndEqual = _require3.isScalarAndEqual;
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 | function createContainerWithFragments(Component, fragments) {
|
50 | var _class, _temp;
|
51 |
|
52 | var containerName = getContainerName(Component);
|
53 | return _temp = _class = function (_React$Component) {
|
54 | (0, _inheritsLoose2["default"])(_class, _React$Component);
|
55 |
|
56 | function _class(props) {
|
57 | var _this;
|
58 |
|
59 | _this = _React$Component.call(this, props) || this;
|
60 | (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleFragmentDataUpdate", function () {
|
61 | var resolverFromThisUpdate = _this.state.resolver;
|
62 |
|
63 | _this.setState(function (updatedState) {
|
64 | return (
|
65 |
|
66 | resolverFromThisUpdate === updatedState.resolver ? {
|
67 | data: updatedState.resolver.resolve(),
|
68 | relayProp: getRelayProp(updatedState.relayProp.environment)
|
69 | } : null
|
70 | );
|
71 | });
|
72 | });
|
73 | var relayContext = assertRelayContext(props.__relayContext);
|
74 |
|
75 |
|
76 |
|
77 |
|
78 | var resolver = createFragmentSpecResolver(relayContext, containerName, fragments, props);
|
79 | _this.state = {
|
80 | data: resolver.resolve(),
|
81 | prevProps: props,
|
82 | prevPropsContext: relayContext,
|
83 | relayProp: getRelayProp(relayContext.environment),
|
84 | resolver: resolver
|
85 | };
|
86 | return _this;
|
87 | }
|
88 | |
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 | _class.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
|
96 |
|
97 |
|
98 | var prevProps = prevState.prevProps;
|
99 | var relayContext = assertRelayContext(nextProps.__relayContext);
|
100 | var prevIDs = getDataIDsFromObject(fragments, prevProps);
|
101 | var nextIDs = getDataIDsFromObject(fragments, nextProps);
|
102 | var resolver = prevState.resolver;
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 | if (prevState.prevPropsContext.environment !== relayContext.environment || !areEqual(prevIDs, nextIDs)) {
|
109 |
|
110 |
|
111 |
|
112 |
|
113 | resolver = createFragmentSpecResolver(relayContext, containerName, fragments, nextProps);
|
114 | return {
|
115 | data: resolver.resolve(),
|
116 | prevPropsContext: relayContext,
|
117 | prevProps: nextProps,
|
118 | relayProp: getRelayProp(relayContext.environment),
|
119 | resolver: resolver
|
120 | };
|
121 | } else {
|
122 | resolver.setProps(nextProps);
|
123 | var data = resolver.resolve();
|
124 |
|
125 | if (data !== prevState.data) {
|
126 | return {
|
127 | data: data,
|
128 | prevProps: nextProps,
|
129 | prevPropsContext: relayContext,
|
130 | relayProp: getRelayProp(relayContext.environment)
|
131 | };
|
132 | }
|
133 | }
|
134 |
|
135 | return null;
|
136 | };
|
137 |
|
138 | var _proto = _class.prototype;
|
139 |
|
140 | _proto.componentDidMount = function componentDidMount() {
|
141 | this._subscribeToNewResolver();
|
142 |
|
143 | this._rerenderIfStoreHasChanged();
|
144 | };
|
145 |
|
146 | _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
|
147 | if (this.state.resolver !== prevState.resolver) {
|
148 | prevState.resolver.dispose();
|
149 |
|
150 | this._subscribeToNewResolver();
|
151 | }
|
152 |
|
153 | this._rerenderIfStoreHasChanged();
|
154 | };
|
155 |
|
156 | _proto.componentWillUnmount = function componentWillUnmount() {
|
157 | this.state.resolver.dispose();
|
158 | };
|
159 |
|
160 | _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
|
161 |
|
162 | if (nextState.data !== this.state.data) {
|
163 | return true;
|
164 | }
|
165 |
|
166 |
|
167 |
|
168 | var keys = Object.keys(nextProps);
|
169 |
|
170 | for (var ii = 0; ii < keys.length; ii++) {
|
171 | var _key = keys[ii];
|
172 |
|
173 | if (_key === '__relayContext') {
|
174 | if (nextState.prevPropsContext.environment !== this.state.prevPropsContext.environment) {
|
175 | return true;
|
176 | }
|
177 | } else {
|
178 | if (!fragments.hasOwnProperty(_key) && !isScalarAndEqual(nextProps[_key], this.props[_key])) {
|
179 | return true;
|
180 | }
|
181 | }
|
182 | }
|
183 |
|
184 | return false;
|
185 | }
|
186 | |
187 |
|
188 |
|
189 | ;
|
190 |
|
191 | _proto._rerenderIfStoreHasChanged = function _rerenderIfStoreHasChanged() {
|
192 | var _this$state = this.state,
|
193 | data = _this$state.data,
|
194 | resolver = _this$state.resolver;
|
195 |
|
196 |
|
197 | var maybeNewData = resolver.resolve();
|
198 |
|
199 | if (data !== maybeNewData) {
|
200 | this.setState({
|
201 | data: maybeNewData
|
202 | });
|
203 | }
|
204 | };
|
205 |
|
206 | _proto._subscribeToNewResolver = function _subscribeToNewResolver() {
|
207 | var resolver = this.state.resolver;
|
208 |
|
209 |
|
210 | resolver.setCallback(this._handleFragmentDataUpdate);
|
211 | };
|
212 |
|
213 | _proto.render = function render() {
|
214 | var _this$props = this.props,
|
215 | componentRef = _this$props.componentRef,
|
216 | _ = _this$props.__relayContext,
|
217 | props = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["componentRef", "__relayContext"]);
|
218 | return React.createElement(Component, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), this.state.data), {}, {
|
219 | ref: componentRef,
|
220 | relay: this.state.relayProp
|
221 | }));
|
222 | };
|
223 |
|
224 | return _class;
|
225 | }(React.Component), (0, _defineProperty2["default"])(_class, "displayName", containerName), _temp;
|
226 | }
|
227 |
|
228 | function getRelayProp(environment) {
|
229 | return {
|
230 | environment: environment
|
231 | };
|
232 | }
|
233 |
|
234 |
|
235 |
|
236 |
|
237 |
|
238 |
|
239 |
|
240 |
|
241 |
|
242 | function createContainer(Component, fragmentSpec) {
|
243 |
|
244 | return buildReactRelayContainer(Component, fragmentSpec, createContainerWithFragments);
|
245 | }
|
246 |
|
247 | module.exports = {
|
248 | createContainer: createContainer
|
249 | }; |
\ | No newline at end of file |