Added Export Component in Actionbar => export Addressbook (#2153) (#2847)

js/package.json

@@ -109,6 +109,7 @@
     "blockies": "0.0.2",
     "bytes": "^2.4.0",
     "es6-promise": "^3.2.1",
+    "file-saver": "^1.3.3",
     "format-json": "^1.0.3",
     "format-number": "^2.0.1",
     "geopattern": "^1.2.3",

js/src/ui/Actionbar/Export/export.js

@@ -0,0 +1,57 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import FileSaver from 'file-saver';
+import FileDownloadIcon from 'material-ui/svg-icons/file/file-download';
+
+import { Button } from '../../';
+
+class ActionbarExport extends Component {
+  static propTypes = {
+    content: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object
+    ]).isRequired,
+    filename: PropTypes.string.isRequired,
+    className: PropTypes.string
+  }
+
+  render () {
+    const { className } = this.props;
+
+    return (
+      <Button
+        className={ className }
+        icon={ <FileDownloadIcon /> }
+        label='export'
+        onClick={ this.onDownloadBackup } />
+    );
+  }
+
+  onDownloadBackup = () => {
+    const { filename, content } = this.props;
+
+    const text = (typeof content === 'string')
+      ? content
+      : JSON.stringify(content, null, 4);
+
+    const blob = new Blob([ text ], { type: 'text/plain;charset=utf-8' });
+    FileSaver.saveAs(blob, filename);
+  }
+}
+
+export default ActionbarExport;

js/src/ui/Actionbar/Export/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './export';

js/src/ui/index.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import Actionbar from './Actionbar';
+import ActionbarExport from './Actionbar/Export';
 import ActionbarSearch from './Actionbar/Search';
 import ActionbarSort from './Actionbar/Sort';
 import Badge from './Badge';
@@ -39,6 +40,7 @@ import TxHash from './TxHash';
 
 export {
   Actionbar,
+  ActionbarExport,
   ActionbarSearch,
   ActionbarSort,
   AddressSelect,

js/src/views/Addresses/addresses.js

@@ -22,7 +22,7 @@ import { uniq } from 'lodash';
 
 import List from '../Accounts/List';
 import { AddAddress } from '../../modals';
-import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page } from '../../ui';
+import { Actionbar, ActionbarExport, ActionbarSearch, ActionbarSort, Button, Page } from '../../ui';
 
 import styles from './addresses.css';
 
@@ -93,6 +93,8 @@ class Addresses extends Component {
   }
 
   renderActionbar () {
+    const { contacts } = this.props;
+
     const buttons = [
       <Button
         key='newAddress'
@@ -100,6 +102,11 @@ class Addresses extends Component {
         label='new address'
         onClick={ this.onOpenAdd } />,
 
+      <ActionbarExport
+        key='exportAddressbook'
+        content={ contacts }
+        filename='addressbook.json' />,
+
       this.renderSearchButton(),
       this.renderSortButton()
     ];