fix(tabs): fix ssr rendering (#621)

* fix(tabs): make todo done * fix(calendar): make todo done * fix(tabs): defaultView for tabs * fix(tabs): defaultView TabsResponsinve * fix(calendar): update hooks * fix(calendar): add deps and typo of TabsMatchMedia
core-ds · Apr 26, 2021 · e45efe7 · e45efe7
1 parent 8f83022
commit e45efe7
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -54,13 +54,13 @@
     },
     "dependencies": {
         "@alfalab/data": "^0.4.0",
-        "@alfalab/hooks": "^1.0.0",
+        "@alfalab/hooks": "^1.2.0",
         "@alfalab/icons-classic": "^1.56.0",
         "@alfalab/icons-flag": "^1.3.0",
         "@alfalab/icons-glyph": "^1.102.0",
         "@alfalab/icons-logotype": "^1.9.0",
         "@alfalab/stylelint-core-vars": "^1.1.0",
-        "@alfalab/utils": "^1.1.1",
+        "@alfalab/utils": "^1.2.0",
         "@popperjs/core": "^2.3.3",
         "alfa-ui-primitives": "^2.148.0",
         "classnames": "^2.2.6",

diff --git a/packages/calendar/package.json b/packages/calendar/package.json
@@ -19,6 +19,7 @@
     },
     "dependencies": {
         "@alfalab/core-components-button": "^2.2.0",
+        "@alfalab/hooks": "^1.2.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.16.1",
         "react-merge-refs": "^1.1.0"

diff --git a/packages/calendar/src/Component.tsx b/packages/calendar/src/Component.tsx
@@ -1,12 +1,13 @@
 import React, { forwardRef, useCallback, useMemo, useState } from 'react';
 import cn from 'classnames';
 import { startOfMonth } from 'date-fns';
+import { useDidUpdateEffect } from '@alfalab/hooks';
 import { Header } from './components/header';
 import { DaysTable } from './components/days-table';
 import { MonthsTable } from './components/months-table';
 import { YearsTable } from './components/years-table';
 import { useCalendar } from './useCalendar';
-import { monthName, useDidUpdateEffect } from './utils';
+import { monthName } from './utils';
 import { View, SelectorView } from './typings';
 
 import styles from './index.module.css';

diff --git a/packages/calendar/src/usePeriod.ts b/packages/calendar/src/usePeriod.ts
@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { useDidUpdateEffect } from './utils';
+import { useDidUpdateEffect } from '@alfalab/hooks';
 
 type usePeriodProps = {
     /**

diff --git a/packages/calendar/src/utils.ts b/packages/calendar/src/utils.ts
@@ -19,7 +19,6 @@ import {
     subDays,
     subMonths,
 } from 'date-fns';
-import { useRef, useEffect } from 'react';
 import { DateShift, Day, Month, SpecialDays } from './typings';
 
 export const DAYS_IN_WEEK = 7;
@@ -246,17 +245,3 @@ export function simulateTab(node: HTMLElement) {
         node.dispatchEvent(event);
     }
 }
-
-// TODO: перенести в @alfalab/hooks?
-export function useDidUpdateEffect(fn: () => void, deps: unknown[]) {
-    const didMountRef = useRef(false);
-
-    useEffect(() => {
-        if (didMountRef.current) {
-            fn();
-        } else {
-            didMountRef.current = true;
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-}
diff --git a/packages/tabs/src/components/primary-tablist/Component.responsive.tsx b/packages/tabs/src/components/primary-tablist/Component.responsive.tsx
@@ -1,11 +1,23 @@
 import React from 'react';
+import { useMedia } from '@alfalab/hooks';
 import { PrimaryTabListDesktop } from './Component.desktop';
 import { PrimaryTabListMobile } from './Component.mobile';
-import { TabListProps } from '../../typings';
-import { useWindowWidth } from '../../utils';
+import { TabListProps, TabsMatchMedia } from '../../typings';
 
-export const PrimaryTabListResponsive = ({ size, ...restProps }: TabListProps) => {
-    return useWindowWidth() >= 768 ? (
+export const PrimaryTabListResponsive = ({
+    size,
+    defaultMatch = 'desktop',
+    ...restProps
+}: TabListProps) => {
+    const [view] = useMedia<TabsMatchMedia>(
+        [
+            ['mobile', '(max-width: 767px)'],
+            ['desktop', '(min-width: 768px)'],
+        ],
+        defaultMatch,
+    );
+
+    return view === 'desktop' ? (
         <PrimaryTabListDesktop size={size} {...restProps} />
     ) : (
         <PrimaryTabListMobile {...restProps} />

diff --git a/packages/tabs/src/components/secondary-tablist/Component.responsive.tsx b/packages/tabs/src/components/secondary-tablist/Component.responsive.tsx
@@ -1,11 +1,23 @@
 import React from 'react';
+import { useMedia } from '@alfalab/hooks';
 import { SecondaryTabListDesktop } from './Component.desktop';
 import { SecondaryTabListMobile } from './Component.mobile';
-import { SecondaryTabListProps } from '../../typings';
-import { useWindowWidth } from '../../utils';
+import { SecondaryTabListProps, TabsMatchMedia } from '../../typings';
 
-export const SecondaryTabListResponsive = ({ size, ...restProps }: SecondaryTabListProps) => {
-    return useWindowWidth() >= 768 ? (
+export const SecondaryTabListResponsive = ({
+    size,
+    defaultMatch = 'desktop',
+    ...restProps
+}: SecondaryTabListProps) => {
+    const [view] = useMedia<TabsMatchMedia>(
+        [
+            ['mobile', '(max-width: 767px)'],
+            ['desktop', '(min-width: 768px)'],
+        ],
+        defaultMatch,
+    );
+
+    return view === 'desktop' ? (
         <SecondaryTabListDesktop size={size} {...restProps} />
     ) : (
         <SecondaryTabListMobile {...restProps} />

diff --git a/packages/tabs/src/components/tabs/Component.tsx b/packages/tabs/src/components/tabs/Component.tsx
@@ -6,6 +6,7 @@ export const Tabs = ({
     className,
     containerClassName,
     size,
+    defaultMatch,
     children,
     selectedId,
     scrollable,
@@ -34,6 +35,7 @@ export const Tabs = ({
                 scrollable={scrollable}
                 onChange={onChange}
                 dataTestId={dataTestId}
+                defaultMatch={defaultMatch}
             />
 
             {tabs.map(tab => cloneElement(tab, { hidden: tab.props.id !== selectedId }))}

diff --git a/packages/tabs/src/typings.ts b/packages/tabs/src/typings.ts
@@ -3,6 +3,8 @@ import { TagProps } from '@alfalab/core-components-tag';
 
 export type SelectedId = string | number;
 
+export type TabsMatchMedia = 'desktop' | 'mobile';
+
 export type TabsProps = {
     /**
      * Дополнительный класс
@@ -34,6 +36,11 @@ export type TabsProps = {
      */
     size?: 's' | 'm' | 'l' | 'xl';
 
+    /**
+     * Режим отображения по умолчанию
+     */
+    defaultMatch?: TabsMatchMedia;
+
     /**
      * Мобильный вид
      */
@@ -112,6 +119,7 @@ export type TabListProps = Pick<
     | 'className'
     | 'containerClassName'
     | 'size'
+    | 'defaultMatch'
     | 'selectedId'
     | 'scrollable'
     | 'onChange'

diff --git a/packages/tabs/src/utils.ts b/packages/tabs/src/utils.ts
diff --git a/yarn.lock b/yarn.lock
@@ -19,6 +19,16 @@
     classnames "^2.2.6"
     react-merge-refs "^1.1.0"
 
+"@alfalab/core-components-button@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@alfalab/core-components-button/-/core-components-button-2.2.0.tgz#fbbd0cd9fa8281031e4ee885920e28f1348e5803"
+  integrity sha512-ffryNpcJ4v9cpEtOxxxAYt1/wOqBYYPx6pNFLMU5U+r53i4NId7wNAKr/uhcKR74wgFdQbsrYD386S9az5Nw1A==
+  dependencies:
+    "@alfalab/core-components-loader" "^1.1.5"
+    "@alfalab/hooks" "^1.0.0"
+    classnames "^2.2.6"
+    react-merge-refs "^1.1.0"
+
 "@alfalab/core-components-form-control@^3.1.5":
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/@alfalab/core-components-form-control/-/core-components-form-control-3.1.5.tgz#c064abf1ad4a1f71b75206e7d40d4935e4098b58"
@@ -90,6 +100,11 @@
   resolved "https://registry.yarnpkg.com/@alfalab/hooks/-/hooks-1.1.1.tgz#c61e839983cb915e2e4de730bf9c9b0f1c0aea45"
   integrity sha512-4NBh/BzFE/W7Wxgxa0SByodjpDgUQT5RHzc/9wLbMlhljpo+S145mavFdtK+YcJ2Sg4GK6OZon61KqV5w7Nafw==
 
+"@alfalab/hooks@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@alfalab/hooks/-/hooks-1.2.0.tgz#729ae06c5c3ebe02a9ca0f98bcc01c8713c5c54b"
+  integrity sha512-AHrMhlC3AxL085T/NnCjYsiERUFkfh9MtvXAAs954w2RZdhQFlLpevESv0lzjoVSnYfrV4yOzQyUbb/WGDQFGA==
+
 "@alfalab/icons-classic@^1.56.0":
   version "1.63.0"
   resolved "https://registry.yarnpkg.com/@alfalab/icons-classic/-/icons-classic-1.63.0.tgz#e0612c27c4332263d7f72932f0e4406cd4921417"
@@ -156,6 +171,11 @@
   resolved "https://registry.yarnpkg.com/@alfalab/utils/-/utils-1.1.1.tgz#1f14fc91b03d9e99049a59daff009cc8e4a70f95"
   integrity sha512-JdMNq3WXVwhU3z4cxlkWutbY8C6QIj5PbO3IhAWpe506rhSaZPJIUY+SMoV+BJ5pADD0eiseraQPHaQtIkmGTQ==
 
+"@alfalab/utils@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@alfalab/utils/-/utils-1.2.0.tgz#604411c6bd266b663c6cc251d593ca4e8bc3a9a4"
+  integrity sha512-P/nfoDPIdmhk0LrrFP8rEtKsmyTwUs3OHTI/F8iOiJjGWzWFzTzE5fE48ztRRj/rUuWQ/FJHU3zazQ19Q9EepQ==
+
 "@babel/code-frame@7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"