       title: ''
       tags: []
   handlePreClick: ->
-    {deckChecked, title, tags} = @state
-    deck = @props.getDeckDetail deckChecked, tags
-    @setState
-      deck: deck
-      showPre: true
-  close: ->
-    @setState
-      showPre: false
+    {deckChecked, title, tags, showPre} = @state
+    if showPre
+      @setState
+        showPre: false
+    else
+      deck = @props.getDeckDetail deckChecked, tags
+      @setState
+        deck: deck
+        showPre: true
   handleClickCheckbox: (index) ->
     {deckChecked} = @state
     if deckChecked isnt []

          {__ 'Save'}
        </Button>
      </div>
      <Modal show={@state.showPre}>
        <Modal.Header>
          <Modal.Title id='contained-modal-title'>{__ 'Preview'}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <HenseiItem deckItem={@state.deck}/>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={@close}>{__ 'Close'}</Button>
        </Modal.Footer>
      </Modal>
    </div>

module.exports = AddDataTab

{React, ReactBootstrap} = window
{Button, Input, Label, Panel} = ReactBootstrap
{relative, join} = require 'path-extra'
i18n = require '../node_modules/i18n'
{__} = i18n
