Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0085cea

Browse files
committed
Add react-modal, replace confirm usage with it
1 parent63cf651 commit0085cea

File tree

17 files changed

+443
-152
lines changed

17 files changed

+443
-152
lines changed

‎assets/bindata.go‎

Lines changed: 171 additions & 125 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎client/css/style.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,18 @@ button:active {
5757
background:#6bb758;
5858
}
5959

60+
.button-normal {
61+
background:#222;
62+
}
63+
64+
.button-normal:hover {
65+
background:#111;
66+
}
67+
68+
.button-normal:active {
69+
background:#222;
70+
}
71+
6072
label {
6173
-webkit-tap-highlight-color:rgba(0,0,0,0);
6274
}
@@ -855,6 +867,62 @@ input.message-input-nick.invalid {
855867
color:#ddd;
856868
}
857869

870+
.modal-overlay {
871+
position: fixed;
872+
top:0;
873+
left:0;
874+
right:0;
875+
bottom:0;
876+
display: flex;
877+
align-items: center;
878+
justify-content: center;
879+
background:rgba(0,0,0,0.33);
880+
opacity:0;
881+
transition: opacity0.2s;
882+
}
883+
884+
.modal-overlay-opening {
885+
opacity:1;
886+
}
887+
888+
.modal-overlay-closing {
889+
opacity:0;
890+
}
891+
892+
.modal {
893+
max-width:600px;
894+
padding:15px;
895+
background:#f0f0f0;
896+
border:1px solid#ddd;
897+
outline: none;
898+
margin:15px;
899+
text-align: center;
900+
font-family:'Montserrat', sans-serif;
901+
transform:translateY(-20px);
902+
transition: transform0.2s;
903+
}
904+
905+
.modal-opening {
906+
transform:translateY(0);
907+
}
908+
909+
.modal-closing {
910+
transform:translateY(-20px);
911+
}
912+
913+
.modalp {
914+
margin-bottom:5px;
915+
}
916+
917+
.modalbutton {
918+
width:120px;
919+
}
920+
921+
.modalbutton {
922+
margin:05px;
923+
margin-top:10px;
924+
}
925+
858926
@media (max-width:600px) {
859927
.tablist {
860928
width:200px;

‎client/js/components/App.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
importReact,{Suspense,lazy}from'react';
1+
importReact,{Suspense,lazy,useState}from'react';
22
importRoutefrom'containers/Route';
33
importAppInfofrom'components/AppInfo';
44
importTabListfrom'components/TabList';
55
importcnfrom'classnames';
66

7+
constModals=lazy(()=>import('components/modals'));
78
constChat=lazy(()=>import('containers/Chat'));
89
constConnect=lazy(()=>import('containers/Connect'));
910
constSettings=lazy(()=>import('containers/Settings'));
@@ -18,8 +19,14 @@ const App = ({
1819
select,
1920
push,
2021
hideMenu,
21-
newVersionAvailable
22+
newVersionAvailable,
23+
hasOpenModals
2224
})=>{
25+
const[renderModals,setRenderModals]=useState(false);
26+
if(!renderModals&&hasOpenModals){
27+
setRenderModals(true);
28+
}
29+
2330
constmainClass=cn('main-container',{
2431
'off-canvas':showTabList
2532
});
@@ -54,10 +61,8 @@ const App = ({
5461
push={push}
5562
/>
5663
<divclassName={mainClass}>
57-
<Suspense
58-
maxDuration={1000}
59-
fallback={<divclassName="suspense-fallback">...</div>}
60-
>
64+
<Suspensefallback={<divclassName="suspense-fallback">...</div>}>
65+
{renderModals&&<Modals/>}
6166
<Routename="chat">
6267
<Chat/>
6368
</Route>
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
importReact,{useCallback}from'react';
2+
importwithModalfrom'components/modals/withModal';
3+
importButtonfrom'components/ui/Button';
4+
5+
constConfirm=({
6+
payload:{ question, confirmation, onConfirm},
7+
onClose
8+
})=>{
9+
consthandleConfirm=useCallback(()=>{
10+
onClose(false);
11+
onConfirm();
12+
},[]);
13+
14+
return(
15+
<>
16+
<p>{question}</p>
17+
<ButtononClick={handleConfirm}>{confirmation||'OK'}</Button>
18+
<Buttoncategory="normal"onClick={onClose}>
19+
Cancel
20+
</Button>
21+
</>
22+
);
23+
};
24+
25+
exportdefaultwithModal({
26+
name:'confirm'
27+
})(Confirm);
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
importReact,{memo}from'react';
2+
importConfirmfrom'components/modals/Confirm';
3+
4+
constModals=()=>(
5+
<>
6+
<Confirm/>
7+
</>
8+
);
9+
10+
exportdefaultmemo(Modals,()=>true);
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
importReact,{useCallback}from'react';
2+
importModalfrom'react-modal';
3+
import{createSelector}from'reselect';
4+
import{getModals,closeModal}from'state/modals';
5+
importconnectfrom'utils/connect';
6+
7+
Modal.setAppElement('#root');
8+
9+
exportdefaultfunctionwithModal({ name, ...modalProps}){
10+
modalProps={
11+
className:{
12+
base:`modal modal-${name}`,
13+
afterOpen:'modal-opening',
14+
beforeClose:'modal-closing'
15+
},
16+
overlayClassName:{
17+
base:'modal-overlay',
18+
afterOpen:'modal-overlay-opening',
19+
beforeClose:'modal-overlay-closing'
20+
},
21+
closeTimeoutMS:200,
22+
...modalProps
23+
};
24+
25+
returnWrappedComponent=>{
26+
constReduxModal=({ onRequestClose, ...props})=>{
27+
consthandleRequestClose=useCallback(
28+
(dismissed=true)=>{
29+
onRequestClose();
30+
31+
if(dismissed&&props.payload.onDismiss){
32+
props.payload.onDismiss();
33+
}
34+
},
35+
[props.payload.onDismiss]
36+
);
37+
38+
return(
39+
<Modal
40+
contentLabel={name}
41+
onRequestClose={handleRequestClose}
42+
{...modalProps}
43+
{...props}
44+
>
45+
<WrappedComponentonClose={handleRequestClose}{...props}/>
46+
</Modal>
47+
);
48+
};
49+
50+
constmapState=createSelector(
51+
getModals,
52+
modals=>modals[name]||{payload:{}}
53+
);
54+
55+
constmapDispatch=dispatch=>({
56+
onRequestClose:()=>dispatch(closeModal(name))
57+
});
58+
59+
returnconnect(
60+
mapState,
61+
mapDispatch
62+
)(ReduxModal);
63+
};
64+
}

‎client/js/components/pages/Chat/ChatTitle.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,7 @@ const ChatTitle = ({
2626
letserverError=null;
2727
if(!tab.name&&status.error){
2828
serverError=(
29-
<spanclassName="chat-topic error">
30-
Error:
31-
{status.error}
32-
</span>
29+
<spanclassName="chat-topic error">Error:{status.error}</span>
3330
);
3431
}
3532

‎client/js/components/ui/Button.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
importReactfrom'react';
22

3-
constButton=({ children, ...props})=>(
4-
<buttontype="button"{...props}>
3+
constButton=({ children,category,...props})=>(
4+
<buttonclassName={`button-${category}`}type="button"{...props}>
55
{children}
66
</button>
77
);

‎client/js/containers/App.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { createStructuredSelector } from 'reselect';
22
importAppfrom'components/App';
33
import{getConnected}from'state/app';
44
import{getSortedChannels}from'state/channels';
5+
import{getHasOpenModals}from'state/modals';
56
import{getPrivateChats}from'state/privateChats';
67
import{getServers}from'state/servers';
78
import{getSelectedTab,select}from'state/tab';
@@ -16,7 +17,8 @@ const mapState = createStructuredSelector({
1617
servers:getServers,
1718
showTabList:getShowTabList,
1819
tab:getSelectedTab,
19-
newVersionAvailable:state=>state.app.newVersionAvailable
20+
newVersionAvailable:state=>state.app.newVersionAvailable,
21+
hasOpenModals:getHasOpenModals
2022
});
2123

2224
constmapDispatch={ push, select, hideMenu};

‎client/js/modules/socket.js‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
addMessage,
88
addMessages
99
}from'state/messages';
10+
import{openModal}from'state/modals';
1011
import{reconnect}from'state/servers';
1112
import{select}from'state/tab';
1213
import{find,normalizeChannel}from'utils';
@@ -123,15 +124,17 @@ export default function handleSocket({
123124
},
124125

125126
connection_update({ server, errorType}){
126-
if(
127-
errorType==='verify'&&
128-
window.confirm(
129-
'The server is using a self-signed certificate, continue anyway?'
130-
)
131-
){
127+
if(errorType==='verify'){
132128
dispatch(
133-
reconnect(server,{
134-
skipVerify:true
129+
openModal('confirm',{
130+
question:
131+
'The server is using a self-signed certificate, continue anyway?',
132+
onConfirm:()=>
133+
dispatch(
134+
reconnect(server,{
135+
skipVerify:true
136+
})
137+
)
135138
})
136139
);
137140
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp