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

add and styled calendar

Browse Source
This commit is contained in:
DmitriyB
2022-07-25 18:52:18 +05:30
parent 7d28bb5054
commit b092af6bfb
8 changed files with 356 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+100 -2
View File
@@ -15,16 +15,17 @@
"@types/jest": "^27.5.2",
"@types/node": "^16.11.45",
"@types/react": "^18.0.15",
"@types/react-calendar": "^3.5.1",
"@types/react-dom": "^18.0.6",
"@types/react-transition-group": "^4.4.5",
"react": "^18.2.0",
"react-calendar": "^3.7.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-transition-group": "^4.4.2",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
"devDependencies": {}
}
},
"node_modules/@ampproject/remapping": {
"version": "2.2.0",
@@ -3781,6 +3782,14 @@
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-calendar": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/@types/react-calendar/-/react-calendar-3.5.1.tgz",
"integrity": "sha512-d71cKkkSN8CA4PWx87jQOrEyElc2uY3hwpXmceroaPMrMaZ9fPlLFPLP0OCaay5nlJ6ErNmHVb75lE1huharPQ==",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-dom": {
"version": "18.0.6",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
@@ -4224,6 +4233,14 @@
"@xtuc/long": "4.2.2"
}
},
"node_modules/@wojtekmaj/date-utils": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.0.3.tgz",
"integrity": "sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw==",
"funding": {
"url": "https://github.com/wojtekmaj/date-utils?sponsor=1"
}
},
"node_modules/@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -8105,6 +8122,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/get-user-locale": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-1.4.0.tgz",
"integrity": "sha512-gQo03lP1OArHLKlnoglqrGGl7b04u2EP9Xutmp72cMdtrrSD7ZgIsCsUKZynYWLDkVJW33Cj3pliP7uP0UonHQ==",
"dependencies": {
"lodash.once": "^4.1.1"
}
},
"node_modules/glob": {
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -11291,6 +11316,11 @@
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
},
"node_modules/lodash.once": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
"integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
},
"node_modules/lodash.sortby": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -11401,6 +11431,14 @@
"node": ">= 4.0.0"
}
},
"node_modules/merge-class-names": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.4.2.tgz",
"integrity": "sha512-bOl98VzwCGi25Gcn3xKxnR5p/WrhWFQB59MS/aGENcmUc6iSm96yrFDF0XSNurX9qN4LbJm0R9kfvsQ17i8zCw==",
"funding": {
"url": "https://github.com/wojtekmaj/merge-class-names?sponsor=1"
}
},
"node_modules/merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -13648,6 +13686,24 @@
"node": ">=14"
}
},
"node_modules/react-calendar": {
"version": "3.7.0",
"resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-3.7.0.tgz",
"integrity": "sha512-zkK95zWLWLC6w3O7p3SHx/FJXEyyD2UMd4jr3CrKD+G73N+G5vEwrXxYQCNivIPoFNBjqoyYYGlkHA+TBDPLCw==",
"dependencies": {
"@wojtekmaj/date-utils": "^1.0.2",
"get-user-locale": "^1.2.0",
"merge-class-names": "^1.1.1",
"prop-types": "^15.6.0"
},
"funding": {
"url": "https://github.com/wojtekmaj/react-calendar?sponsor=1"
},
"peerDependencies": {
"react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-dev-utils": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -19195,6 +19251,14 @@
"csstype": "^3.0.2"
}
},
"@types/react-calendar": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/@types/react-calendar/-/react-calendar-3.5.1.tgz",
"integrity": "sha512-d71cKkkSN8CA4PWx87jQOrEyElc2uY3hwpXmceroaPMrMaZ9fPlLFPLP0OCaay5nlJ6ErNmHVb75lE1huharPQ==",
"requires": {
"@types/react": "*"
}
},
"@types/react-dom": {
"version": "18.0.6",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
@@ -19535,6 +19599,11 @@
"@xtuc/long": "4.2.2"
}
},
"@wojtekmaj/date-utils": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.0.3.tgz",
"integrity": "sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw=="
},
"@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -22352,6 +22421,14 @@
"get-intrinsic": "^1.1.1"
}
},
"get-user-locale": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-1.4.0.tgz",
"integrity": "sha512-gQo03lP1OArHLKlnoglqrGGl7b04u2EP9Xutmp72cMdtrrSD7ZgIsCsUKZynYWLDkVJW33Cj3pliP7uP0UonHQ==",
"requires": {
"lodash.once": "^4.1.1"
}
},
"glob": {
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -24654,6 +24731,11 @@
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
},
"lodash.once": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
"integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
},
"lodash.sortby": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -24742,6 +24824,11 @@
"fs-monkey": "^1.0.3"
}
},
"merge-class-names": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.4.2.tgz",
"integrity": "sha512-bOl98VzwCGi25Gcn3xKxnR5p/WrhWFQB59MS/aGENcmUc6iSm96yrFDF0XSNurX9qN4LbJm0R9kfvsQ17i8zCw=="
},
"merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -26168,6 +26255,17 @@
"whatwg-fetch": "^3.6.2"
}
},
"react-calendar": {
"version": "3.7.0",
"resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-3.7.0.tgz",
"integrity": "sha512-zkK95zWLWLC6w3O7p3SHx/FJXEyyD2UMd4jr3CrKD+G73N+G5vEwrXxYQCNivIPoFNBjqoyYYGlkHA+TBDPLCw==",
"requires": {
"@wojtekmaj/date-utils": "^1.0.2",
"get-user-locale": "^1.2.0",
"merge-class-names": "^1.1.1",
"prop-types": "^15.6.0"
}
},
"react-dev-utils": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
package.json
+2
View File
@@ -9,9 +9,11 @@
"@types/jest": "^27.5.2",
"@types/node": "^16.11.45",
"@types/react": "^18.0.15",
"@types/react-calendar": "^3.5.1",
"@types/react-dom": "^18.0.6",
"@types/react-transition-group": "^4.4.5",
"react": "^18.2.0",
"react-calendar": "^3.7.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-transition-group": "^4.4.2",
src/components/mainPart/calendar/calendar.css
+192
View File
@@ -0,0 +1,192 @@
.react-calendar {
width: 350px;
width: 540px;
width: 100%;
/* max-width: 100%; */
/* border: 1px solid #a0a096; */
border: none;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.125em;
}
.react-calendar--doubleView {
width: 700px;
}
.react-calendar--doubleView .react-calendar__viewContainer {
display: flex;
margin: -0.5em;
}
.react-calendar--doubleView .react-calendar__viewContainer > * {
width: 50%;
margin: 0.5em;
}
.react-calendar,
.react-calendar *,
.react-calendar *:before,
.react-calendar *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.react-calendar button {
margin: 0;
border: 0;
outline: none;
}
.react-calendar button:enabled:hover {
cursor: pointer;
}
.react-calendar__navigation {
display: flex;
height: 44px;
margin-bottom: 1em;
}
.react-calendar__navigation button {
min-width: 44px;
background: none;
color: transparent;
/* background: url('navigateRightIcon.svg') 50% 50% no-repeat; */
}
.react-calendar__navigation button:nth-child(1) {
background: url('navigateCalendarButtonIcon.svg') 50% 50% no-repeat;
}
.react-calendar__navigation button:nth-child(3) {
background: url('navigateCalendarButtonIcon.svg') 50% 50% no-repeat;
transform: rotate(180deg);
}
.react-calendar__navigation button:disabled {
background-color: #f0f0f0;
}
.react-calendar__navigation button:disabled:nth-child(1) {
background-color: transparent;
opacity: .7;
}
.react-calendar__navigation button:disabled:nth-child(2) {
background-color: transparent;
}
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
/* background-color: #e6e6e6; */
opacity: .6;
}
.react-calendar__month-view__weekdays {
text-align: center;
/* text-transform: uppercase; */
font-weight: bold;
font-size: 0.75em;
font-weight: 400;
font-size: 18px;
line-height: 130%;
}
.react-calendar__month-view__weekdays__weekday {
padding: 0.5em;
}
.react-calendar__month-view__weekNumbers .react-calendar__tile {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75em;
font-weight: bold;
}
.react-calendar__month-view__days__day--weekend {
/* color: #d10000; */
}
.react-calendar__month-view__days__day--neighboringMonth {
color: #757575;
color: transparent;
pointer-events: none;
text-indent: 200%;
}
.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
padding: 2em 0.5em;
}
.react-calendar__tile {
max-width: 100%;
padding: 10px 6.6667px;
background: none;
text-align: center;
line-height: 16px;
font-weight: 400;
font-size: 22px;
line-height: 130%;
color: #CE56C2;
}
.react-calendar__tile:disabled {
/* background-color: #f0f0f0; */
color: #B196AF;
}
.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
background-color: #e6e6e6;
}
.react-calendar__tile--now {
/* background: #ffff76; */
}
.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
/* background: #ffffa9; */
}
.react-calendar__tile--hasActive {
background: #76baff;
}
.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
background: #a9d4ff;
}
.react-calendar__tile--active {
background: #006edc;
color: white;
}
.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
background: #1087ff;
}
.react-calendar--selectRange .react-calendar__tile--hover {
background-color: #e6e6e6;
}
abbr[title] {
text-decoration: none;
}
.react-calendar__navigation__label__labelText.react-calendar__navigation__label__labelText--from {
color: #333333;
color: white;
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 110%;
}
/* .react-calendar__month-view__days button:nth-child(-n+7) {
background-color: #006edc;
} */
.react-calendar__month-view__days button:nth-child(-n+35) {
background-color: #FAFAFA;
background: #322948;
}
.react-calendar__month-view__days button:nth-child(-n+28) {
background-color: transparent;
}
.react-calendar__month-view__days button:nth-child(-n+21) {
background-color: #FAFAFA;
background: #322948;
}
.react-calendar__month-view__days button:nth-child(-n+14) {
background-color: transparent;
}
.react-calendar__month-view__days button:nth-child(-n+7) {
background-color: #FAFAFA;
background: #322948;
}
src/components/mainPart/calendar/calendar.tsx
+19
View File
@@ -0,0 +1,19 @@
import React from "react";
import Calendar from "react-calendar";
import './calendar.css';
export const CalendarComponent:React.FC = React.memo(() => {
return <Calendar
showDoubleView={false}
next2Label={null}
prev2Label={null}
view={"month"}
maxDetail={"month"}
minDetail={"month"}
// tileDisabled={(a) => {
// return props.disableDays.includes(a.date.getDate())
// }}
minDate={new Date()}
// onClickDay={(e) => onClickDay(e.getDate(), e.getMonth())}
/>
})
src/components/mainPart/calendar/navigateCalendarButtonIcon.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 19L8 12L15 5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 194 B

