11import { Example , LoadExamples } from "../spicedb-common/examples" ;
2- import { faCaretDown } from "@fortawesome/free-solid-svg-icons" ;
3- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" ;
4- import { CircularProgress , MenuItem } from "@material-ui/core" ;
5- import Button from "@material-ui/core/Button" ;
6- import ListItemText from "@material-ui/core/ListItemText" ;
7- import Menu from "@material-ui/core/Menu" ;
8- import { Theme , createStyles , makeStyles } from "@material-ui/core/styles" ;
9- import React , { useEffect , useState } from "react" ;
102
11- const ITEM_HEIGHT = 68 ;
3+ import {
4+ Select ,
5+ SelectContent ,
6+ SelectItem ,
7+ SelectTrigger ,
8+ } from "@/components/ui/select" ;
129
13- const useStyles = makeStyles ( ( theme : Theme ) =>
14- createStyles ( {
15- loading : {
16- margin : theme . spacing ( 2 ) ,
17- display : "flex" ,
18- alignItems : "center" ,
19- } ,
20- } ) ,
21- ) ;
10+ import {
11+ AlertDialog ,
12+ AlertDialogAction ,
13+ AlertDialogCancel ,
14+ AlertDialogContent ,
15+ AlertDialogDescription ,
16+ AlertDialogFooter ,
17+ AlertDialogHeader ,
18+ AlertDialogTitle ,
19+ } from "@/components/ui/alert-dialog" ;
2220
23- export function ExamplesDropdown ( props : {
24- className ?: string ;
25- disabled ?: boolean ;
26- exampleSelected : ( example : Example ) => void ;
27- } ) {
28- const classes = useStyles ( ) ;
29-
30- const [ anchorEl , setAnchorEl ] = React . useState < null | HTMLElement > ( null ) ;
31- const handleClick = ( event : React . MouseEvent < HTMLElement > ) => {
32- setAnchorEl ( event . currentTarget ) ;
33- } ;
34-
35- const handleClose = ( ) => {
36- setAnchorEl ( null ) ;
37- } ;
21+ import { useEffect , useState } from "react" ;
3822
39- const [ examples , setExamples ] = useState < Example [ ] | undefined > ( undefined ) ;
23+ export function ExamplesDropdown ( {
24+ disabled,
25+ loadExample,
26+ } : {
27+ disabled : boolean ;
28+ loadExample : ( example : Example ) => void ;
29+ } ) {
30+ const [ examples , setExamples ] = useState < Example [ ] > ( ) ;
31+ const [ promptOpen , setPromptOpen ] = useState ( false ) ;
32+ const [ selectedExample , setSelectedExample ] = useState < Example > ( ) ;
4033
4134 useEffect ( ( ) => {
4235 const fetchExamples = async ( ) => {
@@ -47,64 +40,58 @@ export function ExamplesDropdown(props: {
4740 fetchExamples ( ) ;
4841 } , [ examples ] ) ;
4942
50- const exampleSelected = ( ex : Example ) => {
51- props . exampleSelected ( ex ) ;
52- setAnchorEl ( null ) ;
53- } ;
54-
5543 return (
5644 < >
57- < Button
58- size = "small"
59- disabled = { props . disabled }
60- className = { props . className }
61- onClick = { handleClick }
62- >
63- Select Example Schema
64- < FontAwesomeIcon icon = { faCaretDown } />
65- </ Button >
66- < Menu
67- anchorEl = { anchorEl }
68- getContentAnchorEl = { null }
69- anchorOrigin = { { vertical : "bottom" , horizontal : "left" } }
70- transformOrigin = { { vertical : "top" , horizontal : "left" } }
71- keepMounted
72- open = { Boolean ( anchorEl ) }
73- onClose = { handleClose }
74- PaperProps = { {
75- style : {
76- maxHeight : ITEM_HEIGHT * 4.5 ,
77- width : "50vw" ,
78- maxWidth : "500px" ,
79- } ,
45+ < Select
46+ onValueChange = { ( value ) => {
47+ const example = examples ?. find ( ( { id } ) => id === value ) ;
48+ if ( example ) {
49+ setSelectedExample ( example ) ;
50+ setPromptOpen ( true ) ;
51+ }
8052 } }
53+ disabled = { disabled || ! examples }
8154 >
82- { examples === undefined && (
83- < div className = { classes . loading } >
84- < CircularProgress />
85- </ div >
86- ) }
87- { examples !== undefined &&
88- examples . map ( ( example ) => {
55+ < SelectTrigger >
56+ { selectedExample ? selectedExample . title : "Select Example Schema" }
57+ </ SelectTrigger >
58+ < SelectContent >
59+ { examples ?. map ( ( example ) => {
8960 return (
90- < MenuItem
91- onClick = { ( ) => exampleSelected ( example ) }
92- key = { example . id }
93- >
94- < ListItemText
95- primary = { example . title }
96- secondary = { example . subtitle }
97- secondaryTypographyProps = { {
98- style : {
99- overflow : "hidden" ,
100- textOverflow : "ellipsis" ,
101- } ,
102- } }
103- />
104- </ MenuItem >
61+ < SelectItem value = { example . id } key = { example . id } >
62+ { example . title }
63+ < br />
64+ { example . subtitle }
65+ </ SelectItem >
10566 ) ;
10667 } ) }
107- </ Menu >
68+ </ SelectContent >
69+ </ Select >
70+ < AlertDialog open = { promptOpen } onOpenChange = { setPromptOpen } >
71+ < AlertDialogContent >
72+ < AlertDialogHeader >
73+ < AlertDialogTitle >
74+ Replace contents with "{ selectedExample ?. title } "?
75+ </ AlertDialogTitle >
76+ < AlertDialogDescription >
77+ This will replace all current Playground data with the example
78+ data for "{ selectedExample ?. title } "
79+ </ AlertDialogDescription >
80+ </ AlertDialogHeader >
81+ < AlertDialogFooter >
82+ < AlertDialogCancel > Cancel</ AlertDialogCancel >
83+ < AlertDialogAction
84+ onClick = { ( ) => {
85+ if ( selectedExample ) {
86+ loadExample ( selectedExample ) ;
87+ }
88+ } }
89+ >
90+ Replace with Example
91+ </ AlertDialogAction >
92+ </ AlertDialogFooter >
93+ </ AlertDialogContent >
94+ </ AlertDialog >
10895 </ >
10996 ) ;
11097}
0 commit comments