@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -1,353 +0,0 @@
-import * as React from "react";
-import { Touch, TouchProps, TouchEvent } from "../Touch/Touch";
-import TouchRootContext from "../Touch/TouchContext";
-import FixedLayout from "../FixedLayout/FixedLayout";
-import { classNames } from "../../lib/classNames";
-import { IOS, ANDROID, VKCOM } from "../../lib/platform";
-import { getClassName } from "../../helpers/getClassName";
-import PullToRefreshSpinner from "./PullToRefreshSpinner";
-import { withPlatform } from "../../hoc/withPlatform";
-import { AnyFunction, HasPlatform } from "../../types";
-import { canUseDOM, DOMProps, withDOM } from "../../lib/dom";
-import { runTapticImpactOccurred } from "../../lib/taptic";
-import { withContext } from "../../hoc/withContext";
-import {
-  ScrollContext,
-  ScrollContextInterface,
-} from "../AppRoot/ScrollContext";
-import "./PullToRefresh.css";
-
-export interface PullToRefreshProps extends TouchProps, HasPlatform {
-  /**
-   * Будет вызвана для обновления контента
-   */
-  onRefresh: AnyFunction;
-  /**
-   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`
-   */
-  isFetching?: boolean;
-  /** @ignore */
-  scroll?: ScrollContextInterface;
-}
-
-export interface PullToRefreshState {
-  watching: boolean;
-  refreshing: boolean;
-  canRefresh: boolean;
-
-  touchDown: boolean;
-
-  touchY: number;
-  spinnerY: PullToRefreshParams["start"];
-  spinnerProgress: number;
-  contentShift: number;
-}
-
-export interface PullToRefreshParams {
-  start: number;
-  max: number;
-  maxY: number;
-  refreshing: number;
-  positionMultiplier: number;
-}
-
-export type TouchEventHandler = (event: TouchEvent) => void;
-
-function cancelEvent(event: any) {
-  if (!event) {
-    return false;
-  }
-  while (event.originalEvent) {
-    event = event.originalEvent;
-  }
-  if (event.preventDefault && event.cancelable) {
-    event.preventDefault();
-  }
-  if (event.stopPropagation) {
-    event.stopPropagation();
-  }
-  return false;
-}
-
-class PullToRefresh extends React.PureComponent<
-  PullToRefreshProps & DOMProps,
-  PullToRefreshState
-> {
-  constructor(props: PullToRefreshProps) {
-    super(props);
-
-    this.params = {
-      start: props.platform === ANDROID || props.platform === VKCOM ? -45 : -10,
-      max: props.platform === ANDROID || props.platform === VKCOM ? 80 : 50,
-      maxY: props.platform === ANDROID || props.platform === VKCOM ? 80 : 400,
-      refreshing:
-        props.platform === ANDROID || props.platform === VKCOM ? 50 : 36,
-
-      positionMultiplier:
-        props.platform === ANDROID || props.platform === VKCOM ? 1 : 0.21,
-    };
-
-    this.state = {
-      watching: false,
-      refreshing: false,
-      canRefresh: false,
-
-      touchDown: false,
-
-      touchY: 0,
-      spinnerY: this.params.start,
-      spinnerProgress: 0,
-      contentShift: 0,
-    };
-
-    this.contentRef = React.createRef();
-  }
-
-  params: PullToRefreshParams;
-  contentRef: React.RefObject<HTMLDivElement>;
-  waitFetchingTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
-
-  get document() {
-    return this.props.document;
-  }
-
-  componentDidMount() {
-    if (canUseDOM) {
-      this.document!.addEventListener("touchmove", this.onWindowTouchMove, {
-        // @ts-ignore
-        cancelable: true,
-        passive: false,
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    // Здесь нужен последний аргумент с такими же параметрами, потому что
-    // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.
-    // https://github.com/VKCOM/VKUI/issues/444
-    if (canUseDOM) {
-      this.document!.removeEventListener("touchmove", this.onWindowTouchMove, {
-        // @ts-ignore
-        cancelable: true,
-        passive: false,
-      });
-    }
-    if (this.waitFetchingTimeout) {
-      clearTimeout(this.waitFetchingTimeout);
-    }
-  }
-
-  componentDidUpdate(
-    prevProps: PullToRefreshProps,
-    prevState: PullToRefreshState
-  ) {
-    if (prevProps.isFetching && !this.props.isFetching) {
-      this.onRefreshingFinish();
-    }
-    if (
-      !prevProps.isFetching &&
-      this.props.isFetching &&
-      this.waitFetchingTimeout
-    ) {
-      clearTimeout(this.waitFetchingTimeout);
-    }
-
-    if (prevState.touchDown && !this.state.touchDown) {
-      const { refreshing, canRefresh } = this.state;
-      if (!refreshing && canRefresh) {
-        this.runRefreshing();
-      } else if (refreshing && !this.props.isFetching) {
-        // only iOS can start refresh before gesture end
-        this.resetRefreshingState();
-      } else {
-        // refreshing && isFetching: refresh in progress
-        // OR !refreshing && !canRefresh: pull was not strong enough
-        this.setState({
-          spinnerY: refreshing ? this.params.refreshing : this.params.start,
-          spinnerProgress: 0,
-          contentShift: 0,
-        });
-      }
-    }
-  }
-
-  onTouchStart: TouchEventHandler = (e: TouchEvent) => {
-    if (this.state.refreshing) {
-      cancelEvent(e);
-    }
-    this.setState({ touchDown: true });
-  };
-
-  onWindowTouchMove: EventListener = (event: Event) => {
-    if (this.state.refreshing) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  };
-
-  onTouchMove: TouchEventHandler = (e: TouchEvent) => {
-    const { isY, shiftY } = e;
-    const { start, max } = this.params;
-    const pageYOffset = this.props.scroll?.getScroll().y;
-
-    const { refreshing, watching, touchDown } = this.state;
-
-    if (watching && touchDown) {
-      cancelEvent(e);
-
-      const { positionMultiplier } = this.params;
-
-      const shift = Math.max(0, shiftY - this.state.touchY);
-
-      const currentY = Math.max(
-        start,
-        Math.min(this.params.maxY, start + shift * positionMultiplier)
-      );
-      const progress =
-        currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;
-
-      this.setState({
-        spinnerY: currentY,
-        spinnerProgress: Math.min(80, Math.max(0, progress)),
-        canRefresh: progress > 80,
-        contentShift: (currentY + 10) * 2.3,
-      });
-
-      if (progress > 85 && !refreshing && this.props.platform === IOS) {
-        this.runRefreshing();
-      }
-    } else if (
-      isY &&
-      pageYOffset === 0 &&
-      shiftY > 0 &&
-      !refreshing &&
-      touchDown
-    ) {
-      cancelEvent(e);
-
-      this.setState({
-        watching: true,
-        touchY: shiftY,
-        spinnerY: start,
-        spinnerProgress: 0,
-      });
-    }
-  };
-
-  onTouchEnd = () => {
-    this.setState({
-      watching: false,
-      touchDown: false,
-    });
-  };
-
-  runRefreshing() {
-    if (!this.state.refreshing && this.props.onRefresh) {
-      // cleanup if the consumer does not start fetching in 1s
-      this.waitFetchingTimeout = setTimeout(this.onRefreshingFinish, 1000);
-      this.setState({
-        refreshing: true,
-        spinnerY:
-          this.props.platform === ANDROID || this.props.platform === VKCOM
-            ? this.params.refreshing
-            : this.state.spinnerY,
-      });
-
-      this.props.onRefresh();
-      runTapticImpactOccurred("light");
-    }
-  }
-
-  onRefreshingFinish: VoidFunction = () => {
-    if (!this.state.touchDown) {
-      this.resetRefreshingState();
-    }
-  };
-
-  resetRefreshingState() {
-    this.setState({
-      watching: false,
-      canRefresh: false,
-      refreshing: false,
-      spinnerY: this.params.start,
-      spinnerProgress: 0,
-      contentShift: 0,
-    });
-  }
-
-  render() {
-    const {
-      children,
-      onRefresh,
-      isFetching,
-      platform,
-      window,
-      document,
-      scroll,
-      ...restProps
-    } = this.props;
-    const {
-      watching,
-      refreshing,
-      spinnerY,
-      spinnerProgress,
-      canRefresh,
-      touchDown,
-      contentShift,
-    } = this.state;
-
-    const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;
-    let contentTransform = "";
-
-    if (platform === IOS && refreshing && !touchDown) {
-      contentTransform = "translate3d(0, 100px, 0)";
-    } else if (platform === IOS && (contentShift || refreshing)) {
-      contentTransform = `translate3d(0, ${contentShift}px, 0)`;
-    }
-
-    return (
-      <TouchRootContext.Provider value={true}>
-        <Touch
-          {...restProps}
-          onStart={this.onTouchStart}
-          onMove={this.onTouchMove}
-          onEnd={this.onTouchEnd}
-          vkuiClass={classNames(getClassName("PullToRefresh", platform), {
-            "PullToRefresh--watching": watching,
-            "PullToRefresh--refreshing": refreshing,
-          })}
-        >
-          <FixedLayout vkuiClass="PullToRefresh__controls">
-            <PullToRefreshSpinner
-              style={{
-                transform: spinnerTransform,
-                WebkitTransform: spinnerTransform,
-                opacity: watching || refreshing || canRefresh ? 1 : 0,
-              }}
-              on={refreshing}
-              progress={refreshing ? undefined : spinnerProgress}
-            />
-          </FixedLayout>
-
-          <div
-            vkuiClass="PullToRefresh__content"
-            ref={this.contentRef}
-            style={{
-              transform: contentTransform,
-              WebkitTransform: contentTransform,
-            }}
-          >
-            {children}
-          </div>
-        </Touch>
-      </TouchRootContext.Provider>
-    );
-  }
-}
-
-// eslint-disable-next-line import/no-default-export
-export default withContext(
-  withPlatform(withDOM<PullToRefreshProps>(PullToRefresh)),
-  ScrollContext,
-  "scroll"
-);

package/src/components/PullToRefresh/PullToRefreshSpinner.tsx

@@ -1,78 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import "./PullToRefresh.css";
-
-function calcStrokeDashOffset(value: number, radius: number) {
-  const progress = value / 100;
-  return 2 * Math.PI * radius * (1 - progress);
-}
-
-export interface PullToRefreshSpinnerProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  size?: number;
-  strokeWidth?: number;
-  on?: boolean;
-  progress?: number;
-  "aria-label"?: string;
-}
-
-const PullToRefreshSpinner: React.FunctionComponent<
-  PullToRefreshSpinnerProps
-> = ({
-  on = true,
-  size = 24,
-  strokeWidth = 2.5,
-  style,
-  progress = 0,
-  "aria-label": ariaLabel = "Пожалуйста, подождите...",
-}: PullToRefreshSpinnerProps) => {
-  const radius = 0.5 * size - 0.5 * strokeWidth;
-  const dasharray = 2 * Math.PI * radius;
-  const circleCenter = 0.5 * size;
-
-  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);
-
-  return (
-    <div
-      vkuiClass={classNames("PullToRefresh__spinner", {
-        "PullToRefresh__spinner--on": on,
-      })}
-      style={style}
-      aria-label={on ? ariaLabel : undefined}
-    >
-      <svg
-        role="presentation"
-        vkuiClass="PullToRefresh__spinner-self"
-        style={{
-          width: size,
-          height: size,
-        }}
-        viewBox={`0 0 ${size} ${size}`}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g
-          style={{
-            width: size,
-            height: size,
-            transformOrigin: `${circleCenter}px ${circleCenter}px`,
-          }}
-        >
-          <circle
-            vkuiClass="PullToRefresh__spinner-path"
-            fill="none"
-            strokeDasharray={dasharray}
-            strokeDashoffset={dashoffset}
-            strokeWidth={strokeWidth}
-            strokeLinecap="round"
-            cx={circleCenter}
-            cy={circleCenter}
-            r={radius}
-          />
-        </g>
-      </svg>
-    </div>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default React.memo(PullToRefreshSpinner);

package/src/components/PullToRefresh/Readme.md

@@ -1,71 +0,0 @@
-Компонент для обновления контента жестом pull-to-refresh.
-Работает на тач-экранах.
-
-При достаточном вытягивании спиннера вызывается обязательное свойство-функция `onRefresh`.
-
-Необходимо при срабатывании `onRefresh` передать `isFetching={true}` компоненту, а затем после получения контента установить его как `false` для скрытия спиннера.
-
-> **Важно**
->
-> В компонент нельзя помещать любой контент с фиксированным позиционированием. PullToRefresh подходит прежде всего, например, для каких-либо простых списков.
-
-```jsx
-class Example extends React.Component {
-  constructor() {
-    let items = [];
-
-    for (let i = 0; i < 9; i++) {
-      items.push(this.getNewItem());
-    }
-
-    this.state = {
-      items: items,
-      fetching: false,
-    };
-
-    this.onRefresh = () => {
-      this.setState({ fetching: true });
-
-      setTimeout(() => {
-        this.setState({
-          items: [this.getNewItem(), ...this.state.items],
-          fetching: false,
-        });
-      }, getRandomInt(600, 2000));
-    };
-  }
-
-  getNewItem() {
-    return getRandomUser();
-  }
-
-  render() {
-    return (
-      <View activePanel="users">
-        <Panel id="users">
-          <PanelHeader>Пользователи</PanelHeader>
-
-          <PullToRefresh
-            onRefresh={this.onRefresh}
-            isFetching={this.state.fetching}
-          >
-            <Group>
-              <List>
-                {this.state.items.map(({ id, name, photo_100 }, i) => {
-                  return (
-                    <Cell key={i} before={<Avatar src={photo_100} />}>
-                      {name}
-                    </Cell>
-                  );
-                })}
-              </List>
-            </Group>
-          </PullToRefresh>
-        </Panel>
-      </View>
-    );
-  }
-}
-
-<Example />;
-```

package/src/components/Radio/Radio.css

@@ -1,187 +0,0 @@
-.Radio {
-  display: block;
-}
-
-.FormItem .Radio {
-  width: 100%;
-  box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
-}
-
-.Radio__input {
-  display: none;
-}
-
-.Radio__container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.Radio__input:disabled ~ .Radio__container {
-  opacity: 0.6;
-}
-
-.Radio__icon {
-  display: block;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  border-radius: 50%;
-  position: relative;
-  width: 22px;
-  height: 22px;
-  border: 2px solid var(--icon_tertiary);
-  margin-right: 14px;
-  transition: border-color 0.15s var(--ios-easing);
-}
-
-.Radio__input:checked ~ .Radio__container .Radio__icon {
-  border-color: var(--accent);
-}
-
-.Radio__icon::after {
-  position: absolute;
-  content: "";
-  display: block;
-  border-radius: 50%;
-  box-sizing: border-box;
-  width: 14px;
-  height: 14px;
-  left: 2px;
-  top: 2px;
-  transform: scale(0.3);
-  transition: transform 0.15s var(--ios-easing);
-}
-
-.Radio__input:checked ~ .Radio__container .Radio__icon::after {
-  background-color: var(--accent);
-  transform: scale(1);
-}
-
-.Radio__content {
-  display: block;
-  flex-grow: 1;
-  max-width: 100%;
-  color: var(--text_primary);
-}
-
-.Radio__description {
-  display: block;
-  color: var(--text_secondary);
-  margin-bottom: 12px;
-  margin-top: 2px;
-}
-
-.Radio__children {
-  margin-top: 12px;
-}
-
-.Radio__children:last-child {
-  margin-bottom: 12px;
-}
-
-/**
- * iOS
- */
-
-.Radio--ios {
-  padding: 0 12px;
-}
-
-/**
- * Android
- */
-
-.Radio--android {
-  padding: 0 16px;
-}
-
-/**
- * sizeY COMPACT
- */
-
-.Radio--sizeY-compact .Radio__children {
-  margin-top: 8px;
-}
-
-.Radio--sizeY-compact .Radio__children:last-child {
-  margin-bottom: 8px;
-}
-
-.Radio--sizeY-compact .Radio__description {
-  margin-bottom: 7px;
-}
-
-.Radio--sizeY-compact .Radio__icon {
-  width: 18px;
-  height: 18px;
-}
-
-.Radio--sizeY-compact .Radio__icon::after {
-  top: 1px;
-  left: 1px;
-  width: 12px;
-  height: 12px;
-}
-
-/**
- * VKCOM
- */
-
-.Radio--vkcom {
-  padding: 0 16px;
-}
-
-.Radio--vkcom .Radio__icon {
-  width: 16px;
-  height: 16px;
-  margin: 2px 14px 2px 2px;
-  border: 1px solid var(--icon_secondary);
-  border-radius: 50%;
-  transition: border-color 0.5s var(--ios-easing);
-}
-
-.Radio--vkcom .Radio__icon::after {
-  width: 8px;
-  height: 8px;
-  left: 3px;
-  top: 3px;
-  transform: scale(0.3);
-  transition: transform 0.5s var(--ios-easing);
-}
-
-.Radio--vkcom .Radio__input:disabled ~ .Radio__container {
-  opacity: 0.4;
-}
-
-.Radio--vkcom .Radio__input:checked ~ .Radio__container .Radio__icon {
-  border-color: var(--accent);
-}
-
-.Radio--vkcom .Radio__input:checked ~ .Radio__container .Radio__icon::after {
-  background-color: var(--accent);
-  transform: scale(1);
-}
-
-.Radio--vkcom .Radio__children {
-  margin-top: 8px;
-}
-
-.Radio--vkcom .Radio__children:last-child {
-  margin-bottom: 8px;
-}
-
-.Radio--vkcom .Radio__description {
-  margin-top: 1px;
-  margin-bottom: 8px;
-}
-
-/**
- * CMP:
- * RadioGroup
- */
-.RadioGroup .Radio {
-  flex: 1;
-  margin: 0;
-  box-sizing: border-box;
-}