Rename Launcher components

This commit is contained in:
Savanni D'Gerinel 2024-08-20 12:07:38 -04:00
parent b9d089e4e6
commit 907b34c496
5 changed files with 17 additions and 17 deletions

View File

@ -1,10 +1,10 @@
import './App.css'; import './App.css';
import Card from './components/Card/Card'; import Card from './components/Card/Card';
import Activator from './components/Activator/Activator'; import Launcher from './components/Launcher/Launcher';
import Selector from './components/Selector/Selector'; import LauncherGroup from './components/LauncherGroup/LauncherGroup';
const LightThemes = () => <Card name="Light Themes"> const LightThemes = () => <Card name="Light Themes">
<Selector <LauncherGroup
exclusive={true} exclusive={true}
options={[ options={[
{ title: "Dark reds" }, { title: "Dark reds" },
@ -24,7 +24,7 @@ interface LightProps {
const Light = ({ name }: LightProps) => <div> <p> {name} </p> </div> const Light = ({ name }: LightProps) => <div> <p> {name} </p> </div>
const Tracks = () => <Card name="Tracks"> const Tracks = () => <Card name="Tracks">
<Selector <LauncherGroup
exclusive={false} exclusive={false}
options={[ options={[
{ title: "City BGM" }, { title: "City BGM" },
@ -38,10 +38,10 @@ const Tracks = () => <Card name="Tracks">
interface TrackProps { interface TrackProps {
name: string, name: string,
} }
const Track = ({ name }: TrackProps) => <Activator title={name} /> const Track = ({ name }: TrackProps) => <Launcher title={name} />
const Presets = () => <Card name="Presets"> const Presets = () => <Card name="Presets">
<Selector <LauncherGroup
exclusive={true} exclusive={true}
options={[ options={[
{ title: "Gilcrest Falls day" }, { title: "Gilcrest Falls day" },
@ -56,7 +56,7 @@ interface PresetProps {
name: string name: string
} }
// const Scene = ({ name }: PresetProps) => <Activator title={name} activated={false} /> // const Scene = ({ name }: PresetProps) => <Launcher title={name} activated={false} />
const SceneEditor = () => <div> </div> const SceneEditor = () => <div> </div>

View File

@ -1,14 +1,14 @@
import './Activator.css'; import './Launcher.css';
import React from 'react'; import React from 'react';
export interface ActivatorProps { export interface LauncherProps {
title: string, title: string,
icon?: string, icon?: string,
activated?: boolean, activated?: boolean,
onSelected?: (key: string) => void, onSelected?: (key: string) => void,
} }
const Activator = ({ title, activated = false, onSelected = (key) => {} }: ActivatorProps) => { const Launcher = ({ title, activated = false, onSelected = (key) => {} }: LauncherProps) => {
const classnames = activated ? "activator activator_enabled" : "activator"; const classnames = activated ? "activator activator_enabled" : "activator";
console.log("classnames ", activated, classnames); console.log("classnames ", activated, classnames);
return ( return (
@ -17,4 +17,4 @@ const Activator = ({ title, activated = false, onSelected = (key) => {} }: Activ
</div>) </div>)
} }
export default Activator; export default Launcher;

View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import Activator, { ActivatorProps } from '../Activator/Activator'; import Launcher, { LauncherProps } from '../Launcher/Launcher';
export interface Selectable { export interface Selectable {
onSelected?: (key: string) => void; onSelected?: (key: string) => void;
} }
interface SelectorProps { interface LauncherGroupProps {
options: Array<ActivatorProps>; options: Array<LauncherProps>;
exclusive: boolean; exclusive: boolean;
} }
@ -23,14 +23,14 @@ const multiSelect = (state: { [key: string]: boolean }, targetId: string) => {
} }
} }
const Selector = ({ options, exclusive }: SelectorProps) => { const LauncherGroup = ({ options, exclusive }: LauncherGroupProps) => {
const [selected, dispatch] = React.useReducer(exclusive ? exclusiveSelect : multiSelect, {}); const [selected, dispatch] = React.useReducer(exclusive ? exclusiveSelect : multiSelect, {});
let tiedOptions = options.map(option => let tiedOptions = options.map(option =>
<Activator key={option.title} title={option.title} onSelected={(key: string) => dispatch(key)} activated={selected[option.title]} /> <Launcher key={option.title} title={option.title} onSelected={(key: string) => dispatch(key)} activated={selected[option.title]} />
); );
return (<div> {tiedOptions} </div>) return (<div> {tiedOptions} </div>)
} }
export default Selector; export default LauncherGroup;