@vkontakte/vkui 4.31.0 → 4.32.0

package/dist/cssm/components/PromoBanner/PromoBanner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"names":["React","Icon24Dismiss","Button","SimpleCell","Avatar","Caption","usePlatform","getClassName","warnOnce","warn","PromoBanner","props","platform","bannerData","onClose","restProps","ageRestrictions","parseInt","ageRestriction","process","env","NODE_ENV","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","advertisingLabel","isCloseButtonHidden","trackingLink","iconLink","title","ctaText","domain","length"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Icon24Dismiss } from \"@vkontakte/icons\";\nimport { Button } from \"../Button/Button\";\nimport SimpleCell from \"../SimpleCell/SimpleCell\";\nimport Avatar from \"../Avatar/Avatar\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./PromoBanner.css\";\n\ntype StatsType =\n  | \"playbackStarted\" // Начало показа\n  | \"click\"; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string; // eslint-disable-line camelcase\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n  /** @deprecated */\n  ageRestriction?: number;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\nconst warn = warnOnce(\"PromoBanner\");\nconst PromoBanner = (props: PromoBannerProps) => {\n  const platform = usePlatform();\n  const { bannerData = {}, onClose, ...restProps } = props;\n\n  const ageRestrictions =\n    bannerData.ageRestrictions != null\n      ? parseInt(bannerData.ageRestrictions)\n      : bannerData.ageRestriction;\n\n  if (bannerData.ageRestriction && process.env.NODE_ENV === \"development\") {\n    warn(\n      \"Свойство bannerData.ageRestriction устарело и будет удалено в 5.0.0. Используйте bannerData.ageRestrictions\"\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState(\"\");\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce(\n            (acc, item) => ({ ...acc, [item.type]: item.url }),\n            {}\n          )\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics]\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || \"\"),\n    [statsPixels.click]\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div vkuiClass={getClassName(\"PromoBanner\", platform)} {...restProps}>\n      <div vkuiClass=\"PromoBanner__head\">\n        <Caption vkuiClass=\"PromoBanner__label\">\n          {bannerData.advertisingLabel || \"Advertisement\"}\n        </Caption>\n        {ageRestrictions != null && (\n          <Caption vkuiClass=\"PromoBanner__age\">{ageRestrictions}+</Caption>\n        )}\n\n        {!props.isCloseButtonHidden && (\n          <div vkuiClass=\"PromoBanner__close\" onClick={props.onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          <Avatar\n            mode=\"image\"\n            size={48}\n            src={bannerData.iconLink}\n            alt={bannerData.title}\n          />\n        }\n        after={<Button mode=\"outline\">{bannerData.ctaText}</Button>}\n        description={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div vkuiClass=\"PromoBanner__pixels\">\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default PromoBanner;\n"],"file":"PromoBanner.js"}
+{"version":3,"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"names":["React","Icon24Dismiss","Button","SimpleCell","Avatar","Caption","usePlatform","getClassName","warnOnce","warn","PromoBanner","props","platform","bannerData","onClose","restProps","ageRestrictions","parseInt","ageRestriction","process","env","NODE_ENV","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","advertisingLabel","isCloseButtonHidden","trackingLink","iconLink","title","ctaText","domain","length"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Icon24Dismiss } from \"@vkontakte/icons\";\nimport { Button } from \"../Button/Button\";\nimport SimpleCell from \"../SimpleCell/SimpleCell\";\nimport Avatar from \"../Avatar/Avatar\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./PromoBanner.css\";\n\ntype StatsType =\n  | \"playbackStarted\" // Начало показа\n  | \"click\"; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string; // eslint-disable-line camelcase\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n  /** @deprecated */\n  ageRestriction?: number;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\nconst warn = warnOnce(\"PromoBanner\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n */\nconst PromoBanner = (props: PromoBannerProps) => {\n  const platform = usePlatform();\n  const { bannerData = {}, onClose, ...restProps } = props;\n\n  const ageRestrictions =\n    bannerData.ageRestrictions != null\n      ? parseInt(bannerData.ageRestrictions)\n      : bannerData.ageRestriction;\n\n  if (bannerData.ageRestriction && process.env.NODE_ENV === \"development\") {\n    warn(\n      \"Свойство bannerData.ageRestriction устарело и будет удалено в 5.0.0. Используйте bannerData.ageRestrictions\"\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState(\"\");\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce(\n            (acc, item) => ({ ...acc, [item.type]: item.url }),\n            {}\n          )\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics]\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || \"\"),\n    [statsPixels.click]\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div vkuiClass={getClassName(\"PromoBanner\", platform)} {...restProps}>\n      <div vkuiClass=\"PromoBanner__head\">\n        <Caption vkuiClass=\"PromoBanner__label\">\n          {bannerData.advertisingLabel || \"Advertisement\"}\n        </Caption>\n        {ageRestrictions != null && (\n          <Caption vkuiClass=\"PromoBanner__age\">{ageRestrictions}+</Caption>\n        )}\n\n        {!props.isCloseButtonHidden && (\n          <div vkuiClass=\"PromoBanner__close\" onClick={props.onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          <Avatar\n            mode=\"image\"\n            size={48}\n            src={bannerData.iconLink}\n            alt={bannerData.title}\n          />\n        }\n        after={<Button mode=\"outline\">{bannerData.ctaText}</Button>}\n        description={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div vkuiClass=\"PromoBanner__pixels\">\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default PromoBanner;\n"],"file":"PromoBanner.js"}

