diff --git a/package-lock.json b/package-lock.json index b7f1663b1..7fac695ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "ISC", "dependencies": { + "numeralize-ru": "^2.0.0", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -4873,6 +4874,12 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/numeralize-ru": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/numeralize-ru/-/numeralize-ru-2.0.0.tgz", + "integrity": "sha512-6EDlOoJ/Bf7vhNzotsbDo9pWQBMd3aYDom3yAl2lj6sYeNEcNbZFbuWgstBq2w2HGXoBOhvSWdNhicZSetTiFQ==", + "license": "MIT" + }, "node_modules/object-inspect": { "version": "1.13.2", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz", @@ -10168,6 +10175,11 @@ "boolbase": "^1.0.0" } }, + "numeralize-ru": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/numeralize-ru/-/numeralize-ru-2.0.0.tgz", + "integrity": "sha512-6EDlOoJ/Bf7vhNzotsbDo9pWQBMd3aYDom3yAl2lj6sYeNEcNbZFbuWgstBq2w2HGXoBOhvSWdNhicZSetTiFQ==" + }, "object-inspect": { "version": "1.13.2", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz", diff --git a/package.json b/package.json index 52df4d73f..110fd07df 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ }, "homepage": "https://github.com/ylabio/react-webinar-3#readme", "dependencies": { + "numeralize-ru": "^2.0.0", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -31,9 +32,9 @@ "css-loader": "^7.1.2", "html-webpack-plugin": "^5.6.0", "mini-css-extract-plugin": "^2.9.1", + "prettier": "3.3.3", "webpack": "^5.94.0", "webpack-cli": "^5.1.4", - "webpack-dev-server": "^5.1.0", - "prettier": "3.3.3" + "webpack-dev-server": "^5.1.0" } } diff --git a/src/app.js b/src/app.js index 8ad1c64b4..b311b80a7 100644 --- a/src/app.js +++ b/src/app.js @@ -1,6 +1,7 @@ import React from 'react'; import { createElement } from './utils.js'; import './styles.css'; +import { getClicksCount } from './utils.js'; /** * Приложение @@ -27,7 +28,7 @@ function App({ store }) { onClick={() => store.selectItem(item.code)} >
{item.code}
-
{item.title}
+
{item.title}{getClicksCount(item)}
diff --git a/src/index.js b/src/index.js index faa61aa77..f8108ab67 100644 --- a/src/index.js +++ b/src/index.js @@ -3,16 +3,17 @@ import { createRoot } from 'react-dom/client'; import { createElement } from './utils.js'; import App from './app.js'; import Store from './store.js'; +import { getRandomNumber } from './utils.js'; const store = new Store({ list: [ - { code: 1, title: 'Название элемента' }, - { code: 2, title: 'Некий объект' }, - { code: 3, title: 'Заголовок' }, - { code: 4, title: 'Очень длинное название элемента из семи слов' }, - { code: 5, title: 'Запись' }, - { code: 6, title: 'Шестая запись' }, - { code: 7, title: 'Седьмая запись' }, + { code: getRandomNumber(), title: 'Название элемента' }, + { code: getRandomNumber(), title: 'Некий объект' }, + { code: getRandomNumber(), title: 'Заголовок' }, + { code: getRandomNumber(), title: 'Очень длинное название элемента из семи слов' }, + { code: getRandomNumber(), title: 'Запись' }, + { code: getRandomNumber(), title: 'Шестая запись' }, + { code: getRandomNumber(), title: 'Седьмая запись' }, ], }); diff --git a/src/store.js b/src/store.js index 9afab7e81..975ec543f 100644 --- a/src/store.js +++ b/src/store.js @@ -1,3 +1,4 @@ +import { getRandomNumber } from "./utils"; /** * Хранилище состояния приложения */ @@ -44,7 +45,7 @@ class Store { addItem() { this.setState({ ...this.state, - list: [...this.state.list, { code: this.state.list.length + 1, title: 'Новая запись' }], + list: [...this.state.list, { code: getRandomNumber(), title: 'Новая запись' }], }); } @@ -69,6 +70,11 @@ class Store { list: this.state.list.map(item => { if (item.code === code) { item.selected = !item.selected; + } else { + item.selected = ''; + } + if (item.selected) { + item.clickedTimes = item.clickedTimes ? item.clickedTimes + 1 : 1; } return item; }), diff --git a/src/utils.js b/src/utils.js index d1b605243..e98de35b6 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,3 +1,5 @@ +import { pluralize } from "numeralize-ru"; + const propNames = new Set(['id', 'className', 'textContent', 'onclick']); /** @@ -26,3 +28,19 @@ export function createElement(name, props = {}, ...children) { return element; } + +function generateRandomNumber() { + let number = 1; + return function() { + return number++; + }; +} + +export const getRandomNumber = generateRandomNumber(); + +export function getClicksCount(item) { + if (!item.clickedTimes) { + return ''; + } + return ` | Выделили ${item.clickedTimes} ${pluralize(item.clickedTimes, 'раз', 'раза', 'раз')}`; +}