@vkontakte/vkui 4.15.0 → 4.16.2

package/src/components/SimpleCheckbox/SimpleCheckbox.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import Tappable, { ACTIVE_EFFECT_DELAY } from '../Tappable/Tappable';
+import { getClassName } from '../../helpers/getClassName';
+import { classNames } from '../../lib/classNames';
+import { IOS, VKCOM } from '../../lib/platform';
+
+import { Icon20CheckBoxOn, Icon20CheckBoxOff, Icon24CheckBoxOn, Icon24CheckBoxOff, Icon20CheckBoxIndetermanate } from '@vkontakte/icons';
+
+import { HasRef, HasRootRef } from '../../types';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useExternRef } from '../../hooks/useExternRef';
+import { SizeType } from '../../hoc/withAdaptivity';
+import { warnOnce } from '../../lib/warnOnce';
+
+import './SimpleCheckbox.css';
+
+const warn = warnOnce('SimpleCheckbox');
+const IS_DEV = process.env.NODE_ENV === 'development';
+
+export interface SimpleCheckboxProps extends
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HasRootRef<HTMLLabelElement>,
+  HasRef<HTMLInputElement> {
+  indeterminate?: boolean;
+  defaultIndeterminate?: boolean;
+}
+
+export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (props: SimpleCheckboxProps) => {
+  const { className, style, getRootRef, getRef, indeterminate, defaultIndeterminate, onChange, ...restProps } = props;
+  const { sizeY } = useAdaptivity();
+  const platform = usePlatform();
+  const inputRef = useExternRef(getRef);
+
+  React.useEffect(() => {
+    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
+
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminateValue;
+    }
+  }, [indeterminate]);
+
+  const handleChange: SimpleCheckboxProps['onChange'] = React.useCallback((event) => {
+    if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined) {
+      inputRef.current.indeterminate = false;
+    }
+    if (indeterminate !== undefined) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+    onChange && onChange(event);
+  }, [onChange, indeterminate, restProps.checked]);
+
+  if (IS_DEV) {
+    if (defaultIndeterminate && restProps.defaultChecked) {
+      warn('defaultIndeterminate and defaultChecked cannot be true at the same time');
+    }
+
+    if (indeterminate && restProps.checked) {
+      warn('indeterminate and checked cannot be true at the same time');
+    }
+  }
+
+  return (
+    <Tappable
+      Component="label"
+      vkuiClass={classNames(
+        getClassName('SimpleCheckbox', platform),
+        `SimpleCheckbox--sizeY-${sizeY}`,
+      )}
+      className={className}
+      style={style}
+      disabled={restProps.disabled}
+      activeMode={platform === VKCOM ? 'SimpleCheckbox--active' : 'background'}
+      hoverMode={platform === VKCOM ? 'SimpleCheckbox--hover' : 'background'}
+      activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}
+      getRootRef={getRootRef}
+    >
+      <input {...restProps} onChange={handleChange} type="checkbox" vkuiClass="SimpleCheckbox__input" ref={inputRef} />
+      <div vkuiClass="SimpleCheckbox__container">
+        <div vkuiClass="SimpleCheckbox__icon SimpleCheckbox__icon--on">
+          {sizeY === SizeType.COMPACT || platform === VKCOM
+            ? <Icon20CheckBoxOn />
+            : <Icon24CheckBoxOn />
+          }
+        </div>
+        <div vkuiClass="SimpleCheckbox__icon SimpleCheckbox__icon--off">
+          {sizeY === SizeType.COMPACT || platform === VKCOM
+            ? <Icon20CheckBoxOff />
+            : <Icon24CheckBoxOff />
+          }
+        </div>
+        <div vkuiClass="SimpleCheckbox__icon SimpleCheckbox__icon--indeterminate">
+          <Icon20CheckBoxIndetermanate
+            width={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}
+            height={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}
+          />
+        </div>
+      </div>
+      {platform === VKCOM && <div aria-hidden={true} vkuiClass="SimpleCheckbox__activeShadow" />}
+      {platform === VKCOM && <div aria-hidden={true} vkuiClass="SimpleCheckbox__hoverShadow" />}
+    </Tappable>
+  );
+};
+
+export default SimpleCheckbox;

