Skip to content

Commit df4971b

Browse files
mu29mu29
committed
fix: use Segment component in EditorControl and PropertyControlRadio
1 parent c4918aa commit df4971b

File tree

5 files changed

+22
-129
lines changed

5 files changed

+22
-129
lines changed

‎packages/react/src/editor/EditorControl/EditorControl.module.css‎

Lines changed: 2 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,5 @@
1-
.EditorControl {
2-
display: flex;
3-
align-items: center;
4-
justify-content: space-between;
5-
padding: 0.75rem;
1+
.editorControl {
2+
padding: 12px;
63
border-bottom: 1px solid var(--composify-palette-outline);
74
background-color: var(--composify-palette-surface);
85
}
9-
10-
.EditorControl-ModeGroup {
11-
display: flex;
12-
align-items: center;
13-
gap: 0.0625rem;
14-
padding: 0.125rem;
15-
border-radius: 0.25rem;
16-
border: 1px solid var(--composify-palette-outline);
17-
background-color: var(--composify-palette-surface-container);
18-
}
19-
20-
.EditorControl-ModeButton {
21-
display: flex;
22-
align-items: center;
23-
justify-content: center;
24-
padding: 0.4375rem 0.5rem;
25-
fill: var(--composify-palette-on-surface);
26-
background-color: transparent;
27-
border: none;
28-
border-radius: 0.25rem;
29-
outline: none;
30-
cursor: pointer;
31-
}
32-
33-
.EditorControl-ModeButton--active {
34-
fill: var(--composify-palette-on-secondary);
35-
background-color: var(--composify-palette-secondary);
36-
}
37-
38-
.EditorControl-SaveButton {
39-
padding: 0.4375rem 0.75rem;
40-
font-size: 0.75rem;
41-
font-weight: 500;
42-
line-height: 1.4;
43-
border-radius: 0.25rem;
44-
cursor: pointer;
45-
color: var(--composify-palette-on-primary);
46-
background-color: var(--composify-palette-primary);
47-
border: 1px solid var(--composify-palette-primary);
48-
}
49-
50-
.EditorControl-SaveButton:hover {
51-
opacity: 0.9;
52-
transition: opacity 0.1s linear;
53-
}

‎packages/react/src/editor/EditorControl/EditorControl.tsx‎

Lines changed: 16 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import { CodeXmlIcon, MonitorIcon, SquareSplitHorizontalIcon } from 'lucide-react';
12
import { type FC, type ReactNode, useCallback } from 'react';
2-
import { Button } from '../../preset';
3-
import { getClassNameFactory } from '../../utils';
3+
import { Button, HStack, Segment } from '../../preset';
4+
import { createVariants } from '../../utils';
45
import { useEditing } from '../EditingContext';
56
import styles from './EditorControl.module.css';
67

7-
const getClassName = getClassNameFactory('EditorControl', styles);
8+
const variants = createVariants(styles);
89

910
export type EditMode = 'visual' | 'code' | 'split';
1011

@@ -32,43 +33,24 @@ export const EditorControl: FC<Props> = ({ mode, setMode, renderControl, onSubmi
3233
}, [getSource, onSubmit]);
3334

3435
return (
35-
<div className={getClassName()}>
36-
<div className={getClassName('ModeGroup')}>
37-
<button
38-
type="button"
39-
className={getClassName('ModeButton', { active: mode === 'visual' })}
40-
onClick={() => handleSwitchMode('visual')}
41-
>
42-
<svg xmlns="http://www.w3.org/2000/svg" width={14} height={14} viewBox="0 0 640 640">
43-
<path d="M512 160L512 416L128 416L128 160L512 160zM128 96C92.7 96 64 124.7 64 160L64 416C64 451.3 92.7 480 128 480L272 480L256 528L184 528C170.7 528 160 538.7 160 552C160 565.3 170.7 576 184 576L456 576C469.3 576 480 565.3 480 552C480 538.7 469.3 528 456 528L384 528L368 480L512 480C547.3 480 576 451.3 576 416L576 160C576 124.7 547.3 96 512 96L128 96z" />
44-
</svg>
45-
</button>
46-
<button
47-
type="button"
48-
className={getClassName('ModeButton', { active: mode === 'split' })}
49-
onClick={() => handleSwitchMode('split')}
50-
>
51-
<svg xmlns="http://www.w3.org/2000/svg" width={14} height={14} viewBox="0 0 640 640">
52-
<path d="M64 160C64 124.7 92.7 96 128 96L512 96C547.3 96 576 124.7 576 160L576 400L512 400L512 160L128 160L128 400L64 400L64 160zM0 467.2C0 456.6 8.6 448 19.2 448L620.8 448C631.4 448 640 456.6 640 467.2C640 509.6 605.6 544 563.2 544L76.8 544C34.4 544 0 509.6 0 467.2zM281 273L250 304L281 335C290.4 344.4 290.4 359.6 281 368.9C271.6 378.2 256.4 378.3 247.1 368.9L199.1 320.9C189.7 311.5 189.7 296.3 199.1 287L247.1 239C256.5 229.6 271.7 229.6 281 239C290.3 248.4 290.4 263.6 281 272.9zM393 239L441 287C450.4 296.4 450.4 311.6 441 320.9L393 368.9C383.6 378.3 368.4 378.3 359.1 368.9C349.8 359.5 349.7 344.3 359.1 335L390.1 304L359.1 273C349.7 263.6 349.7 248.4 359.1 239.1C368.5 229.8 383.7 229.7 393 239.1z" />
53-
</svg>
54-
</button>
55-
<button
56-
type="button"
57-
className={getClassName('ModeButton', { active: mode === 'code' })}
58-
onClick={() => handleSwitchMode('code')}
59-
>
60-
<svg xmlns="http://www.w3.org/2000/svg" width={14} height={14} viewBox="0 0 640 640">
61-
<path d="M392.8 65.2C375.8 60.3 358.1 70.2 353.2 87.2L225.2 535.2C220.3 552.2 230.2 569.9 247.2 574.8C264.2 579.7 281.9 569.8 286.8 552.8L414.8 104.8C419.7 87.8 409.8 70.1 392.8 65.2zM457.4 201.3C444.9 213.8 444.9 234.1 457.4 246.6L530.8 320L457.4 393.4C444.9 405.9 444.9 426.2 457.4 438.7C469.9 451.2 490.2 451.2 502.7 438.7L598.7 342.7C611.2 330.2 611.2 309.9 598.7 297.4L502.7 201.4C490.2 188.9 469.9 188.9 457.4 201.4zM182.7 201.3C170.2 188.8 149.9 188.8 137.4 201.3L41.4 297.3C28.9 309.8 28.9 330.1 41.4 342.6L137.4 438.6C149.9 451.1 170.2 451.1 182.7 438.6C195.2 426.1 195.2 405.8 182.7 393.3L109.3 320L182.6 246.6C195.1 234.1 195.1 213.8 182.6 201.3z" />
62-
</svg>
63-
</button>
64-
</div>
36+
<HStack className={variants('editorControl')} alignHorizontal="between" alignVertical="center">
37+
<Segment
38+
size="sm"
39+
options={[
40+
{ label: <MonitorIcon />, value: 'visual' },
41+
{ label: <SquareSplitHorizontalIcon />, value: 'split' },
42+
{ label: <CodeXmlIcon />, value: 'code' },
43+
]}
44+
value={mode}
45+
onChange={handleSwitchMode}
46+
/>
6547
{renderControl ? (
6648
renderControl(getSource)
6749
) : (
6850
<Button type="button" variant="primary" size="sm" onClick={handleSubmit}>
6951
Save
7052
</Button>
7153
)}
72-
</div>
54+
</HStack>
7355
);
7456
};

