twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-19 17:42:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: extract render into methods (#81)

Browse Source
This commit is contained in:
Sammy Teillet 2023-04-26 17:38:05 +02:00 committed by GitHub
parent 04051e737f
commit 884080a9da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 74 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
front/src/components/table/table-header/FilterDropdownButton.tsx
View File

@ -53,6 +53,77 @@ export function FilterDropdownButton({
setSelectedFilterOperand(filterOperands[0]); setSelectedFilterOperand(filterOperands[0]);
}, []); }, []);
const renderSelectOptionItems = filterOperands.map((filterOperand, index) => (
<DropdownButton.StyledDropdownItem
key={`select-filter-operand-${index}`}
onClick={() => {
setSelectedFilterOperand(filterOperand);
setIsOptionUnfolded(false);
}}
>
{filterOperand.label}
</DropdownButton.StyledDropdownItem>
));
const renderSelectFilterITems = availableFilters.map((filter, index) => (
<DropdownButton.StyledDropdownItem
key={`select-filter-${index}`}
onClick={() => {
setSelectedFilter(filter);
}}
>
<DropdownButton.StyledIcon>
{filter.icon && <FontAwesomeIcon icon={filter.icon} />}
</DropdownButton.StyledIcon>
{filter.label}
</DropdownButton.StyledDropdownItem>
));
function renderFilterDropdown(selectedFilter: FilterType) {
return [
<DropdownButton.StyledDropdownTopOption
key={'selected-filter'}
onClick={() => setSelectedFilter(undefined)}
>
<DropdownButton.StyledIcon>
{selectedFilter.icon && (
<FontAwesomeIcon icon={selectedFilter.icon} />
)}
</DropdownButton.StyledIcon>
{selectedFilter.label}
<DropdownButton.StyledDropdownTopOptionAngleDown />
</DropdownButton.StyledDropdownTopOption>,
<DropdownButton.StyledDropdownTopOption
key={'selected-filter-operand'}
onClick={() => setIsOptionUnfolded(true)}
>
{selectedFilterOperand.label}
<DropdownButton.StyledDropdownTopOptionAngleDown />
</DropdownButton.StyledDropdownTopOption>,
someFieldRandomValue.map((value, index) => (
<DropdownButton.StyledDropdownItem
key={`fields-value-${index}`}
onClick={() => {
setFilters([
{
id: value,
operand: selectedFilterOperand,
label: selectedFilter.label,
value: value,
icon: selectedFilter.icon,
},
]);
setIsUnfolded(false);
setSelectedFilter(undefined);
}}
>
{value}
</DropdownButton.StyledDropdownItem>
)),
];
}
return ( return (
<DropdownButton <DropdownButton
label="Filter" label="Filter"
@ -63,72 +134,9 @@ export function FilterDropdownButton({
> >
{selectedFilter {selectedFilter
? isOptionUnfolded ? isOptionUnfolded
? filterOperands.map((filterOperand, index) => ( ? renderSelectOptionItems
<DropdownButton.StyledDropdownItem : renderFilterDropdown(selectedFilter)
key={`select-filter-operand-${index}`} : renderSelectFilterITems}
onClick={() => {
setSelectedFilterOperand(filterOperand);
setIsOptionUnfolded(false);
}}
>
{filterOperand.label}
</DropdownButton.StyledDropdownItem>
))
: [
<DropdownButton.StyledDropdownTopOption
key={'selected-filter'}
onClick={() => setSelectedFilter(undefined)}
>
<DropdownButton.StyledIcon>
{selectedFilter.icon && (
<FontAwesomeIcon icon={selectedFilter.icon} />
)}
</DropdownButton.StyledIcon>
{selectedFilter.label}
<DropdownButton.StyledDropdownTopOptionAngleDown />
</DropdownButton.StyledDropdownTopOption>,
<DropdownButton.StyledDropdownTopOption
key={'selected-filter-operand'}
onClick={() => setIsOptionUnfolded(true)}
>
{selectedFilterOperand.label}
<DropdownButton.StyledDropdownTopOptionAngleDown />
</DropdownButton.StyledDropdownTopOption>,
someFieldRandomValue.map((value, index) => (
<DropdownButton.StyledDropdownItem
key={`fields-value-${index}`}
onClick={() => {
setFilters([
{
id: value,
operand: selectedFilterOperand,
label: selectedFilter.label,
value: value,
icon: selectedFilter.icon,
},
]);
setIsUnfolded(false);
setSelectedFilter(undefined);
}}
>
{value}
</DropdownButton.StyledDropdownItem>
)),
]
: availableFilters.map((filter, index) => (
<DropdownButton.StyledDropdownItem
key={`select-filter-${index}`}
onClick={() => {
setSelectedFilter(filter);
}}
>
<DropdownButton.StyledIcon>
{filter.icon && <FontAwesomeIcon icon={filter.icon} />}
</DropdownButton.StyledIcon>
{filter.label}
</DropdownButton.StyledDropdownItem>
))}
</DropdownButton> </DropdownButton>
); );
} }