Skip to content

Commit 0df12fc

Browse files
KiteniteKitenite
authored
refactor: div selected editor bar (#1906)
1 parent 90dc415 commit 0df12fc

File tree

8 files changed

+98
-68
lines changed

8 files changed

+98
-68
lines changed

‎apps/web/client/src/app/project/[id]/_components/editor-bar/div-selected.tsx

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,55 +8,59 @@ import { Border } from './dropdowns/border';
88
import { ColorBackground } from './dropdowns/color-background';
99
import { Display } from './dropdowns/display';
1010
import { Height } from './dropdowns/height';
11-
import { ImageBackground } from './dropdowns/img-background';
1211
import { Margin } from './dropdowns/margin';
1312
import { Opacity } from './dropdowns/opacity';
1413
import { Padding } from './dropdowns/padding';
1514
import { Radius } from './dropdowns/radius';
1615
import { Width } from './dropdowns/width';
17-
import { ViewButtons } from './panels/panel-bar/bar';
1816
import { InputSeparator } from './separator';
19-
20-
const COMPONENT_MAP: { [key: string]: any } = {
21-
Opacity,
22-
Width,
23-
Height,
24-
Display,
25-
Padding,
26-
Margin,
27-
Radius,
28-
Border,
29-
ColorBackground,
30-
ImageBackground,
31-
ViewButtons,
32-
};
17+
import { FontFamilySelector } from './text-inputs/font-family';
18+
import { FontSizeSelector } from './text-inputs/font-size';
19+
import { FontWeightSelector } from './text-inputs/font-weight';
3320

3421
// Group definitions for the div-selected toolbar
3522
export const DIV_SELECTED_GROUPS = [
3623
{
3724
key: 'dimensions',
3825
label: 'Dimensions',
39-
components: ['Width', 'Height'],
26+
components: [
27+
<Width />,
28+
<Height />,
29+
],
4030
},
4131
{
4232
key: 'base',
4333
label: 'Base',
44-
components: ['ColorBackground', 'Border', 'Radius'],
34+
components: [
35+
<ColorBackground />,
36+
<Border />,
37+
<Radius />,
38+
]
4539
},
4640
{
4741
key: 'layout',
4842
label: 'Layout',
49-
components: ['Display', 'Padding', 'Margin'],
43+
components: [
44+
<Display />,
45+
<Padding />,
46+
<Margin />,
47+
],
5048
},
5149
{
5250
key: 'typography',
5351
label: 'Typography',
54-
components: ['FontFamily', 'FontWeight', 'FontSize', 'FontColor', 'TextAlign'],
52+
components: [
53+
<FontFamilySelector fontFamily="Arial" />,
54+
<FontWeightSelector fontWeight="normal" handleFontWeightChange={() => { }} />,
55+
<FontSizeSelector fontSize={16} handleFontSizeChange={() => { }} />,
56+
],
5557
},
5658
{
5759
key: 'opacity',
5860
label: 'Opacity',
59-
components: ['Opacity'],
61+
components: [
62+
<Opacity />,
63+
]
6064
},
6165
];
6266

@@ -135,10 +139,11 @@ export const DivSelected = ({ availableWidth = 0 }: { availableWidth?: number })
135139
className="flex items-center justify-center gap-0.5"
136140
ref={el => { groupRefs.current[groupIdx] = el; }}
137141
>
138-
{group.components.map((compKey, idx) => {
139-
const Comp = COMPONENT_MAP[compKey];
140-
return Comp ? <Comp key={compKey + idx} /> : null;
141-
})}
142+
{group.components.map((comp, idx) => (
143+
<React.Fragment key={idx}>
144+
{comp}
145+
</React.Fragment>
146+
))}
142147
</div>
143148
))}
144149
</div>
@@ -150,10 +155,11 @@ export const DivSelected = ({ availableWidth = 0 }: { availableWidth?: number })
150155
<React.Fragment key={group.key}>
151156
{groupIdx > 0 && <InputSeparator />}
152157
<div className="flex items-center justify-center gap-0.5">
153-
{group.components.map((compKey, idx) => {
154-
const Comp = COMPONENT_MAP[compKey];
155-
return Comp ? <Comp key={compKey + idx} /> : null;
156-
})}
158+
{group.components.map((comp, idx) => (
159+
<React.Fragment key={idx}>
160+
{comp}
161+
</React.Fragment>
162+
))}
157163
</div>
158164
</React.Fragment>
159165
) : null
@@ -176,10 +182,11 @@ export const DivSelected = ({ availableWidth = 0 }: { availableWidth?: number })
176182
<React.Fragment key={group.key}>
177183
{groupIdx > 0 && <InputSeparator />}
178184
<div className="flex items-center gap-0.5">
179-
{group.components.map((compKey, idx) => {
180-
const Comp = COMPONENT_MAP[compKey];
181-
return Comp ? <Comp key={compKey + idx} /> : null;
182-
})}
185+
{group.components.map((comp, idx) => (
186+
<React.Fragment key={idx}>
187+
{comp}
188+
</React.Fragment>
189+
))}
183190
</div>
184191
</React.Fragment>
185192
))}

‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/advanced-typography.tsx renamed to ‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/advanced-typography.tsx

File renamed without changes.

‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/font-family.tsx renamed to ‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/font-family.tsx

File renamed without changes.

‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/font-size.tsx renamed to ‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/font-size.tsx

File renamed without changes.

‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/font-weight.tsx renamed to ‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/font-weight.tsx

File renamed without changes.

‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/text-align.tsx renamed to ‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/text-align.tsx

File renamed without changes.

‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/text-color.tsx renamed to ‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/text-color.tsx

File renamed without changes.

‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/index.tsx renamed to ‎apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected.tsx

Lines changed: 58 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,51 +4,71 @@ import { Button } from '@onlook/ui/button';
44
import { Icons } from '@onlook/ui/icons';
55
import { Popover, PopoverContent, PopoverTrigger } from '@onlook/ui/popover';
66
import React, { useCallback, useEffect, useRef, useState } from 'react';
7-
import { Border } from '../dropdowns/border';
8-
import { ColorBackground } from '../dropdowns/color-background';
9-
import { Display } from '../dropdowns/display';
10-
import { Height } from '../dropdowns/height';
11-
import { Margin } from '../dropdowns/margin';
12-
import { Opacity } from '../dropdowns/opacity';
13-
import { Padding } from '../dropdowns/padding';
14-
import { Radius } from '../dropdowns/radius';
15-
import { Width } from '../dropdowns/width';
16-
import { useTextControl } from '../hooks/use-text-control';
17-
import { ViewButtons } from '../panels/panel-bar/bar';
18-
import { InputSeparator } from '../separator';
19-
import { AdvancedTypography } from './advanced-typography';
20-
import { FontFamilySelector } from './font-family';
21-
import { FontSizeSelector } from './font-size';
22-
import { FontWeightSelector } from './font-weight';
23-
import { TextAlignSelector } from './text-align';
24-
import { TextColor } from './text-color';
7+
import { Border } from './dropdowns/border';
8+
import { ColorBackground } from './dropdowns/color-background';
9+
import { Display } from './dropdowns/display';
10+
import { Height } from './dropdowns/height';
11+
import { Margin } from './dropdowns/margin';
12+
import { Opacity } from './dropdowns/opacity';
13+
import { Padding } from './dropdowns/padding';
14+
import { Radius } from './dropdowns/radius';
15+
import { Width } from './dropdowns/width';
16+
import { useTextControl } from './hooks/use-text-control';
17+
import { ViewButtons } from './panels/panel-bar/bar';
18+
import { InputSeparator } from './separator';
19+
import { AdvancedTypography } from './text-inputs/advanced-typography';
20+
import { FontFamilySelector } from './text-inputs/font-family';
21+
import { FontSizeSelector } from './text-inputs/font-size';
22+
import { FontWeightSelector } from './text-inputs/font-weight';
23+
import { TextAlignSelector } from './text-inputs/text-align';
24+
import { TextColor } from './text-inputs/text-color';
2525

