@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/Cell/Readme.md

@@ -1,163 +0,0 @@
-Надстройка над SimpleCell, позволяющая удалять, перетаскивать и выделять ячейки.
-
-```jsx
-const [removeList, updateRemoveList] = React.useState([
-  "Михаил Андриевский",
-  "Вадим Дорохов",
-  "Саша Колобов",
-]);
-const [draggingList, updateDraggingList] = React.useState([
-  "Say",
-  "Hello",
-  "To",
-  "My",
-  "Little",
-  "Friend",
-]);
-const [dragAndSelectList, updateDragAndSelectList] = React.useState([
-  { label: "Фотографии", defaultChecked: true },
-  { label: "Музыка" },
-  { label: "Видео" },
-]);
-const [dragAndRemoveList, updateDragAndRemoveList] = React.useState([
-  "Евгения Полозова",
-  "Артур Стамбульцян",
-  "Владимир Клепов",
-]);
-
-const removeFromList = (idx, list, updateListFn) => {
-  const _list = [...list];
-  _list.splice(idx, 1);
-  updateListFn(_list);
-};
-
-const reorderList = ({ from, to }, list, updateListFn) => {
-  const _list = [...list];
-  _list.splice(from, 1);
-  _list.splice(to, 0, list[from]);
-  updateListFn(_list);
-};
-
-<View activePanel="list">
-  <Panel id="list">
-    <PanelHeader>Cell</PanelHeader>
-
-    <Group
-      header={
-        <Header subtitle={<code>mode="selectable"</code>}>Выделение</Header>
-      }
-    >
-      <Cell mode="selectable" before={<Avatar />}>
-        Артур Стамбульцян
-      </Cell>
-      <Cell mode="selectable" before={<Avatar />}>
-        Игорь Федоров
-      </Cell>
-      <Cell mode="selectable" disabled before={<Avatar />}>
-        Михаил Лихачев
-      </Cell>
-    </Group>
-
-    {removeList.length > 0 && (
-      <Group
-        header={
-          <Header subtitle={<code>mode="removable"</code>}>Удаление</Header>
-        }
-      >
-        <List>
-          {removeList.map((item, idx) => (
-            <Cell
-              key={item}
-              mode="removable"
-              onRemove={() => removeFromList(idx, removeList, updateRemoveList)}
-            >
-              {item}
-            </Cell>
-          ))}
-        </List>
-      </Group>
-    )}
-
-    <Group
-      header={<Header subtitle={<code>draggable</code>}>Перетаскивание</Header>}
-    >
-      <List>
-        {draggingList.map((item) => (
-          <Cell
-            key={item}
-            before={<Avatar />}
-            draggable
-            onDragFinish={({ from, to }) =>
-              reorderList({ from, to }, draggingList, updateDraggingList)
-            }
-          >
-            {item}
-          </Cell>
-        ))}
-      </List>
-    </Group>
-
-    <Group
-      header={
-        <Header subtitle={<code>draggable mode="selectable"</code>}>
-          Перетаскивание c выделением
-        </Header>
-      }
-    >
-      <List>
-        {dragAndSelectList.map(({ label, ...restItem }) => (
-          <Cell
-            key={label}
-            mode="selectable"
-            draggable
-            before={<Avatar mode="app" size={32} />}
-            onDragFinish={({ from, to }) =>
-              reorderList(
-                { from, to },
-                dragAndSelectList,
-                updateDragAndSelectList
-              )
-            }
-            {...restItem}
-          >
-            {label}
-          </Cell>
-        ))}
-      </List>
-    </Group>
-
-    {dragAndRemoveList.length > 0 && (
-      <Group
-        header={
-          <Header subtitle={<code>draggable mode="removable"</code>}>
-            Перетаскивание c удалением
-          </Header>
-        }
-      >
-        <List>
-          {dragAndRemoveList.map((item, idx) => (
-            <Cell
-              key={item}
-              mode="removable"
-              draggable
-              before={<Avatar />}
-              onRemove={() =>
-                removeFromList(idx, dragAndRemoveList, updateDragAndRemoveList)
-              }
-              onDragFinish={({ from, to }) =>
-                reorderList(
-                  { from, to },
-                  dragAndRemoveList,
-                  updateDragAndRemoveList
-                )
-              }
-            >
-              {item}
-            </Cell>
-          ))}
-        </List>
-      </Group>
-    )}
-  </Panel>
-</View>;
-```

