@vkontakte/vkui 4.22.1 → 4.25.0

package/src/components/Progress/Progress.css

@@ -7,6 +7,6 @@
 .Progress__in {
   height: 100%;
   border-radius: inherit;
-  transition: width .2s ease;
+  transition: width 0.2s ease;
   background: var(--accent);
 }

package/src/components/Progress/Progress.tsx

@@ -1,34 +1,49 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { HasRootRef } from '../../types';
-import { usePlatform } from '../../hooks/usePlatform';
-import './Progress.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./Progress.css";
 
-export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+export interface ProgressProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {
   value?: number;
 }
 
-const Progress: React.FC<ProgressProps> = ({ value, getRootRef, ...restProps }: ProgressProps) => {
+const PROGRESS_MIN_VALUE = 0;
+const PROGRESS_MAX_VALUE = 100;
+
+const Progress: React.FC<ProgressProps> = ({
+  value = 0,
+  getRootRef,
+  ...restProps
+}: ProgressProps) => {
   const platform = usePlatform();
 
+  const progress = Math.max(
+    PROGRESS_MIN_VALUE,
+    Math.min(value, PROGRESS_MAX_VALUE)
+  );
+
   return (
     <div
       aria-valuenow={value}
       {...restProps}
       role="progressbar"
-      aria-valuemin={0}
-      aria-valuemax={100}
+      aria-valuemin={PROGRESS_MIN_VALUE}
+      aria-valuemax={PROGRESS_MAX_VALUE}
       ref={getRootRef}
-      vkuiClass={getClassName('Progress', platform)}
+      vkuiClass={getClassName("Progress", platform)}
     >
       <div vkuiClass="Progress__bg" aria-hidden="true" />
-      <div vkuiClass="Progress__in" style={{ width: `${value}%` }} aria-hidden="true" />
+      <div
+        vkuiClass="Progress__in"
+        style={{ width: `${progress}%` }}
+        aria-hidden="true"
+      />
     </div>
   );
 };
 
-Progress.defaultProps = {
-  value: 0,
-};
-
+// eslint-disable-next-line import/no-default-export
 export default Progress;

package/src/components/PromoBanner/PromoBanner.css

@@ -32,7 +32,7 @@
 }
 
 .PromoBanner__close:active {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .PromoBanner__pixels {

package/src/components/PromoBanner/PromoBanner.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react';
-import { Icon24Dismiss } from '@vkontakte/icons';
-import Button from '../Button/Button';
-import SimpleCell from '../SimpleCell/SimpleCell';
-import Avatar from '../Avatar/Avatar';
-import Caption from '../Typography/Caption/Caption';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getClassName } from '../../helpers/getClassName';
-import './PromoBanner.css';
+import * as React from "react";
+import { Icon24Dismiss } from "@vkontakte/icons";
+import Button from "../Button/Button";
+import SimpleCell from "../SimpleCell/SimpleCell";
+import Avatar from "../Avatar/Avatar";
+import Caption from "../Typography/Caption/Caption";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import "./PromoBanner.css";
 
 type StatsType =
-  | 'playbackStarted' // Начало показа
-  | 'click'; // Клик по баннеру
+  | "playbackStarted" // Начало показа
+  | "click"; // Клик по баннеру
 
 type BannerData = {
   title?: string;
@@ -55,17 +55,23 @@ const PromoBanner = (props: PromoBannerProps) => {
       ? parseInt(bannerData.ageRestrictions)
       : bannerData.ageRestriction;
 
-  const [currentPixel, setCurrentPixel] = React.useState('');
+  const [currentPixel, setCurrentPixel] = React.useState("");
 
   const statsPixels = React.useMemo(
     () =>
       (bannerData.statistics
-        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})
+        ? bannerData.statistics.reduce(
+            (acc, item) => ({ ...acc, [item.type]: item.url }),
+            {}
+          )
         : {}) as Record<StatsType, string | void>,
-    [bannerData.statistics],
+    [bannerData.statistics]
   );
 
-  const onClick = React.useCallback(() => setCurrentPixel(statsPixels.click || ''), [statsPixels.click]);
+  const onClick = React.useCallback(
+    () => setCurrentPixel(statsPixels.click || ""),
+    [statsPixels.click]
+  );
 
   React.useEffect(() => {
     if (statsPixels.playbackStarted) {
@@ -74,16 +80,22 @@ const PromoBanner = (props: PromoBannerProps) => {
   }, [statsPixels.playbackStarted]);
 
   return (
-    <div vkuiClass={getClassName('PromoBanner', platform)} {...restProps}>
+    <div vkuiClass={getClassName("PromoBanner", platform)} {...restProps}>
       <div vkuiClass="PromoBanner__head">
-        <Caption weight="regular" level="1" vkuiClass="PromoBanner__label">{bannerData.advertisingLabel || 'Advertisement'}</Caption>
-        {ageRestrictions != null && <Caption weight="regular" level="1" vkuiClass="PromoBanner__age">{ageRestrictions}+</Caption>}
+        <Caption weight="regular" level="1" vkuiClass="PromoBanner__label">
+          {bannerData.advertisingLabel || "Advertisement"}
+        </Caption>
+        {ageRestrictions != null && (
+          <Caption weight="regular" level="1" vkuiClass="PromoBanner__age">
+            {ageRestrictions}+
+          </Caption>
+        )}
 
-        {!props.isCloseButtonHidden &&
+        {!props.isCloseButtonHidden && (
           <div vkuiClass="PromoBanner__close" onClick={props.onClose}>
             <Icon24Dismiss />
           </div>
-        }
+        )}
       </div>
       <SimpleCell
         href={bannerData.trackingLink}
@@ -91,7 +103,12 @@ const PromoBanner = (props: PromoBannerProps) => {
         rel="nofollow noopener noreferrer"
         target="_blank"
         before={
-          <Avatar mode="image" size={48} src={bannerData.iconLink} alt={bannerData.title} />
+          <Avatar
+            mode="image"
+            size={48}
+            src={bannerData.iconLink}
+            alt={bannerData.title}
+          />
         }
         after={<Button mode="outline">{bannerData.ctaText}</Button>}
         description={bannerData.domain}
@@ -99,13 +116,14 @@ const PromoBanner = (props: PromoBannerProps) => {
         {bannerData.title}
       </SimpleCell>
 
-      {currentPixel.length > 0 &&
+      {currentPixel.length > 0 && (
         <div vkuiClass="PromoBanner__pixels">
           <img src={currentPixel} alt="" />
         </div>
-      }
+      )}
     </div>
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default PromoBanner;

package/src/components/PromoBanner/Readme.md

@@ -1,17 +1,18 @@
 ```jsx
 const promoBannerProps = {
-  title: 'Заголовок',
-  domain: 'vk.com',
-  trackingLink: 'https://vk.com',
-  ctaText: 'Перейти',
-  advertisingLabel: 'Реклама',
-  iconLink: 'https://sun9-7.userapi.com/c846420/v846420985/1526c3/ISX7VF8NjZk.jpg',
-  description: 'Описание рекламы',
+  title: "Заголовок",
+  domain: "vk.com",
+  trackingLink: "https://vk.com",
+  ctaText: "Перейти",
+  advertisingLabel: "Реклама",
+  iconLink:
+    "https://sun9-7.userapi.com/c846420/v846420985/1526c3/ISX7VF8NjZk.jpg",
+  description: "Описание рекламы",
   ageRestrictions: "14+",
   statistics: [
-    { url: '', type: 'playbackStarted' },
-    { url: '', type: 'click' }
-  ]
+    { url: "", type: "playbackStarted" },
+    { url: "", type: "click" },
+  ],
 };
 
 <View activePanel="promo">
@@ -20,5 +21,5 @@ const promoBannerProps = {
       <PromoBanner bannerData={promoBannerProps} />
     </FixedLayout>
   </Panel>
-</View>
+</View>;
 ```

package/src/components/PullToRefresh/PullToRefresh.css

@@ -26,7 +26,8 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  transition: transform 300ms cubic-bezier(.1, 0, .25, 1), opacity 220ms ease-out;
+  transition: transform 300ms cubic-bezier(0.1, 0, 0.25, 1),
+    opacity 220ms ease-out;
   opacity: 0;
 }
 
@@ -38,7 +39,7 @@
 .PullToRefresh--vkcom .PullToRefresh__spinner {
   background: var(--background_suggestions);
   border-radius: 50%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   color: var(--accent);
 }
 
@@ -84,7 +85,7 @@
   }
 
   30% {
-    transform: scale(.6);
+    transform: scale(0.6);
   }
 
   90% {

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -1,18 +1,21 @@
-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';
+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 {
   /**
@@ -35,7 +38,7 @@ export interface PullToRefreshState {
   touchDown: boolean;
 
   touchY: number;
-  spinnerY: PullToRefreshParams['start'];
+  spinnerY: PullToRefreshParams["start"];
   spinnerProgress: number;
   contentShift: number;
 }
@@ -66,7 +69,10 @@ function cancelEvent(event: any) {
   return false;
 }
 
-class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, PullToRefreshState> {
+class PullToRefresh extends React.PureComponent<
+  PullToRefreshProps & DOMProps,
+  PullToRefreshState
+> {
   constructor(props: PullToRefreshProps) {
     super(props);
 
@@ -74,9 +80,11 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
       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,
+      refreshing:
+        props.platform === ANDROID || props.platform === VKCOM ? 50 : 36,
 
-      positionMultiplier: props.platform === ANDROID || props.platform === VKCOM ? 1 : 0.21,
+      positionMultiplier:
+        props.platform === ANDROID || props.platform === VKCOM ? 1 : 0.21,
     };
 
     this.state = {
@@ -97,7 +105,7 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
 
   params: PullToRefreshParams;
   contentRef: React.RefObject<HTMLDivElement>;
-  waitFetchingTimeout: ReturnType<typeof setTimeout>;
+  waitFetchingTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
 
   get document() {
     return this.props.document;
@@ -105,7 +113,7 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
 
   componentDidMount() {
     if (canUseDOM) {
-      this.document.addEventListener('touchmove', this.onWindowTouchMove, {
+      this.document!.addEventListener("touchmove", this.onWindowTouchMove, {
         // @ts-ignore
         cancelable: true,
         passive: false,
@@ -118,20 +126,29 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
     // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.
     // https://github.com/VKCOM/VKUI/issues/444
     if (canUseDOM) {
-      this.document.removeEventListener('touchmove', this.onWindowTouchMove, {
+      this.document!.removeEventListener("touchmove", this.onWindowTouchMove, {
         // @ts-ignore
         cancelable: true,
         passive: false,
       });
     }
-    clearTimeout(this.waitFetchingTimeout);
+    if (this.waitFetchingTimeout) {
+      clearTimeout(this.waitFetchingTimeout);
+    }
   }
 
-  componentDidUpdate(prevProps: PullToRefreshProps, prevState: PullToRefreshState) {
+  componentDidUpdate(
+    prevProps: PullToRefreshProps,
+    prevState: PullToRefreshState
+  ) {
     if (prevProps.isFetching && !this.props.isFetching) {
       this.onRefreshingFinish();
     }
-    if (!prevProps.isFetching && this.props.isFetching) {
+    if (
+      !prevProps.isFetching &&
+      this.props.isFetching &&
+      this.waitFetchingTimeout
+    ) {
       clearTimeout(this.waitFetchingTimeout);
     }
 
@@ -171,7 +188,7 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
   onTouchMove: TouchEventHandler = (e: TouchEvent) => {
     const { isY, shiftY } = e;
     const { start, max } = this.params;
-    const pageYOffset = this.props.scroll.getScroll().y;
+    const pageYOffset = this.props.scroll?.getScroll().y;
 
     const { refreshing, watching, touchDown } = this.state;
 
@@ -182,8 +199,12 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
 
       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;
+      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,
@@ -195,7 +216,13 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
       if (progress > 85 && !refreshing && this.props.platform === IOS) {
         this.runRefreshing();
       }
-    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {
+    } else if (
+      isY &&
+      pageYOffset === 0 &&
+      shiftY > 0 &&
+      !refreshing &&
+      touchDown
+    ) {
       cancelEvent(e);
 
       this.setState({
@@ -220,11 +247,14 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
       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,
+        spinnerY:
+          this.props.platform === ANDROID || this.props.platform === VKCOM
+            ? this.params.refreshing
+            : this.state.spinnerY,
       });
 
       this.props.onRefresh();
-      runTapticImpactOccurred('light');
+      runTapticImpactOccurred("light");
     }
   }
 
@@ -246,14 +276,31 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
   }
 
   render() {
-    const { children, onRefresh, isFetching, platform, window, document, scroll, ...restProps } = this.props;
-    const { watching, refreshing, spinnerY, spinnerProgress, canRefresh, touchDown, contentShift } = this.state;
+    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 = '';
+    let contentTransform = "";
 
     if (platform === IOS && refreshing && !touchDown) {
-      contentTransform = 'translate3d(0, 100px, 0)';
+      contentTransform = "translate3d(0, 100px, 0)";
     } else if (platform === IOS && (contentShift || refreshing)) {
       contentTransform = `translate3d(0, ${contentShift}px, 0)`;
     }
@@ -265,9 +312,9 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
           onStart={this.onTouchStart}
           onMove={this.onTouchMove}
           onEnd={this.onTouchEnd}
-          vkuiClass={classNames(getClassName('PullToRefresh', platform), {
-            'PullToRefresh--watching': watching,
-            'PullToRefresh--refreshing': refreshing,
+          vkuiClass={classNames(getClassName("PullToRefresh", platform), {
+            "PullToRefresh--watching": watching,
+            "PullToRefresh--refreshing": refreshing,
           })}
         >
           <FixedLayout vkuiClass="PullToRefresh__controls">
@@ -278,7 +325,7 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
                 opacity: watching || refreshing || canRefresh ? 1 : 0,
               }}
               on={refreshing}
-              progress={refreshing ? null : spinnerProgress}
+              progress={refreshing ? undefined : spinnerProgress}
             />
           </FixedLayout>
 
@@ -298,6 +345,9 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
   }
 }
 
+// eslint-disable-next-line import/no-default-export
 export default withContext(
   withPlatform(withDOM<PullToRefreshProps>(PullToRefresh)),
-  ScrollContext, 'scroll');
+  ScrollContext,
+  "scroll"
+);

package/src/components/PullToRefresh/PullToRefreshSpinner.tsx

@@ -1,27 +1,30 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import './PullToRefresh.css';
+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> {
+export interface PullToRefreshSpinnerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
   size?: number;
   strokeWidth?: number;
   on?: boolean;
   progress?: number;
-  'aria-label'?: string;
+  "aria-label"?: string;
 }
 
-const PullToRefreshSpinner: React.FunctionComponent<PullToRefreshSpinnerProps> = ({
-  on,
-  progress,
-  size,
-  strokeWidth,
+const PullToRefreshSpinner: React.FunctionComponent<
+  PullToRefreshSpinnerProps
+> = ({
+  on = true,
+  size = 24,
+  strokeWidth = 2.5,
   style,
-  ...restProps
+  progress = 0,
+  "aria-label": ariaLabel = "Пожалуйста, подождите...",
 }: PullToRefreshSpinnerProps) => {
   const radius = 0.5 * size - 0.5 * strokeWidth;
   const dasharray = 2 * Math.PI * radius;
@@ -31,11 +34,11 @@ const PullToRefreshSpinner: React.FunctionComponent<PullToRefreshSpinnerProps> =
 
   return (
     <div
-      vkuiClass={classNames('PullToRefresh__spinner', {
-        'PullToRefresh__spinner--on': on,
+      vkuiClass={classNames("PullToRefresh__spinner", {
+        "PullToRefresh__spinner--on": on,
       })}
       style={style}
-      aria-label={on ? restProps['aria-label'] : undefined}
+      aria-label={on ? ariaLabel : undefined}
     >
       <svg
         role="presentation"
@@ -71,12 +74,5 @@ const PullToRefreshSpinner: React.FunctionComponent<PullToRefreshSpinnerProps> =
   );
 };
 
-PullToRefreshSpinner.defaultProps = {
-  'size': 24,
-  'strokeWidth': 2.5,
-  'on': true,
-  'progress': null,
-  'aria-label': 'Пожалуйста, подождите...',
-};
-
+// eslint-disable-next-line import/no-default-export
 export default React.memo(PullToRefreshSpinner);

package/src/components/PullToRefresh/Readme.md

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