@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/SimpleCell/SimpleCell.tsx

@@ -1,132 +0,0 @@
-import * as React from "react";
-import { HasComponent } from "../../types";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
-import { Icon24Chevron } from "@vkontakte/icons";
-import { ANDROID, IOS } from "../../lib/platform";
-import { usePlatform } from "../../hooks/usePlatform";
-import { hasReactNode } from "../../lib/utils";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
-import Title from "../Typography/Title/Title";
-import Text from "../Typography/Text/Text";
-import Subhead from "../Typography/Subhead/Subhead";
-import Headline from "../Typography/Headline/Headline";
-import "./SimpleCell.css";
-
-export interface SimpleCellOwnProps extends HasComponent {
-  /**
-   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`
-   */
-  before?: React.ReactNode;
-  /**
-   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.
-   */
-  badge?: React.ReactNode;
-  /**
-   * Контейнер для текста справа от `children`.
-   */
-  indicator?: React.ReactNode;
-  /**
-   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.
-   */
-  after?: React.ReactNode;
-  /**
-   * Контейнер для текста под `children`.
-   */
-  description?: React.ReactNode;
-  /**
-   * Убирает анимацию нажатия
-   */
-  disabled?: boolean;
-  /**
-   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.
-   */
-  expandable?: boolean;
-  multiline?: boolean;
-}
-
-export interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}
-
-type SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> &
-  HasComponent;
-
-const SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (
-  props: SimpleCellTypographyProps
-) => {
-  const { sizeY } = useAdaptivity();
-  const platform = usePlatform();
-
-  if (sizeY === SizeType.COMPACT) {
-    return <Text Component="span" weight="regular" {...props} />;
-  } else if (platform === ANDROID) {
-    return <Headline Component="span" weight="regular" {...props} />;
-  } else {
-    return <Title Component="span" level="3" weight="3" {...props} />;
-  }
-};
-
-const SimpleCell: React.FC<SimpleCellProps> = ({
-  badge,
-  before,
-  indicator,
-  children,
-  after,
-  description,
-  expandable,
-  multiline,
-  sizeY,
-  ...restProps
-}: SimpleCellProps) => {
-  const platform = usePlatform();
-  const hasAfter = hasReactNode(after) || (expandable && platform === IOS);
-
-  return (
-    <Tappable
-      {...restProps}
-      vkuiClass={classNames(
-        getClassName("SimpleCell", platform),
-        {
-          "SimpleCell--exp": expandable,
-          "SimpleCell--mult": multiline,
-        },
-        `SimpleCell--sizeY-${sizeY}`
-      )}
-    >
-      {before}
-      <div vkuiClass="SimpleCell__main">
-        <div vkuiClass="SimpleCell__content">
-          <SimpleCellTypography vkuiClass="SimpleCell__children">
-            {children}
-          </SimpleCellTypography>
-          {hasReactNode(badge) && (
-            <span vkuiClass="SimpleCell__badge">{badge}</span>
-          )}
-        </div>
-        {description && (
-          <Subhead Component="span" vkuiClass="SimpleCell__description">
-            {description}
-          </Subhead>
-        )}
-      </div>
-      {hasReactNode(indicator) && (
-        <SimpleCellTypography
-          Component="span"
-          vkuiClass="SimpleCell__indicator"
-        >
-          {indicator}
-        </SimpleCellTypography>
-      )}
-      {hasAfter && (
-        <div vkuiClass="SimpleCell__after">
-          {after}
-          {expandable && platform === IOS && <Icon24Chevron />}
-        </div>
-      )}
-    </Tappable>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(SimpleCell, { sizeY: true });

package/src/components/SimpleCheckbox/Readme.md

@@ -1,25 +0,0 @@
-Надстройка над `<input type="checkbox" />`. Компонент принимает все валидные для этого элемента свойства.
-
-Компонент является упрощенной версией обычного чекбокса `Checkbox` и предназначен для использования внутри других блоков таких как таблицы
-
-> **Важно**
->
-> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильный компоненты](#/Unstable).
-
-```jsx { "props": { "layout": false, "iframe": false } }
-<div
-  style={{
-    display: "flex",
-    alignItems: "center",
-    flexDirection: "row",
-    padding: "24px 16px",
-    background: "white",
-  }}
->
-  <SimpleCheckbox defaultChecked style={{ margin: "0 10px" }} />
-  <SimpleCheckbox style={{ margin: "0 10px" }} />
-  <SimpleCheckbox defaultChecked style={{ margin: "0 10px" }} />
-  <SimpleCheckbox indeterminate style={{ margin: "0 10px" }} />
-  <SimpleCheckbox defaultIndeterminate style={{ margin: "0 10px" }} />
-</div>
-```

package/src/components/SimpleCheckbox/SimpleCheckbox.css

@@ -1,129 +0,0 @@
-.SimpleCheckbox {
-  display: block;
-  margin: -10px;
-  padding: 10px;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-}
-
-.SimpleCheckbox__input {
-  position: absolute;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-.SimpleCheckbox__container {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-}
-
-.SimpleCheckbox__icon {
-  flex-shrink: 0;
-  margin: 0;
-  box-sizing: border-box;
-  border-radius: 4px;
-  display: flex;
-}
-
-.SimpleCheckbox__icon--on {
-  color: var(--accent);
-  display: none;
-}
-
-.SimpleCheckbox__icon--indeterminate {
-  color: var(--accent);
-  display: none;
-}
-
-.SimpleCheckbox__icon--off {
-  color: var(--icon_tertiary);
-}
-
-.SimpleCheckbox__input:checked
-  ~ .SimpleCheckbox__container
-  .SimpleCheckbox__icon--on {
-  display: flex;
-}
-
-.SimpleCheckbox__input:indeterminate
-  ~ .SimpleCheckbox__container
-  .SimpleCheckbox__icon--indeterminate,
-.SimpleCheckbox__input:checked
-  ~ .SimpleCheckbox__container
-  .SimpleCheckbox__icon--off {
-  display: none;
-}
-
-.SimpleCheckbox__input:indeterminate
-  ~ .SimpleCheckbox__container
-  .SimpleCheckbox__icon--indeterminate {
-  display: flex;
-}
-
-.SimpleCheckbox__input:indeterminate
-  ~ .SimpleCheckbox__container
-  .SimpleCheckbox__icon--on,
-.SimpleCheckbox__input:indeterminate
-  ~ .SimpleCheckbox__container
-  .SimpleCheckbox__icon--off {
-  display: none;
-}
-
-.SimpleCheckbox__input[disabled] ~ .SimpleCheckbox__container {
-  opacity: 0.6;
-}
-
-.SimpleCheckbox--ios.SimpleCheckbox--sizeY-compact,
-.SimpleCheckbox--android.SimpleCheckbox--sizeY-compact {
-  margin: -8px;
-  padding: 8px;
-  width: 20px;
-  height: 20px;
-}
-
-.SimpleCheckbox--vkcom {
-  margin: 0;
-  padding: 0;
-  width: 22px;
-  height: 22px;
-  border-radius: 4px;
-}
-
-.SimpleCheckbox--vkcom .SimpleCheckbox__activeShadow,
-.SimpleCheckbox--vkcom .SimpleCheckbox__hoverShadow {
-  margin: 3px;
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-  overflow: hidden;
-  border-radius: inherit;
-  transition: inherit;
-}
-
-.SimpleCheckbox--vkcom.SimpleCheckbox--active .SimpleCheckbox__activeShadow {
-  background-color: var(--background_highlighted);
-}
-
-.SimpleCheckbox--vkcom.SimpleCheckbox--hover .SimpleCheckbox__hoverShadow {
-  background-color: var(--background_hover);
-}
-
-.SimpleCheckbox--vkcom .SimpleCheckbox__icon {
-  border-radius: 3px;
-  padding: 1px;
-  border-width: 1px;
-}
-
-.SimpleCheckbox--vkcom
-  .SimpleCheckbox__input[disabled]
-  ~ .SimpleCheckbox__container {
-  opacity: 0.4;
-}

package/src/components/SimpleCheckbox/SimpleCheckbox.tsx

@@ -1,146 +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,
-  Icon20CheckBoxIndetermanate,
-} from "@vkontakte/icons";
-
-import { HasRef, HasRootRef } from "../../types";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { useExternRef } from "../../hooks/useExternRef";
-import { SizeType } from "../../hoc/withAdaptivity";
-import { warnOnce } from "../../lib/warnOnce";
-
-import "./SimpleCheckbox.css";
-
-const warn = warnOnce("SimpleCheckbox");
-const IS_DEV = process.env.NODE_ENV === "development";
-
-export interface SimpleCheckboxProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
-    HasRootRef<HTMLLabelElement>,
-    HasRef<HTMLInputElement> {
-  indeterminate?: boolean;
-  defaultIndeterminate?: boolean;
-}
-
-export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (
-  props: SimpleCheckboxProps
-) => {
-  const {
-    className,
-    style,
-    getRootRef,
-    getRef,
-    indeterminate,
-    defaultIndeterminate,
-    onChange,
-    ...restProps
-  } = props;
-  const { sizeY } = useAdaptivity();
-  const platform = usePlatform();
-  const inputRef = useExternRef(getRef);
-
-  React.useEffect(() => {
-    const indeterminateValue =
-      indeterminate === undefined ? defaultIndeterminate : indeterminate;
-
-    if (inputRef.current) {
-      inputRef.current.indeterminate = Boolean(indeterminateValue);
-    }
-  }, [defaultIndeterminate, indeterminate, inputRef]);
-
-  const handleChange: SimpleCheckboxProps["onChange"] = React.useCallback(
-    (event) => {
-      if (
-        defaultIndeterminate !== undefined &&
-        indeterminate === undefined &&
-        restProps.checked === undefined &&
-        inputRef.current
-      ) {
-        inputRef.current.indeterminate = false;
-      }
-      if (indeterminate !== undefined && inputRef.current) {
-        inputRef.current.indeterminate = indeterminate;
-      }
-      onChange && onChange(event);
-    },
-    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]
-  );
-
-  if (IS_DEV) {
-    if (defaultIndeterminate && restProps.defaultChecked) {
-      warn(
-        "defaultIndeterminate and defaultChecked cannot be true at the same time"
-      );
-    }
-
-    if (indeterminate && restProps.checked) {
-      warn("indeterminate and checked cannot be true at the same time");
-    }
-  }
-
-  return (
-    <Tappable
-      Component="label"
-      vkuiClass={classNames(
-        getClassName("SimpleCheckbox", platform),
-        `SimpleCheckbox--sizeY-${sizeY}`
-      )}
-      className={className}
-      style={style}
-      disabled={restProps.disabled}
-      activeMode={platform === VKCOM ? "SimpleCheckbox--active" : "background"}
-      hoverMode={platform === VKCOM ? "SimpleCheckbox--hover" : "background"}
-      activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}
-      getRootRef={getRootRef}
-    >
-      <input
-        {...restProps}
-        onChange={handleChange}
-        type="checkbox"
-        vkuiClass="SimpleCheckbox__input"
-        ref={inputRef}
-      />
-      <div vkuiClass="SimpleCheckbox__container">
-        <div vkuiClass="SimpleCheckbox__icon SimpleCheckbox__icon--on">
-          {sizeY === SizeType.COMPACT || platform === VKCOM ? (
-            <Icon20CheckBoxOn />
-          ) : (
-            <Icon24CheckBoxOn />
-          )}
-        </div>
-        <div vkuiClass="SimpleCheckbox__icon SimpleCheckbox__icon--off">
-          {sizeY === SizeType.COMPACT || platform === VKCOM ? (
-            <Icon20CheckBoxOff />
-          ) : (
-            <Icon24CheckBoxOff />
-          )}
-        </div>
-        <div vkuiClass="SimpleCheckbox__icon SimpleCheckbox__icon--indeterminate">
-          <Icon20CheckBoxIndetermanate
-            width={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}
-            height={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}
-          />
-        </div>
-      </div>
-      {platform === VKCOM && (
-        <div aria-hidden={true} vkuiClass="SimpleCheckbox__activeShadow" />
-      )}
-      {platform === VKCOM && (
-        <div aria-hidden={true} vkuiClass="SimpleCheckbox__hoverShadow" />
-      )}
-    </Tappable>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default SimpleCheckbox;

package/src/components/Slider/Readme.md

@@ -1,83 +0,0 @@
-```jsx
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      value1: 24.4234,
-      value2: 0.2,
-      value3: 20,
-      value4: 15,
-    };
-  }
-
-  options() {
-    let options = [];
-    for (let i = 0; i <= 10; i += 2) {
-      options.push({ value: `${i / 10}`, label: `${i / 10}` });
-    }
-    return options;
-  }
-
-  render() {
-    return (
-      <View activePanel="slider">
-        <Panel id="slider">
-          <PanelHeader>Slider</PanelHeader>
-          <Group>
-            <FormItem top="Simple [10, 30]">
-              <Slider
-                min={10}
-                max={30}
-                value={Number(this.state.value1)}
-                onChange={(value1) => this.setState({ value1 })}
-              />
-            </FormItem>
-            <FormItem>
-              <Input
-                value={String(this.state.value1)}
-                onChange={(e) => this.setState({ value1: e.target.value })}
-                type="number"
-              />
-            </FormItem>
-            <FormItem top="Step [0, 1]">
-              <Slider
-                step={0.2}
-                min={0}
-                max={1}
-                value={Number(this.state.value2)}
-                onChange={(value2) => this.setState({ value2 })}
-              />
-            </FormItem>
-            <FormItem>
-              <Select
-                onChange={(e) => this.setState({ value2: e.target.value })}
-                value={String(this.state.value2)}
-                options={this.options()}
-              />
-            </FormItem>
-            <FormItem top="Uncontrolled">
-              <Slider
-                onChange={(value3) => this.setState({ value3 })}
-                defaultValue={this.state.value3}
-                bottom={`${this.state.value3}`}
-              />
-            </FormItem>
-            <FormItem top="Disabled">
-              <Slider
-                min={10}
-                max={30}
-                defaultValue={this.state.value4}
-                onChange={(value4) => this.setState({ value4 })}
-                disabled
-              />
-            </FormItem>
-          </Group>
-        </Panel>
-      </View>
-    );
-  }
-}
-
-<Example />;
-```

package/src/components/Slider/Slider.css

@@ -1,145 +0,0 @@
-.Slider {
-  position: relative;
-  z-index: 0;
-  height: 28px;
-  padding: 0 14px;
-}
-
-.Slider::before {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  background-color: var(--placeholder_icon_background);
-  content: "";
-  z-index: -1;
-  top: 13px;
-  height: 2px;
-  border-radius: 1px;
-}
-
-.Slider__in {
-  height: 100%;
-  position: relative;
-}
-
-.Slider__dragger {
-  position: absolute;
-  left: 0;
-  width: 0;
-  height: 0;
-  top: 13px;
-}
-
-.Slider__dragger::before {
-  position: absolute;
-  top: 0;
-  width: calc(100% + 28px);
-  background: var(--accent);
-  content: "";
-  left: -14px;
-  height: 2px;
-  border-radius: 1px;
-}
-
-.Slider__thumb {
-  position: absolute;
-  top: -13px;
-  width: 28px;
-  height: 28px;
-  transition: transform 0.1s ease;
-  border-radius: 14px;
-  background: var(--white);
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
-}
-
-.Slider__thumb--start {
-  left: -14px;
-}
-
-.Slider__thumb--end {
-  right: -14px;
-}
-
-.Slider--disabled {
-  opacity: 0.4;
-}
-
-/**
- * sizeY COMPACT
- */
-
-.Slider--sizeY-compact {
-  height: 24px;
-  padding: 0 12px;
-}
-
-.Slider--sizeY-compact::before {
-  top: 11px;
-}
-
-.Slider--sizeY-compact .Slider__dragger {
-  top: 11px;
-}
-
-.Slider--sizeY-compact .Slider__dragger::before {
-  width: calc(100% + 24px);
-  left: -12px;
-}
-
-.Slider--sizeY-compact .Slider__thumb {
-  top: -11px;
-  width: 24px;
-  height: 24px;
-}
-
-.Slider--sizeY-compact .Slider__thumb--start {
-  left: -12px;
-}
-
-.Slider--sizeY-compact .Slider__thumb--end {
-  right: -12px;
-}
-
-/**
- * VKCOM
- */
-.Slider--vkcom {
-  height: 20px;
-  padding: 0 10px;
-}
-
-.Slider--vkcom::before {
-  top: 8px;
-  height: 4px;
-  border-radius: 2px;
-}
-
-.Slider--vkcom .Slider__dragger {
-  top: 8px;
-}
-
-.Slider--vkcom .Slider__dragger::before {
-  width: calc(100% + 20px);
-  background: var(--accent);
-  left: -10px;
-  height: 4px;
-  border-radius: 2px;
-}
-
-.Slider--vkcom .Slider__thumb {
-  top: -8px;
-  width: 20px;
-  height: 20px;
-  border-radius: 10px;
-  border: 1px solid var(--input_border);
-  box-shadow: 0 0 2px var(--separator_common), 0 2px 4px var(--separator_common);
-  box-sizing: border-box;
-}
-
-.Slider--vkcom .Slider__thumb--start {
-  left: -10px;
-}
-
-.Slider--vkcom .Slider__thumb--end {
-  right: -10px;
-}

package/src/components/Slider/Slider.tsx

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