package/dist/cssm/components/PullToRefresh/PullToRefresh.css

@@ -1 +1,3 @@
-.vkuiPullToRefresh{flex-grow:1}.vkuiPullToRefresh--refreshing{touch-action:none;pointer-events:none}.vkuiPullToRefresh__controls{width:100%;pointer-events:none;z-index:9}.vkuiPullToRefresh--ios .vkuiPullToRefresh__controls{z-index:0}.vkuiPullToRefresh__spinner{display:flex;margin:auto;width:40px;height:40px;align-items:center;justify-content:center;box-sizing:border-box;transition:opacity 220ms ease-out,-webkit-transform 300ms cubic-bezier(.1,0,.25,1);transition:transform 300ms cubic-bezier(.1,0,.25,1),opacity 220ms ease-out;transition:transform 300ms cubic-bezier(.1,0,.25,1),opacity 220ms ease-out,-webkit-transform 300ms cubic-bezier(.1,0,.25,1);opacity:0}.vkuiPullToRefresh--ios .vkuiPullToRefresh__spinner{color:#99a2ad;color:var(--icon_outline_secondary)}.vkuiPullToRefresh--android .vkuiPullToRefresh__spinner,.vkuiPullToRefresh--vkcom .vkuiPullToRefresh__spinner{background:#fff;background:var(--background_suggestions);border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.2);color:#2688eb;color:var(--accent)}.vkuiPullToRefresh--watching .vkuiPullToRefresh__spinner{transition:opacity 220ms ease-out}.vkuiPullToRefresh__spinner-self{stroke:currentColor}.vkuiPullToRefresh--ios.vkuiPullToRefresh--refreshing .vkuiPullToRefresh__spinner-self{-webkit-animation:vkui-PullToRefreshToRefreshing 380ms ease-out;animation:vkui-PullToRefreshToRefreshing 380ms ease-out}.vkuiPullToRefresh__spinner-path{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:center center;transform-origin:center center;transition:stroke-dashoffset 167ms ease-out}.vkuiPullToRefresh--watching .vkuiPullToRefresh__spinner-path,.vkuiPullToRefresh--refreshing .vkuiPullToRefresh__spinner-path{transition:none}.vkuiPullToRefresh__spinner--on .vkuiPullToRefresh__spinner-path{-webkit-animation:vkui-rotator .7s linear infinite;animation:vkui-rotator .7s linear infinite;-webkit-animation:vkui-rotator var(--duration) linear infinite;animation:vkui-rotator var(--duration) linear infinite}.vkuiPullToRefresh__content{overflow:hidden;transition:-webkit-transform 400ms cubic-bezier(.36,.66,.04,1);transition:transform 400ms cubic-bezier(.36,.66,.04,1);transition:transform 400ms cubic-bezier(.36,.66,.04,1),-webkit-transform 400ms cubic-bezier(.36,.66,.04,1);transition:-webkit-transform 400ms var(--ios-easing);transition:transform 400ms var(--ios-easing);transition:transform 400ms var(--ios-easing),-webkit-transform 400ms var(--ios-easing)}.vkuiPullToRefresh--watching .vkuiPullToRefresh__content{transition:none}@-webkit-keyframes vkui-PullToRefreshToRefreshing{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.6);transform:scale(.6)}90%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes vkui-PullToRefreshToRefreshing{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.6);transform:scale(.6)}90%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}
+.vkuiPullToRefresh{flex-grow:1}.vkuiPullToRefresh--refreshing{touch-action:none;pointer-events:none}.vkuiPullToRefresh__controls{width:100%;pointer-events:none;z-index:9}.vkuiPullToRefresh--ios .vkuiPullToRefresh__controls{z-index:0}.vkuiPullToRefresh__spinner{display:flex;margin:auto;width:40px;height:40px;align-items:center;justify-content:center;box-sizing:border-box;transition:opacity 220ms ease-out,-webkit-transform 300ms cubic-bezier(.1,0,.25,1);transition:transform 300ms cubic-bezier(.1,0,.25,1),opacity 220ms ease-out;transition:transform 300ms cubic-bezier(.1,0,.25,1),opacity 220ms ease-out,-webkit-transform 300ms cubic-bezier(.1,0,.25,1);opacity:0;background:#fff;background:var(--background_suggestions,
+    var(--vkui--color_background_modal)
+  );border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.2);color:#2688eb;color:var(--accent, var(--vkui--color_icon_accent))}.vkuiPullToRefresh--ios .vkuiPullToRefresh__spinner{border-radius:none;box-shadow:none;background:0 0;color:#99a2ad;color:var(--icon_outline_secondary, var(--vkui--color_icon_medium))}.vkuiPullToRefresh--watching .vkuiPullToRefresh__spinner{transition:opacity 220ms ease-out}.vkuiPullToRefresh__spinner-self{stroke:currentColor}.vkuiPullToRefresh--ios.vkuiPullToRefresh--refreshing .vkuiPullToRefresh__spinner-self{-webkit-animation:vkui-PullToRefreshToRefreshing 380ms ease-out;animation:vkui-PullToRefreshToRefreshing 380ms ease-out}.vkuiPullToRefresh__spinner-path{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:center center;transform-origin:center center;transition:stroke-dashoffset 167ms ease-out}.vkuiPullToRefresh--watching .vkuiPullToRefresh__spinner-path,.vkuiPullToRefresh--refreshing .vkuiPullToRefresh__spinner-path{transition:none}.vkuiPullToRefresh__spinner--on .vkuiPullToRefresh__spinner-path{-webkit-animation:vkui-rotator .7s linear infinite;animation:vkui-rotator .7s linear infinite;-webkit-animation:vkui-rotator var(--duration) linear infinite;animation:vkui-rotator var(--duration) linear infinite}.vkuiPullToRefresh__content{overflow:hidden;transition:-webkit-transform 400ms cubic-bezier(.36,.66,.04,1);transition:transform 400ms cubic-bezier(.36,.66,.04,1);transition:transform 400ms cubic-bezier(.36,.66,.04,1),-webkit-transform 400ms cubic-bezier(.36,.66,.04,1);transition:-webkit-transform 400ms var(--ios-easing);transition:transform 400ms var(--ios-easing);transition:transform 400ms var(--ios-easing),-webkit-transform 400ms var(--ios-easing)}.vkuiPullToRefresh--watching .vkuiPullToRefresh__content{transition:none}@-webkit-keyframes vkui-PullToRefreshToRefreshing{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.6);transform:scale(.6)}90%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes vkui-PullToRefreshToRefreshing{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.6);transform:scale(.6)}90%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}

