>,
52 | getWrappedInstance(): React$Component,
53 | props: OP,
54 | state: void
55 | }
56 |
57 | declare type ConnectedComponentWithDefaultPropsClass = Class<
58 | ConnectedComponentWithDefaultProps
59 | >;
60 |
61 | declare type ConnectedComponentClass = Class<
62 | ConnectedComponent
63 | >;
64 |
65 | declare type Connector = ((
66 | component: ComponentWithDefaultProps
67 | ) => ConnectedComponentWithDefaultPropsClass) &
68 | ((component: React$ComponentType) => ConnectedComponentClass);
69 |
70 | declare class Provider extends React$Component<{
71 | store: Store,
72 | children?: any
73 | }> {}
74 |
75 | declare function createProvider(
76 | storeKey?: string,
77 | subKey?: string
78 | ): Provider<*, *>;
79 |
80 | declare type ConnectOptions = {
81 | pure?: boolean,
82 | withRef?: boolean
83 | };
84 |
85 | declare type Null = null | void;
86 |
87 | declare function connect(
88 | ...rest: Array // <= workaround for https://github.com/facebook/flow/issues/2360
89 | ): Connector } & OP>>;
90 |
91 | declare function connect(
92 | mapStateToProps: Null,
93 | mapDispatchToProps: Null,
94 | mergeProps: Null,
95 | options: ConnectOptions
96 | ): Connector } & OP>>;
97 |
98 | declare function connect(
99 | mapStateToProps: MapStateToProps,
100 | mapDispatchToProps: Null,
101 | mergeProps: Null,
102 | options?: ConnectOptions
103 | ): Connector } & OP>>;
104 |
105 | declare function connect(
106 | mapStateToProps: Null,
107 | mapDispatchToProps: MapDispatchToProps,
108 | mergeProps: Null,
109 | options?: ConnectOptions
110 | ): Connector>;
111 |
112 | declare function connect(
113 | mapStateToProps: MapStateToProps,
114 | mapDispatchToProps: MapDispatchToProps,
115 | mergeProps: Null,
116 | options?: ConnectOptions
117 | ): Connector>;
118 |
119 | declare function connect(
120 | mapStateToProps: MapStateToProps,
121 | mapDispatchToProps: Null,
122 | mergeProps: MergeProps,
123 | options?: ConnectOptions
124 | ): Connector;
125 |
126 | declare function connect(
127 | mapStateToProps: MapStateToProps,
128 | mapDispatchToProps: MapDispatchToProps,
129 | mergeProps: MergeProps,
130 | options?: ConnectOptions
131 | ): Connector;
132 | }
133 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React, { Component, type Node } from 'react';
3 | import { type Store } from 'redux';
4 | import { Provider } from 'react-redux';
5 |
6 | // this component freezes redux state for its children when `cold` is true
7 | // after every render, it saves a snapshot of the last used redux state
8 | // it also replacies the redux store with a 'proxy' store, which, when cold
9 | // - no-ops all action dispatches
10 | // - returns state from the snapshot
11 | class Freeze extends Component<{ cold: boolean, children: Node }> {
12 | context: {
13 | store: Store,
14 | };
15 | static contextTypes = {
16 | store: x => null,
17 | };
18 | // our proxy store
19 | store = {
20 | getState: () => {
21 | if (this.props.cold) {
22 | return this.snapshot;
23 | }
24 | return this.context.store.getState();
25 | },
26 | dispatch: action => {
27 | if (!this.props.cold) {
28 | this.context.store.dispatch(action);
29 | }
30 | },
31 | subscribe: listener => {
32 | return this.context.store.subscribe(() => {
33 | if (!this.props.cold) {
34 | listener();
35 | }
36 | });
37 | },
38 | replaceReducer: next => {
39 | // should this be a no-op too?
40 | return this.context.store.replaceReducer(next);
41 | },
42 | };
43 |
44 | snapshot = this.context.store && this.context.store.getState();
45 |
46 | componentDidUpdate() {
47 | if (this.context.store && !this.props.cold) {
48 | this.snapshot = this.context.store.getState();
49 | }
50 | }
51 |
52 | render() {
53 | return {this.props.children};
54 | }
55 | }
56 |
57 | class Iterator extends React.Component<{
58 | generator: ?() => AsyncGenerator<*, *, *>,
59 | onAction: any => void,
60 | onDone: ?() => void,
61 | }> {
62 | done: boolean = false;
63 | unmounted: boolean = false;
64 | iterator: ?AsyncGenerator<*, *, *>;
65 |
66 | async componentDidMount() {
67 | if (this.props.generator) {
68 | const iterator = (this.iterator = this.props.generator());
69 | for await (const action of iterator) {
70 | if (this.unmounted) {
71 | break;
72 | }
73 | this.props.onAction(action);
74 | }
75 | }
76 | if (!this.unmounted) {
77 | this.done = true;
78 | this.props.onDone && this.props.onDone();
79 | }
80 | }
81 |
82 | componentWillUnmount() {
83 | this.unmounted = true;
84 | const { iterator } = this;
85 | if (iterator && !this.done) {
86 | iterator.next(true);
87 | iterator.return(true);
88 | }
89 | }
90 |
91 | render() {
92 | return null;
93 | }
94 | }
95 |
96 | const FrameState = React.createContext(null);
97 |
98 | class Frame extends React.Component<
99 | {
100 | children: Node,
101 | onEnter: ?() => AsyncGenerator<*, *, *>,
102 | onExit: ?() => AsyncGenerator<*, *, *>,
103 | exiting: boolean,
104 | reduce: (any, any) => any,
105 | onExited: () => void,
106 | },
107 | { store: any },
108 | > {
109 | state = { store: null };
110 |
111 | reduce = action =>
112 | this.setState(x => ({ store: this.props.reduce(x.store, action) }));
113 |
114 | render() {
115 | return (
116 |
117 |
125 | {this.props.children}
126 |
127 | );
128 | }
129 | }
130 |
131 | // ok, so. the basic idea here is to abtract out the logic that's
132 | // recreated by hand every time - maintain state for multiple components 'in flight'
133 | // during a transition, and render them. we recommend you use some
134 | // form of a 'stretchy' around your content, usally with style
135 | // `{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }`
136 | // or a flex version
137 | // `{ flex: 1, alignSelf: stretch }`
138 | // and position them during the transitions
139 | // AsyncGenerator<*, *, *>,
150 | onExit?: () => AsyncGenerator<*, *, *>,
151 | reduce?: (any, any) => any,
152 | };
153 |
154 | type TransitionState = {
155 | stack: Array,
156 | };
157 |
158 | export default class Transition extends Component<
159 | TransitionProps,
160 | TransitionState,
161 | > {
162 | state = { stack: [this.props] };
163 |
164 | static Consumer = FrameState.Consumer; // todo - we want a consumer with (state, setState) => ...
165 |
166 | static getDerivedStateFromProps(
167 | nextProps: TransitionProps,
168 | prevState: TransitionState,
169 | ): TransitionState {
170 | return {
171 | stack: [nextProps, ...prevState.stack.filter(x => x.id !== nextProps.id)],
172 | };
173 | }
174 |
175 | render(): Node {
176 | return this.state.stack.map(
177 | ({ id, children, onEnter, onExit, reduce }, i) => (
178 |
179 | y)}
181 | exiting={i !== 0}
182 | onEnter={onEnter}
183 | onExit={onExit}
184 | onExited={() =>
185 | this.setState(prevState => ({
186 | stack: prevState.stack.filter(x => x.id !== id),
187 | }))
188 | }
189 | >
190 | {children}
191 |
192 |
193 | ),
194 | );
195 | }
196 | }
197 |
--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _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; };
8 |
9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10 |
11 | var _react = require('react');
12 |
13 | var _react2 = _interopRequireDefault(_react);
14 |
15 | require('redux');
16 |
17 | var _reactRedux = require('react-redux');
18 |
19 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20 |
21 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
22 |
23 | function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
24 |
25 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
26 |
27 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
28 |
29 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
30 |
31 | // this component freezes redux state for its children when `cold` is true
32 | // after every render, it saves a snapshot of the last used redux state
33 | // it also replacies the redux store with a 'proxy' store, which, when cold
34 | // - no-ops all action dispatches
35 | // - returns state from the snapshot
36 | var Freeze = function (_Component) {
37 | _inherits(Freeze, _Component);
38 |
39 | function Freeze() {
40 | var _ref;
41 |
42 | var _temp, _this, _ret;
43 |
44 | _classCallCheck(this, Freeze);
45 |
46 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
47 | args[_key] = arguments[_key];
48 | }
49 |
50 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Freeze.__proto__ || Object.getPrototypeOf(Freeze)).call.apply(_ref, [this].concat(args))), _this), _this.store = {
51 | getState: function getState() {
52 | if (_this.props.cold) {
53 | return _this.snapshot;
54 | }
55 | return _this.context.store.getState();
56 | },
57 | dispatch: function dispatch(action) {
58 | if (!_this.props.cold) {
59 | _this.context.store.dispatch(action);
60 | }
61 | },
62 | subscribe: function subscribe(listener) {
63 | return _this.context.store.subscribe(function () {
64 | if (!_this.props.cold) {
65 | listener();
66 | }
67 | });
68 | },
69 | replaceReducer: function replaceReducer(next) {
70 | // should this be a no-op too?
71 | return _this.context.store.replaceReducer(next);
72 | }
73 | }, _this.snapshot = _this.context.store && _this.context.store.getState(), _temp), _possibleConstructorReturn(_this, _ret);
74 | }
75 | // our proxy store
76 |
77 |
78 | _createClass(Freeze, [{
79 | key: 'componentDidUpdate',
80 | value: function componentDidUpdate() {
81 | if (this.context.store && !this.props.cold) {
82 | this.snapshot = this.context.store.getState();
83 | }
84 | }
85 | }, {
86 | key: 'render',
87 | value: function render() {
88 | return _react2.default.createElement(
89 | _reactRedux.Provider,
90 | { store: this.store },
91 | this.props.children
92 | );
93 | }
94 | }]);
95 |
96 | return Freeze;
97 | }(_react.Component);
98 |
99 | Freeze.contextTypes = {
100 | store: function store(x) {
101 | return null;
102 | }
103 | };
104 |
105 | var Transition = function (_Component2) {
106 | _inherits(Transition, _Component2);
107 |
108 | function Transition() {
109 | var _ref2,
110 | _this3 = this;
111 |
112 | var _temp2, _this2, _ret2;
113 |
114 | _classCallCheck(this, Transition);
115 |
116 | for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
117 | args[_key2] = arguments[_key2];
118 | }
119 |
120 | return _ret2 = (_temp2 = (_this2 = _possibleConstructorReturn(this, (_ref2 = Transition.__proto__ || Object.getPrototypeOf(Transition)).call.apply(_ref2, [this].concat(args))), _this2), _this2.entering = {}, _this2.exiting = {}, _this2.createExitRef = function (id) {
121 | return function (ele) {
122 | var found = ele && _this2.state.stack.find(function (x) {
123 | return x.id === id;
124 | });
125 | if (found) {
126 | _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
127 | var token;
128 | return regeneratorRuntime.wrap(function _callee$(_context) {
129 | while (1) {
130 | switch (_context.prev = _context.next) {
131 | case 0:
132 | if (_this2.entering[id]) {
133 | _this2.entering[id] = null;
134 | }
135 | token = _this2.exiting[id] = {};
136 |
137 | if (!found.onExit) {
138 | _context.next = 5;
139 | break;
140 | }
141 |
142 | _context.next = 5;
143 | return found.onExit(id, function () {
144 | return _this2.exiting[id] !== token;
145 | });
146 |
147 | case 5:
148 |
149 | if (_this2.exiting[id] === token) {
150 | delete _this2.exiting[id];
151 | _this2.setState({
152 | stack: _this2.state.stack.filter(function (x) {
153 | return x !== found;
154 | })
155 | });
156 | }
157 |
158 | case 6:
159 | case 'end':
160 | return _context.stop();
161 | }
162 | }
163 | }, _callee, _this3);
164 | }))();
165 | }
166 | };
167 | }, _this2.createEnterRef = function (id) {
168 | return function (ele) {
169 | var found = ele && _this2.state.stack.find(function (x) {
170 | return x.id === id;
171 | });
172 | if (found) {
173 | _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
174 | var token;
175 | return regeneratorRuntime.wrap(function _callee2$(_context2) {
176 | while (1) {
177 | switch (_context2.prev = _context2.next) {
178 | case 0:
179 | if (_this2.exiting[id]) {
180 | _this2.exiting[id] = null;
181 | }
182 | token = _this2.entering[id] = {};
183 |
184 | if (!found.onEnter) {
185 | _context2.next = 5;
186 | break;
187 | }
188 |
189 | _context2.next = 5;
190 | return found.onEnter(id, function () {
191 | return _this2.entering[id] !== token;
192 | });
193 |
194 | case 5:
195 |
196 | if (_this2.entering[id] === token) {
197 | delete _this2.entering[id];
198 | }
199 |
200 | case 6:
201 | case 'end':
202 | return _context2.stop();
203 | }
204 | }
205 | }, _callee2, _this3);
206 | }))();
207 | }
208 | };
209 | }, _this2.state = {
210 | stack: [{
211 | id: _this2.props.id,
212 | children: _this2.props.children,
213 | onExit: _this2.props.onExit,
214 | onEnter: _this2.props.onEnter,
215 | exitRef: _this2.createExitRef(_this2.props.id),
216 | enterRef: _this2.createEnterRef(_this2.props.id)
217 | }]
218 | }, _temp2), _possibleConstructorReturn(_this2, _ret2);
219 | }
220 |
221 | _createClass(Transition, [{
222 | key: 'componentWillReceiveProps',
223 | value: function componentWillReceiveProps(newProps) {
224 | var found = void 0;
225 | // todo - shallow equal test to prevent a render
226 |
227 | if (newProps.id === this.state.stack[0].id) {
228 | this.setState({
229 | stack: [_extends({}, this.state.stack[0], newProps)].concat(_toConsumableArray(this.state.stack.slice(1)))
230 | });
231 | } else if (found = this.state.stack.find(function (x) {
232 | return x.id === newProps.id;
233 | })) {
234 | this.setState({
235 | stack: [_extends({}, found, {
236 | exitRef: this.createExitRef(newProps.id),
237 | enterRef: this.createEnterRef(newProps.id)
238 | })].concat(_toConsumableArray(this.state.stack.filter(function (x) {
239 | return x !== found;
240 | })))
241 | });
242 | } else {
243 | this.setState({
244 | stack: [_extends({
245 | exitRef: this.createExitRef(newProps.id),
246 | enterRef: this.createEnterRef(newProps.id)
247 | }, newProps)].concat(_toConsumableArray(this.state.stack))
248 | });
249 | }
250 | }
251 | }, {
252 | key: 'render',
253 | value: function render() {
254 | return _react2.default.createElement(
255 | _react.Fragment,
256 | null,
257 | this.state.stack.map(function (_ref5, i) {
258 | var id = _ref5.id,
259 | children = _ref5.children,
260 | enterRef = _ref5.enterRef,
261 | exitRef = _ref5.exitRef;
262 | return _react2.default.createElement(
263 | Freeze,
264 | { key: id, cold: i !== 0, ref: i !== 0 ? exitRef : enterRef },
265 | children
266 | );
267 | })
268 | );
269 | }
270 | }]);
271 |
272 | return Transition;
273 | }(_react.Component);
274 |
275 | // class ReactTransitionChild extends React.Component<{}, {
276 | // transition: 'entering' | 'entered' | 'exiting' | 'exited'
277 | // }>{
278 | // state = {
279 | // transition: ''
280 | // }
281 | // render(){
282 | // const {onEnter, onExit, }
283 | // return
291 | // }
292 | // }
293 |
294 | //
295 | // ## TransitionGroup
296 | //
297 | // ```jsx
298 | // ...}
300 | // onExit={async id => ...}
301 | // onMove={async id => ...}
302 | // >
303 | //
304 | //
305 | //
306 | //
307 | //
308 | // ```
309 |
310 |
311 | exports.default = Transition;
--------------------------------------------------------------------------------