Dispatch an open event on drag of Parity Bar (#4987)

* Dispatch an open event on drag of Parity Bar

* Bette id for ParityBar position // Replace on dapp unload

* Fix PairtyBar Positionning
This commit is contained in:
Nicolas Gotchac 2017-03-23 15:39:13 +01:00 committed by Jaco Greeff
parent f5ea47a7b2
commit 1490ba179c

View File

@ -78,16 +78,33 @@ class ParityBar extends Component {
// Hook to the dapp loaded event to position the // Hook to the dapp loaded event to position the
// Parity Bar accordingly // Parity Bar accordingly
DappsStore.get(api).on('loaded', (app) => { const dappsStore = DappsStore.get(api);
dappsStore
.on('loaded', (app) => {
this.app = app; this.app = app;
this.loadPosition(); this.loadPosition();
}); });
if (this.props.dapp) {
this.loadPosition();
}
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
const count = this.props.pending.length; const count = this.props.pending.length;
const newCount = nextProps.pending.length; const newCount = nextProps.pending.length;
// Replace to default position when leaving a dapp
if (this.props.dapp && !nextProps.dapp) {
this.loadPosition(true);
}
// Load position when dapp loads
if (!this.props.dapp && nextProps.dapp) {
this.loadPosition();
}
if (count === newCount) { if (count === newCount) {
return; return;
} }
@ -101,7 +118,10 @@ class ParityBar extends Component {
setOpened (opened, displayType = DISPLAY_SIGNER) { setOpened (opened, displayType = DISPLAY_SIGNER) {
this.setState({ displayType, opened }); this.setState({ displayType, opened });
this.dispatchOpenEvent(opened);
}
dispatchOpenEvent (opened) {
if (!this.bar) { if (!this.bar) {
return; return;
} }
@ -241,10 +261,6 @@ class ParityBar extends Component {
} }
renderDrag () { renderDrag () {
if (this.props.externalLink) {
return;
}
const dragButtonClasses = [ styles.dragButton ]; const dragButtonClasses = [ styles.dragButton ];
if (this.state.moving) { if (this.state.moving) {
@ -457,7 +473,11 @@ class ParityBar extends Component {
return position; return position;
} }
onMouseDown = (event) => { onMouseDown = () => {
// Dispatch an open event in case in an iframe (get full w and h)
this.dispatchOpenEvent(true);
window.setTimeout(() => {
const containerElt = ReactDOM.findDOMNode(this.refs.container); const containerElt = ReactDOM.findDOMNode(this.refs.container);
const dragButtonElt = ReactDOM.findDOMNode(this.refs.dragButton); const dragButtonElt = ReactDOM.findDOMNode(this.refs.dragButton);
@ -501,7 +521,8 @@ class ParityBar extends Component {
page page
}; };
this.setState({ moving: true }); this.setMovingState(true);
}, 50);
} }
onMouseEnter = (event) => { onMouseEnter = (event) => {
@ -570,7 +591,7 @@ class ParityBar extends Component {
} }
this.moving = false; this.moving = false;
this.setState({ moving: false, position }); this.setMovingState(false, { position });
this.savePosition(position); this.savePosition(position);
} }
@ -587,39 +608,61 @@ class ParityBar extends Component {
} }
get config () { get config () {
let config; const config = store.get(LS_STORE_KEY);
if (typeof config === 'string') {
try { try {
config = JSON.parse(store.get(LS_STORE_KEY)); return JSON.parse(config);
} catch (error) { } catch (e) {
config = {}; return {};
}
} }
return config; return config || {};
} }
loadPosition (props = this.props) { /**
const { app, config } = this; * Return the config key for the current view.
* If inside a dapp, should be the dapp id.
* Otherwise, try to get the current hostname.
*/
getConfigKey () {
const { app } = this;
if (!app) { if (app && app.id) {
return app.id;
}
return window.location.hostname;
}
loadPosition (loadDefault = false) {
if (loadDefault) {
return this.setState({ position: DEFAULT_POSITION }); return this.setState({ position: DEFAULT_POSITION });
} }
if (config[app.id]) { const { app, config } = this;
return this.setState({ position: config[app.id] }); const configKey = this.getConfigKey();
if (config[configKey]) {
return this.setState({ position: config[configKey] });
} }
if (app && app.position) {
const position = this.stringToPosition(app.position); const position = this.stringToPosition(app.position);
this.setState({ position }); return this.setState({ position });
}
return this.setState({ position: DEFAULT_POSITION });
} }
savePosition (position) { savePosition (position) {
const { app, config } = this; const { config } = this;
const configKey = this.getConfigKey();
config[app.id] = position; config[configKey] = position;
store.set(LS_STORE_KEY, config);
store.set(LS_STORE_KEY, JSON.stringify(config));
} }
stringToPosition (value) { stringToPosition (value) {
@ -647,6 +690,13 @@ class ParityBar extends Component {
return DEFAULT_POSITION; return DEFAULT_POSITION;
} }
} }
setMovingState (moving, extras = {}) {
this.setState({ moving, ...extras });
// Trigger an open event if it's moving
this.dispatchOpenEvent(moving);
}
} }
function mapStateToProps (state) { function mapStateToProps (state) {