Merge pull request #69 from twentyhq/sammy/t-130-when-a-sort-is-selected-i-see-the-sort

feature: add property isActive for dropdown buttons

front/src/components/table/table-header/DropdownButton.tsx

@@ -1,14 +1,14 @@
 import styled from '@emotion/styled';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useState, useRef } from 'react';
+import { useRef, ReactNode } from 'react';
 import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
 import { modalBackground } from '../../../layout/styles/themes';
-import { SortType } from './SortAndFilterBar';
 
 type OwnProps = {
   label: string;
-  options: Array<SortType>;
-  onSortSelect?: (id: string) => void;
+  isActive: boolean;
+  children?: ReactNode;
+  isUnfolded?: boolean;
+  setIsUnfolded?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const StyledDropdownButtonContainer = styled.div`
@@ -20,6 +20,7 @@ const StyledDropdownButtonContainer = styled.div`
 
 type StyledDropdownButtonProps = {
   isUnfolded: boolean;
+  isActive: boolean;
 };
 
 const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
@@ -27,6 +28,7 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
   margin-left: ${(props) => props.theme.spacing(3)};
   cursor: pointer;
   background: ${(props) => props.theme.primaryBackground};
+  color: ${(props) => (props.isActive ? props.theme.blue : 'none')};
   padding: ${(props) => props.theme.spacing(1)};
   border-radius: 4px;
   filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
@@ -85,15 +87,19 @@ const StyledIcon = styled.div`
   margin-right: ${(props) => props.theme.spacing(1)};
 `;
 
-function DropdownButton({ label, options, onSortSelect }: OwnProps) {
-  const [isUnfolded, setIsUnfolded] = useState(false);
-
+function DropdownButton({
+  label,
+  isActive,
+  children,
+  isUnfolded = false,
+  setIsUnfolded,
+}: OwnProps) {
   const onButtonClick = () => {
-    setIsUnfolded(!isUnfolded);
+    setIsUnfolded && setIsUnfolded(!isUnfolded);
   };
 
   const onOutsideClick = () => {
-    setIsUnfolded(false);
+    setIsUnfolded && setIsUnfolded(false);
   };
 
   const dropdownRef = useRef(null);
@@ -101,31 +107,21 @@ function DropdownButton({ label, options, onSortSelect }: OwnProps) {
 
   return (
     <StyledDropdownButtonContainer>
-      <StyledDropdownButton isUnfolded={isUnfolded} onClick={onButtonClick}>
+      <StyledDropdownButton
+        isUnfolded={isUnfolded}
+        onClick={onButtonClick}
+        isActive={isActive}
+      >
         {label}
       </StyledDropdownButton>
-      {isUnfolded && options.length > 0 && (
-        <StyledDropdown ref={dropdownRef}>
-          {options.map((option, index) => (
-            <StyledDropdownItem
-              key={index}
-              onClick={() => {
-                setIsUnfolded(false);
-                if (onSortSelect) {
-                  onSortSelect(option.id);
-                }
-              }}
-            >
-              <StyledIcon>
-                {option.icon && <FontAwesomeIcon icon={option.icon} />}
-              </StyledIcon>
-              {option.label}
-            </StyledDropdownItem>
-          ))}
-        </StyledDropdown>
+      {isUnfolded && (
+        <StyledDropdown ref={dropdownRef}>{children}</StyledDropdown>
       )}
     </StyledDropdownButtonContainer>
   );
 }
 
+DropdownButton.StyledDropdownItem = StyledDropdownItem;
+DropdownButton.StyledIcon = StyledIcon;
+
 export default DropdownButton;

front/src/components/table/table-header/SortDropdownButton.tsx

@@ -0,0 +1,50 @@
+import { useCallback, useState } from 'react';
+import DropdownButton from './DropdownButton';
+import { SortType } from './SortAndFilterBar';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+type OwnProps = {
+  sorts: SortType[];
+  setSorts: (sorts: SortType[]) => void;
+  sortsAvailable: SortType[];
+};
+
+export function SortDropdownButton({
+  sortsAvailable,
+  setSorts,
+  sorts,
+}: OwnProps) {
+  const [isUnfolded, setIsUnfolded] = useState(false);
+
+  const onSortItemSelect = useCallback(
+    (sort: SortType) => {
+      const newSorts = [sort];
+      setSorts(newSorts);
+    },
+    [setSorts],
+  );
+
+  return (
+    <DropdownButton
+      label="Sort"
+      isActive={sorts.length > 0}
+      isUnfolded={isUnfolded}
+      setIsUnfolded={setIsUnfolded}
+    >
+      {sortsAvailable.map((option, index) => (
+        <DropdownButton.StyledDropdownItem
+          key={index}
+          onClick={() => {
+            setIsUnfolded(false);
+            onSortItemSelect(option);
+          }}
+        >
+          <DropdownButton.StyledIcon>
+            {option.icon && <FontAwesomeIcon icon={option.icon} />}
+          </DropdownButton.StyledIcon>
+          {option.label}
+        </DropdownButton.StyledDropdownItem>
+      ))}
+    </DropdownButton>
+  );
+}

front/src/components/table/table-header/TableHeader.tsx

@@ -4,6 +4,7 @@ import DropdownButton from './DropdownButton';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import SortAndFilterBar, { SortType } from './SortAndFilterBar';
 import { useCallback, useState } from 'react';
+import { SortDropdownButton } from './SortDropdownButton';
 
 type OwnProps = {
   viewName: string;
@@ -50,19 +51,12 @@ function TableHeader({
   onSortsUpdate,
   sortsAvailable,
 }: OwnProps) {
-  const [sorts, setSorts] = useState([] as Array<SortType>);
+  const [sorts, innerSetSorts] = useState([] as Array<SortType>);
 
-  const onSortItemSelect = useCallback(
-    (sortId: string) => {
-      const newSorts = [
-        {
-          label: 'Created at',
-          order: 'asc',
-          id: sortId,
-        } satisfies SortType,
-      ];
-      setSorts(newSorts);
-      onSortsUpdate && onSortsUpdate(newSorts);
+  const setSorts = useCallback(
+    (sorts: SortType[]) => {
+      innerSetSorts(sorts);
+      onSortsUpdate && onSortsUpdate(sorts);
     },
     [onSortsUpdate],
   );
@@ -70,7 +64,7 @@ function TableHeader({
   const onSortItemUnSelect = useCallback(
     (sortId: string) => {
       const newSorts = [] as SortType[];
-      setSorts(newSorts);
+      innerSetSorts(newSorts);
       onSortsUpdate && onSortsUpdate(newSorts);
     },
     [onSortsUpdate],
@@ -86,13 +80,14 @@ function TableHeader({
           {viewName}
         </StyledViewSection>
         <StyledFilters>
-          <DropdownButton label="Filter" options={[]} />
-          <DropdownButton
-            label="Sort"
-            options={sortsAvailable}
-            onSortSelect={onSortItemSelect}
+          <DropdownButton label="Filter" isActive={false}></DropdownButton>
+          <SortDropdownButton
+            setSorts={setSorts}
+            sorts={sorts}
+            sortsAvailable={sortsAvailable}
           />
-          <DropdownButton label="Settings" options={[]} />
+
+          <DropdownButton label="Settings" isActive={false}></DropdownButton>
         </StyledFilters>
       </StyledTableHeader>
       {sorts.length > 0 && (