@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/SliderSwitch/Readme.md

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

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

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

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

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

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