github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-04-24 03:00:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: bugs in sort/filter ui

Browse Source
This commit is contained in:
dan13ram
2022-01-12 17:01:50 +05:30
committed by dan13ram
parent 925e3511fb
commit 507f1bfaf5
2 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/components/Player/Filter/DesktopFilters.tsx
View File

@@ -89,7 +89,9 @@ export const DesktopFilters: React.FC<Props> = ({
value={[sortOption]}
onChange={(value) => {
const values = value as ValueType[];
setSortOption(values[values.length - 1]);
if (values[values.length - 1]) {
setSortOption(values[values.length - 1]);
}
}}
options={sortOptions}
/>

27
packages/web/components/Player/Filter/MobileFilters.tsx
View File

@@ -209,11 +209,14 @@ export const MobileFilters: React.FC<Props> = ({
value={[sortOption]}
onChange={(value) => {
const values = value as ValueType[];
setSortOption(values[values.length - 1]);
if (values[values.length - 1]) {
setSortOption(values[values.length - 1]);
}
}}
options={sortOptions}
onBack={onBack}
isMulti={false}
disableEmpty
/>
)}
{selected === Selected.TYPE && (
@@ -331,6 +334,7 @@ type FilterContentProps = {
isMulti?: boolean;
showSearch?: boolean;
isTimezone?: boolean;
disableEmpty?: boolean;
};
const scrollbarVisible = (element: HTMLDivElement): boolean =>
@@ -343,20 +347,21 @@ const searchFilter: (searchText: string) => (v: ValueType) => boolean = (
value.toLowerCase().includes(searchText);
const FilterContent: React.FC<FilterContentProps> = ({
value: selectedValue,
value: savedValue,
onChange,
options: allOptions,
onBack,
isMulti = true,
showSearch = false,
isTimezone = false,
disableEmpty = false,
}) => {
const isCategoryFilter = useMemo(
() =>
allOptions.length > 0 && !!(allOptions as CategoryValueType[])[0].options,
[allOptions],
);
const [value, setValue] = useState(selectedValue);
const [value, setValue] = useState(savedValue);
const onClear = useCallback(() => {
setValue([]);
}, []);
@@ -367,6 +372,15 @@ const FilterContent: React.FC<FilterContentProps> = ({
const [options, setOptions] = useState(allOptions);
const [search, setSearch] = useState('');
const isChanged = useMemo(
() =>
value.length !== savedValue.length ||
value.reduce(
(t, i) => t || !savedValue.find((v) => v.value === i.value),
false,
),
[value, savedValue],
);
const onSearch = useCallback(
(searchText: string) => {
@@ -425,6 +439,7 @@ const FilterContent: React.FC<FilterContentProps> = ({
_hover={{ bg: 'whiteAlpha.100' }}
key={optionValue}
onClick={() => {
if (isSelected && disableEmpty && value.length === 1) return;
if (isMulti) {
if (isSelected) {
const newValue = value.slice();
@@ -462,7 +477,7 @@ const FilterContent: React.FC<FilterContentProps> = ({
</>
);
},
[isMulti, value],
[isMulti, value, disableEmpty],
);
const [hasScrollbar, setHasScrollbar] = useState(false);
@@ -539,7 +554,7 @@ const FilterContent: React.FC<FilterContentProps> = ({
</DrawerBody>
<DrawerFooter p="1.5rem">
<Flex direction="column" justify="center" w="100%" align="center">
{value.length > 0 && (
{value.length > 0 && (!disableEmpty || value.length > 1) && (
<Button
variant="link"
color="cyan.400"
@@ -552,7 +567,7 @@ const FilterContent: React.FC<FilterContentProps> = ({
CANCEL SELECTION
</Button>
)}
<MetaButton onClick={onSave} w="15rem">
<MetaButton onClick={onSave} isDisabled={!isChanged} w="15rem">
SAVE
</MetaButton>
</Flex>