81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import {Button, ConfirmBox, Controller, Form, InputBox} from 'amis-ui';
|
||
|
|
|
||
|
|
export default function ButtonExamples() {
|
||
|
|
const [isShow, setIsShow] = React.useState(false);
|
||
|
|
const handleClick = React.useCallback(() => {
|
||
|
|
setIsShow(!isShow);
|
||
|
|
}, [isShow]);
|
||
|
|
const handleCancel = React.useCallback(() => {
|
||
|
|
setIsShow(false);
|
||
|
|
}, []);
|
||
|
|
// const beforeConfirm = React.useCallback(async () => {
|
||
|
|
// return false;
|
||
|
|
// }, []);
|
||
|
|
const handleConfirm = React.useCallback((data: any) => {
|
||
|
|
console.log('confirmed', data);
|
||
|
|
setIsShow(false);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
async function handleValidate() {
|
||
|
|
return new Promise<void>((resolve, reject) => {
|
||
|
|
// setTimeout(() => reject('error message'), 200);
|
||
|
|
setTimeout(() => resolve(), 200);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="wrapper">
|
||
|
|
<Button onClick={handleClick}>Open</Button>
|
||
|
|
<ConfirmBox
|
||
|
|
type="drawer"
|
||
|
|
size="md"
|
||
|
|
position="bottom"
|
||
|
|
onConfirm={handleConfirm}
|
||
|
|
show={isShow}
|
||
|
|
onCancel={handleCancel}
|
||
|
|
>
|
||
|
|
{({bodyRef}) => (
|
||
|
|
<Form ref={bodyRef} onValidate={handleValidate}>
|
||
|
|
{({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>
|
||
|
|
)}
|
||
|
|
</ConfirmBox>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|