-
-
Notifications
You must be signed in to change notification settings - Fork 447
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[UI/Fix] Categories improvements: make them composable, update style,…
… fix combination with filters (#3303) * Add an 'only' action to select one store/platform only * Only show 'only' action when hovering/focusing a filter * Filters: reset button, select style * Update locale * Categories improvements: compose categories, update style, fix issue with other filters * Fix i18next
- Loading branch information
Showing
9 changed files
with
182 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,106 @@ | ||
| import SelectField from '../SelectField' | ||
| import ContextProvider from 'frontend/state/ContextProvider' | ||
| import React, { useContext } from 'react' | ||
| import ContextProvider from 'frontend/state/ContextProvider' | ||
| import { useTranslation } from 'react-i18next' | ||
| import './index.css' | ||
| import ToggleSwitch from '../ToggleSwitch' | ||
|
|
||
| export default function CategoryFilter() { | ||
| const { customCategories, currentCustomCategory, setCurrentCustomCategory } = | ||
| useContext(ContextProvider) | ||
| const { | ||
| customCategories, | ||
| currentCustomCategories, | ||
| setCurrentCustomCategories | ||
| } = useContext(ContextProvider) | ||
| const { t } = useTranslation() | ||
|
|
||
| const toggleCategory = (category: string) => { | ||
| if (currentCustomCategories.includes(category)) { | ||
| const newCategories = currentCustomCategories.filter( | ||
| (cat) => cat !== category | ||
| ) | ||
| setCurrentCustomCategories(newCategories) | ||
| } else { | ||
| setCurrentCustomCategories([...currentCustomCategories, category]) | ||
| } | ||
| } | ||
|
|
||
| const setCategoryOnly = (category: string) => { | ||
| setCurrentCustomCategories([category]) | ||
| } | ||
|
|
||
| const selectAll = () => { | ||
| setCurrentCustomCategories( | ||
| ['preset_uncategorized'].concat(customCategories.listCategories()) | ||
| ) | ||
| } | ||
|
|
||
| const toggleWithOnly = ( | ||
| toggle: JSX.Element, | ||
| onOnlyClicked: () => void, | ||
| category: string | ||
| ) => { | ||
| return ( | ||
| <div className="toggleWithOnly" key={category}> | ||
| {toggle} | ||
| <button className="only" onClick={() => onOnlyClicked()}> | ||
| {t('header.only', 'only')} | ||
| </button> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const categoryToggle = (categoryName: string, categoryValue?: string) => { | ||
| const toggle = ( | ||
| <ToggleSwitch | ||
| htmlId={categoryValue || categoryName} | ||
| handleChange={() => toggleCategory(categoryValue || categoryName)} | ||
| value={currentCustomCategories.includes(categoryValue || categoryName)} | ||
| title={categoryName} | ||
| /> | ||
| ) | ||
|
|
||
| const onOnlyClick = () => { | ||
| setCategoryOnly(categoryValue || categoryName) | ||
| } | ||
|
|
||
| return toggleWithOnly(toggle, onOnlyClick, categoryValue || categoryName) | ||
| } | ||
|
|
||
| let dropdownContent = ( | ||
| <span> | ||
| {t( | ||
| 'header.no_categories', | ||
| 'No custom categories. Add categories using each game menu.' | ||
| )} | ||
| </span> | ||
| ) | ||
| const categoriesList = customCategories.listCategories() | ||
|
|
||
| if (categoriesList.length > 0) { | ||
| dropdownContent = ( | ||
| <> | ||
| {categoriesList.map((category) => categoryToggle(category))} | ||
| <hr /> | ||
| {categoryToggle( | ||
| t('header.uncategorized', 'Uncategorized'), | ||
| 'preset_uncategorized' | ||
| )} | ||
| <hr /> | ||
| <button | ||
| type="reset" | ||
| className="button is-primary" | ||
| onClick={() => selectAll()} | ||
| > | ||
| {t('header.select_all', 'Select All')} | ||
| </button> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <SelectField | ||
| htmlId="custom-category-selector" | ||
| value={currentCustomCategory || ''} | ||
| onChange={(e) => { | ||
| setCurrentCustomCategory(e.target.value) | ||
| }} | ||
| > | ||
| <option value="">{t('header.all_categories', 'All Categories')}</option> | ||
| <option value="preset_uncategorized"> | ||
| {t('header.uncategorized', 'Uncategorized')} | ||
| </option> | ||
| {customCategories.listCategories().map((category) => ( | ||
| <option value={category} key={category}> | ||
| {category} | ||
| </option> | ||
| ))} | ||
| </SelectField> | ||
| <div className="categoriesFilter"> | ||
| <button className="selectStyle"> | ||
| {t('header.categories', 'Categories')} | ||
| </button> | ||
| <div className="dropdown">{dropdownContent}</div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters