@canvas-components/react-components 0.1.1 → 0.1.5

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, KeyboardEvent, RefObject, CSSProperties } from 'react';
+import { InputHTMLAttributes, ReactNode, KeyboardEvent, RefObject, CSSProperties, ButtonHTMLAttributes, MouseEvent } from 'react';
 
 interface ReactCheckboxRef {
     focus: () => void;
@@ -49,6 +49,11 @@ interface ReactInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "s
 declare const ReactInput: react.ForwardRefExoticComponent<ReactInputProps & react.RefAttributes<HTMLInputElement>>;
 
 interface ReactColorPickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
+    /**
+     * 是否显示右侧下拉箭头。
+     * @default true
+     */
+    showArrow?: boolean;
     /** 当前颜色值。 */
     value?: string;
     /** 颜色变化回调，返回标准六位 HEX。 */
@@ -80,6 +85,11 @@ interface ReactDatePickerProps extends Omit<ReactInputProps, "value" | "onChange
      * 是否允许清空。
      */
     allowClear?: boolean;
+    /**
+     * 是否显示右侧下拉箭头。
+     * @default true
+     */
+    showArrow?: boolean;
 }
 /**
  * 基础日期选择器。
@@ -107,6 +117,11 @@ interface ReactDateRangePickerProps extends Omit<ReactInputProps, "value" | "onC
      * 是否允许清空。
      */
     allowClear?: boolean;
+    /**
+     * 是否显示右侧下拉箭头。
+     * @default true
+     */
+    showArrow?: boolean;
 }
 /**
  * 日期区间选择器。
@@ -130,6 +145,11 @@ interface ReactDateTimePickerProps extends Omit<ReactInputProps, "value" | "onCh
      * 是否允许清空。
      */
     allowClear?: boolean;
+    /**
+     * 是否显示右侧下拉箭头。
+     * @default true
+     */
+    showArrow?: boolean;
 }
 /**
  * 年月日时分秒选择器。
@@ -157,6 +177,11 @@ interface ReactDateTimeRangePickerProps extends Omit<ReactInputProps, "value" |
      * 是否允许清空。
      */
     allowClear?: boolean;
+    /**
+     * 是否显示右侧下拉箭头。
+     * @default true
+     */
+    showArrow?: boolean;
 }
 /**
  * 日期时间区间选择器。
@@ -191,6 +216,11 @@ interface ReactMonthPickerProps extends Omit<ReactInputProps, "value" | "onChang
      * 是否允许清空。
      */
     allowClear?: boolean;
+    /**
+     * 是否显示右侧下拉箭头。
+     * @default true
+     */
+    showArrow?: boolean;
 }
 /**
  * 基础月份选择器。
@@ -224,6 +254,58 @@ interface ReactNumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
  */
 declare const ReactNumberInput: react.ForwardRefExoticComponent<ReactNumberInputProps & react.RefAttributes<HTMLInputElement>>;
 
