@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Search/Readme.md

@@ -0,0 +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>
+    );
+  }
+}
+
+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

@@ -0,0 +1,359 @@
+.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;
+}