This repository has been archived by the owner on Mar 24, 2024. It is now read-only.
/
LayoutModal.tsx
70 lines (63 loc) · 2.2 KB
/
LayoutModal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/
//
// This file incorporates work covered by the following copyright and
// permission notice:
//
// Copyright 2019-2021 Cruise LLC
//
// This source code is licensed under the Apache License, Version 2.0,
// found at http://www.apache.org/licenses/LICENSE-2.0
// You may not use this file except in compliance with the License.
// @ts-expect-error BrowserHistory is not in @types/history v4 declarations
import { BrowserHistory } from "history";
import React, { useCallback } from "react";
import { connect } from "react-redux";
import { loadLayout } from "@foxglove-studio/app/actions/panels";
import ShareJsonModal from "@foxglove-studio/app/components/ShareJsonModal";
import renderToBody from "@foxglove-studio/app/components/renderToBody";
import { State } from "@foxglove-studio/app/reducers";
import { PanelsState } from "@foxglove-studio/app/reducers/panels";
type OwnProps = {
onRequestClose: () => void;
history?: BrowserHistory;
};
type Props = OwnProps & {
panels: PanelsState;
loadLayout: typeof loadLayout;
};
function UnconnectedLayoutModal({
onRequestClose,
loadLayout: loadFetchedLayout,
panels,
history,
}: Props) {
const onChange = useCallback(
(layoutPayload: PanelsState) => {
loadFetchedLayout(layoutPayload);
},
[loadFetchedLayout],
);
return (
<ShareJsonModal
history={history}
onRequestClose={onRequestClose}
value={panels}
onChange={onChange}
noun="layout"
/>
);
}
// TODO(JP): Use useSelector and useDispatch here, but unfortunately `loadLayout` needs
// a `getState` function in addition to `dispatch`, so needs a bit of rework.
// @ts-ignore look into errors for connect generic args
const LayoutModal = connect<Props, OwnProps, _, _, _, _>(
(state: State) => ({ panels: state.persistedState.panels }),
{ loadLayout },
)(UnconnectedLayoutModal);
export function openLayoutModal(history?: BrowserHistory) {
const modal = renderToBody(
<LayoutModal history={history} onRequestClose={() => modal.remove()} />,
);
}