@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/ModalRoot/types.ts

@@ -1,53 +0,0 @@
-export enum ModalType {
-  PAGE = "page",
-  CARD = "card",
-}
-
-export type TranslateRange = [number, number];
-
-export type ModalsState = { [index: string]: ModalsStateEntry };
-
-export interface ModalElements {
-  modalElement?: HTMLElement | null;
-  innerElement?: HTMLElement | null;
-  headerElement?: HTMLElement | null;
-  contentElement?: HTMLElement | null;
-}
-
-export interface ModalsStateEntry extends ModalElements {
-  id: string | null;
-  onClose?: () => any;
-  type?: ModalType;
-
-  settlingHeight?: number;
-  dynamicContentHeight?: boolean;
-  expandable?: boolean;
-
-  /**
-   * Процент текущего сдвига модалки
-   */
-  translateY?: number;
-  /**
-   * Процент сдвига модалки в изначальном состоянии
-   */
-  translateYFrom?: number;
-  /**
-   * Процент сдвига модалки во время взаимодействия с ней (потянуть, чтобы открыть или закрыть)
-   */
-  translateYCurrent?: number;
-
-  touchStartContentScrollTop?: number;
-  touchMovePositive?: boolean | null;
-  touchShiftYPercent?: number;
-
-  expanded?: boolean;
-  collapsed?: boolean;
-  hidden?: boolean;
-
-  contentScrolled?: boolean;
-  contentScrollStopTimeout?: ReturnType<typeof setTimeout>;
-
-  expandedRange?: TranslateRange;
-  collapsedRange?: TranslateRange;
-  hiddenRange?: TranslateRange;
-}

package/src/components/ModalRoot/useModalManager.tsx

