diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx index 4ba6edb3..27887927 100644 --- a/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx +++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx @@ -1,9 +1,10 @@ import { Command } from 'cmdk'; import { ReactNode, useRef } from 'react'; +import { hasChildrens } from '@/utils/children'; + import { Box } from '../Box'; -import { QuickSearchGroup } from './QuickSearchGroup'; import { QuickSearchInput } from './QuickSearchInput'; import { QuickSearchStyle } from './QuickSearchStyle'; @@ -21,11 +22,8 @@ export type QuickSearchData = { showWhenEmpty?: boolean; }; -export type QuickSearchProps = { - data?: QuickSearchData[]; +export type QuickSearchProps = { onFilter?: (str: string) => void; - renderElement?: (element: T) => ReactNode; - onSelect?: (element: T) => void; inputValue?: string; inputContent?: ReactNode; showInput?: boolean; @@ -35,19 +33,16 @@ export type QuickSearchProps = { children?: ReactNode; }; -export const QuickSearch = ({ - onSelect, +export const QuickSearch = ({ onFilter, inputContent, inputValue, loading, showInput = true, - data, - renderElement, label, placeholder, children, -}: QuickSearchProps) => { +}: QuickSearchProps) => { const ref = useRef(null); return ( @@ -58,6 +53,7 @@ export const QuickSearch = ({ {showInput && ( ({ )} - - {!loading && - data?.map((group) => { - return ( - - ); - })} - {children} - + {children} diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx index 0cb44820..33cffcf8 100644 --- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx +++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx @@ -1,14 +1,15 @@ import { Command } from 'cmdk'; +import { ReactNode } from 'react'; import { Box } from '../Box'; -import { QuickSearchData, QuickSearchProps } from './QuickSearch'; +import { QuickSearchData } from './QuickSearch'; import { QuickSearchItem } from './QuickSearchItem'; type Props = { group: QuickSearchData; - onSelect?: QuickSearchProps['onSelect']; - renderElement: QuickSearchProps['renderElement']; + renderElement?: (element: T) => ReactNode; + onSelect?: (element: T) => void; }; export const QuickSearchGroup = ({ @@ -16,7 +17,6 @@ export const QuickSearchGroup = ({ onSelect, renderElement, }: Props) => { - console.log('group', group, group.emptyString && group.elements.length === 0); return ( void; placeholder?: string; children?: ReactNode; + withSeparator?: boolean; }; export const QuickSearchInput = ({ loading, @@ -22,6 +23,7 @@ export const QuickSearchInput = ({ onFilter, placeholder, children, + withSeparator: separator = true, }: Props) => { const { t } = useTranslation(); const { spacingsTokens } = useCunninghamTheme(); @@ -31,7 +33,7 @@ export const QuickSearchInput = ({ return ( <> {children} - + {separator && } ); } @@ -61,7 +63,7 @@ export const QuickSearchInput = ({ onValueChange={onFilter} /> - + {separator && } ); }; diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx index 977ea7a5..634d50f0 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx @@ -72,7 +72,6 @@ export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => { diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx index 8d91e76b..10abe492 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx @@ -1,8 +1,9 @@ -import { Button } from '@openfun/cunningham-react'; +import { Button, useModal } from '@openfun/cunningham-react'; import { DateTime } from 'luxon'; import { css } from 'styled-components'; import { Box, Icon, StyledLink, Text } from '@/components'; +import { DocShareModal } from '@/features/docs/doc-share/component/DocShareModal'; import { useResponsiveStore } from '@/stores'; import { Doc, LinkReach } from '../../doc-management'; @@ -16,90 +17,106 @@ type DocsGridItemProps = { export const DocsGridItem = ({ doc }: DocsGridItemProps) => { const { isDesktop } = useResponsiveStore(); + const shareModal = useModal(); const isPublic = doc.link_reach === LinkReach.PUBLIC; const isAuthenticated = doc.link_reach === LinkReach.AUTHENTICATED; const isRestricted = doc.link_reach === LinkReach.RESTRICTED; const sharedCount = doc.nb_accesses - 1; const isShared = sharedCount > 0; + const handleShareClick = () => { + shareModal.open(); + }; + return ( - - - - - - {isDesktop && ( - - - {DateTime.fromISO(doc.updated_at).toRelative()} - - - )} - + <> - {isDesktop && isPublic && ( - - )} - {isDesktop && !isPublic && isRestricted && isShared && ( - - )} - {isDesktop && !isPublic && isAuthenticated && ( - - )} - + + + {isDesktop && ( + + + {DateTime.fromISO(doc.updated_at).toRelative()} + + + )} + + + {isDesktop && isPublic && ( + + )} + {isDesktop && !isPublic && isRestricted && isShared && ( + + )} + {isDesktop && !isPublic && isAuthenticated && ( + + )} + + - + {shareModal.isOpen && ( + + )} + ); };