Skip to content

Commit 258607a

Browse files
darkcldarkcl
committedAug 1, 2019
feat(modal): add modal
1 parent 7486f92 commit 258607a

File tree

9 files changed

+171
-24
lines changed

9 files changed

+171
-24
lines changed
 

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"editor.formatOnSave": true
3+
}

‎ui/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"@atlaskit/global-navigation": "^7.3.6",
3131
"@atlaskit/icon": "^19.0.1",
3232
"@atlaskit/inline-dialog": "^12.0.10",
33+
"@atlaskit/modal-dialog": "^10.1.1",
3334
"@atlaskit/navigation-next": "^6.3.8",
3435
"@atlaskit/spinner": "^12.0.5",
3536
"@atlaskit/theme": "^9.1.2",

‎ui/src/components/ContainerNavigation.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ export const ContainerNavigation = () => {
4343
<Item
4444
text={val.name}
4545
onClick={() => {
46-
console.log("click on file");
4746
folder.open(val.path);
4847
setTimeout(() => {
4948
editorDispatch({

‎ui/src/components/Modal.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from "react";
2+
import ModalDialog from "@atlaskit/modal-dialog";
3+
import { ModalTransition } from "@atlaskit/modal-dialog";
4+
import { ModalStore } from "../store";
5+
import { ModalType, ModalActions } from "../store/ModalStore";
6+
7+
export const Modal: React.FunctionComponent = () => {
8+
const modalState = React.useContext(ModalStore.State);
9+
const modalDispatch = React.useContext(ModalStore.Dispatch);
10+
11+
const close = () => {
12+
modalDispatch({
13+
type: ModalActions.DISMISS
14+
});
15+
};
16+
17+
const actions = [
18+
{ text: "Close", onClick: close },
19+
{ text: "Secondary Action", onClick: this.secondaryAction }
20+
];
21+
22+
return (
23+
<ModalTransition>
24+
{modalState.modalType !== ModalType.None && (
25+
<ModalDialog actions={actions} onClose={close} heading="Modal Title">
26+
<p>Hello file picker</p>
27+
</ModalDialog>
28+
)}
29+
</ModalTransition>
30+
);
31+
};

‎ui/src/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import "@atlaskit/css-reset/dist/bundle.css";
66

77
import App from "./page/App";
88
import { Store } from "./store";
9+
import { Modal } from "./components/Modal";
910

1011
declare var external;
1112
declare var folder;
@@ -14,6 +15,7 @@ const render = () =>
1415
ReactDOM.render(
1516
<Store>
1617
<App />
18+
<Modal />
1719
</Store>,
1820
document.getElementById("root")
1921
);

‎ui/src/page/App.tsx

+24-18
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,11 @@ import GlobalNavigation from "@atlaskit/global-navigation";
1313
import { EditorPage } from "./EditorPage";
1414
import { ProductNavigation } from "../components/ProductNavigation";
1515
import { ContainerNavigation } from "../components/ContainerNavigation";
16-
import { EditorStore } from "../store";
16+
import { EditorStore, ModalStore } from "../store";
1717
import { EditorActions } from "../store/EditorStore";
1818
import { NavigationStore } from "../store/NavigationStore";
1919
import { EmptyPage } from "../components/EmptyPage";
20+
import { ModalActions } from "../store/ModalStore";
2021

2122
declare var folder;
2223

@@ -29,23 +30,28 @@ const AppSwitcherComponent = props => (
2930
/>
3031
);
3132

32-
const Global = () => (
33-
<GlobalNavigation
34-
productIcon={EmojiAtlassianIcon}
35-
productHref="#"
36-
onProductClick={() => console.log("product clicked")}
37-
onCreateClick={() => console.log("create clicked")}
38-
onSearchClick={() => console.log("search clicked")}
39-
onStarredClick={() => console.log("starred clicked")}
40-
onHelpClick={() => console.log("help clicked")}
41-
helpItems={() => <div />}
42-
onNotificationClick={() => console.log("notification clicked")}
43-
appSwitcherComponent={AppSwitcherComponent}
44-
appSwitcherTooltip="Switch to ..."
45-
onSettingsClick={() => console.log("settings clicked")}
46-
loginHref="#login"
47-
/>
48-
);
33+
const Global: React.FunctionComponent = () => {
34+
const modalDispatch = React.useContext(ModalStore.Dispatch);
35+
return (
36+
<GlobalNavigation
37+
productIcon={EmojiAtlassianIcon}
38+
productHref="#"
39+
onProductClick={() => console.log("product clicked")}
40+
onCreateClick={() =>
41+
modalDispatch({ type: ModalActions.SHOW_FILE_MODAL })
42+
}
43+
onSearchClick={() => console.log("search clicked")}
44+
onStarredClick={() => console.log("starred clicked")}
45+
onHelpClick={() => console.log("help clicked")}
46+
helpItems={() => <div />}
47+
onNotificationClick={() => console.log("notification clicked")}
48+
appSwitcherComponent={AppSwitcherComponent}
49+
appSwitcherTooltip="Switch to ..."
50+
onSettingsClick={() => console.log("settings clicked")}
51+
loginHref="#login"
52+
/>
53+
);
54+
};
4955

5056
const App = () => {
5157
const editorState = React.useContext(EditorStore.State);

‎ui/src/store/ModalStore.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import * as React from "react";
2+
3+
export enum ModalActions {
4+
SHOW_FILE_MODAL = "SHOW_FILE_MODAL",
5+
DISMISS = "DISMISS"
6+
}
7+
8+
export enum ModalType {
9+
None = -1,
10+
File = 0,
11+
}
12+
13+
const State = React.createContext(null);
14+
const Dispatch = React.createContext(null);
15+
16+
interface IModalState {
17+
modalType: ModalType;
18+
}
19+
20+
const initialState: IModalState = {
21+
modalType: ModalType.None
22+
};
23+
24+
type ModalAction =
25+
| { type: ModalActions.SHOW_FILE_MODAL; }
26+
| { type: ModalActions.DISMISS; };
27+
28+
function reducer(
29+
state: IModalState,
30+
action: ModalAction
31+
): IModalState {
32+
console.log("reducer:", state, action);
33+
switch (action.type) {
34+
case ModalActions.SHOW_FILE_MODAL:
35+
return {
36+
...state,
37+
modalType: ModalType.File
38+
};
39+
case ModalActions.SHOW_FILE_MODAL:
40+
return {
41+
...state,
42+
modalType: ModalType.None
43+
};
44+
default:
45+
return initialState;
46+
}
47+
}
48+
49+
// Provider
50+
const Provider: React.FunctionComponent = ({ children }) => {
51+
const [state, dispatch] = React.useReducer(reducer, initialState);
52+
53+
return (
54+
<State.Provider value={state}>
55+
<Dispatch.Provider value={dispatch}>{children}</Dispatch.Provider>
56+
</State.Provider>
57+
);
58+
};
59+
60+
// Export
61+
export const ModalStore = {
62+
State,
63+
Dispatch,
64+
Provider
65+
};

‎ui/src/store/index.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import * as React from "react";
22
import { cloneElement } from "react";
33
import { EditorStore } from "./EditorStore";
44
import { NavigationStore } from "./NavigationStore";
5+
import { ModalStore } from "./ModalStore";
56

6-
const providers = [<EditorStore.Provider />, <NavigationStore.Provider />];
7+
const providers = [<EditorStore.Provider />, <NavigationStore.Provider />, <ModalStore.Provider />];
78

89
const Store = ({ children: initial }) =>
910
providers.reduce(
1011
(children, parent) => cloneElement(parent, { children }),
1112
initial
1213
);
1314

14-
export { Store, EditorStore };
15+
export { Store, EditorStore, ModalStore };

‎ui/yarn.lock

+42-3
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
memoize-one "^3.0.1"
8989
tslib "^1.9.3"
9090

91-
"@atlaskit/button@^13.0.5":
91+
"@atlaskit/button@^13.0.5", "@atlaskit/button@^13.1.1":
9292
version "13.1.1"
9393
resolved "https://registry.yarnpkg.com/@atlaskit/button/-/button-13.1.1.tgz#13cd9551f306f979892047a71d905d339f756729"
9494
integrity sha512-L5NELehB9c/+75O/ltmTH5hiUEJuKg0691PsYBMoK7YJbJmaNrsqInXCzsJI0GvxB7NJdvIFPtOjcV9jgPyjww==
@@ -291,6 +291,27 @@
291291
"@emotion/core" "^10.0.9"
292292
tslib "^1.9.3"
293293

294+
"@atlaskit/modal-dialog@^10.1.1":
295+
version "10.1.1"
296+
resolved "https://registry.yarnpkg.com/@atlaskit/modal-dialog/-/modal-dialog-10.1.1.tgz#63f62c836b92d4b85bfcef69afd6b5998aaf20a1"
297+
integrity sha512-dky3wOjGDcA/XH8qoPZcPTkvbcvYDgHN2ukkDRYDp7E3CfQvLrm+ESTX9AovxJq5hQlcvoJX4QMVyxb+4HClfg==
298+
dependencies:
299+
"@atlaskit/analytics-next" "^5.1.2"
300+
"@atlaskit/blanket" "^10.0.7"
301+
"@atlaskit/button" "^13.1.1"
302+
"@atlaskit/icon" "^19.0.0"
303+
"@atlaskit/portal" "^3.0.9"
304+
"@atlaskit/theme" "^9.1.1"
305+
"@emotion/core" "^10.0.9"
306+
"@emotion/styled" "^10.0.7"
307+
exenv "^1.2.2"
308+
raf-schd "^2.1.0"
309+
react-focus-lock "^1.19.1"
310+
react-scrolllock "^3.0.2"
311+
react-transition-group "^2.2.1"
312+
tiny-invariant "^0.0.3"
313+
tslib "^1.9.3"
314+
294315
"@atlaskit/navigation-next@^6.3.8":
295316
version "6.3.8"
296317
resolved "https://registry.yarnpkg.com/@atlaskit/navigation-next/-/navigation-next-6.3.8.tgz#5125a99c02deaf3c196ac27e47bdf0fae64ab9d6"
@@ -345,7 +366,7 @@
345366
memoize-one "^3.0.1"
346367
react-popper "1.0.2"
347368

348-
"@atlaskit/portal@^3.0.7":
369+
"@atlaskit/portal@^3.0.7", "@atlaskit/portal@^3.0.9":
349370
version "3.0.9"
350371
resolved "https://registry.yarnpkg.com/@atlaskit/portal/-/portal-3.0.9.tgz#70acc3502051fd30e6c6a0bfadb52dbadba88f01"
351372
integrity sha512-v0QSrRY5CJMrOWZY6BVWzz/i/q9JGKcF8Gwvnbej2X2+5RZFoj27RwMRl7s1OR/m0pdjrO5mJH44VmEdQI/Y8w==
@@ -604,7 +625,7 @@
604625
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.6.tgz#62266c5f0eac6941fece302abad69f2ee7e25e44"
605626
integrity sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==
606627

607-
"@emotion/is-prop-valid@^0.8.1":
628+
"@emotion/is-prop-valid@0.8.2", "@emotion/is-prop-valid@^0.8.1":
608629
version "0.8.2"
609630
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.2.tgz#b9692080da79041683021fcc32f96b40c54c59dc"
610631
integrity sha512-ZQIMAA2kLUWiUeMZNJDTeCwYRx1l8SQL0kHktze4COT22occKpDML1GDUXP5/sxhOMrZO8vZw773ni4H5Snrsg==
@@ -647,6 +668,24 @@
647668
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a"
648669
integrity sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==
649670

671+
"@emotion/styled-base@^10.0.14":
672+
version "10.0.14"
673+
resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.14.tgz#1b78a93e067ea852b2069339fcfd72c32ec91e4d"
674+
integrity sha512-1nC5iO/Rk0DY47M5wXCyWpbo/woiwXWfVbNKDM3QRi7CKq8CwC++PQ5HgiYflFrAt1vjzIVZqnzrIn3idUoQgg==
675+
dependencies:
676+
"@babel/runtime" "^7.4.3"
677+
"@emotion/is-prop-valid" "0.8.2"
678+
"@emotion/serialize" "^0.11.8"
679+
"@emotion/utils" "0.11.2"
680+
681+
"@emotion/styled@^10.0.7":
682+
version "10.0.14"
683+
resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.14.tgz#538bcf0d67bf8f6de946bcfbee53dc7d0187b346"
684+
integrity sha512-Ae8d5N/FmjvZKXjqWcjfhZhjCdkvxZSqD95Q72BYDNQnsOKLHIA4vWlMolLXDNkw1dIxV3l2pp82Z87HXj6eYQ==
685+
dependencies:
686+
"@emotion/styled-base" "^10.0.14"
687+
babel-plugin-emotion "^10.0.14"
688+
650689
"@emotion/stylis@0.8.4":
651690
version "0.8.4"
652691
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c"

0 commit comments

Comments
 (0)
Please sign in to comment.