补充共享整行开关组件
新增 PlatformToggleRow 共享实现与类型导出 保留 common 兼容出口并补充组件行为测试
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
/* @vitest-environment jsdom */
|
||||
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { expect, test, vi } from 'vitest';
|
||||
|
||||
import { PlatformToggleRow } from './index';
|
||||
|
||||
test('renders a controlled checkbox row and forwards the next value', () => {
|
||||
const onChange = vi.fn();
|
||||
render(
|
||||
<PlatformToggleRow label="自由输入" checked={false} onChange={onChange} />,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole('checkbox', { name: '自由输入' }));
|
||||
|
||||
expect(onChange).toHaveBeenCalledWith(true);
|
||||
expect(screen.getByText('自由输入').closest('label')?.className).toContain(
|
||||
'bg-white/74',
|
||||
);
|
||||
});
|
||||
|
||||
test('renders read-only and clickable status variants with custom labels', () => {
|
||||
const onClick = vi.fn();
|
||||
const { rerender } = render(
|
||||
<PlatformToggleRow
|
||||
label="文本模式"
|
||||
checked
|
||||
mode="status"
|
||||
onLabel="已开启"
|
||||
offLabel="未开启"
|
||||
surface="plain"
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.queryByRole('checkbox')).toBeNull();
|
||||
expect(screen.getByText('已开启')).toBeTruthy();
|
||||
expect(screen.getByText('文本模式').closest('div')?.className).toContain(
|
||||
'bg-white/78',
|
||||
);
|
||||
|
||||
rerender(
|
||||
<PlatformToggleRow
|
||||
label="文本模式"
|
||||
checked={false}
|
||||
mode="status"
|
||||
onLabel="已开启"
|
||||
offLabel="未开启"
|
||||
onClick={onClick}
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '文本模式 未开启' }));
|
||||
expect(onClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('keeps disabled state and visual slots', () => {
|
||||
render(
|
||||
<PlatformToggleRow
|
||||
label="玩家可见"
|
||||
checked
|
||||
disabled
|
||||
icon={<span data-testid="toggle-icon" />}
|
||||
className="custom-row"
|
||||
labelClassName="custom-label"
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByRole('checkbox', { name: '玩家可见' })).toHaveProperty(
|
||||
'disabled',
|
||||
true,
|
||||
);
|
||||
expect(screen.getByTestId('toggle-icon')).toBeTruthy();
|
||||
expect(screen.getByText('玩家可见').closest('label')?.className).toContain(
|
||||
'custom-row',
|
||||
);
|
||||
expect(screen.getByText('玩家可见').parentElement?.className).toContain(
|
||||
'custom-label',
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,134 @@
|
||||
import type { ChangeEvent, ReactNode } from 'react';
|
||||
|
||||
import { getPlatformPillBadgeClassName } from './platformPillBadgeModel';
|
||||
|
||||
export type PlatformToggleRowSurface = 'soft' | 'plain';
|
||||
export type PlatformToggleRowMode = 'checkbox' | 'status';
|
||||
|
||||
export type PlatformToggleRowProps = {
|
||||
label: ReactNode;
|
||||
checked: boolean;
|
||||
onChange?: (checked: boolean) => void;
|
||||
disabled?: boolean;
|
||||
mode?: PlatformToggleRowMode;
|
||||
icon?: ReactNode;
|
||||
onLabel?: ReactNode;
|
||||
offLabel?: ReactNode;
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
labelClassName?: string;
|
||||
surface?: PlatformToggleRowSurface;
|
||||
};
|
||||
|
||||
const PLATFORM_TOGGLE_ROW_SURFACE_CLASS: Record<
|
||||
PlatformToggleRowSurface,
|
||||
string
|
||||
> = {
|
||||
soft: 'bg-white/74',
|
||||
plain: 'bg-white/78',
|
||||
};
|
||||
|
||||
function renderToggleStatus({
|
||||
checked,
|
||||
offLabel,
|
||||
onLabel,
|
||||
}: {
|
||||
checked: boolean;
|
||||
offLabel: ReactNode;
|
||||
onLabel: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
className={getPlatformPillBadgeClassName({
|
||||
tone: 'neutralSolid',
|
||||
size: 'sm',
|
||||
})}
|
||||
>
|
||||
{checked ? onLabel : offLabel}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 平台整行开关。
|
||||
* 统一承接设置面板和结果页配置里的白底 label + checkbox / 状态行。
|
||||
*/
|
||||
export function PlatformToggleRow({
|
||||
label,
|
||||
checked,
|
||||
onChange,
|
||||
disabled = false,
|
||||
mode = 'checkbox',
|
||||
icon,
|
||||
onLabel = '开启',
|
||||
offLabel = '关闭',
|
||||
onClick,
|
||||
className,
|
||||
labelClassName,
|
||||
surface = 'soft',
|
||||
}: PlatformToggleRowProps) {
|
||||
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
onChange?.(event.target.checked);
|
||||
};
|
||||
|
||||
const rowClassName = [
|
||||
'flex min-h-12 items-center justify-between gap-3 rounded-[1rem] border border-[var(--platform-subpanel-border)] px-3',
|
||||
PLATFORM_TOGGLE_ROW_SURFACE_CLASS[surface],
|
||||
disabled ? 'opacity-60' : null,
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
const labelNode = (
|
||||
<span
|
||||
className={[
|
||||
'flex min-w-0 items-center gap-2 text-sm font-semibold text-[var(--platform-text-strong)]',
|
||||
labelClassName,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
>
|
||||
{icon ? <span className="shrink-0">{icon}</span> : null}
|
||||
<span>{label}</span>
|
||||
</span>
|
||||
);
|
||||
|
||||
if (mode === 'status') {
|
||||
if (onClick) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={[
|
||||
rowClassName,
|
||||
'w-full text-left transition hover:bg-white disabled:cursor-not-allowed',
|
||||
].join(' ')}
|
||||
>
|
||||
{labelNode}
|
||||
{renderToggleStatus({ checked, onLabel, offLabel })}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={rowClassName}>
|
||||
{labelNode}
|
||||
{renderToggleStatus({ checked, onLabel, offLabel })}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<label className={rowClassName}>
|
||||
{labelNode}
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onChange={handleChange}
|
||||
className="h-4 w-4 rounded border-[var(--platform-subpanel-border)]"
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@@ -122,6 +122,12 @@ export type {
|
||||
PlatformTextFieldProps,
|
||||
} from './PlatformTextField';
|
||||
export { PlatformSelectField, PlatformTextField } from './PlatformTextField';
|
||||
export type {
|
||||
PlatformToggleRowMode,
|
||||
PlatformToggleRowProps,
|
||||
PlatformToggleRowSurface,
|
||||
} from './PlatformToggleRow';
|
||||
export { PlatformToggleRow } from './PlatformToggleRow';
|
||||
export type {
|
||||
BadgeProps,
|
||||
BadgeTone,
|
||||
|
||||
@@ -1,134 +1,6 @@
|
||||
import type { ChangeEvent, ReactNode } from 'react';
|
||||
|
||||
import { getPlatformPillBadgeClassName } from './platformPillBadgeModel';
|
||||
|
||||
type PlatformToggleRowSurface = 'soft' | 'plain';
|
||||
type PlatformToggleRowMode = 'checkbox' | 'status';
|
||||
|
||||
type PlatformToggleRowProps = {
|
||||
label: ReactNode;
|
||||
checked: boolean;
|
||||
onChange?: (checked: boolean) => void;
|
||||
disabled?: boolean;
|
||||
mode?: PlatformToggleRowMode;
|
||||
icon?: ReactNode;
|
||||
onLabel?: ReactNode;
|
||||
offLabel?: ReactNode;
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
labelClassName?: string;
|
||||
surface?: PlatformToggleRowSurface;
|
||||
};
|
||||
|
||||
const PLATFORM_TOGGLE_ROW_SURFACE_CLASS: Record<
|
||||
export type {
|
||||
PlatformToggleRowMode,
|
||||
PlatformToggleRowProps,
|
||||
PlatformToggleRowSurface,
|
||||
string
|
||||
> = {
|
||||
soft: 'bg-white/74',
|
||||
plain: 'bg-white/78',
|
||||
};
|
||||
|
||||
function renderToggleStatus({
|
||||
checked,
|
||||
offLabel,
|
||||
onLabel,
|
||||
}: {
|
||||
checked: boolean;
|
||||
offLabel: ReactNode;
|
||||
onLabel: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
className={getPlatformPillBadgeClassName({
|
||||
tone: 'neutralSolid',
|
||||
size: 'sm',
|
||||
})}
|
||||
>
|
||||
{checked ? onLabel : offLabel}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 平台整行开关。
|
||||
* 统一承接设置面板和结果页配置里的白底 label + checkbox / 状态行。
|
||||
*/
|
||||
export function PlatformToggleRow({
|
||||
label,
|
||||
checked,
|
||||
onChange,
|
||||
disabled = false,
|
||||
mode = 'checkbox',
|
||||
icon,
|
||||
onLabel = '开启',
|
||||
offLabel = '关闭',
|
||||
onClick,
|
||||
className,
|
||||
labelClassName,
|
||||
surface = 'soft',
|
||||
}: PlatformToggleRowProps) {
|
||||
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
onChange?.(event.target.checked);
|
||||
};
|
||||
|
||||
const rowClassName = [
|
||||
'flex min-h-12 items-center justify-between gap-3 rounded-[1rem] border border-[var(--platform-subpanel-border)] px-3',
|
||||
PLATFORM_TOGGLE_ROW_SURFACE_CLASS[surface],
|
||||
disabled ? 'opacity-60' : null,
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
const labelNode = (
|
||||
<span
|
||||
className={[
|
||||
'flex min-w-0 items-center gap-2 text-sm font-semibold text-[var(--platform-text-strong)]',
|
||||
labelClassName,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
>
|
||||
{icon ? <span className="shrink-0">{icon}</span> : null}
|
||||
<span>{label}</span>
|
||||
</span>
|
||||
);
|
||||
|
||||
if (mode === 'status') {
|
||||
if (onClick) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={[
|
||||
rowClassName,
|
||||
'w-full text-left transition hover:bg-white disabled:cursor-not-allowed',
|
||||
].join(' ')}
|
||||
>
|
||||
{labelNode}
|
||||
{renderToggleStatus({ checked, onLabel, offLabel })}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={rowClassName}>
|
||||
{labelNode}
|
||||
{renderToggleStatus({ checked, onLabel, offLabel })}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<label className={rowClassName}>
|
||||
{labelNode}
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onChange={handleChange}
|
||||
className="h-4 w-4 rounded border-[var(--platform-subpanel-border)]"
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
} from '@genarrative/shared/components';
|
||||
export { PlatformToggleRow } from '@genarrative/shared/components';
|
||||
|
||||
Reference in New Issue
Block a user