feat: add highlightedDays prop to Calendar (#2636)

nexxtway · Feb 3, 2024 · 7de9615 · 7de9615
1 parent 58898e6
commit 7de9615
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 1 deletion.
diff --git a/src/components/Calendar/day.js b/src/components/Calendar/day.js
@@ -26,6 +26,7 @@ function DayComponent(props) {
         focusedDate,
         currentRange,
         disabledDays,
+        highlightedDays,
         privateKeyDown,
         privateOnFocus,
         privateOnBlur,
@@ -40,6 +41,7 @@ function DayComponent(props) {
         compareDates(date, minDate) < 0 ||
         (maxRangeEnd && compareDates(date, maxRangeEnd) > 0) ||
         isInArray(date, disabledDays);
+    const isHighlighted = isInArray(date, highlightedDays);
     const tabIndex = isSameDay(focusedDate, date) ? 0 : -1;
     const buttonRef = useRef();
     const isRangeStartDate = useRangeStartDate(date, currentRange);
@@ -63,6 +65,7 @@ function DayComponent(props) {
                     onBlur={privateOnBlur}
                     role="button"
                     aria-disabled="true"
+                    isHighlighted={isHighlighted}
                 >
                     {day}
                 </StyledDayAdjacent>
@@ -94,6 +97,7 @@ function DayComponent(props) {
                     onBlur={privateOnBlur}
                     isWithinRange={isWithinRange}
                     isToday={isToday}
+                    isHighlighted={isHighlighted}
                 >
                     {day}
                 </StyledDayButton>

diff --git a/src/components/Calendar/doubleCalendar/index.js b/src/components/Calendar/doubleCalendar/index.js
@@ -48,6 +48,7 @@ export default function DoubleCalendar(props) {
         selectedRange,
         selectionType,
         disabledDays,
+        highlightedDays,
     } = props;
     const currentValue = useNormalizedValue(value);
     const [focusedDate, setFocusedDate] = useState(currentValue);
@@ -241,6 +242,7 @@ export default function DoubleCalendar(props) {
                         selectedRange,
                         currentRange,
                         disabledDays,
+                        highlightedDays,
                         maxRangeEnd,
                         privateOnFocus: handleOnDayFocus,
                         privateOnBlur: handleOnDayBlur,
@@ -270,6 +272,7 @@ export default function DoubleCalendar(props) {
                         selectedRange,
                         currentRange,
                         disabledDays,
+                        highlightedDays,
                         maxRangeEnd,
                         privateOnFocus: handleOnDayFocus,
                         privateOnBlur: handleOnDayBlur,
@@ -310,6 +313,9 @@ DoubleCalendar.propTypes = {
     disabledDays: PropTypes.arrayOf(
         PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
     ),
+    highlightedDays: PropTypes.arrayOf(
+        PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+    ),
 };
 
 DoubleCalendar.defaultProps = {
@@ -324,4 +330,5 @@ DoubleCalendar.defaultProps = {
     selectionType: 'single',
     selectedRange: undefined,
     disabledDays: [],
+    highlightedDays: [],
 };
diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js
@@ -82,6 +82,10 @@ Calendar.propTypes = {
     disabledDays: PropTypes.arrayOf(
         PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
     ),
+    /** An array containing the days that should be highlighted with a mark. Used for example to show an indicator that there are notifications in these days. */
+    highlightedDays: PropTypes.arrayOf(
+        PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+    ),
 };
 
 Calendar.defaultProps = {
@@ -96,4 +100,5 @@ Calendar.defaultProps = {
     selectionType: 'single',
     variant: 'single',
     disabledDays: [],
+    highlightedDays: [],
 };
diff --git a/src/components/Calendar/singleCalendar.js b/src/components/Calendar/singleCalendar.js
@@ -135,14 +135,15 @@ class SingleCalendar extends Component {
 
     getContext() {
         const { focusedDate, currentRange, maxRangeEnd } = this.state;
-        const { selectionType, selectedRange, disabledDays } = this.props;
+        const { selectionType, selectedRange, disabledDays, highlightedDays } = this.props;
         return {
             focusedDate,
             useAutoFocus: this.enableNavKeys,
             selectionType,
             selectedRange,
             currentRange,
             disabledDays,
+            highlightedDays,
             maxRangeEnd,
             privateKeyDown: this.handleKeyDown,
             privateOnFocus: this.onDayFocus,
@@ -385,6 +386,9 @@ SingleCalendar.propTypes = {
     disabledDays: PropTypes.arrayOf(
         PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
     ),
+    highlightedDays: PropTypes.arrayOf(
+        PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+    ),
 };
 
 SingleCalendar.defaultProps = {
@@ -399,6 +403,7 @@ SingleCalendar.defaultProps = {
     selectionType: 'single',
     selectedRange: undefined,
     disabledDays: [],
+    highlightedDays: [],
 };
 
 export default SingleCalendar;
diff --git a/src/components/Calendar/styled/dayAdjacent.js b/src/components/Calendar/styled/dayAdjacent.js
@@ -16,6 +16,7 @@ const StyledDayAdjacent = attachThemeAttrs(styled.span)`
     cursor: not-allowed;
     user-select: none;
     border-radius: 48px;
+    position: relative;
 
     @media (max-width: 600px) {
         margin: 3px auto;
@@ -29,6 +30,22 @@ const StyledDayAdjacent = attachThemeAttrs(styled.span)`
         line-height: 36px;
         outline: none;
     }
+
+    ${props =>
+        props.isHighlighted &&
+        `
+        &::after {
+            content: '';
+            height: 6px;
+            width: 6px;
+            position: absolute;
+            bottom: 2px;
+            left: 50%;
+            transform: translateX(-50%);
+            border-radius: 50%;
+            background-color: ${props.palette.error.main};
+        }
+    `}
 `;
 
 export default StyledDayAdjacent;
diff --git a/src/components/Calendar/styled/dayButton.js b/src/components/Calendar/styled/dayButton.js
@@ -114,6 +114,22 @@ const StyledDayButton = attachThemeAttrs(styled.button)`
         color: ${props.palette.getContrastText(props.palette.brand.main)};
         background-color: ${props.palette.brand.dark};
         `};
+
+    ${props =>
+        props.isHighlighted &&
+        `
+        &::after {
+            content: '';
+            height: 6px;
+            width: 6px;
+            position: absolute;
+            bottom: 0px;
+            left: 50%;
+            transform: translateX(-50%);
+            border-radius: 50%;
+            background-color: ${props.palette.error.main};
+        }
+    `}
 `;
 
 export default StyledDayButton;