From b6334a0ff0d96be06252d771def63bdac2dc237e Mon Sep 17 00:00:00 2001 From: Daniil Suvorov Date: Thu, 24 Oct 2024 16:41:53 +0300 Subject: [PATCH] =?UTF-8?q?refactor(css):=20rm=20deadly=20code=20=D0=A3?= =?UTF-8?q?=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5=D0=BC=20=D0=BC=D0=B5=D1=80=D1=82?= =?UTF-8?q?=D0=B2=D1=8B=D0=B9=20css=20=D0=BA=D0=BE=D0=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Button/Button.module.css | 6 --- .../vkui/src/components/Button/Button.tsx | 5 +- .../Flex/FlexItem/FlexItem.module.css | 4 -- .../src/components/Flex/FlexItem/FlexItem.tsx | 1 - .../constants.ts | 53 ++++++------------- .../useAdaptivityConditionalRender/helpers.ts | 39 ++++++-------- .../useAdaptivityConditionalRender.test.tsx | 53 ++++++++++--------- .../useAdaptivityConditionalRender.tsx | 28 ++++++---- .../vkui/src/styles/adaptivity.module.css | 20 ------- 9 files changed, 78 insertions(+), 131 deletions(-) diff --git a/packages/vkui/src/components/Button/Button.module.css b/packages/vkui/src/components/Button/Button.module.css index 23c0f0fbc6..a554593e5f 100644 --- a/packages/vkui/src/components/Button/Button.module.css +++ b/packages/vkui/src/components/Button/Button.module.css @@ -59,9 +59,6 @@ text-align: start; } -.alignCenter { -} - .alignRight .in { justify-content: flex-end; text-align: end; @@ -78,9 +75,6 @@ opacity: 0.64; } -.withIcon { -} - .content { white-space: nowrap; text-overflow: ellipsis; diff --git a/packages/vkui/src/components/Button/Button.tsx b/packages/vkui/src/components/Button/Button.tsx index c9e04ddfb2..2e053f14ea 100644 --- a/packages/vkui/src/components/Button/Button.tsx +++ b/packages/vkui/src/components/Button/Button.tsx @@ -36,7 +36,6 @@ const stylesAppearance = { const stylesAlign = { left: styles.alignLeft, - center: styles.alignCenter, right: styles.alignRight, }; @@ -79,7 +78,6 @@ export const Button = ({ rounded, ...restProps }: ButtonProps): React.ReactNode => { - const hasIcons = Boolean(before || after); const hasIconOnly = !children && Boolean(after) !== Boolean(before); const { sizeY = 'none' } = useAdaptivity(); const platform = usePlatform(); @@ -98,11 +96,10 @@ export const Button = ({ stylesSize[size], stylesMode[mode], stylesAppearance[appearance], - stylesAlign[align], + align !== 'center' && stylesAlign[align], sizeY !== 'compact' && sizeYClassNames[sizeY], platform === 'ios' && styles.ios, stretched && styles.stretched, - hasIcons && styles.withIcon, hasIconOnly && !stretched && styles.singleIcon, loading && styles.loading, rounded && styles.rounded, diff --git a/packages/vkui/src/components/Flex/FlexItem/FlexItem.module.css b/packages/vkui/src/components/Flex/FlexItem/FlexItem.module.css index aaacc1596c..7b68e7ade0 100644 --- a/packages/vkui/src/components/Flex/FlexItem/FlexItem.module.css +++ b/packages/vkui/src/components/Flex/FlexItem/FlexItem.module.css @@ -1,7 +1,3 @@ -.host { - /* Пустой класс для CSS Modules (см. CONTRIBUTING.md) */ -} - /* flex */ .flexGrow { diff --git a/packages/vkui/src/components/Flex/FlexItem/FlexItem.tsx b/packages/vkui/src/components/Flex/FlexItem/FlexItem.tsx index 7d424602ff..b11d57b986 100644 --- a/packages/vkui/src/components/Flex/FlexItem/FlexItem.tsx +++ b/packages/vkui/src/components/Flex/FlexItem/FlexItem.tsx @@ -54,7 +54,6 @@ export const FlexItem = ({ {...rest} style={{ flexBasis, ...style }} baseClassName={classNames( - styles.host, alignSelf && alignSelfClassNames[alignSelf], flex && flexClassNames[flex], )} diff --git a/packages/vkui/src/hooks/useAdaptivityConditionalRender/constants.ts b/packages/vkui/src/hooks/useAdaptivityConditionalRender/constants.ts index 828dae3c51..518fb78077 100644 --- a/packages/vkui/src/hooks/useAdaptivityConditionalRender/constants.ts +++ b/packages/vkui/src/hooks/useAdaptivityConditionalRender/constants.ts @@ -1,49 +1,30 @@ +import { type ElementProps } from './types'; import styles from '../../styles/adaptivity.module.css'; -export const sizeXCompactClassNames: Record<'mq' | 'compact', { className: string }> = { - mq: { className: styles['-sizeX--compact-mq'] }, - compact: { className: styles['-sizeX--compact-forced'] }, +export const forcedProps = { className: '' }; + +export const sizeXCompactMediaQueryProps: ElementProps = { + className: styles['-sizeX--compact-mq'], }; -export const sizeXRegularClassNames: Record<'mq' | 'regular', { className: string }> = { - mq: { className: styles['-sizeX--regular-mq'] }, - regular: { className: styles['-sizeX--regular-forced'] }, +export const sizeXRegularMediaQueryProps: ElementProps = { + className: styles['-sizeX--regular-mq'], }; -export const sizeYCompactClassNames: Record<'mq' | 'compact', { className: string }> = { - mq: { className: styles['-sizeY--compact-mq'] }, - compact: { className: styles['-sizeY--compact-forced'] }, +export const sizeYCompactMediaQueryProps: ElementProps = { + className: styles['-sizeY--compact-mq'], }; -export const sizeYRegularClassNames: Record<'mq' | 'regular', { className: string }> = { - mq: { className: styles['-sizeY--regular-mq'] }, - regular: { className: styles['-sizeY--regular-forced'] }, +export const sizeYRegularMediaQueryProps: ElementProps = { + className: styles['-sizeY--regular-mq'], }; -export const viewWidthClassNames: Record< - 'tabletMinus' | 'tabletPlus', - Record<'mq' | 'forced', { className: string }> -> = { - tabletMinus: { - mq: { className: styles['-viewWidth--tabletMinus-mq'] }, - forced: { className: styles['-viewWidth--tabletMinus-forced'] }, - }, - tabletPlus: { - mq: { className: styles['-viewWidth--tabletPlus-mq'] }, - forced: { className: styles['-viewWidth--tabletPlus-forced'] }, - }, +export const viewWidthMediaQueryMapProps: Record<'tabletMinus' | 'tabletPlus', ElementProps> = { + tabletMinus: { className: styles['-viewWidth--tabletMinus-mq'] }, + tabletPlus: { className: styles['-viewWidth--tabletPlus-mq'] }, }; -export const deviceTypeClassNames: Record< - 'mobile' | 'desktop', - Record<'mq' | 'forced', { className: string }> -> = { - mobile: { - mq: { className: styles['-deviceType--mobile-mq'] }, - forced: { className: styles['-deviceType--mobile-forced'] }, - }, - desktop: { - mq: { className: styles['-deviceType--desktop-mq'] }, - forced: { className: styles['-deviceType--desktop-forced'] }, - }, +export const deviceTypeMediaQueryMapProps: Record<'mobile' | 'desktop', ElementProps> = { + mobile: { className: styles['-deviceType--mobile-mq'] }, + desktop: { className: styles['-deviceType--desktop-mq'] }, }; diff --git a/packages/vkui/src/hooks/useAdaptivityConditionalRender/helpers.ts b/packages/vkui/src/hooks/useAdaptivityConditionalRender/helpers.ts index de8a66d1de..48ca6533ff 100644 --- a/packages/vkui/src/hooks/useAdaptivityConditionalRender/helpers.ts +++ b/packages/vkui/src/hooks/useAdaptivityConditionalRender/helpers.ts @@ -6,6 +6,7 @@ import { type ViewWidthType, } from '../../lib/adaptivity'; import type { PlatformType } from '../../lib/platform'; +import { forcedProps } from './constants'; import type { AdaptiveDeviceType, AdaptiveSizeType, @@ -17,41 +18,31 @@ import type { export const getAdaptiveSizeType = ( type: undefined | SizeTypeValues, - compactClassNames: Record<'mq' | 'compact', ElementProps>, - regularClassNames: Record<'mq' | 'regular', ElementProps>, + compactMediaQueryProps: ElementProps, + regularMediaQueryProps: ElementProps, ): AdaptiveSizeType => { return { - compact: - type === undefined - ? compactClassNames.mq - : type === 'compact' - ? compactClassNames[type] - : false, - regular: - type === undefined - ? regularClassNames.mq - : type === 'regular' - ? regularClassNames[type] - : false, + compact: type === undefined ? compactMediaQueryProps : type === 'compact' ? forcedProps : false, + regular: type === undefined ? regularMediaQueryProps : type === 'regular' ? forcedProps : false, }; }; export const getAdaptiveViewWidth = ( viewWidth: undefined | ViewWidthType, - viewWidthClassNames: Record>, + viewWidthMapProps: Record, ): AdaptiveViewWidth => { return { tabletMinus: viewWidth === undefined - ? viewWidthClassNames.tabletMinus.mq + ? viewWidthMapProps.tabletMinus : viewWidth < ViewWidth.TABLET - ? viewWidthClassNames.tabletMinus.forced + ? forcedProps : false, tabletPlus: viewWidth === undefined - ? viewWidthClassNames.tabletPlus.mq + ? viewWidthMapProps.tabletPlus : viewWidth >= ViewWidth.TABLET - ? viewWidthClassNames.tabletPlus.forced + ? forcedProps : false, }; }; @@ -61,26 +52,26 @@ export const getAdaptiveDeviceType = ( viewHeight: undefined | ViewHeightType, hasPointer: undefined | boolean, platform: PlatformType, - deviceTypeClassNames: Record>, + deviceTypeMapProps: Record, ): AdaptiveDeviceType => { const isDesktop = tryToCheckIsDesktop(viewWidth, viewHeight, hasPointer, platform); if (isDesktop === null) { return { - mobile: deviceTypeClassNames.mobile.mq, - desktop: deviceTypeClassNames.desktop.mq, + mobile: deviceTypeMapProps.mobile, + desktop: deviceTypeMapProps.desktop, }; } if (isDesktop) { return { mobile: false, - desktop: deviceTypeClassNames.desktop.forced, + desktop: forcedProps, }; } return { - mobile: deviceTypeClassNames.mobile.forced, + mobile: forcedProps, desktop: false, }; }; diff --git a/packages/vkui/src/hooks/useAdaptivityConditionalRender/useAdaptivityConditionalRender.test.tsx b/packages/vkui/src/hooks/useAdaptivityConditionalRender/useAdaptivityConditionalRender.test.tsx index fa1be51f6c..078aeed9a5 100644 --- a/packages/vkui/src/hooks/useAdaptivityConditionalRender/useAdaptivityConditionalRender.test.tsx +++ b/packages/vkui/src/hooks/useAdaptivityConditionalRender/useAdaptivityConditionalRender.test.tsx @@ -3,12 +3,13 @@ import type { AdaptivityProps } from '../../components/AdaptivityProvider/Adapti import { AdaptivityProvider } from '../../components/AdaptivityProvider/AdaptivityProvider'; import { ViewHeight, ViewWidth } from '../../lib/adaptivity'; import { - deviceTypeClassNames, - sizeXCompactClassNames, - sizeXRegularClassNames, - sizeYCompactClassNames, - sizeYRegularClassNames, - viewWidthClassNames, + deviceTypeMediaQueryMapProps, + forcedProps, + sizeXCompactMediaQueryProps, + sizeXRegularMediaQueryProps, + sizeYCompactMediaQueryProps, + sizeYRegularMediaQueryProps, + viewWidthMediaQueryMapProps, } from './constants'; import { useAdaptivityConditionalRender } from './useAdaptivityConditionalRender'; @@ -17,32 +18,32 @@ describe(useAdaptivityConditionalRender, () => { it('sizeX', () => { const { result } = renderHook(useAdaptivityConditionalRender); expect(result.current.sizeX).toMatchObject({ - compact: sizeXCompactClassNames.mq, - regular: sizeXRegularClassNames.mq, + compact: sizeXCompactMediaQueryProps, + regular: sizeXRegularMediaQueryProps, }); }); it('sizeY', () => { const { result } = renderHook(useAdaptivityConditionalRender); expect(result.current.sizeY).toMatchObject({ - compact: sizeYCompactClassNames.mq, - regular: sizeYRegularClassNames.mq, + compact: sizeYCompactMediaQueryProps, + regular: sizeYRegularMediaQueryProps, }); }); it('viewWidth', () => { const { result } = renderHook(useAdaptivityConditionalRender); expect(result.current.viewWidth).toMatchObject({ - tabletPlus: viewWidthClassNames.tabletPlus.mq, - tabletMinus: viewWidthClassNames.tabletMinus.mq, + tabletPlus: viewWidthMediaQueryMapProps.tabletPlus, + tabletMinus: viewWidthMediaQueryMapProps.tabletMinus, }); }); it('deviceType', () => { const { result } = renderHook(useAdaptivityConditionalRender); expect(result.current.deviceType).toMatchObject({ - mobile: deviceTypeClassNames.mobile.mq, - desktop: deviceTypeClassNames.desktop.mq, + mobile: deviceTypeMediaQueryMapProps.mobile, + desktop: deviceTypeMediaQueryMapProps.desktop, }); }); }); @@ -59,7 +60,7 @@ describe(useAdaptivityConditionalRender, () => { sizeX: 'compact', }); expect(result.current.sizeX).toMatchObject({ - compact: sizeXCompactClassNames['compact'], + compact: forcedProps, regular: false, }); }); @@ -70,7 +71,7 @@ describe(useAdaptivityConditionalRender, () => { }); expect(result.current.sizeX).toMatchObject({ compact: false, - regular: sizeXRegularClassNames['regular'], + regular: forcedProps, }); }); }); @@ -81,7 +82,7 @@ describe(useAdaptivityConditionalRender, () => { sizeY: 'compact', }); expect(result.current.sizeY).toMatchObject({ - compact: sizeYCompactClassNames['compact'], + compact: forcedProps, regular: false, }); }); @@ -92,7 +93,7 @@ describe(useAdaptivityConditionalRender, () => { }); expect(result.current.sizeY).toMatchObject({ compact: false, - regular: sizeYRegularClassNames['regular'], + regular: forcedProps, }); }); }); @@ -103,7 +104,7 @@ describe(useAdaptivityConditionalRender, () => { viewWidth: ViewWidth.TABLET, }); expect(result.current.viewWidth).toMatchObject({ - tabletPlus: viewWidthClassNames.tabletPlus.forced, + tabletPlus: forcedProps, tabletMinus: false, }); }); @@ -114,7 +115,7 @@ describe(useAdaptivityConditionalRender, () => { }); expect(result.current.viewWidth).toMatchObject({ tabletPlus: false, - tabletMinus: viewWidthClassNames.tabletMinus.forced, + tabletMinus: forcedProps, }); }); }); @@ -125,8 +126,8 @@ describe(useAdaptivityConditionalRender, () => { viewWidth: ViewWidth.SMALL_MOBILE, }); expect(result.current.deviceType).toMatchObject({ - mobile: deviceTypeClassNames.mobile.mq, - desktop: deviceTypeClassNames.desktop.mq, + mobile: deviceTypeMediaQueryMapProps.mobile, + desktop: deviceTypeMediaQueryMapProps.desktop, }); }); @@ -135,8 +136,8 @@ describe(useAdaptivityConditionalRender, () => { viewHeight: ViewHeight.MEDIUM, }); expect(result.current.deviceType).toMatchObject({ - mobile: deviceTypeClassNames.mobile.mq, - desktop: deviceTypeClassNames.desktop.mq, + mobile: deviceTypeMediaQueryMapProps.mobile, + desktop: deviceTypeMediaQueryMapProps.desktop, }); }); @@ -146,7 +147,7 @@ describe(useAdaptivityConditionalRender, () => { viewHeight: ViewHeight.MEDIUM, }); expect(result.current.deviceType).toMatchObject({ - mobile: deviceTypeClassNames.mobile.forced, + mobile: forcedProps, desktop: false, }); }); @@ -158,7 +159,7 @@ describe(useAdaptivityConditionalRender, () => { }); expect(result.current.deviceType).toMatchObject({ mobile: false, - desktop: deviceTypeClassNames.desktop.forced, + desktop: forcedProps, }); }); }); diff --git a/packages/vkui/src/hooks/useAdaptivityConditionalRender/useAdaptivityConditionalRender.tsx b/packages/vkui/src/hooks/useAdaptivityConditionalRender/useAdaptivityConditionalRender.tsx index 5efe84fa69..70248c0f89 100644 --- a/packages/vkui/src/hooks/useAdaptivityConditionalRender/useAdaptivityConditionalRender.tsx +++ b/packages/vkui/src/hooks/useAdaptivityConditionalRender/useAdaptivityConditionalRender.tsx @@ -2,12 +2,12 @@ import * as React from 'react'; import { AdaptivityContext } from '../../components/AdaptivityProvider/AdaptivityContext'; import { usePlatform } from '../usePlatform'; import { - deviceTypeClassNames, - sizeXCompactClassNames, - sizeXRegularClassNames, - sizeYCompactClassNames, - sizeYRegularClassNames, - viewWidthClassNames, + deviceTypeMediaQueryMapProps, + sizeXCompactMediaQueryProps, + sizeXRegularMediaQueryProps, + sizeYCompactMediaQueryProps, + sizeYRegularMediaQueryProps, + viewWidthMediaQueryMapProps, } from './constants'; import { getAdaptiveDeviceType, getAdaptiveSizeType, getAdaptiveViewWidth } from './helpers'; import type { UseAdaptivityConditionalRender } from './types'; @@ -23,15 +23,23 @@ export const useAdaptivityConditionalRender = (): UseAdaptivityConditionalRender const platform = usePlatform(); return React.useMemo(() => { - const sizeX = getAdaptiveSizeType(sizeXContext, sizeXCompactClassNames, sizeXRegularClassNames); - const sizeY = getAdaptiveSizeType(sizeYContext, sizeYCompactClassNames, sizeYRegularClassNames); - const viewWidth = getAdaptiveViewWidth(viewWidthContext, viewWidthClassNames); + const sizeX = getAdaptiveSizeType( + sizeXContext, + sizeXCompactMediaQueryProps, + sizeXRegularMediaQueryProps, + ); + const sizeY = getAdaptiveSizeType( + sizeYContext, + sizeYCompactMediaQueryProps, + sizeYRegularMediaQueryProps, + ); + const viewWidth = getAdaptiveViewWidth(viewWidthContext, viewWidthMediaQueryMapProps); const deviceType = getAdaptiveDeviceType( viewWidthContext, viewHeightContext, hasPointerContext, platform, - deviceTypeClassNames, + deviceTypeMediaQueryMapProps, ); return { sizeX, diff --git a/packages/vkui/src/styles/adaptivity.module.css b/packages/vkui/src/styles/adaptivity.module.css index 529833ddff..45445bf463 100644 --- a/packages/vkui/src/styles/adaptivity.module.css +++ b/packages/vkui/src/styles/adaptivity.module.css @@ -12,11 +12,6 @@ Note: В начале классов разделить (`-`), чтобы кра */ -.-sizeX--compact-forced, -.-sizeX--regular-forced { - /* Пустой класс для CSS Modules (см. CONTRIBUTING.md) */ -} - @media (--sizeX-regular) { .-sizeX--compact-mq { /* stylelint-disable-next-line declaration-no-important */ @@ -32,11 +27,6 @@ Note: В начале классов разделить (`-`), чтобы кра /* ================================================================================================================== */ -.-sizeY--compact-forced, -.-sizeY--regular-forced { - /* Пустой класс для CSS Modules (см. CONTRIBUTING.md) */ -} - @media (--sizeY-regular) { .-sizeY--compact-mq { /* stylelint-disable-next-line declaration-no-important */ @@ -52,11 +42,6 @@ Note: В начале классов разделить (`-`), чтобы кра /* ================================================================================================================== */ -.-viewWidth--tabletPlus-forced, -.-viewWidth--tabletMinus-forced { - /* Пустой класс для CSS Modules (см. CONTRIBUTING.md) */ -} - @media (--viewWidth-tabletPlus) { .-viewWidth--tabletMinus-mq { /* stylelint-disable-next-line declaration-no-important */ @@ -72,11 +57,6 @@ Note: В начале классов разделить (`-`), чтобы кра /* ================================================================================================================== */ -.-deviceType--mobile-forced, -.-deviceType--desktop-forced { - /* Пустой класс для CSS Modules (см. CONTRIBUTING.md) */ -} - @media (--desktop) { .-deviceType--mobile-mq { /* stylelint-disable-next-line declaration-no-important */