@vkontakte/vkui 4.29.1 → 4.32.0

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -1,51 +1,88 @@
+import { DOMProps, useDOM } from "../../lib/dom";
 import * as React from "react";
-import { DOMProps, withDOM } from "../../lib/dom";
-import { multiRef, setRef } from "../../lib/utils";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { useEventListener } from "../../hooks/useEventListener";
 import "./CustomScrollView.css";
 
-interface Props extends DOMProps {
+export interface CustomScrollViewProps extends DOMProps {
   windowResize?: boolean;
   boxRef?: React.Ref<HTMLDivElement>;
   className?: HTMLDivElement["className"];
+  children: React.ReactNode;
 }
 
-class CustomScrollView extends React.Component<Props> {
-  private ratio = NaN;
-  private lastTrackerTop = 0;
-  private clientHeight = 0;
-  private trackerHeight = 0;
-  private scrollHeight = 0;
-  private transformProp = "";
-
-  private startY = 0;
-  private trackerTop = 0;
-
-  private readonly box = multiRef<HTMLDivElement>((e) =>
-    setRef(e, this.props.boxRef)
-  );
-  private readonly barY = React.createRef<HTMLDivElement>();
-  private readonly trackerY = React.createRef<HTMLDivElement>();
-
-  componentDidMount() {
-    this.chooseTransformProp();
+export const CustomScrollView = ({
+  className,
+  children,
+  boxRef: externalBoxRef,
+  windowResize,
+}: CustomScrollViewProps) => {
+  const { document, window } = useDOM();
+
+  const ratio = React.useRef(NaN);
+  const lastTrackerTop = React.useRef(0);
+  const clientHeight = React.useRef(0);
+  const trackerHeight = React.useRef(0);
+  const scrollHeight = React.useRef(0);
+  const transformProp = React.useRef("");
+  const startY = React.useRef(0);
+  const trackerTop = React.useRef(0);
+
+  const boxRef = useExternRef(externalBoxRef);
+
+  const barY = React.useRef<HTMLDivElement>(null);
+  const trackerY = React.useRef<HTMLDivElement>(null);
+
+  const setTrackerPosition = (scrollTop: number) => {
+    lastTrackerTop.current = scrollTop;
+    if (trackerY.current !== null) {
+      (trackerY.current.style as any)[
+        transformProp.current
+      ] = `translate(0, ${scrollTop}px)`;
+    }
+  };
 
-    this.resize();
+  const setTrackerPositionFromScroll = (scrollTop: number) => {
+    const progress = scrollTop / (scrollHeight.current - clientHeight.current);
+    setTrackerPosition(
+      (clientHeight.current - trackerHeight.current) * progress
+    );
+  };
 
-    if (this.props.windowResize) {
-      this.props.window!.addEventListener("resize", this.resize);
+  const resize = () => {
+    if (!boxRef.current || !barY.current || !trackerY.current) {
+      return;
     }
-  }
+    const localClientHeight = boxRef.current.clientHeight;
+    const localScrollHeight = boxRef.current.scrollHeight;
+    const localRatio = localClientHeight / localScrollHeight;
+    const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);
+
+    ratio.current = localRatio;
+    clientHeight.current = localClientHeight;
+    scrollHeight.current = localScrollHeight;
+    trackerHeight.current = localTrackerHeight;
+
+    if (localRatio >= 1) {
+      barY.current.style.display = "none";
+    } else {
+      barY.current.style.display = "";
+      trackerY.current.style.height = `${localTrackerHeight}px`;
+      setTrackerPositionFromScroll(boxRef.current.scrollTop);
+    }
+  };
 
-  componentDidUpdate() {
-    this.resize();
-  }
+  const resizeHandler = useEventListener("resize", resize);
 
-  componentWillUnmount() {
-    this.props.window!.removeEventListener("resize", this.resize);
-  }
+  useIsomorphicLayoutEffect(() => {
+    if (windowResize && window) {
+      resizeHandler.add(window);
+    }
+  }, [windowResize, window]);
 
-  chooseTransformProp() {
-    let style = this.trackerY.current?.style;
+  useIsomorphicLayoutEffect(() => {
+    let style = trackerY.current?.style;
     let prop = "";
     if (style !== undefined) {
       if ("transform" in style) {
@@ -54,115 +91,85 @@ class CustomScrollView extends React.Component<Props> {
         prop = "webkitTransform";
       }
     }
-    this.transformProp = prop;
-  }
+    transformProp.current = prop;
+  }, []);
 
-  resize = () => {
-    if (!this.box.current || !this.barY.current || !this.trackerY.current) {
-      return;
-    }
-    const clientHeight = this.box.current.clientHeight;
-    const scrollHeight = this.box.current.scrollHeight;
-    let ratio = clientHeight / scrollHeight;
-    let trackerHeight = Math.max(clientHeight * ratio, 40);
-
-    this.ratio = ratio;
-    this.clientHeight = clientHeight;
-    this.scrollHeight = scrollHeight;
-    this.trackerHeight = trackerHeight;
-
-    if (ratio >= 1) {
-      this.barY.current.style.display = "none";
-    } else {
-      this.barY.current.style.display = "";
-      this.trackerY.current.style.height = `${trackerHeight}px`;
-      this.setTrackerPositionFromScroll(this.box.current.scrollTop);
+  useIsomorphicLayoutEffect(resize);
+
+  const setScrollPositionFromTracker = (trackerTop: number) => {
+    const progress =
+      trackerTop / (clientHeight.current - trackerHeight.current);
+    if (boxRef.current !== null) {
+      boxRef.current.scrollTop =
+        (scrollHeight.current - clientHeight.current) * progress;
     }
   };
 
-  scroll = () => {
-    if (this.ratio >= 1 || !this.box.current) {
-      return;
-    }
+  const onMove = (e: MouseEvent) => {
+    e.preventDefault();
+    const diff = e.clientY - startY.current;
+    const position = Math.min(
+      Math.max(trackerTop.current + diff, 0),
+      clientHeight.current - trackerHeight.current
+    );
 
-    this.setTrackerPositionFromScroll(this.box.current.scrollTop);
+    setScrollPositionFromTracker(position);
   };
 
-  setTrackerPosition(scrollTop: number) {
-    this.lastTrackerTop = scrollTop;
-    if (this.trackerY.current !== null) {
-      (this.trackerY.current.style as any)[
-        this.transformProp
-      ] = `translate(0, ${scrollTop}px)`;
+  const onUp = (e: MouseEvent) => {
+    e.preventDefault();
+    unsubscribe();
+  };
+
+  const scroll = () => {
+    if (ratio.current >= 1 || !boxRef.current) {
+      return;
     }
-  }
 
-  setTrackerPositionFromScroll(scrollTop: number) {
-    const progress = scrollTop / (this.scrollHeight - this.clientHeight);
-    this.setTrackerPosition(
-      (this.clientHeight - this.trackerHeight) * progress
-    );
-  }
+    setTrackerPositionFromScroll(boxRef.current.scrollTop);
+  };
+
+  const listeners = [
+    useEventListener("mousemove", onMove),
+    useEventListener("mouseup", onUp),
+  ];
 
-  setScrollPositionFromTracker(trackerTop: number) {
-    const progress = trackerTop / (this.clientHeight - this.trackerHeight);
-    if (this.box.current !== null) {
-      this.box.current.scrollTop =
-        (this.scrollHeight - this.clientHeight) * progress;
+  function subscribe(el: Document | undefined) {
+    if (el) {
+      listeners.forEach((l) => l.add(el));
     }
   }
 
-  onDragStart = (e: React.MouseEvent) => {
-    e.preventDefault();
-    this.startY = e.clientY;
-    this.trackerTop = this.lastTrackerTop;
-
-    this.props.document!.addEventListener("mousemove", this.onMove);
-    this.props.document!.addEventListener("mouseup", this.onUp);
-  };
+  function unsubscribe() {
+    listeners.forEach((l) => l.remove());
+  }
 
-  onMove = (e: MouseEvent) => {
+  const onDragStart = (e: React.MouseEvent) => {
     e.preventDefault();
-    const diff = e.clientY - this.startY;
-    const position = Math.min(
-      Math.max(this.trackerTop + diff, 0),
-      this.clientHeight - this.trackerHeight
-    );
+    startY.current = e.clientY;
+    trackerTop.current = lastTrackerTop.current;
 
-    this.setScrollPositionFromTracker(position);
+    subscribe(document);
   };
 
-  onUp = (e: MouseEvent) => {
-    e.preventDefault();
-    this.props.document!.removeEventListener("mousemove", this.onMove);
-    this.props.document!.removeEventListener("mouseup", this.onUp);
-  };
-
-  render() {
-    const { children, className } = this.props;
-
-    return (
-      <div vkuiClass="CustomScrollView" className={className}>
-        <div vkuiClass="CustomScrollView__barY" ref={this.barY}>
-          <div
-            vkuiClass="CustomScrollView__trackerY"
-            ref={this.trackerY}
-            onMouseDown={this.onDragStart}
-          />
-        </div>
-
+  return (
+    <div vkuiClass="CustomScrollView" className={className}>
+      <div vkuiClass="CustomScrollView__barY" ref={barY}>
         <div
-          vkuiClass="CustomScrollView__box"
-          tabIndex={-1}
-          ref={this.box}
-          onScroll={this.scroll}
-        >
-          {children}
-        </div>
+          vkuiClass="CustomScrollView__trackerY"
+          ref={trackerY}
+          onMouseDown={onDragStart}
+        />
       </div>
-    );
-  }
-}
 
-// eslint-disable-next-line import/no-default-export
-export default withDOM(CustomScrollView);
+      <div
+        vkuiClass="CustomScrollView__box"
+        tabIndex={-1}
+        ref={boxRef}
+        onScroll={scroll}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/CustomSelect/CustomSelect.css

@@ -10,6 +10,8 @@
 
 .CustomSelect__empty {
   padding: 12px 0;
+  text-align: center;
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
 .CustomSelect__fetching {
@@ -17,8 +19,3 @@
   align-items: center;
   justify-content: center;
 }
-
-.CustomSelect__empty {
-  text-align: center;
-  color: var(--text_secondary, var(--vkui--color_text_secondary));
-}

package/src/components/CustomSelect/CustomSelect.tsx

@@ -1,6 +1,11 @@
 import * as React from "react";
-import SelectMimicry from "../SelectMimicry/SelectMimicry";
-import { debounce, setRef, multiRef } from "../../lib/utils";
+import { SelectMimicry } from "../SelectMimicry/SelectMimicry";
+import {
+  debounce,
+  setRef,
+  multiRef,
+  getTitleFromChildren,
+} from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
 import { NativeSelectProps } from "../NativeSelect/NativeSelect";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
@@ -16,10 +21,14 @@ import { Input } from "../Input/Input";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { Caption } from "../Typography/Caption/Caption";
 import { warnOnce } from "../../lib/warnOnce";
-import { defaultFilterFn } from "../../lib/select";
+import {
+  defaultFilterFn,
+  getFormFieldModeFromSelectType,
+} from "../../lib/select";
 import { is } from "../../lib/is";
 import { Placement } from "../Popper/Popper";
 import { CustomSelectDropdown } from "../CustomSelectDropdown/CustomSelectDropdown";
+import { SelectType } from "../Select/Select";
 import "./CustomSelect.css";
 
 const findIndexAfter = (
@@ -64,14 +73,9 @@ const checkOptionsValueType = (options: CustomSelectOptionInterface[]) => {
 
 type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>["value"];
 
-export enum SelectType {
-  Default = "default",
-  Plain = "plain",
-}
-
 export interface CustomSelectOptionInterface {
   value: SelectValue;
-  label: string;
+  label: React.ReactElement | string;
   disabled?: boolean;
   [index: string]: any;
 }
@@ -96,20 +100,16 @@ export interface CustomSelectProps
    */
   searchable?: boolean;
   /**
-   * Текст, который будет отображен, если приходит пустой `options`
+   * Текст, который будет отображен, если приходит пустой `options`.
    */
   emptyText?: string;
   onInputChange?: (
     e: React.ChangeEvent,
     options: CustomSelectOptionInterface[]
   ) => void | CustomSelectOptionInterface[];
-  options: Array<{
-    value: SelectValue;
-    label: string;
-    [index: string]: any;
-  }>;
+  options: CustomSelectOptionInterface[];
   /**
-   * Функция для кастомной фильтрации. По-умолчанию поиск производится по option.label.
+   * Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.
    */
   filterFn?:
     | false
@@ -128,7 +128,7 @@ export interface CustomSelectProps
   renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;
   /**
    * Рендер-проп для кастомного рендера содержимого дропдауна.
-   * В defaultDropdownContent содержится список опций в виде скроллящегося блока.
+   * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.
    */
   renderDropdown?: ({
     defaultDropdownContent,
@@ -136,8 +136,8 @@ export interface CustomSelectProps
     defaultDropdownContent: React.ReactNode;
   }) => React.ReactNode;
   /**
-   * Если true, то в дропдауне вместо списка опций рисуется спиннер. При переданных renderDropdown и fetching: true,
-   * "победит" renderDropdown
+   * Если `true`, то в дропдауне вместо списка опций рисуется спиннер. При переданных `renderDropdown` и `fetching: true`
+   * "победит" `renderDropdown`.
    */
   fetching?: boolean;
   onClose?: VoidFunction;
@@ -146,7 +146,7 @@ export interface CustomSelectProps
   dropdownOffsetDistance?: number;
   fixDropdownWidth?: boolean;
   forceDropdownPortal?: boolean;
-  selectType?: SelectType;
+  selectType?: keyof typeof SelectType;
 }
 
 type MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;
@@ -166,7 +166,6 @@ class CustomSelectComponent extends React.Component<
     icon: <DropdownIcon />,
     dropdownOffsetDistance: 0,
     fixDropdownWidth: true,
-    selectType: SelectType.Default,
   };
 
   public constructor(props: CustomSelectProps) {
@@ -421,7 +420,9 @@ class CustomSelectComponent extends React.Component<
     const fullInput = this.keyboardInput + key;
 
     const optionIndex = this.state.options?.findIndex((option) => {
-      return option.label.toLowerCase().includes(fullInput);
+      return getTitleFromChildren(option.label)
+        .toLowerCase()
+        .includes(fullInput);
     });
 
     if (optionIndex !== undefined && optionIndex > -1) {
@@ -665,7 +666,7 @@ class CustomSelectComponent extends React.Component<
       dropdownOffsetDistance,
       fixDropdownWidth,
       forceDropdownPortal,
-      selectType,
+      selectType = SelectType.default,
       ...restProps
     } = this.props;
     const selected = this.getSelectedItem();
@@ -688,7 +689,14 @@ class CustomSelectComponent extends React.Component<
       resolvedContent = defaultDropdownContent;
     }
 
-    const isPopperDirectionTop = this.state.popperPlacement?.includes("top");
+    const openedClassNames = classNames(
+      opened && "Select--open",
+      opened &&
+        (dropdownOffsetDistance as number) === 0 &&
+        (this.state.popperPlacement?.includes("top")
+          ? "Select--pop-up"
+          : "Select--pop-down")
+    );
 
     return (
       <label
@@ -703,12 +711,7 @@ class CustomSelectComponent extends React.Component<
             {...restProps}
             autoFocus
             onBlur={this.onBlur}
-            vkuiClass={classNames(
-              opened && "CustomSelect__open",
-              isPopperDirectionTop && "CustomSelect__open--popupDirectionTop",
-              (dropdownOffsetDistance as number) > 0 &&
-                "CustomSelect__open--not-adjacent"
-            )}
+            vkuiClass={openedClassNames}
             value={this.state.inputValue}
             onKeyDown={this.onInputKeyDown}
             onChange={this.onInputChange}
@@ -719,6 +722,7 @@ class CustomSelectComponent extends React.Component<
             before={before}
             after={icon}
             placeholder={restProps.placeholder}
+            mode={getFormFieldModeFromSelectType(selectType)}
           />
         ) : (
           <SelectMimicry
@@ -729,13 +733,7 @@ class CustomSelectComponent extends React.Component<
             onKeyUp={this.handleKeyUp}
             onFocus={this.onFocus}
             onBlur={this.onBlur}
-            vkuiClass={classNames(
-              opened && "CustomSelect__open",
-              isPopperDirectionTop && "CustomSelect__open--popupDirectionTop",
-              (dropdownOffsetDistance as number) > 0 &&
-                "CustomSelect__open--not-adjacent"
-            )}
-            before={before}
+            vkuiClass={openedClassNames}
             after={icon}
             selectType={selectType}
           >
@@ -777,6 +775,9 @@ class CustomSelectComponent extends React.Component<
   }
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/CustomSelect
+ */
 export const CustomSelect = withPlatform(
   withAdaptivity(CustomSelectComponent, {
     sizeY: true,