Skip to content

Commit 22b284a

Browse files
JinjiangJinjiang
committed
feat: use drawers on composition live controls ui
1 parent e571668 commit 22b284a

File tree

3 files changed

+102
-81
lines changed

3 files changed

+102
-81
lines changed

‎scopes/compositions/compositions/ui/compositions-panel/compositions-panel.module.scss

Lines changed: 20 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
overflow: hidden;
5+
width: 100%;
6+
height: 100%;
7+
}
8+
9+
.tab {
10+
> div:first-child {
11+
border: none;
12+
border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
13+
}
14+
> div:last-child {
15+
border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
16+
}
17+
}
18+
119
.linkWrapper {
220
padding: 0 12px;
321
display: flex;
@@ -100,34 +118,6 @@
100118
}
101119
}
102120

103-
.tabs {
104-
display: flex;
105-
align-items: center;
106-
margin-bottom: 17px;
107-
> div {
108-
position: relative;
109-
padding: 8px;
110-
text-transform: uppercase;
111-
font-size: 12px;
112-
font-weight: bold;
113-
&:not(:first-child) {
114-
color: #878c9a;
115-
}
116-
117-
&:first-child {
118-
&:before {
119-
content: '';
120-
position: absolute;
121-
top: 0;
122-
left: 0;
123-
right: 0;
124-
background-color: var(--bit-accent-color, #6c5ce7);
125-
height: 3px;
126-
border-radius: 10px;
127-
transition:
128-
background-color 300ms,
129-
height 300ms;
130-
}
131-
}
132-
}
121+
.noLiveControls {
122+
padding: 12px;
133123
}

‎scopes/compositions/compositions/ui/compositions-panel/compositions-panel.tsx

Lines changed: 63 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Icon } from '@teambit/evangelist.elements.icon';
22
import classNames from 'classnames';
33
import { useSearchParams } from 'react-router-dom';
44
import React, { useCallback, useEffect, useState } from 'react';
5+
import { DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';
56
import { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';
67
import { Tooltip } from '@teambit/design.ui.tooltip';
78
import { useNavigate, useLocation } from '@teambit/base-react.navigation.link';
@@ -48,6 +49,17 @@ export function CompositionsPanel({
4849
className,
4950
...rest
5051
}: CompositionsPanelProps) {
52+
// setup drawer state
53+
const [openDrawerList, onToggleDrawer] = useState(['COMPOSITIONS', 'LIVE_CONTROLS']);
54+
const handleDrawerToggle = (id: string) => {
55+
const isDrawerOpen = openDrawerList.includes(id);
56+
if (isDrawerOpen) {
57+
onToggleDrawer((list) => list.filter((drawer) => drawer !== id));
58+
return;
59+
}
60+
onToggleDrawer((list) => list.concat(id));
61+
};
62+
5163
// setup from props
5264
const shouldAddNameParam = useNameParam || (isScaling && includesEnvTemplate === false);
5365

@@ -124,41 +136,57 @@ export function CompositionsPanel({
124136
);
125137

126138
return (
127-
<div>
128-
<ul {...rest} className={classNames(className)}>
129-
{compositions.map((composition) => {
130-
const href = shouldAddNameParam
131-
? `${url}&name=${composition.identifier}`
132-
: `${url}&${composition.identifier}`;
133-
return (
134-
<li
135-
key={composition.identifier}
136-
className={classNames(styles.linkWrapper, composition === active && styles.active)}
137-
>
138-
<a className={styles.panelLink} onClick={() => handleSelect(composition)}>
139-
<span className={styles.box}></span>
140-
<span className={styles.name}>{composition.displayName}</span>
141-
</a>
142-
<div className={styles.right}>
143-
<MenuWidgetIcon
144-
className={styles.codeLink}
145-
icon="Code"
146-
tooltipContent="Code"
147-
onClick={onCompositionCodeClicked(composition)}
148-
/>
149-
<Tooltip content="Open in new tab" placement="bottom">
150-
<a className={styles.panelLink} target="_blank" rel="noopener noreferrer" href={href}>
151-
<Icon className={styles.icon} of="open-tab" />
152-
</a>
153-
</Tooltip>
154-
</div>
155-
</li>
156-
);
157-
})}
158-
</ul>
159-
{controlsTimestamp && (
160-
<LiveControls defs={controlsDefs} values={consolesValues} onChange={onLiveControlsUpdate} />
161-
)}
139+
<div className={classNames(styles.container)}>
140+
<DrawerUI
141+
isOpen={openDrawerList.includes('COMPOSITIONS')}
142+
onToggle={() => handleDrawerToggle('COMPOSITIONS')}
143+
name="COMPOSITIONS"
144+
className={classNames(styles.tab)}
145+
>
146+
<ul {...rest} className={classNames(className)}>
147+
{compositions.map((composition) => {
148+
const href = shouldAddNameParam
149+
? `${url}&name=${composition.identifier}`
150+
: `${url}&${composition.identifier}`;
151+
return (
152+
<li
153+
key={composition.identifier}
154+
className={classNames(styles.linkWrapper, composition === active && styles.active)}
155+
>
156+
<a className={styles.panelLink} onClick={() => handleSelect(composition)}>
157+
<span className={styles.box}></span>
158+
<span className={styles.name}>{composition.displayName}</span>
159+
</a>
160+
<div className={styles.right}>
161+
<MenuWidgetIcon
162+
className={styles.codeLink}
163+
icon="Code"
164+
tooltipContent="Code"
165+
onClick={onCompositionCodeClicked(composition)}
166+
/>
167+
<Tooltip content="Open in new tab" placement="bottom">
168+
<a className={styles.panelLink} target="_blank" rel="noopener noreferrer" href={href}>
169+
<Icon className={styles.icon} of="open-tab" />
170+
</a>
171+
</Tooltip>
172+
</div>
173+
</li>
174+
);
175+
})}
176+
</ul>
177+
</DrawerUI>
178+
<DrawerUI
179+
isOpen={openDrawerList.includes('LIVE_CONTROLS')}
180+
onToggle={() => handleDrawerToggle('LIVE_CONTROLS')}
181+
className={classNames(styles.tab)}
182+
name="LIVE CONTROLS"
183+
>
184+
{controlsTimestamp ? (
185+
<LiveControls defs={controlsDefs} values={consolesValues} onChange={onLiveControlsUpdate} />
186+
) : (
187+
<div className={styles.noLiveControls}>No live controls available for this composition</div>
188+
)}
189+
</DrawerUI>
162190
</div>
163191
);
164192
}

‎scopes/compositions/compositions/ui/compositions-panel/live-control-input.tsx

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
import React from 'react';
44
import { type Control } from './live-control.type';
5+
// import '@teambit/design.inputs.input-text';
6+
// import '@teambit/design.inputs.text-area';
7+
// import '@teambit/design.inputs.dropdown';
8+
// import '@teambit/design.ui.input.color-picker';
9+
// import '@teambit/design.inputs.date-picker';
10+
// import '@teambit/design.inputs.toggle-switch';
511

612
export type InputProps = {
713
id: string;
@@ -68,23 +74,20 @@ export function LiveControls({
6874
}) {
6975
return (
7076
<div>
71-
<div>Controls</div>
72-
<div>
73-
{defs.map((field) => {
74-
const key = field.id;
75-
const Input = getInputType(field);
76-
return (
77-
<div key={key}>
78-
<div>
79-
<label htmlFor={`control-${key}`}>{field.label || field.id}</label>
80-
</div>
81-
<div>
82-
<Input id={`control-${key}`} value={values[key]} onChange={(v: any) => onChange(key, v)} info={field} />
83-
</div>
77+
{defs.map((field) => {
78+
const key = field.id;
79+
const Input = getInputType(field);
80+
return (
81+
<div key={key}>
82+
<div>
83+
<label htmlFor={`control-${key}`}>{field.label || field.id}</label>
8484
</div>
85-
);
86-
})}
87-
</div>
85+
<div>
86+
<Input id={`control-${key}`} value={values[key]} onChange={(v: any) => onChange(key, v)} info={field} />
87+
</div>
88+
</div>
89+
);
90+
})}
8891
</div>
8992
);
9093
}

0 commit comments

Comments
 (0)