import React, { useState } from 'react'; import { ScrollList, ScrollItem, Button } from '@douyinfe/semi-ui'; () => { const [selectIndex1, setSelectIndex1] = useState(1); const [selectIndex2, setSelectIndex2] = useState(1); const [selectIndex3, setSelectIndex3] = useState(1); const ampms = [{ value: 'AM', }, { value: 'PM', }]; const hours = new Array(12).fill(0).map((itm, index) => { return { value: index + 1 }; }); const minutes = new Array(60).fill(0).map((itm, index) => { return { value: index, disabled: Math.random() > 0.5 ? true : false }; }); const onSelectAP = (data) => { if (data.type === 1) { setSelectIndex1(data.index); } }; const onSelectHour = (data) => { console.log('You have choose the hour for: ', data.value); if (data.type === 2) { setSelectIndex2(data.index); } }; const onSelectMinute = (data) => { console.log('You have choose the minute for: ', data.value); if (data.type === 3) { setSelectIndex3(data.index); } }; const handleClose = () => { console.log('close'); }; const renderFooter = () => { return ( <Button size="small" type="primary" onClick={handleClose}> Ok </Button> ); }; const scrollStyle = { border: 'unset', boxShadow: 'unset', }; return ( <ScrollList style={scrollStyle} header={'Infinite Scroll List'} footer={renderFooter()}> <ScrollItem mode="wheel" cycled={false} list={ampms} type={1} selectedIndex={selectIndex1} onSelect={onSelectAP} /> <ScrollItem mode="wheel" cycled={true} list={hours} type={2} selectedIndex={selectIndex2} onSelect={onSelectHour} /> <ScrollItem mode="wheel" cycled={true} list={minutes} type={3} selectedIndex={selectIndex3} onSelect={onSelectMinute} /> </ScrollList> ); };