Skip to content

Commit 2e86900

Browse files
devin-ai-integration[bot]tjiang09
devin-ai-integration[bot]
and
tjiang09
committed
chore(routing): remove react-router-dom dependency
Co-Authored-By: [email protected] <[email protected]>
1 parent cb87cab commit 2e86900

File tree

60 files changed

+2183
-976
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+2183
-976
lines changed

‎package.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,6 @@
173173
"@types/react-beautiful-dnd": "^13.1.8",
174174
"@types/react-dom": "^18.3.0",
175175
"@types/react-measure": "^2.0.6",
176-
"@types/react-router-dom": "^5.1.3",
177176
"@types/sinon": "^7.5.1",
178177
"@types/webpack": "^4.41.3",
179178
"@typescript-eslint/eslint-plugin": "^7.3.1",
@@ -224,6 +223,7 @@
224223
"form-serialize": "^0.7.2",
225224
"formik": "^2.0.3",
226225
"highlight.js": "^11.10.0",
226+
"history": "^5.3.0",
227227
"husky": "^4.0.10",
228228
"ilib-tree-node": "^1.2.0",
229229
"immutable": "^3.7.4",
@@ -267,7 +267,6 @@
267267
"react-popper": "^1.3.4",
268268
"react-process-string": "^1.2.0",
269269
"react-responsive": "^10.0.0",
270-
"react-router-dom": "^5.3.4",
271270
"react-scrollbars-custom": "^4.0.21",
272271
"react-styleguidist": "^13.1.3",
273272
"react-tether": "^1.0.5",
@@ -341,7 +340,6 @@
341340
"react-popper": "^1.3.4",
342341
"react-process-string": "^1.2.0",
343342
"react-responsive": "^10.0.0",
344-
"react-router-dom": "5.3.4",
345343
"react-scrollbars-custom": "^4.0.21",
346344
"react-tether": "^1.0.5",
347345
"react-textarea-autosize": "^8.5.3",

‎src/components/link/stories/Link.stories.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import * as React from 'react';
2-
import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
3-
2+
import type { LinkProps } from '../../../elements/common/routing/flowTypes';
3+
import { Link as RouterLink } from '../../../elements/common/routing/Router';
44
import Link from '../Link';
5+
import CustomRouter from '../../../elements/common/routing/customRouter';
56
import notes from './Link.stories.md';
67

78
export const basic = () => <Link href="https://www.box.com/platform">A link</Link>;
89

