diff options
Diffstat (limited to 'extension/react-app/src/components/PillButton.tsx')
-rw-r--r-- | extension/react-app/src/components/PillButton.tsx | 45 |
1 files changed, 32 insertions, 13 deletions
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx index 5895a91c..0dcd43eb 100644 --- a/extension/react-app/src/components/PillButton.tsx +++ b/extension/react-app/src/components/PillButton.tsx @@ -84,8 +84,34 @@ interface PillButtonProps { index: number; addingHighlightedCode?: boolean; areMultipleItems?: boolean; + onDelete?: () => void; } +interface StyledButtonProps { + warning: string; + editing?: boolean; + areMultipleItems?: boolean; +} + +const StyledButton = styled(Button)<StyledButtonProps>` + position: relative; + border-color: ${(props) => + props.warning + ? "red" + : props.editing && props.areMultipleItems + ? vscForeground + : "transparent"}; + border-width: 1px; + border-style: solid; + + &:focus { + outline: none; + border-color: red; + border-width: 1px; + border-style: solid; + } +`; + const PillButton = (props: PillButtonProps) => { const [isHovered, setIsHovered] = useState(false); const client = useContext(GUIClientContext); @@ -132,17 +158,10 @@ const PillButton = (props: PillButtonProps) => { return ( <> <div style={{ position: "relative" }}> - <Button - style={{ - position: "relative", - borderColor: props.warning - ? "red" - : props.item.editing && props.areMultipleItems - ? vscForeground - : "transparent", - borderWidth: "1px", - borderStyle: "solid", - }} + <StyledButton + areMultipleItems={props.areMultipleItems} + warning={props.warning || ""} + editing={props.item.editing} onMouseEnter={() => { setIsHovered(true); if (props.onHover) { @@ -158,7 +177,7 @@ const PillButton = (props: PillButtonProps) => { className="pill-button" onKeyDown={(e) => { if (e.key === "Backspace") { - client?.deleteContextWithIds([props.item.description.id]); + props.onDelete?.(); } }} > @@ -202,7 +221,7 @@ const PillButton = (props: PillButtonProps) => { </GridDiv> )} {props.item.description.name} - </Button> + </StyledButton> <StyledTooltip id={`edit-${props.index}`}> {props.item.editing ? "Editing this section (with entire file as context)" |