textarea and multi-line notes

Author: abhishekrathore

db.json

@@ -20,6 +20,27 @@
       "id": "78486737-f03f-4da1-a40c-460149e7cf87",
       "createdAt": "2022-09-17T16:16:02.765Z",
       "updatedAt": "2022-09-17T16:18:04.640Z"
+    },
+    {
+      "text": "asdasdsad\nAsadasds\nasdasdasdad",
+      "priority": "low",
+      "id": "52ceb228-fc3b-440e-b849-31351a188498",
+      "createdAt": "2022-09-17T19:00:58.267Z",
+      "updatedAt": "2022-09-17T19:00:58.267Z"
+    },
+    {
+      "text": "line 1\nline 2\nline 3\nline 4\n",
+      "priority": "low",
+      "id": "a1ad66bb-7f36-48f2-b6b0-e21dfadd5d63",
+      "createdAt": "2022-09-17T19:01:13.245Z",
+      "updatedAt": "2022-09-17T19:01:13.245Z"
+    },
+    {
+      "text": "sdasdadasd asdasd sad asda. asd as das d asd as das d das d sa dd asd das dd\n a sd sa d asdsad \n  sad sadas d asd sad\n a sd sa das d asdsa\n\n\nasdsdasdasd",
+      "priority": "low",
+      "id": "32a0c88d-45cc-4997-bc03-9c5dd31093aa",
+      "createdAt": "2022-09-17T19:02:48.509Z",
+      "updatedAt": "2022-09-17T19:02:48.509Z"
     }
   ]
 }

src/components/add-note/add-note.css

@@ -1,8 +1,8 @@
-.add-note input{
-    line-height: 2rem;
+.add-note textarea{
     width: 60%; 
     border:0;
     padding: 0; 
+    vertical-align: bottom;
 }
 .add-note button{
     line-height: 2rem;

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

@@ -16,7 +16,7 @@ function AddNote(props: AddNoteProps) {
   const theme = useContext(ThemeContext);
   const { state, dispatch } = useContext(StateContext);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setText(e.target.value);
   };
 
@@ -78,7 +78,8 @@ function AddNote(props: AddNoteProps) {
   return (
     <Card bgColor={theme === 'dark' ? '#333' : '#ddd'} height="2" padding="1">
       <form className="add-note">
-        <input type="text" onChange={handleChange} value={text} />
+        <textarea onChange={handleChange} value={text}></textarea>
+        {/* <input type="text" onChange={handleChange} value={text} /> */}
         <select onChange={handleSelect} value={priority}>
           <option value="high">High</option>
           <option value="medium">Medium</option>

src/components/note/note.css

@@ -13,4 +13,13 @@
 }
 .date{
     font-size: 0.3rem;
+}
+.text{
+    white-space: pre-wrap;
+    overflow: hidden;
+   text-overflow: ellipsis;
+   display: -webkit-box;
+   -webkit-line-clamp: 2; /* number of lines to show */
+           line-clamp: 2; 
+   -webkit-box-orient: vertical;
 }

src/components/note/note.tsx

@@ -39,11 +39,11 @@ function Note(props: NoteProps) {
           ? props.priority && ColorDark[props.priority]
           : props.priority && ColorLight[props.priority]
       }
-      height="2"
+      height="3"
       padding="1"
     >
       <>
-        <div>{props.text}</div>
+        <div className='text'>{props.text}</div>
         <div className='left-corner date'>{props.updatedAt.toLocaleString()}</div>
         <div className="right-corner">
           <FaEdit onClick={() => editNote(props.note)}></FaEdit>