-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #266 from Vizzuality/SKY30-374-fe-hierarchical-dat…
…a-table-to-simplify-layout-and-combine-duplicate-records [SKY30-374] Tables sub-row support, preliminary set up for national/high seas tables, horizontal scroll indicators, fixes
- Loading branch information
Showing
10 changed files
with
310 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { useQuery } from '@tanstack/react-query'; | ||
| import axios from 'axios'; | ||
|
|
||
| const MAPBOX_STYLES_ID = 'skytruth/clxk42ahk00as01qq1h4295jj'; | ||
|
|
||
| const LayerPreview: React.FC<{ | ||
| wdpaId: string; | ||
| bounds: [number, number, number, number]; | ||
| }> = ({ wdpaId, bounds }) => { | ||
| const { data } = useQuery(['layer-preview', wdpaId], { | ||
| queryFn: async () => { | ||
| return axios | ||
| .get(`https://api.mapbox.com/styles/v1/${MAPBOX_STYLES_ID}/static/${bounds}/75x75`, { | ||
| responseType: 'blob', | ||
| params: { | ||
| setfilter: `['==', ['get', 'WDPAID'], ${wdpaId}]`, | ||
| layer_id: 'mpa-intermediate-simp', // ! update this | ||
| access_token: process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN, | ||
| attribution: false, | ||
| logo: false, | ||
| // padding: 'auto', | ||
| }, | ||
| }) | ||
| .then((response) => response.data); | ||
| }, | ||
| enabled: !!wdpaId, | ||
| }); | ||
|
|
||
| const srcImage = data ? URL.createObjectURL(data) : null; | ||
|
|
||
| return ( | ||
| <div | ||
| className="absolute top-0 left-0 h-full w-full bg-cover bg-center bg-no-repeat" | ||
| style={{ | ||
| backgroundImage: `url(${srcImage})`, | ||
| }} | ||
| ></div> | ||
| ); | ||
| }; | ||
|
|
||
| export default LayerPreview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { PropsWithChildren, useEffect, useState } from 'react'; | ||
|
|
||
| import { cn } from '@/lib/classnames'; | ||
|
|
||
| export type ScrollPositions = 'start' | 'middle' | 'end'; | ||
|
|
||
| export type PositionalScrollProps = PropsWithChildren<{ | ||
| className?: string; | ||
| onXScrollPositionChange?: (position: ScrollPositions) => void; | ||
| onYScrollPositionChange?: (position: ScrollPositions) => void; | ||
| }>; | ||
|
|
||
| const PositionalScroll: React.FC<PositionalScrollProps> = ({ | ||
| className, | ||
| onXScrollPositionChange, | ||
| onYScrollPositionChange, | ||
| children, | ||
| }) => { | ||
| const [xPosition, setXPosition] = useState<ScrollPositions>('start'); | ||
| const [yPosition, setYPosition] = useState<ScrollPositions>('start'); | ||
|
|
||
| useEffect(() => { | ||
| if (!onXScrollPositionChange) return; | ||
| onXScrollPositionChange(xPosition); | ||
| }, [onXScrollPositionChange, xPosition]); | ||
|
|
||
| useEffect(() => { | ||
| if (!onYScrollPositionChange) return; | ||
| onYScrollPositionChange(yPosition); | ||
| }, [onYScrollPositionChange, yPosition]); | ||
|
|
||
| const handleScroll = (event) => { | ||
| const target = event.target; | ||
|
|
||
| const xAtStartPosition = target.scrollLeft === 0; | ||
| const xAtEndPosition = target.scrollLeft === target.scrollWidth - target.clientWidth; | ||
|
|
||
| const yAtStartPosition = target.scrollTop === 0; | ||
| const yAtEndPosition = target.scrollTop === target.scrollHeight - target.clientHeight; | ||
|
|
||
| const calculatedXPosition = xAtStartPosition ? 'start' : xAtEndPosition ? 'end' : 'middle'; | ||
| const calculatedYPosition = yAtStartPosition ? 'start' : yAtEndPosition ? 'end' : 'middle'; | ||
|
|
||
| if (calculatedXPosition !== xPosition) setXPosition(calculatedXPosition); | ||
| if (calculatedYPosition !== yPosition) setYPosition(calculatedYPosition); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={cn(className)} onScroll={handleScroll}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PositionalScroll; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
frontend/src/containers/map/content/details/table/expansion-controls/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { PropsWithChildren } from 'react'; | ||
|
|
||
| import { Row } from '@tanstack/react-table'; | ||
| import { GoTriangleDown } from 'react-icons/go'; | ||
| import { LuCornerDownRight } from 'react-icons/lu'; | ||
|
|
||
| import { GlobalRegionalTableColumns } from '@/containers/map/content/details/tables/global-regional/useColumns'; | ||
| import { NationalHighseasTableColumns } from '@/containers/map/content/details/tables/national-highseas/useColumns'; | ||
| import { cn } from '@/lib/classnames'; | ||
|
|
||
| export type ExpansionControlsProps = PropsWithChildren<{ | ||
| row: Row<GlobalRegionalTableColumns> | Row<NationalHighseasTableColumns>; | ||
| }>; | ||
|
|
||
| const ExpansionControls: React.FC<ExpansionControlsProps> = ({ row, children }) => { | ||
| const { depth, getIsExpanded, getCanExpand, getToggleExpandedHandler } = row; | ||
|
|
||
| const isParentRow = depth === 0; | ||
| const isRowExpandable = getCanExpand(); | ||
| const isRowExpanded = getIsExpanded(); | ||
| const toggleExpanded = getToggleExpandedHandler(); | ||
|
|
||
| return ( | ||
| <div className="flex items-center"> | ||
| {isRowExpandable && ( | ||
| <button | ||
| className="cursor pointer -ml-1.5 mr-1.5" | ||
| onClick={toggleExpanded} | ||
| aria-label={isRowExpanded ? 'Collapse sub-rows' : 'Expand sub-rows'} | ||
| > | ||
| <GoTriangleDown | ||
| className={cn({ | ||
| 'h-6 w-6 transition-transform': true, | ||
| '-rotate-90': !isRowExpanded, | ||
| })} | ||
| /> | ||
| </button> | ||
| )} | ||
| <span | ||
| className={cn({ | ||
| 'flex items-center pl-3': !isParentRow, | ||
| 'ml-6': isParentRow && !isRowExpandable, | ||
| })} | ||
| > | ||
| {depth > 0 && <LuCornerDownRight className="mr-3 h-5 w-5" />} | ||
| {children} | ||
| </span> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ExpansionControls; |
10 changes: 8 additions & 2 deletions
10
frontend/src/containers/map/content/details/table/header-item/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,13 @@ | ||
| import { PropsWithChildren } from 'react'; | ||
|
|
||
| const HeaderItem: React.FC<PropsWithChildren> = ({ children }) => { | ||
| return <span className="flex items-center gap-0">{children}</span>; | ||
| import { cn } from '@/lib/classnames'; | ||
|
|
||
| type HeaderItemProps = PropsWithChildren<{ | ||
| className?: string; | ||
| }>; | ||
|
|
||
| const HeaderItem: React.FC<HeaderItemProps> = ({ className, children }) => { | ||
| return <span className={cn('flex items-center gap-0', className)}>{children}</span>; | ||
| }; | ||
|
|
||
| export default HeaderItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
frontend/src/containers/map/content/details/table/scrolling-indicators/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { PropsWithChildren, useState } from 'react'; | ||
|
|
||
| import { LuChevronLeft, LuChevronRight } from 'react-icons/lu'; | ||
|
|
||
| import PositionalScroll, { ScrollPositions } from '@/components/positional-scroll'; | ||
| import { cn } from '@/lib/classnames'; | ||
|
|
||
| const COMMON_CLASSNAMES = { | ||
| border: 'absolute z-20 h-full border-r border-black', | ||
| iconWrapper: 'absolute border border-black p-px', | ||
| icon: 'h-4 w-4', | ||
| }; | ||
|
|
||
| export type ScrollingIndicatorsProps = PropsWithChildren<{ | ||
| className?: string; | ||
| }>; | ||
|
|
||
| const ScrollingIndicators: React.FC<ScrollingIndicatorsProps> = ({ className, children }) => { | ||
| const [xScrollPosition, setXScrollPosition] = useState<ScrollPositions>('start'); | ||
|
|
||
| return ( | ||
| <PositionalScroll className={cn(className)} onXScrollPositionChange={setXScrollPosition}> | ||
| {xScrollPosition !== 'end' && ( | ||
| <> | ||
| <span className={cn(COMMON_CLASSNAMES.border, 'right-0 top-0')}> | ||
| <span | ||
| className={cn(COMMON_CLASSNAMES.iconWrapper, '-right-px top-0 -translate-y-full')} | ||
| > | ||
| <LuChevronRight className={COMMON_CLASSNAMES.icon} /> | ||
| </span> | ||
| </span> | ||
| <span className={cn(COMMON_CLASSNAMES.border, 'right-0 bottom-0')}> | ||
| <span | ||
| className={cn(COMMON_CLASSNAMES.iconWrapper, '-right-px bottom-px translate-y-full')} | ||
| > | ||
| <LuChevronRight className={COMMON_CLASSNAMES.icon} /> | ||
| </span> | ||
| </span> | ||
| </> | ||
| )} | ||
| {xScrollPosition !== 'start' && ( | ||
| <> | ||
| <span className={cn(COMMON_CLASSNAMES.border, 'left-0 top-0')}> | ||
| <span className={cn(COMMON_CLASSNAMES.iconWrapper, 'left-0 top-0 -translate-y-full')}> | ||
| <LuChevronLeft className={COMMON_CLASSNAMES.icon} /> | ||
| </span> | ||
| </span> | ||
| <span className={cn(COMMON_CLASSNAMES.border, 'left-0 bottom-0')}> | ||
| <span | ||
| className={cn(COMMON_CLASSNAMES.iconWrapper, 'left-0 bottom-px translate-y-full')} | ||
| > | ||
| <LuChevronLeft className={COMMON_CLASSNAMES.icon} /> | ||
| </span> | ||
| </span> | ||
| </> | ||
| )} | ||
| {children} | ||
| </PositionalScroll> | ||
| ); | ||
| }; | ||
|
|
||
| export default ScrollingIndicators; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.