Skip to content

Commit 2ba9f96

Browse files
maxchisttmaxchistt
committed
Modal upd
1 parent 3363de9 commit 2ba9f96

File tree

4 files changed

+122
-90
lines changed

4 files changed

+122
-90
lines changed

‎src/App.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import CardList from './Cards/CardList'
55
import AddCard from './Cards/AddCard'
66
import Context from './context'
77
import Loader from './Content/Loader'
8+
import ModalCardEdit from './Modal/ModalCardEdit'
89
import Modal from './Modal/Modal'
910
import DataService from './DataService'
1011

@@ -162,7 +163,7 @@ function App() {
162163
<main className="p-1">
163164

164165
<AddCard onCreate={addCard} onDeleteAll={deleteAll} />
165-
{getCardByIndex(editCardId) && <Modal card={getCardByIndex(editCardId)} index={editCardId} />}
166+
<Modal component={ModalCardEdit} componentProps={{ card: getCardByIndex(editCardId), index: editCardId }} />
166167
{loading && <Loader />}
167168
{cardsArr.length ? (
168169
<CardList cards={cardsArr} />

‎src/Modal/Modal.css‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.edit-modal {
1+
.modal-window-wrapper {
22
position: fixed;
33
top: 0;
44
right: 0;
@@ -9,9 +9,10 @@
99
justify-content: center;
1010
align-items: center;
1111
z-index: 10;
12+
opacity: 1;
1213
}
1314

14-
.edit-modal-body {
15+
.modal-window-body {
1516
padding: 2rem;
1617
width: 100%;
1718
max-width: 620px;
@@ -20,12 +21,3 @@
2021
height: fit-content;
2122
}
2223

23-
.edit-modal-content {
24-
display: block;
25-
}
26-
27-
.edit-modal-footer {
28-
display: flex;
29-
justify-content: space-between;
30-
flex-wrap: wrap;
31-
}

‎src/Modal/Modal.js‎

Lines changed: 19 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,50 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
33
import './Modal.css'
4-
import Context from '../context'
5-
import TextareaAutosize from 'react-textarea-autosize'
64

7-
function calcMaxRows() {
8-
const small = 576
9-
const middle = 768
10-
const large = 992
11-
const winWidth = window.innerWidth
12-
13-
14-
if (winWidth < small) return '7'
15-
else if (winWidth < middle) return '8'
16-
else if (winWidth < large) return '10'
17-
else return '17'
5+
const classes = {
6+
modalWrapper: ' modal-window-wrapper ',
7+
modalBody: ' modal-window-body '
188
}
19-
9+
export const ModalContext = React.createContext()
2010
function Modal(props) {
11+
2112
const [isOpen, setOpenState] = React.useState(false)
22-
const { removeCard, changeCardState, unsetEditCard, editCardContent } = React.useContext(Context)
23-
24-
25-
if (props.card !== null && !isOpen) open()
13+
const Component = props.component
14+
const ComponentProps = props.componentProps
2615

2716
function open() {
2817
setOpenState(true)
2918
}
3019

3120
function close() {
32-
unsetEditCard()
3321
setOpenState(false)
3422
}
3523

36-
function save(text) {
37-
editCardContent(props.index, text)
38-
}
39-
40-
function onInputCange(e) {
41-
save(e.target.value)
42-
}
43-
4424
return (
4525
<React.Fragment>
4626
<div className="container p-1 d-none">
4727
<button className="btn" onClick={open}>Open modal</button>
4828
</div>
4929

50-
{isOpen && (
51-
<div className='edit-modal' onClick={(e) => { if (e.target.className === 'edit-modal') close() }}>
52-
<div className='edit-modal-body bg-light'>
53-
54-
<div className='edit-modal-content bg-light'>
55-
{props.card ? (
56-
<React.Fragment>
57-
<h1 className="mb-2">Id: {props.card.id}</h1>
58-
<h5 className="mb-2">Completed:
59-
<span className="px-2 py-1 m-1 d-inline-block text-center" style={{ borderRadius: "5px", width: "3em", color: "white", backgroundColor: props.card.completed ? "green" : "red" }}>
60-
{String(props.card.completed)}
61-
</span>
62-
</h5>
63-
<TextareaAutosize
64-
className="form-control p-0 mb-2 bg-light"
65-
style={{ border: "none", outline: "none", boxShadow: "none", resize: "none" }}
66-
minRows={3}
67-
maxRows={calcMaxRows()}
68-
value={props.card.text}
69-
onChange={onInputCange}
70-
/>
71-
</React.Fragment>
72-
) : (
73-
<h1>No card</h1>
74-
)}
75-
</div>
76-
77-
<div className='edit-modal-footer bg-light'>
78-
<div>
79-
<button
80-
className="btn btn-light mx-1"
81-
disabled={!props.card}
82-
onClick={() => changeCardState(props.index)}
83-
>&#10003;</button>
84-
<button
85-
className="btn btn-light"
86-
disabled={!props.card}
87-
onClick={() => { close(); removeCard(props.index); }}
88-
>&#10007;</button>
89-
</div>
90-
<div>
91-
<button
92-
className="btn btn-light"
93-
onClick={close}
94-
>Close</button>
95-
</div>
96-
</div>
97-
98-
</div>
30+
<div
31+
style={{ display: !isOpen ? "none" : "flex" }}
32+
className={classes.modalWrapper}
33+
onClick={(e) => { if (e.target.className === classes.modalWrapper) close() }}
34+
>
35+
<div className={classes.modalBody + 'bg-light'}>
36+
<ModalContext.Provider value={{ open, close, isOpen, classes }}>
37+
<Component {...ComponentProps} />
38+
</ModalContext.Provider>
9939
</div>
100-
)}
40+
</div>
41+
10142
</React.Fragment>
10243
)
10344
}
10445

10546
Modal.propTypes = {
106-
card: PropTypes.object.isRequired,
47+
componentProps: PropTypes.object,
10748
index: PropTypes.number
10849
}
10950

‎src/Modal/ModalCardEdit.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React, { useEffect } from 'react'
2+
import PropTypes from 'prop-types'
3+
import Context from '../context'
4+
import TextareaAutosize from 'react-textarea-autosize'
5+
import { ModalContext } from "./Modal"
6+
7+
function calcMaxRows() {
8+
const small = 576
9+
const middle = 768
10+
const large = 992
11+
const winWidth = window.innerWidth
12+
13+
14+
if (winWidth < small) return '7'
15+
else if (winWidth < middle) return '8'
16+
else if (winWidth < large) return '10'
17+
else return '17'
18+
}
19+
20+
function ModalCardEdit(props) {
21+
const { removeCard, changeCardState, unsetEditCard, editCardContent } = React.useContext(Context)
22+
const { open, close, isOpen } = React.useContext(ModalContext)
23+
useEffect(() => { if (props.card !== null && !isOpen) open() }, [props.card]) // eslint-disable-line react-hooks/exhaustive-deps
24+
25+
26+
function onClose() {
27+
unsetEditCard()
28+
close()
29+
}
30+
function save(text) {
31+
editCardContent(props.index, text)
32+
}
33+
function onInputCange(e) {
34+
save(e.target.value)
35+
}
36+
function onRemove() {
37+
unsetEditCard();
38+
close();
39+
removeCard(props.index);
40+
}
41+
function onStateChange() {
42+
changeCardState(props.index)
43+
}
44+
45+
return (
46+
<React.Fragment>
47+
<div className='bg-light'>
48+
{props.card ? (
49+
<React.Fragment>
50+
<h1 className="mb-2">Id: {props.card.id}</h1>
51+
<h5 className="mb-2">Completed:
52+
<span className="px-2 py-1 m-1 d-inline-block text-center" style={{ borderRadius: "5px", width: "3em", color: "white", backgroundColor: props.card.completed ? "green" : "red" }}>
53+
{String(props.card.completed)}
54+
</span>
55+
</h5>
56+
<TextareaAutosize
57+
className="form-control p-0 mb-2 bg-light"
58+
style={{ border: "none", outline: "none", boxShadow: "none", resize: "none" }}
59+
minRows={3}
60+
maxRows={calcMaxRows()}
61+
value={props.card.text}
62+
onChange={onInputCange}
63+
/>
64+
</React.Fragment>
65+
) : (
66+
<h1>No card</h1>
67+
)}
68+
</div>
69+
<div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap" }} className='bg-light'>
70+
<div>
71+
<button
72+
className="btn btn-light mx-1"
73+
disabled={!props.card}
74+
onClick={onStateChange}
75+
>&#10003;</button>
76+
<button
77+
className="btn btn-light"
78+
disabled={!props.card}
79+
onClick={onRemove}
80+
>&#10007;</button>
81+
</div>
82+
<div>
83+
<button
84+
className="btn btn-light"
85+
onClick={onClose}
86+
>Close</button>
87+
</div>
88+
</div>
89+
</React.Fragment>
90+
)
91+
}
92+
93+
ModalCardEdit.propTypes = {
94+
card: PropTypes.object.isRequired,
95+
index: PropTypes.number
96+
}
97+
98+
export default ModalCardEdit

0 commit comments

Comments
 (0)