67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|