Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Fix types related to history State #8601

Merged
merged 2 commits into from Jan 21, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions contributors.yml
Expand Up @@ -28,3 +28,4 @@
- turansky
- underager
- vijaypushkin
- bhbs
51 changes: 23 additions & 28 deletions docs/api.md
Expand Up @@ -310,7 +310,7 @@ interface LinkProps extends TouchableHighlightProps {
children?: React.ReactNode;
onPress?(event: GestureResponderEvent): void;
replace?: boolean;
state?: State;
state?: any;
to: To;
}
```
Comment on lines 310 to 316
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

export interface LinkProps
extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
reloadDocument?: boolean;
replace?: boolean;
state?: any;
to: To;
}

Expand Down Expand Up @@ -475,7 +475,7 @@ declare function Navigate(props: NavigateProps): null;
interface NavigateProps {
to: To;
replace?: boolean;
state?: State;
state?: any;
}
```
Comment on lines 475 to 480
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

export interface NavigateProps {
to: To;
replace?: boolean;
state?: any;
}


Expand Down Expand Up @@ -831,7 +831,7 @@ The term "location" in React Router refers to [the `Location` interface](https:/
>
> The `history` package is React Router's only dependency and many of the
> core types in React Router come directly from that library including
> `Location`, `To`, `Path`, `State`, and others. You can read more about
> `Location`, `To`, `Path`, and others. You can read more about
> the history library in [its documentation](https://github.com/remix-run/history/tree/main/docs).

### `matchRoutes`
Expand Down Expand Up @@ -957,15 +957,12 @@ The `useHref` hook returns a URL that may be used to link to the given `to` loca
<summary>Type declaration</summary>

```tsx
declare function useLinkClickHandler<
E extends Element = HTMLAnchorElement,
S extends State = State
>(
declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
to: To,
options?: {
target?: React.HTMLAttributeAnchorTarget;
replace?: boolean;
state?: S;
state?: any;
}
): (event: React.MouseEvent<E, MouseEvent>) => void;
```
Comment on lines 959 to 968
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
to: To,
{
target,
replace: replaceProp,
state
}: {
target?: React.HTMLAttributeAnchorTarget;
replace?: boolean;
state?: any;
} = {}
): (event: React.MouseEvent<E, MouseEvent>) => void {
let navigate = useNavigate();
let location = useLocation();
let path = useResolvedPath(to);
return React.useCallback(
(event: React.MouseEvent<E, MouseEvent>) => {
if (
event.button === 0 && // Ignore everything but left clicks
(!target || target === "_self") && // Let browser handle "target=_blank" etc.
!isModifiedEvent(event) // Ignore clicks with modifier keys
) {
event.preventDefault();
// If the URL hasn't changed, a regular <a> will do a replace instead of
// a push, so do the same here.
let replace =
!!replaceProp || createPath(location) === createPath(path);
navigate(to, { replace, state });
}
},
[location, navigate, path, replaceProp, state, target, to]
);
}

Expand Down Expand Up @@ -1025,13 +1022,11 @@ const Link = React.forwardRef(
<summary>Type declaration</summary>

```tsx
declare function useLinkPressHandler<
S extends State = State
>(
declare function useLinkPressHandler(
to: To,
options?: {
replace?: boolean;
state?: S;
state?: any;
}
): (event: GestureResponderEvent) => void;
```
Comment on lines 1024 to 1032
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

export function useLinkPressHandler(
to: To,
{
replace,
state
}: {
replace?: boolean;
state?: any;
} = {}
): (event: GestureResponderEvent) => void {
let navigate = useNavigate();
return function handlePress() {
navigate(to, { replace, state });
};
}

Expand Down Expand Up @@ -1091,9 +1086,8 @@ The `useInRouterContext` hooks returns `true` if the component is being rendered
```tsx
declare function useLocation(): Location;

interface Location<S extends State = object | null>
extends Path {
state: S;
interface Location extends Path {
state: unknown;
key: Key;
}
```
Comment on lines 1086 to 1093
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expand Down Expand Up @@ -1315,7 +1309,7 @@ function App() {
```tsx
declare function useSearchParams(
defaultInit?: URLSearchParamsInit
): [URLSearchParams, URLSearchParamsSetter];
): [URLSearchParams, SetURLSearchParams];

type ParamKeyValuePair = [string, string];

Expand All @@ -1325,12 +1319,10 @@ type URLSearchParamsInit =
| Record<string, string | string[]>
| URLSearchParams;

interface URLSearchParamsSetter {
(
nextInit: URLSearchParamsInit,
navigateOptions?: { replace?: boolean; state?: State }
): void;
}
type SetURLSearchParams = (
nextInit?: URLSearchParamsInit,
navigateOpts?: : { replace?: boolean; state?: any }
) => void;
```
Comment on lines -1328 to 1326
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

export function useSearchParams(defaultInit?: URLSearchParamsInit) {
warning(
typeof URLSearchParams !== "undefined",
`You cannot use the \`useSearchParams\` hook in a browser that does not ` +
`support the URLSearchParams API. If you need to support Internet ` +
`Explorer 11, we recommend you load a polyfill such as ` +
`https://github.com/ungap/url-search-params\n\n` +
`If you're unsure how to load polyfills, we recommend you check out ` +
`https://polyfill.io/v3/ which provides some recommendations about how ` +
`to load polyfills only for users that need them, instead of for every ` +
`user.`
);
let defaultSearchParamsRef = React.useRef(createSearchParams(defaultInit));
let location = useLocation();
let searchParams = React.useMemo(() => {
let searchParams = createSearchParams(location.search);
for (let key of defaultSearchParamsRef.current.keys()) {
if (!searchParams.has(key)) {
defaultSearchParamsRef.current.getAll(key).forEach(value => {
searchParams.append(key, value);
});
}
}
return searchParams;
}, [location.search]);
let navigate = useNavigate();
let setSearchParams = React.useCallback(
(
nextInit: URLSearchParamsInit,
navigateOptions?: { replace?: boolean; state?: any }
) => {
navigate("?" + createSearchParams(nextInit), navigateOptions);
},
[navigate]
);
return [searchParams, setSearchParams] as const;
}


</details>
Expand Down Expand Up @@ -1381,7 +1373,7 @@ function App() {
```tsx
declare function useSearchParams(
defaultInit?: URLSearchParamsInit
): [URLSearchParams, URLSearchParamsSetter];
): [URLSearchParams, SetURLSearchParams];

type ParamKeyValuePair = [string, string];

Expand All @@ -1391,11 +1383,14 @@ type URLSearchParamsInit =
| Record<string, string | string[]>
| URLSearchParams;

interface URLSearchParamsSetter {
(
nextInit: URLSearchParamsInit,
navigateOptions?: { replace?: boolean; state?: State }
): void;
type SetURLSearchParams = (
nextInit?: URLSearchParamsInit,
navigateOpts?: : NavigateOptions
) => void;

interface NavigateOptions {
replace?: boolean;
state?: any;
}
```
Comment on lines -1394 to 1395
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

export function useSearchParams(
defaultInit?: URLSearchParamsInit
): [URLSearchParams, SetURLSearchParams] {
let defaultSearchParamsRef = React.useRef(createSearchParams(defaultInit));
let location = useLocation();
let searchParams = React.useMemo(() => {
let searchParams = createSearchParams(location.search);
for (let key of defaultSearchParamsRef.current.keys()) {
if (!searchParams.has(key)) {
defaultSearchParamsRef.current.getAll(key).forEach(value => {
searchParams.append(key, value);
});
}
}
return searchParams;
}, [location.search]);
let navigate = useNavigate();
let setSearchParams: SetURLSearchParams = React.useCallback(
(nextInit, navigateOpts) => {
navigate("?" + createSearchParams(nextInit), navigateOpts);
},
[navigate]
);
return [searchParams, setSearchParams];
}


Expand Down