fix(CustomSelect): refactor logic of empty value (#7822)

* fix(CustomSelect): refactor logic of reset value * fix(CustomSelect): fix types * feat(Select, CustomSelect, NativeSelect): remove event from onChange callback * fix(Select, CustomSelect, NativeSelect): add codemods * fix: fix error Co-authored-by: Andrey Medvedev <[email protected]> --------- Co-authored-by: Andrey Medvedev <[email protected]>
VKCOM · Oct 31, 2024 · ebb46a5 · ebb46a5
1 parent 50960ea
commit ebb46a5
Show file tree

Hide file tree

Showing 30 changed files with 350 additions and 191 deletions.
diff --git a/packages/codemods/src/transforms/v7/common/warnSelectOnChange.ts b/packages/codemods/src/transforms/v7/common/warnSelectOnChange.ts
@@ -0,0 +1,16 @@
+import { API, Collection } from 'jscodeshift';
+import { report } from '../../../report';
+
+export const warnSelectOnChange = (api: API, source: Collection, componentName: string) => {
+  const j = api.jscodeshift;
+  source
+    .find(j.JSXOpeningElement, { name: { name: componentName } })
+    .find(j.JSXAttribute)
+    .filter((attr) => attr.node.name.name === 'onChange')
+    .forEach(() => {
+      report(
+        api,
+        `Manual changes required for ${componentName}'s "onChange" prop: need to change event argument to select value`,
+      );
+    });
+};
diff --git a/packages/codemods/src/transforms/v7/custom-select.ts b/packages/codemods/src/transforms/v7/custom-select.ts
@@ -1,6 +1,7 @@
 import { API, FileInfo } from 'jscodeshift';
 import { getImportInfo, removeProps } from '../../codemod-helpers';
 import { JSCodeShiftOptions } from '../../types';
+import { warnSelectOnChange } from './common/warnSelectOnChange';
 
 export const parser = 'tsx';
 
@@ -19,6 +20,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
   removeProps(j, api, source, localName, PROPS_TO_REMOVE, () => {
     return `need to remove props ${PROPS_TO_REMOVE.join(', ')}`;
   });
+  warnSelectOnChange(api, source, localName);
 
   return source.toSource();
 }
diff --git a/packages/codemods/src/transforms/v7/native-select.ts b/packages/codemods/src/transforms/v7/native-select.ts
@@ -0,0 +1,21 @@
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo } from '../../codemod-helpers';
+import { JSCodeShiftOptions } from '../../types';
+import { warnSelectOnChange } from './common/warnSelectOnChange';
+
+export const parser = 'tsx';
+
+export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) {
+  const { alias } = options;
+  const j = api.jscodeshift;
+  const source = j(file.source);
+  const { localName } = getImportInfo(j, file, 'NativeSelect', alias);
+
+  if (!localName) {
+    return source.toSource();
+  }
+
+  warnSelectOnChange(api, source, localName);
+
+  return source.toSource();
+}
diff --git a/packages/codemods/src/transforms/v7/select.ts b/packages/codemods/src/transforms/v7/select.ts
@@ -1,6 +1,7 @@
 import { API, FileInfo } from 'jscodeshift';
 import { getImportInfo, removeProps } from '../../codemod-helpers';
 import { JSCodeShiftOptions } from '../../types';
+import { warnSelectOnChange } from './common/warnSelectOnChange';
 
 export const parser = 'tsx';
 
@@ -19,6 +20,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
   removeProps(j, api, source, localName, PROPS_TO_REMOVE, () => {
     return `need to remove props ${PROPS_TO_REMOVE.join(', ')}`;
   });
+  warnSelectOnChange(api, source, localName);
 
   return source.toSource();
 }
diff --git a/packages/vkui/src/components/Avatar/Readme.md b/packages/vkui/src/components/Avatar/Readme.md
@@ -173,7 +173,7 @@ const AvatarPropsForm = ({
             { label: 'blue', value: 'blue' },
           ]}
           value={gradientColor}
-          onChange={(e) => setGradientColor(e.target.value)}
+          onChange={setGradientColor}
         />
       </FormItem>
 
@@ -196,7 +196,7 @@ const AvatarPropsForm = ({
               { label: 'preset="online-mobile"', value: 'online-mobile' },
             ]}
             value={badge}
-            onChange={(e) => setBadge(e.target.value)}
+            onChange={setBadge}
           />
         </FormItem>
         <FormItem top="Avatar.Badge[background]">
@@ -208,7 +208,7 @@ const AvatarPropsForm = ({
             ]}
             value={badgeBackground}
             disabled={badge !== 'children'}
-            onChange={(e) => setBadgeBackground(e.target.value)}
+            onChange={setBadgeBackground}
           />
         </FormItem>
       </FormLayoutGroup>
@@ -231,7 +231,7 @@ const AvatarPropsForm = ({
             ]}
             value={overlayTheme}
             disabled={!overlay}
-            onChange={(e) => setOverlayTheme(e.target.value)}
+            onChange={setOverlayTheme}
           />
         </FormItem>
         <FormItem top="Avatar.Overlay[visibility]">
@@ -243,7 +243,7 @@ const AvatarPropsForm = ({
             ]}
             value={overlayVisibility}
             disabled={!overlay}
-            onChange={(e) => setOverlayVisibility(e.target.value)}
+            onChange={setOverlayVisibility}
           />
         </FormItem>
       </FormLayoutGroup>

