@alifd/overlay/lib/placement.d.ts

overlay base component

import { CSSProperties } from 'react';
type point = 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br';
export type pointsType = [point, point];
export type placementType = 'tl' | 't' | 'tr' | 'rt' | 'r' | 'rb' | 'bl' | 'b' | 'br' | 'lt' | 'l' | 'lb';
export interface TargetRect {
    width: number;
    height: number;
    /**
     * 相对网页最左侧间距
     */
    left: number;
    /**
     * 相对网页顶部间距
     */
    top: number;
}
export interface PlacementsConfig {
    position: 'absolute' | 'fixed';
    /**
     * 弹窗的目标定位元素
     */
    target: HTMLElement | {
        getBoundingClientRect: () => TargetRect;
    };
    /**
     * 弹窗
     */
    overlay: HTMLElement;
    /**
     * 相对容器，position != static 的节点
     */
    container: HTMLElement;
    /**
     * 滚动节点。 target 到 container 之间的滚动节点 (不包含 target/container/body/documetnElement 元素)
     */
    scrollNode?: HTMLElement[];
    /**
     * target 超出容器时隐藏 (有scrollNode时生效)
     */
    autoHideScrollOverflow?: boolean;
    /**
     * 弹窗 overlay 相对于目标元素 target 的位置
     */
    placement?: placementType;
    /**
     * 偏离 placement 对其方向像素
     */
    placementOffset?: number;
    /**
     * 对齐点 [弹窗, 相对目标]
     */
    points?: pointsType;
    offset?: number[];
    /**
     * 弹窗位置重新计算的回调，可以通过修改范围值自己订正弹窗位置
     */
    beforePosition?: (result: PositionResult, obj: any) => PositionResult;
    autoAdjust?: boolean;
    rtl?: boolean;
}
export interface placementMapType {
    tl: pointsType;
    t: pointsType;
    tr: pointsType;
    lt: pointsType;
    l: pointsType;
    lb: pointsType;
    bl: pointsType;
    b: pointsType;
    br: pointsType;
    rt: pointsType;
    r: pointsType;
    rb: pointsType;
}
export interface PositionResult {
    config?: {
        placement: placementType;
        points: pointsType;
    };
    style: CSSProperties;
}
/**
 * 计算相对于 container 的偏移位置
 * @param config
 * @returns
 */
export default function getPlacements(config: PlacementsConfig): PositionResult;
export {};