feat(calendar-input): uses date-input (#752)

* feat(date-input): add component * feat(calendar-input): migrate to date-input Co-authored-by: dmitrsavk <dmitrsavk@yandex.ru>
core-ds · Jul 23, 2021 · 509dba2 · 509dba2
1 parent dab3f32
commit 509dba2
Show file tree

Hide file tree

Showing 14 changed files with 41 additions and 95 deletions.
diff --git a/packages/calendar-input/package.json b/packages/calendar-input/package.json
@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "@alfalab/core-components-calendar": "^3.0.2",
-        "@alfalab/core-components-masked-input": "^4.0.2",
+        "@alfalab/core-components-date-input": "^1.0.0",
         "@alfalab/core-components-popover": "^5.1.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.16.1",

diff --git a/packages/calendar-input/src/Component.test.tsx b/packages/calendar-input/src/Component.test.tsx
@@ -279,7 +279,7 @@ describe('CalendarInput', () => {
         });
 
         it('should not change calendar if entered invalid value', async () => {
-            const value = '20.20.2020';
+            const value = '20.11.20';
             const defaultMonth = new Date('November 01, 2020 00:00:00').getTime();
             const { container, queryByText, queryByRole } = render(
                 <CalendarInput calendarPosition='static' defaultMonth={defaultMonth} />,

diff --git a/packages/calendar-input/src/Component.tsx b/packages/calendar-input/src/Component.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable multiline-comment-style */
 import React, {
     forwardRef,
     useCallback,
@@ -12,34 +11,28 @@ import React, {
     ElementType,
 } from 'react';
 import cn from 'classnames';
-import { MaskedInput, MaskedInputProps } from '@alfalab/core-components-masked-input';
-import {
-    Calendar as DefaultCalendar,
-    CalendarProps,
-    dateInLimits,
-} from '@alfalab/core-components-calendar';
-import { Popover, PopoverProps } from '@alfalab/core-components-popover';
 import mergeRefs from 'react-merge-refs';
+
+import { Popover, PopoverProps } from '@alfalab/core-components-popover';
+
 import {
-    NATIVE_DATE_FORMAT,
-    DATE_MASK,
+    DateInput,
+    DateInputProps,
     SUPPORTS_INPUT_TYPE_DATE,
     formatDate,
     parseDateString,
     isCompleteDateInput,
-} from './utils';
+} from '@alfalab/core-components-date-input';
 
-import styles from './index.module.css';
+import {
+    Calendar as DefaultCalendar,
+    CalendarProps,
+    dateInLimits,
+} from '@alfalab/core-components-calendar';
 
-export type CalendarInputProps = Omit<
-    MaskedInputProps,
-    'mask' | 'value' | 'onChange' | 'clear' | 'onClear' | 'rightAddons' | 'onBeforeDisplay'
-> & {
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean;
+import styles from './index.module.css';
 
+export type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Дополнительный класс
      */
@@ -132,11 +125,6 @@ export type CalendarInputProps = Omit<
      */
     onCalendarChange?: CalendarProps['onChange'];
 
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-
     /**
      * Позиционирование поповера с календарем
      */
@@ -194,9 +182,7 @@ export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
 
         const inputDisabled = disabled || readOnly;
 
-        const inputRef = useRef<HTMLInputElement>(null);
         const inputWrapperRef = useRef<HTMLDivElement>(null);
-        const componentRef = useRef<HTMLDivElement>(null);
         const calendarRef = useRef<HTMLDivElement>(null);
 
         const handleKeyDown = useCallback(
@@ -271,34 +257,21 @@ export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
             [onCalendarChange, onChange, onInputChange, uncontrolled],
         );
 
-        const handleInputChange = useCallback(
-            (event: ChangeEvent<HTMLInputElement>) => {
-                const newValue = event.target.value;
-                const newDate = parseDateString(newValue);
-
+        const handleInputChange = useCallback<Required<DateInputProps>['onChange']>(
+            (event, payload) => {
                 changeHandler(
                     event,
-                    newValue,
-                    newDate,
+                    payload.value,
+                    payload.date,
                     'input',
-                    !newValue || isCompleteDateInput(newValue),
+                    !payload.value || isCompleteDateInput(payload.value),
                 );
             },
             [changeHandler],
         );
 
-        const handleNativeInputChange = useCallback(
-            (event: ChangeEvent<HTMLInputElement>) => {
-                const newDate = parseDateString(event.target.value, NATIVE_DATE_FORMAT);
-                const newValue = event.target.value === '' ? '' : formatDate(newDate);
-
-                changeHandler(event, newValue, newDate);
-            },
-            [changeHandler],
-        );
-
-        const handleCalendarChange = useCallback(
-            (date: number) => {
+        const handleCalendarChange = useCallback<Required<CalendarProps>['onChange']>(
+            date => {
                 changeHandler(null, formatDate(date), new Date(date), 'calendar');
                 setOpen(false);
             },
@@ -346,7 +319,6 @@ export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
         return (
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             <div
-                ref={componentRef}
                 className={cn(styles.component, className, {
                     [styles.block]: block,
                 })}
@@ -357,35 +329,19 @@ export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
                 onBlur={handleBlur}
                 data-test-id={dataTestId}
             >
-                <MaskedInput
+                <DateInput
                     {...restProps}
-                    ref={mergeRefs([ref, inputRef])}
+                    ref={ref}
                     wrapperRef={mergeRefs([wrapperRef, inputWrapperRef])}
                     className={inputClassName}
                     value={inputValue}
                     defaultValue={defaultValue}
                     disabled={disabled}
                     readOnly={readOnly}
-                    mask={DATE_MASK}
-                    rightAddons={
-                        <React.Fragment>
-                            <span className={styles.calendarIcon} />
-                            {shouldRenderNative && (
-                                <input
-                                    type='date'
-                                    ref={mergeRefs([ref, inputRef])}
-                                    defaultValue={defaultValue}
-                                    onChange={handleNativeInputChange}
-                                    className={styles.nativeInput}
-                                />
-                            )}
-                        </React.Fragment>
-                    }
+                    mobileMode={mobileMode === 'native' ? 'native' : 'input'}
                     onKeyDown={handleInputKeyDown}
                     onChange={handleInputChange}
                     block={true}
-                    inputMode='numeric'
-                    pattern='[0-9\.]*'
                 />
                 {shouldRenderStatic && renderCalendar()}
 

diff --git a/...rc/__image_snapshots__/calendar-input-interactions-tests-open-calendar-snap.png b/...rc/__image_snapshots__/calendar-input-interactions-tests-open-calendar-snap.png
diff --git a/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap
@@ -20,8 +20,6 @@ exports[`CalendarInput Display tests should match snapshot 1`] = `
           >
             <input
               class="input"
-              inputmode="numeric"
-              pattern="[0-9\\\\.]*"
               type="text"
               value=""
             />
@@ -31,7 +29,7 @@ exports[`CalendarInput Display tests should match snapshot 1`] = `
           class="addons rightAddons"
         >
           <span
-            class="calendarIcon"
+            class="icon"
           />
         </div>
       </div>

diff --git a/packages/calendar-input/src/docs/Component.stories.mdx b/packages/calendar-input/src/docs/Component.stories.mdx
@@ -1,10 +1,10 @@
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import { text, select, boolean } from '@storybook/addon-knobs';
 import Icon from '@alfalab/icons-glyph/StarMIcon';
+import { formatDate } from '@alfalab/core-components-date-input';
 import { ComponentHeader, Tabs, CssVars } from 'storybook/blocks';
 
 import { CalendarInput } from '../Component';
-import { formatDate } from '../utils';
 import { name, version } from '../../package.json';
 import Description from './description.mdx';
 import Changelog from '../../CHANGELOG.md';

diff --git a/packages/calendar-input/tsconfig.json b/packages/calendar-input/tsconfig.json
@@ -11,7 +11,7 @@
     },
     "references": [
         { "path": "../calendar" },
-        { "path": "../masked-input" },
+        { "path": "../date-input" },
         { "path": "../popover" }
     ]
 }
diff --git a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
@@ -23,8 +23,6 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
             >
               <input
                 class="input"
-                inputmode="numeric"
-                pattern="[0-9\\\\.]*"
                 type="text"
                 value=""
               />
@@ -34,7 +32,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
             class="addons rightAddons"
           >
             <span
-              class="calendarIcon"
+              class="icon"
             />
           </div>
         </div>
@@ -586,8 +584,6 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
               >
                 <input
                   class="input"
-                  inputmode="numeric"
-                  pattern="[0-9\\\\.]*"
                   type="text"
                   value=""
                 />
@@ -597,7 +593,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
               class="addons rightAddons"
             >
               <span
-                class="calendarIcon"
+                class="icon"
               />
             </div>
           </div>

diff --git a/...eckbox/src/__image_snapshots__/checkbox-size-disabled-checked-sprite-2-snap.png b/...eckbox/src/__image_snapshots__/checkbox-size-disabled-checked-sprite-2-snap.png
diff --git a/...eckbox/src/__image_snapshots__/checkbox-size-disabled-checked-sprite-3-snap.png b/...eckbox/src/__image_snapshots__/checkbox-size-disabled-checked-sprite-3-snap.png
diff --git a/packages/date-input/src/index.ts b/packages/date-input/src/index.ts
@@ -1 +1,2 @@
 export * from './Component';
+export * from './utils';
diff --git a/packages/radio/src/__image_snapshots__/radio-mobile-theme-snap.png b/packages/radio/src/__image_snapshots__/radio-mobile-theme-snap.png
diff --git a/...ess-bar/src/__image_snapshots__/stepped-progress-bar-main-props-sprite-snap.png b/...ess-bar/src/__image_snapshots__/stepped-progress-bar-main-props-sprite-snap.png
diff --git a/yarn.lock b/yarn.lock
@@ -158,11 +158,6 @@
   resolved "https://registry.yarnpkg.com/@alfalab/utils/-/utils-1.3.0.tgz#956c18e4a577b0e8076d0a7823db7a3852ef613c"
   integrity sha512-+BEJYXjWyl6mdBomoH80lGFsVjLHHGwAU3H+SZvbGsnyL3M8gVwkMTYvUTEtddxEHKLlTTo6IGmzfAXT/UPaNg==
 
-"@alfalab/utils@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@alfalab/utils/-/utils-1.2.1.tgz#a0aa2eaeaa8b0078337e6d3dc5e4d4b18c95adf9"
-  integrity sha512-ZqDh9IsrIM371vEJn7eDxHx/yMgUv3YiLwkjYv/CKuBVPsq26dMkVnVEcKwHykNDAiTG1bL05iWn7cqX9XjhBg==
-
 "@babel/code-frame@7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"