910
export const withCustomComponent = () => {
1011
// You can pass a custom component to be used instead of the default "a" tag, like a React Router link:
11-
// import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
12+
// import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
1213

13-
const CustomRouterLink = ({ href, children, ...rest }: RouterLinkProps) => (
14+
const CustomRouterLink = ({ href, children, ...rest }: LinkProps) => (
1415
// @ts-ignore TODO: figure out why this is giving a TS error
1516
<RouterLink to={href} {...rest}>
1617
{children}
@@ -20,11 +21,11 @@ export const withCustomComponent = () => {
2021
return (
2122
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
2223
// @ts-ignore
23-
<Router>
24+
<CustomRouter>
2425
<Link component={CustomRouterLink} href="/">
2526
A link
2627
</Link>
27-
</Router>
28+
</CustomRouter>
2829
);
2930
};
3031

‎src/components/link/stories/LinkButton.stories.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import * as React from 'react';
2-
import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
2+
import type { LinkProps } from '../../../elements/common/routing/flowTypes';
3+
import { Link as RouterLink } from '../../../elements/common/routing/Router';
4+
import CustomRouter from '../../../elements/common/routing/customRouter';
35

46
import LinkButton from '../LinkButton';
57
import notes from './LinkButton.stories.md';
@@ -21,9 +23,9 @@ export const large = () => (
2123

2224
export const withCustomComponent = () => {
2325
// You can pass a custom component to be used instead of the default "a" tag, like a React Router link:
24-
// import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
26+
// import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
2527

26-
const CustomRouterLink = ({ href, children, ...rest }: RouterLinkProps) => (
28+
const CustomRouterLink = ({ href, children, ...rest }: LinkProps) => (
2729
// @ts-ignore TODO: figure out why this is giving a TS error
2830
<RouterLink to={href} {...rest}>
2931
{children}
@@ -33,11 +35,11 @@ export const withCustomComponent = () => {
3335
return (
3436
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
3537
// @ts-ignore
36-
<Router>
38+
<CustomRouter>
3739
<LinkButton href="/" component={CustomRouterLink}>
3840
A link
3941
</LinkButton>
40-
</Router>
42+
</CustomRouter>
4143
);
4244
};
4345

‎src/components/link/stories/LinkPrimaryButton.stories.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import * as React from 'react';
2-
import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
2+
import type { LinkProps } from '../../../elements/common/routing/flowTypes';
3+
import { Link as RouterLink } from '../../../elements/common/routing/Router';
4+
import CustomRouter from '../../../elements/common/routing/customRouter';
35

46
import LinkPrimaryButton from '../LinkPrimaryButton';
57
import notes from './LinkPrimaryButton.stories.md';
@@ -16,9 +18,9 @@ export const large = () => (
1618

1719
export const withCustomComponent = () => {
1820
// You can pass a custom component to be used instead of the default "a" tag, like a React Router link:
19-
// import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
21+
// import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
2022

21-
const CustomRouterLink = ({ href, children, ...rest }: RouterLinkProps) => (
23+
const CustomRouterLink = ({ href, children, ...rest }: LinkProps) => (
2224
// @ts-ignore TODO: figure out why this is giving a TS error
2325
<RouterLink to={href} {...rest}>
2426
{children}
@@ -28,11 +30,11 @@ export const withCustomComponent = () => {
2830
return (
2931
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
3032
// @ts-ignore
31-
<Router>
33+
<CustomRouter>
3234
<LinkPrimaryButton href="/" component={CustomRouterLink}>
3335
A link
3436
</LinkPrimaryButton>
35-
</Router>
37+
</CustomRouter>
3638
);
3739
};
3840

‎src/elements/common/annotator-context/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Location } from 'history';
2-
import { match } from 'react-router-dom';
2+
import type { Match } from '../routing/flowTypes';
33

44
export const CREATE = 'create';
55

@@ -39,7 +39,7 @@ export interface AnnotatorState {
3939
origin?: string;
4040
}
4141

42-
export type GetMatchPath = (location?: Location) => match<MatchParams> | null;
42+
export type GetMatchPath = (location?: Location) => Match | null;
4343

4444
export interface AnnotatorContext {
4545
emitActiveAnnotationChangeEvent?: (id: string) => void;

‎src/elements/common/annotator-context/withAnnotations.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import * as React from 'react';
2-
import getProp from 'lodash/get';
3-
import { generatePath, match as matchType, matchPath } from 'react-router-dom';
42
import { Location } from 'history';
3+
import getProp from 'lodash/get';
54
import AnnotatorContext from './AnnotatorContext';
6-
import { Action, Annotator, AnnotationActionEvent, AnnotatorState, GetMatchPath, MatchParams, Status } from './types';
5+
import type { Match } from '../routing/flowTypes';
6+
import { generatePath, matchPath } from '../routing/utils';
7+
import { Action, Annotator, AnnotationActionEvent, AnnotatorState, GetMatchPath, Status } from './types';
78

89
export type ActiveChangeEvent = {
910
annotationId: string | null;
@@ -192,9 +193,9 @@ export default function withAnnotations<P extends object>(
192193
});
193194
}
194195

195-
getMatchPath(location?: Location): matchType<MatchParams> | null {
196+
getMatchPath(location?: Location): Match | null {
196197
const pathname = getProp(location, 'pathname', '');
197-
return matchPath<MatchParams>(pathname, {
198+
return matchPath(pathname, {
198199
path: ANNOTATIONS_PATH,
199200
exact: true,
200201
});

‎src/elements/common/nav-button/BackButton.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,20 @@
77
import * as React from 'react';
88
import classNames from 'classnames';
99
import { FormattedMessage } from 'react-intl';
10-
import { Route, type Location } from 'react-router-dom';
10+
import CustomRoute from '../routing/customRoute';
11+
import type { Location } from '../routing/flowTypes';
1112
import IconNavigateLeft from '../../../icons/general/IconNavigateLeft';
1213
import messages from '../messages';
1314
import PlainButton from '../../../components/plain-button';
1415
import './BackButton.scss';
1516

16-
type Props = {
17+
type Props = {|
1718
className?: string,
1819
to?: Location,
19-
};
20+
|};
2021

2122
const BackButton = ({ className, to, ...rest }: Props) => (
22-
<Route>
23+
<CustomRoute>
2324
{({ history }) => (
2425
<PlainButton
2526
className={classNames('bdl-BackButton', className)}
@@ -33,7 +34,7 @@ const BackButton = ({ className, to, ...rest }: Props) => (
3334
</span>
3435
</PlainButton>
3536
)}
36-
</Route>
37+
</CustomRoute>
3738
);
3839

3940
export default BackButton;

‎src/elements/common/nav-button/NavButton.js‎

Lines changed: 68 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -6,75 +6,80 @@
66

77
import * as React from 'react';
88
import classNames from 'classnames';
9-
import { Route } from 'react-router-dom';
10-
import type { Match, Location } from 'react-router-dom';
9+
import { RouterContext } from '../routing/RouterContext';
10+
import { matchPath } from '../routing/utils';
1111
import PlainButton from '../../../components/plain-button';
1212
import { isLeftClick } from '../../../utils/dom';
1313

14-
type Props = {
15-
activeClassName?: string,
16-
children: React.Node,
17-
className?: string,
18-
component?: React.ComponentType<any>,
19-
exact?: boolean,
20-
isActive?: (match: Match, location: Location) => ?boolean,
21-
isDisabled?: boolean,
22-
onClick?: (event: SyntheticEvent<>) => void,
23-
replace?: boolean,
24-
strict?: boolean,
25-
to: string | Location,
26-
};
14+
const NavButton = React.forwardRef(
15+
(
16+
props: {
17+
activeClassName?: string,
18+
children: React.Node,
19+
className?: string,
20+
component?: React.ComponentType<any>,
21+
exact?: boolean,
22+
isActive?: (match: Object, location: Object) => ?boolean,
23+
isDisabled?: boolean,
24+
onClick?: (event: SyntheticEvent<>) => void,
25+
replace?: boolean,
26+
strict?: boolean,
27+
to: string | Object,
28+
},
29+
ref,
30+
) => {
31+
const {
32+
activeClassName = 'bdl-is-active',
33+
children,
34+
className = 'bdl-NavButton',
35+
component: Component = PlainButton,
36+
exact,
37+
isActive,
38+
isDisabled,
39+
onClick,
40+
replace,
41+
strict,
42+
to,
43+
...rest
44+
} = props;
2745

28-
const NavButton = React.forwardRef<Props, React.Ref<any>>((props: Props, ref: React.Ref<any>) => {
29-
const {
30-
activeClassName = 'bdl-is-active',
31-
children,
32-
className = 'bdl-NavButton',
33-
component: Component = PlainButton,
34-
exact,
35-
isActive,
36-
isDisabled,
37-
onClick,
38-
replace,
39-
strict,
40-
to,
41-
...rest
42-
} = props;
43-
const path = typeof to === 'object' ? to.pathname : to;
46+
const path = typeof to === 'object' ? to.pathname : to;
47+
const disabledClassName = 'bdl-is-disabled';
4448

45-
const disabledClassName = 'bdl-is-disabled';
49+
return (
50+
<RouterContext.Consumer>
51+
{({ history, location }) => {
52+
const match = matchPath(location.pathname, { path, exact, strict });
53+
const isActiveValue = !!(isActive ? isActive(match, location) : match);
54+
const handleClick = event => {
55+
if (onClick) {
56+
onClick(event);
57+
}
4658

47-
return (
48-
<Route exact={exact} path={path} strict={strict}>
49-
{({ history, location, match }) => {
50-
const isActiveValue = !!(isActive ? isActive(match, location) : match);
59+
if (!event.defaultPrevented && isLeftClick(event)) {
60+
const method = replace ? history.replace : history.push;
61+
method(to);
62+
}
63+
};
5164

52-
return (
53-
<Component
54-
className={classNames(className, {
55-
[activeClassName]: isActiveValue,
56-
[disabledClassName]: isDisabled,
57-
})}
58-
isDisabled={isDisabled}
59-
onClick={event => {
60-
if (onClick) {
61-
onClick(event);
62-
}
63-
64-
if (!event.defaultPrevented && isLeftClick(event)) {
65-
const method = replace ? history.replace : history.push;
66-
method(to);
67-
}
68-
}}
69-
ref={ref}
70-
{...rest}
71-
>
72-
{children}
73-
</Component>
74-
);
75-
}}
76-
</Route>
77-
);
78-
});
65+
return (
66+
<Component
67+
className={classNames(className, {
68+
[activeClassName]: isActiveValue,
69+
[disabledClassName]: isDisabled,
70+
})}
71+
isDisabled={isDisabled}
72+
onClick={handleClick}
73+
ref={ref}
74+
{...rest}
75+
>
76+
{children}
77+
</Component>
78+
);
79+
}}
80+
</RouterContext.Consumer>
81+
);
82+
},
83+
);
7984

8085
export default NavButton;

0 commit comments

Comments
 (0)