‎packages/react/src/editor/PropertyControlRadio/PropertyControlRadio.module.css‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎packages/react/src/editor/PropertyControlRadio/PropertyControlRadio.tsx‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
/** biome-ignore-all lint/suspicious/noExplicitAny: for arbitrary values */
2+
import { Segment } from '../../preset';
23
import type { RadioPropertySpec } from '../../renderer';
3-
import { getClassNameFactory } from '../../utils';
44
import { PropertyControl } from '../PropertyControl/PropertyControl';
5-
import styles from './PropertyControlRadio.module.css';
65

76
type Props = {
87
name: string;
@@ -12,8 +11,6 @@ type Props = {
1211
onChange?: (name: string, value?: any) => void;
1312
};
1413

15-
const getClassName = getClassNameFactory('PropertyControlRadio', styles);
16-
1714
export const PropertyControlRadio = ({ name, spec, ...props }: Props) => (
1815
<PropertyControl<any>
1916
{...props}
@@ -24,18 +21,7 @@ export const PropertyControlRadio = ({ name, spec, ...props }: Props) => (
2421
'render' in spec ? (
2522
spec.render(value, onChange)
2623
) : (
27-
<div className={getClassName()}>
28-
{spec.options.map((option) => (
29-
<button
30-
key={option.value}
31-
type="button"
32-
className={getClassName('Option', { selected: value === option.value })}
33-
onClick={() => onChange(option.value)}
34-
>
35-
{option.label}
36-
</button>
37-
))}
38-
</div>
24+
<Segment size="sm" options={spec.options} value={value} onChange={onChange} />
3925
)
4026
}
4127
/>

‎packages/react/src/preset/Segment/Segment.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { type ReactElement, useEffect, useState } from 'react';
1+
import { type ReactNode, useEffect, useState } from 'react';
22
import { createVariants } from '../../utils';
33
import styles from './Segment.module.css';
44

@@ -7,7 +7,7 @@ type Props<Value> = {
77
size: 'sm' | 'md';
88
options: {
99
value: Value;
10-
label?: ReactElement;
10+
label?: ReactNode;
1111
}[];
1212
value: Value;
1313
onChange: (value: Value) => void;

0 commit comments

Comments
 (0)