Add Activator groups
This commit is contained in:
parent
50d8a9670e
commit
b55324feab
|
@ -1,12 +1,18 @@
|
||||||
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 Activator from './components/Activator/Activator';
|
||||||
|
import Selector from './components/Selector/Selector';
|
||||||
|
|
||||||
const LightThemes = () => <Card name="Light Themes">
|
const LightThemes = () => <Card name="Light Themes">
|
||||||
<Activator title="Dark reds" activated={false} />
|
<Selector
|
||||||
<Activator title="Watery" activated={false} />
|
exclusive={true}
|
||||||
<Activator title="Sunset" activated={false} />
|
options={[
|
||||||
<Activator title="Darkness" activated={true} />
|
{ title: "Dark reds" },
|
||||||
|
{ title: "Watery" },
|
||||||
|
{ title: "Sunset" },
|
||||||
|
{ title: "Darkness" },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
const LightSetup = () => <div> </div>
|
const LightSetup = () => <div> </div>
|
||||||
|
@ -18,29 +24,39 @@ 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">
|
||||||
<Track name="City BGM" />
|
<Selector
|
||||||
<Track name="Chat on the streets" />
|
exclusive={false}
|
||||||
<Track name="Abandoned structure" />
|
options={[
|
||||||
<Track name="Water dripping" />
|
{ title: "City BGM" },
|
||||||
|
{ title: "Chat on the streets" },
|
||||||
|
{ title: "Abandoned structure" },
|
||||||
|
{ title: "Water dripping" },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
interface TrackProps {
|
interface TrackProps {
|
||||||
name: string,
|
name: string,
|
||||||
}
|
}
|
||||||
const Track = ({ name }: TrackProps) => <Activator title={name} activated={false} />
|
const Track = ({ name }: TrackProps) => <Activator title={name} />
|
||||||
|
|
||||||
const Presets = () => <Card name="Presets">
|
const Presets = () => <Card name="Presets">
|
||||||
<Scene name="Gilcrest Falls day" />
|
<Selector
|
||||||
<Scene name="Gilcrest Falls night" />
|
exclusive={true}
|
||||||
<Scene name="Empty colony" />
|
options={[
|
||||||
<Scene name="Surk colony" />
|
{ title: "Gilcrest Falls day" },
|
||||||
|
{ title: "Gilcrest Falls night" },
|
||||||
|
{ title: "Empty colony" },
|
||||||
|
{ title: "Surk colony" },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
interface PresetProps {
|
interface PresetProps {
|
||||||
name: string
|
name: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const Scene = ({ name }: PresetProps) => <Activator title={name} activated={false} />
|
// const Scene = ({ name }: PresetProps) => <Activator title={name} activated={false} />
|
||||||
|
|
||||||
const SceneEditor = () => <div> </div>
|
const SceneEditor = () => <div> </div>
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,18 @@
|
||||||
import './Activator.css';
|
import './Activator.css';
|
||||||
import { PropsWithChildren } from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
interface ActivatorProps {
|
export interface ActivatorProps {
|
||||||
title: string,
|
title: string,
|
||||||
icon?: string,
|
icon?: string,
|
||||||
activated: boolean,
|
activated?: boolean,
|
||||||
|
onSelected?: (key: string) => void,
|
||||||
}
|
}
|
||||||
|
|
||||||
const Activator = ({ title, icon, activated, children }: PropsWithChildren<ActivatorProps>) => {
|
const Activator = ({ title, activated = false, onSelected = (key) => {} }: ActivatorProps) => {
|
||||||
const classnames = activated ? "activator activator_enabled" : "activator";
|
const classnames = activated ? "activator activator_enabled" : "activator";
|
||||||
|
console.log("classnames ", activated, classnames);
|
||||||
return (
|
return (
|
||||||
<div className={classnames}>
|
<div className={classnames} onClick={() => onSelected(title)}>
|
||||||
<p> {title} </p>
|
<p> {title} </p>
|
||||||
</div>)
|
</div>)
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,6 +11,5 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__body {
|
.card__body {
|
||||||
display: flex;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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<ActivatorProps>;
|
||||||
|
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 =>
|
||||||
|
<Activator key={option.title} title={option.title} onSelected={(key: string) => dispatch(key)} activated={selected[option.title]} />
|
||||||
|
);
|
||||||
|
|
||||||
|
return (<div> {tiedOptions} </div>)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Selector;
|
Loading…
Reference in New Issue