Fix Copy to Clipboard Snackbar

This commit is contained in:
Nicolas Gotchac 2016-11-25 15:52:23 +01:00
parent 0d6c2dd51d
commit 9b21c96e3a
8 changed files with 197 additions and 17 deletions

View File

@ -27,3 +27,4 @@ export signerReducer from './signerReducer';
export statusReducer from './statusReducer';
export blockchainReducer from './blockchainReducer';
export compilerReducer from './compilerReducer';
export snackbarReducer from './snackbarReducer';

View File

@ -0,0 +1,34 @@
// 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 function showSnackbar (message, cooldown) {
return (dispatch, getState) => {
dispatch(openSnackbar(message, cooldown));
};
}
function openSnackbar (message, cooldown) {
return {
type: 'openSnackbar',
message, cooldown
};
}
export function closeSnackbar () {
return {
type: 'closeSnackbar'
};
}

View File

@ -0,0 +1,44 @@
// 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 { handleActions } from 'redux-actions';
const initialState = {
open: false,
message: '',
cooldown: 1000
};
export default handleActions({
openSnackbar (state, action) {
const { message, cooldown } = action;
return {
...state,
open: true,
cooldown: cooldown || state.cooldown,
message
};
},
closeSnackbar (state) {
return {
...state,
open: false,
cooldown: initialState.cooldown
};
}
}, initialState);

View File

@ -17,7 +17,7 @@
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import { apiReducer, balancesReducer, blockchainReducer, compilerReducer, imagesReducer, personalReducer, signerReducer, statusReducer as nodeStatusReducer } from './providers';
import { apiReducer, balancesReducer, blockchainReducer, compilerReducer, imagesReducer, personalReducer, signerReducer, statusReducer as nodeStatusReducer, snackbarReducer } from './providers';
import { errorReducer } from '../ui/Errors';
import { settingsReducer } from '../views/Settings';
@ -37,6 +37,7 @@ export default function () {
images: imagesReducer,
nodeStatus: nodeStatusReducer,
personal: personalReducer,
signer: signerReducer
signer: signerReducer,
snackbar: snackbarReducer
});
}

View File

@ -15,19 +15,25 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { IconButton } from 'material-ui';
import Snackbar from 'material-ui/Snackbar';
import Clipboard from 'react-copy-to-clipboard';
import CopyIcon from 'material-ui/svg-icons/content/content-copy';
import Theme from '../Theme';
import { darkBlack } from 'material-ui/styles/colors';
import { showSnackbar } from '../../redux/providers/snackbarActions';
const { textColor, disabledTextColor } = Theme.flatButton;
import styles from './copyToClipboard.css';
export default class CopyToClipboard extends Component {
class CopyToClipboard extends Component {
static propTypes = {
showSnackbar: PropTypes.func.isRequired,
data: PropTypes.string.isRequired,
onCopy: PropTypes.func,
size: PropTypes.number, // in px
cooldown: PropTypes.number // in ms
@ -42,11 +48,12 @@ export default class CopyToClipboard extends Component {
state = {
copied: false,
timeout: null
timeoutId: null
};
componentWillUnmount () {
const { timeoutId } = this.state;
if (timeoutId) {
window.clearTimeout(timeoutId);
}
@ -59,14 +66,6 @@ export default class CopyToClipboard extends Component {
return (
<Clipboard onCopy={ this.onCopy } text={ data }>
<div className={ styles.wrapper }>
<Snackbar
open={ copied }
message={
<div>copied <code className={ styles.data }>{ data }</code> to clipboard</div>
}
autoHideDuration={ 2000 }
bodyStyle={ { backgroundColor: darkBlack } }
/>
<IconButton
disableTouchRipple
style={ { width: size, height: size, padding: '0' } }
@ -80,14 +79,28 @@ export default class CopyToClipboard extends Component {
}
onCopy = () => {
const { cooldown, onCopy } = this.props;
const { data, onCopy, cooldown, showSnackbar } = this.props;
const message = (<div>copied <code className={ styles.data }>{ data }</code> to clipboard</div>);
this.setState({
copied: true,
timeout: setTimeout(() => {
this.setState({ copied: false, timeout: null });
timeoutId: setTimeout(() => {
this.setState({ copied: false, timeoutId: null });
}, cooldown)
});
showSnackbar(message, cooldown);
onCopy();
}
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({
showSnackbar
}, dispatch);
}
export default connect(
null,
mapDispatchToProps
)(CopyToClipboard);

View File

@ -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 './snackbar';

View File

@ -0,0 +1,68 @@
// 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 { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Snackbar as SnackbarMUI } from 'material-ui';
import { darkBlack } from 'material-ui/styles/colors';
import { closeSnackbar } from '../../../redux/providers/snackbarActions';
class Snackbar extends Component {
static propTypes = {
closeSnackbar: PropTypes.func.isRequired,
open: PropTypes.bool,
cooldown: PropTypes.number,
message: PropTypes.any
};
render () {
const { open, message, cooldown } = this.props;
return (
<SnackbarMUI
open={ open }
message={ message }
autoHideDuration={ cooldown }
bodyStyle={ { backgroundColor: darkBlack } }
onRequestClose={ this.handleClose }
/>
);
}
handleClose = () => {
this.props.closeSnackbar();
}
}
function mapStateToProps (state) {
const { open, message, cooldown } = state.snackbar;
return { open, message, cooldown };
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({
closeSnackbar
}, dispatch);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Snackbar);

View File

@ -21,6 +21,7 @@ import { bindActionCreators } from 'redux';
import Connection from '../Connection';
import ParityBar from '../ParityBar';
import Snackbar from './Snackbar';
import Container from './Container';
import DappContainer from './DappContainer';
import FrameError from './FrameError';
@ -87,6 +88,7 @@ class Application extends Component {
pending={ pending } />
{ children }
{ blockNumber ? (<Status />) : null }
<Snackbar />
</Container>
);
}