From 72c66c4024a562f2058741ef971bfaa9db23d639 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 16 Feb 2024 11:37:41 +0800 Subject: [PATCH] Header checkbox states --- .../elements/icons/HeaderCheckboxIcon.tsx | 140 ++++- .../templates/homeFeed/LibraryHeader.tsx | 490 ++++++++---------- 2 files changed, 356 insertions(+), 274 deletions(-) diff --git a/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx index 6470053df..21b72d946 100644 --- a/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx +++ b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx @@ -4,8 +4,28 @@ import { IconProps } from './IconProps' import { SpanBox } from '../LayoutPrimitives' import React from 'react' +import { MultiSelectMode } from '../../templates/homeFeed/LibraryHeader' -export class HeaderCheckboxIcon extends React.Component { +type HeaderCheckboxIconProps = { + multiSelectMode: MultiSelectMode +} + +export const HeaderCheckboxIcon = ( + props: HeaderCheckboxIconProps +): JSX.Element => { + switch (props.multiSelectMode) { + case 'search': + case 'visible': + return + case 'none': + case 'off': + return + case 'some': + return + } +} + +export class HeaderCheckboxUncheckedIcon extends React.Component { render() { return ( { ) } } + +export class HeaderCheckboxCheckedIcon extends React.Component { + render() { + return ( + + + + + + + + + ) + } +} + +export class HeaderCheckboxHalfCheckedIcon extends React.Component { + render() { + return ( + + + + + + + + + {/* + + + + + */} + + ) + } +} diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx index a178bd4b7..61ab7b333 100644 --- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx +++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx @@ -1,24 +1,15 @@ -import { useEffect, useMemo, useRef, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' import { theme } from '../../tokens/stitches.config' import { FormInput } from '../../elements/FormElements' import { searchBarCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts' import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts' -import { locale, timeZone } from '../../../lib/dateFormatting' import { Button, IconButton } from '../../elements/Button' -import { - FunnelSimple, - MagnifyingGlass, - Prohibit, - Plus, - X, -} from 'phosphor-react' +import { FunnelSimple, MagnifyingGlass, Plus, X } from 'phosphor-react' import { LayoutType } from './HomeFeedContainer' import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo' import { DEFAULT_HEADER_HEIGHT, HeaderSpacer } from './HeaderSpacer' import { LIBRARY_LEFT_MENU_WIDTH } from '../navMenu/LibraryMenu' -import { CardCheckbox } from '../../patterns/LibraryCards/LibraryCardStyles' -import { Dropdown, DropdownOption } from '../../elements/DropdownElements' import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation' import { ConfirmationModal } from '../../patterns/ConfirmationModal' import { AddBulkLabelsModal } from '../article/AddBulkLabelsModal' @@ -26,13 +17,10 @@ import { Label } from '../../../lib/networking/fragments/labelFragment' import { ArchiveIcon } from '../../elements/icons/ArchiveIcon' import { TrashIcon } from '../../elements/icons/TrashIcon' import { LabelIcon } from '../../elements/icons/LabelIcon' -import { ListViewIcon } from '../../elements/icons/ListViewIcon' -import { GridViewIcon } from '../../elements/icons/GridViewIcon' -import { CaretDownIcon } from '../../elements/icons/CaretDownIcon' -import { PinnedButtons } from './PinnedButtons' -import { usePersistedState } from '../../../lib/hooks/usePersistedState' -import { PinnedSearch } from '../../../pages/settings/pinned-searches' -import { HeaderCheckboxIcon } from '../../elements/icons/HeaderCheckboxIcon' +import { + HeaderCheckboxCheckedIcon, + HeaderCheckboxIcon, +} from '../../elements/icons/HeaderCheckboxIcon' import { HeaderSearchIcon } from '../../elements/icons/HeaderSearchIcon' import { HeaderToggleGridIcon } from '../../elements/icons/HeaderToggleGridIcon' import { HeaderToggleListIcon } from '../../elements/icons/HeaderToggleListIcon' @@ -134,9 +122,10 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element { }} > {props.multiSelectMode !== 'off' ? ( - + <> + - + ) : ( )} @@ -144,6 +133,31 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element { ) } +const CheckBoxButton = (props: LibraryHeaderProps): JSX.Element => { + return ( + + ) +} + const HeaderControls = (props: LibraryHeaderProps): JSX.Element => { const [showSearchBar, setShowSearchBar] = useState(false) return ( @@ -156,17 +170,7 @@ const HeaderControls = (props: LibraryHeaderProps): JSX.Element => { > - + {showSearchBar ? ( @@ -441,262 +445,202 @@ type ControlButtonBoxProps = { function MultiSelectControls(props: ControlButtonBoxProps): JSX.Element { const [showConfirmDelete, setShowConfirmDelete] = useState(false) const [showLabelsModal, setShowLabelsModal] = useState(false) - - return ( - - - - - - {showConfirmDelete && ( - { - props.performMultiSelectAction(BulkAction.DELETE) - }} - onOpenChange={(open: boolean) => { - setShowConfirmDelete(false) - }} - /> - )} - {showLabelsModal && ( - { - const labelIds = labels.map((l) => l.id) - props.performMultiSelectAction(BulkAction.ADD_LABELS, labelIds) - }} - onOpenChange={(open: boolean) => { - setShowLabelsModal(false) - }} - /> - )} - - ) -} - -type SearchControlButtonBoxProps = ControlButtonBoxProps - -function SearchControlButtonBox( - props: SearchControlButtonBoxProps -): JSX.Element { - return ( - <> - - - ) -} - -const MuliSelectControl = (props: ControlButtonBoxProps): JSX.Element => { - const [isChecked, setIsChecked] = useState(false) - - useEffect(() => { - if (props.multiSelectMode === 'off' || props.multiSelectMode === 'none') { - setIsChecked(false) - } - }, [props.multiSelectMode]) + const compact = false return ( - { + e.preventDefault() }} > - { - const newValue = !isChecked - props.setMultiSelectMode(newValue ? 'visible' : 'off') - setIsChecked(newValue) + - - - } - > - { - setIsChecked(true) - props.setMultiSelectMode('visible') - }} - title="All" - /> - {/* { - setIsChecked(true) - props.setMultiSelectMode('search') - }} - title="All matching search" - /> */} - + > + {props.numItemsSelected} items selected - + + + + {showConfirmDelete && ( + { + props.performMultiSelectAction(BulkAction.DELETE) + }} + onOpenChange={(open: boolean) => { + setShowConfirmDelete(false) + }} + /> + )} + {showLabelsModal && ( + { + const labelIds = labels.map((l) => l.id) + props.performMultiSelectAction(BulkAction.ADD_LABELS, labelIds) + }} + onOpenChange={(open: boolean) => { + setShowLabelsModal(false) + }} + /> + )} + + + + // + // + // + // + // + // {showConfirmDelete && ( + // { + // props.performMultiSelectAction(BulkAction.DELETE) + // }} + // onOpenChange={(open: boolean) => { + // setShowConfirmDelete(false) + // }} + // /> + // )} + // {showLabelsModal && ( + // { + // const labelIds = labels.map((l) => l.id) + // props.performMultiSelectAction(BulkAction.ADD_LABELS, labelIds) + // }} + // onOpenChange={(open: boolean) => { + // setShowLabelsModal(false) + // }} + // /> + // )} + // ) } - -// function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element { -// return ( -// <> - -// -// -// {props.numItemsSelected}{' '} -// -// selected -// -// -// -// )} -// {/* {props.multiSelectMode !== 'off' ? ( -// <> -// -// -// -// ) : ( -// -// )} */} -// {/* */} - -// // {props.setShowInlineSearch && props.multiSelectMode === 'off' && ( -// // -// // -// // -// // -// // )} -// -// ) -// }