62 lines
2.7 KiB
TypeScript
62 lines
2.7 KiB
TypeScript
import { IconChevronRight, IconMore } from '@douyinfe/semi-icons';
|
|
import { Button } from '@douyinfe/semi-ui';
|
|
import type { ReactNode } from 'react';
|
|
import { useState } from 'react';
|
|
import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';
|
|
|
|
export type VehicleAction = {
|
|
key: string;
|
|
label: string;
|
|
icon: ReactNode;
|
|
to: string;
|
|
type: 'primary' | 'tertiary';
|
|
};
|
|
|
|
export default function VehicleActions({
|
|
actions,
|
|
mobile,
|
|
onSelect
|
|
}: {
|
|
actions: VehicleAction[];
|
|
mobile: boolean;
|
|
onSelect: (to: string) => void;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const primaryActions = actions.filter((action) => action.key === 'switch' || action.key === 'tracks');
|
|
const overflowActions = actions.filter((action) => action.key !== 'switch' && action.key !== 'tracks');
|
|
const selectAction = (to: string) => {
|
|
setOpen(false);
|
|
onSelect(to);
|
|
};
|
|
if (!mobile) return <div className="v2-identity-actions" role="group" aria-label="车辆快捷操作">
|
|
{actions.map((action) => <Button key={action.key} theme="light" type={action.type} icon={action.icon} aria-label={action.label} onClick={() => onSelect(action.to)}>{action.label}</Button>)}
|
|
</div>;
|
|
|
|
return <>
|
|
<div className="v2-identity-actions" role="group" aria-label="车辆快捷操作">
|
|
{primaryActions.map((action) => <Button key={action.key} theme="light" type={action.type} icon={action.icon} aria-label={action.label} onClick={() => selectAction(action.to)}>{action.label}</Button>)}
|
|
{overflowActions.length ? <Button className="v2-vehicle-more-trigger" theme="light" type="tertiary" icon={<IconMore />} aria-label="更多车辆操作" aria-haspopup="dialog" aria-controls="v2-vehicle-mobile-actions" aria-expanded={open} onClick={() => setOpen(true)}>更多</Button> : null}
|
|
</div>
|
|
<WorkspaceSideSheet
|
|
className="v2-vehicle-mobile-actions-sidesheet"
|
|
variant="action"
|
|
visible={open}
|
|
placement="bottom"
|
|
height="min(48dvh, 380px)"
|
|
icon={<IconMore />}
|
|
ariaLabel="更多车辆操作"
|
|
dialogId="v2-vehicle-mobile-actions"
|
|
title="更多车辆操作"
|
|
description="继续查看这辆车的历史、里程与告警"
|
|
badge={`${overflowActions.length} 项`}
|
|
onCancel={() => setOpen(false)}
|
|
footerNote="选择操作后将自动进入对应车辆页面"
|
|
primaryAction={{ label: '完成', onClick: () => setOpen(false) }}
|
|
>
|
|
<div className="v2-vehicle-mobile-actions-list">
|
|
{overflowActions.map((action) => <Button key={action.key} block theme="light" type="tertiary" icon={action.icon} iconPosition="left" aria-label={action.label} onClick={() => selectAction(action.to)}>{action.label}<IconChevronRight /></Button>)}
|
|
</div>
|
|
</WorkspaceSideSheet>
|
|
</>;
|
|
}
|