@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/SimpleCell/SimpleCell.tsx

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

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

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

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

package/src/components/Slider/Readme.md

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

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

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