36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { IBlock } from "../BlockList/Block";
|
|
import classes from "./classes.module.scss";
|
|
import Dropdown from "../../Dropdown";
|
|
import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption";
|
|
type IProps = {
|
|
blocks: IBlock[];
|
|
onSelectedBlock: (block: IBlock) => void;
|
|
defaultSelectedBlock?: IBlock;
|
|
};
|
|
|
|
export default function DropdownNavigation({ blocks, onSelectedBlock, defaultSelectedBlock = blocks[0] }: IProps) {
|
|
const [selectedBlock, setSelectedBlock] = React.useState<IBlock | null>(defaultSelectedBlock ?? null);
|
|
|
|
useEffect(() => {
|
|
if (defaultSelectedBlock) setSelectedBlock(defaultSelectedBlock);
|
|
}, [defaultSelectedBlock]);
|
|
|
|
return (
|
|
<div className={classes["root"]}>
|
|
<Dropdown
|
|
options={blocks.map((block) => {
|
|
return {
|
|
id: block.id,
|
|
label: {
|
|
subtext: block.primaryText,
|
|
text: block.secondaryText,
|
|
},
|
|
} as IOption;
|
|
})}
|
|
selectedOption={selectedBlock ? { id: selectedBlock.id, label: selectedBlock.primaryText } : undefined}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|