@vkontakte/vkui 4.19.0 → 4.22.0

package/src/components/ModalRoot/useModalManager.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import { ModalsState, ModalsStateEntry, ModalType } from './types';
+import { warnOnce } from '../../lib/warnOnce';
+import { getNavId } from '../../lib/getNavId';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { noop, isFunction } from '../../lib/utils';
+
+interface ModalTransitionState {
+  activeModal?: string;
+  enteringModal?: string;
+  exitingModal?: string;
+
+  history?: string[];
+  isBack?: boolean;
+}
+
+export interface ModalTransitionProps extends ModalTransitionState {
+  onEnter: (id: string) => void;
+  onExit: (id: string) => void;
+  getModalState: (id: string) => ModalsStateEntry;
+  closeActiveModal: VoidFunction;
+  delayEnter: boolean;
+}
+
+function getModals(children: React.ReactNode | React.ReactNode[]) {
+  return React.Children.toArray(children) as React.ReactElement[];
+}
+
+const warn = warnOnce('ModalRoot');
+
+export function modalTransitionReducer(
+  state: ModalTransitionState,
+  action: { type: 'setActive' | 'entered' | 'exited' | 'inited'; id: string },
+): ModalTransitionState {
+  if (action.type === 'setActive' && action.id !== state.activeModal) {
+    const nextModal = action.id;
+    // preserve exiting modal if switching mid-transition
+    const prevModal = state.exitingModal || state.activeModal;
+    let history = [...state.history];
+    const isBack = history.includes(nextModal);
+
+    if (nextModal === null) {
+      history = [];
+    } else if (isBack) {
+      history = history.splice(0, history.indexOf(nextModal) + 1);
+    } else {
+      history.push(nextModal);
+    }
+
+    return {
+      activeModal: nextModal,
+      // not entering yet
+      enteringModal: null,
+      exitingModal: prevModal,
+      history,
+      isBack,
+    };
+  }
+  if (action.type === 'entered' && action.id === state.enteringModal) {
+    return { ...state, enteringModal: null };
+  }
+  if (action.type === 'exited' && action.id === state.exitingModal) {
+    return { ...state, exitingModal: null };
+  }
+  if (action.type === 'inited' && action.id === state.activeModal) {
+    return { ...state, enteringModal: action.id };
+  }
+  return state;
+}
+
+/**
+ * Реализует переход модалок. При смене activeModal m1 -> m2:
+ * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода
+ * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода
+ * одновременный переход между ModalPage:
+ *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2
+ *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации
+ * ИЛИ дожидаемся скрытия ModalCard
+ *   3b. activeModal: m2, exitingModal: null, enteringModal: m2
+ *   4b. enteringModal переходит в null после завершения анимации
+ * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен
+ */
+export function useModalManager(
+  activeModal: string,
+  children: React.ReactNode | React.ReactNode[],
+  onClose: (id: string) => void,
+  initModal: (state: ModalsStateEntry) => void = noop,
+): ModalTransitionProps {
+  const modalsState = React.useRef<ModalsState>({}).current;
+  getModals(children).forEach((Modal) => {
+    const modalProps = Modal.props;
+    const id = getNavId(modalProps, warn);
+    const state: ModalsStateEntry = modalsState[id] || { id };
+
+    state.onClose = Modal.props.onClose;
+    state.dynamicContentHeight = !!modalProps.dynamicContentHeight;
+    // ModalPage props
+    if (typeof modalProps.settlingHeight === 'number') {
+      state.settlingHeight = modalProps.settlingHeight;
+    }
+
+    modalsState[state.id] = state;
+  });
+
+  const isMissing = activeModal && !modalsState[activeModal];
+  const safeActiveModal = isMissing ? null : activeModal;
+  const [transitionState, dispatchTransition] = React.useReducer(modalTransitionReducer, {
+    activeModal: safeActiveModal,
+    enteringModal: null,
+    exitingModal: null,
+    history: safeActiveModal ? [safeActiveModal] : [],
+    isBack: false,
+  });
+
+  // Map props to state, render activeModal for init
+  useIsomorphicLayoutEffect(() => {
+    // ignore non-existent activeModal
+    if (process.env.NODE_ENV === 'development' && isMissing) {
+      warn(`Can't transition - modal ${activeModal} not found`);
+    }
+    dispatchTransition({ type: 'setActive', id: safeActiveModal });
+  }, [activeModal]);
+
+  // Init activeModal & set enteringModal
+  useIsomorphicLayoutEffect(() => {
+    if (transitionState.activeModal) {
+      initModal(modalsState[transitionState.activeModal]);
+      dispatchTransition({ type: 'inited', id: transitionState.activeModal });
+    }
+  }, [transitionState.activeModal]);
+
+  const isCard = (id: string) => modalsState[id]?.type === ModalType.CARD;
+  const onEnter = React.useCallback((id: string) => dispatchTransition({ type: 'entered', id }), []);
+  const onExit = React.useCallback((id: string) => dispatchTransition({ type: 'exited', id }), []);
+  const delayEnter = Boolean(transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)));
+  const getModalState = React.useCallback((id: string) => modalsState[id], []);
+
+  function closeActiveModal() {
+    const modalState = modalsState[transitionState.activeModal];
+    if (modalState) {
+      if (isFunction(modalState.onClose)) {
+        modalState.onClose();
+      } else if (isFunction(onClose)) {
+        onClose(modalState.id);
+      } else if (process.env.NODE_ENV === 'development') {
+        warn('onClose is undefined');
+      }
+    }
+  }
+
+  return {
+    onEnter,
+    onExit,
+    ...transitionState,
+    delayEnter,
+    getModalState,
+    closeActiveModal,
+  };
+}
+
+export function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {
+  return function<Props extends ModalTransitionProps>(
+    Wrapped: React.ComponentType<Props>,
+  ): React.FC<Omit<Props, keyof ModalTransitionProps> & { activeModal: string }> {
+    return function WithModalManager(props) {
+      const transitionManager = useModalManager(
+        props.activeModal,
+        props.children,
+        (props as any).onClose,
+        initModal);
+      return <Wrapped {...props as any} {...transitionManager} />;
+    };
+  };
+}