2626
// Group definitions for the text-selected toolbar
2727
export const TEXT_SELECTED_GROUPS = [
2828
{
2929
key: 'typography',
3030
label: 'Typography',
31-
components: ['FontFamily', 'FontWeight', 'FontSize', 'TextColor', 'TextAlign', 'AdvancedTypography'],
31+
components: [
32+
<FontFamilySelector fontFamily="Arial" />,
33+
<FontWeightSelector fontWeight="normal" handleFontWeightChange={() => { }} />,
34+
<FontSizeSelector fontSize={16} handleFontSizeChange={() => { }} />,
35+
<TextColor handleTextColorChange={() => { }} textColor="black" />,
36+
<TextAlignSelector textAlign="left" handleTextAlignChange={() => { }} />,
37+
<AdvancedTypography />,
38+
],
3239
},
3340
{
3441
key: 'dimensions',
3542
label: 'Dimensions',
36-
components: ['Width', 'Height'],
43+
components: [
44+
<Width />,
45+
<Height />,
46+
],
3747
},
3848
{
3949
key: 'base',
4050
label: 'Base',
41-
components: ['ColorBackground', 'Border', 'Radius'],
51+
components: [
52+
<ColorBackground />,
53+
<Border />,
54+
<Radius />,
55+
],
4256
},
4357
{
4458
key: 'layout',
4559
label: 'Layout',
46-
components: ['Display', 'Padding', 'Margin'],
60+
components: [
61+
<Display />,
62+
<Padding />,
63+
<Margin />,
64+
],
4765
},
4866
{
4967
key: 'opacity',
5068
label: 'Opacity',
51-
components: ['Opacity'],
69+
components: [
70+
<Opacity />,
71+
],
5272
},
5373
];
5474

@@ -175,10 +195,11 @@ export const TextSelected = ({ availableWidth = 0 }: { availableWidth?: number }
175195
className="flex items-center justify-center gap-0.5"
176196
ref={el => { groupRefs.current[groupIdx] = el; }}
177197
>
178-
{group.components.map((compKey, idx) => {
179-
const Comp = COMPONENT_MAP[compKey];
180-
return Comp ? <Comp key={compKey + idx} /> : null;
181-
})}
198+
{group.components.map((comp, idx) => (
199+
<React.Fragment key={idx}>
200+
{comp}
201+
</React.Fragment>
202+
))}
182203
</div>
183204
))}
184205
</div>
@@ -188,10 +209,11 @@ export const TextSelected = ({ availableWidth = 0 }: { availableWidth?: number }
188209
<React.Fragment key={group.key}>
189210
{groupIdx > 0 && <InputSeparator />}
190211
<div className="flex items-center justify-center gap-0.5">
191-
{group.components.map((compKey, idx) => {
192-
const Comp = COMPONENT_MAP[compKey];
193-
return Comp ? <Comp key={compKey + idx} /> : null;
194-
})}
212+
{group.components.map((comp, idx) => (
213+
<React.Fragment key={idx}>
214+
{comp}
215+
</React.Fragment>
216+
))}
195217
</div>
196218
</React.Fragment>
197219
) : null
@@ -214,10 +236,11 @@ export const TextSelected = ({ availableWidth = 0 }: { availableWidth?: number }
214236
<React.Fragment key={group.key}>
215237
{groupIdx > 0 && <InputSeparator />}
216238
<div className="flex items-center gap-0.5">
217-
{group.components.map((compKey, idx) => {
218-
const Comp = COMPONENT_MAP[compKey];
219-
return Comp ? <Comp key={compKey + idx} /> : null;
220-
})}
239+
{group.components.map((comp, idx) => (
240+
<React.Fragment key={idx}>
241+
{comp}
242+
</React.Fragment>
243+
))}
221244
</div>
222245
</React.Fragment>
223246
))}

0 commit comments

Comments
 (0)