package/src/components/Cell/useDraggable.tsx

@@ -1,126 +0,0 @@
-import * as React from "react";
-import { TouchEvent } from "../Touch/Touch";
-import { CellProps } from "./Cell";
-
-export interface DraggableProps {
-  onDragStart: () => void;
-  onDragEnd: () => void;
-  onDragMove: (e: TouchEvent) => void;
-}
-
-interface UseDraggableProps extends DraggableProps {
-  dragging: boolean;
-  rootElRef: any;
-}
-
-export const useDraggable = ({
-  onDragFinish,
-}: Pick<CellProps, "onDragFinish">) => {
-  const [dragging, setDragging] = React.useState<boolean>(false);
-  const rootElRef = React.useRef<HTMLElement>(null);
-
-  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);
-  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);
-  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);
-  const [dragShift, setDragShift] = React.useState<number>(0);
-  const [dragDirection, setDragDirection] = React.useState<
-    "down" | "up" | undefined
-  >(undefined);
-
-  const onDragStart = () => {
-    const rootEl = rootElRef.current;
-    if (!rootEl) {
-      return;
-    }
-
-    setDragging(true);
-
-    let _siblings: HTMLElement[] = [];
-    if (rootEl.parentElement?.childNodes) {
-      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];
-    }
-    const idx = _siblings.indexOf(rootEl);
-
-    setDragStartIndex(idx);
-    setDragEndIndex(idx);
-    setSiblings(_siblings);
-    setDragShift(0);
-  };
-
-  const onDragMove = (e: TouchEvent) => {
-    e.originalEvent.preventDefault();
-
-    const rootEl = rootElRef.current;
-
-    if (rootEl) {
-      rootEl.style.transform = `translateY(${e.shiftY}px)`;
-      const rootGesture = rootEl.getBoundingClientRect();
-
-      setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
-      setDragShift(e.shiftY);
-      setDragEndIndex(dragStartIndex);
-
-      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {
-        const siblingGesture = sibling.getBoundingClientRect();
-        const siblingHalfHeight = siblingGesture.height / 2;
-
-        const rootOverSibling =
-          rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
-        const rootUnderSibling =
-          rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
-
-        if (dragStartIndex < siblingIndex) {
-          if (rootOverSibling) {
-            if (dragDirection === "down") {
-              sibling.style.transform = "translateY(-100%)";
-            }
-
-            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);
-          }
-          if (rootUnderSibling && dragDirection === "up") {
-            sibling.style.transform = "translateY(0)";
-          }
-        } else if (dragStartIndex > siblingIndex) {
-          if (rootUnderSibling) {
-            if (dragDirection === "up") {
-              sibling.style.transform = "translateY(100%)";
-            }
-
-            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);
-          }
-          if (rootOverSibling && dragDirection === "down") {
-            sibling.style.transform = "translateY(0)";
-          }
-        }
-      });
-    }
-  };
-
-  const onDragEnd = () => {
-    const [from, to] = [dragStartIndex, dragEndIndex];
-
-    siblings.forEach((sibling: HTMLElement) => {
-      sibling.style.transform = "";
-    });
-
-    setSiblings([]);
-    setDragEndIndex(0);
-    setDragStartIndex(0);
-    setDragDirection(undefined);
-    setDragShift(0);
-
-    setDragging(false);
-
-    onDragFinish && onDragFinish({ from, to });
-  };
-
-  const useDraggableProps: UseDraggableProps = {
-    onDragStart,
-    onDragMove,
-    onDragEnd,
-    dragging,
-    rootElRef,
-  };
-
-  return useDraggableProps;
-};

package/src/components/CellButton/CellButton.css

