Rename Launcher components
This commit is contained in:
parent
b55324feab
commit
0535b6da5a
|
@ -1,10 +1,10 @@
|
|||
import './App.css';
|
||||
import Card from './components/Card/Card';
|
||||
import Activator from './components/Activator/Activator';
|
||||
import Selector from './components/Selector/Selector';
|
||||
import Launcher from './components/Launcher/Launcher';
|
||||
import LauncherGroup from './components/LauncherGroup/LauncherGroup';
|
||||
|
||||
const LightThemes = () => <Card name="Light Themes">
|
||||
<Selector
|
||||
<LauncherGroup
|
||||
exclusive={true}
|
||||
options={[
|
||||
{ title: "Dark reds" },
|
||||
|
@ -24,7 +24,7 @@ interface LightProps {
|
|||
const Light = ({ name }: LightProps) => <div> <p> {name} </p> </div>
|
||||
|
||||
const Tracks = () => <Card name="Tracks">
|
||||
<Selector
|
||||
<LauncherGroup
|
||||
exclusive={false}
|
||||
options={[
|
||||
{ title: "City BGM" },
|
||||
|
@ -38,10 +38,10 @@ const Tracks = () => <Card name="Tracks">
|
|||
interface TrackProps {
|
||||
name: string,
|
||||
}
|
||||
const Track = ({ name }: TrackProps) => <Activator title={name} />
|
||||
const Track = ({ name }: TrackProps) => <Launcher title={name} />
|
||||
|
||||
const Presets = () => <Card name="Presets">
|
||||
<Selector
|
||||
<LauncherGroup
|
||||
exclusive={true}
|
||||
options={[
|
||||
{ title: "Gilcrest Falls day" },
|
||||
|
@ -56,7 +56,7 @@ interface PresetProps {
|
|||
name: string
|
||||
}
|
||||
|
||||
// const Scene = ({ name }: PresetProps) => <Activator title={name} activated={false} />
|
||||
// const Scene = ({ name }: PresetProps) => <Launcher title={name} activated={false} />
|
||||
|
||||
const SceneEditor = () => <div> </div>
|
||||
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
import './Activator.css';
|
||||
import './Launcher.css';
|
||||
import React from 'react';
|
||||
|
||||
export interface ActivatorProps {
|
||||
export interface LauncherProps {
|
||||
title: string,
|
||||
icon?: string,
|
||||
activated?: boolean,
|
||||
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";
|
||||
console.log("classnames ", activated, classnames);
|
||||
return (
|
||||
|
@ -17,4 +17,4 @@ const Activator = ({ title, activated = false, onSelected = (key) => {} }: Activ
|
|||
</div>)
|
||||
}
|
||||
|
||||
export default Activator;
|
||||
export default Launcher;
|
|
@ -1,12 +1,12 @@
|
|||
import React from 'react';
|
||||
import Activator, { ActivatorProps } from '../Activator/Activator';
|
||||
import Launcher, { LauncherProps } from '../Launcher/Launcher';
|
||||
|
||||
export interface Selectable {
|
||||
onSelected?: (key: string) => void;
|
||||
}
|
||||
|
||||
interface SelectorProps {
|
||||
options: Array<ActivatorProps>;
|
||||
interface LauncherGroupProps {
|
||||
options: Array<LauncherProps>;
|
||||
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, {});
|
||||
|
||||
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>)
|
||||
}
|
||||
|
||||
export default Selector;
|
||||
export default LauncherGroup;
|
Loading…
Reference in New Issue