+interface ReactInputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "prefix"> {
+    /**
+     * 当前值。
+     */
+    value?: number | null;
+    /**
+     * 默认值（非受控）。
+     */
+    defaultValue?: number | null;
+    /**
+     * 最小值。
+     */
+    min?: number;
+    /**
+     * 最大值。
+     */
+    max?: number;
+    /**
+     * 步进。
+     * @default 1
+     */
+    step?: number;
+    /**
+     * 小数精度；不传时按 step 推断。
+     */
+    precision?: number;
+    /**
+     * 值变化回调。
+     */
+    onChange?: (value: number | null) => void;
+    /**
+     * 失焦或回车时规范化后的回调。
+     */
+    onCommit?: (value: number | null) => void;
+    /**
+     * 右侧附加内容，如 `%`。
+     */
+    addonAfter?: ReactNode;
+    /**
+     * 自定义格式化显示。
+     */
+    formatter?: (value: number | null) => string;
+    /**
+     * 自定义解析输入文本。
+     */
+    parser?: (text: string) => number | null;
+}
+/**
+ * 左减右加数字计步器。
+ */
+declare const ReactInputNumber: react.ForwardRefExoticComponent<ReactInputNumberProps & react.RefAttributes<HTMLInputElement>>;
+
 interface ReactPaginationProps {
     /**
      * 当前页码，从 1 开始。
@@ -349,6 +431,114 @@ interface ReactPopupProps {
  */
 declare function ReactPopup(props: ReactPopupProps): react.ReactPortal | null;
 
+/**
+ * 确认气泡弹出位置。
+ */
+type ReactPopconfirmPlacement = NonNullable<ReactPopupProps["placement"]>;
+/**
+ * 确认气泡按钮属性。
+ */
+type ReactPopconfirmButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "type">;
+type ReactPopconfirmConfirmResult = void | Promise<void>;
+interface ReactPopconfirmProps {
+    /**
+     * 触发确认气泡的内容。
+     */
+    children: ReactNode;
+    /**
+     * 确认标题。
+     */
+    title: ReactNode;
+    /**
+     * 补充说明。
+     */
+    description?: ReactNode;
+    /**
+     * 是否显示确认气泡，传入后进入受控模式。
+     */
+    open?: boolean;
+    /**
+     * 默认是否显示确认气泡。
+     */
+    defaultOpen?: boolean;
+    /**
+     * 是否禁用确认气泡。
+     */
+    disabled?: boolean;
+    /**
+     * 确认气泡位置。
+     */
+    placement?: ReactPopconfirmPlacement;
+    /**
+     * 与触发元素的间距。
+     */
+    offset?: number;
+    /**
+     * 自定义层级。
+     */
+    zIndex?: number;
+    /**
+     * 图标内容，传入 null 时隐藏默认图标。
+     */
+    icon?: ReactNode;
+    /**
+     * 确认按钮文案。
+     */
+    okText?: ReactNode;
+    /**
+     * 取消按钮文案。
+     */
+    cancelText?: ReactNode;
+    /**
+     * 是否显示取消按钮。
+     */
+    showCancel?: boolean;
+    /**
+     * 确认按钮是否加载中。
+     */
+    confirmLoading?: boolean;
+    /**
+     * 确认按钮属性。
+     */
+    okButtonProps?: ReactPopconfirmButtonProps;
+    /**
+     * 取消按钮属性。
+     */
+    cancelButtonProps?: ReactPopconfirmButtonProps;
+    /**
+     * 点击确认回调。
+     */
+    onConfirm?: (event: MouseEvent<HTMLButtonElement>) => ReactPopconfirmConfirmResult;
+    /**
+     * 点击取消回调。
+     */
+    onCancel?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * 打开状态变化回调。
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * 触发器类名。
+     */
+    className?: string;
+    /**
+     * 触发器样式。
+     */
+    style?: CSSProperties;
+    /**
+     * 弹层面板类名。
+     */
+    popupClassName?: string;
+    /**
+     * 弹层面板样式。
+     */
+    popupStyle?: CSSProperties;
+}
+/**
+ * 点击触发的确认气泡组件。
+ */
+declare function ReactPopconfirm(props: ReactPopconfirmProps): react.JSX.Element;
+
 interface ReactQuarterPickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
     /**
      * 当前季度值，格式为 YYYY-QN。
@@ -366,6 +556,11 @@ interface ReactQuarterPickerProps extends Omit<ReactInputProps, "value" | "onCha
      * 是否允许清空。
      */
     allowClear?: boolean;
+    /**
+     * 是否显示右侧下拉箭头。
+     * @default true
+     */
+    showArrow?: boolean;
 }
 /**
  * 基础季度选择器。
@@ -427,17 +622,78 @@ interface ReactSelectProps extends Omit<ReactInputProps, "value" | "onChange" |
      * 是否允许清空。
      */
     allowClear?: boolean;
+    /**
+     * 是否显示右侧下拉箭头。
+     * @default true
+     */
+    showArrow?: boolean;
 }
 /**
  * 基础下拉选择框。
  */
 declare const ReactSelect: react.ForwardRefExoticComponent<ReactSelectProps & react.RefAttributes<HTMLInputElement>>;
 
