diff --git a/gm-dash/ui/src/App.tsx b/gm-dash/ui/src/App.tsx index cec4132..8f5ee62 100644 --- a/gm-dash/ui/src/App.tsx +++ b/gm-dash/ui/src/App.tsx @@ -1,12 +1,18 @@ import './App.css'; import Card from './components/Card/Card'; import Activator from './components/Activator/Activator'; +import Selector from './components/Selector/Selector'; const LightThemes = () => - - - - + const LightSetup = () =>
@@ -18,29 +24,39 @@ interface LightProps { const Light = ({ name }: LightProps) =>

{name}

const Tracks = () => - - - - + interface TrackProps { name: string, } -const Track = ({ name }: TrackProps) => +const Track = ({ name }: TrackProps) => const Presets = () => - - - - + interface PresetProps { name: string } -const Scene = ({ name }: PresetProps) => +// const Scene = ({ name }: PresetProps) => const SceneEditor = () =>
diff --git a/gm-dash/ui/src/components/Activator/Activator.tsx b/gm-dash/ui/src/components/Activator/Activator.tsx index f3e4b8c..6d5668f 100644 --- a/gm-dash/ui/src/components/Activator/Activator.tsx +++ b/gm-dash/ui/src/components/Activator/Activator.tsx @@ -1,16 +1,18 @@ import './Activator.css'; -import { PropsWithChildren } from 'react'; +import React from 'react'; -interface ActivatorProps { +export interface ActivatorProps { title: string, icon?: string, - activated: boolean, + activated?: boolean, + onSelected?: (key: string) => void, } -const Activator = ({ title, icon, activated, children }: PropsWithChildren) => { +const Activator = ({ title, activated = false, onSelected = (key) => {} }: ActivatorProps) => { const classnames = activated ? "activator activator_enabled" : "activator"; + console.log("classnames ", activated, classnames); return ( -
+
onSelected(title)}>

{title}

) } diff --git a/gm-dash/ui/src/components/Card/Card.css b/gm-dash/ui/src/components/Card/Card.css index bbdf4dd..51c70fb 100644 --- a/gm-dash/ui/src/components/Card/Card.css +++ b/gm-dash/ui/src/components/Card/Card.css @@ -11,6 +11,5 @@ } .card__body { - display: flex; } diff --git a/gm-dash/ui/src/components/Selector/Selector.css b/gm-dash/ui/src/components/Selector/Selector.css new file mode 100644 index 0000000..e69de29 diff --git a/gm-dash/ui/src/components/Selector/Selector.tsx b/gm-dash/ui/src/components/Selector/Selector.tsx new file mode 100644 index 0000000..ecbce9d --- /dev/null +++ b/gm-dash/ui/src/components/Selector/Selector.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import Activator, { ActivatorProps } from '../Activator/Activator'; + +export interface Selectable { + onSelected?: (key: string) => void; +} + +interface SelectorProps { + options: Array; + exclusive: boolean; +} + +const exclusiveSelect = (state: { [key: string]: boolean }, targetId: string) => { + console.log("running exclusiveSelect on ", targetId); + return { [targetId]: true }; +} + +const multiSelect = (state: { [key: string]: boolean }, targetId: string) => { + if (state[targetId]) { + return { ...state, [targetId]: false }; + } else { + return { ...state, [targetId]: true }; + } +} + +const Selector = ({ options, exclusive }: SelectorProps) => { + const [selected, dispatch] = React.useReducer(exclusive ? exclusiveSelect : multiSelect, {}); + + let tiedOptions = options.map(option => + dispatch(key)} activated={selected[option.title]} /> + ); + + return (
{tiedOptions}
) +} + +export default Selector;