refactor(ZNTA-2514) replace TMMergeModal modal and toggle components …

…with antd Modal and Switch
zanata · May 17, 2018 · 8ccb806 · 8ccb806
1 parent 5b8d35a
commit 8ccb806
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeImportedTM.js b/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeImportedTM.js
@@ -9,10 +9,11 @@ import Col from 'antd/lib/col'
 import 'antd/lib/col/style/css'
 import Row from 'antd/lib/row'
 import 'antd/lib/row/style/css'
+import Switch from 'antd/lib/switch'
+import 'antd/lib/switch/style/css'
 import {IGNORE_CHECK, FUZZY, REJECT} from '../../utils/EnumValueUtils'
 import {CopyLabel} from './TMMergeOptionsCommon'
 import Icon from '../../components/Icon'
-import Toggle from 'react-toggle'
 
 const tooltip = (
   <span id='copy-as-translated-TM'>
@@ -44,7 +45,7 @@ class TMMergeImportedTM extends Component {
       <span>
         <div>
           <span>
-            <Toggle icons={false} defaultChecked
+            <Switch defaultChecked
               onChange={this.toggleChange} />
           </span>
           <span>From </span>

diff --git a/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeModal.js b/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeModal.js
@@ -5,6 +5,8 @@ import * as PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import { differenceWith, isEqual, throttle } from 'lodash'
 import {arrayMove} from 'react-sortable-hoc'
+import Modal from 'antd/lib/modal'
+import 'antd/lib/modal/style/css'
 import Button from 'antd/lib/button'
 import 'antd/lib/button/style/css'
 import Collapse from 'antd/lib/collapse'
@@ -14,7 +16,7 @@ import 'antd/lib/row/style/css'
 import Col from 'antd/lib/col'
 import 'antd/lib/col/style/css'
 import {
-  Icon, Modal, LoaderText, SelectableDropdown, Link} from '../../components'
+  Icon, LoaderText, SelectableDropdown, Link} from '../../components'
 import {ProjectVersionHorizontal} from './project-version-displays'
 import CancellableProgressBar
   from '../../components/ProgressBar/CancellableProgressBar'
@@ -468,15 +470,17 @@ class TMMergeModal extends Component {
       </span>
     )
     return (
-      <Modal id="tmMergeModal" show={showTMMergeModal}
-        onHide={toggleTMMergeModal} keyboard backdrop>
-        <Modal.Header>
-          <Modal.Title>Version TM Merge</Modal.Title>
+      <Modal
+        title='Version TM Merge'
+        visible={showTMMergeModal}
+        onCancel={toggleTMMergeModal}
+        footer={modalFooter}
+        width={'48rem'}>
+        <span>
           <p className="u-textDanger modalText-danger">
             {notification && notification.message}</p>
-        </Modal.Header>
-        <Modal.Body>{modalBody}</Modal.Body>
-        <Modal.Footer>{modalFooter}</Modal.Footer>
+          {modalBody}
+        </span>
       </Modal>
     )
   }

diff --git a/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeProjectSources.js b/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeProjectSources.js
@@ -14,14 +14,15 @@ import Col from 'antd/lib/col'
 import 'antd/lib/col/style/css'
 import Tooltip from 'antd/lib/tooltip'
 import 'antd/lib/tooltip/style/css'
+import Switch from 'antd/lib/switch'
+import 'antd/lib/switch/style/css'
 import Input from 'antd/lib/input'
 import 'antd/lib/input/style/css'
 import {
   Icon, LoaderText, DraggableVersionPanels
 } from '../../components'
 import ProjectVersionPanels from './ProjectVersionPanels'
 import TMMergeProjectTMOptions from './TMMergeProjectTMOptions'
-import Toggle from 'react-toggle'
 
 import {
   ProjectType, FromProjectVersionType
@@ -140,7 +141,7 @@ class TMMergeProjectSources extends Component {
       <span>
         <Row>
           <Col span={24}>
-            <Toggle icons={false} defaultChecked
+            <Switch defaultChecked
               onChange={this.toggleChange} />
             <span>From </span>
             <span className="panel-name">Project Source</span>