feat: read-only state (#459)

core-ds · Dec 30, 2020 · ed087c7 · ed087c7
1 parent 7688ec7
commit ed087c7
Show file tree

Hide file tree

Showing 20 changed files with 172 additions and 111 deletions.
diff --git a/packages/amount-input/src/Component.stories.mdx b/packages/amount-input/src/Component.stories.mdx
@@ -36,6 +36,7 @@ import { name, version } from '../package.json';
         bottomAddons={boolean('bottomAddons', false) && <span>bottom text</span>}
         onChange={action('change')}
         clear={boolean('clear', false)}
+        readOnly={boolean('readOnly', false)}
     />
 </Story>
 

diff --git a/packages/calendar-input/src/Component.stories.mdx b/packages/calendar-input/src/Component.stories.mdx
@@ -8,7 +8,7 @@ import Icon from '@alfalab/icons-glyph/StarMIcon';
 import { startOfMonth, startOfDay, subMonths, addMonths } from 'date-fns';
 
 import { CalendarInput } from './Component';
-import { parseDateString } from './utils';
+import { parseDateString, formatDate } from './utils';
 
 import { name, version } from '../package.json';
 
@@ -23,7 +23,7 @@ import { name, version } from '../package.json';
 
 <Story name='CalendarInput'>
     {React.createElement(() => {
-        const [value, setValue] = React.useState('');
+        const [value, setValue] = React.useState(formatDate(new Date()));
         const handleChange = (event, { value }) => setValue(value);
         return (
             <CalendarInput
@@ -37,6 +37,7 @@ import { name, version } from '../package.json';
                 success={boolean('success', false)}
                 error={boolean('error', false)}
                 disabled={boolean('disabled', false)}
+                readOnly={boolean('readOnly', false)}
             />
         );
     })}

diff --git a/packages/calendar-input/src/Component.tsx b/packages/calendar-input/src/Component.tsx
@@ -145,6 +145,7 @@ export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
             onChange,
             onInputChange,
             onCalendarChange,
+            readOnly,
             ...restProps
         },
         ref,
@@ -165,6 +166,8 @@ export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
 
         const isCalendarValueValid = dateInLimits(calendarValue, minDate, maxDate);
 
+        const inputDisabled = disabled || readOnly;
+
         const inputRef = useRef<HTMLInputElement>(null);
         const inputWrapperRef = useRef<HTMLDivElement>(null);
         const componentRef = useRef<HTMLDivElement>(null);
@@ -308,9 +311,9 @@ export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
                     [styles.block]: block,
                 })}
                 tabIndex={-1}
-                onKeyDown={disabled ? undefined : handleKeyDown}
-                onClick={disabled ? undefined : handleClick}
-                onFocus={disabled ? undefined : handleFocus}
+                onKeyDown={inputDisabled ? undefined : handleKeyDown}
+                onClick={inputDisabled ? undefined : handleClick}
+                onFocus={inputDisabled ? undefined : handleFocus}
                 onBlur={handleBlur}
                 data-test-id={dataTestId}
             >
@@ -322,6 +325,7 @@ export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
                     value={inputValue}
                     defaultValue={defaultValue}
                     disabled={disabled}
+                    readOnly={readOnly}
                     mask={DATE_MASK}
                     rightAddons={
                         <React.Fragment>

diff --git a/packages/calendar-range/src/Component.test.tsx b/packages/calendar-range/src/Component.test.tsx
@@ -1,6 +1,14 @@
 import React from 'react';
 import { render, fireEvent, act } from '@testing-library/react';
-import { setMonth, startOfMonth, addMonths, setDate, endOfMonth, startOfDay } from 'date-fns';
+import {
+    setMonth,
+    startOfMonth,
+    addMonths,
+    setDate,
+    endOfMonth,
+    startOfDay,
+    subMonths,
+} from 'date-fns';
 import { MONTHS } from '../../calendar/src/utils';
 import { formatDate } from '../../calendar-input/src/utils';
 
@@ -15,7 +23,10 @@ describe('CalendarRange', () => {
 
     describe('Display tests', () => {
         it('should match snapshot', () => {
-            expect(render(<CalendarRange />).container).toMatchSnapshot();
+            expect(
+                render(<CalendarRange defaultMonth={subMonths(currentMonth, 2).getTime()} />)
+                    .container,
+            ).toMatchSnapshot();
         });
     });