@@ -1,46 +0,0 @@
-.CellButton {
-  box-sizing: border-box;
-  text-decoration: none;
-  margin: 0;
-  border: none;
-  cursor: pointer;
-  width: 100%;
-  background: transparent;
-  text-align: left;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.FormItem .CellButton {
-  width: 100%;
-  box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
-}
-
-.CellButton[disabled] {
-  opacity: 0.4;
-}
-
-.CellButton--centered {
-  justify-content: center;
-  text-align: center;
-}
-
-.CellButton--centered .SimpleCell__main {
-  flex-grow: initial;
-  max-width: initial;
-}
-
-.CellButton--centered > .Icon {
-  padding-right: 8px;
-}
-
-.CellButton,
-.CellButton > .Icon {
-  color: var(--accent);
-}
-
-.CellButton--danger,
-.CellButton--danger > .Icon {
-  color: var(--destructive);
-}

package/src/components/CellButton/CellButton.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import SimpleCell, { SimpleCellProps } from "../SimpleCell/SimpleCell";
-import "./CellButton.css";
-
-export interface CellButtonProps extends SimpleCellProps {
-  mode?: "primary" | "danger";
-  centered?: boolean;
-}
-
-const CellButton: React.FC<CellButtonProps> = ({
-  centered = false,
-  mode = "primary",
-  ...restProps
-}: CellButtonProps) => {
-  const platform = usePlatform();
-
-  return (
-    <SimpleCell
-      stopPropagation={true}
-      {...restProps}
-      vkuiClass={classNames(
-        getClassName("CellButton", platform),
-        `CellButton--${mode}`,
-        {
-          ["CellButton--centered"]: centered,
-        }
-      )}
-    />
-  );
-};
-
-export { CellButton };

package/src/components/CellButton/Readme.md

@@ -1,53 +0,0 @@
-```jsx
-<View activePanel="button">
-  <Panel id="button">
-    <PanelHeader>CellButton</PanelHeader>
-    <Group header={<Header mode="secondary">Базовый пример</Header>}>
-      <CellButton>Добавить новую школу</CellButton>
-      <CellButton mode="danger">Удалить беседу</CellButton>
-    </Group>
-    <Group header={<Header mode="secondary">Иконки</Header>}>
-      <CellButton before={<Icon28AddOutline />}>
-        Добавить родственника
-      </CellButton>
-      <CellButton before={<Icon28DeleteOutline />} mode="danger">
-        Удалить беседу
-      </CellButton>
-    </Group>
-    <Group header={<Header mode="secondary">Аватарки</Header>}>
-      <CellButton
-        before={
-          <Avatar shadow={false} size={40}>
-            <Icon24Add />
-          </Avatar>
-        }
-      >
-        Добавить участников
-      </CellButton>
-      <CellButton
-        before={
-          <Avatar shadow={false} size={48}>
-            <Icon28AddOutline />
-          </Avatar>
-        }
-      >
-        Создать беседу
-      </CellButton>
-      <CellButton
-        before={
-          <Avatar shadow={false} size={72} mode="image">
-            <Icon28AddOutline />
-          </Avatar>
-        }
-      >
-        Создать плейлист
-      </CellButton>
-    </Group>
-    <Group header={<Header mode="secondary">Центрирование</Header>}>
-      <CellButton centered before={<Icon24Add />}>
-        Создать беседу
-      </CellButton>
-    </Group>
-  </Panel>
-</View>
-```

package/src/components/Checkbox/Checkbox.css

@@ -1,127 +0,0 @@
-.Checkbox {
-  display: block;
-}
-
-.FormItem .Checkbox {
-  width: 100%;
-  box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
-}
-
-.Checkbox__input {
-  display: none;
-}
-
-.Checkbox__container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.Checkbox__icon {
-  flex-shrink: 0;
-  margin-right: 12px;
-}
-
-.Checkbox__icon--on {
-  color: var(--accent);
-  display: none;
-}
-
-.Checkbox__icon--off {
-  color: var(--icon_tertiary);
-}
-
-.Checkbox__content {
-  flex-grow: 1;
-  color: var(--text_primary);
-  word-break: break-word;
-}
-
-.Checkbox__description {
-  color: var(--text_secondary);
-  display: block;
-  margin-bottom: 12px;
-  margin-top: 2px;
-}
-
-.Checkbox__children {
-  margin-top: 12px;
-}
-
-.Checkbox__children:last-child {
-  margin-bottom: 12px;
-}
-
-.Checkbox__input:checked ~ .Checkbox__container .Checkbox__icon--on {
-  display: block;
-}
-
-.Checkbox__input:checked ~ .Checkbox__container .Checkbox__icon--off {
-  display: none;
-}
-
-.Checkbox__input[disabled] ~ .Checkbox__container {
-  opacity: 0.6;
-}
-
-/**
- * iOS
- */
-
-.Checkbox--ios {
-  padding: 0 12px;
-}
-
-/**
- * Android
- */
-
-.Checkbox--android {
-  padding: 0 16px;
-}
-
-/**
- * sizeY COMPACT
- */
-
-.Checkbox--sizeY-compact .Checkbox__children {
-  margin-top: 8px;
-}
-
-.Checkbox--sizeY-compact .Checkbox__children:last-child {
-  margin-bottom: 8px;
-}
-
-.Checkbox--sizeY-compact .Checkbox__description {
-  margin-bottom: 8px;
-}
-
-/**
- * VKCOM
- */
-
-.Checkbox--vkcom {
-  padding: 0 16px;
-}
-
-.Checkbox--vkcom .Checkbox__icon {
-  margin-right: 10px;
-}
-
-.Checkbox--vkcom .Checkbox__input[disabled] ~ .Checkbox__container {
-  opacity: 0.4;
-}
-
-.Checkbox--vkcom .Checkbox__children {
-  margin-top: 8px;
-}
-
-.Checkbox--vkcom .Checkbox__children:last-child {
-  margin-bottom: 8px;
-}
-
-.Checkbox--vkcom .Checkbox__description {
-  margin-top: 1px;
-  margin-bottom: 8px;
-}

package/src/components/Checkbox/Checkbox.tsx

@@ -1,109 +0,0 @@
-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,
-} from "@vkontakte/icons";
-
-import { HasRef, HasRootRef } from "../../types";
-import { usePlatform } from "../../hooks/usePlatform";
-import {
-  withAdaptivity,
-  AdaptivityProps,
-  SizeType,
-} from "../../hoc/withAdaptivity";
-import Text from "../Typography/Text/Text";
-import Headline from "../Typography/Headline/Headline";
-import { hasReactNode } from "../../lib/utils";
-import Caption from "../Typography/Caption/Caption";
-import "./Checkbox.css";
-
-export interface CheckboxProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
-    HasRootRef<HTMLLabelElement>,
-    HasRef<HTMLInputElement>,
-    AdaptivityProps {
-  description?: React.ReactNode;
-}
-
-export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
-  children,
-  className,
-  style,
-  getRootRef,
-  getRef,
-  description,
-  sizeY,
-  ...restProps
-}: CheckboxProps) => {
-  const platform = usePlatform();
-
-  const ContentComponent =
-    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
-
-  return (
-    <Tappable
-      Component="label"
-      vkuiClass={classNames(
-        getClassName("Checkbox", platform),
-        `Checkbox--sizeY-${sizeY}`
-      )}
-      className={className}
-      style={style}
-      disabled={restProps.disabled}
-      activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}
-      getRootRef={getRootRef}
-    >
-      <input
-        {...restProps}
-        type="checkbox"
-        vkuiClass="Checkbox__input"
-        ref={getRef}
-      />
-      <div vkuiClass="Checkbox__container">
-        <div vkuiClass="Checkbox__icon Checkbox__icon--on">
-          {sizeY === SizeType.COMPACT || platform === VKCOM ? (
-            <Icon20CheckBoxOn />
-          ) : (
-            <Icon24CheckBoxOn />
-          )}
-        </div>
-        <div vkuiClass="Checkbox__icon Checkbox__icon--off">
-          {sizeY === SizeType.COMPACT || platform === VKCOM ? (
-            <Icon20CheckBoxOff />
-          ) : (
-            <Icon24CheckBoxOff />
-          )}
-        </div>
-        <ContentComponent
-          weight="regular"
-          vkuiClass="Checkbox__content"
-          Component="div"
-        >
-          <div vkuiClass="Checkbox__children">{children}</div>
-          {hasReactNode(description) && (
-            <Caption
-              level="1"
-              Component="span"
-              weight="regular"
-              vkuiClass="Checkbox__description"
-            >
-              {description}
-            </Caption>
-          )}
-        </ContentComponent>
-      </div>
-    </Tappable>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Checkbox, {
-  sizeY: true,
-});

package/src/components/Checkbox/Readme.md

@@ -1,20 +0,0 @@
-Надстройка над `<input type="checkbox" />`. Компонент принимает все валидные для этого элемента свойства.
-
-```jsx
-<View activePanel="panel">
-  <Panel id="panel">
-    <PanelHeader>Checkbox</PanelHeader>
-    <Group>
-      <FormItem>
-        <Checkbox defaultChecked>Я участвую в сборе</Checkbox>
-        <Checkbox description="Все пользователи получат уведомление">
-          Закрепить сообщение
-        </Checkbox>
-        <Checkbox checked disabled>
-          Автоматически зачислять на карту
-        </Checkbox>
-      </FormItem>
-    </Group>
-  </Panel>
-</View>
-```