h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

State controlled tray mvp

Browse Source
This commit is contained in:
Kurt Hutten
2021-09-12 19:54:31 +10:00
parent e7031e9c0d
commit 69c83d33b1
3 changed files with 138 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/web/src/components/IdeSideBar/IdeSideBar.tsx
View File

@@ -1,6 +1,7 @@
import { useState } from 'react'
import Svg from 'src/components/Svg/Svg'
import { sidebarTopConfig, sidebarBottomConfig, sidebarCombinedConfig } from './sidebarConfig'
import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
function TabToggle({ item, className = "", active, onChange, onClick }) {
return (
@@ -20,29 +21,24 @@ function TabToggle({ item, className = "", active, onChange, onClick }) {
}
const IdeSideBar = () => {
const [selectedTab, setSelectedTab] = useState("")
const [lastOpen, setLastOpen] = useState("")
const { state, thunkDispatch } = useIdeContext()
function onTabClick(name) {
return function() {
if (selectedTab === name) {
setLastOpen(selectedTab)
setSelectedTab("")
} else if (selectedTab === "" && lastOpen === name) {
setSelectedTab(name)
}
thunkDispatch({type: 'settingsButtonClicked', payload: [name]})
}
}
const selectedTab = React.useMemo(() => sidebarCombinedConfig.find(item => item.name === state.sideTray[0]), [state.sideTray])
return (
<section className="flex h-full bg-ch-gray-900">
<section className="flex h-full bg-ch-gray-900 border border-red-500">
<fieldset className="h-full flex flex-col justify-between bg-ch-gray-700">
<div>
{ sidebarTopConfig.map((topItem, i) => (
<TabToggle
item={topItem}
active={ selectedTab === topItem.name }
onChange={ () => setSelectedTab(topItem.name) }
active={ state.sideTray[0] === topItem.name }
onChange={ () => onTabClick(topItem.name) }
onClick={ onTabClick(topItem.name) }
key={ 'tab-' + i }
/>
@@ -52,18 +48,18 @@ const IdeSideBar = () => {
{ sidebarBottomConfig.map((bottomItem, i) => (
<TabToggle
item={bottomItem}
active={ selectedTab === bottomItem.name }
onChange={ () => setSelectedTab(bottomItem.name) }
active={ state.sideTray[0] === bottomItem.name }
onChange={ () => onTabClick(bottomItem.name) }
onClick={ onTabClick(bottomItem.name) }
key={ 'tab-' + (sidebarTopConfig.length+i) }
/>
))}
</div>
</fieldset>
{ sidebarCombinedConfig.find(item => item.name === selectedTab)?.panel && (
{ selectedTab?.panel && (
<div className="w-56 bg-ch-gray-900 text-ch-gray-300 border border-ch-pink-800 border-opacity-30" style={{ height: 'calc(100% - 6px)', margin: '3px'}}>
<h2 className="flex items-center h-9 px-4 bg-ch-pink-800 bg-opacity-30">{ selectedTab }</h2>
{ sidebarCombinedConfig.find(item => item.name === selectedTab).panel }
<h2 className="flex items-center h-9 px-4 bg-ch-pink-800 bg-opacity-30">{ selectedTab.name }</h2>
{ selectedTab.panel }
</div>
) }
</section>

26
app/web/src/components/IdeSideBar/sidebarConfig.tsx
View File

@@ -1,5 +1,6 @@
import React, { ReactNode } from 'react'
import { SvgNames } from 'src/components/Svg/Svg'
import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
interface SidebarConfigType {
name: string,
@@ -67,7 +68,7 @@ export const sidebarBottomConfig : SidebarConfigType[] = [
name: 'Settings',
icon: 'gear',
disabled: false,
panel: <SettingsMenu />,
panel: <SettingsMenu parentName="Settings"/>,
},
]
@@ -76,15 +77,26 @@ export const sidebarCombinedConfig = [
...sidebarBottomConfig,
]
function SettingsMenu() {
function SettingsMenu({parentName}: {parentName: string}) {
const { state, thunkDispatch } = useIdeContext()
return (
<article className="">
{ settingsConfig.map(item => (
<details key={'settings-tray-'+item.name}>
<summary className="px-2 py-2 bg-ch-pink-800 bg-opacity-10 my-px">{ item.title }</summary>
{ item.content }
</details>
<li className="list-none" key={'settings-tray-'+item.name}>
<button className="px-2 py-2 bg-ch-pink-800 bg-opacity-10 my-px" onClick={() => {
console.log('i was clicked')
thunkDispatch((dispatch) => dispatch({type: 'settingsButtonClicked', payload:[parentName, item.name]}))
}} >{ item.title }</button>
{ state.sideTray.slice(-1)[0] === item.name && item.content }
</li>
// <details key={'settings-tray-'+item.name} open={state.sideTray.slice(-1)[0] === item.name}>
// <summary className="px-2 py-2 bg-ch-pink-800 bg-opacity-10 my-px"
// onClick={() => thunkDispatch((dispatch) => dispatch({type: 'settingsButtonClicked', payload:[parentName, item.name]}))}
// >{ item.title }hi there</summary>
// { state.sideTray.slice(-1)[0] === item.name && item.content }
// {state.sideTray.slice(-1)[0]}
// </details>
))}
</article>
)
}
}