@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/Radio/Radio.tsx

@@ -1,89 +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 { 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
-              level="1"
-              Component="span"
-              weight="regular"
-              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

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

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

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

@@ -1,56 +0,0 @@
-Помогает сгруппировать несколько `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

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

@@ -1,32 +0,0 @@
-Принимает те же свойства, что и обычный слайдер, за исключением `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

@@ -1,162 +0,0 @@
-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,
-});

package/src/components/Removable/Removable.css

@@ -1,125 +0,0 @@
-.Removable__content {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding-left: var(--formitem_padding);
-}
-
-.Removable__action {
-  position: relative;
-  flex-grow: 0;
-  flex-shrink: 0;
-  border: none;
-}
-
-.Removable--start .Removable__action {
-  align-self: flex-start;
-}
-
-.FormItem--removable.FormItem--withTop .Removable__action,
-.FormLayoutGroup--removable .FormItem--withTop ~ .Removable__action {
-  top: 28px;
-}
-
-.FormItem--sizeY-compact.FormItem--removable.FormItem--withTop
-  .Removable__action,
-.FormLayoutGroup--sizeY-compact.FormLayoutGroup--removable
-  .FormItem--withTop
-  ~ .Removable__action {
-  top: 26px;
-}
-
-/**
- * iOS
- */
-.Removable--ios {
-  overflow: hidden;
-}
-
-.Removable__remove {
-  position: absolute;
-  left: 100%;
-  top: 0;
-  height: 100%;
-  padding: 0 10px;
-  font-size: 15px;
-  line-height: 45px;
-  color: var(--white);
-  background-color: var(--destructive);
-  border: none;
-  border-radius: 0;
-}
-
-.Removable__remove-in {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .Removable--ios .Removable__content {
-    transition: transform 0.6s var(--ios-easing);
-  }
-}
-
-.Removable__toggle {
-  display: block;
-  width: 44px;
-  height: 44px;
-  margin: 0 2px;
-  background: none;
-}
-
-.Removable__toggle-in {
-  position: relative;
-  display: flex;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border: none;
-}
-
-.Removable__toggle-in::after {
-  content: "";
-  width: 22px;
-  height: 22px;
-  background-color: var(--destructive);
-  border-radius: 50%;
-}
-
-.Removable__toggle-in::before {
-  content: "";
-  position: absolute;
-  display: block;
-  width: 12px;
-  height: 2px;
-  background-color: var(--white);
-}
-
-.Removable--ios .Removable__content {
-  padding-left: 0;
-  padding-right: var(--formitem_padding);
-}
-
-.FormLayoutGroup--removable .Removable__content {
-  flex-wrap: wrap;
-}
-
-.FormLayoutGroup--removable
-  .FormItem--ios.FormItem--withTop
-  ~ .Removable__offset {
-  order: -1;
-  display: block;
-  width: 100%;
-  height: 28px;
-}
-
-.FormLayoutGroup--removable.FormLayoutGroup--sizeY-compact
-  .FormItem--ios.FormItem--withTop
-  ~ .Removable__offset {
-  height: 26px;
-}