Modal/Drawer – floating layer form – Pro Components (ant.design) reference address
Show results
import React, { useEffect, useState } from "react";
import { Amplify, API, graphqlOperation } from 'aws-amplify'
import { createTodo, createBook } from '../graphql/mutations'
import { listTodos, listBooks} from '../graphql/queries'
import "../resources/Calendar.css";
import { getOverrideProps } from "@aws-amplify/ui-react/internal";
import { Button, Form, Input, Modal, Select } from 'antd';
//import './style.less';
import { Flex, Icon, Image, Text, View, CheckboxField, Divider } from "@aws-amplify/ui-react";
export default function UserBiography(props) {
const { overrides, ... rest } = props;
const [checkBtn,setCheckBtn] = useState(true);
const [proposeBtn,setProposeBtn] = useState(false);
function handleCheck(){
setCheckBtn(true)
setProposeBtn(false)
}
function handlePropose(){
setCheckBtn(false)
setProposeBtn(true)
}
React. useEffect(() => {
setCheckBtn(true)
setProposeBtn(false)
},[])
const [visiable, setVisiable] = useState(false);
const [form] = Form. useForm();
// open the popup
const open = () => {
setVisiable(true);
};
//Close the popup window
const close = () => {
setVisiable(false);
};
//Click OK to submit the form
const submit = () => {
form. submit()
}
// Get form data after submission, request interface, reset form and close
const onSubmit = (values) => {
console. log(values)
//await fetch...
form.resetFields();
close()
}
return (
<div style={styles. container}>
<h2>Popup window and text switching</h2>
<div className="text-center">
<Button type="primary" onClick={open}>
new build
</Button>
</div>
<Modal
style={<!-- -->{
fontFamily: "Noto Sans JP",
fontSize: "26px",
fontWeight: "700",
color: "rgba(28,26,27,1)",
lineHeight: "39px"
}}
wrapClassName="modal-wrap"
okText="Book"
cancelButtonProps={<!-- -->{ shape: 'round' }}
okButtonProps={<!-- -->{ shape: 'round' }}
width={600}
visible={visible}
title="Check Availability"
onCancel={close}
onOk={submit}
>
<View
as="div"
// display={popover?"none":"block"}
width="600px"
height="600px"
gap="unset"
//style={<!-- -->{zIndex: '1'}}
// backgroundColor="red"
alignItems="unset"
justifyContent="unset"
overflow="hidden"
position="relative"
padding="0px 0px 0px 0px"
>
<Text
fontFamily="Noto Sans JP"
fontSize="16px"
fontWeight="400"
color="rgba(23,23,23,1)"
lineHeight="24px"
textAlign="center"
display="block"
direction="column"
justifyContent="unset"
width="unset"
height="unset"
gap="unset"
alignItems="unset"
position="absolute"
top="222px"
left="82px"
padding="0px 0px 0px 0px"
whiteSpace="pre-wrap"
children="Check Availability"
style={<!-- -->{cursor:"pointer"}}
onClick={(event) => {
handleCheck()
}}
{...getOverrideProps(overrides, "Check Availability")}
></Text>
<Text
fontFamily="Noto Sans JP"
fontSize="16px"
fontWeight="700"
color="rgba(23,23,23,1)"
lineHeight="24px"
textAlign="left"
display="block"
direction="column"
justifyContent="unset"
width="unset"
height="unset"
gap="unset"
alignItems="unset"
position="absolute"
top="222px"
left="274px"
padding="0px 0px 0px 0px"
whiteSpace="pre-wrap"
children="Propose new time"
style={<!-- -->{cursor:"pointer"}}
onClick={(event) => {
handlePropose()
}}
{...getOverrideProps(overrides, "Propose new time")}
></Text>
<View
width="116px"
height="5px"
display={proposeBtn ? "block" : "none"}
gap="unset"
alignItems="unset"
justifyContent="unset"
position="absolute"
top="258px"
left="284px"
borderRadius="30px"
padding="0px 0px 0px 0px"
backgroundColor="rgba(139,139,139,1)"
{...getOverrideProps(overrides, "Rectangle 4155")}
></View>
<View
width="116px"
height="5px"
display={checkBtn ? "block" : "none"}
gap="unset"
alignItems="unset"
justifyContent="unset"
position="absolute"
top="258px"
left="89px"
borderRadius="30px"
padding="0px 0px 0px 0px"
backgroundColor="rgba(139,139,139,1)"
{...getOverrideProps(overrides, "Rectangle 4155")}
></View>
<View display={proposeBtn ? "block" : "none"}>
<Image
width=""
height="84px"
display="block"
gap="unset"
alignItems="unset"
justifyContent="unset"
position="absolute"
top="262px"
left=""
padding="0px 0px 0px 0px"
objectFit="unset"
src={require("../resources/images/time.png")}
{...getOverrideProps(overrides, "image 205")}
></Image>
</View>
<Flex
display={proposeBtn ? "flex" : "none"}
gap="16px"
direction="row"
width="233px"
height="unset"
justifyContent="flex-start"
alignItems="flex-start"
position="absolute"
top="115px"
left="365px"
padding="0px 0px 0px 0px"
{...getOverrideProps(overrides, "Frame 1000006424")}
>
<Flex
gap="6px"
direction="column"
width="unset"
height="unset"
justifyContent="flex-start"
alignItems="flex-start"
grow="1"
shrink="1"
basis="0"
alignSelf="stretch"
position="relative"
padding="0px 0px 0px 0px"
{...getOverrideProps(overrides, "Data11232775")}
>
<Flex
gap="6px"
direction="row"
width="unset"
height="unset"
justifyContent="flex-start"
alignItems="center"
shrink="0"
position="relative"
padding="0px 0px 0px 0px"
{...getOverrideProps(overrides, "Name11232776")}
>
<Icon
width="10px"
height="10px"
viewBox={<!-- -->{ minX: 0, minY: 0, width: 10, height: 10 }}
paths={[
{
d: "M10 5C10 7.76142 7.76142 10 5 10C2.23858 10 0 7.76142 0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5Z",
fill: "rgba(245,128,128,1)",
fillRule: "nonzero",
},
]}
display="block"
gap="unset"
alignItems="unset"
justifyContent="unset"
shrink="0"
position="relative"
{...getOverrideProps(overrides, "Ellipse 11232777")}
></Icon>
<Text
fontFamily="Noto Sans JP"
fontSize="14px"
fontWeight="400"
color="rgba(98,98,100,1)"
lineHeight="21px"
textAlign="center"
display="block"
direction="column"
justifyContent="unset"
letterSpacing="0px"
width="unset"
height="unset"
gap="unset"
alignItems="unset"
shrink="0"
position="relative"
padding="0px 0px 0px 0px"
whiteSpace="pre-wrap"
children="Not Available"
{...getOverrideProps(overrides, "Not Available")}
></Text>
</Flex>
</Flex>
<Flex
gap="6px"
direction="column"
width="unset"
height="unset"
justifyContent="flex-start"
alignItems="flex-start"
grow="1"
shrink="1"
basis="0"
alignSelf="stretch"
position="relative"
padding="0px 0px 0px 0px"
{...getOverrideProps(overrides, "Data11232779")}
>
<Flex
gap="6px"
direction="row"
width="unset"
height="unset"
justifyContent="flex-start"
alignItems="center"
shrink="0"
position="relative"
padding="0px 0px 0px 0px"
{...getOverrideProps(overrides, "Name11232780")}
>
<Icon
width="10px"
height="10px"
viewBox={<!-- -->{ minX: 0, minY: 0, width: 10, height: 10 }}
paths={[
{
d: "M10 5C10 7.76142 7.76142 10 5 10C2.23858 10 0 7.76142 0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5Z",
fill: "rgba(176,222,187,1)",
fillRule: "nonzero",
},
]}
display="block"
gap="unset"
alignItems="unset"
justifyContent="unset"
shrink="0"
position="relative"
{...getOverrideProps(overrides, "Ellipse 11232781")}
></Icon>
<Text
fontFamily="Noto Sans JP"
fontSize="14px"
fontWeight="400"
color="rgba(98,98,100,1)"
lineHeight="21px"
textAlign="center"
display="block"
direction="column"
justifyContent="unset"
letterSpacing="0px"
width="unset"
height="unset"
gap="unset"
alignItems="unset"
shrink="0"
position="relative"
padding="0px 0px 0px 0px"
whiteSpace="pre-wrap"
children="Available"
{...getOverrideProps(overrides, "Available11232782")}
></Text>
</Flex>
</Flex>
</Flex>
</View>
</Modal>
</div>
)
}
const styles = {
container: { width: 400, margin: '0 auto', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 20 },
todo: { marginBottom: 15 },
input: { border: 'none', backgroundColor: '#ddd', marginBottom: 10, padding: 8, fontSize: 18 },
todoName: { fontSize: 20, fontWeight: 'bold' },
todoDescription: { marginBottom: 0 },
button: { backgroundColor: 'black', color: 'white', outline: 'none', fontSize: 18, padding: '12px 0px' },
aaa:{width: "31px"}
}