57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { FloatingSelectionCard } from './FloatingSelectionCard';
|
|
import { SlidingSelection, SelectionItem } from './SlidingSelection';
|
|
|
|
interface FloatingSelectionModalProps {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
items: SelectionItem[];
|
|
selectedValue?: string | number;
|
|
onValueChange: (value: string | number, index: number) => void;
|
|
onConfirm?: (value: string | number, index: number) => void;
|
|
showConfirmButton?: boolean;
|
|
confirmButtonText?: string;
|
|
pickerHeight?: number;
|
|
}
|
|
|
|
export function FloatingSelectionModal({
|
|
visible,
|
|
onClose,
|
|
title,
|
|
items,
|
|
selectedValue,
|
|
onValueChange,
|
|
onConfirm,
|
|
showConfirmButton = true,
|
|
confirmButtonText = '确认',
|
|
pickerHeight = 150,
|
|
}: FloatingSelectionModalProps) {
|
|
const handleConfirm = (value: string | number, index: number) => {
|
|
if (onConfirm) {
|
|
onConfirm(value, index);
|
|
}
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<FloatingSelectionCard
|
|
visible={visible}
|
|
onClose={onClose}
|
|
title={title}
|
|
>
|
|
<SlidingSelection
|
|
items={items}
|
|
selectedValue={selectedValue}
|
|
onValueChange={onValueChange}
|
|
onConfirm={handleConfirm}
|
|
showConfirmButton={showConfirmButton}
|
|
confirmButtonText={confirmButtonText}
|
|
height={pickerHeight}
|
|
/>
|
|
</FloatingSelectionCard>
|
|
);
|
|
}
|
|
|
|
// Export types for convenience
|
|
export type { SelectionItem } from './SlidingSelection'; |