@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/SliderSwitch/Readme.md

@@ -0,0 +1,27 @@
+> **Deprecated:** этот компонент устарел и будет удален в 5.0.0.
+>
+> Используйте [`SegmentedControl`](#/SegmentedControl).
+
+```jsx
+<View activePanel="progress">
+  <Panel id="progress">
+    <PanelHeader>SliderSwitch</PanelHeader>
+    <Group>
+      <FormItem top="Пол">
+        <SliderSwitch
+          options={[
+            {
+              name: "Мужской",
+              value: "male",
+            },
+            {
+              name: "Женский",
+              value: "female",
+            },
+          ]}
+        />
+      </FormItem>
+    </Group>
+  </Panel>
+</View>
+```

package/src/components/SliderSwitch/SliderSwitch.css

@@ -0,0 +1,87 @@
+.SliderSwitch {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 44px;
+  border-radius: 8px;
+  box-sizing: border-box;
+  background-color: var(--field_background);
+  transition: all 100ms ease-out;
+}
+
+.SliderSwitch__button {
+  width: 50%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: transparent;
+  color: var(--text_subhead);
+  transition: color 100ms ease-out;
+  user-select: none;
+  z-index: 1;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.SliderSwitch__button--focus {
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+.SliderSwitch__button--ios {
+  border-radius: 10px;
+}
+
+.SliderSwitch__button--android,
+.SliderSwitch__button--vkcom {
+  border-radius: 8px;
+}
+
+.SliderSwitch__button--hover {
+  color: var(--text_tertiary);
+}
+
+.SliderSwitch__border {
+  position: absolute;
+  left: 50%;
+  top: 8px;
+  width: 1px;
+  height: 28px;
+  opacity: 0.5;
+  background-color: var(--toolbar_attach_background_from);
+}
+
+.SliderSwitch__button--active {
+  color: var(--text_primary);
+  transition: transform 150ms ease-in;
+}
+
+.SliderSwitch__button--activeHover {
+  color: var(--header_alternate_tab_active_text);
+}
+
+.SliderSwitch__slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(50% - 4px);
+  height: 40px;
+  margin: 2px;
+  border-radius: 6px;
+  transition: transform 150ms;
+}
+
+.SliderSwitch--firstActive {
+  margin-left: 2px;
+  background-color: var(--background_content);
+}
+
+.SliderSwitch--secondActive {
+  transform: translateX(calc(100% + 4px));
+  background-color: var(--background_content);
+}

package/src/components/SliderSwitch/SliderSwitch.tsx

@@ -0,0 +1,209 @@
+import * as React from "react";
+import { SliderSwitchButton } from "./SliderSwitchButton";
+import { classNames } from "../../lib/classNames";
+import { warnOnce } from "../../lib/warnOnce";
+import { HasPlatform } from "../../types";
+import "./SliderSwitch.css";
+
+export interface SliderSwitchOptionInterface {
+  name: string;
+  value: string | number;
+}
+
+export interface SliderSwitchProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasPlatform {
+  options: Array<{
+    name: string;
+    value: string | number;
+  }>;
+  activeValue?: SliderSwitchOptionInterface["value"];
+  name?: string;
+  onSwitch?: (value: SliderSwitchOptionInterface["value"]) => void;
+}
+
+interface SliderSwitchState {
+  activeValue: SliderSwitchOptionInterface["value"];
+  hoveredOptionId: number;
+}
+
+const warn = warnOnce("SliderSwitch");
+/**
+ * @deprecated Этот компонент устарел и будет удален в 5.0.0. Используйте [`SegmentedControl`](#/SegmentedControl).
+ */
+class SliderSwitch extends React.Component<
+  SliderSwitchProps,
+  SliderSwitchState
+> {
+  public constructor(props: SliderSwitchProps) {
+    super(props);
+
+    this.state = {
+      activeValue: props.activeValue ?? "",
+      hoveredOptionId: -1,
+    };
+
+    this.firstButton = React.createRef();
+    this.secondButton = React.createRef();
+  }
+
+  static defaultProps = {
+    options: [
+      { name: "", value: "" },
+      { name: "", value: "" },
+    ],
+  };
+
+  firstButton: React.RefObject<HTMLDivElement>;
+  secondButton: React.RefObject<HTMLDivElement>;
+
+  onSwitch = (value: SliderSwitchOptionInterface["value"]) => {
+    const { onSwitch } = this.props;
+
+    this.setState(
+      () => ({
+        activeValue: value,
+      }),
+      () => {
+        onSwitch && onSwitch(value);
+      }
+    );
+  };
+
+  handleFirstClick = () => {
+    const { options } = this.props;
+    const { value } = options[0];
+
+    this.onSwitch(value);
+  };
+
+  handleSecondClick = () => {
+    const { options } = this.props;
+    const { value } = options[1];
+
+    this.onSwitch(value);
+  };
+
+  handleFirstHover = () => {
+    this.setState(() => ({
+      hoveredOptionId: 0,
+    }));
+  };
+
+  handleSecondHover = () => {
+    this.setState(() => ({
+      hoveredOptionId: 1,
+    }));
+  };
+
+  resetFocusedOption = () => {
+    this.setState(() => ({
+      hoveredOptionId: -1,
+    }));
+  };
+
+  switchByKey = (event: React.KeyboardEvent) => {
+    if (
+      event.key !== "Enter" &&
+      event.key !== "Spacebar" &&
+      event.key !== " "
+    ) {
+      return;
+    }
+    event.preventDefault();
+
+    const { options } = this.props;
+    const { activeValue } = this.state;
+    const value = options.find((option) => option.value !== activeValue)?.value;
+
+    if (value !== undefined) {
+      this.onSwitch(value);
+    }
+
+    if (options[0].value === value) {
+      this.firstButton.current?.focus();
+    } else {
+      this.secondButton.current?.focus();
+    }
+  };
+
+  static getDerivedStateFromProps(
+    nextProps: SliderSwitchProps,
+    prevState: SliderSwitchState
+  ) {
+    if (
+      nextProps.activeValue &&
+      nextProps.activeValue !== prevState.activeValue
+    ) {
+      return {
+        activeValue: nextProps.activeValue,
+      };
+    }
+
+    return null;
+  }
+
+  componentDidMount(): void {
+    if (process.env.NODE_ENV === "development") {
+      warn(
+        "Этот компонент устарел и будет удален в 5.0.0. Используйте SegmentedControl."
+      );
+    }
+  }
+
+  public render() {
+    const {
+      name,
+      options,
+      activeValue: _activeValue,
+      onSwitch,
+      ...restProps
+    } = this.props;
+    const { activeValue, hoveredOptionId } = this.state;
+
+    const [firstOption, secondOption] = options;
+    const firstActive = firstOption.value === activeValue;
+    const secondActive = secondOption.value === activeValue;
+
+    return (
+      <div
+        {...restProps}
+        vkuiClass="SliderSwitch"
+        onKeyDown={this.switchByKey}
+        onMouseLeave={this.resetFocusedOption}
+      >
+        {!firstActive && !secondActive && (
+          <div vkuiClass="SliderSwitch__border" />
+        )}
+        <div
+          vkuiClass={classNames("SliderSwitch__slider", {
+            ["SliderSwitch--firstActive"]: firstActive,
+            ["SliderSwitch--secondActive"]: secondActive,
+          })}
+        />
+        <input type="hidden" name={name} value={activeValue} />
+        <SliderSwitchButton
+          active={firstActive}
+          hovered={hoveredOptionId === 0}
+          aria-pressed={firstActive}
+          onClick={this.handleFirstClick}
+          onMouseEnter={this.handleFirstHover}
+          getRootRef={this.firstButton}
+        >
+          {firstOption.name}
+        </SliderSwitchButton>
+        <SliderSwitchButton
+          active={secondActive}
+          hovered={hoveredOptionId === 1}
+          onClick={this.handleSecondClick}
+          onMouseEnter={this.handleSecondHover}
+          getRootRef={this.secondButton}
+        >
+          {secondOption.name}
+        </SliderSwitchButton>
+      </div>
+    );
+  }
+}
+
+export { SliderSwitch };

package/src/components/SliderSwitch/SliderSwitchButton.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import Tappable from "../Tappable/Tappable";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import Text from "../Typography/Text/Text";
+import "./SliderSwitch.css";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement> {
+  active?: boolean;
+  hovered?: boolean;
+}
+
+/**
+ * @deprecated Этот компонент устарел и будет удален в 5.0.0.
+ */
+export const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (
+  props: ButtonProps
+) => {
+  const { active, hovered, children, getRootRef, ...restProps } = props;
+  const platform = usePlatform();
+  const [focus, setFocus] = React.useState(false);
+
+  const toggleFocus = () => {
+    setFocus(!focus);
+  };
+
+  return (
+    <Tappable
+      {...restProps}
+      vkuiClass={classNames(getClassName("SliderSwitch__button", platform), {
+        ["SliderSwitch__button--active"]: active,
+        ["SliderSwitch__button--hover"]: !active && hovered,
+        ["SliderSwitch__button--activeHover"]: active && hovered,
+        ["SliderSwitch__button--focus"]: focus && !hovered,
+      })}
+      Component="button"
+      type="button"
+      getRootRef={getRootRef}
+      aria-pressed={active}
+      onFocus={toggleFocus}
+      onBlur={toggleFocus}
+      tabIndex={0}
+      hasActive={false}
+      hoverMode="opacity"
+    >
+      <Text weight="medium">{children}</Text>
+    </Tappable>
+  );
+};

package/src/components/Snackbar/Readme.md

@@ -0,0 +1,145 @@
+`Snackbar` – компонент для показа кратких сообщений в нижней части экрана. Его можно использовать, чтобы информировать пользователя о каких-то процессах в приложении, например, "Статья добавлена в закладки".
+
+Плашка с уведомлением автоматически исчезает после какого-то времени (свойств `duration` в миллисекундах), либо же её можно скрыть смахиванием вправо.
+
+Не нужно показывать это уведомление, если в приложении каким-то другим образом видно, что действие совершено. Например, когда заменяется текст в кнопке, или в список на странице добавился элемент.
+
+После закрытия компонент вызывает обязательное свойство `onClose`, и вам необходимо убрать `Snackbar` со страницы.
+
+```jsx
+class SnackBarExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      text: "",
+      snackbar: null,
+    };
+
+    this.openBaseWithAction = this.openBaseWithAction.bind(this);
+    this.openVertical = this.openVertical.bind(this);
+    this.openWithAvatar = this.openWithAvatar.bind(this);
+    this.openDark = this.openDark.bind(this);
+  }
+
+  componentDidMount() {
+    this.openBaseWithAction();
+  }
+
+  openBaseWithAction() {
+    if (this.state.snackbar) return;
+    this.setState({
+      snackbar: (
+        <Snackbar
+          onClose={() => this.setState({ snackbar: null })}
+          action="Поделиться"
+          onActionClick={() => this.setState({ text: "Добавляем метку." })}
+          before={
+            <Avatar size={24} style={{ background: "var(--accent)" }}>
+              <Icon16Done fill="#fff" width={14} height={14} />
+            </Avatar>
+          }
+        >
+          Ссылка скопирована
+        </Snackbar>
+      ),
+    });
+  }
+
+  openVertical() {
+    if (this.state.snackbar) return;
+    this.setState({
+      snackbar: (
+        <Snackbar
+          layout="vertical"
+          onClose={() => this.setState({ snackbar: null })}
+          action="Перейти в раздел «Понравилось»"
+          onActionClick={() =>
+            this.setState({ text: "Открыта подробная информация." })
+          }
+          before={
+            <Avatar size={24} style={{ background: "var(--accent)" }}>
+              <Icon16Done fill="#fff" width={14} height={14} />
+            </Avatar>
+          }
+        >
+          Ссылка сохранена в закладки
+        </Snackbar>
+      ),
+    });
+  }
+
+  openWithAvatar() {
+    if (this.state.snackbar) return;
+    this.setState({
+      snackbar: (
+        <Snackbar
+          onClose={() => this.setState({ snackbar: null })}
+          onActionClick={() =>
+            this.setState({ text: "Сообщение Ивану было отменено." })
+          }
+          after={<Avatar src={getAvatarUrl("user_wayshev")} size={32} />}
+        >
+          Отправлено Ивану Барышеву
+        </Snackbar>
+      ),
+    });
+  }
+
+  openDark() {
+    if (this.state.snackbar) return;
+    this.setState({
+      snackbar: (
+        <AppearanceProvider appearance="dark">
+          <Snackbar
+            onClose={() => this.setState({ snackbar: null })}
+            action="Поделиться"
+            onActionClick={() => this.setState({ text: "Добавляем метку." })}
+            before={
+              <Avatar size={24} style={{ background: "var(--accent)" }}>
+                <Icon16Done fill="#fff" width={14} height={14} />
+              </Avatar>
+            }
+          >
+            Ссылка скопирована
+          </Snackbar>
+        </AppearanceProvider>
+      ),
+    });
+  }
+
+  render() {
+    return (
+      <View activePanel="example">
+        <Panel id="example">
+          <PanelHeader>Snackbar</PanelHeader>
+          <Group>
+            <CellButton onClick={this.openBaseWithAction}>
+              Уведомление с иконкой и кнопкой
+            </CellButton>
+            <CellButton onClick={this.openVertical}>
+              Вертикальное расположение
+            </CellButton>
+            <CellButton onClick={this.openWithAvatar}>
+              Уведомление с аватаркой
+            </CellButton>
+            <CellButton onClick={this.openDark}>
+              Уведомление с темной темой
+            </CellButton>
+          </Group>
+
+          {this.state.text && (
+            <Group>
+              <Div>{this.state.text}</Div>
+            </Group>
+          )}
+
+          {this.state.snackbar}
+        </Panel>
+      </View>
+    );
+  }
+}
+
+<SnackBarExample />;
+```

package/src/components/Snackbar/Snackbar.css

@@ -0,0 +1,159 @@
+.Snackbar {
+  user-select: none;
+  z-index: 101;
+  position: fixed;
+  bottom: 0;
+  left: auto;
+  width: 100%;
+  padding-left: var(--safe-area-inset-left);
+  padding-right: var(--safe-area-inset-right);
+  padding-bottom: var(--safe-area-inset-bottom);
+}
+
+.Epic .Snackbar {
+  padding-bottom: calc(var(--tabbar_height) + var(--safe-area-inset-bottom));
+}
+
+.Snackbar__in {
+  padding: 8px;
+}
+
+.Snackbar--closing .Snackbar__in {
+  transform: translate3d(0, 140%, 0);
+}
+
+.Snackbar__body {
+  box-sizing: border-box;
+  padding: 12px 16px;
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  background: var(--modal_card_background);
+  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.08);
+}
+
+.Snackbar__before {
+  margin-left: -4px;
+  margin-right: 12px;
+}
+
+.Snackbar__after {
+  margin-right: -4px;
+  margin-left: 12px;
+}
+
+.Snackbar__content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.Snackbar--l-vertical .Snackbar__content {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.Snackbar__content-text {
+  flex: 1;
+}
+
+.Snackbar__content-text {
+  color: var(--text_primary);
+}
+
+.Snackbar--l-horizontal .Snackbar__action {
+  margin-right: -16px;
+  position: relative;
+  top: 2px;
+}
+
+.Snackbar--l-vertical .Snackbar__action {
+  margin-top: 2px;
+  margin-bottom: -6px;
+  margin-left: -16px;
+}
+
+.ModalRoot .Snackbar {
+  padding-bottom: var(--safe-area-inset-bottom);
+}
+
+/* iOS */
+.Snackbar--ios .Snackbar__in,
+.Snackbar--ios .Snackbar__body {
+  transition: transform 400ms var(--ios-easing);
+}
+
+.Snackbar--ios .Snackbar__in {
+  animation: vkui-animation-snackbar-intro-vertical 340ms var(--ios-easing);
+}
+
+.Snackbar--ios .Snackbar__body {
+  border-radius: 10px;
+}
+
+/* Android */
+.Snackbar--android .Snackbar__in,
+.Snackbar--android .Snackbar__body,
+.Snackbar--vkcom .Snackbar__in,
+.Snackbar--vkcom .Snackbar__body {
+  transition: transform 320ms var(--android-easing);
+}
+
+.Snackbar--android .Snackbar__in,
+.Snackbar--vkcom .Snackbar__in {
+  animation: vkui-animation-snackbar-intro-vertical 340ms var(--android-easing);
+}
+
+.Snackbar--android .Snackbar__body,
+.Snackbar--vkcom .Snackbar__body {
+  border-radius: 8px;
+}
+
+/**
+ * Desktop
+ */
+
+.Snackbar--desktop {
+  max-width: 328px;
+  left: 0;
+  bottom: 0;
+}
+
+.Snackbar--desktop .Snackbar__in {
+  padding: 12px;
+  animation-name: vkui-animation-snackbar-intro-horizontal;
+}
+
+.Snackbar--desktop.Snackbar--closing .Snackbar__in {
+  transform: translate3d(-140%, 0, 0);
+}
+
+/**
+ * Touch-interaction
+ */
+.Snackbar--touched .Snackbar__body {
+  transition: none;
+}
+
+/**
+ * Animations
+ */
+@keyframes vkui-animation-snackbar-intro-vertical {
+  from {
+    transform: translate3d(0, 140%, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes vkui-animation-snackbar-intro-horizontal {
+  from {
+    transform: translate3d(-140%, 0, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}