@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/FormItem/Readme.md

@@ -1,183 +0,0 @@
-Базовый компонент формы. В него нужно оборачивать все поля, из которых конструируется форма. Исключения составляют
-поля-ячейки (`Radio`, `Checkbox`, etc.), если в дизайне для них не предусмотрены `top` и `bottom`. Такие поля можно
-располагать в форме без оборачивания в `FormItem`.
-
-```jsx
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      email: "",
-      purpose: "",
-      showPatronym: true,
-    };
-
-    this.addressItems = [
-      { label: "Почтовый индекс", name: "zip" },
-      { label: "Страна", name: "country" },
-      { label: "Город", name: "city" },
-    ];
-
-    this.onChange = this.onChange.bind(this);
-    this.onRemove = this.onRemove.bind(this);
-  }
-
-  onChange(e) {
-    const { name, value } = e.currentTarget;
-    this.setState({ [name]: value });
-  }
-
-  onShowPatronym() {
-    this.setState({ showPatronym: true });
-  }
-
-  onRemove(e) {
-    this.setState({ showPatronym: false });
-  }
-
-  render() {
-    const { email, purpose, showPatronym } = this.state;
-
-    return (
-      <View activePanel="new-user">
-        <Panel id="new-user">
-          <PanelHeader>Регистрация</PanelHeader>
-          <Group>
-            <FormLayout>
-              <FormItem
-                top="E-mail"
-                status={email ? "valid" : "error"}
-                bottom={
-                  email
-                    ? "Электронная почта введена верно!"
-                    : "Пожалуйста, введите электронную почту"
-                }
-              >
-                <Input
-                  type="email"
-                  name="email"
-                  value={email}
-                  onChange={this.onChange}
-                />
-              </FormItem>
-
-              <FormItem top="Пароль">
-                <Input type="password" placeholder="Введите пароль" />
-              </FormItem>
-
-              <FormItem bottom="Пароль может содержать только латинские буквы и цифры.">
-                <Input type="password" placeholder="Повторите пароль" />
-              </FormItem>
-
-              <FormLayoutGroup mode="horizontal">
-                <FormItem top="Имя">
-                  <Input />
-                </FormItem>
-                <FormItem top="Фамилия">
-                  <Input />
-                </FormItem>
-              </FormLayoutGroup>
-
-              {!this.state.showPatronym ? (
-                <CellButton
-                  onClick={() => this.setState({ showPatronym: true })}
-                >
-                  Указать отчество
-                </CellButton>
-              ) : (
-                <FormItem
-                  removable
-                  onRemove={this.onRemove}
-                  top="Отчество"
-                  bottom="Если у вас нет отчества — удалите этот пункт."
-                >
-                  <Input />
-                </FormItem>
-              )}
-
-              <FormItem top="Пол">
-                <Select
-                  placeholder="Выберите пол"
-                  options={[
-                    {
-                      value: "0",
-                      label: "Мужской",
-                    },
-                    {
-                      value: "1",
-                      label: "Женский",
-                    },
-                  ]}
-                />
-              </FormItem>
-
-              <FormItem top="Тип документа">
-                <SegmentedControl
-                  size="m"
-                  name="type"
-                  options={[
-                    {
-                      label: "Паспорт РФ",
-                      value: "russian",
-                    },
-                    {
-                      label: "Заграничный",
-                      value: "international",
-                    },
-                  ]}
-                />
-              </FormItem>
-
-              {this.addressItems.map(({ label, name }) => (
-                <FormItem top={label} key={name}>
-                  <Input name={name} />
-                </FormItem>
-              ))}
-              <FormItem
-                top="Цель поездки"
-                bottom={purpose ? "" : "Пожалуйста, укажите цель поездки"}
-                status={purpose ? "valid" : "error"}
-              >
-                <Select
-                  placeholder="Выберите цель поездки"
-                  onChange={this.onChange}
-                  value={purpose}
-                  name="purpose"
-                  options={[
-                    {
-                      value: "0",
-                      label: "Бизнес или работа",
-                    },
-                    {
-                      value: "1",
-                      label: "Индивидуальный туризм",
-                    },
-                    {
-                      value: "2",
-                      label: "Посещение близких родственников",
-                    },
-                  ]}
-                />
-              </FormItem>
-              <FormItem top="О себе">
-                <Textarea />
-              </FormItem>
-              <Checkbox>
-                Согласен со всем <Link>этим</Link>
-              </Checkbox>
-              <FormItem>
-                <Button size="l" stretched>
-                  Зарегистрироваться
-                </Button>
-              </FormItem>
-            </FormLayout>
-          </Group>
-        </Panel>
-      </View>
-    );
-  }
-}
-
-<Example />;
-```

package/src/components/FormLayout/FormLayout.css

@@ -1,16 +0,0 @@
-.FormLayout {
-  position: relative;
-}
-
-.FormLayout__submit {
-  position: absolute;
-  visibility: hidden;
-  pointer-events: none;
-  left: 0;
-  top: 0;
-  padding: 0;
-  width: 0;
-  height: 0;
-  appearance: none;
-  border: none;
-}

