comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bootstrap: lang/type dropdowns jQuery -> react-bootstrap <Dropdown>

Browse source 
The false-positive-type selector (Fires.js) and the language selector
(Profile.js) used Bootstrap's jQuery dropdown (`data-toggle="dropdown"`), the
last widgets depending on the BS4 jQuery JS that goes away with the CSS swap.
Replace both with react-bootstrap <Dropdown>/<Dropdown.Toggle>/<Dropdown.Item>
(open/close in React, no jQuery). Keeps the `.lang-selector` hook and `.btn-group`
layout; works on the current BS4 CSS.

Full-app build boots clean.
This commit is contained in:
vjrj 2026-07-22 01:01:59 +02:00
parent f775d4ac26
commit 9ff9abacc3
2 changed files with 19 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

25
imports/ui/pages/Fires/Fires.js
View file

@ -6,7 +6,7 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { withTracker } from 'meteor/react-meteor-data';
import { withTranslation, Trans } from 'react-i18next';
import { Row, Col, Alert, Form } from 'react-bootstrap';
import { Row, Col, Alert, Form, Dropdown } from 'react-bootstrap';
import { Meteor } from 'meteor/meteor';
import { Bert } from 'meteor/themeteorchef:bert';
import { Helmet } from 'react-helmet-async';
@ -204,24 +204,19 @@ class Fire extends React.Component {
<Trans>Indícanos de que tipo de fuego se trata y ayúdanos así a mejorar nuestras notificaciones:</Trans>
</div>
<Form.Group>
<div className="btn-group">
<button className="btn btn-secondary btn-sm dropdown-toggle lang-selector" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<Dropdown className="btn-group">
<Dropdown.Toggle variant="secondary" size="sm" className="lang-selector">
{t('Elige un tipo')}
</button>
<div className="dropdown-menu">
</Dropdown.Toggle>
<Dropdown.Menu>
{Object.keys(FalsePositiveTypes).map(key => (
<button
className="dropdown-item"
onClick={() => this.onTypeSelect(key)}
key={key}
type="button"
>
<Trans>{FalsePositiveTypes[key]}</Trans>
</button>
<Dropdown.Item as="button" key={key} onClick={() => this.onTypeSelect(key)}>
<Trans>{FalsePositiveTypes[key]}</Trans>
</Dropdown.Item>
))
}
</div>
</div>
</Dropdown.Menu>
</Dropdown>
</Form.Group>
</Fragment> }

23
imports/ui/pages/Profile/Profile.js
View file

@ -3,7 +3,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Row, Form, Button } from 'react-bootstrap';
import { Row, Form, Button, Dropdown } from 'react-bootstrap';
import _ from 'lodash';
import { Meteor } from 'meteor/meteor';
import { Accounts } from 'meteor/accounts-base';
@ -200,24 +200,19 @@ class Profile extends React.Component {
</Form.Group>
<Form.Group>
<Form.Label>{this.t('Idioma')}</Form.Label>
<div className="btn-group">
<button className="btn btn-secondary btn-sm dropdown-toggle lang-selector" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<Dropdown className="btn-group">
<Dropdown.Toggle variant="secondary" size="sm" className="lang-selector">
{langName[i18n.language]}
</button>
<div className="dropdown-menu">
</Dropdown.Toggle>
<Dropdown.Menu>
{enabledLangs.map(lang => (
<button
className="dropdown-item"
onClick={() => this.onLangSelect(lang)}
key={lang}
type="button"
>
<Dropdown.Item as="button" key={lang} onClick={() => this.onLangSelect(lang)}>
{langName[lang]}
</button>
</Dropdown.Item>
))
}
</div>
</div>
</Dropdown.Menu>
</Dropdown>
<InputHint><i className="fa fa-language"></i> <a href="https://translate.comunes.org/projects/todos-contra-el-fuego/" rel="noopener noreferrer" target="_blank">{this.t('Puedes participar en las traducciones')}</a></InputHint>
</Form.Group>
<Form.Group>