package/dist/cssm/components/PullToRefresh/PullToRefresh.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { TouchProps, TouchEvent } from "../Touch/Touch";
 import { AnyFunction, HasPlatform } from "../../types";
+import { DOMProps } from "../../lib/dom";
 import { ScrollContextInterface } from "../AppRoot/ScrollContext";
-import "./PullToRefresh.css";
-export interface PullToRefreshProps extends TouchProps, HasPlatform {
+import { TouchProps } from "../Touch/Touch";
+export interface PullToRefreshProps extends DOMProps, TouchProps, HasPlatform {
     /**
-     * Будет вызвана для обновления контента
+     * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)
      */
     onRefresh: AnyFunction;
     /**
@@ -14,24 +14,9 @@ export interface PullToRefreshProps extends TouchProps, HasPlatform {
     isFetching?: boolean;
     /** @ignore */
     scroll?: ScrollContextInterface;
+    children?: React.ReactNode;
 }
-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 declare type TouchEventHandler = (event: TouchEvent) => void;
-declare const _default: React.FC<Pick<PullToRefreshProps, "max" | "required" | "high" | "low" | "disabled" | "default" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "scroll" | "async" | "defer" | "manifest" | "color" | "content" | "size" | "wrap" | "multiple" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "srcLang" | "value" | "download" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster" | "challenge" | "keyType" | "keyParams" | "onStart" | "onStartX" | "onStartY" | "onMove" | "onMoveX" | "onMoveY" | "onLeave" | "onEnter" | "onEnd" | "onEndX" | "onEndY" | "usePointerHover" | "slideThreshold" | "useCapture" | "Component" | "getRootRef" | "noSlideClick" | "stopPropagation" | "onRefresh" | "isFetching">>;
-export default _default;
+/**
+ * @see https://vkcom.github.io/VKUI/#/PullToRefresh
+ */
+export declare const PullToRefresh: ({ children, isFetching, onRefresh, ...restProps }: PullToRefreshProps) => JSX.Element;

package/dist/cssm/components/PullToRefresh/PullToRefresh.js

@@ -1,27 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "onRefresh", "isFetching", "platform", "window", "document", "scroll"];
+var _excluded = ["children", "isFetching", "onRefresh"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
-import { Touch } from "../Touch/Touch";
-import TouchRootContext from "../Touch/TouchContext";
-import FixedLayout from "../FixedLayout/FixedLayout";
+import { useDOM } from "../../lib/dom";
 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 { canUseDOM, withDOM } from "../../lib/dom";
+import { IOS } from "../../lib/platform";
 import { runTapticImpactOccurred } from "../../lib/taptic";
-import { withContext } from "../../hoc/withContext";
-import { ScrollContext } from "../AppRoot/ScrollContext";
-import "./PullToRefresh.css";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { useScroll } from "../AppRoot/ScrollContext";
+import { Touch } from "../Touch/Touch";
+import FixedLayout from "../FixedLayout/FixedLayout";
+import { PullToRefreshSpinner } from "./PullToRefreshSpinner";
+import TouchRootContext from "../Touch/TouchContext";
+import { usePrevious } from "../../hooks/usePrevious";
+import { useTimeout } from "../../hooks/useTimeout";
 
 function cancelEvent(event) {
   if (!event) {
@@ -43,275 +39,216 @@ function cancelEvent(event) {
   return false;
 }
 
-var PullToRefresh = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(PullToRefresh, _React$PureComponent);
-
-  var _super = _createSuper(PullToRefresh);
-
-  function PullToRefresh(props) {
-    var _this;
-
-    _classCallCheck(this, PullToRefresh);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "params", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "contentRef", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "waitFetchingTimeout", undefined);
-
-    _defineProperty(_assertThisInitialized(_this), "onTouchStart", function (e) {
-      if (_this.state.refreshing) {
-        cancelEvent(e);
-      }
-
-      _this.setState({
-        touchDown: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onWindowTouchMove", function (event) {
-      if (_this.state.refreshing) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onTouchMove", function (e) {
-      var _this$props$scroll;
-
-      var isY = e.isY,
-          shiftY = e.shiftY;
-      var _this$params = _this.params,
-          start = _this$params.start,
-          max = _this$params.max;
-      var pageYOffset = (_this$props$scroll = _this.props.scroll) === null || _this$props$scroll === void 0 ? void 0 : _this$props$scroll.getScroll().y;
-      var _this$state = _this.state,
-          refreshing = _this$state.refreshing,
-          watching = _this$state.watching,
-          touchDown = _this$state.touchDown;
-
-      if (watching && touchDown) {
-        cancelEvent(e);
-        var positionMultiplier = _this.params.positionMultiplier;
-        var shift = Math.max(0, shiftY - _this.state.touchY);
-        var currentY = Math.max(start, Math.min(_this.params.maxY, start + shift * positionMultiplier));
-        var 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
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onTouchEnd", function () {
-      _this.setState({
-        watching: false,
-        touchDown: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onRefreshingFinish", function () {
-      if (!_this.state.touchDown) {
-        _this.resetRefreshingState();
-      }
-    });
-
-    _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
+var TOUCH_MOVE_EVENT_PARAMS = {
+  cancelable: true,
+  passive: false
+};
+/**
+ * @see https://vkcom.github.io/VKUI/#/PullToRefresh
+ */
+
+export var PullToRefresh = function PullToRefresh(_ref) {
+  var children = _ref.children,
+      isFetching = _ref.isFetching,
+      onRefresh = _ref.onRefresh,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var platform = usePlatform();
+  var scroll = useScroll();
+
+  var _useDOM = useDOM(),
+      document = _useDOM.document;
+
+  var prevIsFetching = usePrevious(isFetching);
+  var initParams = React.useMemo(function () {
+    return {
+      start: platform === IOS ? -10 : -45,
+      max: platform === IOS ? 50 : 80,
+      maxY: platform === IOS ? 400 : 80,
+      refreshing: platform === IOS ? 36 : 50,
+      positionMultiplier: platform === IOS ? 0.21 : 1
     };
-    _this.contentRef = /*#__PURE__*/React.createRef();
-    return _this;
-  }
-
-  _createClass(PullToRefresh, [{
-    key: "document",
-    get: function get() {
-      return this.props.document;
+  }, [platform]);
+
+  var _React$useState = React.useState(initParams.start),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      spinnerY = _React$useState2[0],
+      setSpinnerY = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      watching = _React$useState4[0],
+      setWatching = _React$useState4[1];
+
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      refreshing = _React$useState6[0],
+      setRefreshing = _React$useState6[1];
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      canRefresh = _React$useState8[0],
+      setCanRefresh = _React$useState8[1];
+
+  var _React$useState9 = React.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      touchDown = _React$useState10[0],
+      setTouchDown = _React$useState10[1];
+
+  var prevTouchDown = usePrevious(touchDown);
+  var touchY = React.useRef(0);
+
+  var _React$useState11 = React.useState(0),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      contentShift = _React$useState12[0],
+      setContentShift = _React$useState12[1];
+
+  var _React$useState13 = React.useState(0),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      spinnerProgress = _React$useState14[0],
+      setSpinnerProgress = _React$useState14[1];
+
+  var onWindowTouchMove = function onWindowTouchMove(event) {
+    if (refreshing) {
+      event.preventDefault();
+      event.stopPropagation();
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (canUseDOM) {
-        this.document.addEventListener("touchmove", this.onWindowTouchMove, {
-          // @ts-ignore
-          cancelable: true,
-          passive: false
-        });
-      }
+  };
+
+  useGlobalEventListener(document, "touchmove", onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);
+  var resetRefreshingState = React.useCallback(function () {
+    setWatching(false);
+    setCanRefresh(false);
+    setRefreshing(false);
+    setSpinnerY(initParams.start);
+    setSpinnerProgress(0);
+    setContentShift(0);
+  }, [initParams]);
+  var onRefreshingFinish = React.useCallback(function () {
+    if (!touchDown) {
+      resetRefreshingState();
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      // Здесь нужен последний аргумент с такими же параметрами, потому что
-      // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.
-      // https://github.com/VKCOM/VKUI/issues/444
-      if (canUseDOM) {
-        this.document.removeEventListener("touchmove", this.onWindowTouchMove, {
-          // @ts-ignore
-          cancelable: true,
-          passive: false
-        });
-      }
+  }, [touchDown, resetRefreshingState]);
 
-      if (this.waitFetchingTimeout) {
-        clearTimeout(this.waitFetchingTimeout);
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.isFetching && !this.props.isFetching) {
-        this.onRefreshingFinish();
-      }
+  var _useTimeout = useTimeout(onRefreshingFinish, 1000),
+      setWaitFetchingTimeout = _useTimeout.set,
+      clearWaitFetchingTimeout = _useTimeout.clear;
 
-      if (!prevProps.isFetching && this.props.isFetching && this.waitFetchingTimeout) {
-        clearTimeout(this.waitFetchingTimeout);
-      }
-
-      if (prevState.touchDown && !this.state.touchDown) {
-        var _this$state2 = this.state,
-            refreshing = _this$state2.refreshing,
-            canRefresh = _this$state2.canRefresh;
-
-        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
-          });
-        }
-      }
+  useIsomorphicLayoutEffect(function () {
+    if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {
+      onRefreshingFinish();
     }
-  }, {
-    key: "runRefreshing",
-    value: function 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");
-      }
+  }, [prevIsFetching, isFetching, onRefreshingFinish]);
+  useIsomorphicLayoutEffect(function () {
+    if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {
+      clearWaitFetchingTimeout();
     }
-  }, {
-    key: "resetRefreshingState",
-    value: function resetRefreshingState() {
-      this.setState({
-        watching: false,
-        canRefresh: false,
-        refreshing: false,
-        spinnerY: this.params.start,
-        spinnerProgress: 0,
-        contentShift: 0
+  }, [isFetching, prevIsFetching, clearWaitFetchingTimeout]);
+  var runRefreshing = React.useCallback(function () {
+    if (!refreshing && onRefresh) {
+      // cleanup if the consumer does not start fetching in 1s
+      setWaitFetchingTimeout();
+      setRefreshing(true);
+      setSpinnerY(function (prevSpinnerY) {
+        return platform === IOS ? prevSpinnerY : initParams.refreshing;
       });
+      onRefresh();
+      runTapticImpactOccurred("light");
+    }
+  }, [refreshing, onRefresh, setWaitFetchingTimeout, platform, initParams.refreshing]);
+  useIsomorphicLayoutEffect(function () {
+    if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {
+      if (!refreshing && canRefresh) {
+        runRefreshing();
+      } else if (refreshing && !isFetching) {
+        // only iOS can start refresh before gesture end
+        resetRefreshingState();
+      } else {
+        // refreshing && isFetching: refresh in progress
+        // OR !refreshing && !canRefresh: pull was not strong enough
+        setSpinnerY(refreshing ? initParams.refreshing : initParams.start);
+        setSpinnerProgress(0);
+        setContentShift(0);
+      }
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          onRefresh = _this$props.onRefresh,
-          isFetching = _this$props.isFetching,
-          platform = _this$props.platform,
-          window = _this$props.window,
-          document = _this$props.document,
-          scroll = _this$props.scroll,
-          restProps = _objectWithoutProperties(_this$props, _excluded);
+  }, [initParams, prevIsFetching, isFetching, onRefreshingFinish, prevTouchDown, touchDown, refreshing, canRefresh, runRefreshing]);
 
-      var _this$state3 = this.state,
-          watching = _this$state3.watching,
-          refreshing = _this$state3.refreshing,
-          spinnerY = _this$state3.spinnerY,
-          spinnerProgress = _this$state3.spinnerProgress,
-          canRefresh = _this$state3.canRefresh,
-          touchDown = _this$state3.touchDown,
-          contentShift = _this$state3.contentShift;
-      var spinnerTransform = "translate3d(0, ".concat(spinnerY, "px, 0)");
-      var contentTransform = "";
+  var onTouchStart = function onTouchStart(e) {
+    if (refreshing) {
+      cancelEvent(e);
+    }
 
-      if (platform === IOS && refreshing && !touchDown) {
-        contentTransform = "translate3d(0, 100px, 0)";
-      } else if (platform === IOS && (contentShift || refreshing)) {
-        contentTransform = "translate3d(0, ".concat(contentShift, "px, 0)");
+    setTouchDown(true);
+  };
+
+  var onTouchMove = function onTouchMove(e) {
+    var isY = e.isY,
+        shiftY = e.shiftY;
+    var start = initParams.start,
+        max = initParams.max;
+    var pageYOffset = scroll === null || scroll === void 0 ? void 0 : scroll.getScroll().y;
+
+    if (watching && touchDown) {
+      cancelEvent(e);
+      var positionMultiplier = initParams.positionMultiplier,
+          maxY = initParams.maxY;
+      var shift = Math.max(0, shiftY - touchY.current);
+      var currentY = Math.max(start, Math.min(maxY, start + shift * positionMultiplier));
+      var progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;
+      setSpinnerY(currentY);
+      setSpinnerProgress(Math.min(80, Math.max(0, progress)));
+      setCanRefresh(progress > 80);
+      setContentShift((currentY + 10) * 2.3);
+
+      if (progress > 85 && !refreshing && platform === IOS) {
+        runRefreshing();
       }
-
-      return createScopedElement(TouchRootContext.Provider, {
-        value: true
-      }, createScopedElement(Touch, _extends({}, restProps, {
-        onStart: this.onTouchStart,
-        onMove: this.onTouchMove,
-        onEnd: this.onTouchEnd // eslint-disable-next-line vkui/no-object-expression-in-arguments
-        ,
-        vkuiClass: classNames(getClassName("PullToRefresh", platform), {
-          "PullToRefresh--watching": watching,
-          "PullToRefresh--refreshing": refreshing
-        })
-      }), createScopedElement(FixedLayout, {
-        vkuiClass: "PullToRefresh__controls"
-      }, createScopedElement(PullToRefreshSpinner, {
-        style: {
-          transform: spinnerTransform,
-          WebkitTransform: spinnerTransform,
-          opacity: watching || refreshing || canRefresh ? 1 : 0
-        },
-        on: refreshing,
-        progress: refreshing ? undefined : spinnerProgress
-      })), createScopedElement("div", {
-        vkuiClass: "PullToRefresh__content",
-        ref: this.contentRef,
-        style: {
-          transform: contentTransform,
-          WebkitTransform: contentTransform
-        }
-      }, children)));
+    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {
+      cancelEvent(e);
+      touchY.current = shiftY;
+      setWatching(true);
+      setSpinnerY(start);
+      setSpinnerProgress(0);
     }
-  }]);
+  };
 
-  return PullToRefresh;
-}(React.PureComponent); // eslint-disable-next-line import/no-default-export
+  var onTouchEnd = function onTouchEnd() {
+    setWatching(false);
+    setTouchDown(false);
+  };
 
+  var spinnerTransform = "translate3d(0, ".concat(spinnerY, "px, 0)");
+  var contentTransform = "";
 
-export default withContext(withPlatform(withDOM(PullToRefresh)), ScrollContext, "scroll");
+  if (platform === IOS && refreshing && !touchDown) {
+    contentTransform = "translate3d(0, 100px, 0)";
+  } else if (platform === IOS && (contentShift || refreshing)) {
+    contentTransform = "translate3d(0, ".concat(contentShift, "px, 0)");
+  }
+
+  return createScopedElement(TouchRootContext.Provider, {
+    value: true
+  }, createScopedElement(Touch, _extends({}, restProps, {
+    onStart: onTouchStart,
+    onMove: onTouchMove,
+    onEnd: onTouchEnd,
+    vkuiClass: classNames("PullToRefresh", platform === IOS && "PullToRefresh--ios", watching && "PullToRefresh--watching", refreshing && "PullToRefresh--refreshing")
+  }), createScopedElement(FixedLayout, {
+    vkuiClass: "PullToRefresh__controls"
+  }, createScopedElement(PullToRefreshSpinner, {
+    style: {
+      transform: spinnerTransform,
+      WebkitTransform: spinnerTransform,
+      opacity: watching || refreshing || canRefresh ? 1 : 0
+    },
+    on: refreshing,
+    progress: refreshing ? undefined : spinnerProgress
+  })), createScopedElement("div", {
+    vkuiClass: "PullToRefresh__content",
+    style: {
+      transform: contentTransform,
+      WebkitTransform: contentTransform
+    }
+  }, children)));
+};
 //# sourceMappingURL=PullToRefresh.js.map