DmitriyB
125 lines
3.1 KiB
TypeScript
125 lines
3.1 KiB
TypeScript
import './main.css'
|
|
import React, { useEffect, useState } from "react";
|
|
import { AnimationComponent } from "../animationComponent/animationComponent";
|
|
import { SliderComponent } from "../sliderComponent/sliderComponent";
|
|
import { CalendarDesktop } from "../calendarDesktop/calendarDesktop";
|
|
import { Multiplayer } from "../multiplayer/multiplayer";
|
|
import { Devices } from "../devices/devices";
|
|
import { Player } from "../player/player";
|
|
import { Analytics } from "../analytics/analytics";
|
|
import { CloudSolution } from "../cloudSolution/cloudSolution";
|
|
import { Demos } from "../demos/demos";
|
|
import { PhotoComponent } from "../photoComponent/photoComponent";
|
|
import { CalendarMobile } from "../calendarMobile/calendarMobile";
|
|
import moment, { Moment } from "moment";
|
|
|
|
import useScreenSize from 'use-screen-size'
|
|
|
|
|
|
|
|
|
|
export type TObjct = {
|
|
calendar: boolean;
|
|
timePicker: boolean;
|
|
form: boolean;
|
|
confirm: boolean;
|
|
};
|
|
|
|
export type TText = {
|
|
text: object,
|
|
}
|
|
|
|
export const Main: React.FC<any> = ({ locale, cards }) => {
|
|
|
|
const { width } = useScreenSize()
|
|
const [displayForm, setDisplayForm] = useState(true);
|
|
const [time, setTime] = useState(moment());
|
|
|
|
useEffect(() => {
|
|
setTime(moment().locale(locale))
|
|
}, [locale])
|
|
|
|
|
|
const [next, setNext] = useState({
|
|
calendar: true,
|
|
timePicker: false,
|
|
form: false,
|
|
confirm: false,
|
|
});
|
|
const size = useScreenSize()
|
|
const isMobile = size.width >= 900 ? false : true;
|
|
|
|
|
|
useEffect(() => {
|
|
if (isMobile) {
|
|
setNext({
|
|
calendar: true,
|
|
timePicker: true,
|
|
form: true,
|
|
confirm: false,
|
|
})
|
|
}
|
|
}, [width])
|
|
|
|
|
|
|
|
function updateTime(value: Moment) {
|
|
setTime(value);
|
|
}
|
|
function navigationHandler(value: TObjct) {
|
|
setNext(value);
|
|
}
|
|
|
|
function onExit() {
|
|
setNext({
|
|
calendar: true,
|
|
timePicker: false,
|
|
form: false,
|
|
confirm: false,
|
|
})
|
|
setDisplayForm(true)
|
|
}
|
|
|
|
return (
|
|
<main className="main">
|
|
<AnimationComponent />
|
|
<SliderComponent />
|
|
<div className="calendar__mobile">
|
|
<CalendarMobile
|
|
locale={locale}
|
|
text={'calendar'}
|
|
setDisplayForm={setDisplayForm}
|
|
displayForm={displayForm}
|
|
setOpen={navigationHandler}
|
|
open={next}
|
|
time={time}
|
|
onUpdate={updateTime}
|
|
onExit={onExit}
|
|
isMobile={isMobile}
|
|
></CalendarMobile>
|
|
</div>
|
|
<div className="calendar__desktop">
|
|
<CalendarDesktop
|
|
locale={locale}
|
|
text={'calendar'}
|
|
setDisplayForm={setDisplayForm}
|
|
displayForm={displayForm}
|
|
setOpen={navigationHandler}
|
|
open={next}
|
|
time={time}
|
|
onUpdate={updateTime}
|
|
onExit={onExit}
|
|
isMobile={isMobile}
|
|
></CalendarDesktop>
|
|
</div>
|
|
<Multiplayer text={'multiplayer'} />
|
|
<Devices text={'devices'} />
|
|
<PhotoComponent text={'photoComponent'} />
|
|
<Player text={'player'} />
|
|
<Analytics text={'analytics'} />
|
|
<CloudSolution text={'analytics'} />
|
|
<Demos cards={cards} />
|
|
</main>
|
|
);
|
|
};
|