@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/FormItem/FormItem.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { HasComponent, HasRootRef } from "../../types";
+import { classNames } from "../../lib/classNames";
+import { useExternRef } from "../../hooks/useExternRef";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import { hasReactNode, noop } from "../../lib/utils";
+import Subhead from "../Typography/Subhead/Subhead";
+import { Caption } from "../Typography/Caption/Caption";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { Removable, RemovableProps } from "../Removable/Removable";
+import "./FormItem.css";
+
+export interface FormItemProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
+    HasComponent,
+    RemovableProps {
+  top?: React.ReactNode;
+  bottom?: React.ReactNode;
+  status?: "default" | "error" | "valid";
+  /**
+   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
+   */
+  removable?: boolean;
+}
+
+export const FormItem: React.FC<FormItemProps> = ({
+  children,
+  top,
+  bottom,
+  status = "default",
+  Component = "div",
+  removable,
+  onRemove = noop,
+  removePlaceholder = "Удалить",
+  getRootRef,
+  ...restProps
+}: FormItemProps) => {
+  const platform = usePlatform();
+  const rootEl = useExternRef(getRootRef);
+  const { sizeY } = useAdaptivity();
+
+  const wrappedChildren = (
+    <React.Fragment>
+      {hasReactNode(top) && <Subhead vkuiClass="FormItem__top">{top}</Subhead>}
+      {children}
+      {hasReactNode(bottom) && (
+        <Caption vkuiClass="FormItem__bottom">{bottom}</Caption>
+      )}
+    </React.Fragment>
+  );
+
+  return (
+    <Component
+      {...restProps}
+      ref={rootEl}
+      vkuiClass={classNames(
+        getClassName("FormItem", platform),
+        `FormItem--${status}`,
+        `FormItem--sizeY-${sizeY}`,
+        {
+          "FormItem--withTop": hasReactNode(top),
+          "FormItem--removable": removable,
+        }
+      )}
+    >
+      {removable ? (
+        <Removable
+          align="start"
+          onRemove={(e) => {
+            if (rootEl?.current) {
+              onRemove(e, rootEl.current);
+            }
+          }}
+          removePlaceholder={removePlaceholder}
+        >
+          <div vkuiClass="FormItem__removable">{wrappedChildren}</div>
+        </Removable>
+      ) : (
+        wrappedChildren
+      )}
+    </Component>
+  );
+};

package/src/components/FormItem/Readme.md

@@ -0,0 +1,183 @@
+Базовый компонент формы. В него нужно оборачивать все поля, из которых конструируется форма. Исключения составляют
+поля-ячейки (`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

@@ -0,0 +1,16 @@
+.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

@@ -0,0 +1,39 @@
+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

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

package/src/components/FormLayoutGroup/FormLayoutGroup.css

@@ -0,0 +1,22 @@
+.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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,63 @@
+Компонент помогает сгруппировать несколько `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

@@ -0,0 +1,34 @@
+.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

@@ -0,0 +1,45 @@
+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 dangerouslySetInnerHTML={dangerouslySetInnerHTML} />
+      )}
+      {hasReactNode(children) && !dangerouslySetInnerHTML && (
+        <Caption>{children}</Caption>
+      )}
+    </div>
+  );
+};

package/src/components/FormStatus/Readme.md

@@ -0,0 +1,23 @@
+Компонент используется для отображения статуса формы. Например, когда в форме допущена ошибка, и нет возможности
+указать на конкретное поле. Заголовок и текст опциональны.
+
+```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

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