diff --git a/src/ControlDescriptionSheet.jsx b/src/ControlDescriptionSheet.jsx index ef0172a..375a9b6 100644 --- a/src/ControlDescriptionSheet.jsx +++ b/src/ControlDescriptionSheet.jsx @@ -15,6 +15,7 @@ import { useInteractions, } from "@floating-ui/react"; import { autoPlacement } from "@floating-ui/dom"; +import Input from "./ui/Input"; export default function ControlDescriptionSheet({ eventName, @@ -42,12 +43,7 @@ export default function ControlDescriptionSheet({ }); const role = useRole(context); - // Merge all the interactions into prop getters - const { getReferenceProps, getFloatingProps } = useInteractions([ - click, - dismiss, - role, - ]); + const { getFloatingProps } = useInteractions([click, dismiss, role]); return (
@@ -117,7 +113,11 @@ export default function ControlDescriptionSheet({ className="w-full focus:outline-none" style={{ height: "32px" }} // TODO: yuck > - + {typeof c.description[column] === "string" ? ( + + ) : ( + c.description[column]?.value + )} ))} @@ -161,6 +161,7 @@ export default function ControlDescriptionSheet({ } coordinates={descriptionSelector.coordinates} column={descriptionSelector.column} + allowValue={descriptionSelector.column === "F"} onSelect={(symbol) => { onChangeDescription(descriptionSelector.control.id, { ...descriptionSelector.control.description, @@ -197,7 +198,7 @@ function DescriptionSymbol({ symbol }) { const [svg, setSvg] = useState(); useEffect(() => { - if (symbol && symbol in descriptionSymbols) { + if (symbol && typeof symbol === "string" && symbol in descriptionSymbols) { descriptionSymbols[symbol]().then(setSvg); } else { setSvg(null); @@ -206,7 +207,7 @@ function DescriptionSymbol({ symbol }) { return svg ? {symbol} : null; } -function DescriptionSelector({ selected, column, onSelect }) { +function DescriptionSelector({ selected, column, allowValue, onSelect }) { const [tempSelection, setTempSelection] = useState(selected); useHotkeys("escape", () => onSelect(selected)); @@ -230,6 +231,16 @@ function DescriptionSelector({ selected, column, onSelect }) {
+ {allowValue ? ( + <> + + setTempSelection({ value: e.target.value })} + /> + + ) : null}