@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/PullToRefresh/PullToRefresh.css

@@ -0,0 +1,98 @@
+.PullToRefresh {
+  flex-grow: 1;
+}
+
+.PullToRefresh--refreshing {
+  touch-action: none;
+  pointer-events: none;
+}
+
+.PullToRefresh__controls {
+  width: 100%;
+  pointer-events: none;
+  /* Прямо под шапкой, см https://github.com/VKCOM/VKUI/issues/1207 */
+  z-index: 9;
+}
+
+.PullToRefresh--ios .PullToRefresh__controls {
+  z-index: 0;
+}
+
+.PullToRefresh__spinner {
+  display: flex;
+  margin: auto;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  transition: transform 300ms cubic-bezier(0.1, 0, 0.25, 1),
+    opacity 220ms ease-out;
+  opacity: 0;
+}
+
+.PullToRefresh--ios .PullToRefresh__spinner {
+  color: var(--icon_outline_secondary);
+}
+
+.PullToRefresh--android .PullToRefresh__spinner,
+.PullToRefresh--vkcom .PullToRefresh__spinner {
+  background: var(--background_suggestions);
+  border-radius: 50%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  color: var(--accent);
+}
+
+.PullToRefresh--watching .PullToRefresh__spinner {
+  transition: opacity 220ms ease-out;
+}
+
+.PullToRefresh__spinner-self {
+  stroke: currentColor;
+}
+
+.PullToRefresh--ios.PullToRefresh--refreshing .PullToRefresh__spinner-self {
+  animation: vkui-PullToRefreshToRefreshing 380ms ease-out;
+}
+
+.PullToRefresh__spinner-path {
+  transform: rotate(-90deg);
+  transform-origin: center center;
+  transition: stroke-dashoffset 167ms ease-out;
+}
+
+.PullToRefresh--watching .PullToRefresh__spinner-path,
+.PullToRefresh--refreshing .PullToRefresh__spinner-path {
+  transition: none;
+}
+
+.PullToRefresh__spinner--on .PullToRefresh__spinner-path {
+  animation: vkui-rotator var(--duration) linear infinite;
+}
+
+.PullToRefresh__content {
+  overflow: hidden;
+  transition: transform 400ms var(--ios-easing);
+}
+
+.PullToRefresh--watching .PullToRefresh__content {
+  transition: none;
+}
+
+@keyframes vkui-PullToRefreshToRefreshing {
+  0% {
+    transform: scale(1);
+  }
+
+  30% {
+    transform: scale(0.6);
+  }
+
+  90% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

package/src/components/PullToRefresh/PullToRefresh.tsx

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

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

@@ -0,0 +1,71 @@
+Компонент для обновления контента жестом 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 />;
+```