@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/Counter/Counter.tsx

@@ -1,76 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import Caption from "../Typography/Caption/Caption";
-import Text from "../Typography/Text/Text";
-import { VKCOM } from "../../lib/platform";
-import { hasReactNode } from "../../lib/utils";
-import { HasComponent, HasPlatform } from "../../types";
-import "./Counter.css";
-
-export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /**
-   * Тип счетчика. При использовании компонента в качестве значения свойства `after` у `Button` эти значения игнорируются
-   */
-  mode?: "secondary" | "primary" | "prominent";
-  size?: "s" | "m";
-}
-
-type CounterTypographyProps = Pick<CounterProps, "size"> &
-  HasPlatform &
-  HasComponent;
-
-const CounterTypography: React.FC<CounterTypographyProps> = ({
-  size,
-  platform,
-  ...restProps
-}) => {
-  return size === "s" ? (
-    <Caption
-      level="2"
-      weight={platform === VKCOM ? "medium" : "regular"}
-      {...restProps}
-    />
-  ) : (
-    <Text weight="medium" {...restProps} />
-  );
-};
-
-const Counter: React.FC<CounterProps> = (props: CounterProps) => {
-  const { mode, size, children, ...restProps } = props;
-  const platform = usePlatform();
-
-  if (React.Children.count(children) === 0) {
-    return null;
-  }
-
-  return (
-    <span
-      {...restProps}
-      vkuiClass={classNames(
-        getClassName("Counter", platform),
-        `Counter--${mode}`,
-        `Counter--s-${size}`
-      )}
-    >
-      {hasReactNode(children) && (
-        <CounterTypography
-          platform={platform}
-          size={size}
-          vkuiClass="Counter__in"
-        >
-          {children}
-        </CounterTypography>
-      )}
-    </span>
-  );
-};
-
-Counter.defaultProps = {
-  mode: "secondary",
-  size: "m",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default React.memo(Counter);

package/src/components/Counter/Readme.md

@@ -1,114 +0,0 @@
-Компонент для отрисовки счетчика в ячейках и кнопках.
-Принимает в качестве `children` число или строку с отформатированным числом по разрядам.
-
-```jsx
-<View activePanel="counter-demo">
-  <Panel id="counter-demo">
-    <PanelHeader>Counter</PanelHeader>
-    <Group header={<Header mode="secondary">Счётчики в ячейках</Header>}>
-      <List>
-        <Cell before={<Icon28UserOutline />} indicator={<Counter>4</Counter>}>
-          Друзья
-        </Cell>
-        <Cell
-          before={<Icon28UsersOutline />}
-          indicator={<Counter mode="primary">2</Counter>}
-        >
-          Группы
-        </Cell>
-        <Cell
-          before={<Icon28MessageOutline />}
-          indicator={<Counter>224</Counter>}
-        >
-          Сообщения
-        </Cell>
-        <Cell
-          before={<Icon28FavoriteOutline />}
-          indicator={<Counter mode="primary">1</Counter>}
-        >
-          Закладки
-        </Cell>
-      </List>
-    </Group>
-    <Group header={<Header mode="secondary">Счётчики в кнопках</Header>}>
-      <FormItem>
-        <Button mode="secondary" size="m" after={<Counter>16</Counter>}>
-          Secondary medium
-        </Button>
-      </FormItem>
-      <FormItem>
-        <Button mode="tertiary" after={<Counter size="s">6</Counter>}>
-          Tertiary small
-        </Button>
-      </FormItem>
-      <FormItem>
-        <Button mode="outline" size="m" after={<Counter>20</Counter>}>
-          Outline medium
-        </Button>
-      </FormItem>
-      <FormItem>
-        <Button mode="commerce" size="m" after={<Counter>4</Counter>}>
-          Commerce medium
-        </Button>
-      </FormItem>
-      <FormItem>
-        <Button size="l" after={<Counter>8</Counter>}>
-          Primary large
-        </Button>
-      </FormItem>
-    </Group>
-    <Group
-      header={
-        <Header
-          indicator={
-            <Counter size="s" mode="prominent">
-              5
-            </Counter>
-          }
-          aside={<Link>Посмотреть все</Link>}
-        >
-          Заявки в друзья
-        </Header>
-      }
-    >
-      <Cell before={<Avatar />}>Александр Сорокин</Cell>
-      <Cell before={<Avatar />}>Виктор Пелевин</Cell>
-      <Cell before={<Avatar />}>Михаил Зыгарь</Cell>
-    </Group>
-    <Group header={<Header mode="secondary">В переключателях</Header>}>
-      <Tabs mode="buttons">
-        <HorizontalScroll>
-          <TabsItem after={<Counter size="s">8</Counter>}>Все</TabsItem>
-          <TabsItem selected after={<Counter size="s">24</Counter>}>
-            Люди
-          </TabsItem>
-          <TabsItem
-            after={
-              <Counter size="s" mode="primary">
-                2
-              </Counter>
-            }
-          >
-            Сообщества
-          </TabsItem>
-          <TabsItem>Музыка</TabsItem>
-        </HorizontalScroll>
-      </Tabs>
-      <Tabs>
-        <TabsItem
-          after={
-            <Counter size="s" mode="prominent">
-              6
-            </Counter>
-          }
-        >
-          Диалоги
-        </TabsItem>
-        <TabsItem selected after={<Counter size="s">24</Counter>}>
-          Сообщения
-        </TabsItem>
-      </Tabs>
-    </Group>
-  </Panel>
-</View>
-```

package/src/components/CustomScrollView/CustomScrollView.css

@@ -1,62 +0,0 @@
-.CustomScrollView {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-}
-
-.CustomScrollView__box {
-  max-height: inherit;
-  width: 100%;
-  height: 100%;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  padding-right: 100px;
-  scrollbar-width: none;
-  position: relative;
-  z-index: 0;
-}
-
-.CustomScrollView__box::-webkit-scrollbar {
-  display: none;
-}
-
-.CustomScrollView__barY:active + .CustomScrollView__box {
-  pointer-events: none;
-}
-
-.CustomScrollView__barY {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  height: 100%;
-  width: 10px;
-}
-
-.CustomScrollView__trackerY {
-  width: 10px;
-  box-sizing: border-box;
-  padding: 4px 4px 4px 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  user-select: none;
-}
-
-.CustomScrollView__trackerY::before {
-  content: "";
-  opacity: 0.28;
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: var(--music_playback_icon);
-  border-radius: 12px;
-  transition: transform 200ms, opacity 200ms;
-}
-
-.CustomScrollView__trackerY:hover::before,
-.CustomScrollView__trackerY:active::before {
-  opacity: 0.56;
-  transform: scaleX(1.34);
-}

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -1,168 +0,0 @@
-import * as React from "react";
-import { DOMProps, withDOM } from "../../lib/dom";
-import { multiRef, setRef } from "../../lib/utils";
-import "./CustomScrollView.css";
-
-interface Props extends DOMProps {
-  windowResize?: boolean;
-  boxRef: React.Ref<HTMLDivElement>;
-  className?: HTMLDivElement["className"];
-}
-
-class CustomScrollView extends React.Component<Props> {
-  private ratio = NaN;
-  private lastTrackerTop = 0;
-  private clientHeight = 0;
-  private trackerHeight = 0;
-  private scrollHeight = 0;
-  private transformProp = "";
-
-  private startY = 0;
-  private trackerTop = 0;
-
-  private readonly box = multiRef<HTMLDivElement>((e) =>
-    setRef(e, this.props.boxRef)
-  );
-  private readonly barY = React.createRef<HTMLDivElement>();
-  private readonly trackerY = React.createRef<HTMLDivElement>();
-
-  componentDidMount() {
-    this.chooseTransformProp();
-
-    this.resize();
-
-    if (this.props.windowResize) {
-      this.props.window!.addEventListener("resize", this.resize);
-    }
-  }
-
-  componentDidUpdate() {
-    this.resize();
-  }
-
-  componentWillUnmount() {
-    this.props.window!.removeEventListener("resize", this.resize);
-  }
-
-  chooseTransformProp() {
-    let style = this.trackerY.current?.style;
-    let prop = "";
-    if (style !== undefined) {
-      if ("transform" in style) {
-        prop = "transform";
-      } else if ("webkitTransform" in style) {
-        prop = "webkitTransform";
-      }
-    }
-    this.transformProp = prop;
-  }
-
-  resize = () => {
-    if (!this.box.current || !this.barY.current || !this.trackerY.current) {
-      return;
-    }
-    const clientHeight = this.box.current.clientHeight;
-    const scrollHeight = this.box.current.scrollHeight;
-    let ratio = clientHeight / scrollHeight;
-    let trackerHeight = Math.max(clientHeight * ratio, 40);
-
-    this.ratio = ratio;
-    this.clientHeight = clientHeight;
-    this.scrollHeight = scrollHeight;
-    this.trackerHeight = trackerHeight;
-
-    if (ratio >= 1) {
-      this.barY.current.style.display = "none";
-    } else {
-      this.barY.current.style.display = "";
-      this.trackerY.current.style.height = `${trackerHeight}px`;
-      this.setTrackerPositionFromScroll(this.box.current.scrollTop);
-    }
-  };
-
-  scroll = () => {
-    if (this.ratio >= 1 || !this.box.current) {
-      return;
-    }
-
-    this.setTrackerPositionFromScroll(this.box.current.scrollTop);
-  };
-
-  setTrackerPosition(scrollTop: number) {
-    this.lastTrackerTop = scrollTop;
-    if (this.trackerY.current !== null) {
-      (this.trackerY.current.style as any)[
-        this.transformProp
-      ] = `translate(0, ${scrollTop}px)`;
-    }
-  }
-
-  setTrackerPositionFromScroll(scrollTop: number) {
-    const progress = scrollTop / (this.scrollHeight - this.clientHeight);
-    this.setTrackerPosition(
-      (this.clientHeight - this.trackerHeight) * progress
-    );
-  }
-
-  setScrollPositionFromTracker(trackerTop: number) {
-    const progress = trackerTop / (this.clientHeight - this.trackerHeight);
-    if (this.box.current !== null) {
-      this.box.current.scrollTop =
-        (this.scrollHeight - this.clientHeight) * progress;
-    }
-  }
-
-  onDragStart = (e: React.MouseEvent) => {
-    e.preventDefault();
-    this.startY = e.clientY;
-    this.trackerTop = this.lastTrackerTop;
-
-    this.props.document!.addEventListener("mousemove", this.onMove);
-    this.props.document!.addEventListener("mouseup", this.onUp);
-  };
-
-  onMove = (e: MouseEvent) => {
-    e.preventDefault();
-    const diff = e.clientY - this.startY;
-    const position = Math.min(
-      Math.max(this.trackerTop + diff, 0),
-      this.clientHeight - this.trackerHeight
-    );
-
-    this.setScrollPositionFromTracker(position);
-  };
-
-  onUp = (e: MouseEvent) => {
-    e.preventDefault();
-    this.props.document!.removeEventListener("mousemove", this.onMove);
-    this.props.document!.removeEventListener("mouseup", this.onUp);
-  };
-
-  render() {
-    const { children, className } = this.props;
-
-    return (
-      <div vkuiClass="CustomScrollView" className={className}>
-        <div vkuiClass="CustomScrollView__barY" ref={this.barY}>
-          <div
-            vkuiClass="CustomScrollView__trackerY"
-            ref={this.trackerY}
-            onMouseDown={this.onDragStart}
-          />
-        </div>
-
-        <div
-          vkuiClass="CustomScrollView__box"
-          tabIndex={-1}
-          ref={this.box}
-          onScroll={this.scroll}
-        >
-          {children}
-        </div>
-      </div>
-    );
-  }
-}
-
-// eslint-disable-next-line import/no-default-export
-export default withDOM(CustomScrollView);

package/src/components/CustomSelect/CustomSelect.css

@@ -1,39 +0,0 @@
-.CustomSelect {
-  width: 100%;
-  position: relative;
-  display: block;
-}
-
-.CustomSelect__control {
-  display: none;
-}
-
-.CustomSelect__empty {
-  padding: 12px 0;
-}
-
-.CustomSelect__fetching {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.CustomSelect__empty {
-  text-align: center;
-  color: var(--text_secondary);
-}
-
-.CustomSelect__open.Select--mimicry:focus .FormField__border {
-  border-color: var(--field_border);
-}
-
-.CustomSelect__open:not(.CustomSelect__open--popupDirectionTop)
-  .FormField__border {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.CustomSelect__open.CustomSelect__open--popupDirectionTop .FormField__border {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}