todos-contra-el-fuego-web/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js
vjrj a1a1b9a801 deps: react-bootstrap 0.31 -> 2 (Bootstrap 5 CSS deferred as debt)
Removes the largest batch of React-19-blocking warnings: the 0.31
components (Grid, FormGroup, ControlLabel, Navbar.Header/Brand, Checkbox,
SafeAnchor) all leaned on legacy context / defaultProps.

29 files converted: Grid->Container, FormGroup/ControlLabel/FormControl/
HelpBlock -> Form.Group/Label/Control/Text, Checkbox -> Form.Check (label
as prop), bsStyle->variant (default->secondary), bsSize->size,
pull-right->float-end. Custom Col.js now re-exports v2's Col; custom
NavItem.js rewritten self-contained (no SafeAnchor/createChainedFunction);
Navigation.js drops react-bootstrap Navbar (raw markup anyway).

CSS stays on Bootstrap 4 (alexwine:bootstrap-4) for now: the BS4->5 jump
is entangled with the jQuery carousel/swipe + navbar-collapse and is
tracked as separate debt in UPGRADE.md. Only .form-label needed a shim
(forms.scss). Browser-verified home carousel+navbar, signup form + terms
checkbox, login form; REST smoke byte-identical.
2026-07-21 12:44:46 +02:00

66 lines
2.2 KiB
JavaScript

/* global Geolocation */
import React from 'react';
import PropTypes from 'prop-types';
import { Tracker } from 'meteor/tracker';
import { ReactiveVar } from 'meteor/reactive-var';
import { Button } from 'react-bootstrap';
import { withTranslation } from 'react-i18next';
import { Bert } from 'meteor/themeteorchef:bert';
import './CenterInMyPosition.scss';
class CenterInMyPosition extends React.Component {
onClick() {
// this.props.onClick(event);
// https://atmospherejs.com/mdg/geolocation
// only with SSL:
// https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
// https://stackoverflow.com/questions/31608579/somethings-wrong-with-my-meteor-geolocation-functions
const userGeoLocation = new ReactiveVar(null);
const self = this;
Tracker.autorun((computation) => {
userGeoLocation.set(Geolocation.latLng());
if (userGeoLocation.get()) {
// stop the tracker if we got something
const viewport = {
center: [userGeoLocation.get().lat, userGeoLocation.get().lng],
zoom: 11
};
self.props.onClick(viewport);
computation.stop();
}
// https://developer.mozilla.org/en-US/docs/Web/API/PositionError)
const error = Geolocation.error();
if (error) {
const cod = error.code;
// window.alert(cod);
if (cod === 1) Bert.alert(self.props.t('geo-not-perms-error'), 'danger');
else if (cod === 2) Bert.alert(self.props.t('geo-not-avail-error'), 'danger');
else if (cod === 3) Bert.alert(self.props.t('geo-not-timeout-error'), 'danger');
else Bert.alert(error.message, 'danger');
computation.stop();
}
});
}
render() {
const { onlyIcon, t } = this.props;
const msg = t('Centrar en tu ubicación');
return (
<Button variant="secondary" title={msg} onClick={() => this.onClick()}>
<i className="fa fa-crosshairs" />{!onlyIcon ? ` ${msg}` : ''}
</Button>);
}
}
CenterInMyPosition.defaultProps = {
onlyIcon: false
};
CenterInMyPosition.propTypes = {
t: PropTypes.func.isRequired,
onlyIcon: PropTypes.bool
};
export default withTranslation()(CenterInMyPosition);