@docsvision/webclient
Version:
Type definitions for DocsVision WebClient scripts and extensions.
194 lines (193 loc) • 12.2 kB
TypeScript
import React from "react";
import { PopoverCalcProcess } from '@docsvision/webclient/Helpers/PopoverHelpers/PopoverProcess';
/** Свойства для {@link Popover} */
export interface IPopoverProps {
/** При смене значения на true всплывающее окно откроется, при смене в false - скроется. */
isOpen: boolean;
hidden?: boolean;
/** Контейнер целевого элемента, в котором будет отслеживаться скролл. */
container?: HTMLElement;
/**
* Элемент, относительно которого всплывающее окно будет позиционироваться.
*
* Замечание: Popover не может корректно позиционироваться относительно элементов с display: inline.
*
* По умолчанию: ближайший не-inline родитель Popover.
*/
target?: HTMLElement;
/** Аналог {@see target}, но с динамическим определением значения. */
targetGetter?: () => HTMLElement;
/** Минимальная дистанция до границ экрана в пикселях. */
screenPadding?: number;
/**
* Место относительно целевого элемента, где будет размещено вспылвающее окно.
*
* Замечение: если места сверху будет недостаточно (будут мешать границы экрана), то всплывающее окно
* автоматически сместится вниз.
*
* По умолчанию: PopoverMode.Above
*/
mode?: PopoverMode;
/** Статичное смещение всплывающего окна от вычисленного положения по оси X в пикселях. */
xShift?: number;
/** Статичное смещение всплывающего окна от вычисленного положения по оси Y в пикселях. */
yShift?: number;
/** Настройка, определяющая, возможность перетаскивания окна мышкой */
draggable?: boolean;
/** Настройка, определяющая, надо ли скрывать всплывающее окно, если позиции достигли границ экрана */
hideIfBehindPadding?: boolean;
/** Не вызывает событие onClickOutside в случае, если клавиша мишы была зажата внутри Popover и отжата вне его */
preventClickOutsideEventOnMouseUp?: boolean;
/** Событие click вне всплывающего окна. */
onClickOutside?: (ev: MouseEvent) => void;
/** Событие click внутри всплывающего окна. */
onClickInside?: (ev: MouseEvent, element?: Popover) => void;
/** Событие нажатия Enter (срабатывает, даже когда фокус вне модального окна). */
onEnterPressed?: (ev: KeyboardEvent) => void;
/** Событие нажатия Esc (срабатывает, даже когда фокус вне модального окна). */
onEscPressed?: (ev: KeyboardEvent) => void;
onShouldStartDrag?: (el: EventTarget) => boolean;
/** Содержимое модального окна. Используйте {@link PopoverBox} для создания белой панели со скругленными краями. */
children?: React.ReactNode;
/** Дополнительный класс, который будет назначен на корневой элемент. */
className?: string;
/** Минимальная ширина. */
minWidth?: string;
/** Ширина всплывающего окна */
width?: string;
/** Координаты клика мыши. */
pageCoordinates?: any;
/** Показывает необходимость обработать событие contextmenu. */
isContextmenuEventNeed?: boolean;
}
/** @internal */
export interface IPopoverState {
currentTarget: HTMLElement;
offScreenX?: boolean;
offScreenY?: boolean;
screenPadding: number;
mode: PopoverMode;
hideClassName: string;
positionCalculated?: boolean;
renderReady?: boolean;
ignoreClickOutsideEvent: boolean;
popoverclick: boolean;
}
/**
* Режим Popover.
*/
export declare enum PopoverMode {
/** Сверху по центру. Если сверху места нет, то показывается снизу. */
Above = 0,
/**
* Слева, выровненное вертикально по верхнему краю (верхний край окна совпадает с верхним краем целевого элемента).
* Если снизу не хватает места, то смещается вверх ровно на столько, чтобы уместить на экране.
* Если слева нет места, то смещается ровно на столько, чтобы уместить на экране.
*/
LeftSide = 1,
/** Снизу, выровненное так, что левый край окна соответствует левому краю целевого элемента. Если снизу нет места, то показывается сверху. */
BottomDropdown = 2,
/** Слева, так что верхний левый угол совпадает с левым верхнем углом целевого элемента. */
LeftSideToRight = 3,
/** Слева, так что верхний левый угол совпадает с левым верхнем углом целевого элемента. */
LeftBottomSideToRight = 4,
/**
* Под курсором.
* Если нет места снизу, то выравнивается по крайней нижней границе
* Если нет места справа, то выравнивается по крайней правой границе
*/
UnderCursor = 5
}
/**
* Компонент, который обеспечивает позиционирование всплывающего модального окна.
*
* Замечание: при показе всплывающего окна создается элемент в body документа (или в указанном контейнере) с абсолютной позицией,
* который при помощи свойств top и left размещается над целевым элементом. При этом, обновление координат происходит
* при перерисовке компонента, при ресайзе и скроле окна, а также при скроле элемента-контейнера. Можно запустить перессчет
* позиции вручную при помощи метода {@link updatePositions}. Предпочитительнее использовать этот метод, вместо перерисовки
* компонента, т.к. данный метод только обновляет позицию, в то время как перерисовка запускает обновление содержимого
* всплывающего окна (это критично, если нужно обновлять позицию в события, возникающих часто).
*
* Из принципа работы компонента также следует, что анимации при показе окна могут некорректно работать при смене значения isOpen,
* т.к. при показе окна элемент каждый раз создается заново. Если нужно при показе только сменить css-класс (для выполнения анимации),
* то следует держать значение isOpen всегда true, и скрывать только содержимое всплывающего окна при помощи css. Сам компонент
* не создает никаких видимых артефактов на экране, поэтому данный сценарий допустим.
*
* Также следует отметить, что физически всплывающее окна располагается в другом месте DOM, не там где отрендерен элемент Popover.
* Поэтому, наследование css-стилей не будет работать для содержимого вслывающего окна. При необходимости, можно задать
* {@link IPopoverProps.container}, чтобы указать место в DOM, где должен размещаться элемент. Однако, в этом случае могут возникнуть
* проблемы с перекрыванием содержимого с другими элементами на странице.
*
* Пример использования:
*
* <div>
* <Popover isOpen={this.state.popoverOpen} onClickOutside={this.closePopover} onEscPressed={this.closePopover}>
* <PopoverBox>
* <PopoverHead>
* <PopoverTitle>Заголовок</PopoverTitle>
* </PopoverHead>
* <PopoverContent>
* Содержимое
* </PopoverContent>
* </PopoverBox>
* </Popover>
* <span>Элемент, около которого появится окно</span>
* </div>
*
* См. также: {@link PopoverBox}, {@link PopoverHead}, {@link PopoverTitle},
* {@link PopoverCloseButton}, {@link PopoverAcceptButton}, {@link PopoverCancelButton}, {@link PopoverContent}
*/
export declare class Popover extends React.Component<IPopoverProps, IPopoverState> {
private static mPopoversContainer;
private static getPopoversContainer;
static calcPositionProcess: Array<PopoverCalcProcess>;
private root;
private xDiff;
private yDiff;
private zIndex;
state: IPopoverState;
constructor(props: IPopoverProps);
private getPropsTarget;
/** @internal */
componentWillUnmount(): void;
/** @internal */
UNSAFE_componentWillReceiveProps(nextProps: IPopoverProps, nextContext: any): void;
isLastShownPopover(): boolean;
updateVisibility(hidden: boolean): void;
/** @internal */
componentDidUpdate(): void;
/** @internal */
componentDidMount(): void;
private attachStub;
private onShow;
private onHide;
/** Скрывает всплывающее окна и очищает все занимаемые ресурсы. */
dispose(): Promise<any>;
private onDocumentClick;
private onDocumentRightButtonClick;
protected isElementAbovePopover(elem: HTMLElement): boolean;
protected isAbsoluteOrFixedPositioned(elem: HTMLElement, checkElementInBodyAndNotInContainer?: boolean): boolean;
private onDocumentMouseDown;
private onDocumentMouseUp;
private onDocumentKeyDown;
private subscribeGlobalEvents;
private unsubscribeGlobalEvents;
private onPageScroll;
private onWindowResize;
private getCurrentTarget;
/**
* Перессчитать позицию всплывающего окна.
*/
updatePositions(): void;
private onMouseMove;
private onMouseDown;
private onMouseUp;
private moveDraggableIntoView;
private updateTopPosition;
addVerticalOffset(offset: number): void;
private getWidthPopover;
private updateHorizontalPosition;
private renderPopover;
/** @internal */
render(): JSX.Element;
}