Skip to content

Commit f913656

Browse files
inomdzhoninomdzhon
committed
tech(css modules): deprecate getPlatformClassName()
Remove notes about getPlatformClassName() in docs: * styleguide/pages/mirgration_v5.md * styleguide/pages/utils.md * docs/TESTING.md
1 parent 861891f commit f913656

19 files changed

Lines changed: 74 additions & 87 deletions

File tree

‎docs/TESTING.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
Мы используем три вида тестов:
22

3-
**Юнит-тесты** на jest в файлах `moduleName.test.ts` ([например, `getPlatformClassName.test.ts`](../packages/vkui/src/helpers/getPlatformClassName.test.ts))
3+
**Юнит-тесты** на jest в файлах `moduleName.test.ts` ([например, `packages/vkui/src/lib/adaptivity/functions.test.ts`](../packages/vkui/src/lib/adaptivity/functions.test.ts))
44

55
**Компонентные тесты** на jest + [react-testing-library](https://testing-library.com/docs/react-testing-library/example-intro) + [jest-dom](https://github.com/testing-library/jest-dom#table-of-contents) в `ComponentName.test.tsx` ([например, `Checkbox.test.tsx` ](../packages/vkui/src/components/Checkbox/Checkbox.test.tsx))
66

‎packages/vkui/src/components/Cell/CellCheckbox/CellCheckbox.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
Icon24CheckCircleOn,
77
} from '@vkontakte/icons';
88
import { classNames } from '@vkontakte/vkjs';
9-
import { getPlatformClassName } from '../../../helpers/getPlatformClassName';
109
import { usePlatform } from '../../../hooks/usePlatform';
1110
import { Platform } from '../../../lib/platform';
1211
import { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';
@@ -30,14 +29,7 @@ export const CellCheckbox = ({ className, style, ...restProps }: CellCheckboxPro
3029
: Icon24CheckBoxOn;
3130

3231
return (
33-
<span
34-
className={classNames(
35-
styles['CellCheckbox'],
36-
getPlatformClassName(styles['CellCheckbox'], platform),
37-
className,
38-
)}
39-
style={style}
40-
>
32+
<span className={classNames(styles['CellCheckbox'], className)} style={style}>
4133
<VisuallyHiddenInput
4234
className={styles['CellCheckbox__input']}
4335
type="checkbox"

‎packages/vkui/src/components/Cell/CellDragger/CellDragger.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';
33
import { classNames } from '@vkontakte/vkjs';
4-
import { getPlatformClassName } from '../../../helpers/getPlatformClassName';
54
import { usePlatform } from '../../../hooks/usePlatform';
65
import { Platform } from '../../../lib/platform';
76
import { Touch } from '../../Touch/Touch';
@@ -25,11 +24,7 @@ export const CellDragger = ({
2524

2625
return (
2726
<Touch
28-
className={classNames(
29-
styles['CellDragger'],
30-
getPlatformClassName(styles['CellDragger'], platform),
31-
className,
32-
)}
27+
className={classNames(styles['CellDragger'], className)}
3328
onStart={onDragStart}
3429
onMoveY={onDragMove}
3530
onEnd={onDragEnd}

‎packages/vkui/src/components/File/File.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import * as React from 'react';
22
import { classNames } from '@vkontakte/vkjs';
3-
import { getPlatformClassName } from '../../helpers/getPlatformClassName';
4-
import { usePlatform } from '../../hooks/usePlatform';
53
import { HasRef, HasRootRef } from '../../types';
64
import { Button, VKUIButtonProps } from '../Button/Button';
75
import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
@@ -32,17 +30,11 @@ export const File = ({
3230
appearance,
3331
...restProps
3432
}: FileProps) => {
35-
const platform = usePlatform();
36-
3733
return (
3834
<Button
3935
Component="label"
4036
align={align}
41-
className={classNames(
42-
styles['File'],
43-
getPlatformClassName(styles['File'], platform),
44-
className,
45-
)}
37+
className={classNames(styles['File'], className)}
4638
stretched={stretched}
4739
mode={mode}
4840
appearance={appearance}

‎packages/vkui/src/components/ModalCard/ModalCard.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from 'react';
22
import { classNames } from '@vkontakte/vkjs';
3-
import { getPlatformClassName } from '../../helpers/getPlatformClassName';
43
import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
54
import { usePlatform } from '../../hooks/usePlatform';
65
import { getNavId, NavIdProps } from '../../lib/getNavId';
@@ -10,6 +9,12 @@ import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContex
109
import { ModalType } from '../ModalRoot/types';
1110
import styles from './ModalCard.module.css';
1211

12+
const platformClassNames = {
13+
ios: styles['ModalCard--ios'],
14+
android: styles['ModalCard--android'],
15+
vkcom: styles['ModalCard--vkcom'],
16+
};
17+
1318
export interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}
1419

1520
const warn = warnOnce('ModalCard');
@@ -42,7 +47,9 @@ export const ModalCard = ({
4247
id={id}
4348
className={classNames(
4449
styles['ModalCard'],
45-
getPlatformClassName(styles['ModalCard'], platform),
50+
platformClassNames.hasOwnProperty(platform)
51+
? platformClassNames[platform]
52+
: platformClassNames.android,
4653
isDesktop && styles['ModalCard--desktop'],
4754
className,
4855
)}

‎packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import { Icon24Dismiss } from '@vkontakte/icons';
33
import { classNames, hasReactNode } from '@vkontakte/vkjs';
4-
import { getPlatformClassName } from '../../helpers/getPlatformClassName';
54
import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
65
import { useKeyboard } from '../../hooks/useKeyboard';
76
import { usePlatform } from '../../hooks/usePlatform';
@@ -13,6 +12,12 @@ import { Subhead } from '../Typography/Subhead/Subhead';
1312
import { Title } from '../Typography/Title/Title';
1413
import styles from './ModalCardBase.module.css';
1514

15+
const platformClassNames = {
16+
ios: styles['ModalCardBase--ios'],
17+
android: styles['ModalCardBase--android'],
18+
vkcom: styles['ModalCardBase--vkcom'],
19+
};
20+
1621
export interface ModalCardBaseProps
1722
extends React.HTMLAttributes<HTMLDivElement>,
1823
HasRootRef<HTMLDivElement> {
@@ -89,7 +94,9 @@ export const ModalCardBase = ({
8994
{...restProps}
9095
className={classNames(
9196
styles['ModalCardBase'],
92-
getPlatformClassName(styles['ModalCardBase'], platform),
97+
platformClassNames.hasOwnProperty(platform)
98+
? platformClassNames[platform]
99+
: platformClassNames.android,
93100
isDesktop && styles['ModalCardBase--desktop'],
94101
className,
95102
)}

‎packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from 'react';
22
import { classNames } from '@vkontakte/vkjs';
3-
import { getPlatformClassName } from '../../helpers/getPlatformClassName';
43
import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
54
import { usePlatform } from '../../hooks/usePlatform';
65
import { Platform } from '../../lib/platform';
@@ -32,7 +31,6 @@ export const ModalPageHeader = ({
3231
<div
3332
className={classNames(
3433
styles['ModalPageHeader'],
35-
getPlatformClassName(styles['ModalPageHeader'], platform),
3634
platform !== Platform.VKCOM && styles['ModalPageHeader--withGaps'],
3735
isDesktop && styles['ModalPageHeader--desktop'],
3836
)}

‎packages/vkui/src/components/NativeSelect/NativeSelect.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import * as React from 'react';
22
import { classNames } from '@vkontakte/vkjs';
3-
import { getPlatformClassName } from '../../helpers/getPlatformClassName';
43
import { useAdaptivity } from '../../hooks/useAdaptivity';
54
import { useEnsuredControl } from '../../hooks/useEnsuredControl';
65
import { useExternRef } from '../../hooks/useExternRef';
7-
import { usePlatform } from '../../hooks/usePlatform';
86
import { SizeType } from '../../lib/adaptivity';
97
import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
108
import { HasAlign, HasRef, HasRootRef } from '../../types';
@@ -56,7 +54,6 @@ const NativeSelect = ({
5654
value: valueProp,
5755
...restProps
5856
}: NativeSelectProps) => {
59-
const platform = usePlatform();
6057
const [title, setTitle] = React.useState('');
6158
const [empty, setEmpty] = React.useState(false);
6259
const [value, onChange] = useEnsuredControl({
@@ -81,7 +78,6 @@ const NativeSelect = ({
8178
Component="label"
8279
className={classNames(
8380
styles['Select'],
84-
getPlatformClassName(styles['Select'], platform),
8581
empty && styles['Select--empty'],
8682
multiline && styles['Select--multiline'],
8783
align && styles[`Select--align-${align}`],

‎packages/vkui/src/components/PanelHeader/PanelHeader.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,11 @@ import { TooltipContainer } from '../Tooltip/TooltipContainer';
1515
import { Text } from '../Typography/Text/Text';
1616
import styles from './PanelHeader.module.css';
1717

18-
function getPlatformClassName(platform: string): string {
19-
switch (platform) {
20-
case 'ios':
21-
return styles['PanelHeader--ios'];
22-
case 'vkcom':
23-
return styles['PanelHeader--vkcom'];
24-
default:
25-
return styles['PanelHeader--android'];
26-
}
27-
}
18+
const platformClassNames = {
19+
ios: styles['PanelHeader--ios'],
20+
android: styles['PanelHeader--android'],
21+
vkcom: styles['PanelHeader--vkcom'],
22+
};
2823

2924
const sizeXClassNames = {
3025
none: styles['PanelHeader--sizeX-none'],
@@ -104,7 +99,9 @@ export const PanelHeader = ({
10499
{...restProps}
105100
className={classNames(
106101
styles['PanelHeader'],
107-
getPlatformClassName(platform),
102+
platformClassNames.hasOwnProperty(platform)
103+
? platformClassNames[platform]
104+
: platformClassNames.android,
108105
transparent && styles['PanelHeader--trnsp'],
109106
shadow && styles['PanelHeader--shadow'],
110107
visor && styles['PanelHeader--vis'],

‎packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,11 @@ import { Text } from '../Typography/Text/Text';
99
import { Title } from '../Typography/Title/Title';
1010
import styles from './PanelHeaderButton.module.css';
1111

12-
function getPlatformClassName(platform: string): string {
13-
switch (platform) {
14-
case 'ios':
15-
return styles['PanelHeaderButton--ios'];
16-
case 'vkcom':
17-
return styles['PanelHeaderButton--vkcom'];
18-
default:
19-
return styles['PanelHeaderButton--android'];
20-
}
21-
}
12+
const platformClassNames = {
13+
ios: styles['PanelHeaderButton--ios'],
14+
android: styles['PanelHeaderButton--android'],
15+
vkcom: styles['PanelHeaderButton--vkcom'],
16+
};
2217

2318
export interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {
2419
primary?: boolean;
@@ -101,7 +96,9 @@ export const PanelHeaderButton = ({
10196
activeMode={activeMode}
10297
className={classNames(
10398
styles['PanelHeaderButton'],
104-
getPlatformClassName(platform),
99+
platformClassNames.hasOwnProperty(platform)
100+
? platformClassNames[platform]
101+
: platformClassNames.android,
105102
isPrimitive && styles['PanelHeaderButton--primitive'],
106103
!isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],
107104
className,

0 commit comments

Comments
 (0)