2020-01-02 16:58:06 +00:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @flow
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import { connect } from 'react-redux';
|
2021-01-29 01:43:03 +00:00
|
|
|
import { t } from 'ttag';
|
|
|
|
|
2020-04-28 05:16:47 +00:00
|
|
|
import copy from '../utils/clipboard';
|
|
|
|
import { notify } from '../actions';
|
2020-01-02 16:58:06 +00:00
|
|
|
|
|
|
|
import type { State } from '../reducers';
|
|
|
|
|
|
|
|
|
2020-01-22 14:34:46 +00:00
|
|
|
function renderCoordinates(cell): string {
|
|
|
|
return `(${cell.join(', ')})`;
|
2020-01-02 16:58:06 +00:00
|
|
|
}
|
|
|
|
|
2020-04-28 05:16:47 +00:00
|
|
|
|
|
|
|
const CoordinatesBox = ({ view, hover, notifyCopy }) => (
|
|
|
|
<div
|
|
|
|
className="coorbox"
|
2020-05-11 07:13:34 +00:00
|
|
|
onClick={() => { copy(window.location.hash); notifyCopy(); }}
|
2020-04-28 05:16:47 +00:00
|
|
|
role="button"
|
2021-01-29 01:43:03 +00:00
|
|
|
title={t`Copy to Clipboard`}
|
2020-04-28 05:16:47 +00:00
|
|
|
tabIndex="0"
|
|
|
|
>{
|
2020-01-22 14:34:46 +00:00
|
|
|
renderCoordinates(hover
|
|
|
|
|| view.map(Math.round))
|
|
|
|
}</div>
|
2020-01-02 16:58:06 +00:00
|
|
|
);
|
|
|
|
|
2020-04-28 05:16:47 +00:00
|
|
|
function mapDispatchToProps(dispatch) {
|
|
|
|
return {
|
|
|
|
notifyCopy() {
|
2021-01-30 07:02:31 +00:00
|
|
|
dispatch(notify(t`Copied!`));
|
2020-04-28 05:16:47 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2020-01-02 16:58:06 +00:00
|
|
|
function mapStateToProps(state: State) {
|
|
|
|
const { view } = state.canvas;
|
|
|
|
const { hover } = state.gui;
|
2020-01-22 14:34:46 +00:00
|
|
|
return { view, hover };
|
2020-01-02 16:58:06 +00:00
|
|
|
}
|
|
|
|
|
2020-04-28 05:16:47 +00:00
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(CoordinatesBox);
|