feat(panel): add wordEditor deleteCards

crimx · Aug 26, 2018 · 47f8f1b · 47f8f1b
1 parent 750a745
commit 47f8f1b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/src/_locales/content/messages.json b/src/_locales/content/messages.json
@@ -59,13 +59,16 @@
     "zh_TW": "關閉字典視窗",
     "en": "Close the panel"
   },
-
   "fromSaladict": {
     "zh_CN": "来自沙拉查词面板",
     "zh_TW": "来自沙拉查詞介面",
     "en": "From Saladict Panel"
   },
-
+  "wordEditorDeleteConfirm": {
+    "zh_CN": "从单词本中移除？",
+    "zh_TW": "于單字本中移除？",
+    "en": "Delete from Notebook?"
+  },
   "wordEditorTitle": {
     "zh_CN": "保存到生词本",
     "zh_TW": "保存到單字本",

diff --git a/src/content/components/WordCards/_style.scss b/src/content/components/WordCards/_style.scss
@@ -24,6 +24,7 @@
 
 .wordCards-Card {
   list-style-type: none;
+  position: relative;
   display: block;
   overflow: hidden;
   margin: 0 0 10px 0;
@@ -35,6 +36,18 @@
   background: #fcf8e3;
 }
 
+.wordCards-CardClose {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  border: none;
+  font-size: 20px;
+  font-weight: bold;
+  color: #8a6d3b;
+  background: transparent;
+  cursor: pointer;
+}
+
 .wordCards-CardTitle {
   margin: 0 0 0.5em;
   text-align: center;

diff --git a/src/content/components/WordCards/index.tsx b/src/content/components/WordCards/index.tsx
@@ -1,17 +1,19 @@
 import React from 'react'
 import { translate } from 'react-i18next'
 import { TranslationFunction } from 'i18next'
-import { Word } from '@/background/database'
+import { Word } from '@/_helpers/record-manager'
 
 export interface WordCardsProps {
   words: Word[]
+  deleteCard: (word: Word) => any
 }
 
 export class WordCards extends React.PureComponent<WordCardsProps & { t: TranslationFunction }> {
   render () {
     const {
       t,
       words,
+      deleteCard,
     } = this.props
 
     return (
@@ -24,6 +26,7 @@ export class WordCards extends React.PureComponent<WordCardsProps & { t: Transla
             <li className='wordCards-Card'
               key={word.date}
             >
+              <button type='button' className='wordCards-CardClose' onClick={() => deleteCard(word)}>&times;</button>
               <h2 className='wordCards-CardTitle'>{word.text}</h2>
               {word.trans &&
                 <div className='wordCards-CardItem'>

diff --git a/src/content/components/WordEditor/index.tsx b/src/content/components/WordEditor/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { translate } from 'react-i18next'
 import { TranslationFunction } from 'i18next'
 import { SelectionInfo } from '@/_helpers/selection'
-import { Word } from '@/background/database'
+import { Word, deleteWords } from '@/_helpers/record-manager'
 import WordCards from '../WordCards'
 
 export interface WordEditorDispatchers {
@@ -75,12 +75,17 @@ export class WordEditor extends React.PureComponent<WordEditorProps & { t: Trans
         if (word.date) {
           words = words.filter(({ date }) => date !== word.date)
         }
-        if (words.length > 0) {
-          this.setState({ relatedWords: words })
-        }
+        this.setState({ relatedWords: words })
       })
   }
 
+  deleteCard = (word: Word) => {
+    if (window.confirm(this.props.t('wordEditorDeleteConfirm'))) {
+      deleteWords('notebook', [word.date])
+        .then(this.getRelatedWords)
+    }
+  }
+
   componentDidMount () {
     this.getRelatedWords()
   }
@@ -170,7 +175,7 @@ export class WordEditor extends React.PureComponent<WordEditorProps & { t: Trans
               onChange={this.mapValueToState}
             />
           </form>
-          {relatedWords.length > 0 && <WordCards words={relatedWords} /> }
+          {relatedWords.length > 0 && <WordCards words={relatedWords} deleteCard={this.deleteCard} /> }
         </div>
         <footer className='wordEditor-Footer'>
           <button type='button'