[Задача 12794] Добавил счетчик опечаток с помощью bootstrap элемента Badge.…

[Задача 12794] Добавил счетчик опечаток с помощью bootstrap элемента Badge. Отображается только для активной вкладки.
parent cbead6a2
import React from 'react'
import {Nav, NavItem, NavLink, TabContent, TabPane, Alert} from "reactstrap";
import {Nav, NavItem, NavLink, TabContent, TabPane, Alert, Badge} from "reactstrap";
import TypoList from "./TypoList/";
export default class SiteList extends React.Component {
......@@ -56,6 +56,11 @@ export default class SiteList extends React.Component {
<NavLink className={this.state.activeTab === index ? "active" : ""}
onClick={() => { this.toggle(index) }}>
{site.name}
<Badge id={site.id + "-typos-count"} className={"typos-count"}
hidden={this.state.activeTab !== index}>
{this.typos.length}
</Badge>
</NavLink>
</NavItem>
);
......
......@@ -24,6 +24,7 @@ export default class TypoList extends Component {
alertify.success(`<p>Опечатка ${typoId} была подтверждена.</p>
<p>Исправления применены к тексту, содержащему опечатку.</p>`);
this.state.currentTypo++;
this._decrementSiteTyposCount();
this.forceUpdate();
});
}
......@@ -38,6 +39,7 @@ export default class TypoList extends Component {
this._setTypoStatus(0, typoId, this.state.siteId, () => {
alertify.success(`Опечатка ${typoId} была отклонена`);
this.state.currentTypo++;
this._decrementSiteTyposCount();
this.forceUpdate();
});
}
......@@ -108,4 +110,13 @@ export default class TypoList extends Component {
</div>
)
}
/**
* Уменьшает счетчик опечаток сайта
* @private
*/
_decrementSiteTyposCount() {
const value = parseInt($(`#${this.state.siteId}-typos-count`).text());
$(`#${this.state.siteId}-typos-count`).text(value-1);
}
}
\ No newline at end of file
.badge.typos-count {
margin-left: 10px;
color: black;
background-color: #ffc107;
}
\ No newline at end of file
......@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css';
// Общие стили
import './style.css'
import SiteList from "./components/SiteList";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment