DmitriyB/pixelstreamingwebreact
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add timeselector, fix padding

Browse Source
This commit is contained in:
DmitriyB
2022-07-26 11:55:17 +05:00
parent 82ff3120cc
commit a238cbd514
8 changed files with 282 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mainPart/calendar/calendar.tsx
+20 -2
View File
@@ -2,7 +2,25 @@ import React from "react";
import Calendar from "react-calendar";
import './calendar.css';
export const CalendarComponent:React.FC = React.memo(() => {
type TProps = {
onCLick: (date: string) => void
}
export const CalendarComponent:React.FC<TProps> = React.memo((props) => {
const months = {
0: 'Января',
1: 'Февраля',
2: 'Марта',
3: 'Апреля',
4: 'Мая',
5: 'Июня',
6: 'Июля',
7: 'Августа',
8: 'Сентября',
9: 'Октября',
10: 'Ноября',
11: 'Декабря'
}
return <Calendar
showDoubleView={false}
next2Label={null}
@@ -14,6 +32,6 @@ export const CalendarComponent:React.FC = React.memo(() => {
// return props.disableDays.includes(a.date.getDate())
// }}
minDate={new Date()}
// onClickDay={(e) => onClickDay(e.getDate(), e.getMonth())}
onClickDay={(e) => props.onCLick(`${e.getDate()} ${months[e.getMonth() as keyof typeof months]}`)}
/>
})
src/components/mainPart/mainPart.css
+18 -2
View File
@@ -221,12 +221,28 @@
margin-bottom: auto;
}
.plan-content-container {
display: flex;
flex-direction: column;
}
.plan-content-title {
font-weight: 700;
font-size: 40px;
line-height: 110%;
}
.plan-content-date {
margin-top: 40px;
font-weight: 600;
font-size: 24px;
line-height: 110%;
}
.plan-content-content {
margin: 40px 0 24px 0;
}
.legend-container {
display: flex;
gap: 8px;
@@ -257,12 +273,12 @@
color: #CE56C2;
}
.legend-text.disabled {
.legend-text.disable {
color: #B196AF;
}
.plan-content-legend {
margin-top: 24px;
/* margin-top: 24px; */
display: flex;
gap: 32px;
}
src/components/mainPart/mainPart.tsx
+17 -7
View File
@@ -1,14 +1,13 @@
import React, { useEffect, useRef, useState } from "react";
import './mainPart.css';
import { PinkButton } from "./button";
import { MainPartHeader } from "./mainPartHeader";
import { ContentContainer } from "./contentContainer";
import { MainPartFooter } from "./main-part-footer";
import { OrLineContainer } from "./orLineContainer";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import Calendar from "react-calendar";
import { CalendarComponent } from "./calendar/calendar";
import { PlanContentContainer } from "./planContentContainer";
import { TimeSelector } from "./timeSelector/timeSelector";
export const MainPart: React.FC = React.memo(() => {
@@ -64,7 +63,7 @@ export const MainPart: React.FC = React.memo(() => {
setPlaneContent(
<PlanContentContainer
title="Выбор даты"
content={<CalendarComponent />}
content={<CalendarComponent onCLick={(date) => onSelectDay(date)} />}
isLegend={true}
/>
);
@@ -75,12 +74,23 @@ export const MainPart: React.FC = React.memo(() => {
}
function onSelectDay() {
function onSelectDay(date: string) {
setPlaneContent(
<PlanContentContainer
title="Выбор времени"
date={date}
content={<TimeSelector
date={date}
onClickTime={(date, time) => onSelectTime(date, time)}
/>}
isLegend={true}
/>
);
}
function onSelectTime() {
function onSelectTime(date: string, time: string) {
let dateTime = `${date} в ${time}`;
console.log(dateTime)
}
function enableBackground() {
src/components/mainPart/planContentContainer.tsx
+9 -1
View File
@@ -3,6 +3,7 @@ import { Legend } from "./legend";
type TProps = {
title: string
date?: string
content: JSX.Element
isLegend: boolean
}
@@ -10,7 +11,14 @@ type TProps = {
export const PlanContentContainer:React.FC<TProps> = React.memo((props) => {
return <div className="plan-content-container">
<span className="plan-content-title">{props.title}</span>
{props.content}
{
props.date
? <span className="plan-content-date">{props.date}</span>
: null
}
<div className="plan-content-content">
{props.content}
</div>
{
props.isLegend
? <div className="plan-content-legend">
src/components/mainPart/timeSelector/rowItem.tsx
+18
View File
@@ -0,0 +1,18 @@
import React from "react";
type TProps = {
value: string
active: boolean
onClick: () => void
}
export const RowItem:React.FC<TProps> = React.memo((props) => {
return <div
className={`row-item ${props.active ? '' : 'disabled'}`}
onClick={() => {
if(props.active)
props.onClick();
}}>
{props.value}
</div>
})
src/components/mainPart/timeSelector/rowTime.tsx
+24
View File
@@ -0,0 +1,24 @@
import React from "react";
import { RowItem } from "./rowItem";
type TProps = {
times: Array<{time: string, active: boolean}>
onClick: (time: string) => void
}
export const RowTime:React.FC<TProps> = React.memo((props) => {
return <div className="row-time-container">
{props.times.map((item, index) => {
return <RowItem
key={item.time+index}
active={item.active}
value={item.time}
onClick={() => {
if(!item.time)
return
props.onClick(item.time)
}}
/>
})}
</div>
})
src/components/mainPart/timeSelector/timeSelector.css
+96
View File
@@ -0,0 +1,96 @@
.time-selector-container {
display: flex;
flex-direction: column;
width: 100%;
gap: 26px;
box-sizing: border-box;
max-width: 500px;
}
.time-selector-date {
font-weight: 600;
font-size: 24px;
line-height: 110%;
}
.time-selector-rows {
/* width: 100%; */
display: flex;
flex-direction: column;
box-sizing: border-box;
align-items: flex-start;
gap: 8px;
}
.row-time-container {
width: 100%;
/* box-sizing: border-box; */
display: flex;
gap: 8px;
flex-direction: row;
/* flex-wrap: wrap; */
}
.row-item {
padding: 22px 8px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 22px;
color: #CE56C2;
background: #322948;
border-radius: 8px;
/* flex-basis: 80px; */
/* width: 20%; */
width: 100%;
/* max-width: 100px; */
min-width: 70px;
/* flex-shrink: 0; */
/* flex-grow: 2; */
box-sizing: border-box;
}
.row-item:hover {
background: #443A5D;
cursor: pointer;
}
.row-item.disabled {
background-color: transparent;
color: #B196AF;
}
.row-item.disabled:hover {
cursor: default;
}
@media screen and (max-width: 1000px) {
.time-selector-container {
}
}
@media screen and (max-width: 640px) {
.time-selector-date {
font-size: 16px;
}
.row-item {
padding: 5px 8px;
min-width: 60px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
min-width: 40px;
}
}
src/components/mainPart/timeSelector/timeSelector.tsx
+80
View File
@@ -0,0 +1,80 @@
import React from "react";
import { RowTime } from "./rowTime";
import './timeSelector.css';
type TProps = {
date: string
onClickTime: (date: string, time: string) => void
}
export const TimeSelector:React.FC<TProps> = React.memo((props) => {
function onClickTime(value: string) {
props.onClickTime(props.date, value)
}
return <div className="time-selector-container">
{/* <span className="time-selector-date">{props.date}</span> */}
<div className="time-selector-rows">
<RowTime
times={[
{time: '8:00', active: true},
{time: '8:30', active: true},
{time: '9:00', active: false},
{time: '9:30', active: true},
{time: '10:00', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '10:30', active: true},
{time: '11:00', active: true},
{time: '11:30', active: false},
{time: '', active: false},
{time: '', active: false}
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '12:00', active: true},
{time: '12:30', active: true},
{time: '13:00', active: false},
{time: '13:30', active: true},
{time: '14:00', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '14:30', active: true},
{time: '15:00', active: true},
{time: '15:30', active: false},
{time: '16:00', active: false},
{time: '16:30', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '17:00', active: false},
{time: '17:30', active: false},
{time: '', active: false},
{time: '', active: false},
{time: '', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '18:00', active: true},
{time: '18:30', active: true},
{time: '19:00', active: false},
{time: '19:30', active: true},
{time: '', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
</div>
</div>
})