@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/CardGrid/CardGrid.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import "./CardGrid.css";
+
+export interface CardGridProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    AdaptivityProps {
+  size: "s" | "m" | "l";
+}
+
+const CardGrid: React.FunctionComponent<CardGridProps> = ({
+  children,
+  size,
+  sizeX,
+  ...restProps
+}: CardGridProps) => {
+  const platform = usePlatform();
+
+  return (
+    <div
+      {...restProps}
+      vkuiClass={classNames(
+        getClassName("CardGrid", platform),
+        `CardGrid--${size}`,
+        `CardGrid--sizeX-${sizeX}`
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+CardGrid.defaultProps = {
+  size: "s",
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(CardGrid, { sizeX: true });

package/src/components/CardGrid/Readme.md

@@ -0,0 +1,41 @@
+Сетка для [Card](#!/Card). Согласно дизайну, высота `Card` должна масштабироваться относительно её ширины. В
+примерах это достигается с помощью процентного `padding-bottom`. Пропорции следующие:
+
+- `size="s"`: высота равна 92% ширины;
+- `size="m"`: высота равна 62% ширины;
+- `size="l"`: высота равна 30% ширины.
+
+```jsx
+<View activePanel="card">
+  <Panel id="card">
+    <PanelHeader>CardGrid</PanelHeader>
+    <Group description="Внутри Group">
+      <CardGrid size="s">
+        <Card>
+          <div style={{ paddingBottom: "92%" }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: "92%" }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: "92%" }} />
+        </Card>
+      </CardGrid>
+    </Group>
+    <CardGrid size="m">
+      <Card>
+        <div style={{ paddingBottom: "62%" }} />
+      </Card>
+      <Card>
+        <div style={{ paddingBottom: "62%" }} />
+      </Card>
+    </CardGrid>
+    <CardGrid size="l">
+      <Card>
+        <div style={{ paddingBottom: "30%" }} />
+      </Card>
+    </CardGrid>
+    <Separator expanded />
+  </Panel>
+</View>
+```

package/src/components/CardScroll/CardScroll.css

@@ -0,0 +1,47 @@
+.CardScroll__in {
+  display: flex;
+  align-items: stretch;
+}
+
+.CardScroll__gap {
+  display: block;
+  flex-shrink: 0;
+}
+
+.CardScroll + .CardScroll {
+  margin-top: 16px;
+}
+
+.CardScroll--withSpaces .CardScroll__gap {
+  width: var(--vkui--size_base_padding_horizontal--regular);
+}
+
+/**
+ * CMP:
+ * SplitCol
+ */
+.SplitCol--spaced .CardScroll--withSpaces .CardScroll {
+  margin-left: -16px;
+  margin-right: -16px;
+}
+
+.SplitCol--spaced .CardScroll--withSpaces .CardScroll__gap {
+  width: 16px;
+}
+
+/**
+ * CMP:
+ * Group
+ */
+.Group--card .CardScroll--withSpaces {
+  margin-left: -8px;
+  margin-right: -8px;
+}
+
+.Group--card .CardScroll--withSpaces:first-child {
+  padding-top: var(--vkui--size_cardgrid_padding_vertical--regular);
+}
+
+.Group--card .CardScroll--withSpaces:last-child {
+  padding-bottom: var(--vkui--size_cardgrid_padding_vertical--regular);
+}

package/src/components/CardScroll/CardScroll.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { usePlatform } from "../../hooks/usePlatform";
+import HorizontalScroll, {
+  HorizontalScrollProps,
+} from "../HorizontalScroll/HorizontalScroll";
+import { useDOM } from "../../lib/dom";
+import "./CardScroll.css";
+
+export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.
+   */
+  size?: "s" | "m" | "l" | false;
+  showArrows?: HorizontalScrollProps["showArrows"];
+  withSpaces?: boolean;
+}
+
+export const CardScroll: React.FC<CardScrollProps> = ({
+  children,
+  size = "s",
+  showArrows = true,
+  withSpaces = true,
+  ...restProps
+}: CardScrollProps) => {
+  const platform = usePlatform();
+  const { sizeX } = useAdaptivity();
+
+  const refContainer = React.useRef<HTMLDivElement>(null);
+  const gapRef = React.useRef<HTMLDivElement>(null);
+
+  const { window } = useDOM();
+
+  function getScrollToLeft(offset: number): number {
+    if (!refContainer.current || !gapRef.current) {
+      return offset;
+    }
+    const containerWidth = refContainer.current.offsetWidth;
+    const slideIndex = (
+      Array.from(refContainer.current.children) as HTMLElement[]
+    ).findIndex(
+      (el: HTMLElement) =>
+        el.offsetLeft +
+          el.offsetWidth +
+          parseInt(window!.getComputedStyle(el).marginRight) -
+          offset >=
+        0
+    );
+
+    if (slideIndex === -1) {
+      return offset;
+    }
+
+    if (slideIndex === 0) {
+      return 0;
+    }
+
+    const slide = refContainer.current.children[slideIndex] as HTMLElement;
+
+    const scrollTo =
+      slide.offsetLeft -
+      (containerWidth - slide.offsetWidth) +
+      gapRef.current.offsetWidth;
+
+    if (scrollTo <= 2 * gapRef.current.offsetWidth) {
+      return 0;
+    }
+
+    return scrollTo;
+  }
+
+  function getScrollToRight(offset: number): number {
+    if (!refContainer.current || !gapRef.current) {
+      return offset;
+    }
+
+    const containerWidth = refContainer.current.offsetWidth;
+    const slide = Array.prototype.find.call(
+      refContainer.current.children,
+      (el: HTMLElement) =>
+        el.offsetLeft + el.offsetWidth - offset > containerWidth
+    ) as HTMLElement;
+
+    if (!slide) {
+      return offset;
+    }
+
+    return slide.offsetLeft - gapRef.current.offsetWidth;
+  }
+
+  return (
+    <div
+      {...restProps}
+      vkuiClass={classNames(
+        getClassName("CardScroll", platform),
+        `CardScroll--sizeX-${sizeX}`,
+        `CardScroll--${size}`,
+        { ["CardScroll--withSpaces"]: withSpaces }
+      )}
+    >
+      <HorizontalScroll
+        getScrollToLeft={getScrollToLeft}
+        getScrollToRight={getScrollToRight}
+        showArrows={showArrows}
+      >
+        <div vkuiClass="CardScroll__in" ref={refContainer}>
+          <span vkuiClass="CardScroll__gap" ref={gapRef} />
+          {children}
+          <span vkuiClass="CardScroll__gap" />
+        </div>
+      </HorizontalScroll>
+    </div>
+  );
+};

package/src/components/CardScroll/Readme.md

@@ -0,0 +1,62 @@
+Горизонтальный скролл для [Card](#!/Card).
+
+Согласно дизайну, высота `Card` должна масштабироваться относительно её ширины. В примерах это достигается с помощью процентного `padding-bottom`. Пропорции следующие:
+
+- `size="s"`: высота равна 66% ширины;
+- `size="m"`: высота равна 42% ширины;
+- `size="l"`: высота равна 29% ширины.
+
+```jsx
+<View activePanel="card">
+  <Panel id="card">
+    <PanelHeader>CardScroll</PanelHeader>
+    <Group description="Внутри Group">
+      <CardScroll size="s">
+        <Card>
+          <div style={{ paddingBottom: "66%" }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: "66%" }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: "66%" }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: "66%" }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: "66%" }} />
+        </Card>
+        <Card>
+          <div style={{ paddingBottom: "66%" }} />
+        </Card>
+      </CardScroll>
+    </Group>
+    <CardScroll size="m">
+      <Card>
+        <div style={{ paddingBottom: "42%" }} />
+      </Card>
+      <Card>
+        <div style={{ paddingBottom: "42%" }} />
+      </Card>
+      <Card>
+        <div style={{ paddingBottom: "42%" }} />
+      </Card>
+      <Card>
+        <div style={{ paddingBottom: "42%" }} />
+      </Card>
+    </CardScroll>
+    <CardScroll size="l">
+      <Card>
+        <div style={{ paddingBottom: "29%" }} />
+      </Card>
+      <Card>
+        <div style={{ paddingBottom: "29%" }} />
+      </Card>
+      <Card>
+        <div style={{ paddingBottom: "29%" }} />
+      </Card>
+    </CardScroll>
+  </Panel>
+</View>
+```

package/src/components/Cell/Cell.css

@@ -0,0 +1,56 @@
+.List--dragging .Cell:not(.Cell--dragging) {
+  transition: transform 0.3s ease;
+  pointer-events: none;
+}
+
+.Cell--dragging {
+  background-color: var(--background_content);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
+  z-index: 3;
+}
+
+.Cell--selectable.Cell--disabled {
+  opacity: 0.6;
+}
+
+.Cell__checkbox,
+.Cell__dragger {
+  position: relative;
+  flex-shrink: 0;
+  margin-right: 16px;
+}
+
+.Cell__dragger {
+  z-index: 2;
+}
+
+.Cell__content {
+  max-width: 100%;
+  min-width: 0;
+}
+
+.Cell--removable .Cell__content {
+  flex-grow: 1;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+/**
+ * iOS
+ */
+.Cell--ios .Cell__dragger {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+.Cell--ios .Cell__checkbox {
+  margin-right: 12px;
+}
+
+/**
+ * CMP:
+ * FormItem
+ */
+.FormItem > .Cell {
+  margin: 0 calc(-1 * var(--formitem_padding));
+}

package/src/components/Cell/Cell.tsx

@@ -0,0 +1,204 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { noop } from "../../lib/utils";
+import { warnOnce } from "../../lib/warnOnce";
+import { getClassName } from "../../helpers/getClassName";
+import { ANDROID, IOS, VKCOM } from "../../lib/platform";
+import SimpleCell, { SimpleCellProps } from "../SimpleCell/SimpleCell";
+import { HasPlatform } from "../../types";
+import { Removable, RemovableProps } from "../Removable/Removable";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useDraggable } from "./useDraggable";
+import { ListContext } from "../List/ListContext";
+import { CellDragger } from "./CellDragger/CellDragger";
+import { CellCheckbox, CellCheckboxProps } from "./CellCheckbox/CellCheckbox";
+import "./Cell.css";
+
+export interface CellProps
+  extends SimpleCellProps,
+    HasPlatform,
+    RemovableProps {
+  mode?: "removable" | "selectable";
+  /**
+   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет
+   */
+  draggable?: boolean;
+  /**
+   * @deprecated Будет удалено в 5.0.0. Используйте mode="removable"
+   */
+  removable?: boolean;
+  /**
+   * Имя для input в режиме selectable
+   */
+  name?: string;
+  /**
+   * @deprecated Будет удалено в 5.0.0. Используйте mode="selectable"
+   */
+  selectable?: boolean;
+  /**
+   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения
+   */
+  checked?: boolean;
+  /**
+   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент
+   */
+  defaultChecked?: boolean;
+  /**
+   * Коллбэк срабатывает при завершении перетаскивания.
+   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.
+   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице
+   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.
+   */
+  onDragFinish?: ({ from, to }: { from: number; to: number }) => void;
+  /**
+   * aria-label для кнопки перетаскивания ячейки
+   */
+  draggerLabel?: string;
+}
+
+const warn = warnOnce("Cell");
+export const Cell: React.FC<CellProps> = ({
+  mode: propsMode, // TODO: убрать переименование в propsMode перед 5.0.0
+  onRemove = noop,
+  removePlaceholder = "Удалить",
+  onDragFinish,
+  before,
+  after,
+  disabled,
+  removable: deprecatedRemovable, // TODO: удалить перед 5.0.0
+  draggable,
+  selectable: deprecatedSelectable, // TODO: удалить перед 5.0.0
+  Component,
+  onChange,
+  name,
+  value,
+  checked,
+  defaultChecked,
+  getRootRef,
+  draggerLabel = "Перенести ячейку",
+  className,
+  style,
+  ...restProps
+}: CellProps) => {
+  // TODO: удалить перед 5.0.0
+  let mode: CellProps["mode"] = propsMode;
+
+  if (!propsMode && (deprecatedSelectable || deprecatedRemovable)) {
+    mode = deprecatedSelectable ? "selectable" : "removable";
+
+    if (process.env.NODE_ENV === "development") {
+      deprecatedSelectable &&
+        warn(
+          'Свойство selectable устарелo и будет удалено в 5.0.0. Используйте mode="selectable".'
+        );
+      deprecatedRemovable &&
+        warn(
+          'Свойство removable устарелo и будет удалено в 5.0.0. Используйте mode="removable".'
+        );
+    }
+  }
+  // /end TODO
+
+  const selectable = mode === "selectable";
+  const removable = mode === "removable";
+
+  const platform = usePlatform();
+
+  const { dragging, rootElRef, ...draggableProps } = useDraggable({
+    onDragFinish,
+  });
+
+  const { toggleDrag } = React.useContext(ListContext);
+  React.useEffect(() => {
+    if (dragging) {
+      toggleDrag(true);
+      return () => toggleDrag(false);
+    }
+    return undefined;
+  }, [dragging, toggleDrag]);
+
+  let dragger;
+  if (draggable) {
+    dragger = (
+      <CellDragger
+        vkuiClass="Cell__dragger"
+        aria-label={draggerLabel}
+        {...draggableProps}
+      />
+    );
+  }
+
+  let checkbox;
+  if (selectable) {
+    const checkboxProps: CellCheckboxProps = {
+      name,
+      value,
+      onChange,
+      defaultChecked,
+      checked,
+      disabled,
+    };
+    checkbox = <CellCheckbox vkuiClass="Cell__checkbox" {...checkboxProps} />;
+  }
+
+  const simpleCellDisabled =
+    (draggable && !selectable) || removable || disabled;
+  const hasActive = !simpleCellDisabled && !dragging;
+
+  const cellClasses = classNames(getClassName("Cell", platform), {
+    "Cell--dragging": dragging,
+    "Cell--removable": removable,
+    "Cell--selectable": selectable,
+    "Cell--disabled": disabled,
+  });
+
+  const simpleCell = (
+    <SimpleCell
+      hasActive={hasActive}
+      hasHover={hasActive}
+      {...restProps}
+      vkuiClass="Cell__content"
+      disabled={simpleCellDisabled}
+      Component={selectable ? "label" : Component}
+      before={
+        <React.Fragment>
+          {draggable && (platform === ANDROID || platform === VKCOM) && dragger}
+          {selectable && checkbox}
+          {before}
+        </React.Fragment>
+      }
+      after={
+        <React.Fragment>
+          {draggable && platform === IOS && dragger}
+          {after}
+        </React.Fragment>
+      }
+    />
+  );
+
+  if (removable) {
+    return (
+      <Removable
+        vkuiClass={cellClasses}
+        className={className}
+        style={style}
+        getRootRef={rootElRef}
+        removePlaceholder={removePlaceholder}
+        onRemove={(e) => onRemove(e, rootElRef?.current)}
+      >
+        {simpleCell}
+      </Removable>
+    );
+  }
+
+  return (
+    <div
+      vkuiClass={cellClasses}
+      className={className}
+      style={style}
+      ref={rootElRef}
+    >
+      {simpleCell}
+    </div>
+  );
+};

package/src/components/Cell/CellCheckbox/CellCheckbox.css

@@ -0,0 +1,17 @@
+.CellCheckbox__icon {
+  color: var(--icon_tertiary);
+}
+
+.CellCheckbox__input,
+.CellCheckbox__icon {
+  display: none;
+}
+
+.CellCheckbox__icon--on {
+  color: var(--accent);
+}
+
+.CellCheckbox__input:not(:checked) ~ .CellCheckbox__icon--off,
+.CellCheckbox__input:checked ~ .CellCheckbox__icon--on {
+  display: block;
+}

package/src/components/Cell/CellCheckbox/CellCheckbox.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import {
+  Icon24CheckBoxOff,
+  Icon24CheckBoxOn,
+  Icon24CheckCircleOff,
+  Icon24CheckCircleOn,
+} from "@vkontakte/icons";
+import { getClassName } from "../../../helpers/getClassName";
+import { usePlatform } from "../../../hooks/usePlatform";
+import { classNames } from "../../../lib/classNames";
+import { ANDROID } from "../../../lib/platform";
+import { CellProps } from "../Cell";
+import "./CellCheckbox.css";
+
+export type CellCheckboxProps = Pick<CellProps, "defaultChecked" | "checked"> &
+  React.InputHTMLAttributes<HTMLInputElement>;
+
+export const CellCheckbox: React.FC<CellCheckboxProps> = ({
+  className,
+  style,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+
+  const IconOff =
+    platform === ANDROID ? Icon24CheckBoxOff : Icon24CheckCircleOff;
+
+  const IconOn = platform === ANDROID ? Icon24CheckBoxOn : Icon24CheckCircleOn;
+
+  return (
+    <div
+      vkuiClass={classNames(getClassName("CellCheckbox", platform))}
+      className={className}
+      style={style}
+    >
+      <input vkuiClass="CellCheckbox__input" type="checkbox" {...restProps} />
+      <IconOff vkuiClass="CellCheckbox__icon CellCheckbox__icon--off" />
+      <IconOn vkuiClass="CellCheckbox__icon CellCheckbox__icon--on" />
+    </div>
+  );
+};

package/src/components/Cell/CellDragger/CellDragger.css

@@ -0,0 +1,4 @@
+.CellDragger {
+  cursor: ns-resize;
+  color: var(--icon_secondary);
+}

package/src/components/Cell/CellDragger/CellDragger.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Icon24Reorder, Icon24ReorderIos } from "@vkontakte/icons";
+import { getClassName } from "../../../helpers/getClassName";
+import { usePlatform } from "../../../hooks/usePlatform";
+import { classNames } from "../../../lib/classNames";
+import { IOS } from "../../../lib/platform";
+import { Touch } from "../../Touch/Touch";
+import { DraggableProps } from "../useDraggable";
+import "./CellDragger.css";
+
+type CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;
+
+export const CellDragger: React.FC<CellDraggerProps> = ({
+  onDragStart,
+  onDragMove,
+  onDragEnd,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+
+  const onClick = React.useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+  }, []);
+
+  return (
+    <Touch
+      vkuiClass={classNames(getClassName("CellDragger", platform))}
+      onStart={onDragStart}
+      onMoveY={onDragMove}
+      onEnd={onDragEnd}
+      onClick={onClick}
+      {...restProps}
+    >
+      {platform === IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}
+    </Touch>
+  );
+};