@@ -1,203 +0,0 @@
-import * as React from "react";
-import { ModalsState, ModalsStateEntry, ModalType } from "./types";
-import { warnOnce } from "../../lib/warnOnce";
-import { getNavId } from "../../lib/getNavId";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { noop, isFunction } from "../../lib/utils";
-
-interface ModalTransitionState {
-  activeModal?: string | null;
-  enteringModal?: string | null;
-  exitingModal?: string | null;
-
-  history?: string[];
-  isBack?: boolean | null;
-}
-
-export interface ModalTransitionProps extends ModalTransitionState {
-  onEnter: (id: string | null) => void;
-  onExit: (id: string | null) => void;
-  getModalState: (id: string) => ModalsStateEntry;
-  closeActiveModal: VoidFunction;
-  delayEnter: boolean;
-}
-
-function getModals(children: React.ReactNode | React.ReactNode[]) {
-  return React.Children.toArray(children) as React.ReactElement[];
-}
-
-const warn = warnOnce("ModalRoot");
-
-export function modalTransitionReducer(
-  state: ModalTransitionState,
-  action: {
-    type: "setActive" | "entered" | "exited" | "inited";
-    id: string | null;
-  }
-): ModalTransitionState {
-  if (action.type === "setActive" && action.id !== state.activeModal) {
-    const nextModal = action.id;
-    // preserve exiting modal if switching mid-transition
-    const prevModal = state.exitingModal || state.activeModal;
-    let history = state.history ? [...state.history] : [];
-    const isBack = Boolean(nextModal && history.includes(nextModal));
-
-    if (nextModal === null) {
-      history = [];
-    } else if (isBack) {
-      history = history.splice(0, history.indexOf(nextModal) + 1);
-    } else {
-      history.push(nextModal);
-    }
-
-    return {
-      activeModal: nextModal,
-      // not entering yet
-      enteringModal: null,
-      exitingModal: prevModal,
-      history,
-      isBack,
-    };
-  }
-  if (action.type === "entered" && action.id === state.enteringModal) {
-    return { ...state, enteringModal: null };
-  }
-  if (action.type === "exited" && action.id === state.exitingModal) {
-    return { ...state, exitingModal: null };
-  }
-  if (action.type === "inited" && action.id === state.activeModal) {
-    return { ...state, enteringModal: action.id };
-  }
-  return state;
-}
-
-/**
- * Реализует переход модалок. При смене activeModal m1 -> m2:
- * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода
- * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода
- * одновременный переход между ModalPage:
- *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2
- *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации
- * ИЛИ дожидаемся скрытия ModalCard
- *   3b. activeModal: m2, exitingModal: null, enteringModal: m2
- *   4b. enteringModal переходит в null после завершения анимации
- * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен
- */
-export function useModalManager(
-  activeModal: string | null | undefined,
-  children: React.ReactNode | React.ReactNode[],
-  onClose: (id: string) => void,
-  initModal: (state: ModalsStateEntry) => void = noop
-): ModalTransitionProps {
-  const modalsState = React.useRef<ModalsState>({}).current;
-  getModals(children).forEach((Modal) => {
-    const modalProps = Modal.props;
-    const id = getNavId(modalProps, warn);
-    const state: ModalsStateEntry = (id !== undefined && modalsState[id]) || {
-      id: id ?? null,
-    };
-
-    state.onClose = Modal.props.onClose;
-    state.dynamicContentHeight = !!modalProps.dynamicContentHeight;
-    // ModalPage props
-    if (typeof modalProps.settlingHeight === "number") {
-      state.settlingHeight = modalProps.settlingHeight;
-    }
-
-    if (state.id !== null) {
-      modalsState[state.id] = state;
-    }
-  });
-
-  const isMissing = activeModal && !modalsState[activeModal];
-  const safeActiveModal = isMissing ? null : activeModal;
-  const [transitionState, dispatchTransition] = React.useReducer(
-    modalTransitionReducer,
-    {
-      activeModal: safeActiveModal,
-      enteringModal: null,
-      exitingModal: null,
-      history: safeActiveModal ? [safeActiveModal] : [],
-      isBack: false,
-    }
-  );
-
-  // Map props to state, render activeModal for init
-  useIsomorphicLayoutEffect(() => {
-    // ignore non-existent activeModal
-    if (process.env.NODE_ENV === "development" && isMissing) {
-      warn(`Can't transition - modal ${activeModal} not found`);
-    }
-    dispatchTransition({ type: "setActive", id: safeActiveModal ?? null });
-  }, [activeModal]);
-
-  // Init activeModal & set enteringModal
-  useIsomorphicLayoutEffect(() => {
-    if (transitionState.activeModal) {
-      initModal(modalsState[transitionState.activeModal]);
-      dispatchTransition({ type: "inited", id: transitionState.activeModal });
-    }
-  }, [transitionState.activeModal]);
-
-  const isCard = (id: string | null | undefined) =>
-    id != null && modalsState[id]?.type === ModalType.CARD;
-  const onEnter = React.useCallback(
-    (id: string | null) => dispatchTransition({ type: "entered", id }),
-    []
-  );
-  const onExit = React.useCallback(
-    (id: string | null) => dispatchTransition({ type: "exited", id }),
-    []
-  );
-  const delayEnter = Boolean(
-    transitionState.exitingModal &&
-      (isCard(activeModal) || isCard(transitionState.exitingModal))
-  );
-  const getModalState = React.useCallback(
-    (id: string) => modalsState[id],
-    [modalsState]
-  );
-
-  function closeActiveModal() {
-    const modalState =
-      transitionState.activeModal && modalsState[transitionState.activeModal];
-    if (modalState) {
-      if (isFunction(modalState.onClose)) {
-        modalState.onClose();
-      } else if (isFunction(onClose)) {
-        onClose(modalState.id);
-      } else if (process.env.NODE_ENV === "development") {
-        warn("onClose is undefined");
-      }
-    }
-  }
-
-  return {
-    onEnter,
-    onExit,
-    ...transitionState,
-    delayEnter,
-    getModalState,
-    closeActiveModal,
-  };
-}
-
-export function withModalManager(
-  initModal: (a: ModalsStateEntry) => void = noop
-) {
-  return function <Props extends ModalTransitionProps>(
-    Wrapped: React.ComponentType<Props>
-  ): React.FC<
-    Omit<Props, keyof ModalTransitionProps> & { activeModal?: string | null }
-  > {
-    return function WithModalManager(props) {
-      const transitionManager = useModalManager(
-        props.activeModal,
-        props.children,
-        (props as any).onClose,
-        initModal
-      );
-      return <Wrapped {...(props as any)} {...transitionManager} />;
-    };
-  };
-}

