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

Commitbe793ee

Browse files
context api and react switch added
1 parent0411296 commitbe793ee

File tree

13 files changed

+175
-64
lines changed

13 files changed

+175
-64
lines changed

‎package-lock.json‎

Lines changed: 21 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
@@ -14,6 +14,7 @@
1414
"react-dom":"^18.2.0",
1515
"react-icons":"^4.4.0",
1616
"react-scripts":"5.0.1",
17+
"react-switch":"^7.0.0",
1718
"typescript":"^4.8.3",
1819
"uuid":"^9.0.0",
1920
"web-vitals":"^2.1.4"

‎src/App.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.App{
2-
margin:01rem;
3-
text-align: center;
1+
.react-switch{
2+
position: absolute!important;
3+
right:0;
44
}

‎src/App.tsx‎

Lines changed: 28 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,39 @@
11
import'./App.css';
2-
importNotefrom'./components/note/note';
3-
import{Notes}from'./components/note/data';
4-
importAddNotefrom'./components/add-note/add-note';
2+
import{ThemeContext}from'./context/theme/theme';
3+
importHomefrom'./pages/home/home';
4+
importSwitchfrom"react-switch";
5+
import{FaSun,FaMoon}from'react-icons/fa';
56
import{useState}from'react';
6-
import{NoteType}from'./components/note/note-type';
77

88
functionApp(){
9-
const[notes,setNotes]=useState(Notes);
10-
const[editMode,setEditMode]=useState(false);
11-
const[noteToBeEditted,setNoteToBeEditted]=useState<NoteType|null>(null);
9+
const[theme,setTheme]=useState('light');
10+
const[checked,setChecked]=useState(false);
11+
1212

13-
constaddNote=(note:NoteType)=>{
14-
setNotes([note, ...notes]);
15-
};
16-
17-
constupdateNote=(updatedNote:NoteType)=>{
18-
constindex=notes.findIndex((note)=>note.id===updatedNote.id);
19-
leteditedNotes=[...notes];
20-
editedNotes.splice(index,1,updatedNote);
21-
setNotes(editedNotes);
22-
setEditMode(false);
23-
};
24-
25-
consteditNote=(id:string)=>{
26-
console.log('edit',id);
27-
constnote=notes.find((note)=>note.id===id);
28-
setEditMode(true);
29-
if(note){
30-
setNoteToBeEditted(note);
13+
constchangeHandler=(check:boolean)=>{
14+
setChecked(!checked);
15+
if(check){
16+
setTheme('dark');
17+
}else{
18+
setTheme('light')
3119
}
32-
};
20+
console.log(checked,check)
21+
}
3322

34-
constdeleteNote=(id:string)=>{
35-
constindex=notes.findIndex((note)=>note.id===id);
36-
leteditedNotes=[...notes];
37-
editedNotes.splice(index,1);
38-
setNotes(editedNotes);
39-
};
4023
return(
41-
<divclassName="App">
42-
<h2>Notes App</h2>
43-
<AddNote
44-
addNote={addNote}
45-
editMode={editMode}
46-
noteToBeEditted={noteToBeEditted}
47-
updateNote={updateNote}
48-
></AddNote>
49-
<div>
50-
{notes.map((note)=>(
51-
<Note
52-
key={note.id}
53-
id={note.id}
54-
priority={note.priority}
55-
text={note.text}
56-
editNote={editNote}
57-
deleteNote={deleteNote}
58-
></Note>
59-
))}
60-
</div>
61-
</div>
24+
<ThemeContext.Providervalue={theme}>
25+
<Switch
26+
onChange={changeHandler}
27+
checked={checked}
28+
className='react-switch'
29+
uncheckedIcon={<FaMoonsize={20}style={{paddingTop:'4px',paddingRight:'4px',float:'right'}}color="white"></FaMoon>}
30+
checkedIcon={<FaSunsize={20}style={{paddingTop:'4px',paddingLeft:'4px'}}color="yellow"></FaSun>}
31+
onColor="#900"
32+
offColor="#333"
33+
onHandleColor="#000"
34+
></Switch>
35+
<Home></Home>
36+
</ThemeContext.Provider>
6237
);
6338
}
6439

‎src/components/add-note/add-note.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import{useEffect,useState}from'react';
1+
import{useContext,useEffect,useState}from'react';
22
import{NoteType,Priority}from'../note/note-type';
33
import'./add-note.css';
44
import{v4asuuidv4}from'uuid';
55
importCardfrom'../card/card';
6+
import{ThemeContext}from'../../context/theme/theme';
67

78
typeAddNoteProps={
89
addNote:(note:NoteType)=>void;
@@ -14,10 +15,13 @@ type AddNoteProps = {
1415
functionAddNote(props:AddNoteProps){
1516
const[text,setText]=useState('');
1617
const[priority,setPriority]=useState<Priority>('low');
18+
consttheme=useContext(ThemeContext);
19+
1720
consthandleChange=(e:React.ChangeEvent<HTMLInputElement>)=>{
1821
setText(e.target.value);
1922
};
2023

24+
2125
constsetNoteContent=(note:NoteType)=>{
2226
setText(note.text);
2327
setPriority(note.priority);
@@ -55,7 +59,7 @@ function AddNote(props: AddNoteProps) {
5559
};
5660

5761
return(
58-
<CardbgColor="#333"height="2"padding="1">
62+
<CardbgColor={theme==='dark'?'#333':'#ddd'}height="2"padding="1">
5963
<formclassName="add-note">
6064
<inputtype="text"onChange={handleChange}value={text}/>
6165
<selectonChange={handleSelect}value={priority}>

‎src/components/card/card.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,15 @@
22
border:1px solid grey;
33
padding:2rem;
44
font-size:1rem;
5-
color:#333;
65
height:5rem;
76
border-radius:0.5rem;
87
margin-top:1rem;
98
position: relative;
9+
}
1010

11+
.card.light{
12+
color:#333;
13+
}
14+
.card.dark{
15+
color: white;
1116
}

‎src/components/card/card.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import{useContext}from'react';
2+
import{ThemeContext}from'../../context/theme/theme';
13
import'./card.css';
24

35
typeCardProps={
@@ -8,9 +10,11 @@ type CardProps = {
810
};
911

1012
functionCard(props:CardProps){
13+
consttheme=useContext(ThemeContext);
14+
1115
return(
1216
<div
13-
className="card"
17+
className={`card${theme}`}
1418
style={{
1519
backgroundColor:props.bgColor,
1620
height:`${props.height}rem`,

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,14 @@ export type NoteType = {
66
priority :Priority
77
}
88

9-
exportenumColor{
9+
exportenumColorLight{
1010
high='rgb(246, 100, 92)',
1111
medium='rgb(244, 158, 127)',
1212
low='rgb(248, 249, 175)'
13+
}
14+
15+
exportenumColorDark{
16+
high='rgb(143, 66, 61)',
17+
medium='rgb(190, 131, 79)',
18+
low='rgb(151, 151, 98)'
1319
}

‎src/components/note/note.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import'./note.css';
22

3-
import{Color,Priority}from'./note-type';
3+
import{ColorLight,ColorDark,Priority}from'./note-type';
44
importCardfrom'../card/card';
55
import{FaTrash,FaEdit}from'react-icons/fa';
6+
import{useContext}from'react';
7+
import{ThemeContext}from'../../context/theme/theme';
68

79
typeNoteProps={
810
id:string;
@@ -13,9 +15,12 @@ type NoteProps = {
1315
};
1416

1517
functionNote(props:NoteProps){
18+
consttheme=useContext(ThemeContext);
19+
1620
return(
1721
<Card
18-
bgColor={props.priority&&Color[props.priority]}
22+
bgColor={theme==='dark'?props.priority&&ColorDark[props.priority]:
23+
props.priority&&ColorLight[props.priority]}
1924
height="2"
2025
padding="1"
2126
>

‎src/context/theme/theme.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import{createContext}from"react";
2+
3+
exportconstThemeContext=createContext('light')

0 commit comments

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