package/src/components/NativeSelect/NativeSelect.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNames } from '../../lib/classNames';
-import { Icon20Dropdown, Icon24Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { FormField } from '../FormField/FormField';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';
@@ -64,7 +64,7 @@ const NativeSelect: React.FC<NativeSelectProps> = ({
       style={style}
       getRootRef={getRootRef}
       disabled={disabled}
-      after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}
+      after={<DropdownIcon />}
     >
       <select
         {...restProps}

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -33,7 +33,6 @@ export interface PullToRefreshState {
   canRefresh: boolean;
 
   touchDown: boolean;
-  refreshingFinished: boolean;
 
   touchY: number;
   spinnerY: PullToRefreshParams['start'];
@@ -86,7 +85,6 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
       canRefresh: false,
 
       touchDown: false,
-      refreshingFinished: false,
 
       touchY: 0,
       spinnerY: this.params.start,
@@ -98,8 +96,8 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
   }
 
   params: PullToRefreshParams;
-
   contentRef: React.RefObject<HTMLDivElement>;
+  waitFetchingTimeout: ReturnType<typeof setTimeout>;
 
   get document() {
     return this.props.document;
@@ -126,12 +124,34 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
         passive: false,
       });
     }
+    clearTimeout(this.waitFetchingTimeout);
   }
 
