@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Cell/Readme.md

@@ -0,0 +1,163 @@
+Надстройка над 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

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,46 @@
+.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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,53 @@
+```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

@@ -0,0 +1,127 @@
+.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

@@ -0,0 +1,102 @@
+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 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

@@ -0,0 +1,20 @@
+Надстройка над `<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>
+```