amis-rpc-design/libs/amis/packages/amis-ui/examples/modal/PickerContainer.tsx

67 lines
1.8 KiB
TypeScript
Raw Normal View History

2023-10-07 19:42:30 +08:00
import React from 'react';
import {PickerContainer, Button, Form, Controller, InputBox} from 'amis-ui';
export default function () {
const body = React.createRef<any>();
const beforeConfirm = React.useCallback(() => {
return body.current?.submit();
}, []);
const handleConfirm = React.useCallback((data: any) => {
console.log('confirmed', data);
}, []);
return (
<div className="wrapper">
<PickerContainer
beforeConfirm={beforeConfirm}
onConfirm={handleConfirm}
bodyRender={() => (
<Form ref={body}>
{({control}) => (
<>
<Controller
mode="horizontal"
label="A"
name="a"
control={control}
rules={{maxLength: 20}}
isRequired
render={({field, fieldState}) => (
<InputBox
{...field}
hasError={!!fieldState.error}
disabled={false}
/>
)}
/>
<Controller
mode="horizontal"
label="B"
name="b"
control={control}
rules={{maxLength: 20}}
isRequired
render={({field, fieldState}) => (
<InputBox
{...field}
hasError={!!fieldState.error}
disabled={false}
/>
)}
/>
</>
)}
</Form>
)}
>
{({isOpened, onClick}) => (
<Button active={isOpened} onClick={onClick}>
Open
</Button>
)}
</PickerContainer>
</div>
);
}