@vkontakte/vkui 4.22.1 → 4.25.0

package/src/components/Search/Readme.md

@@ -1,182 +1,235 @@
 Надстройка над `<input type="text" />`. Компонент принимает все валидные для этого элемента свойства.
 
 ```jsx
-  const thematics = [
-    {id: 3201, name: "Аренда автомобилей"},
-    {id: 3273, name: "Автотовары"},
-    {id: 3205, name: "Автосалон"},
-    {id: 3282, name: "Автосервис"},
-    {id: 3283, name: "Услуги для автовладельцев"},
-    {id: 3284, name: "Велосипеды"},
-    {id: 3285, name: "Мотоциклы и другая мототехника"},
-    {id: 3286, name: "Водный транспорт"},
-    {id: 3287, name: "Автопроизводитель"},
-    {id: 3288, name: "Автомойка"},
-    {id: 3117, name: "Автошкола"},
-    {id: 3118, name: "Детский сад"},
-    {id: 3119, name: "Гимназия"},
-    {id: 3120, name: "Колледж"},
-    {id: 3121, name: "Лицей"},
-    {id: 3122, name: "Техникум"},
-    {id: 3123, name: "Университет"},
-    {id: 3124, name: "Школа"},
-    {id: 3125, name: "Институт"},
-    {id: 3126, name: "Обучающие курсы"},
-    {id: 3276, name: "Дополнительное образование"},
-    {id: 3275, name: "Тренинг, семинар"},
-    {id: 3127, name: "Танцевальная школа"}
-  ];
-
-  const users = getRandomUsers(18);
-
-  class SimpleSearch extends React.Component {
-
-    constructor (props) {
-      super(props);
-      this.state = {
-        search: ''
-      }
-      this.onChange = this.onChange.bind(this);
-    }
-
-    onChange (e) { this.setState({ search: e.target.value }); }
-
-    get thematics () {
-      const search = this.state.search.toLowerCase();
-      return thematics.filter(({name}) => name.toLowerCase().indexOf(search) > -1);
-    }
-
-    render() {
-      return (
-        <React.Fragment>
-          <PanelHeader
-            right={<PanelHeaderButton onClick={this.props.goHeaderSearch}><Icon28AddOutline /></PanelHeaderButton>}
-            separator={this.props.sizeX === SizeType.REGULAR}
-          >
-            Выбор тематики
-          </PanelHeader>
-          <Group>
-            <Search value={this.state.search} onChange={this.onChange} after={null}/>  
-            {this.thematics.length > 0 && this.thematics.map(thematic => <Cell key={thematic.id}>{thematic.name}</Cell>)}
-            {this.thematics.length === 0 && <Footer>Ничего не найдено</Footer>}
-          </Group>
-        </React.Fragment>
-      );
-    }
+const thematics = [
+  { id: 3201, name: "Аренда автомобилей" },
+  { id: 3273, name: "Автотовары" },
+  { id: 3205, name: "Автосалон" },
+  { id: 3282, name: "Автосервис" },
+  { id: 3283, name: "Услуги для автовладельцев" },
+  { id: 3284, name: "Велосипеды" },
+  { id: 3285, name: "Мотоциклы и другая мототехника" },
+  { id: 3286, name: "Водный транспорт" },
+  { id: 3287, name: "Автопроизводитель" },
+  { id: 3288, name: "Автомойка" },
+  { id: 3117, name: "Автошкола" },
+  { id: 3118, name: "Детский сад" },
+  { id: 3119, name: "Гимназия" },
+  { id: 3120, name: "Колледж" },
+  { id: 3121, name: "Лицей" },
+  { id: 3122, name: "Техникум" },
+  { id: 3123, name: "Университет" },
+  { id: 3124, name: "Школа" },
+  { id: 3125, name: "Институт" },
+  { id: 3126, name: "Обучающие курсы" },
+  { id: 3276, name: "Дополнительное образование" },
+  { id: 3275, name: "Тренинг, семинар" },
+  { id: 3127, name: "Танцевальная школа" },
+];
+
+const users = getRandomUsers(18);
+
+class SimpleSearch extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      search: "",
+    };
+    this.onChange = this.onChange.bind(this);
   }
 
-  class HeaderSearch extends React.Component {
-
-    constructor (props) {
-      super(props);
-      this.state = {
-        search: ''
-      }
-
-      this.onChange = this.onChange.bind(this);
-    }
-
-    onChange (e) { this.setState({ search: e.target.value }); }
-
-    get users () {
-      const search = this.state.search.toLowerCase();
-      return users.filter(({name}) => name.toLowerCase().indexOf(search) > -1);
-    }
-
-    render () {
-      const { platform, sizeX, goSearch, onFiltersClick } = this.props;
-      return (
-        <React.Fragment>
-          <PanelHeader left={platform !== VKCOM && <PanelHeaderBack onClick={goSearch} />} separator={sizeX === SizeType.REGULAR}>
-            <Search
-              value={this.state.search}
-              onChange={this.onChange}
-              icon={<Icon24Filter />}
-              onIconClick={onFiltersClick}
-            />
-          </PanelHeader>
-          <Group>
-            {this.users.length > 0 && this.users.map((user) => (
+  onChange(e) {
+    this.setState({ search: e.target.value });
+  }
+
+  get thematics() {
+    const search = this.state.search.toLowerCase();
+    return thematics.filter(
+      ({ name }) => name.toLowerCase().indexOf(search) > -1
+    );
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <PanelHeader
+          right={
+            <PanelHeaderButton onClick={this.props.goHeaderSearch}>
+              <Icon28AddOutline />
+            </PanelHeaderButton>
+          }
+          separator={this.props.sizeX === SizeType.REGULAR}
+        >
+          Выбор тематики
+        </PanelHeader>
+        <Group>
+          <Search
+            value={this.state.search}
+            onChange={this.onChange}
+            after={null}
+          />
+          {this.thematics.length > 0 &&
+            this.thematics.map((thematic) => (
+              <Cell key={thematic.id}>{thematic.name}</Cell>
+            ))}
+          {this.thematics.length === 0 && <Footer>Ничего не найдено</Footer>}
+        </Group>
+      </React.Fragment>
+    );
+  }
+}
+
+class HeaderSearch extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      search: "",
+    };
+
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(e) {
+    this.setState({ search: e.target.value });
+  }
+
+  get users() {
+    const search = this.state.search.toLowerCase();
+    return users.filter(({ name }) => name.toLowerCase().indexOf(search) > -1);
+  }
+
+  render() {
+    const { platform, sizeX, goSearch, onFiltersClick } = this.props;
+    return (
+      <React.Fragment>
+        <PanelHeader
+          left={platform !== VKCOM && <PanelHeaderBack onClick={goSearch} />}
+          separator={sizeX === SizeType.REGULAR}
+        >
+          <Search
+            value={this.state.search}
+            onChange={this.onChange}
+            icon={<Icon24Filter />}
+            onIconClick={onFiltersClick}
+          />
+        </PanelHeader>
+        <Group>
+          {this.users.length > 0 &&
+            this.users.map((user) => (
               <SimpleCell
                 before={<Avatar size={40} src={user.photo_100} />}
                 key={user.id}
                 onClick={goSearch}
-              >{user.name}</SimpleCell>
+              >
+                {user.name}
+              </SimpleCell>
             ))}
-            {this.users.length === 0 && <Footer>Ничего не найдено</Footer>}
-          </Group>
-        </React.Fragment>
-      );
-    }
+          {this.users.length === 0 && <Footer>Ничего не найдено</Footer>}
+        </Group>
+      </React.Fragment>
+    );
+  }
+}
+
+class SearchExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activePanel: "search",
+      activeModal: null,
+    };
+
+    this.goSearch = this.goSearch.bind(this);
+    this.goHeaderSearch = this.goHeaderSearch.bind(this);
+    this.hideModal = this.hideModal.bind(this);
   }
 
-  class SearchExample extends React.Component {
-
-    constructor (props) {
-      super(props);
-
-      this.state = {
-        activePanel: 'search',
-        activeModal: null
-      }
-
-      this.goSearch = this.goSearch.bind(this);
-      this.goHeaderSearch = this.goHeaderSearch.bind(this);
-      this.hideModal = this.hideModal.bind(this);
-    }
-
-    goHeaderSearch () { this.setState({ activePanel: 'header-search' }); }
-    goSearch () { this.setState({ activePanel: 'search' }); }
-    hideModal() { this.setState({ activeModal: null }); }
-
-    render () {
-      const { platform } = this.props;
-      return (
-        <View
-         activePanel={this.state.activePanel}
-         modal={
-           <ModalRoot activeModal={this.state.activeModal}>
-             <ModalPage
-               id="filters"
-               onClose={this.hideModal}
-               header={
-                 <ModalPageHeader
-                   left={platform === ANDROID && <PanelHeaderButton onClick={this.hideModal}><Icon24Cancel /></PanelHeaderButton>}
-                   right={<PanelHeaderButton onClick={this.hideModal}>{platform === IOS ? 'Готово' : <Icon24Done />}</PanelHeaderButton>}
-                 >
-                   Фильтры
-                 </ModalPageHeader>
-               }
-             >
-               <Group>
-                 <FormItem top="Страна">
-                   <SelectMimicry placeholder="Не выбрана" />
-                 </FormItem>
-                 <FormItem top="Город">
-                   <SelectMimicry placeholder="Не выбран" />
-                 </FormItem>
-                 <FormItem top="Пол">
-                   <Radio name="sex" value="male" defaultChecked>Любой</Radio>
-                   <Radio name="sex" value="male">Мужской</Radio>
-                   <Radio name="sex" value="female">Женский</Radio>
-                 </FormItem>
-               </Group>
-             </ModalPage>
-           </ModalRoot>
-         }
-       >
-          <Panel id="search">
-            <SimpleSearch sizeX={this.props.sizeX} goHeaderSearch={this.goHeaderSearch} platform={platform} />
-          </Panel>
-          <Panel id="header-search">
-            <HeaderSearch sizeX={this.props.sizeX} onFiltersClick={() => this.setState({ activeModal: 'filters' })} goSearch={this.goSearch} platform={platform} />
-          </Panel>
-        </View>
-      );
-    }
+  goHeaderSearch() {
+    this.setState({ activePanel: "header-search" });
   }
-  
-  const AdaptivitySearch = withPlatform(withAdaptivity(SearchExample, { sizeX: true }));
+  goSearch() {
+    this.setState({ activePanel: "search" });
+  }
+  hideModal() {
+    this.setState({ activeModal: null });
+  }
+
+  render() {
+    const { platform } = this.props;
+    return (
+      <View
+        activePanel={this.state.activePanel}
+        modal={
+          <ModalRoot activeModal={this.state.activeModal}>
+            <ModalPage
+              id="filters"
+              onClose={this.hideModal}
+              header={
+                <ModalPageHeader
+                  left={
+                    platform === ANDROID && (
+                      <PanelHeaderButton onClick={this.hideModal}>
+                        <Icon24Cancel />
+                      </PanelHeaderButton>
+                    )
+                  }
+                  right={
+                    <PanelHeaderButton onClick={this.hideModal}>
+                      {platform === IOS ? "Готово" : <Icon24Done />}
+                    </PanelHeaderButton>
+                  }
+                >
+                  Фильтры
+                </ModalPageHeader>
+              }
+            >
+              <Group>
+                <FormItem top="Страна">
+                  <SelectMimicry placeholder="Не выбрана" />
+                </FormItem>
+                <FormItem top="Город">
+                  <SelectMimicry placeholder="Не выбран" />
+                </FormItem>
+                <FormItem top="Пол">
+                  <Radio name="sex" value="male" defaultChecked>
+                    Любой
+                  </Radio>
+                  <Radio name="sex" value="male">
+                    Мужской
+                  </Radio>
+                  <Radio name="sex" value="female">
+                    Женский
+                  </Radio>
+                </FormItem>
+              </Group>
+            </ModalPage>
+          </ModalRoot>
+        }
+      >
+        <Panel id="search">
+          <SimpleSearch
+            sizeX={this.props.sizeX}
+            goHeaderSearch={this.goHeaderSearch}
+            platform={platform}
+          />
+        </Panel>
+        <Panel id="header-search">
+          <HeaderSearch
+            sizeX={this.props.sizeX}
+            onFiltersClick={() => this.setState({ activeModal: "filters" })}
+            goSearch={this.goSearch}
+            platform={platform}
+          />
+        </Panel>
+      </View>
+    );
+  }
+}
+
+const AdaptivitySearch = withPlatform(
+  withAdaptivity(SearchExample, { sizeX: true })
+);
 
-  <AdaptivitySearch />
+<AdaptivitySearch />;
 ```

