From f6db8327f7c179c0f9433bca187200f4d1df9cbe Mon Sep 17 00:00:00 2001 From: "Leon.kov" Date: Sat, 27 Apr 2024 12:21:50 +0300 Subject: [PATCH] fix: forwardRef for buttons, keys --- extractedTranslations/en/translation.json | 244 +++++++++--------- .../ui/ArticleViewSelector.tsx | 1 + src/shared/ui/redesigned/Button/Button.tsx | 90 ++++--- .../Popups/ui/ListBox/ListBox.module.scss | 9 +- .../redesigned/Popups/ui/ListBox/ListBox.tsx | 16 +- 5 files changed, 181 insertions(+), 179 deletions(-) diff --git a/extractedTranslations/en/translation.json b/extractedTranslations/en/translation.json index 1d5b748..8ba05d5 100644 --- a/extractedTranslations/en/translation.json +++ b/extractedTranslations/en/translation.json @@ -1,124 +1,124 @@ { - "": "", - "123": "123", - "About site": "", - "Admin panel": "", - "All": "", - "Article ratings coming soon!": "", - "Articles": "", - "Articles app": "", - "Articles not found": "", - "Ascending": "", - "Back to list": "", - "Cancel": "", - "Choose ": "", - "Choose country": "", - "Choose currency": "", - "Close": "", - "Comments": "", - "Comments is loading": "", - "Create new article": "", - "Creation date": "", - "Descending": "", - "Design options": "", - "Economics": "", - "Edit": "", - "Enter ": "", - "Enter comment text": "", - "Enter cooment text": "", - "Error while loading articles": "", - "Error with getting article data": "", - "Error with getting profile data": "", - "Exit": "", - "Here you can search and view articles on various topics": "", - "IT": "", - "Incorrect age": "", - "Incorrect country": "", - "Incorrect user data": "", - "Leave your feedback on the article, it will help improve the quality": "", - "Main page": "", - "Main_page": "", - "Name": "", - "New": "", - "No data": "", - "Old": "", - "PROFILE PAGE": "", - "Profile": "", - "Rate the article": "", - "Read more": { - "": { - "": { - "": "" - } - } - }, - "Recommend": "", - "Save": "", - "Science": "", - "Search": "", - "Send": "", - "Server error": "", - "Sort by": "", - "Sorting by": "", - "Thanks for review!": "", - "Try to reload page": "", - "User settings": "", - "Views": "", - "Welcome to the articles page!": "", - "You don`t have access to this page!": "", - "Your name": "", - "Your review": "", - "article_not_found": "", - "articles": "", - "articles page": "", - "articles_details": "", - "articles_details page": "", - "articles_detals": "", - "ascending": "", - "auth_form": "", - "auth_password": "", - "auth_username": "", - "by": "", - "comments": "", - "creation date": "", - "decrement": "", - "descending": "", - "exit": "", - "increment": "", - "login": "", - "login_error": "", - "name": "", - "no articles found": "", - "no comments": "", - "no profile found": "", - "read more": "", - "throw error": "throw error", - "views": "", - "{{count}} views": "", - "{{count}} views_plural": "", - "{{count}} просмотров": "", - "{{count}} просмотров_plural": "", - "Айти": "", - "Ваш отзыв": "", - "Все статьи": "", - "Главная страница": "", - "Закрыть": "", - "Наука": "", - "Обновить страницу": "", - "Отправить": "", - "Оценка статей скоро появится!": "", - "Поиск": "", - "Попробуйте обновить страницу": "", - "Произошла непредвиденная ошибка": "", - "Произошла ошибка при загрузке профиля": "", - "Редактировать": "", - "Сортировать ПО": "", - "Статьи не найдены": "", - "Экономика": "", - "возрастанию": "", - "дате создания": "", - "названию": "", - "по": "", - "просмотрам": "", - "убыванию": "" + "": "", + "123": "123", + "About site": "", + "Admin panel": "", + "All": "", + "Article ratings coming soon!": "", + "Articles": "", + "Articles app": "", + "Articles not found": "", + "Ascending": "", + "Back to list": "", + "Cancel": "", + "Choose ": "", + "Choose country": "", + "Choose currency": "", + "Close": "", + "Comments": "", + "Comments is loading": "", + "Create new article": "", + "Creation date": "", + "Descending": "", + "Design options": "", + "Economics": "", + "Edit": "", + "Enter ": "", + "Enter comment text": "", + "Enter cooment text": "", + "Error while loading articles": "", + "Error with getting article data": "", + "Error with getting profile data": "", + "Exit": "", + "Here you can search and view articles on various topics": "", + "IT": "", + "Incorrect age": "", + "Incorrect country": "", + "Incorrect user data": "", + "Leave your feedback on the article, it will help improve the quality": "", + "Main page": "", + "Main_page": "", + "Name": "", + "New": "", + "No data": "", + "Old": "", + "PROFILE PAGE": "", + "Profile": "", + "Rate the article": "", + "Read more": { + "": { + "": { + "": "" + } + } + }, + "Recommend": "", + "Save": "", + "Science": "", + "Search": "", + "Send": "", + "Server error": "", + "Sort by": "", + "Sorting by": "", + "Thanks for review!": "", + "Try to reload page": "", + "User settings": "", + "Views": "", + "Welcome to the articles page!": "", + "You don`t have access to this page!": "", + "Your name": "", + "Your review": "", + "article_not_found": "", + "articles": "", + "articles page": "", + "articles_details": "", + "articles_details page": "", + "articles_detals": "", + "ascending": "", + "auth_form": "", + "auth_password": "", + "auth_username": "", + "by": "", + "comments": "", + "creation date": "", + "decrement": "", + "descending": "", + "exit": "", + "increment": "", + "login": "", + "login_error": "", + "name": "", + "no articles found": "", + "no comments": "", + "no profile found": "", + "read more": "", + "throw error": "throw error", + "views": "", + "{{count}} views": "", + "{{count}} views_plural": "", + "{{count}} просмотров": "", + "{{count}} просмотров_plural": "", + "Айти": "", + "Ваш отзыв": "", + "Все статьи": "", + "Главная страница": "", + "Закрыть": "", + "Наука": "", + "Обновить страницу": "", + "Отправить": "", + "Оценка статей скоро появится!": "", + "Поиск": "", + "Попробуйте обновить страницу": "", + "Произошла непредвиденная ошибка": "", + "Произошла ошибка при загрузке профиля": "", + "Редактировать": "", + "Сортировать ПО": "", + "Статьи не найдены": "", + "Экономика": "", + "возрастанию": "", + "дате создания": "", + "названию": "", + "по": "", + "просмотрам": "", + "убыванию": "" } diff --git a/src/features/ArticleViewSelector/ui/ArticleViewSelector.tsx b/src/features/ArticleViewSelector/ui/ArticleViewSelector.tsx index 0f79205..0968810 100644 --- a/src/features/ArticleViewSelector/ui/ArticleViewSelector.tsx +++ b/src/features/ArticleViewSelector/ui/ArticleViewSelector.tsx @@ -49,6 +49,7 @@ export const ArticleViewSelector = memo((props: ArticleViewSelectorProps) => { className={classNames('', { [cls.notSelected]: viewType.view !== view, })} + key={viewType.view} /> ))} diff --git a/src/shared/ui/redesigned/Button/Button.tsx b/src/shared/ui/redesigned/Button/Button.tsx index 1429af5..afbaea5 100644 --- a/src/shared/ui/redesigned/Button/Button.tsx +++ b/src/shared/ui/redesigned/Button/Button.tsx @@ -1,4 +1,9 @@ -import React, { ButtonHTMLAttributes, memo, ReactNode } from 'react'; +import React, { + ButtonHTMLAttributes, + ForwardedRef, + forwardRef, + ReactNode, +} from 'react'; import { classNames, Mods } from '@/shared/lib/classNames/classNames'; import cls from './Button.module.scss'; @@ -20,43 +25,46 @@ interface ButtonProps extends ButtonHTMLAttributes { color?: ButtonColor; } -export const Button = memo((props: ButtonProps) => { - const { - className, - children, - variant = 'outline', - square, - isDisabled, - size = 'm', - fullWidth, - addonLeft, - addonRight, - color = 'normal', - - ...otherProps - } = props; - - const mods: Mods = { - [cls.square]: square, - [cls.isDisabled]: isDisabled, - [cls.fullWidth]: fullWidth, - [cls.withAddonLeft]: Boolean(addonLeft), - [cls.withAddonRight]: Boolean(addonRight), - [cls.withAddon]: Boolean(addonLeft) || Boolean(addonRight), - }; - - const additional = [className, cls[variant], cls[size], cls[color]]; - - return ( - - ); -}); +export const Button = forwardRef( + (props: ButtonProps, ref: ForwardedRef) => { + const { + className, + children, + variant = 'outline', + square, + isDisabled, + size = 'm', + fullWidth, + addonLeft, + addonRight, + color = 'normal', + + ...otherProps + } = props; + + const mods: Mods = { + [cls.square]: square, + [cls.isDisabled]: isDisabled, + [cls.fullWidth]: fullWidth, + [cls.withAddonLeft]: Boolean(addonLeft), + [cls.withAddonRight]: Boolean(addonRight), + [cls.withAddon]: Boolean(addonLeft) || Boolean(addonRight), + }; + + const additional = [className, cls[variant], cls[size], cls[color]]; + + return ( + + ); + }, +); diff --git a/src/shared/ui/redesigned/Popups/ui/ListBox/ListBox.module.scss b/src/shared/ui/redesigned/Popups/ui/ListBox/ListBox.module.scss index 3fa86bd..516cff0 100644 --- a/src/shared/ui/redesigned/Popups/ui/ListBox/ListBox.module.scss +++ b/src/shared/ui/redesigned/Popups/ui/ListBox/ListBox.module.scss @@ -1,17 +1,10 @@ -.trigger { - background: none; - border: none; - outline: none; - padding: 0; - margin: 0; -} - .options { background: var(--dark-bg-redesigned); position: absolute; z-index: 10000; border-radius: 12px; box-shadow: 4px 4px 8px var(--dark-bg-redesigned); + cursor: pointer; } .item { diff --git a/src/shared/ui/redesigned/Popups/ui/ListBox/ListBox.tsx b/src/shared/ui/redesigned/Popups/ui/ListBox/ListBox.tsx index 43a7876..a85cf82 100644 --- a/src/shared/ui/redesigned/Popups/ui/ListBox/ListBox.tsx +++ b/src/shared/ui/redesigned/Popups/ui/ListBox/ListBox.tsx @@ -59,15 +59,15 @@ export function ListBox(props: ListBoxProps) { value={value} onChange={onChange} > - - + } + > + {selectedItem?.content ?? defaultValue} +