>,
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/components/link.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import type { Node } from 'react';
3 | import type { Href, Location } from '../types';
4 |
5 | import React, { Component } from 'react';
6 | import { connect } from 'react-redux';
7 | import PropTypes from 'prop-types';
8 |
9 | import { push as pushAction, replace as replaceAction } from '../actions';
10 | import mergeQueries from '../util/merge-queries';
11 | import normalizeHref from '../util/normalize-href';
12 | import stringifyHref from '../util/stringify-href';
13 |
14 | type Props = {
15 | children: Node,
16 | className: string,
17 | href: Href,
18 | persistQuery: boolean,
19 | replaceState: boolean,
20 | target: string,
21 | onClick: EventHandler,
22 | style: Object,
23 | location: Location,
24 | push: typeof pushAction,
25 | replace: typeof replaceAction,
26 | // TODO: replace with recursive Props definition
27 | // https://github.com/yannickcr/eslint-plugin-react/issues/913
28 | activeProps: Object
29 | };
30 |
31 | const LEFT_MOUSE_BUTTON = 0;
32 |
33 | const isNotLeftClick = e => e.button && e.button !== LEFT_MOUSE_BUTTON;
34 |
35 | const hasModifier = e =>
36 | Boolean(e.shiftKey || e.altKey || e.metaKey || e.ctrlKey);
37 |
38 | const shouldIgnoreClick = ({ e, target }) =>
39 | hasModifier(e) || isNotLeftClick(e) || e.defaultPrevented || target;
40 |
41 | const handleClick = ({
42 | e,
43 | target,
44 | href,
45 | onClick,
46 | replaceState,
47 | persistQuery,
48 | push,
49 | replace
50 | }) => {
51 | if (onClick) {
52 | onClick(e);
53 | }
54 |
55 | if (shouldIgnoreClick({ e, target })) {
56 | return;
57 | }
58 |
59 | e.preventDefault();
60 |
61 | const navigate = replaceState ? replace : push;
62 | navigate(href, { persistQuery });
63 | };
64 |
65 | // When persisting queries, we need to merge the persisted
66 | // query with the link's new query.
67 | const contextifyHref = (href, location, persistQuery) => {
68 | if (!persistQuery) {
69 | return href;
70 | }
71 |
72 | const mergedQuery = mergeQueries(location.query, href.query);
73 |
74 | return {
75 | ...href,
76 | ...mergedQuery
77 | };
78 | };
79 |
80 | class LinkComponent extends Component<*> {
81 | constructor(props: Props) {
82 | super(props);
83 | }
84 |
85 | render() {
86 | const {
87 | href: rawHref,
88 | location,
89 | children,
90 | onClick,
91 | target,
92 | activeProps,
93 | replaceState,
94 | persistQuery,
95 | push,
96 | replace,
97 | ...rest
98 | } = this.props;
99 |
100 | // Ensure the href has both a search and a query when needed
101 | const normalizedHref = normalizeHref(rawHref);
102 | const href = contextifyHref(normalizedHref, location, persistQuery);
103 | const isActive = href.pathname === location.pathname;
104 | const activeRest = (isActive && activeProps) || {};
105 |
106 | const clickHandler = e =>
107 | handleClick({
108 | e,
109 | target,
110 | href,
111 | onClick,
112 | replaceState,
113 | persistQuery,
114 | push,
115 | replace
116 | });
117 |
118 | return (
119 |
126 | {children}
127 |
128 | );
129 | }
130 | }
131 |
132 | const PersistentQueryLinkComponent = class extends Component<*> {
133 | render() {
134 | const { children, ...rest } = this.props;
135 | return (
136 |
137 | {children}
138 |
139 | );
140 | }
141 | };
142 |
143 | PersistentQueryLinkComponent.propTypes = {
144 | children: PropTypes.node
145 | };
146 |
147 | const mapStateToProps = state => ({ location: state.router });
148 | const mapDispatchToProps = {
149 | push: pushAction,
150 | replace: replaceAction
151 | };
152 | const withLocation = connect(mapStateToProps, mapDispatchToProps);
153 |
154 | const LinkWithLocation = withLocation(LinkComponent);
155 | const PersistentQueryLinkWithLocation = withLocation(
156 | PersistentQueryLinkComponent
157 | );
158 |
159 | export {
160 | LinkWithLocation as Link,
161 | PersistentQueryLinkWithLocation as PersistentQueryLink,
162 | LinkComponent,
163 | PersistentQueryLinkComponent,
164 | mapDispatchToProps
165 | };
166 |
--------------------------------------------------------------------------------