diff --git a/packages/vkui/src/components/Button/Readme.md b/packages/vkui/src/components/Button/Readme.md
@@ -71,7 +71,7 @@ const Example = () => {
         <FormItem top="appearance">
           <Select
             value={appearance}
-            onChange={(e) => setAppearance(e.target.value)}
+            onChange={setAppearance}
             options={[
               { label: 'accent', value: 'accent' },
               { label: 'positive', value: 'positive' },
@@ -85,7 +85,7 @@ const Example = () => {
         <FormItem top="size">
           <Select
             value={size}
-            onChange={(e) => setSize(e.target.value)}
+            onChange={setSize}
             options={[
               { label: 's', value: 's' },
               { label: 'm', value: 'm' },
@@ -96,7 +96,7 @@ const Example = () => {
         <FormItem top="align">
           <Select
             value={align}
-            onChange={(e) => setAlign(e.target.value)}
+            onChange={setAlign}
             options={[
               { label: 'left', value: 'left' },
               { label: 'center', value: 'center' },
@@ -107,7 +107,7 @@ const Example = () => {
         <FormItem top="sizeY">
           <Select
             value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
+            onChange={setSizeY}
             options={[
               { label: 'compact', value: 'compact' },
               {

diff --git a/packages/vkui/src/components/ButtonGroup/Readme.md b/packages/vkui/src/components/ButtonGroup/Readme.md
@@ -32,7 +32,7 @@ const ButtonGroupPropsForm = ({
         <FormItem top="mode">
           <Select
             value={mode}
-            onChange={(e) => handleChange('mode', e.target.value)}
+            onChange={(newValue) => handleChange('mode', newValue)}
             options={[
               { label: 'vertical', value: 'vertical' },
               { label: 'horizontal', value: 'horizontal' },
@@ -43,7 +43,7 @@ const ButtonGroupPropsForm = ({
       <FormItem top="gap">
         <Select
           value={gap}
-          onChange={(e) => handleChange('gap', e.target.value)}
+          onChange={(newValue) => handleChange('gap', newValue)}
           options={[
             { label: 'none', value: 'none' },
             { label: 'space', value: 'space' },
@@ -55,7 +55,7 @@ const ButtonGroupPropsForm = ({
       <FormItem top="align">
         <Select
           value={align}
-          onChange={(e) => handleChange('align', e.target.value)}
+          onChange={(newValue) => handleChange('align', newValue)}
           options={[
             { label: 'left', value: 'left' },
             { label: 'center', value: 'center' },
@@ -402,7 +402,7 @@ const Example = () => {
         <FormItem top="sizeY">
           <Select
             value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
+            onChange={setSizeY}
             options={[
               { label: 'compact', value: 'compact' },
               { label: 'regular', value: 'regular' },

diff --git a/packages/vkui/src/components/Calendar/Readme.md b/packages/vkui/src/components/Calendar/Readme.md
@@ -60,7 +60,7 @@ const Example = () => {
         <Select
           style={{ width: 100 }}
           value={locale}
-          onChange={(e) => setLocale(e.target.value)}
+          onChange={setLocale}
           options={[
             {
               label: 'ru',
@@ -85,7 +85,7 @@ const Example = () => {
         <Select
           style={{ width: 100 }}
           value={size}
-          onChange={(e) => setSize(e.target.value)}
+          onChange={setSize}
           options={[
             {
               label: 's',

diff --git a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
@@ -12,7 +12,7 @@ import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../l
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
-import { CustomSelect } from '../CustomSelect/CustomSelect';
+import { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';
@@ -80,13 +80,11 @@ export const CalendarHeader = ({
 }: CalendarHeaderProps): React.ReactNode => {
   const { locale } = useConfigProvider();
   const onMonthsChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) =>
-      onChange(setMonth(viewDate, Number(event.target.value))),
+    (newValue: SelectProps['value']) => onChange(setMonth(viewDate, Number(newValue))),
     [onChange, viewDate],
   );
   const onYearChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) =>
-      onChange(setYear(viewDate, Number(event.target.value))),
+    (newValue: SelectProps['value']) => onChange(setYear(viewDate, Number(newValue))),
     [onChange, viewDate],
   );
 

diff --git a/packages/vkui/src/components/CalendarRange/Readme.md b/packages/vkui/src/components/CalendarRange/Readme.md
@@ -37,7 +37,7 @@ const Example = () => {
         <Select
           style={{ width: 100 }}
           value={locale}
-          onChange={(e) => setLocale(e.target.value)}
+          onChange={setLocale}
           options={[
             {
               label: 'ru',

diff --git a/packages/vkui/src/components/CalendarTime/CalendarTime.tsx b/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { setHours, setMinutes } from 'date-fns';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { Button } from '../Button/Button';
-import { CustomSelect } from '../CustomSelect/CustomSelect';
+import { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';
 import styles from './CalendarTime.module.css';
 
 export interface CalendarTimeProps {
@@ -55,13 +55,11 @@ export const CalendarTime = ({
     : minutes;
 
   const onHoursChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) =>
-      onChange?.(setHours(value, Number(event.target.value))),
+    (newValue: SelectProps['value']) => onChange?.(setHours(value, Number(newValue))),
     [onChange, value],
   );
   const onMinutesChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) =>
-      onChange?.(setMinutes(value, Number(event.target.value))),
+    (newValue: SelectProps['value']) => onChange?.(setMinutes(value, Number(newValue))),
     [onChange, value],
   );