package/src/components/ModalRoot/withModalRootContext.tsx

@@ -1,19 +0,0 @@
-import * as React from "react";
-import ModalRootContext, {
-  ModalRootContextInterface,
-} from "./ModalRootContext";
-
-type PickedProps = Pick<ModalRootContextInterface, "updateModalHeight">;
-
-export function withModalRootContext<P extends PickedProps>(
-  Component: React.ComponentType<P>
-): React.ComponentType<Omit<P, keyof PickedProps>> {
-  function WithModalRootContext(props: Omit<P, keyof PickedProps>) {
-    const { updateModalHeight } = React.useContext(ModalRootContext);
-
-    return (
-      <Component {...(props as P)} updateModalHeight={updateModalHeight} />
-    );
-  }
-  return WithModalRootContext;
-}

package/src/components/NativeSelect/NativeSelect.tsx

@@ -1,113 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
-import { FormField } from "../FormField/FormField";
-import { HasAlign, HasRef, HasRootRef } from "../../types";
-import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
-import { getClassName } from "../../helpers/getClassName";
-import Headline from "../Typography/Headline/Headline";
-import Text from "../Typography/Text/Text";
-import { VKCOM } from "../../lib/platform";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { useEnsuredControl } from "../../hooks/useEnsuredControl";
-import { useExternRef } from "../../hooks/useExternRef";
-import { usePlatform } from "../../hooks/usePlatform";
-import {
-  AdaptivityContextInterface,
-  AdaptivityProps,
-} from "../AdaptivityProvider/AdaptivityContext";
-import "../Select/Select.css";
-
-export interface NativeSelectProps
-  extends React.SelectHTMLAttributes<HTMLSelectElement>,
-    HasRef<HTMLSelectElement>,
-    HasRootRef<HTMLLabelElement>,
-    HasAlign,
-    AdaptivityProps {
-  placeholder?: string;
-  multiline?: boolean;
-}
-
-export interface SelectState {
-  value?: React.SelectHTMLAttributes<HTMLSelectElement>["value"];
-  title?: string;
-  notSelected?: boolean;
-}
-
-const NativeSelect: React.FC<
-  NativeSelectProps & AdaptivityContextInterface
-> = ({
-  style,
-  defaultValue = "",
-  align,
-  placeholder,
-  children,
-  className,
-  getRef,
-  getRootRef,
-  disabled,
-  sizeX,
-  sizeY,
-  multiline,
-  ...restProps
-}) => {
-  const platform = usePlatform();
-  const [title, setTitle] = React.useState("");
-  const [notSelected, setNotSelected] = React.useState(false);
-  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });
-  const selectRef = useExternRef(getRef);
-  useIsomorphicLayoutEffect(() => {
-    const selectedOption =
-      selectRef.current?.options[selectRef.current.selectedIndex];
-    if (selectedOption) {
-      setTitle(selectedOption.text);
-      setNotSelected(selectedOption.value === "" && placeholder != null);
-    }
-  }, [value, children]);
-
-  const TypographyComponent =
-    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
-
-  return (
-    <FormField
-      Component="label"
-      vkuiClass={classNames(getClassName("Select", platform), {
-        ["Select--not-selected"]: notSelected,
-        [`Select--align-${align}`]: !!align,
-        [`Select--sizeX--${sizeX}`]: !!sizeX,
-        [`Select--sizeY--${sizeY}`]: !!sizeY,
-        "Select--multiline": multiline,
-      })}
-      className={className}
-      style={style}
-      getRootRef={getRootRef}
-      disabled={disabled}
-      after={<DropdownIcon />}
-    >
-      <select
-        {...restProps}
-        disabled={disabled}
-        vkuiClass="Select__el"
-        onChange={onChange}
-        value={value}
-        ref={selectRef}
-      >
-        {placeholder && <option value="">{placeholder}</option>}
-        {children}
-      </select>
-      <TypographyComponent
-        Component="div"
-        weight="regular"
-        vkuiClass="Select__container"
-      >
-        <span vkuiClass="Select__title">{title}</span>
-      </TypographyComponent>
-    </FormField>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(NativeSelect, {
-  sizeX: true,
-  sizeY: true,
-});

package/src/components/NativeSelect/Readme.md

@@ -1,17 +0,0 @@
-Надстройка над `<select />`. Компонент принимает все валидные для этого элемента свойства.
-
-```jsx
-<View activePanel="native-select">
-  <Panel id="native-select">
-    <PanelHeader>NativeSelect</PanelHeader>
-    <Group>
-      <FormItem top="Выберите пол">
-        <NativeSelect>
-          <option value="m">Мужской</option>
-          <option value="f">Женский</option>
-        </NativeSelect>
-      </FormItem>
-    </Group>
-  </Panel>
-</View>
-```

package/src/components/NavTransitionContext/NavTransitionContext.tsx

@@ -1,24 +0,0 @@
-import * as React from "react";
-import { useObjectMemo } from "../../hooks/useObjectMemo";
-
-interface TransitionContextProps {
-  entering: boolean;
-}
-const TransitionContext = React.createContext<TransitionContextProps>({
-  entering: false,
-});
-export const useNavTransition = () => React.useContext(TransitionContext);
-export const NavTransitionProvider: React.FC<TransitionContextProps> = ({
-  children,
-  entering,
-}) => {
-  const parentContext = useNavTransition();
-  const contextValue = useObjectMemo({
-    entering: parentContext.entering || entering,
-  });
-  return (
-    <TransitionContext.Provider value={contextValue}>
-      {children}
-    </TransitionContext.Provider>
-  );
-};

package/src/components/Panel/Panel.css

@@ -1,116 +0,0 @@
-.Panel {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.Panel::after {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  z-index: 1;
-  content: "";
-}
-
-.Panel--centered .PanelHeader {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-}
-
-.Panel__in {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 100%;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-}
-
-.Panel__centered {
-  display: flex;
-  flex: 1 0;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-
-.Panel__centered .PanelHeader--ios.PanelHeader--vis + * {
-  margin-top: var(--panelheader_height_ios);
-}
-
-.Panel__centered .PanelHeader--android.PanelHeader--vis + *,
-.Panel__centered .PanelHeader--vkcom.PanelHeader--vis + * {
-  margin-top: var(--panelheader_height_android);
-}
-
-.Panel--sizeX-compact .Panel__centered .PanelHeader--ios.PanelHeader--sep + * {
-  margin-top: calc(var(--panelheader_height_ios) + 5px);
-}
-
-.Panel--sizeX-compact
-  .Panel__centered
-  .PanelHeader--android.PanelHeader--sep
-  + * {
-  margin-top: calc(var(--panelheader_height_android) + 5px);
-}
-
-.Panel--sizeX-compact
-  .Panel__centered
-  .PanelHeader--vkcom.PanelHeader--sep
-  + * {
-  margin-top: calc(var(--panelheader_height_vkcom) + 5px);
-}
-
-.Panel--sizeX-regular .Panel__centered .PanelHeader--ios.PanelHeader--sep + * {
-  margin-top: calc(var(--panelheader_height_ios) + 16px);
-}
-
-.Panel--sizeX-regular
-  .Panel__centered
-  .PanelHeader--android.PanelHeader--sep
-  + * {
-  margin-top: calc(var(--panelheader_height_android) + 16px);
-}
-
-.Panel--sizeX-regular
-  .Panel__centered
-  .PanelHeader--vkcom.PanelHeader--sep
-  + * {
-  margin-top: calc(var(--panelheader_height_vkcom) + 16px);
-}
-
-.Epic .Panel__in {
-  padding-bottom: var(--tabbar_height);
-  padding-bottom: calc(var(--safe-area-inset-bottom) + var(--tabbar_height));
-}
-
-.Panel__in-before {
-  height: 1px;
-  margin-bottom: -1px;
-}
-
-.Panel__separator {
-  position: relative;
-  z-index: 3;
-}
-
-.Panel__in-after {
-  height: 1px;
-  margin-top: -1px;
-}
-
-.Panel .Panel__in,
-.Panel::after {
-  background-color: var(--background_content);
-}
-
-.Panel.Panel--regular .Panel__in,
-.Panel.Panel--regular::after {
-  background-color: transparent;
-}

package/src/components/Panel/Panel.tsx

@@ -1,58 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
-import { Touch } from "../Touch/Touch";
-import { TooltipContainer } from "../Tooltip/TooltipContainer";
-import { HasRootRef } from "../../types";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
-import { IOS } from "../../lib/platform";
-import { usePlatform } from "../../hooks/usePlatform";
-import { NavIdProps } from "../../lib/getNavId";
-import {
-  AdaptivityContextInterface,
-  AdaptivityProps,
-} from "../AdaptivityProvider/AdaptivityContext";
-import "./Panel.css";
-
-export interface PanelProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    HasRootRef<HTMLDivElement>,
-    AdaptivityProps,
-    NavIdProps {
-  centered?: boolean;
-}
-
-export const Panel = withAdaptivity<PanelProps & AdaptivityContextInterface>(
-  ({ centered = false, children, getRootRef, sizeX, nav, ...restProps }) => {
-    const platform = usePlatform();
-
-    return (
-      <div
-        {...restProps}
-        ref={getRootRef}
-        vkuiClass={classNames(
-          getClassName("Panel", platform),
-          `Panel--${sizeX}`,
-          {
-            "Panel--centered": centered,
-            [`Panel--sizeX-${sizeX}`]: true,
-          }
-        )}
-      >
-        <Touch Component={TooltipContainer} vkuiClass="Panel__in">
-          {platform === IOS && <div vkuiClass="Panel__fade" />}
-          <div vkuiClass="Panel__in-before" />
-          {centered ? (
-            <div vkuiClass="Panel__centered">{children}</div>
-          ) : (
-            children
-          )}
-          <div vkuiClass="Panel__in-after" />
-        </Touch>
-      </div>
-    );
-  },
-  {
-    sizeX: true,
-  }
-);

package/src/components/Panel/Readme.md

@@ -1,97 +0,0 @@
-`Panel` – это контейнер для контента.
-
-```jsx
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activePanel: "panel1",
-    };
-  }
-
-  render() {
-    return (
-      <View activePanel={this.state.activePanel}>
-        <Panel id="panel1">
-          <PanelHeader>More</PanelHeader>
-          <Group>
-            <Cell
-              expandable
-              before={<Icon28UserOutline />}
-              onClick={() => this.setState({ activePanel: "panel2" })}
-            >
-              Friends
-            </Cell>
-            <Cell
-              expandable
-              before={<Icon28UsersOutline />}
-              onClick={() => this.setState({ activePanel: "panel2" })}
-            >
-              Communities
-            </Cell>
-            <Cell
-              expandable
-              before={<Icon28MusicOutline />}
-              onClick={() => this.setState({ activePanel: "panel2" })}
-            >
-              Music
-            </Cell>
-          </Group>
-        </Panel>
-        <Panel id="panel2">
-          <PanelHeader
-            separator={false}
-            left={
-              <PanelHeaderBack
-                onClick={() => this.setState({ activePanel: "panel1" })}
-              />
-            }
-          >
-            Communities
-          </PanelHeader>
-          <Group>
-            <Search />
-            <Cell
-              description="Humor"
-              before={<Avatar />}
-              onClick={() => this.setState({ activePanel: "panel3" })}
-            >
-              Swipe Right
-            </Cell>
-            <Cell
-              description="Cultural Center"
-              before={<Avatar />}
-              onClick={() => this.setState({ activePanel: "panel3" })}
-            >
-              Out Cinema
-            </Cell>
-            <Cell
-              description="Movies"
-              before={<Avatar />}
-              onClick={() => this.setState({ activePanel: "panel3" })}
-            >
-              #ARTPOKAZ
-            </Cell>
-          </Group>
-        </Panel>
-        <Panel id="panel3" centered>
-          <PanelHeader
-            left={
-              <PanelHeaderBack
-                onClick={() => this.setState({ activePanel: "panel2" })}
-              />
-            }
-          >
-            Out Cinema
-          </PanelHeader>
-          <Spinner />
-          <div style={{ marginTop: 10 }}>Centered Content</div>
-        </Panel>
-      </View>
-    );
-  }
-}
-
-<Example />;
-```