From 93fe8e4d740c4b194b99a32cba2a13949a54370c Mon Sep 17 00:00:00 2001
From: Rufat Aliyev <46456022+rufataliy@users.noreply.github.com>
Date: Thu, 4 Feb 2021 23:59:24 -0500
Subject: [PATCH 1/6] Removed selected styles for the days with
.DayPicker-Day--outside class names
---
client/components/common/ReactDayPicker/Styles.jsx | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/client/components/common/ReactDayPicker/Styles.jsx b/client/components/common/ReactDayPicker/Styles.jsx
index 1fd1390a1..0c9e2495d 100644
--- a/client/components/common/ReactDayPicker/Styles.jsx
+++ b/client/components/common/ReactDayPicker/Styles.jsx
@@ -50,7 +50,7 @@ const Styles = ({ range }) => {
color: #a8a8a8;
}
- /* Day cel hover */
+ /* Day cell hover */
.DayPicker:not(.DayPicker--interactionDisabled)
.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
@@ -88,10 +88,10 @@ const Styles = ({ range }) => {
left: 1.5rem;
}
- /*Rounded border with volume for selected start end days */
+ /*Rounded border with volume for selected start and end days */
- .Range .DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected:before,
- .Range .DayPicker-Day.DayPicker-Day--end.DayPicker-Day--selected:before {
+ .Range .DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected:not(.DayPicker-Day--outside):before,
+ .Range .DayPicker-Day.DayPicker-Day--end.DayPicker-Day--selected:not(.DayPicker-Day--outside):before {
content: "";
position: absolute;
border: 2px solid white;
@@ -129,7 +129,7 @@ const Styles = ({ range }) => {
}
- /* Layout styling, Initial styling was table based. See doc: */
+ /* Layout styling, Initial styling was table based. See docs: */
/* https://react-day-picker.js.org/examples/selected-range-enter */
.Range .DayPicker-Caption,
From b59bbef85db7042737f55d8af9fa8724dabc2021 Mon Sep 17 00:00:00 2001
From: Rufat Aliyev <46456022+rufataliy@users.noreply.github.com>
Date: Fri, 5 Feb 2021 00:02:23 -0500
Subject: [PATCH 2/6] Added displayName to static children of the selector box.
Name prop was being uglified on production build.
---
client/components/common/SelectorBox.jsx | 26 +++++++++++-------------
1 file changed, 12 insertions(+), 14 deletions(-)
diff --git a/client/components/common/SelectorBox.jsx b/client/components/common/SelectorBox.jsx
index 9e79ec595..48ca1b01f 100644
--- a/client/components/common/SelectorBox.jsx
+++ b/client/components/common/SelectorBox.jsx
@@ -18,26 +18,19 @@ const useStyles = makeStyles(theme => ({
header: {
backgroundColor: theme.palette.primary.dark,
color: theme.palette.text.primary,
- padding: 5,
- paddingLeft: 10,
- fontSize: '1rem',
+ padding: theme.gaps.xs,
+ paddingLeft: theme.gaps.sm,
marginBottom: 2,
- borderRadius: 5,
+ borderRadius: theme.borderRadius.sm,
},
content: {
- borderRadius: 5,
+ borderRadius: theme.borderRadius.sm,
backgroundColor: theme.palette.primary.dark,
- padding: '10px 10px',
+ padding: theme.gaps.sm,
},
headerAction: {
margin: 'auto',
},
- headerTitle: {
- marginLeft: 10,
- fontSize: 20,
- fontWeight: 600,
- letterSpacing: '2px',
- },
button: {
padding: '0 0 0 5px',
'&:hover': {
@@ -74,7 +67,8 @@ const SelectorBox = ({
};
const renderDisplay = () => {
- const element = children.find(child => child.type.name === 'Display');
+ const element = children.find(child => child.type.displayName === 'Display');
+
return (
);
};
+
const renderCollapse = () => {
- const element = children.find(child => child.type.name === 'Collapse');
+ const element = children.find(child => child.type.displayName === 'Collapse');
return element;
};
+
return (
@@ -135,6 +131,7 @@ function Display({ children }) {
return {children}
;
}
+Display.displayName = "Display"
Display.propTypes = {
children: PropTypes.node,
};
@@ -153,6 +150,7 @@ function Collapse({ children }) {
);
}
+Collapse.displayName = "Collapse"
Collapse.propTypes = {
children: PropTypes.node,
};
From 698bf341ccf1e6b550bad23c90564945039e3103 Mon Sep 17 00:00:00 2001
From: Rufat Aliyev <46456022+rufataliy@users.noreply.github.com>
Date: Fri, 5 Feb 2021 00:04:54 -0500
Subject: [PATCH 3/6] Assigned coordinates to the calendar wrapper on every
render
---
client/components/common/DatePicker/DatePicker.jsx | 11 +++++------
1 file changed, 5 insertions(+), 6 deletions(-)
diff --git a/client/components/common/DatePicker/DatePicker.jsx b/client/components/common/DatePicker/DatePicker.jsx
index d45a3a11a..02294192c 100644
--- a/client/components/common/DatePicker/DatePicker.jsx
+++ b/client/components/common/DatePicker/DatePicker.jsx
@@ -97,17 +97,16 @@ const DatePicker = ({
setSelectedDays(() => dates);
}, [dates]);
- useEffect(() => {
+ const getCoordinates = () => {
if (ref.current) {
const { left, top, height } = ref.current.getClientRects()[0];
const offsetFromSelectorDisplay = 2;
-
- setCoord(() => ({
+ return {
left,
top: top + height + offsetFromSelectorDisplay,
- }));
+ }
}
- }, []);
+ }
const toggleCalendar = () => {
setShowCalendar(prevState => !prevState);
@@ -131,7 +130,7 @@ const DatePicker = ({
>
-
+
{showCalendar ? (
Date: Fri, 5 Feb 2021 00:11:52 -0500
Subject: [PATCH 4/6] Removed coord state from date picker component
---
client/components/common/DatePicker/DatePicker.jsx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/client/components/common/DatePicker/DatePicker.jsx b/client/components/common/DatePicker/DatePicker.jsx
index 02294192c..42fafa636 100644
--- a/client/components/common/DatePicker/DatePicker.jsx
+++ b/client/components/common/DatePicker/DatePicker.jsx
@@ -80,7 +80,6 @@ const renderSelectedDays = (dates, classes, range) => {
const DatePicker = ({
dates, onSelect, open, onToggle, range,
}) => {
- const [coord, setCoord] = useState({});
const [selectedDays, setSelectedDays] = useState(() => dates);
const [showCalendar, setShowCalendar] = useState(() => open);
const classes = useStyles();
@@ -97,16 +96,17 @@ const DatePicker = ({
setSelectedDays(() => dates);
}, [dates]);
- const getCoordinates = () => {
+ const getCoordinates = () => {
if (ref.current) {
const { left, top, height } = ref.current.getClientRects()[0];
const offsetFromSelectorDisplay = 2;
return {
left,
top: top + height + offsetFromSelectorDisplay,
- }
+ };
}
- }
+ return {}
+ };
const toggleCalendar = () => {
setShowCalendar(prevState => !prevState);
From 03c5d683ed89d3de9c6bc8421535dd729092e432 Mon Sep 17 00:00:00 2001
From: Rufat Aliyev <46456022+rufataliy@users.noreply.github.com>
Date: Fri, 5 Feb 2021 00:13:35 -0500
Subject: [PATCH 5/6] Changed filter header title typograpy variant to h1
---
client/components/FilterMenu/index.js | 16 ++++++++++------
1 file changed, 10 insertions(+), 6 deletions(-)
diff --git a/client/components/FilterMenu/index.js b/client/components/FilterMenu/index.js
index d579d29af..8d68e7697 100644
--- a/client/components/FilterMenu/index.js
+++ b/client/components/FilterMenu/index.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
import PropTypes from 'proptypes';
import { connect } from 'react-redux';
import { toggleMenu as reduxToggleMenu } from '@reducers/ui';
-import DateSelector from '@components/DateSelector';
+import DateSelector from '@components/DateSelector/DateSelector';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardContent from '@material-ui/core/CardContent';
@@ -33,11 +33,14 @@ const useStyles = makeStyles(theme => ({
margin: 'auto',
},
headerTitle: {
+ ...theme.typography.h1,
marginLeft: theme.gaps.xs,
- fontSize: 20,
- fontWeight: 600,
letterSpacing: '2px',
},
+ headerContent: {
+ display: 'flex',
+ alignItems: 'center',
+ },
button: {
padding: theme.gaps.xs,
paddingRight: 0,
@@ -63,13 +66,14 @@ const FilterMenu = ({ toggleMenu }) => {
root: classes.header,
action: classes.headerAction,
}}
+ disableTypography
title={(
- <>
+
-
+
FILTERS
- >
+
)}
action={(
Date: Fri, 5 Feb 2021 00:15:13 -0500
Subject: [PATCH 6/6] Linted
---
client/components/common/DatePicker/DatePicker.jsx | 2 +-
client/components/common/SelectorBox.jsx | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/client/components/common/DatePicker/DatePicker.jsx b/client/components/common/DatePicker/DatePicker.jsx
index 42fafa636..dfc5c5b26 100644
--- a/client/components/common/DatePicker/DatePicker.jsx
+++ b/client/components/common/DatePicker/DatePicker.jsx
@@ -105,7 +105,7 @@ const DatePicker = ({
top: top + height + offsetFromSelectorDisplay,
};
}
- return {}
+ return {};
};
const toggleCalendar = () => {
diff --git a/client/components/common/SelectorBox.jsx b/client/components/common/SelectorBox.jsx
index 48ca1b01f..88a836956 100644
--- a/client/components/common/SelectorBox.jsx
+++ b/client/components/common/SelectorBox.jsx
@@ -131,7 +131,7 @@ function Display({ children }) {
return {children}
;
}
-Display.displayName = "Display"
+Display.displayName = 'Display';
Display.propTypes = {
children: PropTypes.node,
};
@@ -150,7 +150,7 @@ function Collapse({ children }) {
);
}
-Collapse.displayName = "Collapse"
+Collapse.displayName = 'Collapse';
Collapse.propTypes = {
children: PropTypes.node,
};