package/src/components/Search/Search.css

@@ -142,7 +142,7 @@
   line-height: var(--search_default_height);
   z-index: 2;
   transform: translate(0);
-  transition: transform .3s var(--ios-easing);
+  transition: transform 0.3s var(--ios-easing);
   cursor: default;
 }
 
@@ -157,7 +157,7 @@
   display: block;
   height: 100%;
   width: 10px;
-  content: '';
+  content: "";
   pointer-events: none;
 }
 
@@ -176,7 +176,7 @@
   display: block;
   height: 100%;
   width: 10px;
-  content: '';
+  content: "";
   top: 0;
   border-radius: 0 10px 10px 0;
   cursor: text;

package/src/components/Search/Search.tsx

@@ -1,23 +1,30 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { withPlatform } from '../../hoc/withPlatform';
-import { getClassName } from '../../helpers/getClassName';
-import { Icon16SearchOutline, Icon16Clear, Icon24Cancel } from '@vkontakte/icons';
-import { IOS, VKCOM } from '../../lib/platform';
-import { HasPlatform, HasRef } from '../../types';
-import { Touch, TouchEvent } from '../Touch/Touch';
-import { VKUITouchEvent } from '../../lib/touch';
-import { noop } from '../../lib/utils';
-import Text from '../Typography/Text/Text';
-import Title from '../Typography/Title/Title';
-import Separator from '../Separator/Separator';
-import { useExternRef } from '../../hooks/useExternRef';
-import { useEnsuredControl } from '../../hooks/useEnsuredControl';
-import './Search.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { withPlatform } from "../../hoc/withPlatform";
+import { getClassName } from "../../helpers/getClassName";
+import {
+  Icon16SearchOutline,
+  Icon16Clear,
+  Icon24Cancel,
+} from "@vkontakte/icons";
+import { IOS, VKCOM } from "../../lib/platform";
+import { HasPlatform, HasRef } from "../../types";
+import { Touch, TouchEvent } from "../Touch/Touch";
+import { VKUITouchEvent } from "../../lib/touch";
+import { noop } from "../../lib/utils";
+import Text from "../Typography/Text/Text";
+import Title from "../Typography/Title/Title";
+import Separator from "../Separator/Separator";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useEnsuredControl } from "../../hooks/useEnsuredControl";
+import "./Search.css";
 
 export type InputRef = (element: HTMLInputElement) => void;
 
