@canvas-components/react-components 0.1.5 → 0.2.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, KeyboardEvent, RefObject, CSSProperties, ButtonHTMLAttributes, MouseEvent } from 'react';
+import { InputHTMLAttributes, ReactNode, KeyboardEvent as KeyboardEvent$1, CSSProperties, ButtonHTMLAttributes, MouseEvent, RefObject } from 'react';
 
 interface ReactCheckboxRef {
     focus: () => void;
@@ -21,11 +21,81 @@ interface ReactCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  */
 declare const ReactCheckbox: react.ForwardRefExoticComponent<ReactCheckboxProps & react.RefAttributes<ReactCheckboxRef>>;
 
+/** 通用过滤条件操作符。 */
+type ReactFilterConditionOperator = "none" | "eq" | "neq" | "gt" | "gte" | "lt" | "lte" | "between" | "notBetween" | "startsWith" | "notStartsWith" | "endsWith" | "notEndsWith" | "includes" | "notIncludes" | "blank" | "notBlank";
+/** 通用过滤面板草稿。 */
+interface ReactFilterPanelValue {
+    keyword: string;
+    mode: "fuzzy" | "exact";
+    searchExact?: boolean;
+    selectedKeys?: string[];
+    filterType?: "value" | "condition";
+    conditionOperator?: ReactFilterConditionOperator;
+    conditionValue?: string;
+    conditionSecondValue?: string;
+    conditionRelation?: "and" | "or";
+    secondConditionOperator?: ReactFilterConditionOperator;
+    secondConditionValue?: string;
+    secondConditionSecondValue?: string;
+}
+/** 通用过滤候选项。 */
+interface ReactFilterPanelOption {
+    label: string;
+    value: string;
+    count: number;
+    kind?: "all" | "blank" | "notBlank" | "value";
+}
+/** 通用过滤面板文案。 */
+interface ReactFilterPanelTexts {
+    title: string;
+    valueFilterTab: string;
+    conditionFilterTab: string;
+    searchPlaceholder: string;
+    optionsLabel: string;
+    emptyOptions: string;
+    loadingOptions: string;
+    exactToggleLabel: string;
+    allOptionLabel: string;
+    blankOptionLabel: string;
+    notBlankOptionLabel: string;
+    relationLabel: string;
+    firstConditionLabel: string;
+    secondConditionLabel: string;
+    firstValuePlaceholder: string;
+    secondValuePlaceholder: string;
+    relationAndLabel: string;
+    relationOrLabel: string;
+    resetAction: string;
+    applyAction: string;
+}
+/** 通用过滤面板请求。 */
+interface ReactFilterPanelRequest {
+    columnTitle: string;
+    anchorRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    value: ReactFilterPanelValue;
+    filterOptionImmediateApply?: boolean;
+    options: ReactFilterPanelOption[];
+    loadOptions?: (signal: AbortSignal) => ReactFilterPanelOption[] | Promise<ReactFilterPanelOption[]>;
+    texts: ReactFilterPanelTexts;
+    onApply: (value: ReactFilterPanelValue) => void;
+    onReset: () => void;
+    onClose: () => void;
+}
+/** ListTable 与 PivotTable 共用的过滤面板视图。 */
+declare function ReactFilterPanel(props: {
+    request: ReactFilterPanelRequest | null;
+}): react.JSX.Element | null;
+
 interface ReactInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     /**
      * 回车确认回调。
      */
-    onPressEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onPressEnter?: (event: KeyboardEvent$1<HTMLInputElement>) => void;
     /**
      * 是否允许清空。
      */
@@ -188,6 +258,55 @@ interface ReactDateTimeRangePickerProps extends Omit<ReactInputProps, "value" |
  */
 declare const ReactDateTimeRangePicker: react.ForwardRefExoticComponent<ReactDateTimeRangePickerProps & react.RefAttributes<HTMLInputElement>>;
 
+interface ReactNumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange"> {
+    /**
+     * 当前值。
+     */
+    value?: number | null;
+    /**
+     * 值变化回调。
+     */
+    onChange?: (value: number | null) => void;
+    /**
+     * 回车确认回调。
+     */
+    onPressEnter?: (event: KeyboardEvent$1<HTMLInputElement>) => void;
+    /**
+     * 是否允许清空。
+     */
+    allowClear?: boolean;
+    /**
+     * 清空回调。
+     */
+    onClear?: () => void;
+}
+/**
+ * 基础数字输入框。
+ */
+declare const ReactNumberInput: react.ForwardRefExoticComponent<ReactNumberInputProps & react.RefAttributes<HTMLInputElement>>;
+
+type ReactInputRangeValue = [number | null, number | null];
+interface ReactInputRangeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "onChange" | "placeholder" | "style" | "value"> {
+    /** 当前数值范围。 */
+    value?: ReactInputRangeValue;
+    /** 数值范围变化回调。 */
+    onChange?: (value: ReactInputRangeValue) => void;
+    /** 起止输入框占位文本。 */
+    placeholder?: [string, string];
+    /** 范围分隔符。 */
+    rangeSeparator?: string;
+    /** 外层类名。 */
+    className?: string;
+    /** 外层样式。 */
+    style?: CSSProperties;
+    /** 回车确认回调。 */
+    onPressEnter?: ReactNumberInputProps["onPressEnter"];
+}
+/**
+ * 双数值输入范围组件。
+ */
+declare const ReactInputRange: react.ForwardRefExoticComponent<ReactInputRangeProps & react.RefAttributes<HTMLInputElement>>;
+
 interface ReactImagePreviewProps {
     open: boolean;
     src: string;
@@ -227,32 +346,80 @@ interface ReactMonthPickerProps extends Omit<ReactInputProps, "value" | "onChang
  */
 declare const ReactMonthPicker: react.ForwardRefExoticComponent<ReactMonthPickerProps & react.RefAttributes<HTMLInputElement>>;
 
-interface ReactNumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange"> {
-    /**
-     * 当前值。
-     */
-    value?: number | null;
-    /**
-     * 值变化回调。
-     */
-    onChange?: (value: number | null) => void;
-    /**
-     * 回车确认回调。
-     */
-    onPressEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
-    /**
-     * 是否允许清空。
-     */
-    allowClear?: boolean;
-    /**
-     * 清空回调。
-     */
-    onClear?: () => void;
+/**
+ * Modal 按钮属性。
+ */
+type ReactModalButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "type">;
+/**
+ * Modal 取消事件。
+ */
+type ReactModalCancelEvent = MouseEvent<HTMLElement> | KeyboardEvent;
+interface ReactModalProps {
+    /** 是否显示 Modal。 */
+    open: boolean;
+    /** 标题内容。 */
+    title?: ReactNode;
+    /** Modal 内容。 */
+    children?: ReactNode;
+    /** 底部内容，传入 false 时隐藏。 */
+    footer?: ReactNode | false;
+    /** Modal 宽度。@default 520 */
+    width?: number | string;
+    /** 是否垂直居中。@default false */
+    centered?: boolean;
+    /** 是否显示遮罩。@default true */
+    mask?: boolean;
+    /** 点击遮罩是否允许关闭。@default true */
+    maskClosable?: boolean;
+    /** 按下 Esc 是否允许关闭。@default true */
+    keyboard?: boolean;
+    /** 是否显示关闭按钮。@default true */
+    closable?: boolean;
+    /** 是否提供全屏切换操作。@default true */
+    fullscreenable?: boolean;
+    /** 当前是否全屏，传入后进入受控模式。 */
+    fullscreen?: boolean;
+    /** 默认是否全屏。@default false */
+    defaultFullscreen?: boolean;
+    /** 全屏状态变化回调。 */
+    onFullscreenChange?: (fullscreen: boolean) => void;
+    /** 确认按钮文案。 */
+    okText?: ReactNode;
+    /** 取消按钮文案。 */
+    cancelText?: ReactNode;
+    /** 确认按钮是否加载中。 */
+    confirmLoading?: boolean;
+    /** 确认按钮属性。 */
+    okButtonProps?: ReactModalButtonProps;
+    /** 取消按钮属性。 */
+    cancelButtonProps?: ReactModalButtonProps;
+    /** 点击确认回调。 */
+    onOk?: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+    /** 关闭请求回调。 */
+    onCancel?: (event: ReactModalCancelEvent) => void;
+    /** 完成关闭动画后的回调。 */
+    afterClose?: () => void;
+    /** 关闭后是否将焦点还原到打开前的元素。@default true */
+    focusTriggerAfterClose?: boolean;
+    /** 自定义层级。@default 1000 */
+    zIndex?: number;
+    /** Modal 面板类名。 */
+    className?: string;
+    /** Modal 根节点类名。 */
+    rootClassName?: string;
+    /** Modal 面板样式。 */
+    style?: CSSProperties;
+    /** 内容区域样式。 */
+    bodyStyle?: CSSProperties;
+    /** 遮罩样式。 */
+    maskStyle?: CSSProperties;
+    /** 指定 Modal 挂载容器。 */
+    getContainer?: HTMLElement | (() => HTMLElement);
 }
 /**
- * 基础数字输入框。
+ * 支持全屏操作的通用 Modal 组件。
  */
-declare const ReactNumberInput: react.ForwardRefExoticComponent<ReactNumberInputProps & react.RefAttributes<HTMLInputElement>>;
+declare function ReactModal(props: ReactModalProps): react.ReactPortal | null;
 
 interface ReactInputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "prefix"> {
     /**
@@ -567,6 +734,84 @@ interface ReactQuarterPickerProps extends Omit<ReactInputProps, "value" | "onCha
  */
 declare const ReactQuarterPicker: react.ForwardRefExoticComponent<ReactQuarterPickerProps & react.RefAttributes<HTMLInputElement>>;
 
+/** 面板排列方向。 */
+type ReactResizablePanelsDirection = "horizontal" | "vertical";
+/** 可调整面板配置。 */
+interface ReactResizablePanel {
+    /** 面板唯一标识。 */
+    id: string;
+    /** 面板内容。 */
+    content: ReactNode;
+    /** 是否显示当前面板。@default true */
+    visible?: boolean;
+    /** 是否折叠当前面板；折叠时保留内容挂载。@default false */
+    collapsed?: boolean;
+    /** 初始尺寸，单位为像素。 */
+    size?: number;
+    /** 最小尺寸，单位为像素。@default 80 */
+    minSize?: number;
+    /** 最大尺寸，单位为像素。 */
+    maxSize?: number;
+    /** 是否允许拖拽当前面板之后的分隔条。@default true */
+    resizable?: boolean;
+    /** 面板类名。 */
+    className?: string;
+    /** 面板样式。 */
+    style?: CSSProperties;
+}
+/** 面板尺寸映射。 */
+type ReactResizablePanelSizes = Partial<Record<string, number>>;
+/** 面板调整信息。 */
+interface ReactResizablePanelsResizeInfo {
+    /** 分隔条之前的面板标识。 */
+    beforePanelId: string;
+    /** 分隔条之后的面板标识。 */
+    afterPanelId: string;
+    /** 面板排列方向。 */
+    direction: ReactResizablePanelsDirection;
+}
+interface ReactResizablePanelsProps {
+    /** 面板配置。 */
+    panels: ReactResizablePanel[];
+    /** 面板排列方向。@default "horizontal" */
+    direction?: ReactResizablePanelsDirection;
+    /** 是否为面板展开、折叠及尺寸变化启用过渡动画。@default false */
+    animated?: boolean;
+    /** 当前面板尺寸，传入后进入受控模式。 */
+    sizes?: ReactResizablePanelSizes;
+    /** 默认面板尺寸。 */
+    defaultSizes?: ReactResizablePanelSizes;
+    /** 尺寸变化回调。 */
+    onSizesChange?: (sizes: ReactResizablePanelSizes, info: ReactResizablePanelsResizeInfo) => void;
+    /** 开始调整尺寸回调。 */
+    onResizeStart?: (info: ReactResizablePanelsResizeInfo) => void;
+    /** 完成调整尺寸回调。 */
+    onResizeEnd?: (sizes: ReactResizablePanelSizes, info: ReactResizablePanelsResizeInfo) => void;
+    /** 键盘方向键单次调整的像素值。@default 10 */
+    keyboardStep?: number;
+    /** 根节点类名。 */
+    className?: string;
+    /** 根节点样式。 */
+    style?: CSSProperties;
+}
+/**
+ * 支持多栏、多行以及嵌套布局的可调整面板组件。
+ */
+declare function ReactResizablePanels(props: ReactResizablePanelsProps): react.JSX.Element;
+/** 根据拖拽距离与相邻面板约束计算新尺寸。 */
+declare function resolveResizablePanelSizes(params: {
+    delta: number;
+    startBeforeSize: number;
+    startAfterSize: number;
+    beforeMinSize?: number;
+    beforeMaxSize?: number;
+    afterMinSize?: number;
+    afterMaxSize?: number;
+}): {
+    afterSize: number;
+    beforeSize: number;
+};
+
 interface ReactSelectOption {
     /**
      * 选项文本。
@@ -581,6 +826,10 @@ interface ReactSelectOption {
      */
     disabled?: boolean;
 }
+type ReactSelectFilterOption = (input: string, option: ReactSelectOption) => boolean;
+interface ReactSelectChangeInfo {
+    trigger: "mouse" | "keyboard" | "input" | "clear";
+}
 interface ReactSelectProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
     /**
      * 当前值。
@@ -593,7 +842,7 @@ interface ReactSelectProps extends Omit<ReactInputProps, "value" | "onChange" |
     /**
      * 值变化回调。
      */
-    onChange?: (value: string) => void;
+    onChange?: (value: string, info: ReactSelectChangeInfo) => void;
     /**
      * 占位提示。
      */
@@ -602,6 +851,10 @@ interface ReactSelectProps extends Omit<ReactInputProps, "value" | "onChange" |
      * 弹层类名。
      */
     popupClassName?: string;
+    /**
+     * 弹层层级。
+     */
+    popupZIndex?: number;
     /**
      * 列表高度。
      */
@@ -618,6 +871,16 @@ interface ReactSelectProps extends Omit<ReactInputProps, "value" | "onChange" |
      * 是否开启搜索过滤。
      */
     showSearch?: boolean;
+    /**
+     * 自定义搜索过滤逻辑。
+     */
+    filterOption?: ReactSelectFilterOption;
+    /** 允许输入不在 options 中的值。 */
+    allowCustomValue?: boolean;
+    /** 搜索输入变化回调。 */
+    onInputValueChange?: (value: string) => void;
+    /** 回车回调。 */
+    onPressEnter?: (value: string) => void | Promise<void>;
     /**
      * 是否允许清空。
      */
@@ -633,6 +896,23 @@ interface ReactSelectProps extends Omit<ReactInputProps, "value" | "onChange" |
  */
 declare const ReactSelect: react.ForwardRefExoticComponent<ReactSelectProps & react.RefAttributes<HTMLInputElement>>;
 
+interface ReactAutoCompleteProps extends Omit<ReactSelectProps, "allowCustomValue" | "onChange" | "onInputValueChange" | "onPressEnter"> {
+    /** 当前值。 */
+    value?: string | number;
+    /** 选项列表。 */
+    options: ReactSelectOption[];
+    /** 值变化回调。 */
+    onChange?: (value: string | number, info: ReactSelectChangeInfo) => void;
+    /** 输入变化回调。 */
+    onInputValueChange?: (value: string) => void;
+    /** 可选的回车扩展回调；返回刷新后的候选项时才重新映射输入值。 */
+    onPressEnter?: (input: string) => void | ReactSelectOption[] | Promise<void | ReactSelectOption[]>;
+}
+/**
+ * 支持自由输入的下拉输入框，可选扩展回车异步刷新候选项。
+ */
+declare const ReactAutoComplete: react.ForwardRefExoticComponent<ReactAutoCompleteProps & react.RefAttributes<HTMLInputElement>>;
+
 /**
  * 过渡动画时长配置。
  */
@@ -848,4 +1128,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
  */
 declare const REACT_COMPONENT_PREFIX = "canvas-react";
 
-export { REACT_COMPONENT_PREFIX, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactSelect, type ReactSelectOption, type ReactSelectProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, useReactContentScale, useReactTransition };
+export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, resolveResizablePanelSizes, useReactContentScale, useReactTransition };