src/components/mainPart/mainPart.css
+8
View File
@@ -211,4 +211,12 @@
opacity: 0;
transition: .3s;
transform: translateY(0);
}
.main-part-plan-content {
z-index: 1;
display: flex;
flex-direction: column;
padding: 80px 0;
margin-bottom: auto;
}
src/components/mainPart/mainPart.tsx
+19 -1
View File
@@ -6,11 +6,15 @@ 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";
export const MainPart: React.FC = React.memo(() => {
const changeContent = useRef(0);
const [showBackground, setShowBackground] = useState<boolean>(false);
const [planContent, setPlaneContent] = useState<JSX.Element>();
const [currentContent, setCurrentContent] = useState<JSX.Element>(
<ContentContainer
titleText="Удаленная демонстрация жилого комплекса"
@@ -57,6 +61,13 @@ export const MainPart: React.FC = React.memo(() => {
function onClickPlaneDemo() {
enableBackground();
setPlaneContent(
<PlanContentContainer
title="Выбор даты"
content={<CalendarComponent />}
/>
);
setCurrentContent(<></>);
}
function onClickConnect() {
@@ -84,7 +95,14 @@ export const MainPart: React.FC = React.memo(() => {
{currentContent}
</div>
</CSSTransition>
</TransitionGroup>
</TransitionGroup>
{
planContent ?
<div className="main-part-plan-content">
{planContent}
</div>
: null
}
<CSSTransition
in={showBackground}
timeout={300}
src/components/mainPart/planContentContainer.tsx
+13
View File
@@ -0,0 +1,13 @@
import React from "react";
type TProps = {
title: string
content: JSX.Element
}
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}
</div>
})