twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-23 20:13:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

Sammy/t 138 when i select an option i see it (#84)

Browse Source 
* feature: remove selected filter item

* feature: add searchable field in dropdown
This commit is contained in:
Sammy Teillet 2023-04-26 19:10:05 +02:00 committed by GitHub
parent cabe6d4c36
commit 35cf3ee801
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
front/src/components/table/table-header/DropdownButton.tsx
View File

@ -111,6 +111,34 @@ const StyledIcon = styled.div`
justify-content: center; justify-content: center;
`; `;
const StyledSearchField = styled.li`
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(0, 0, 0, 0.04);
cursor: pointer;
color: ${(props) => props.theme.text60};
font-weight: ${(props) => props.theme.fontWeightBold};
border-radius: 0%;
border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
input {
height: 36px;
width: 100%;
border: none;
padding: 8px;
box-sizing: border-box;
&:hover {
background: rgba(0, 0, 0, 0.04);
}
}
input::placeholder {
color: ${(props) => props.theme.text40};
font-weight: ${(props) => props.theme.fontWeightBold};
}
`;
function DropdownButton({ function DropdownButton({
label, label,
isActive, isActive,
@ -160,6 +188,7 @@ function DropdownTopOptionAngleDown() {
); );
} }
DropdownButton.StyledDropdownItem = StyledDropdownItem; DropdownButton.StyledDropdownItem = StyledDropdownItem;
DropdownButton.StyledSearchField = StyledSearchField;
DropdownButton.StyledDropdownTopOption = StyledDropdownTopOption; DropdownButton.StyledDropdownTopOption = StyledDropdownTopOption;
DropdownButton.StyledDropdownTopOptionAngleDown = DropdownTopOptionAngleDown; DropdownButton.StyledDropdownTopOptionAngleDown = DropdownTopOptionAngleDown;
DropdownButton.StyledIcon = StyledIcon; DropdownButton.StyledIcon = StyledIcon;

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

@ -81,18 +81,6 @@ export function FilterDropdownButton({
function renderFilterDropdown(selectedFilter: FilterType) { function renderFilterDropdown(selectedFilter: FilterType) {
return [ 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 <DropdownButton.StyledDropdownTopOption
key={'selected-filter-operand'} key={'selected-filter-operand'}
onClick={() => setIsOptionUnfolded(true)} onClick={() => setIsOptionUnfolded(true)}
@ -101,6 +89,9 @@ export function FilterDropdownButton({
<DropdownButton.StyledDropdownTopOptionAngleDown /> <DropdownButton.StyledDropdownTopOptionAngleDown />
</DropdownButton.StyledDropdownTopOption>, </DropdownButton.StyledDropdownTopOption>,
<DropdownButton.StyledSearchField key={'search-filter'}>
<input type="text" placeholder={selectedFilter.label} />
</DropdownButton.StyledSearchField>,
someFieldRandomValue.map((value, index) => ( someFieldRandomValue.map((value, index) => (
<DropdownButton.StyledDropdownItem <DropdownButton.StyledDropdownItem
key={`fields-value-${index}`} key={`fields-value-${index}`}