+/**
+ * 过渡动画时长配置。
+ */
+type ReactTransitionDuration = number | {
+    enter?: number;
+    leave?: number;
+};
+/**
+ * Vue 风格的过渡阶段。
+ */
+type ReactTransitionPhase = "enter-from" | "enter-to" | "entered" | "leave-from" | "leave-to";
+/**
+ * 过渡组件提供给渲染函数的状态。
+ */
+interface ReactTransitionState {
+    /** 当前阶段对应的 CSS 类名。 */
+    className?: string;
+    /** 当前过渡阶段。 */
+    phase: ReactTransitionPhase;
+    /** 子节点当前是否需要挂载。 */
+    rendered: boolean;
+}
+/**
+ * 过渡状态配置。
+ */
+interface ReactTransitionOptions {
+    /** 是否显示内容。 */
+    show: boolean;
+    /** CSS 类名前缀。 */
+    name?: string;
+    /** 进入和离开动画时长。 */
+    duration?: ReactTransitionDuration;
+    /** 首次显示时是否执行进入动画。 */
+    appear?: boolean;
+}
+/**
+ * 过渡组件属性。
+ */
+interface ReactTransitionProps extends ReactTransitionOptions {
+    /** 根据过渡状态渲染内容。 */
+    children: (state: ReactTransitionState) => ReactNode;
+}
+/**
+ * 提供 Vue 风格 CSS 阶段的过渡状态。
+ */
+declare function useReactTransition(options: ReactTransitionOptions): ReactTransitionState;
+/**
+ * 在离开动画完成后卸载内容的无包装过渡组件。
+ */
+declare function ReactTransition(props: ReactTransitionProps): ReactNode;
+
 interface ReactTimePickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
     value?: string;
     onChange?: (value: string) => void;
     popupClassName?: string;
     allowClear?: boolean;
+    /**
+     * 是否显示右侧下拉箭头。
+     * @default true
+     */
+    showArrow?: boolean;
 }
 /**
  * 基础时间选择器，支持时分秒面板选择。
@@ -445,6 +701,11 @@ interface ReactTimePickerProps extends Omit<ReactInputProps, "value" | "onChange
 declare const ReactTimePicker: react.ForwardRefExoticComponent<ReactTimePickerProps & react.RefAttributes<HTMLInputElement>>;
 
 interface ReactTimeRangePickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
+    /**
+     * 是否显示右侧下拉箭头。
+     * @default true
+     */
+    showArrow?: boolean;
     /**
      * 当前时间范围值，格式为 `[开始时间, 结束时间]`。
      */
@@ -553,15 +814,38 @@ interface ReactYearPickerProps extends Omit<ReactInputProps, "value" | "onChange
      * 是否允许清空。
      */
     allowClear?: boolean;
+    /**
+     * 是否显示右侧下拉箭头。
+     * @default true
+     */
+    showArrow?: boolean;
 }
 /**
  * 基础年份选择器。
  */
 declare const ReactYearPicker: react.ForwardRefExoticComponent<ReactYearPickerProps & react.RefAttributes<HTMLInputElement>>;
 
+interface ReactContentScaleValue {
+    /**
+     * 内容缩放比例，1 表示 100%。
+     */
+    scale: number;
+}
+/**
+ * 提供内容缩放上下文，供弹出层等 portal 节点同步表格缩放。
+ */
+declare function ReactContentScaleProvider(props: {
+    scale?: number;
+    children: ReactNode;
+}): react.JSX.Element;
+/**
+ * 读取当前内容缩放比例。
+ */
+declare function useReactContentScale(): ReactContentScaleValue;
+
 /**
  * React 基础组件统一类名前缀。
  */
 declare const REACT_COMPONENT_PREFIX = "canvas-react";
 
-export { REACT_COMPONENT_PREFIX, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactColorPicker, type ReactColorPickerProps, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, ReactImagePreview, type ReactImagePreviewProps, ReactInput, type ReactInputProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactSelect, type ReactSelectOption, type ReactSelectProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps };
+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 };