-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ui(segmentation): Design Prototype for split panel component (#4378)
- Loading branch information
Showing
12 changed files
with
989 additions
and
2 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
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
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,43 @@ | ||
| // src/_pages/patterns.tsx | ||
|
|
||
| import React from 'react'; | ||
| import { createRoot } from 'react-dom/client'; | ||
| import '../tailwind.css'; | ||
|
|
||
| // component imports | ||
| import { Button } from '../components/Button'; | ||
| import { Input } from '../components/Input'; | ||
| import { Label } from '../components/Label'; | ||
| import { | ||
| Select, | ||
| SelectGroup, | ||
| SelectValue, | ||
| SelectTrigger, | ||
| SelectContent, | ||
| SelectLabel, | ||
| SelectItem, | ||
| SelectSeparator, | ||
| SelectScrollUpButton, | ||
| SelectScrollDownButton, | ||
| } from '../components/Select'; | ||
| import { Tabs, TabsList, TabsTrigger, TabsContent } from '../components/Tabs'; | ||
| import Separator from '../components/Separator'; | ||
| import { Switch } from '../components/Switch'; | ||
| import { Checkbox } from '../components/Checkbox'; | ||
| import { Toggle, toggleVariants } from '../components/Toggle'; | ||
| import { Slider } from '../components/Slider'; | ||
| import { ScrollArea, ScrollBar } from '../components/ScrollArea'; | ||
| import { PanelSplit } from '../_prototypes/PanelSplit'; // Updated import path | ||
|
|
||
| function Patterns() { | ||
| return ( | ||
| <div className="my-4 mx-auto max-w-6xl py-6"> | ||
| <div className="text-3xl"> Patterns 1 </div> | ||
| <PanelSplit />; | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const container = document.getElementById('root'); | ||
| const root = createRoot(container); | ||
| root.render(React.createElement(Patterns)); |
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
213 changes: 213 additions & 0 deletions
213
platform/ui-next/src/_prototypes/PanelSplit/ItemList.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,213 @@ | ||
| import React from 'react'; | ||
| import { Item, VisibilityState, AvailabilityState } from './types'; | ||
| import { Button } from '../../components/Button'; // Updated import path | ||
|
|
||
| interface ItemListProps { | ||
| items: Item[]; | ||
| onSelectItem: (item: Item) => void; | ||
| selectedItem: Item | null; | ||
| onToggleVisibility: (itemId: number) => void; // Prop for visibility toggle | ||
| onAddItem: (itemId: number) => void; // Prop for add button | ||
| } | ||
|
|
||
| /** | ||
| * ItemList Component | ||
| * | ||
| * Displays a list of items that can be selected, toggled for visibility, | ||
| * and added (changing availability). | ||
| * | ||
| * @param items - Array of items to display. | ||
| * @param onSelectItem - Callback when an item is selected. | ||
| * @param selectedItem - The currently selected item. | ||
| * @param onToggleVisibility - Callback when an item's visibility is toggled. | ||
| * @param onAddItem - Callback when an item's availability is changed to 'loaded'. | ||
| */ | ||
| const ItemList: React.FC<ItemListProps> = ({ | ||
| items, | ||
| onSelectItem, | ||
| selectedItem, | ||
| onToggleVisibility, | ||
| onAddItem, | ||
| }) => { | ||
| return ( | ||
| <ul | ||
| aria-label="Item List" | ||
| className="space-y-1" | ||
| > | ||
| {items.map(item => ( | ||
| <li key={item.id}> | ||
| <div className="flex items-center"> | ||
| {/* Conditionally render the Add button for 'available' items */} | ||
| {item.availability === 'available' && ( | ||
| <Button | ||
| variant="ghost" | ||
| size="icon" | ||
| onClick={e => { | ||
| e.stopPropagation(); // Prevent parent onClick | ||
| onAddItem(item.id); | ||
| }} | ||
| aria-label={`Add ${item.name}`} | ||
| className="ml-1 mr-1" | ||
| > | ||
| {/* Plus Icon */} | ||
| <svg | ||
| width="16px" | ||
| height="16px" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M12 5V19" | ||
| stroke="#348CFD" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| <path | ||
| d="M5 12H19" | ||
| stroke="#348CFD" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| </svg> | ||
| </Button> | ||
| )} | ||
|
|
||
| {/* All items are now rendered as clickable rows */} | ||
| <button | ||
| onClick={() => onSelectItem(item)} | ||
| className={`text-foreground flex h-7 w-full flex-grow cursor-pointer items-center justify-between rounded p-1 text-sm ${ | ||
| item.id === selectedItem?.id ? 'bg-primary/20' : 'bg-muted hover:bg-primary/30' | ||
| } focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-1`} | ||
| aria-pressed={item.id === selectedItem?.id} | ||
| > | ||
| <span className="ml-1">{item.name}</span> | ||
|
|
||
| {/* Conditionally render the "Available" label for 'available' items */} | ||
| {item.availability === 'available' && ( | ||
| <span className="text-muted-foreground text-xs">Available</span> | ||
| )} | ||
|
|
||
| {/* Conditionally render the visibility icon for 'loaded' items */} | ||
| {item.availability === 'loaded' && ( | ||
| <Button | ||
| variant="ghost" | ||
| size="icon" | ||
| onClick={e => { | ||
| e.stopPropagation(); // Prevent parent onClick | ||
| onToggleVisibility(item.id); | ||
| }} | ||
| aria-label={ | ||
| item.visibility === 'Visible' ? `Hide ${item.name}` : `Show ${item.name}` | ||
| } | ||
| > | ||
| {item.visibility === 'Visible' ? ( | ||
| // SVG Icon for "Visible" | ||
| <svg | ||
| width="24px" | ||
| height="24px" | ||
| viewBox="0 0 24 24" | ||
| > | ||
| <g | ||
| stroke="none" | ||
| strokeWidth="1" | ||
| fill="none" | ||
| fillRule="evenodd" | ||
| > | ||
| <rect | ||
| x="0" | ||
| y="0" | ||
| width="24" | ||
| height="24" | ||
| ></rect> | ||
| <circle | ||
| stroke="#348CFD" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| cx="12.4986195" | ||
| cy="11.8041442" | ||
| r="2.58684689" | ||
| ></circle> | ||
| <path | ||
| d="M20.906611,11.5617197 C20.0470387,10.5861089 16.6094888,7 12.4986195,7 | ||
| C8.38775024,7 4.95020027,10.5861089 4.090628,11.5617197 | ||
| C3.96979067,11.7007491 3.96979067,11.9075393 4.090628,12.0465687 | ||
| C4.95020027,13.0221796 8.38775024,16.6082885 12.4986195,16.6082885 | ||
| C16.6094888,16.6082885 20.0470387,13.0221796 20.906611,12.0465687 | ||
| C21.0274483,11.9075393 21.0274483,11.7007491 20.906611,11.5617197 Z" | ||
| stroke="#348CFD" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| ></path> | ||
| </g> | ||
| </svg> | ||
| ) : ( | ||
| // SVG Icon for "Hidden" | ||
| <svg | ||
| width="24px" | ||
| height="24px" | ||
| viewBox="0 0 24 24" | ||
| > | ||
| <g | ||
| stroke="none" | ||
| strokeWidth="1" | ||
| fill="none" | ||
| fillRule="evenodd" | ||
| > | ||
| <path | ||
| d="M18.0567826,8.96286957 | ||
| C19.1471229,9.75269568 20.1356859,10.674229 21,11.7065217 | ||
| C21,11.7065217 17.1949565,16.5108696 12.5,16.5108696 | ||
| C11.7479876,16.5066962 11.0007435,16.3911225 10.2826087,16.167913" | ||
| stroke="#348CFD" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| ></path> | ||
| <path | ||
| d="M6.93286957,14.4413043 | ||
| C5.84666081,13.6535964 4.86162018,12.7350857 4,11.7065217 | ||
| C4,11.7065217 7.80504348,6.90217391 12.5,6.90217391 | ||
| C13.1235541,6.90480509 13.7443251,6.98550531 14.3478261,7.1423913" | ||
| stroke="#348CFD" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| ></path> | ||
| <path | ||
| d="M9.54347826,11.7065217 | ||
| C9.54347826,10.0736799 10.8671581,8.75 12.5,8.75" | ||
| stroke="#348CFD" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| ></path> | ||
| <path | ||
| d="M15.4565217,11.7065217 | ||
| C15.4565217,13.3393636 14.1328419,14.6630435 12.5,14.6630435" | ||
| stroke="#348CFD" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| ></path> | ||
| <line | ||
| x1="19.7065217" | ||
| y1="4.5" | ||
| x2="5.29347826" | ||
| y2="18.9130435" | ||
| stroke="#348CFD" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| ></line> | ||
| </g> | ||
| </svg> | ||
| )} | ||
| </Button> | ||
| )} | ||
| </button> | ||
| </div> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| ); | ||
| }; | ||
|
|
||
| export default ItemList; |
Oops, something went wrong.