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

Commit21976ee

Browse files
delete note
1 parentbfd1b77 commit21976ee

File tree

7 files changed

+49
-9
lines changed

7 files changed

+49
-9
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"@types/react-dom":"^18.0.6",
1313
"react":"^18.2.0",
1414
"react-dom":"^18.2.0",
15+
"react-icons":"^4.4.0",
1516
"react-scripts":"5.0.1",
1617
"typescript":"^4.8.3",
1718
"uuid":"^9.0.0",

‎src/App.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,24 @@ function App() {
1212
constaddNote=(note:NoteType)=>{
1313
setNotes([note,...notes])
1414
}
15+
consteditNote=(id:string)=>{
16+
console.log('edit',id);
17+
}
18+
19+
constdeleteNote=(id:string)=>{
20+
constindex=notes.findIndex(note=>note.id===id);
21+
leteditedNotes=[...notes]
22+
editedNotes.splice(index,1);
23+
setNotes(editedNotes);
24+
}
1525
return(
1626
<divclassName="App">
1727
<h2>Notes App</h2>
1828
<AddNoteaddNote={addNote}></AddNote>
1929
<div>
2030
{
2131
notes.map(
22-
note=><Notekey={note.id}priority={note.priority}text={note.text}></Note>
32+
note=><Notekey={note.id}id={note.id}priority={note.priority}text={note.text}editNote={editNote}deleteNote={deleteNote}></Note>
2333
)
2434
}
2535
</div>

‎src/components/card/card.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
height:5rem;
77
border-radius:0.5rem;
88
margin-top:1rem;
9+
position: relative;
910

1011
}

‎src/components/note/note-type.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
exporttypePriority='high'|'medium'|'low';
22

3-
exporttypeNoteProps={
4-
text:string,
5-
priority? :Priority
6-
}
7-
83
exporttypeNoteType={
94
id:string,
105
text:string,

‎src/components/note/note.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
11

2-
2+
.right-corner{
3+
position: absolute;
4+
bottom:0;
5+
right:0;
6+
padding:0.5rem;
7+
}

‎src/components/note/note.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
import'./note.css'
22

3-
import{NoteProps,Color}from'./note-type';
3+
import{Color,Priority}from'./note-type';
44
importCardfrom'../card/card';
5+
import{FaTrash,FaEdit}from'react-icons/fa';
56

6-
7+
typeNoteProps={
8+
id:string,
9+
text:string,
10+
priority? :Priority,
11+
editNote:(id:string)=>void,
12+
deleteNote:(id:string)=>void
13+
}
714

815

916
functionNote(props:NoteProps){
@@ -12,9 +19,15 @@ function Note(props: NoteProps){
1219
bgColor={props.priority&&Color[props.priority]}
1320
height='2'
1421
padding='1'>
22+
<>
1523
<div>
1624
{props.text}
1725
</div>
26+
<divclassName='right-corner'>
27+
<FaEditonClick={()=>props.editNote(props.id)}></FaEdit>
28+
<FaTrashonClick={()=>props.deleteNote(props.id)}></FaTrash>
29+
</div>
30+
</>
1831
</Card>
1932
)
2033
}

0 commit comments

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