Refactor/display input part 2 (#1555)

* Email - Money - Number

* Date

front/src/modules/ui/view-bar/components/DropdownButton.tsx

@@ -59,6 +59,10 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
   }
 `;
 
+/**
+ *
+ * @deprecated use ui/dropdown/components/DropdownButton.tsx instead
+ */
 function DropdownButton({
   anchor,
   label,

front/src/modules/ui/view-bar/components/FilterDropdownDateSearchInput.tsx

@@ -1,12 +1,14 @@
 import { Context } from 'react';
-import styled from '@emotion/styled';
 
-import DatePicker from '@/ui/input/components/DatePicker';
+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
+import { DatePicker } from '@/ui/input/components/DatePicker';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useUpsertFilter } from '@/ui/view-bar/hooks/useUpsertFilter';
 import { filterDefinitionUsedInDropdownScopedState } from '@/ui/view-bar/states/filterDefinitionUsedInDropdownScopedState';
 import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selectedOperandInDropdownScopedState';
 
+import { isFilterDropdownUnfoldedScopedState } from '../states/isFilterDropdownUnfoldedScopedState';
+
 export function FilterDropdownDateSearchInput({
   context,
 }: {
@@ -22,6 +24,11 @@ export function FilterDropdownDateSearchInput({
     context,
   );
 
+  const [, setIsFilterDropdownUnfolded] = useRecoilScopedState(
+    isFilterDropdownUnfoldedScopedState,
+    DropdownRecoilScopeContext,
+  );
+
   const upsertFilter = useUpsertFilter(context);
 
   function handleChange(date: Date) {
@@ -34,16 +41,15 @@ export function FilterDropdownDateSearchInput({
       operand: selectedOperandInDropdown,
       displayValue: date.toLocaleDateString(),
     });
+
+    setIsFilterDropdownUnfolded(false);
   }
 
   return (
     <DatePicker
       date={new Date()}
-      onChangeHandler={handleChange}
-      customInput={<></>}
-      customCalendarContainer={styled.div`
-        top: -10px;
-      `}
+      onChange={handleChange}
+      onMouseSelect={handleChange}
     />
   );
 }

front/src/modules/ui/view-bar/components/MultipleFiltersDropdownButton.tsx

@@ -1,6 +1,7 @@
-import { Context, useCallback, useState } from 'react';
+import { Context, useCallback } from 'react';
 
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
@@ -10,6 +11,7 @@ import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
 import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/ui/view-bar/states/isFilterDropdownOperandSelectUnfoldedScopedState';
 import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selectedOperandInDropdownScopedState';
 
+import { isFilterDropdownUnfoldedScopedState } from '../states/isFilterDropdownUnfoldedScopedState';
 import { isViewBarExpandedScopedState } from '../states/isViewBarExpandedScopedState';
 
 import DropdownButton from './DropdownButton';
@@ -39,7 +41,11 @@ export function MultipleFiltersDropdownButton({
   Icon,
   label,
 }: MultipleFiltersDropdownButtonProps) {
-  const [isUnfolded, setIsUnfolded] = useState(false);
+  const [isFilterDropdownUnfolded, setIsFilterDropdownUnfolded] =
+    useRecoilScopedState(
+      isFilterDropdownUnfoldedScopedState,
+      DropdownRecoilScopeContext,
+    );
 
   const [
     isFilterDropdownOperandSelectUnfolded,
@@ -93,7 +99,7 @@ export function MultipleFiltersDropdownButton({
       ((isPrimaryButton && !isFilterSelected) || !isPrimaryButton)
     ) {
       setHotkeyScope(hotkeyScope);
-      setIsUnfolded(true);
+      setIsFilterDropdownUnfolded(true);
       return;
     }
 
@@ -101,7 +107,7 @@ export function MultipleFiltersDropdownButton({
       setHotkeyScope(hotkeyScope);
     }
 
-    setIsUnfolded(false);
+    setIsFilterDropdownUnfolded(false);
     resetState();
   }
 
@@ -109,7 +115,7 @@ export function MultipleFiltersDropdownButton({
     <DropdownButton
       label={label ?? 'Filter'}
       isActive={isFilterSelected}
-      isUnfolded={isUnfolded}
+      isUnfolded={isFilterDropdownUnfolded}
       Icon={Icon}
       onIsUnfoldedChange={handleIsUnfoldedChange}
       hotkeyScope={hotkeyScope}

front/src/modules/ui/view-bar/components/SingleEntityFilterDropdownButton.tsx

@@ -1,8 +1,9 @@
-import { Context, useState } from 'react';
+import { Context } from 'react';
 import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { IconChevronDown } from '@/ui/icon';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
@@ -13,6 +14,7 @@ import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selec
 import { StyledHeaderDropdownButton } from '../../dropdown/components/StyledHeaderDropdownButton';
 import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
 import { filtersScopedState } from '../states/filtersScopedState';
+import { isFilterDropdownUnfoldedScopedState } from '../states/isFilterDropdownUnfoldedScopedState';
 import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
 
 import { DropdownMenuContainer } from './DropdownMenuContainer';
@@ -41,7 +43,11 @@ export function SingleEntityFilterDropdownButton({
   );
   const availableFilter = availableFilters[0];
 
-  const [isUnfolded, setIsUnfolded] = useState(false);
+  const [isFilterDropdownUnfolded, setIsFilterDropdownUnfolded] =
+    useRecoilScopedState(
+      isFilterDropdownUnfoldedScopedState,
+      DropdownRecoilScopeContext,
+    );
 
   const [filters] = useRecoilScopedState(filtersScopedState, context);
 
@@ -75,10 +81,10 @@ export function SingleEntityFilterDropdownButton({
   function handleIsUnfoldedChange(newIsUnfolded: boolean) {
     if (newIsUnfolded) {
       setHotkeyScope(hotkeyScope);
-      setIsUnfolded(true);
+      setIsFilterDropdownUnfolded(true);
     } else {
       setHotkeyScope(hotkeyScope);
-      setIsUnfolded(false);
+      setIsFilterDropdownUnfolded(false);
       setFilterDropdownSearchInput('');
     }
   }
@@ -86,8 +92,8 @@ export function SingleEntityFilterDropdownButton({
   return (
     <StyledDropdownButtonContainer>
       <StyledHeaderDropdownButton
-        isUnfolded={isUnfolded}
-        onClick={() => handleIsUnfoldedChange(!isUnfolded)}
+        isUnfolded={isFilterDropdownUnfolded}
+        onClick={() => handleIsUnfoldedChange(!isFilterDropdownUnfolded)}
       >
         {filters[0] ? (
           <GenericEntityFilterChip filter={filters[0]} />
@@ -96,7 +102,7 @@ export function SingleEntityFilterDropdownButton({
         )}
         <IconChevronDown size={theme.icon.size.md} />
       </StyledHeaderDropdownButton>
-      {isUnfolded && (
+      {isFilterDropdownUnfolded && (
         <DropdownMenuContainer onClose={() => handleIsUnfoldedChange(false)}>
           <FilterDropdownEntitySearchInput context={context} />
           <FilterDropdownEntitySelect context={context} />

front/src/modules/ui/view-bar/states/isFilterDropdownUnfoldedScopedState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const isFilterDropdownUnfoldedScopedState = atomFamily<boolean, string>({
+  key: 'isFilterDropdownUnfoldedScopedState',
+  default: false,
+});