package/src/components/FormLayout/FormLayout.tsx

@@ -1,39 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import { HasComponent, HasRef } from "../../types";
-import "./FormLayout.css";
-
-const preventDefault = (e: React.FormEvent) => e.preventDefault();
-
-export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &
-  HasRef<HTMLElement> &
-  HasComponent;
-
-const FormLayout: React.FC<FormLayoutProps> = (props: FormLayoutProps) => {
-  const {
-    children,
-    Component = "form",
-    getRef,
-    onSubmit = preventDefault,
-    ...restProps
-  } = props;
-
-  const platform = usePlatform();
-  return (
-    <Component
-      {...restProps}
-      vkuiClass={getClassName("FormLayout", platform)}
-      onSubmit={onSubmit}
-      ref={getRef}
-    >
-      <div vkuiClass="FormLayout__container">{children}</div>
-      {Component === "form" && (
-        <input type="submit" vkuiClass="FormLayout__submit" value="" />
-      )}
-    </Component>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default FormLayout;

package/src/components/FormLayout/Readme.md

@@ -1,2 +0,0 @@
-Компонент для создания `form`. Содержит скрытый `<input type="submit" />`, обеспечивающий отправку формы
-по enter. По-умолчанию в `onSubmit` происходит `e.preventDefault()`, чтобы избежать перезагрузки страницы

package/src/components/FormLayoutGroup/FormLayoutGroup.css

@@ -1,22 +0,0 @@
-.FormLayoutGroup--horizontal {
-  display: flex;
-  padding: 12px var(--formitem_padding);
-}
-
-.FormLayoutGroup__removable {
-  flex-grow: 1;
-  min-width: 0;
-  max-width: 100%;
-}
-
-/**
- * iOS
- */
-.FormLayoutGroup--ios {
-  --formitem_padding: 12px;
-}
-
-.FormLayoutGroup--removable {
-  padding-left: 0;
-  padding-right: 0;
-}

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -1,71 +0,0 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
-import { noop } from "../../lib/utils";
-import { useExternRef } from "../../hooks/useExternRef";
-import { usePlatform } from "../../hooks/usePlatform";
-import { Removable, RemovableProps } from "../Removable/Removable";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import "./FormLayoutGroup.css";
-
-export interface FormLayoutGroupProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    RemovableProps,
-    HasRootRef<HTMLDivElement> {
-  mode?: "vertical" | "horizontal";
-  /**
-   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.
-   */
-  removable?: boolean;
-}
-
-const FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({
-  children,
-  mode = "vertical",
-  removable,
-  removePlaceholder = "Удалить",
-  onRemove = noop,
-  getRootRef,
-  ...restProps
-}: FormLayoutGroupProps) => {
-  const platform = usePlatform();
-  const { sizeY } = useAdaptivity();
-  const isRemovable = removable && mode === "horizontal";
-  const rootEl = useExternRef(getRootRef);
-
-  return (
-    <div
-      ref={rootEl}
-      vkuiClass={classNames(
-        getClassName("FormLayoutGroup", platform),
-        `FormLayoutGroup--sizeY-${sizeY}`,
-        `FormLayoutGroup--${mode}`,
-        {
-          "FormLayoutGroup--removable": isRemovable,
-        }
-      )}
-      {...restProps}
-    >
-      {isRemovable ? (
-        <Removable
-          vkuiClass="FormLayoutGroup__removable"
-          align="start"
-          removePlaceholder={removePlaceholder}
-          onRemove={(e) => {
-            if (rootEl?.current) {
-              onRemove(e, rootEl.current);
-            }
-          }}
-        >
-          {children}
-        </Removable>
-      ) : (
-        children
-      )}
-    </div>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default FormLayoutGroup;

package/src/components/FormLayoutGroup/Readme.md

@@ -1,63 +0,0 @@
-Компонент помогает сгруппировать несколько `FormItem` по какому-то признаку, расположив их по вертикали или
-по горизонтали.
-
-```jsx
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      showDates: true,
-    };
-  }
-
-  toggleDates(showDates) {
-    this.setState({ showDates });
-  }
-
-  render() {
-    const { showDates } = this.state;
-
-    return (
-      <View activePanel="FormLayoutGroup">
-        <Panel id="FormLayoutGroup">
-          <PanelHeader>FormLayoutGroup</PanelHeader>
-          <Group>
-            <FormLayout>
-              <FormLayoutGroup mode="vertical">
-                <FormItem top="Имя">
-                  <Input />
-                </FormItem>
-                <FormItem top="Фамилия">
-                  <Input />
-                </FormItem>
-              </FormLayoutGroup>
-
-              {!showDates ? (
-                <CellButton onClick={() => this.toggleDates(true)}>
-                  Указать даты поездки
-                </CellButton>
-              ) : (
-                <FormLayoutGroup
-                  mode="horizontal"
-                  removable
-                  onRemove={() => this.toggleDates(false)}
-                >
-                  <FormItem bottom="Дата начала поездки">
-                    <Input />
-                  </FormItem>
-                  <FormItem bottom="Дата конца поездки">
-                    <Input />
-                  </FormItem>
-                </FormLayoutGroup>
-              )}
-            </FormLayout>
-          </Group>
-        </Panel>
-      </View>
-    );
-  }
-}
-
-<Example />;
-```

package/src/components/FormStatus/FormStatus.css

@@ -1,34 +0,0 @@
-.FormStatus {
-  border-radius: 10px;
-  padding: 12px;
-  background: var(--field_background);
-  color: var(--text_subhead);
-}
-
-.FormStatus__header,
-.FormStatus b:first-child {
-  color: var(--text_primary);
-}
-
-.FormStatus__header:not(:last-child),
-.FormStatus b:first-child {
-  margin-bottom: 2px;
-}
-
-.FormStatus--error {
-  background: var(--field_error_background);
-  color: var(--field_error_border);
-}
-
-.FormStatus--error .FormStatus__header,
-.FormStatus--error .FormStatus b:first-child {
-  color: currentColor;
-}
-
-.FormStatus b:first-child {
-  /* хак для ошибок из API, текст в которых приходит с <b>в начале</b> */
-  display: block;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 500;
-}

package/src/components/FormStatus/FormStatus.tsx

@@ -1,51 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import Headline from "../Typography/Headline/Headline";
-import Caption from "../Typography/Caption/Caption";
-import { hasReactNode } from "../../lib/utils";
-import "./FormStatus.css";
-
-export interface FormStatusProps extends React.HTMLAttributes<HTMLDivElement> {
-  mode?: "default" | "error";
-  header?: React.ReactNode;
-}
-
-export const FormStatus: React.FunctionComponent<FormStatusProps> = ({
-  mode,
-  header,
-  children,
-  dangerouslySetInnerHTML,
-  ...restProps
-}: FormStatusProps) => {
-  const platform = usePlatform();
-
-  return (
-    <div
-      {...restProps}
-      vkuiClass={classNames(
-        getClassName("FormStatus", platform),
-        `FormStatus--${mode}`
-      )}
-    >
-      {hasReactNode(header) && (
-        <Headline weight="medium" vkuiClass="FormStatus__header">
-          {header}
-        </Headline>
-      )}
-      {dangerouslySetInnerHTML && (
-        <Caption
-          level="1"
-          weight="regular"
-          dangerouslySetInnerHTML={dangerouslySetInnerHTML}
-        />
-      )}
-      {hasReactNode(children) && !dangerouslySetInnerHTML && (
-        <Caption level="1" weight="regular">
-          {children}
-        </Caption>
-      )}
-    </div>
-  );
-};

package/src/components/FormStatus/Readme.md

@@ -1,23 +0,0 @@
-Компонент используется для отображения статуса формы. Например, когда в форме допущена ошибка, и нет возможности
-указать на конкретное поле. Заголовок и текст опциональны.
-
-```jsx
-<View activePanel="form-status">
-  <Panel id="form-status">
-    <PanelHeader>Статус формы</PanelHeader>
-    <Group>
-      <FormItem>
-        <FormStatus header="Некорректный мобильный номер" mode="error">
-          Необходимо корректно ввести номер в международном формате
-        </FormStatus>
-      </FormItem>
-      <FormItem top="Мобильный телефон">
-        <Input defaultValue="+7 12 344 15 48" />
-      </FormItem>
-      <FormItem top="Код подтверждения">
-        <Input />
-      </FormItem>
-    </Group>
-  </Panel>
-</View>
-```

package/src/components/Gallery/Gallery.css

@@ -1,71 +0,0 @@
-.Gallery {
-  position: relative;
-  overflow: hidden;
-  user-select: none;
-}
-
-.Gallery__viewport {
-  margin: 0;
-  height: 100%;
-  position: relative;
-}
-
-.Gallery--center .Gallery__viewport {
-  margin: 0 auto;
-}
-
-.Gallery__layer {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  min-height: 100px;
-  cursor: grab;
-  align-items: stretch;
-}
-
-.Gallery__slide {
-  width: 100%;
-  flex: 0 0 auto;
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.Gallery--custom-width .Gallery__slide {
-  width: auto;
-}
-
-.Gallery__slide > * {
-  width: 100%;
-  min-height: 100%;
-}
-
-.Gallery__bullets {
-  position: absolute;
-  bottom: 10px;
-  height: 6px;
-  width: 100%;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.Gallery__bullets--dark .Gallery__bullet {
-  background-color: #000;
-}
-
-.Gallery__bullets--light .Gallery__bullet {
-  background-color: #fff;
-}
-
-.Gallery__bullet {
-  height: 6px;
-  width: 6px;
-  border-radius: 50%;
-  margin: 0 3px;
-  opacity: 0.56;
-}
-
-.Gallery__bullet--active {
-  opacity: 1;
-}