feat: making input ids passable by props for datepicker (#120)

freenowtech · Jun 15, 2021 · 2667dce · 2667dce
1 parent 0d100ce
commit 2667dce
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/src/components/Datepicker/DatepickerRangeInput.tsx b/src/components/Datepicker/DatepickerRangeInput.tsx
@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { compose, margin, MarginProps, width, WidthProps } from 'styled-system';
 import { Colors, Elevation, MediaQueries } from '../../essentials';
 import { theme } from '../../essentials/theme';
+import { useGeneratedId } from '../../utils/hooks/useGeneratedId';
 import { ChevronRightIcon } from '../../icons';
 import { Input } from '../Input/Input';
 
@@ -153,6 +154,14 @@ interface DatepickerRangeInputProps extends MarginProps, WidthProps {
      * or fn to be trigger as a callback when error
      */
     errorHandler?: (() => void) | string;
+    /**
+     * The id to be assigned to the start date input
+     */
+    startInputId?: string;
+    /**
+     * The id to be assigned to the end date input
+     */
+    endInputId?: string;
 }
 
 interface DateRangeInputText {
@@ -199,6 +208,8 @@ const DatepickerRangeInput = ({
     locale = 'en-US',
     value = {},
     errorHandler,
+    startInputId,
+    endInputId,
     ...rest
 }: DatepickerRangeInputProps) => {
     const localeObject = useLocaleObject(locale);
@@ -211,6 +222,9 @@ const DatepickerRangeInput = ({
     const [error, setError] = useState({ startDate: false, endDate: false });
     const displayErrorMessage = typeof errorHandler === 'string';
 
+    const startId = useGeneratedId(startInputId);
+    const endId = useGeneratedId(endInputId);
+
     useEffect(() => {
         if (!focusedInput && (error.startDate || error.endDate) && typeof errorHandler === 'function') {
             errorHandler();
@@ -312,6 +326,7 @@ const DatepickerRangeInput = ({
                 <>
                     <DateRangeWrapper ref={ref} {...rest}>
                         <Input
+                            id={startId}
                             ref={startDateRef}
                             autoComplete="off"
                             className="startDate"
@@ -328,6 +343,7 @@ const DatepickerRangeInput = ({
                         {focusedInput === START_DATE && <StartDateFocusedBlock />}
                         <DateArrow color={Colors.AUTHENTIC_BLUE_550} />
                         <Input
+                            id={endId}
                             ref={endDateRef}
                             tabIndex={!inputText.startText ? -1 : 0}
                             autoComplete="off"

diff --git a/src/components/Datepicker/DatepickerSingleInput.tsx b/src/components/Datepicker/DatepickerSingleInput.tsx
@@ -8,6 +8,7 @@ import { Input } from '../Input/Input';
 import { Datepicker } from './Datepicker';
 import { isValidDateText } from './utils/isValidDateText';
 import { Elevation } from '../../essentials';
+import { useGeneratedId } from '../../utils/hooks/useGeneratedId';
 import { HelperText } from '../HelperText/HelperText';
 import { dateToDisplayText } from './utils/dateToDisplayText';
 import { useLocaleObject } from './utils/useLocaleObject';
@@ -66,6 +67,10 @@ interface DatepickerSingleInputProps extends MarginProps, WidthProps {
      * or fn to be trigger as a callback when error
      */
     errorHandler?: (() => void) | string;
+    /**
+     * The id to be assigned to the input field
+     */
+    inputId?: string;
 }
 
 const DatepickerSingleInput = ({
@@ -81,6 +86,7 @@ const DatepickerSingleInput = ({
     locale = 'en-US',
     value,
     errorHandler,
+    inputId,
     ...rest
 }: DatepickerSingleInputProps) => {
     const localeObject = useLocaleObject(locale);
@@ -90,6 +96,8 @@ const DatepickerSingleInput = ({
     const [error, setError] = useState(false);
     const displayErrorMessage = typeof errorHandler === 'string';
 
+    const id = useGeneratedId(inputId);
+
     useEffect(() => {
         if (error && typeof errorHandler === 'function') {
             errorHandler();
@@ -155,6 +163,7 @@ const DatepickerSingleInput = ({
                                 inputRef.current = element;
                                 ref.current = element;
                             }}
+                            id={id}
                             autoComplete="off"
                             className="startDate"
                             data-testid="start-date-input"