Jérémy M
0f1458cbe9
This PR fixes all followup that @Bonapara add on Discord. - [x] When no group by is set, clicking on group by should open the "field selection" menu - [x] When closed, chevron should be "chevron-right" instead of "chevron-up" - [x] Sort : Add ability to switch from alphabetical to manual when moving a option in sort alphabetical - [x] Add subtext for group by and sort - [x] Group by menu display bug - [x] Changing the sort should not close the menu - [x] Group by Activation -> shows empty state + is slow - [x] Switching from Kanban view Settings to Table Options menu displays an empty menu - [x] Unnecessary spacing under groups - [x] When no "select" are set on an object, redirect the user directly to the new Select field page - [x] Sort : Default should be manual - [x] Hidding "no value" displays all options and remove the "hide empty group" toggle - [x] Hide Empty group option disappeared - [x] Group by should not be persisted on "Locked/Main view" (**For now we just disable the group by on main view**) - [x] Hide Empty group should not be activated by default on Opportunities Kanban view - [ ] Animate the group opening/closing (**We'll be done later**) Performance improvement: https://github.com/user-attachments/assets/fd2acf66-0e56-45d0-8b2f-99c62e57d6f7 https://github.com/user-attachments/assets/80f1a2e1-9f77-4923-b85d-acb9cad96886 Also fix #9036 --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
|
|
import styled from '@emotion/styled';
|
|
import { useId } from 'react';
|
|
|
|
const StyledDropdownMenuItemsExternalContainer = styled.div<{
|
|
hasMaxHeight?: boolean;
|
|
}>`
|
|
--padding: ${({ theme }) => theme.spacing(1)};
|
|
|
|
align-items: flex-start;
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '188px' : 'none')};
|
|
|
|
padding: var(--padding);
|
|
|
|
width: calc(100% - 2 * var(--padding));
|
|
`;
|
|
|
|
const StyledDropdownMenuItemsInternalContainer = styled.div`
|
|
align-items: stretch;
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
height: 100%;
|
|
width: 100%;
|
|
`;
|
|
|
|
const StyledScrollWrapper = styled(ScrollWrapper)`
|
|
width: 100%;
|
|
`;
|
|
|
|
// TODO: refactor this, the dropdown should handle the max height behavior + scroll with the size middleware
|
|
// We should instead create a DropdownMenuItemsContainerScrollable or take for granted that it is the default behavior
|
|
export const DropdownMenuItemsContainer = ({
|
|
children,
|
|
hasMaxHeight,
|
|
className,
|
|
scrollable = true,
|
|
}: {
|
|
children: React.ReactNode;
|
|
hasMaxHeight?: boolean;
|
|
className?: string;
|
|
scrollable?: boolean;
|
|
}) => {
|
|
const id = useId();
|
|
|
|
return scrollable !== true ? (
|
|
<StyledDropdownMenuItemsExternalContainer
|
|
hasMaxHeight={hasMaxHeight}
|
|
className={className}
|
|
>
|
|
{hasMaxHeight ? (
|
|
<StyledScrollWrapper
|
|
contextProviderName="dropdownMenuItemsContainer"
|
|
componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}
|
|
>
|
|
<StyledDropdownMenuItemsInternalContainer>
|
|
{children}
|
|
</StyledDropdownMenuItemsInternalContainer>
|
|
</StyledScrollWrapper>
|
|
) : (
|
|
<StyledDropdownMenuItemsInternalContainer>
|
|
{children}
|
|
</StyledDropdownMenuItemsInternalContainer>
|
|
)}
|
|
</StyledDropdownMenuItemsExternalContainer>
|
|
) : (
|
|
<ScrollWrapper
|
|
contextProviderName="dropdownMenuItemsContainer"
|
|
componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}
|
|
heightMode="fit-content"
|
|
>
|
|
<StyledDropdownMenuItemsExternalContainer
|
|
hasMaxHeight={hasMaxHeight}
|
|
className={className}
|
|
>
|
|
<StyledDropdownMenuItemsInternalContainer>
|
|
{children}
|
|
</StyledDropdownMenuItemsInternalContainer>
|
|
</StyledDropdownMenuItemsExternalContainer>
|
|
</ScrollWrapper>
|
|
);
|
|
};
|