jamis/lib/r-popover/types.d.ts

一种支持通过JSON配置方式生成页面的组件库

import type { PickClassStyleType, RendererProps, SchemaBoolean, SchemaClassName } from 'jamis-core';
import type { ReactNode } from 'react';
import type { BaseSchema, Offset, SchemaCollection, SchemaSlots } from '../types';
export * from './components/types';
export type PopOverPosition = 'auto' | 'center' | 'left-top' | 'left-top-left-top' | 'left-top-left-center' | 'left-top-left-bottom' | 'left-top-center-top' | 'left-top-center-center' | 'left-top-center-bottom' | 'left-top-right-top' | 'left-top-right-center' | 'left-top-right-bottom' | 'right-top' | 'right-top-left-top' | 'right-top-left-center' | 'right-top-left-bottom' | 'right-top-center-top' | 'right-top-center-center' | 'right-top-center-bottom' | 'right-top-right-top' | 'right-top-right-center' | 'right-top-right-bottom' | 'left-bottom' | 'left-bottom-left-top' | 'left-bottom-left-center' | 'left-bottom-left-bottom' | 'left-bottom-center-top' | 'left-bottom-center-center' | 'left-bottom-center-bottom' | 'left-bottom-right-top' | 'left-bottom-right-center' | 'left-bottom-right-bottom' | 'right-bottom' | 'right-bottom-left-top' | 'right-bottom-left-center' | 'right-bottom-left-bottom' | 'right-bottom-center-top' | 'right-bottom-center-center' | 'right-bottom-center-bottom' | 'right-bottom-right-top' | 'right-bottom-right-center' | 'right-bottom-right-bottom' | 'fixed-center' | 'fixed-left-top' | 'fixed-right-top' | 'fixed-left-bottom' | 'fixed-right-bottom';
export interface SchemaPopOverObject {
    popOverEnable?: boolean;
    /**
     * 配置当前行是否启动，要用表达式
     */
    popOverEnableOn?: SchemaBoolean;
    /**
     * 弹出模式
     */
    mode?: 'dialog' | 'drawer' | 'popOver';
    /**
     * 是弹窗形式的时候有用。
     */
    size?: 'sm' | 'md' | 'lg' | 'xl';
    /**
     * 弹出位置
     */
    position?: PopOverPosition;
    /**
     * 触发条件，默认是 click
     */
    trigger?: 'click' | 'hover';
    /**
     * 是否显示查看更多的 icon，通常是放大图标。
     */
    showIcon?: boolean;
    /**
     * 偏移量
     */
    offset?: Partial<Offset>;
    /**
     * 标题
     */
    title?: string;
    body?: SchemaCollection;
    /**
     * 内部使用的自定义的 react 组件, 和 body 互斥, 优先级高于 body
     */
    children?: ReactNode | (() => ReactNode);
    /**
     * 外部控制的打开状态
     */
    isOpened?: boolean | SchemaBoolean;
    isOpenedOn?: SchemaBoolean;
    /**
     * 点击外部时是否关闭popover
     */
    closeOnOutside?: boolean;
    closeOnOutsideOn?: SchemaBoolean;
    /**
     * 点击container时是否关闭popover, 默认是true
     */
    closeOnContainer?: boolean;
    slots?: SchemaSlots;
    /**
     * HOC弹框容器`.cxd-PopOverAble`
     * @deprecated 请使用`slots.PopOverAble`
     */
    className?: SchemaClassName;
    /**
     * 弹框外层`.cxd-PopOverAble-popover`类名
     * @deprecated 请使用`slots.PopOverAble-popover`
     */
    popOverClassName?: SchemaClassName;
    /**
     * 元素`.cxd-PopOverWrap`的样式类
     * @deprecated 请使用`slots.PopOverWrap`
     */
    popOverWrapClassName?: SchemaClassName;
    /**
     * 按钮样式类
     * 请使用 `slots.Field-popOverBtn`
     */
    popOverBtnClassName?: SchemaClassName;
}
export type SchemaPopOver = boolean | SchemaPopOverObject;
export interface PopOverHocProps extends RendererProps {
    name?: string;
    label?: string;
    popOver?: SchemaPopOver;
    /**
     * @deprecated 使用 popOverEnabled 替代
     */
    popOverEnable?: boolean | string;
    popOverEnabled?: boolean | string;
    onPopOverOpened?: (popover: any) => void | boolean;
    onPopOverClosed?: (popover: any) => void | boolean;
}
export interface PopOverHocConfig {
    /**是否定位目标为整个外层 */
    targetOutter?: boolean;
    position?: SchemaPopOverObject['position'];
    delay?: number;
}
export interface PopoverWrapperSchema extends BaseSchema {
    type: 'popover-wrapper';
    popOver?: Omit<SchemaPopOverObject, 'children'>;
    body: SchemaCollection;
}
export interface PopoverRendererProps extends PopoverWrapperSchema, RendererProps {
}
export interface UsePopOverableTriggerProps {
    className?: string;
    onMouseEnter?: (ev?: any) => void;
    onMouseLeave?: (ev?: any) => void;
    onClick?: (ev?: any) => void;
}
export type UsePopOverableProps = Pick<PopOverHocProps, 'render' | 'data' | 'name' | 'dispatchEvent' | 'onEvent' | 'className' | 'popOver' | 'onPopOverClosed' | 'onPopOverOpened' | 'popOverEnabled' | 'popOverEnable'> & {
    popOverContainer?: any;
} & Required<PickClassStyleType>;