@vkontakte/vkui 4.21.0 → 4.22.2

package/src/components/TabbarItem/TabbarItem.tsx

@@ -4,9 +4,15 @@ import Counter from '../Counter/Counter';
 import { classNames } from '../../lib/classNames';
 import { usePlatform } from '../../hooks/usePlatform';
 import { hasReactNode } from '../../lib/utils';
+import Tappable from '../Tappable/Tappable';
+import { Platform } from '../../lib/platform';
+import { HasComponent, HasRootRef } from '../../types';
 import './TabbarItem.css';
 
-export interface TabbarItemProps extends React.HTMLAttributes<HTMLElement>, React.AnchorHTMLAttributes<HTMLElement> {
+export interface TabbarItemProps extends
+  Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>, // TODO убрать Omit после удаления свойства label
+  HasRootRef<HTMLElement>,
+  HasComponent {
   selected?: boolean;
   /**
    * Тест рядом с иконкой
@@ -22,31 +28,49 @@ export interface TabbarItemProps extends React.HTMLAttributes<HTMLElement>, Reac
   label?: React.ReactNode;
 }
 
-const TabbarItem: React.FunctionComponent<TabbarItemProps> = (props: TabbarItemProps) => {
-  const { children, selected, label, indicator, text, ...restProps } = props;
+const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
+  children,
+  selected,
+  label,
+  indicator,
+  text,
+  href,
+  Component = href ? 'a' : 'button',
+  disabled,
+  ...restProps
+}: TabbarItemProps) => {
   const platform = usePlatform();
-  const Component: React.ElementType = restProps.href ? 'a' : 'div';
 
-  return (
-    <Component
-      {...restProps}
-      vkuiClass={classNames(getClassName('TabbarItem', platform), {
-        'TabbarItem--selected': selected,
-        'TabbarItem--text': !!text,
-      })}
-    >
-      <div vkuiClass="TabbarItem__in">
-        <div vkuiClass="TabbarItem__icon">
-          {children}
-          <div vkuiClass="TabbarItem__label">
-            {hasReactNode(indicator) && indicator}
-            {!indicator && label && <Counter size="s" mode="prominent">{label}</Counter>}
-          </div>
+  // @ts-ignore ругается на то, что у AllHTMLAttributes type это строка, а button не любую строку считает валидным значением
+  return (<Component
+    {...restProps}
+    disabled={disabled}
+    href={href}
+    vkuiClass={classNames(getClassName('TabbarItem', platform), {
+      'TabbarItem--selected': selected,
+      'TabbarItem--text': !!text,
+    })}
+  >
+    <Tappable
+      role="presentation"
+      Component="div"
+      disabled={disabled}
+      activeMode={platform === Platform.IOS ? 'TabbarItem__tappable--active' : 'background'}
+      activeEffectDelay={platform === Platform.IOS ? 0 : 300}
+      hasHover={false}
+      vkuiClass="TabbarItem__tappable"
+    />
+    <div vkuiClass="TabbarItem__in">
+      <div vkuiClass="TabbarItem__icon">
+        {children}
+        <div vkuiClass="TabbarItem__label">
+          {hasReactNode(indicator) && indicator}
+          {!indicator && label && <Counter size="s" mode="prominent">{label}</Counter>}
         </div>
-        {text && <div vkuiClass="TabbarItem__text">{text}</div>}
       </div>
-    </Component>
-  );
+      {text && <div vkuiClass="TabbarItem__text">{text}</div>}
+    </div>
+  </Component>);
 };
 
 export default TabbarItem;

package/src/components/TabsItem/TabsItem.css

@@ -106,6 +106,7 @@
   flex-basis: 0;
   flex-shrink: 0;
   flex-grow: 1;
+  border-radius: 0;
 }
 
 .Tabs--ios.Tabs--segmented .TabsItem__in {
@@ -117,11 +118,13 @@
 }
 
 .Tabs--ios.Tabs--segmented .TabsItem:last-child {
-  border-radius: 0 10px 10px 0;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
 }
 
 .Tabs--ios.Tabs--segmented .TabsItem:first-child {
-  border-radius: 10px 0 0 10px;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
 }
 
 .Tabs--ios.Tabs--segmented .TabsItem {

package/src/components/View/View.tsx

@@ -159,23 +159,27 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
         .find((id) => id === prevProps.activePanel || id === this.props.activePanel);
 
       const isBack = firstLayerId === this.props.activePanel;
+      this.scrolls[prevProps.activePanel] = this.props.scroll.getScroll().y;
 
-      this.blurActiveElement();
+      if (this.shouldDisableTransitionMotion()) {
+        this.flushTransition(prevProps.activePanel, isBack);
+      } else {
+        this.blurActiveElement();
 
-      this.scrolls[prevProps.activePanel] = this.props.scroll.getScroll().y;
-      this.setState({
-        visiblePanels: [prevProps.activePanel, this.props.activePanel],
-        prevPanel: prevProps.activePanel,
-        nextPanel: this.props.activePanel,
-        activePanel: null,
-        animated: true,
-        isBack,
-      });
+        this.setState({
+          visiblePanels: [prevProps.activePanel, this.props.activePanel],
+          prevPanel: prevProps.activePanel,
+          nextPanel: this.props.activePanel,
+          activePanel: null,
+          animated: true,
+          isBack,
+        });
 
-      // Фолбек анимации перехода
-      if (!animationEvent.supported) {
-        clearTimeout(this.animationFinishTimeout);
-        this.animationFinishTimeout = setTimeout(this.transitionEndHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
+        // Фолбек анимации перехода
+        if (!animationEvent.supported) {
+          clearTimeout(this.animationFinishTimeout);
+          this.animationFinishTimeout = setTimeout(this.transitionEndHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
+        }
       }
     }
 
@@ -252,6 +256,24 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
     return this.panelNodes[id];
   }
 
+  flushTransition(prevPanel: string, isBack: boolean) {
+    const activePanel = this.props.activePanel;
+    if (isBack) {
+      this.scrolls[prevPanel] = 0;
+    }
+    this.setState({
+      prevPanel: null,
+      nextPanel: null,
+      visiblePanels: [activePanel],
+      activePanel,
+      animated: false,
+      isBack: undefined,
+    }, () => {
+      this.props.scroll.scrollTo(0, isBack ? this.scrolls[activePanel] : 0);
+      this.props.onTransition && this.props.onTransition({ isBack, from: prevPanel, to: activePanel });
+    });
+  }
+
   transitionEndHandler = (e?: React.AnimationEvent): void => {
     if (!e || [
       'vkui-animation-ios-next-forward',
@@ -259,23 +281,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
       'vkui-animation-view-next-forward',
       'vkui-animation-view-prev-back',
     ].includes(e.animationName)) {
-      const activePanel = this.props.activePanel;
-      const isBack = this.state.isBack;
-      const prevPanel = this.state.prevPanel;
-      if (isBack) {
-        this.scrolls[prevPanel] = 0;
-      }
-      this.setState({
-        prevPanel: null,
-        nextPanel: null,
-        visiblePanels: [activePanel],
-        activePanel: activePanel,
-        animated: false,
-        isBack: undefined,
-      }, () => {
-        isBack && this.props.scroll.scrollTo(0, this.scrolls[activePanel]);
-        this.props.onTransition && this.props.onTransition({ isBack, from: prevPanel, to: activePanel });
-      });
+      this.flushTransition(this.state.prevPanel, this.state.isBack);
     }
   };
 

package/src/components/View/ViewInfinite.tsx

@@ -167,19 +167,23 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
       };
       this.scrolls = scrolls;
 
-      this.setState({
-        visiblePanels: [prevProps.activePanel, this.props.activePanel],
-        prevPanel: prevProps.activePanel,
-        nextPanel: this.props.activePanel,
-        activePanel: null,
-        animated: true,
-        isBack,
-      });
+      if (this.shouldDisableTransitionMotion()) {
+        this.flushTransition(prevProps.activePanel, isBack);
+      } else {
+        this.setState({
+          visiblePanels: [prevProps.activePanel, this.props.activePanel],
+          prevPanel: prevProps.activePanel,
+          nextPanel: this.props.activePanel,
+          activePanel: null,
+          animated: true,
+          isBack,
+        });
 
-      // Фолбек анимации перехода
-      if (!animationEvent.supported) {
-        clearTimeout(this.animationFinishTimeout);
-        this.animationFinishTimeout = setTimeout(this.transitionEndHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
+        // Фолбек анимации перехода
+        if (!animationEvent.supported) {
+          clearTimeout(this.animationFinishTimeout);
+          this.animationFinishTimeout = setTimeout(this.transitionEndHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
+        }
       }
     }
 
@@ -272,6 +276,33 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
     return this.panelNodes[id];
   }
 
+  flushTransition(prevPanel: string, isBack: boolean) {
+    const activePanel = this.props.activePanel;
+
+    const prevPanelScrolls = [...this.scrolls[prevPanel] || []].slice(0, -1);
+    const newPanelScrolls = [...this.scrolls[activePanel] || []];
+    const scrollPosition = isBack ? newPanelScrolls.pop() : 0;
+    if (isBack) {
+      this.scrolls = {
+        ...this.scrolls,
+        [prevPanel]: prevPanelScrolls,
+        [activePanel]: newPanelScrolls,
+      };
+    }
+
+    this.setState({
+      prevPanel: null,
+      nextPanel: null,
+      visiblePanels: [activePanel],
+      activePanel: activePanel,
+      animated: false,
+      isBack: undefined,
+    }, () => {
+      this.props.scroll.scrollTo(0, isBack ? scrollPosition : 0);
+      this.props.onTransition && this.props.onTransition({ isBack, from: prevPanel, to: activePanel });
+    });
+  }
+
   transitionEndHandler = (e?: React.AnimationEvent): void => {
     if (!e || [
       'vkui-animation-ios-next-forward',
@@ -279,32 +310,7 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
       'vkui-animation-view-next-forward',
       'vkui-animation-view-prev-back',
     ].includes(e.animationName)) {
-      const activePanel = this.props.activePanel;
-      const prevPanel = this.state.prevPanel;
-      const isBack = this.state.isBack;
-
-      const prevPanelScrolls = [...this.scrolls[prevPanel] || []].slice(0, -1);
-      const newPanelScrolls = [...this.scrolls[activePanel] || []];
-      const scrollPosition = isBack ? newPanelScrolls.pop() : 0;
-      if (isBack) {
-        this.scrolls = {
-          ...this.scrolls,
-          [prevPanel]: prevPanelScrolls,
-          [activePanel]: newPanelScrolls,
-        };
-      }
-
-      this.setState({
-        prevPanel: null,
-        nextPanel: null,
-        visiblePanels: [activePanel],
-        activePanel: activePanel,
-        animated: false,
-        isBack: undefined,
-      }, () => {
-        isBack && this.props.scroll.scrollTo(0, scrollPosition);
-        this.props.onTransition && this.props.onTransition({ isBack, from: prevPanel, to: activePanel });
-      });
+      this.flushTransition(this.state.prevPanel, this.state.isBack);
     }
   };
 

package/src/index.ts

@@ -109,6 +109,10 @@ export { default as Gallery } from './components/Gallery/Gallery';
 export type { GalleryProps } from './components/Gallery/Gallery';
 export { default as Avatar } from './components/Avatar/Avatar';
 export type { AvatarProps } from './components/Avatar/Avatar';
+export { GridAvatar } from './components/GridAvatar/GridAvatar';
+export type { GridAvatarProps } from './components/GridAvatar/GridAvatar';
+export { InitialsAvatar } from './components/InitialsAvatar/InitialsAvatar';
+export type { InitialsAvatarProps } from './components/InitialsAvatar/InitialsAvatar';
 export { default as Progress } from './components/Progress/Progress';
 export type { ProgressProps } from './components/Progress/Progress';
 export { default as Search } from './components/Search/Search';

package/src/lib/prefixClass.ts

@@ -16,13 +16,16 @@ function prefixSingle(scopedStyle: string): string {
 }
 
 export function prefixClass(scopedStyle?: string | string[]) {
-  let resolved = '';
   if (typeof scopedStyle === 'string') {
-    resolved = prefixSingle(scopedStyle);
-  } else {
-    for (let i = 0; i < scopedStyle.length; i++) {
-      resolved += ' ' + prefixSingle(scopedStyle[i]);
-    }
+    return prefixSingle(scopedStyle);
+  }
+
+  let resolved = '';
+  for (let i = 0; i < scopedStyle.length; i++) {
+    const separator = resolved ? ' ' : '';
+
+    resolved += separator + prefixSingle(scopedStyle[i]);
   }
+
   return resolved;
 }

package/src/styles/components.css

@@ -71,6 +71,8 @@
 @import '../components/Gradient/Gradient.css';
 @import '../components/SimpleCell/SimpleCell.css';
 @import '../components/Cell/Cell.css';
+@import '../components/Cell/CellCheckbox/CellCheckbox.css';
+@import '../components/Cell/CellDragger/CellDragger.css';
 @import '../components/CellButton/CellButton.css';
 @import '../components/RichCell/RichCell.css';
 @import '../components/HorizontalCell/HorizontalCell.css';
@@ -80,6 +82,8 @@
 @import '../components/Switch/Switch.css';
 @import '../components/InfoRow/InfoRow.css';
 @import '../components/Avatar/Avatar.css';
+@import '../components/InitialsAvatar/InitialsAvatar.css';
+@import '../components/GridAvatar/GridAvatar.css';
 @import '../components/Gallery/Gallery.css';
 @import '../components/Progress/Progress.css';
 @import '../components/Search/Search.css';