DmitriyB
99 lines
2.6 KiB
TypeScript
99 lines
2.6 KiB
TypeScript
import "./form.css";
|
|
import "../timepicker/timepicker.css"
|
|
import "../../index.css"
|
|
import { TProps } from "../calendarDesktop/calendarDesktop";
|
|
import { useSwiper } from 'swiper/react';
|
|
|
|
|
|
export const Form: React.FC<TProps> = ({ time, open, setOpen, displayForm, setDisplayForm, isMobile, text }) => {
|
|
const swiper = useSwiper();
|
|
|
|
|
|
function goBack() {
|
|
if (isMobile) {
|
|
setOpen({
|
|
calendar: false,
|
|
timePicker: true,
|
|
form: true,
|
|
confirm: false
|
|
});
|
|
swiper.slidePrev()
|
|
} else {
|
|
setOpen({
|
|
calendar: false,
|
|
timePicker: true,
|
|
form: false,
|
|
confirm: false
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
function handleConfirm() {
|
|
if (isMobile) {
|
|
setOpen({
|
|
calendar: false,
|
|
timePicker: false,
|
|
form: false,
|
|
confirm: true
|
|
})
|
|
swiper.slideNext()
|
|
} else {
|
|
setDisplayForm(false)
|
|
setOpen({
|
|
calendar: false,
|
|
timePicker: false,
|
|
form: false,
|
|
confirm: true
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<div data-aos="fade-up" data-aos-delay="500" className={displayForm ? " form__container aos-init aos-animate" : "form__container_disabled aos-init aos-animate"}>
|
|
<div className={open.form ? 'opacity_active' : 'opacity'}>
|
|
<div className="timepicker__header">
|
|
<div className="caption__container">
|
|
<div onClick={goBack} className="button__arrow_back"></div>
|
|
<span className="calendar__caption">{text.formCaption}</span>
|
|
</div>
|
|
<div className="line line_time"></div>
|
|
<div className="date date_time">{time.format("DD MMM, HH:mm")}</div>
|
|
</div>
|
|
<div className="form__block">
|
|
<div>
|
|
<form className="form">
|
|
<input
|
|
name="tel"
|
|
className="form__input"
|
|
type="text"
|
|
placeholder={text.placeholders.name}
|
|
></input>
|
|
<input
|
|
name="email"
|
|
className="form__input"
|
|
type="number"
|
|
placeholder={text.placeholders.phoneNumber}
|
|
></input>
|
|
<input
|
|
name="name"
|
|
className="form__input"
|
|
type="email"
|
|
placeholder={text.placeholders.email}
|
|
></input>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button onClick={handleConfirm} disabled={!open.form} type="submit" className={open.form ? 'button__submit' : 'button__submit button__submit_disabled'}>
|
|
{text.buttons.plan}
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Form;
|