@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Radio/Radio.css

@@ -0,0 +1,187 @@
+.Radio {
+  display: block;
+}
+
+.FormItem .Radio {
+  width: 100%;
+  box-sizing: content-box;
+  margin: 0 calc(-1 * var(--formitem_padding));
+}
+
+.Radio__input {
+  display: none;
+}
+
+.Radio__container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.Radio__input:disabled ~ .Radio__container {
+  opacity: 0.6;
+}
+
+.Radio__icon {
+  display: block;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border-radius: 50%;
+  position: relative;
+  width: 22px;
+  height: 22px;
+  border: 2px solid var(--icon_tertiary);
+  margin-right: 14px;
+  transition: border-color 0.15s var(--ios-easing);
+}
+
+.Radio__input:checked ~ .Radio__container .Radio__icon {
+  border-color: var(--accent);
+}
+
+.Radio__icon::after {
+  position: absolute;
+  content: "";
+  display: block;
+  border-radius: 50%;
+  box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  left: 2px;
+  top: 2px;
+  transform: scale(0.3);
+  transition: transform 0.15s var(--ios-easing);
+}
+
+.Radio__input:checked ~ .Radio__container .Radio__icon::after {
+  background-color: var(--accent);
+  transform: scale(1);
+}
+
+.Radio__content {
+  display: block;
+  flex-grow: 1;
+  max-width: 100%;
+  color: var(--text_primary);
+}
+
+.Radio__description {
+  display: block;
+  color: var(--text_secondary);
+  margin-bottom: 12px;
+  margin-top: 2px;
+}
+
+.Radio__children {
+  margin-top: 12px;
+}
+
+.Radio__children:last-child {
+  margin-bottom: 12px;
+}
+
+/**
+ * iOS
+ */
+
+.Radio--ios {
+  padding: 0 12px;
+}
+
+/**
+ * Android
+ */
+
+.Radio--android {
+  padding: 0 16px;
+}
+
+/**
+ * sizeY COMPACT
+ */
+
+.Radio--sizeY-compact .Radio__children {
+  margin-top: 8px;
+}
+
+.Radio--sizeY-compact .Radio__children:last-child {
+  margin-bottom: 8px;
+}
+
+.Radio--sizeY-compact .Radio__description {
+  margin-bottom: 7px;
+}
+
+.Radio--sizeY-compact .Radio__icon {
+  width: 18px;
+  height: 18px;
+}
+
+.Radio--sizeY-compact .Radio__icon::after {
+  top: 1px;
+  left: 1px;
+  width: 12px;
+  height: 12px;
+}
+
+/**
+ * VKCOM
+ */
+
+.Radio--vkcom {
+  padding: 0 16px;
+}
+
+.Radio--vkcom .Radio__icon {
+  width: 16px;
+  height: 16px;
+  margin: 2px 14px 2px 2px;
+  border: 1px solid var(--icon_secondary);
+  border-radius: 50%;
+  transition: border-color 0.5s var(--ios-easing);
+}
+
+.Radio--vkcom .Radio__icon::after {
+  width: 8px;
+  height: 8px;
+  left: 3px;
+  top: 3px;
+  transform: scale(0.3);
+  transition: transform 0.5s var(--ios-easing);
+}
+
+.Radio--vkcom .Radio__input:disabled ~ .Radio__container {
+  opacity: 0.4;
+}
+
+.Radio--vkcom .Radio__input:checked ~ .Radio__container .Radio__icon {
+  border-color: var(--accent);
+}
+
+.Radio--vkcom .Radio__input:checked ~ .Radio__container .Radio__icon::after {
+  background-color: var(--accent);
+  transform: scale(1);
+}
+
+.Radio--vkcom .Radio__children {
+  margin-top: 8px;
+}
+
+.Radio--vkcom .Radio__children:last-child {
+  margin-bottom: 8px;
+}
+
+.Radio--vkcom .Radio__description {
+  margin-top: 1px;
+  margin-bottom: 8px;
+}
+
+/**
+ * CMP:
+ * RadioGroup
+ */
+.RadioGroup .Radio {
+  flex: 1;
+  margin: 0;
+  box-sizing: border-box;
+}

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,82 @@
+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 { HasRef, HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import {
+  withAdaptivity,
+  AdaptivityProps,
+  SizeType,
+} from "../../hoc/withAdaptivity";
+import { hasReactNode } from "../../lib/utils";
+import { Caption } from "../Typography/Caption/Caption";
+import Headline from "../Typography/Headline/Headline";
+import Text from "../Typography/Text/Text";
+import "./Radio.css";
+
+export interface RadioProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    HasRef<HTMLInputElement>,
+    HasRootRef<HTMLLabelElement>,
+    AdaptivityProps {
+  description?: React.ReactNode;
+}
+
+const Radio: React.FC<RadioProps> = (props: RadioProps) => {
+  const {
+    children,
+    description,
+    style,
+    className,
+    getRef,
+    getRootRef,
+    sizeY,
+    ...restProps
+  } = props;
+  const platform = usePlatform();
+
+  const ContentComponent =
+    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
+
+  return (
+    <Tappable
+      Component="label"
+      style={style}
+      className={className}
+      vkuiClass={classNames(
+        getClassName("Radio", platform),
+        `Radio--sizeY-${sizeY}`
+      )}
+      activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}
+      disabled={restProps.disabled}
+      getRootRef={getRootRef}
+    >
+      <input
+        {...restProps}
+        type="radio"
+        vkuiClass="Radio__input"
+        ref={getRef}
+      />
+      <div vkuiClass="Radio__container">
+        <i vkuiClass="Radio__icon" role="presentation" />
+        <ContentComponent
+          weight="regular"
+          vkuiClass="Radio__content"
+          Component="div"
+        >
+          <div vkuiClass="Radio__children">{children}</div>
+          {hasReactNode(description) && (
+            <Caption vkuiClass="Radio__description">{description}</Caption>
+          )}
+        </ContentComponent>
+      </div>
+    </Tappable>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(Radio, {
+  sizeY: true,
+});

package/src/components/Radio/Readme.md

@@ -0,0 +1,29 @@
+Надстройка над `<input type="radio" />`. Компонент принимает все валидные для этого элемента свойства.
+
+```jsx
+<View activePanel="panel">
+  <Panel id="panel">
+    <PanelHeader>Radio</PanelHeader>
+    <Group>
+      <FormLayout>
+        <FormItem top="Откуда списать">
+          <Radio
+            name="radio"
+            value="1"
+            description="Баланс 7 320 ₽"
+            defaultChecked
+          >
+            VK Pay
+          </Radio>
+          <Radio name="radio" value="2">
+            Mastercard **** 1234
+          </Radio>
+          <Radio name="radio" value="3" description="Заблокирована" disabled>
+            Visa **** 4321
+          </Radio>
+        </FormItem>
+      </FormLayout>
+    </Group>
+  </Panel>
+</View>
+```

package/src/components/RadioGroup/RadioGroup.css

@@ -0,0 +1,12 @@
+.RadioGroup--horizontal {
+  display: flex;
+}
+
+/**
+ * CMP:
+ * FormItem
+ */
+.FormItem .RadioGroup {
+  margin: 0 calc(-1 * var(--formitem_padding));
+  box-sizing: content-box;
+}

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { classNames } from "../../lib/classNames";
+import "./RadioGroup.css";
+
+export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  mode?: "vertical" | "horizontal";
+}
+
+export const RadioGroup: React.FC<RadioGroupProps> = ({
+  mode = "vertical",
+  children,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+
+  return (
+    <div
+      vkuiClass={classNames(
+        getClassName("RadioGroup", platform),
+        `RadioGroup--${mode}`
+      )}
+      {...restProps}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/RadioGroup/Readme.md

@@ -0,0 +1,56 @@
+Помогает сгруппировать несколько `Radio`, расположив их по горизонтали или вертикали.
+
+```jsx
+<View activePanel="panel">
+  <Panel id="panel">
+    <PanelHeader>RadioGroup</PanelHeader>
+    <Group header={<Header>Внутри FormItem</Header>}>
+      <FormLayout>
+        <FormItem top="Выберите посадку">
+          <RadioGroup>
+            <Radio name="fit" value="classic" defaultChecked>
+              Classic
+            </Radio>
+            <Radio name="fit" value="regular">
+              Regular
+            </Radio>
+            <Radio name="fit" value="slim" disabled description="Нет в наличии">
+              Slim
+            </Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem top="Выберите размер">
+          <RadioGroup mode="horizontal">
+            <Radio name="size" value="sm">
+              S-M
+            </Radio>
+            <Radio name="size" value="lxl">
+              L-XL
+            </Radio>
+          </RadioGroup>
+        </FormItem>
+      </FormLayout>
+    </Group>
+    <Group header={<Header>Без FormItem</Header>}>
+      <FormLayout>
+        <RadioGroup mode="horizontal">
+          <Radio name="pay" value="cash">
+            Оплата наличными
+          </Radio>
+          <Radio name="pay" value="card">
+            Оплата картой
+          </Radio>
+        </RadioGroup>
+        <RadioGroup>
+          <Radio name="delivery" value="courier">
+            Курьерская доставка
+          </Radio>
+          <Radio name="delivery" value="pickup">
+            Доставка в пункт выдачи заказов
+          </Radio>
+        </RadioGroup>
+      </FormLayout>
+    </Group>
+  </Panel>
+</View>
+```

package/src/components/RangeSlider/RangeSlider.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { clamp } from "../../helpers/math";
+import { UniversalSlider, UniversalSliderProps } from "./UniversalSlider";
+
+export type Value = [number, number];
+export type RangeSliderProps = UniversalSliderProps<Value>;
+
+const RangeSlider: React.FC<RangeSliderProps> = ({
+  onChange,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 0,
+  ...props
+}: RangeSliderProps) => {
+  const isControlled = Boolean(props.value);
+
+  const [localValue, setValue] = React.useState(
+    defaultValue || ([min, max] as Value)
+  );
+  const [start, end] = props.value || localValue;
+  const value = React.useMemo(
+    () => [clamp(start, min, max), clamp(end, min, max)] as Value,
+    [end, max, min, start]
+  );
+
+  const handleChange: RangeSliderProps["onChange"] = React.useCallback(
+    (nextValue, event) => {
+      if (
+        props.disabled ||
+        (value[0] === nextValue[0] && value[1] === nextValue[1])
+      ) {
+        return;
+      }
+      !isControlled && setValue(nextValue);
+      onChange && onChange(nextValue, event);
+    },
+    [props.disabled, value, isControlled, onChange]
+  );
+
+  return (
+    <UniversalSlider
+      {...props}
+      value={value}
+      onChange={handleChange}
+      min={min}
+      max={max}
+      step={step}
+    />
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default RangeSlider;

package/src/components/RangeSlider/Readme.md

@@ -0,0 +1,32 @@
+Принимает те же свойства, что и обычный слайдер, за исключением `value` и `defaultValue`.
+Они должны переданы в виде массива `[startValue, endValue]`. `onChange` так же возвращает подобный массив.
+
+```jsx
+class Example extends React.Component {
+  render() {
+    return (
+      <View activePanel="slider">
+        <Panel id="slider">
+          <PanelHeader>RangerSlider</PanelHeader>
+          <Group>
+            <FormItem top="Uncontrolled">
+              <RangeSlider min={10} max={20} step={1} defaultValue={[12, 16]} />
+            </FormItem>
+            <FormItem top="Disabled">
+              <RangeSlider
+                min={10}
+                max={20}
+                step={1}
+                defaultValue={[12, 16]}
+                disabled
+              />
+            </FormItem>
+          </Group>
+        </Panel>
+      </View>
+    );
+  }
+}
+
+<Example />;
+```

package/src/components/RangeSlider/UniversalSlider.tsx

@@ -0,0 +1,162 @@
+import * as React from "react";
+import { Touch, TouchEvent, TouchEventHandler } from "../Touch/Touch";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { HasRootRef } from "../../types";
+import { rescale } from "../../helpers/math";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { useExternRef } from "../../hooks/useExternRef";
+import { usePlatform } from "../../hooks/usePlatform";
+import "../Slider/Slider.css";
+
+export type UniversalValue = [number | null, number];
+
+export interface UniversalSliderProps<Value>
+  extends HasRootRef<HTMLDivElement>,
+    Omit<
+      React.HTMLAttributes<HTMLDivElement>,
+      "value" | "defaultValue" | "onChange"
+    >,
+    AdaptivityProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: Value;
+  defaultValue?: Value;
+  disabled?: boolean;
+  onChange?(value: Value, e: TouchEvent): void;
+}
+
+const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
+  min = 0,
+  max = 100,
+  step,
+  value = [0, 0],
+  defaultValue,
+  onChange,
+  getRootRef,
+  sizeY,
+  disabled,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+  const [start, end] = value;
+  const isRange = start != null;
+  const gesture = React.useRef({
+    dragging: false as false | "start" | "end",
+    startX: 0,
+    containerWidth: 0,
+  }).current;
+  const container = useExternRef(getRootRef);
+  const thumbStart = React.useRef<HTMLDivElement>(null);
+  const thumbEnd = React.useRef<HTMLDivElement>(null);
+
+  const offsetToValue = (absolute: number) => {
+    return rescale(absolute, [0, gesture.containerWidth], [min, max], { step });
+  };
+
+  const updateRange = (nextValue: number): UniversalValue => {
+    if (start == null) {
+      return [null, nextValue];
+    }
+
+    const { dragging } = gesture;
+    if (dragging === "start") {
+      if (nextValue > end) {
+        // "перехватиться", если перетянули за конец
+        gesture.dragging = "end";
+        return [end, nextValue];
+      }
+      return [nextValue, end];
+    }
+    if (dragging === "end") {
+      if (nextValue < start) {
+        // "перехватиться", если перетянули за начало
+        gesture.dragging = "start";
+        return [nextValue, start];
+      }
+      return [start, nextValue];
+    }
+
+    return value;
+  };
+
+  const snapDirection = (pos: number, target: EventTarget | null) => {
+    if (target === thumbStart.current) {
+      return "start";
+    }
+    if (target === thumbEnd.current) {
+      return "end";
+    }
+    return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos)
+      ? "start"
+      : "end";
+  };
+
+  const onStart: TouchEventHandler = (e: TouchEvent) => {
+    const boundingRect = container.current?.getBoundingClientRect();
+    gesture.containerWidth = boundingRect?.width ?? 0;
+
+    const absolutePosition = e.startX - (boundingRect?.left ?? 0);
+    const pos = offsetToValue(absolutePosition);
+    gesture.dragging = snapDirection(pos, e.originalEvent.target);
+    gesture.startX = absolutePosition;
+
+    onChange?.(updateRange(pos), e);
+    e.originalEvent.stopPropagation();
+  };
+
+  const onMove: TouchEventHandler = (e: TouchEvent) => {
+    onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);
+
+    e.originalEvent.stopPropagation();
+    e.originalEvent.preventDefault();
+  };
+
+  const onEnd: TouchEventHandler = (e) => {
+    gesture.dragging = false;
+    e.originalEvent.stopPropagation();
+  };
+
+  const toPercent = (v: number) => ((v - min) / (max - min)) * 100;
+  const draggerStyle = isRange
+    ? {
+        width: `${toPercent(end) - toPercent(start ?? 0)}%`,
+        left: `${toPercent(start ?? 0)}%`,
+      }
+    : {
+        width: `${toPercent(end)}%`,
+      };
+
+  return (
+    <Touch
+      data-value={isRange ? value.join(",") : value}
+      {...restProps}
+      {...(disabled ? {} : { onStart, onMove, onEnd })}
+      vkuiClass={classNames(
+        getClassName("Slider", platform),
+        `Slider--sizeY-${sizeY}`,
+        disabled && "Slider--disabled"
+      )}
+    >
+      <div ref={container} vkuiClass="Slider__in">
+        <div vkuiClass="Slider__dragger" style={draggerStyle}>
+          {isRange && (
+            <span
+              vkuiClass={classNames("Slider__thumb", "Slider__thumb--start")}
+              ref={thumbStart}
+            />
+          )}
+          <span
+            vkuiClass={classNames("Slider__thumb", "Slider__thumb--end")}
+            ref={thumbEnd}
+          />
+        </div>
+      </div>
+    </Touch>
+  );
+};
+
+export const UniversalSlider = withAdaptivity(UniversalSliderDumb, {
+  sizeY: true,
+});