Skip to content

Commit

Permalink
adds inventory legend
Browse files Browse the repository at this point in the history
  • Loading branch information
andresgnlez committed Sep 13, 2023
1 parent 829e1ea commit a3ec5e7
Show file tree
Hide file tree
Showing 28 changed files with 627 additions and 261 deletions.
9 changes: 9 additions & 0 deletions app/components/collapsible/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';

const Collapsible = CollapsiblePrimitive.Root;

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;

export { Collapsible, CollapsibleTrigger, CollapsibleContent };
83 changes: 0 additions & 83 deletions app/components/map/legend/component.stories.tsx

This file was deleted.

96 changes: 0 additions & 96 deletions app/components/map/legend/component.tsx

This file was deleted.

58 changes: 58 additions & 0 deletions app/components/map/legend/group/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { ComponentProps, PropsWithChildren, useState } from 'react';

import { HiChevronDown, HiChevronUp } from 'react-icons/hi';

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'components/collapsible';
import { cn } from 'utils/cn';

const ICON_COMMON_CLASSES =
'text-white group-data-[state=open]:text-blue-400 group-data-[disabled]:hidden';

const LegendGroup = ({
title,
children,
defaultOpen = true,
className,
disabled = false,
...props
}: PropsWithChildren<
ComponentProps<typeof Collapsible> & {
title: string;
}
>): JSX.Element => {
const [isOpen, setOpen] = useState(defaultOpen && !disabled);

return (
<Collapsible
defaultOpen={defaultOpen && !disabled}
onOpenChange={setOpen}
className={cn({
group: true,
[className]: Boolean(className),
})}
disabled={disabled}
{...props}
>
<CollapsibleTrigger className="py-2">
<header
className={cn({
'flex items-center space-x-1': true,
'group-data-[disabled]:pl-4': true,
})}
>
{isOpen ? (
<HiChevronUp className={ICON_COMMON_CLASSES} />
) : (
<HiChevronDown className={ICON_COMMON_CLASSES} />
)}
<h4 className="text-sm font-semibold group-data-[disabled]:text-gray-300 group-data-[state=open]:text-blue-400">
{title}
</h4>
</header>
</CollapsibleTrigger>
<CollapsibleContent>{children}</CollapsibleContent>
</Collapsible>
);
};

export default LegendGroup;
1 change: 0 additions & 1 deletion app/components/map/legend/index.ts

This file was deleted.

63 changes: 63 additions & 0 deletions app/components/map/legend/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React, { useMemo, Children, isValidElement } from 'react';

import { ScrollArea } from 'components/scroll-area';
import { cn } from 'utils/cn';

import SortableList from './sortable/list';

export interface LegendProps {
open: boolean;
className?: string;
children: React.ReactNode;
maxHeight: string | number;
sortable?: {
enabled: boolean;
handle: boolean;
handleIcon: React.ReactNode;
};
onChangeOrder?: (id: string[]) => void;
onChangeOpen?: (open: boolean) => void;
}

export const Legend: React.FC<LegendProps> = ({
open,
children,
className = '',
maxHeight,
sortable,
onChangeOrder,
}: LegendProps) => {
const isChildren = useMemo(() => {
return !!Children.count(Children.toArray(children).filter((c) => isValidElement(c)));
}, [children]);

return (
<div
className={cn({
hidden: !isChildren,
[className]: !!className,
})}
>
{open && isChildren && (
<ScrollArea
className="relative flex w-full flex-grow flex-col rounded-3xl bg-black px-2 py-2 before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-black before:via-black after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-black after:via-black"
style={{
maxHeight,
}}
>
<div className="divide-y divide-gray-600 divide-opacity-50 py-2">
{!!sortable && (
<SortableList sortable={sortable} onChangeOrder={onChangeOrder}>
{children}
</SortableList>
)}

{!sortable && children}
</div>
</ScrollArea>
)}
</div>
);
};

export default Legend;
1 change: 0 additions & 1 deletion app/components/map/legend/item/index.ts

This file was deleted.

Loading

0 comments on commit a3ec5e7

Please sign in to comment.