-  componentDidUpdate(prevProps: PullToRefreshProps) {
+  componentDidUpdate(prevProps: PullToRefreshProps, prevState: PullToRefreshState) {
     if (prevProps.isFetching && !this.props.isFetching) {
       this.onRefreshingFinish();
     }
+    if (!prevProps.isFetching && this.props.isFetching) {
+      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) => {
@@ -187,29 +207,17 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
     }
   };
 
-  onTouchEnd: VoidFunction = () => {
-    const { refreshing, canRefresh, refreshingFinished } = this.state;
-
+  onTouchEnd = () => {
     this.setState({
       watching: false,
       touchDown: false,
-    }, () => {
-      if (canRefresh && !refreshing) {
-        this.runRefreshing();
-      } else if (refreshing && refreshingFinished) {
-        this.resetRefreshingState();
-      } else {
-        this.setState({
-          spinnerY: refreshing ? this.params.refreshing : this.params.start,
-          spinnerProgress: 0,
-          contentShift: 0,
-        });
-      }
     });
   };
 
   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,
@@ -221,11 +229,9 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
   }
 
   onRefreshingFinish: VoidFunction = () => {
-    this.setState({
-      refreshingFinished: true,
-    }, () => {
-      !this.state.touchDown && this.resetRefreshingState();
-    });
+    if (!this.state.touchDown) {
+      this.resetRefreshingState();
+    }
   };
 
   resetRefreshingState() {
@@ -233,7 +239,6 @@ class PullToRefresh extends React.PureComponent<PullToRefreshProps & DOMProps, P
       watching: false,
       canRefresh: false,
       refreshing: false,
-      refreshingFinished: false,
       spinnerY: this.params.start,
       spinnerProgress: 0,
       contentShift: 0,

package/src/components/Removable/Removable.css

@@ -1,14 +1,8 @@
-.Removable {
-  position: relative;
-  min-width: 0;
-  width: 100%;
-  max-width: 100%;
-}
-
 .Removable__content {
+  position: relative;
   display: flex;
-  flex-flow: row nowrap;
   align-items: center;
+  padding-left: var(--formitem_padding);
 }
 
 .Removable__action {
@@ -22,35 +16,16 @@
   align-self: flex-start;
 }
 
-.FormItem .Removable,
-.FormLayoutGroup .Removable {
-  padding-left: var(--formitem_padding);
-  padding-right: var(--formitem_padding);
-  margin-left: calc(-1 * var(--formitem_padding));
-  margin-right: calc(-1 * var(--formitem_padding));
-}
-
-.FormItem--withTop .Removable__action,
-.FormItem--withTop ~ .Removable__action {
+.FormItem--removable.FormItem--withTop .Removable__action,
+.FormLayoutGroup--removable .FormItem--withTop ~ .Removable__action {
   top: 28px;
 }
 
-.FormItem--withTop .Removable--sizeY-compact .Removable__action,
-.Removable--sizeY-compact .FormItem--withTop ~ .Removable__action {
+.FormItem--sizeY-compact.FormItem--removable.FormItem--withTop .Removable__action,
+.FormLayoutGroup--sizeY-compact.FormLayoutGroup--removable .FormItem--withTop ~ .Removable__action {
   top: 26px;
 }
 
-.Cell .Removable {
-  padding-right: 6px;
-  box-sizing: border-box;
-}
-
-/* TODO: remove this
-   (a very temporary fix to appease screenshot tests) */
-.Cell.Cell--android .Removable.Removable--sizeY-regular {
-  padding-right: 4px;
-}
-
 /**
  * iOS
  */
@@ -81,16 +56,16 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .Removable--ios .Removable__content,
-  .Removable__remove {
+  .Removable--ios .Removable__content {
     transition: transform .6s var(--ios-easing);
   }
 }
 
 .Removable__toggle {
   display: block;
-  width: 48px;
-  height: 48px;
+  width: 44px;
+  height: 44px;
+  margin: 0 2px;
   background: none;
 }
 
@@ -122,44 +97,22 @@
   background-color: var(--white);
 }
 
-.Removable--sizeY-compact .Removable__toggle {
-  margin-top: -4px;
-  margin-bottom: -4px;
+.Removable--ios .Removable__content {
+  padding-left: 0;
+  padding-right: var(--formitem_padding);
 }
 
-.FormLayoutGroup .Removable--ios .Removable__content {
+.FormLayoutGroup--removable .Removable__content {
   flex-wrap: wrap;
 }
 
-.FormLayoutGroup .Removable--ios .FormItem--withTop ~ .Removable__offset {
+.FormLayoutGroup--removable .FormItem--ios.FormItem--withTop ~ .Removable__offset {
   order: -1;
   display: block;
   width: 100%;
   height: 28px;
 }
 
-.FormLayoutGroup .Removable--ios.Removable--sizeY-compact .FormItem--withTop ~ .Removable__offset {
+.FormLayoutGroup--removable.FormLayoutGroup--sizeY-compact .FormItem--ios.FormItem--withTop ~ .Removable__offset {
   height: 26px;
 }
-
-/**
- * ANDROID & VKCOM
- */
-.FormItem .Removable--android .Removable__action,
-.FormItem .Removable--vkcom .Removable__action,
-.FormLayoutGroup .Removable--android .Removable__action,
-.FormLayoutGroup .Removable--vkcom .Removable__action {
-   margin-top: -2px;
-   margin-right: -16px;
-   margin-bottom: -2px;
-}
-
-.FormItem--sizeY-compact .Removable--android .Removable__action,
-.FormItem--sizeY-compact .Removable--vkcom .Removable__action,
-.FormLayoutGroup--sizeY-compact .Removable--android .Removable__action,
-.FormLayoutGroup--sizeY-compact .Removable--vkcom .Removable__action {
-   margin-left: 2px;
-   margin-top: -4px;
-   margin-right: -14px;
-   margin-bottom: -4px;
-}

package/src/components/Removable/Removable.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { HasRootRef } from '../../types';
 import { classNames } from '../../lib/classNames';
-import { getTitleFromChildren } from '../../lib/utils';
+import { getTitleFromChildren, noop } from '../../lib/utils';
+import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import { getClassName } from '../../helpers/getClassName';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -23,65 +25,104 @@ export interface RemovableProps {
   onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
 }
 
-interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps {
-  /**
-   * Расположение кнопки удаления.
-   */
-  align?: 'start' | 'center';
+interface RemovableIosOwnProps extends Pick<RemovableProps, 'removePlaceholder'> {
+  onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
+  removePlaceholderString?: string;
 }
 
-export const Removable: React.FC<RemovableOwnProps> = ({
+const RemovableIos: React.FC<RemovableIosOwnProps> = ({
+  onRemoveClick,
+  removePlaceholder,
+  removePlaceholderString,
   children,
-  onRemove,
-  removePlaceholder = 'Удалить',
-  align = 'center',
-  ...restProps
-}: RemovableOwnProps) => {
-  const platform = usePlatform();
-  const { sizeY } = useAdaptivity();
+}) => {
   const { document } = useDOM();
 
   const removeButtonRef = React.useRef(null);
-
-  const [isRemoveActivated, setRemoveActivated] = React.useState(false);
   const [removeOffset, updateRemoveOffset] = React.useState(0);
 
-  useGlobalEventListener(document, 'click', isRemoveActivated && (() => {
-    setRemoveActivated(false);
+  useGlobalEventListener(document, 'click', removeOffset > 0 && (() => {
     updateRemoveOffset(0);
   }));
 
   const onRemoveTransitionEnd = () => {
-    if (isRemoveActivated) {
+    if (removeOffset > 0) {
       removeButtonRef?.current?.focus();
     }
   };
 
-  const onRemoveActivateClick = (e: React.MouseEvent) => {
-    e.nativeEvent.stopPropagation();
-    e.preventDefault();
-    setRemoveActivated(true);
+  const onRemoveActivateClick = () => {
+    const { offsetWidth = 0 } = removeButtonRef?.current;
+    updateRemoveOffset(offsetWidth);
   };
 
+  return (
+    <div
+      vkuiClass="Removable__content"
+      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}
+      onTransitionEnd={onRemoveTransitionEnd}
+    >
+      <IconButton
+        hasActive={false}
+        hasHover={false}
+        aria-label={removePlaceholderString}
+        vkuiClass="Removable__action Removable__toggle"
+        onClick={onRemoveActivateClick}
+        disabled={removeOffset > 0}
+      >
+        <i vkuiClass="Removable__toggle-in" role="presentation" />
+      </IconButton>
+      {children}
+
+      <span vkuiClass="Removable__offset" aria-hidden="true"></span>
+
+      <Tappable
+        Component="button"
+        hasActive={false}
+        hasHover={false}
+        disabled={removeOffset === 0}
+        getRootRef={removeButtonRef}
+        vkuiClass="Removable__remove"
+        onClick={onRemoveClick}
+        onTransitionEnd={onRemoveTransitionEnd}
+      >
+        <span vkuiClass="Removable__remove-in">{removePlaceholder}</span>
+      </Tappable>
+    </div>
+  );
+};
+
+interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {
+  /**
+   * Расположение кнопки удаления.
+   */
+  align?: 'start' | 'center';
+}
+
+export const Removable: React.FC<RemovableOwnProps> = ({
+  getRootRef,
+  children,
+  onRemove = noop,
+  removePlaceholder = 'Удалить',
+  align = 'center',
+  ...restProps
+}: RemovableOwnProps) => {
+  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+
+  const ref = useExternRef(getRootRef);
+
   const onRemoveClick = (e: React.MouseEvent) => {
-    e.nativeEvent.stopImmediatePropagation();
     e.preventDefault();
-    onRemove && onRemove(e);
+    onRemove(e);
   };
 
-  React.useEffect(() => {
-    const removeButton = removeButtonRef?.current;
-
-    if (isRemoveActivated && removeButton) {
-      updateRemoveOffset(removeButton.offsetWidth);
-    }
-  }, [isRemoveActivated]);
-
   const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);
 
   return (
     <div
       {...restProps}
+      ref={ref}
       vkuiClass={classNames(
         getClassName('Removable', platform),
         `Removable--${align}`,
@@ -93,9 +134,11 @@ export const Removable: React.FC<RemovableOwnProps> = ({
           {children}
 
           <IconButton
-            aria-label={removePlaceholderString}
+            activeMode="opacity"
+            hoverMode="opacity"
             vkuiClass="Removable__action"
             onClick={onRemoveClick}
+            aria-label={removePlaceholderString}
           >
             <Icon24Cancel role="presentation" />
           </IconButton>
@@ -103,36 +146,13 @@ export const Removable: React.FC<RemovableOwnProps> = ({
       )}
 
       {platform === IOS && (
-        <React.Fragment>
-          <div vkuiClass="Removable__content" style={{ transform: `translateX(-${removeOffset}px)` }}>
-            <IconButton
-              hasActive={false}
-              hasHover={false}
-              aria-label={removePlaceholderString}
-              vkuiClass="Removable__action Removable__toggle"
-              onClick={onRemoveActivateClick}
-            >
-              <i vkuiClass="Removable__toggle-in" role="presentation" />
-            </IconButton>
-            {children}
-
-            <span vkuiClass="Removable__offset" aria-hidden="true"></span>
-          </div>
-
-          <Tappable
-            Component="button"
-            hasActive={false}
-            hasHover={false}
-            disabled={!isRemoveActivated}
-            getRootRef={removeButtonRef}
-            vkuiClass="Removable__remove"
-            onClick={onRemoveClick}
-            onTransitionEnd={onRemoveTransitionEnd}
-            style={{ transform: `translateX(-${removeOffset}px)` }}
-          >
-            <span vkuiClass="Removable__remove-in">{removePlaceholder}</span>
-          </Tappable>
-        </React.Fragment>
+        <RemovableIos
+          onRemoveClick={onRemoveClick}
+          removePlaceholder={removePlaceholder}
+          removePlaceholderString={removePlaceholderString}
+        >
+          {children}
+        </RemovableIos>
       )}
     </div>
   );

package/src/components/Root/Root.css

@@ -21,6 +21,11 @@
   overflow: hidden;
 }
 
+.Root__scrollCompensation {
+  width: 100%;
+  height: 100%;
+}
+
 .Root__view--show-back,
 .Root__view--hide-forward {
   z-index: 1;

package/src/components/Root/Root.tsx

@@ -133,7 +133,10 @@ const Root: React.FC<RootProps> = ({
             })}
           >
             <NavTransitionProvider entering={transition && viewId === activeView}>
-              <div style={{ marginTop: compensateScroll ? -scrolls[viewId] : null }}>
+              <div
+                vkuiClass="Root__scrollCompensation"
+                style={{ marginTop: compensateScroll ? -scrolls[viewId] : null }}
+              >
                 {view}
               </div>
             </NavTransitionProvider>