Change to using arrow functions (#1603)

* Change to using arrow functions

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add lint rule

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/dropdown/components/DropdownButton.tsx

@@ -22,7 +22,7 @@ type OwnProps = {
   onClickOutside?: () => void;
 };
 
-export function DropdownButton({
+export const DropdownButton = ({
   buttonComponents,
   dropdownComponents,
   dropdownId,
@@ -30,7 +30,7 @@ export function DropdownButton({
   dropdownHotkeyScope,
   dropdownPlacement = 'bottom-end',
   onClickOutside,
-}: OwnProps) {
+}: OwnProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { isDropdownButtonOpen, toggleDropdownButton, closeDropdownButton } =
@@ -43,9 +43,9 @@ export function DropdownButton({
     middleware: [flip(), offset()],
   });
 
-  function handleHotkeyTriggered() {
+  const handleHotkeyTriggered = () => {
     toggleDropdownButton();
-  }
+  };
 
   useListenClickOutside({
     refs: [containerRef],
@@ -79,4 +79,4 @@ export function DropdownButton({
       )}
     </div>
   );
-}
+};

front/src/modules/ui/dropdown/components/DropdownMenuContainer.tsx

@@ -22,13 +22,13 @@ export type DropdownMenuContainerProps = {
   width?: `${string}px` | 'auto' | number;
 } & HTMLAttributes<HTMLUListElement>;
 
-export function DropdownMenuContainer({
+export const DropdownMenuContainer = ({
   anchor = 'right',
   children,
   onClose,
   width,
   ...props
-}: DropdownMenuContainerProps) {
+}: DropdownMenuContainerProps) => {
   const dropdownRef = useRef(null);
 
   useListenClickOutside({
@@ -45,4 +45,4 @@ export function DropdownMenuContainer({
       </StyledDropdownMenu>
     </StyledDropdownMenuContainer>
   );
-}
+};

front/src/modules/ui/dropdown/components/DropdownMenuHeader.tsx

@@ -46,12 +46,12 @@ type DropdownMenuHeaderProps = ComponentProps<'li'> & {
   EndIcon?: IconComponent;
 };
 
-export function DropdownMenuHeader({
+export const DropdownMenuHeader = ({
   children,
   StartIcon,
   EndIcon,
   ...props
-}: DropdownMenuHeaderProps) {
+}: DropdownMenuHeaderProps) => {
   const theme = useTheme();
 
   return (
@@ -69,4 +69,4 @@ export function DropdownMenuHeader({
       )}
     </StyledHeader>
   );
-}
+};