package/src/components/Snackbar/Snackbar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Touch, { TouchEvent } from '../Touch/Touch';
+import { Touch, TouchEvent } from '../Touch/Touch';
 import { classNames } from '../../lib/classNames';
 import { HasPlatform } from '../../types';
 import { getClassName } from '../../helpers/getClassName';

package/src/components/Tappable/Tappable.tsx

@@ -1,18 +1,19 @@
 import * as React from 'react';
-import Touch, { TouchEvent, TouchEventHandler, TouchProps } from '../Touch/Touch';
+import { Touch, TouchEvent, TouchEventHandler, TouchProps } from '../Touch/Touch';
 import TouchRootContext from '../Touch/TouchContext';
 import { classNames } from '../../lib/classNames';
 import { getClassName } from '../../helpers/getClassName';
 import { ANDROID } from '../../lib/platform';
 import { getOffsetRect } from '../../lib/offset';
 import { coordX, coordY, VKUITouchEvent, VKUITouchEventHander } from '../../lib/touch';
-import { HasPlatform, HasRootRef, Ref } from '../../types';
+import { HasPlatform, HasRootRef } from '../../types';
 import { withPlatform } from '../../hoc/withPlatform';
 import { hasHover } from '@vkontakte/vkjs';
 import { setRef } from '../../lib/utils';
 import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
 import { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';
 import { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';
+import { useTimeout } from '../../hooks/useTimeout';
 import './Tappable.css';
 
 export interface TappableProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasPlatform, AdaptivityProps {
@@ -44,13 +45,14 @@ export interface TappableProps extends React.AllHTMLAttributes<HTMLElement>, Has
   focusVisibleMode?: FocusVisibleMode;
 }
 
+interface Wave {
+  x: number;
+  y: number;
+  id: string;
+}
+
 export interface TappableState {
-  clicks?: {
-    [index: string]: {
-      x: number;
-      y: number;
-    };
-  };
+  clicks?: Wave[];
   hovered?: boolean;
   active?: boolean;
   ts?: number;
@@ -59,7 +61,7 @@ export interface TappableState {
 }
 
 export interface RootComponentProps extends TouchProps {
-  ref?: Ref<HTMLElement>;
+  ref?: React.Ref<HTMLElement>;
 }
 
 export interface StorageItem {
@@ -101,7 +103,7 @@ class Tappable extends React.Component<TappableProps, TappableState> {
     super(props);
     this.id = Math.round(Math.random() * 1e8).toString(16);
     this.state = {
-      clicks: {},
+      clicks: [],
       active: false,
       ts: null,
       hasHover: props.hasHover,
@@ -120,8 +122,6 @@ class Tappable extends React.Component<TappableProps, TappableState> {
 
   timeout: ReturnType<typeof setTimeout>;
 
-  wavesTimeout: ReturnType<typeof setTimeout>;
-
   static defaultProps = {
     stopPropagation: false,
     disabled: false,
@@ -240,27 +240,10 @@ class Tappable extends React.Component<TappableProps, TappableState> {
       const { top, left } = getOffsetRect(this.container);
       const x = coordX(e) - left;
       const y = coordY(e) - top;
-      const key = 'wave' + Date.now().toString();
-
-      this.setState((state: TappableState): TappableState => {
-        return {
-          clicks: {
-            ...state.clicks,
-            [key]: {
-              x,
-              y,
-            },
-          },
-        };
-      });
 
-      this.wavesTimeout = setTimeout(() => {
-        this.setState((state: TappableState): TappableState => {
-          let clicks = { ...state.clicks };
-          delete clicks[key];
-          return { clicks };
-        });
-      }, 225);
+      this.setState({
+        clicks: [...this.state.clicks, { x, y, id: Date.now().toString() }],
+      });
     }
   };
 
@@ -323,8 +306,6 @@ class Tappable extends React.Component<TappableProps, TappableState> {
 
       delete storage[this.id];
     }
-
-    clearTimeout(this.wavesTimeout);
   }
 
   componentDidUpdate(prevProps: TappableProps) {
@@ -336,6 +317,10 @@ class Tappable extends React.Component<TappableProps, TappableState> {
     }
   }
 
+  removeWave(id: Wave['id']) {
+    this.setState({ clicks: this.state.clicks.filter((c) => c.id !== id) });
+  }
+
   render() {
     const { clicks, active, hovered, hasHover, hasActive } = this.state;
 
@@ -440,12 +425,12 @@ class Tappable extends React.Component<TappableProps, TappableState> {
                     </TappableContext.Provider>
                     {platform === ANDROID && !hasMouse && hasActive && activeMode === 'background' && (
                       <span aria-hidden="true" vkuiClass="Tappable__waves">
-                        {Object.keys(clicks).map((k: string) => (
-                          <span vkuiClass="Tappable__wave" style={{ top: clicks[k].y, left: clicks[k].x }} key={k} />
+                        {clicks.map((wave) => (
+                          <Wave {...wave} key={wave.id} onClear={() => this.removeWave(wave.id)} />
                         ))}
                       </span>
                     )}
-                    {hasHover && <span aria-hidden="true" vkuiClass="Tappable__hoverShadow" />}
+                    {hasHover && hoverMode === 'background' && <span aria-hidden="true" vkuiClass="Tappable__hoverShadow" />}
                     {!restProps.disabled && <FocusVisible mode={focusVisibleMode} />}
                   </RootComponent>
                 );
@@ -459,3 +444,9 @@ class Tappable extends React.Component<TappableProps, TappableState> {
 }
 
 export default withAdaptivity(withPlatform(Tappable), { sizeX: true, hasMouse: true });
+
+function Wave({ x, y, onClear }: Wave & { onClear: VoidFunction }) {
+  const timeout = useTimeout(onClear, 225);
+  React.useEffect(() => timeout.set(), []);
+  return <span vkuiClass="Tappable__wave" style={{ top: y, left: x }} />;
+}

package/src/components/Touch/Touch.tsx

@@ -1,15 +1,10 @@
 import * as React from 'react';
-import {
-  getSupportedEvents,
-  coordX,
-  coordY,
-  touchEnabled,
-  VKUITouchEvent,
-  VKUITouchEventHander,
-} from '../../lib/touch';
+import { getSupportedEvents, coordX, coordY, touchEnabled, VKUITouchEvent } from '../../lib/touch';
 import { HasRootRef } from '../../types';
-import { canUseDOM, DOMProps, withDOM } from '../../lib/dom';
-import { setRef, noop } from '../../lib/utils';
+import { useDOM } from '../../lib/dom';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useEventListener } from '../../hooks/useEventListener';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 
 export interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {
   onEnter?(outputEvent: MouseEvent): void;
@@ -52,110 +47,58 @@ export type TouchEventHandler = (e: TouchEvent) => void;
 export type ClickHandler = (e: React.MouseEvent<HTMLElement>) => void;
 export type DragHandler = (e: React.DragEvent<HTMLElement>) => void;
 
-const events = getSupportedEvents();
-
-class Touch extends React.Component<TouchProps & DOMProps> {
-  didSlide = false;
-  gesture: Partial<Gesture> = {};
-  container: HTMLElement;
-
-  static defaultProps: TouchProps = {
-    Component: 'div',
-    children: '',
-    useCapture: false,
-    noSlideClick: false,
-  };
-
-  get document() {
-    return this.props.document;
-  }
-
-  componentDidMount() {
-    if (canUseDOM) {
-      this.container.addEventListener(events[0], this.onStart, { capture: this.props.useCapture, passive: false });
-      touchEnabled && this.subscribe(this.container);
-
-      this.container.addEventListener('mouseenter', this.onEnter, { capture: this.props.useCapture, passive: true });
-      this.container.addEventListener('mouseleave', this.onLeave, { capture: this.props.useCapture, passive: true });
-    }
-  }
-
-  componentWillUnmount() {
-    this.container.removeEventListener(events[0], this.onStart);
-    this.unsubscribe();
-
-    this.container.removeEventListener('mouseenter', this.onEnter);
-    this.container.removeEventListener('mouseleave', this.onLeave);
-  }
-
-  /**
-   * Обработчик событий mouseenter
-   *
-   * @param {Object} e Браузерное событие
-   * @return {void}
-   */
-  onEnter = (e: MouseEvent) => {
-    if (this.props.onEnter) {
-      this.props.onEnter(e);
-    }
-  };
-
-  /**
-   * Обработчик событий mouseleave
-   *
-   * @param {Object} e Браузерное событие
-   * @param {boolean} simulated флаг, с которым обработчик был вызван симулятивно
-   * @return {void}
-   */
-  onLeave = (e: MouseEvent) => {
-    if (this.props.onLeave) {
-      this.props.onLeave(e);
-    }
-  };
-
-  /**
-   * Обработчик событий touchstart
-   *
-   * @param {Object} e Браузерное событие
-   * @return {void}
-   */
-  onStart: VKUITouchEventHander = (e: VKUITouchEvent) => {
-    this.gesture = {
+export const Touch: React.FC<TouchProps> = ({
+  onStart,
+  onStartX,
+  onStartY,
+  onMove: _onMove,
+  onMoveX,
+  onMoveY,
+  onLeave,
+  onEnter,
+  onEnd: _onEnd,
+  onEndX,
+  onEndY,
+  onClickCapture,
+  useCapture = false,
+  Component = 'div',
+  getRootRef,
+  noSlideClick = false,
+  ...restProps
+}) => {
+  const { document } = useDOM();
+  const events = React.useMemo(getSupportedEvents, []);
+  const didSlide = React.useRef(false);
+  const gesture = React.useRef<Partial<Gesture>>({});
+  const handle = (e: any, handers: any[]) => handers.forEach((cb) => {
+    cb && cb({ ...gesture.current, originalEvent: e });
+  });
+
+  const mouseEnterHandler = useEventListener('mouseenter', onEnter);
+  const mouseLeaveHandler = useEventListener('mouseleave', onLeave);
+  const startHandler = useEventListener(events[0], (e: VKUITouchEvent) => {
+    gesture.current = {
       startX: coordX(e),
       startY: coordY(e),
       startT: new Date(),
       isPressed: true,
     };
 
-    // Вызываем нужные колбеки из props
-    const outputEvent = {
-      ...this.gesture,
-      originalEvent: e,
-    };
-
-    if (this.props.onStart) {
-      this.props.onStart(outputEvent);
-    }
-
-    if (this.props.onStartX) {
-      this.props.onStartX(outputEvent);
-    }
-
-    if (this.props.onStartY) {
-      this.props.onStartY(outputEvent);
-    }
+    handle(e, [onStart, onStartX, onStartY]);
+    !touchEnabled() && subscribe(document);
+  }, { capture: useCapture, passive: false });
+  const containerRef = useExternRef(getRootRef);
 
-    !touchEnabled && this.subscribe(this.document);
-  };
+  useIsomorphicLayoutEffect(() => {
+    const el = containerRef.current;
+    mouseEnterHandler.add(el);
+    mouseLeaveHandler.add(el);
+    startHandler.add(el);
+    touchEnabled() && subscribe(el);
+  }, [Component]);
 
-  /**
-   * Обработчик событий touchmove
-   *
-   * @param {Object} e Браузерное событие
-   * @return {void}
-   */
-  onMove: VKUITouchEventHander = (e: VKUITouchEvent) => {
-    const { isPressed, isX, isY, startX, startY } = this.gesture;
+  function onMove(e: VKUITouchEvent) {
+    const { isPressed, isX, isY, startX, startY } = gesture.current;
 
     if (isPressed) {
       // смещения
@@ -168,116 +111,71 @@ class Touch extends React.Component<TouchProps & DOMProps> {
 
       // Если определяем мультитач, то прерываем жест
       if (!!e.touches && e.touches.length > 1) {
-        return this.onEnd(e);
+        return onEnd(e);
       }
 
       // если мы ещё не определились
       if (!isX && !isY) {
-        let willBeX = shiftXAbs >= 5 && shiftXAbs > shiftYAbs;
-        let willBeY = shiftYAbs >= 5 && shiftYAbs > shiftXAbs;
-        let willBeSlidedX = willBeX && !!this.props.onMoveX || !!this.props.onMove;
-        let willBeSlidedY = willBeY && !!this.props.onMoveY || !!this.props.onMove;
-
-        this.gesture.isY = willBeY;
-        this.gesture.isX = willBeX;
-        this.gesture.isSlideX = willBeSlidedX;
-        this.gesture.isSlideY = willBeSlidedY;
-        this.gesture.isSlide = willBeSlidedX || willBeSlidedY;
+        const willBeX = shiftXAbs >= 5 && shiftXAbs > shiftYAbs;
+        const willBeY = shiftYAbs >= 5 && shiftYAbs > shiftXAbs;
+        const willBeSlidedX = willBeX && (!!onMoveX || !!_onMove);
+        const willBeSlidedY = willBeY && (!!onMoveY || !!_onMove);
+
+        Object.assign(gesture.current, {
+          isY: willBeY,
+          isX: willBeX,
+          isSlideX: willBeSlidedX,
+          isSlideY: willBeSlidedY,
+          isSlide: willBeSlidedX || willBeSlidedY,
+        });
       }
 
-      if (this.gesture.isSlide) {
-        this.gesture.shiftX = shiftX;
-        this.gesture.shiftY = shiftY;
-        this.gesture.shiftXAbs = shiftXAbs;
-        this.gesture.shiftYAbs = shiftYAbs;
-
-        // Вызываем нужные колбеки из props
-        const outputEvent: TouchEvent = {
-          ...this.gesture,
-          originalEvent: e,
-        };
+      if (gesture.current.isSlide) {
+        Object.assign(gesture.current, {
+          shiftX,
+          shiftY,
+          shiftXAbs,
+          shiftYAbs,
+        });
 
-        if (this.props.onMove) {
-          this.props.onMove(outputEvent);
-        }
-
-        if (this.gesture.isSlideX && this.props.onMoveX) {
-          this.props.onMoveX(outputEvent);
-        }
-
-        if (this.gesture.isSlideY && this.props.onMoveY) {
-          this.props.onMoveY(outputEvent);
-        }
+        handle(e, [_onMove, gesture.current.isSlideX && onMoveX, gesture.current.isSlideY && onMoveY]);
       }
     }
-  };
+  }
 
-  /**
-   * Обработчик событий touchend, touchcancel
-   *
-   * @param {Object} e Браузерное событие
-   * @return {void}
-   */
-  onEnd: VKUITouchEventHander = (e: VKUITouchEvent) => {
-    const { isPressed, isSlide, isSlideX, isSlideY } = this.gesture;
+  function onEnd(e: VKUITouchEvent) {
+    const { isPressed, isSlide, isSlideX, isSlideY } = gesture.current;
 
     if (isPressed) {
-      // Вызываем нужные колбеки из props
-      const outputEvent: TouchEvent = {
-        ...this.gesture,
-        originalEvent: e,
-      };
-
-      if (this.props.onEnd) {
-        this.props.onEnd(outputEvent);
-      }
-
-      if (isSlideY && this.props.onEndY) {
-        this.props.onEndY(outputEvent);
-      }
-
-      if (isSlideX && this.props.onEndX) {
-        this.props.onEndX(outputEvent);
-      }
+      handle(e, [_onEnd, isSlideY && onEndY, isSlideX && onEndX]);
     }
 
-    this.didSlide = isSlide;
-    this.gesture = {};
+    didSlide.current = isSlide;
+    gesture.current = {};
 
     // Если это был тач-евент, симулируем отмену hover
     if (e.type === 'touchend' || e.type === 'touchcancel') {
-      this.onLeave(e);
+      onLeave && onLeave(e);
     }
 
-    !touchEnabled && this.unsubscribe();
-  };
+    !touchEnabled() && subscribe(null);
+  }
 
-  subscribe(element: HTMLElement | Document) {
-    this.unsubscribe();
-    const listenerParams = { capture: this.props.useCapture, passive: false };
-    element.addEventListener(events[1], this.onMove, listenerParams);
-    element.addEventListener(events[2], this.onEnd, listenerParams);
-    element.addEventListener(events[3], this.onEnd, listenerParams);
-    this.unsubscribe = () => {
-      // Здесь нужен последний аргумент с такими же параметрами, потому что
-      // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.
-      // https://github.com/VKCOM/VKUI/issues/444
-      element.removeEventListener(events[1], this.onMove, listenerParams);
-      element.removeEventListener(events[2], this.onEnd, listenerParams);
-      element.removeEventListener(events[3], this.onEnd, listenerParams);
-      this.unsubscribe = noop;
-    };
+  const listenerParams = { capture: useCapture, passive: false };
+  const listeners = [
+    useEventListener(events[1], onMove, listenerParams),
+    useEventListener(events[2], onEnd, listenerParams),
+    useEventListener(events[3], onEnd, listenerParams),
+  ];
+  function subscribe(el: HTMLElement | Document | null) {
+    listeners.forEach((l) => l.add(el));
   }
-  unsubscribe = noop;
 
   /**
    * Обработчик событий dragstart
    * Отменяет нативное браузерное поведение для вложенных ссылок и изображений
-   *
-   * @param {Object} e Браузерное событие
-   * @return {void}
    */
-  onDragStart: DragHandler = (e: React.DragEvent<HTMLElement>) => {
+  const onDragStart = (e: React.DragEvent<HTMLElement>) => {
     const target = e.target as HTMLElement;
     if (target.tagName === 'A' || target.tagName === 'IMG') {
       e.preventDefault();
@@ -287,13 +185,9 @@ class Touch extends React.Component<TouchProps & DOMProps> {
   /**
    * Обработчик клика по компоненту
    * Отменяет переход по вложенной ссылке, если был зафиксирован свайп
-   *
-   * @param {Object} e Браузерное событие
-   * @return {void}
    */
-  postGestureClick: ClickHandler = (e) => {
-    const { onClickCapture, noSlideClick } = this.props;
-    if (!this.didSlide) {
+  const postGestureClick: typeof onClickCapture = (e) => {
+    if (!didSlide.current) {
       return onClickCapture && onClickCapture(e);
     }
     if ((e.target as HTMLElement).tagName === 'A') {
@@ -304,47 +198,15 @@ class Touch extends React.Component<TouchProps & DOMProps> {
     } else {
       onClickCapture && onClickCapture(e);
     }
-    this.didSlide = false;
-  };
-
-  getRef: React.RefCallback<HTMLElement> = (container) => {
-    this.container = container;
-    setRef(container, this.props.getRootRef);
+    didSlide.current = false;
   };
 
-  render() {
-    const {
-      onStart,
-      onStartX,
-      onStartY,
-      onMove,
-      onMoveX,
-      onMoveY,
-      onLeave,
-      onEnter,
-      onEnd,
-      onEndX,
-      onEndY,
-      useCapture,
-      Component,
-      getRootRef,
-      noSlideClick,
-      window,
-      document,
-      ...restProps
-    } = this.props;
-
-    return (
-      <Component
-        {...restProps}
-        onDragStart={this.onDragStart}
-        onClickCapture={this.postGestureClick}
-        ref={this.getRef}
-      >
-        {this.props.children}
-      </Component>
-    );
-  }
-}
-
-export default withDOM<TouchProps>(Touch);
+  return (
+    <Component
+      {...restProps}
+      onDragStart={onDragStart}
+      onClickCapture={postGestureClick}
+      ref={containerRef}
+    />
+  );
+};