@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/Search/Readme.md

@@ -1,235 +0,0 @@
-Надстройка над `<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>
-    );
-  }
-}
-
-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>
-            ))}
-          {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);
-  }
-
-  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>
-    );
-  }
-}
-
-const AdaptivitySearch = withPlatform(
-  withAdaptivity(SearchExample, { sizeX: true })
-);
-
-<AdaptivitySearch />;
-```

package/src/components/Search/Search.css

@@ -1,359 +0,0 @@
-.Search {
-  overflow: hidden;
-  font-weight: normal;
-  font-family: var(--font-common);
-  transform: translate3d(0, 0, 0);
-  line-height: normal;
-}
-
-.Search__in {
-  position: relative;
-}
-
-.Search__width {
-  height: var(--search_default_height);
-  white-space: nowrap;
-  color: transparent;
-  width: 10000px;
-}
-
-.Search__control {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: calc(100% - 1px);
-  height: 100%;
-  border-radius: 10px;
-}
-
-.Search__input {
-  -webkit-appearance: none; /* не используем textfield из-за бага в iOS 15.1 http://www.openradar.me/FB9744107 */
-  border: none;
-  margin: 0;
-  height: var(--search_default_height);
-  position: relative;
-  padding: 0 22px 0 36px;
-  box-sizing: border-box;
-  font-size: 17px;
-  border-radius: 10px;
-  max-width: 100%;
-  flex-grow: 1;
-  min-width: 0;
-  background-color: transparent;
-  z-index: 2;
-  color: var(--text_primary);
-}
-
-.Search__input::-webkit-search-decoration,
-.Search__input::-webkit-search-cancel-button,
-.Search__input::-webkit-search-results-button,
-.Search__input::-webkit-search-results-decoration {
-  display: none;
-}
-
-.Search--has-after .Search__input {
-  border-radius: 10px 0 0 10px;
-}
-
-.Search--has-value .Search__input,
-.Search--has-icon .Search__input,
-.Search--has-value .Search__placeholder,
-.Search--has-icon .Search__placeholder {
-  padding-right: 40px;
-}
-
-.Search--has-icon.Search--has-value .Search__input,
-.Search--has-icon.Search--has-value .Search__placeholder {
-  padding-right: 80px;
-}
-
-.Search__after-width {
-  font-size: 17px;
-  height: var(--search_default_height);
-  line-height: var(--search_default_height);
-  padding-left: 12px;
-  padding-right: 4px;
-  flex-shrink: 0;
-  pointer-events: none;
-  cursor: text;
-}
-
-.Search__placeholder {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  cursor: text;
-  z-index: 1;
-  text-align: left;
-  height: var(--search_default_height);
-  font-size: 0;
-  padding-left: 12px;
-  padding-right: 22px;
-  pointer-events: none;
-  box-sizing: border-box;
-  display: flex;
-}
-
-.Search__placeholder-in {
-  height: var(--search_default_height);
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  flex-grow: 1;
-  max-width: 100%;
-}
-
-.Search__placeholder-text {
-  margin-left: 8px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.Search--has-value .Search__placeholder-text {
-  opacity: 0;
-}
-
-.Search__icons {
-  position: absolute;
-  right: 100%;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--search_bar_field_tint);
-}
-
-.Search__icon {
-  width: 40px;
-  height: var(--search_default_height);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.Search__after {
-  position: absolute;
-  left: 100%;
-  top: 0;
-  line-height: var(--search_default_height);
-  z-index: 2;
-  transform: translate(0);
-  transition: transform 0.3s var(--ios-easing);
-  cursor: default;
-}
-
-.Search--focused .Search__after,
-.Search--has-value .Search__after {
-  transform: translate(-100%);
-}
-
-.Search__after::before {
-  position: absolute;
-  right: calc(100% - 1px);
-  display: block;
-  height: 100%;
-  width: 10px;
-  content: "";
-  pointer-events: none;
-}
-
-.Search__after-in {
-  position: relative;
-  z-index: 2;
-  cursor: pointer;
-  font-size: 17px;
-  padding-left: 12px;
-  padding-right: 4px;
-}
-
-.Search__after::after {
-  position: absolute;
-  right: 100%;
-  display: block;
-  height: 100%;
-  width: 10px;
-  content: "";
-  top: 0;
-  border-radius: 0 10px 10px 0;
-  cursor: text;
-  pointer-events: none;
-}
-
-.Group--plain .Search {
-  padding-top: 4px;
-}
-
-/*
-  Themes
- */
-
-/*
-  default
- */
-.Search {
-  background: var(--search_bar_background);
-}
-
-.Search__control {
-  background-color: var(--search_bar_field_background);
-}
-
-.Search__input {
-  color: var(--text_primary);
-}
-
-.Search__placeholder {
-  color: var(--search_bar_field_tint);
-}
-
-.Search__after-width {
-  background: var(--search_bar_field_background);
-  color: var(--search_bar_field_background);
-}
-
-.Search__after {
-  background: var(--search_bar_background);
-  color: var(--accent);
-}
-
-.Search__after::after {
-  background-color: var(--search_bar_field_background);
-}
-
-.Search__after::before {
-  background-color: var(--search_bar_background);
-}
-
-/*
-  header
- */
-.PanelHeader .Search {
-  background: var(--header_background);
-}
-
-.PanelHeader .Search__control {
-  background-color: var(--header_search_field_background);
-}
-
-.PanelHeader .Search__input {
-  color: var(--text_primary);
-}
-
-.PanelHeader .Search__placeholder {
-  color: var(--header_search_field_tint);
-}
-
-.PanelHeader .Search__after-width {
-  background: var(--header_search_field_background);
-  color: var(--header_search_field_background);
-}
-
-.PanelHeader .Search__after {
-  background: var(--header_background);
-  color: var(--header_tint);
-}
-
-.PanelHeader .Search__after::after {
-  background-color: var(--header_search_field_background);
-}
-
-.PanelHeader .Search__after::before {
-  background-color: var(--header_background);
-}
-
-/**
-  iOS
- */
-.Search--ios {
-  padding: 8px 12px;
-}
-
-/**
-  Android
- */
-.Search--android {
-  padding: 8px 16px;
-}
-
-/**
-  VKCOM
-*/
-
-.Search--vkcom,
-.PanelHeader--vkcom .Search {
-  background: transparent;
-}
-
-.Search--vkcom .Search__in {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-
-.Search--vkcom .Search__input {
-  font-size: 15px;
-  line-height: 20px;
-  padding-left: 40px;
-}
-
-.Search--vkcom .Search__placeholder {
-  padding-left: 16px;
-}
-
-.Search--vkcom .Search__icons {
-  top: 4px;
-  right: calc(100% + 8px);
-}
-
-.Search--vkcom.Search--has-value .Search__input {
-  padding-right: 56px;
-}
-
-.Search--vkcom.Search--has-icon.Search--has-value .Search__input {
-  padding-right: 92px;
-}
-
-.Search--vkcom .Search__icon {
-  width: 40px;
-  height: 40px;
-}
-
-.Search--vkcom .Search__icon:hover {
-  background-color: var(--background_hover);
-  border-radius: 50%;
-}
-
-.Search--vkcom .Search__control {
-  background-color: transparent;
-}
-
-.PanelHeader--vkcom .Search__separator {
-  display: none;
-}
-
-.Search--vkcom .Search__separator {
-  color: var(--input_border);
-}
-
-.Group--card .Search--vkcom {
-  margin: 0 -8px;
-}
-
-.Group--card .Search--vkcom:first-child {
-  margin-top: -8px;
-}
-
-.Group--card .Search--vkcom:not(:last-child) {
-  margin-bottom: 8px;
-}
-
-.Group--card .Search--vkcom .Search__placeholder {
-  padding-left: 20px;
-}
-
-.Group--card .Search--vkcom .Search__input {
-  padding-left: 44px;
-}