-export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasPlatform {
+export interface SearchProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    HasRef<HTMLInputElement>,
+    HasPlatform {
   /**
    * iOS only. Текст кнопки "отмена", которая чистит текстовое поле и убирает фокус.
    */
@@ -55,30 +62,39 @@ const Search: React.FC<SearchProps> = ({
     inputProps.onBlur && inputProps.onBlur(e);
   };
 
-  const onCancel = () => {
+  const onCancel = React.useCallback(() => {
     // eslint-disable-next-line @typescript-eslint/unbound-method
-    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
-    nativeInputValueSetter.call(inputRef.current, '');
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      "value"
+    )?.set;
+    nativeInputValueSetter?.call(inputRef.current, "");
 
-    const ev2 = new Event('input', { bubbles: true });
-    inputRef.current.dispatchEvent(ev2);
-  };
+    const ev2 = new Event("input", { bubbles: true });
+    inputRef.current?.dispatchEvent(ev2);
+  }, [inputRef]);
 
-  const onIconClickStart = React.useCallback((e: TouchEvent) => onIconClick(e.originalEvent), [onIconClick]);
+  const onIconClickStart = React.useCallback(
+    (e: TouchEvent) => onIconClick(e.originalEvent),
+    [onIconClick]
+  );
 
-  const onIconCancelClickStart = React.useCallback((e: TouchEvent) => {
-    e.originalEvent.preventDefault();
-    inputRef.current.focus();
-    onCancel();
-  }, [onCancel]);
+  const onIconCancelClickStart = React.useCallback(
+    (e: TouchEvent) => {
+      e.originalEvent.preventDefault();
+      inputRef.current?.focus();
+      onCancel();
+    },
+    [inputRef, onCancel]
+  );
 
   return (
     <div
-      vkuiClass={classNames(getClassName('Search', platform), {
-        'Search--focused': isFocused,
-        'Search--has-value': !!value,
-        'Search--has-after': !!after,
-        'Search--has-icon': !!icon,
+      vkuiClass={classNames(getClassName("Search", platform), {
+        "Search--focused": isFocused,
+        "Search--has-value": !!value,
+        "Search--has-after": !!after,
+        "Search--has-icon": !!icon,
       })}
       className={className}
       style={style}
@@ -96,37 +112,47 @@ const Search: React.FC<SearchProps> = ({
             onChange={onChange}
             value={value}
           />
-          {platform === IOS && after && <div vkuiClass="Search__after-width">{after}</div>}
+          {platform === IOS && after && (
+            <div vkuiClass="Search__after-width">{after}</div>
+          )}
           <div vkuiClass="Search__placeholder">
             <div vkuiClass="Search__placeholder-in">
               {before}
-              {platform === VKCOM
-                ? <Text vkuiClass="Search__placeholder-text" weight="regular">{placeholder}</Text>
-                : <Title vkuiClass="Search__placeholder-text" level="3" weight="regular">{placeholder}</Title>
-              }
+              {platform === VKCOM ? (
+                <Text vkuiClass="Search__placeholder-text" weight="regular">
+                  {placeholder}
+                </Text>
+              ) : (
+                <Title
+                  vkuiClass="Search__placeholder-text"
+                  level="3"
+                  weight="regular"
+                >
+                  {placeholder}
+                </Title>
+              )}
             </div>
-            {isFocused && platform === IOS && after && <div vkuiClass="Search__after-width">{after}</div>}
+            {isFocused && platform === IOS && after && (
+              <div vkuiClass="Search__after-width">{after}</div>
+            )}
           </div>
         </label>
         <div vkuiClass="Search__after" onClick={onCancel}>
           <div vkuiClass="Search__icons">
-            {icon &&
+            {icon && (
               <Touch onStart={onIconClickStart} vkuiClass="Search__icon">
                 {icon}
               </Touch>
-            }
-            {!!value &&
+            )}
+            {!!value && (
               <Touch onStart={onIconCancelClickStart} vkuiClass="Search__icon">
-                {platform === IOS
-                  ? <Icon16Clear />
-                  : <Icon24Cancel />
-                }
+                {platform === IOS ? <Icon16Clear /> : <Icon24Cancel />}
               </Touch>
-            }
+            )}
           </div>
-          {platform === IOS && after &&
+          {platform === IOS && after && (
             <div vkuiClass="Search__after-in">{after}</div>
-          }
+          )}
         </div>
       </div>
       {platform === VKCOM && <Separator vkuiClass="Search__separator" wide />}
@@ -135,11 +161,12 @@ const Search: React.FC<SearchProps> = ({
 };
 
 Search.defaultProps = {
-  autoComplete: 'off',
-  defaultValue: '',
-  placeholder: 'Поиск',
-  after: 'Отмена',
+  autoComplete: "off",
+  defaultValue: "",
+  placeholder: "Поиск",
+  after: "Отмена",
   before: <Icon16SearchOutline />,
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withPlatform(Search);

package/src/components/Select/Readme.md

@@ -3,16 +3,21 @@
 ```jsx
 <View activePanel="select">
   <Panel id="select">
-    <PanelHeader>
-      Select
-    </PanelHeader>
+    <PanelHeader>Select</PanelHeader>
     <Group>
       <FormItem top="Администратор">
         <Select
-          placeholder="Не выбран" 
-          options={getRandomUsers(10).map(user => ({ label: user.name, value: user.id, avatar: user.photo_100 }))}
+          placeholder="Не выбран"
+          options={getRandomUsers(10).map((user) => ({
+            label: user.name,
+            value: user.id,
+            avatar: user.photo_100,
+          }))}
           renderOption={({ option, ...restProps }) => (
-            <CustomSelectOption {...restProps} before={<Avatar size={24} src={option.avatar} />} />
+            <CustomSelectOption
+              {...restProps}
+              before={<Avatar size={24} src={option.avatar} />}
+            />
           )}
         />
       </FormItem>