@canvas-components/react-components 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,567 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode, KeyboardEvent, RefObject, CSSProperties } from 'react';
+
+interface ReactCheckboxRef {
+    focus: () => void;
+    blur: () => void;
+    input: HTMLInputElement | null;
+}
+interface ReactCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /**
+     * 半选状态。
+     */
+    indeterminate?: boolean;
+    /**
+     * 复选框文案。
+     */
+    children?: ReactNode;
+}
+/**
+ * 基础复选框。
+ */
+declare const ReactCheckbox: react.ForwardRefExoticComponent<ReactCheckboxProps & react.RefAttributes<ReactCheckboxRef>>;
+
+interface ReactInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * 回车确认回调。
+     */
+    onPressEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * 是否允许清空。
+     */
+    allowClear?: boolean;
+    /**
+     * 清空回调。
+     */
+    onClear?: () => void;
+    /**
+     * 右侧附加内容。
+     */
+    suffix?: ReactNode;
+    /**
+     * 外层容器类名。
+     */
+    wrapperClassName?: string;
+}
+/**
+ * 基础文本输入框。
+ */
+declare const ReactInput: react.ForwardRefExoticComponent<ReactInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ReactColorPickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
+    /** 当前颜色值。 */
+    value?: string;
+    /** 颜色变化回调，返回标准六位 HEX。 */
+    onChange?: (value: string) => void;
+    /** 弹层类名。 */
+    popupClassName?: string;
+    /** 预设颜色。 */
+    presets?: string[];
+}
+/**
+ * AntD 风格颜色选择器。
+ */
+declare const ReactColorPicker: react.ForwardRefExoticComponent<ReactColorPickerProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ReactDatePickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
+    /**
+     * 当前日期值，格式为 YYYY-MM-DD。
+     */
+    value?: string;
+    /**
+     * 值变化回调。
+     */
+    onChange?: (value: string) => void;
+    /**
+     * 弹层类名。
+     */
+    popupClassName?: string;
+    /**
+     * 是否允许清空。
+     */
+    allowClear?: boolean;
+}
+/**
+ * 基础日期选择器。
+ */
+declare const ReactDatePicker: react.ForwardRefExoticComponent<ReactDatePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ReactDateRangePickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
+    /**
+     * 当前日期区间值，格式为 `[开始日期, 结束日期]`。
+     */
+    value?: [string, string];
+    /**
+     * 值变化回调。
+     */
+    onChange?: (value: [string, string]) => void;
+    /**
+     * 弹层类名。
+     */
+    popupClassName?: string;
+    /**
+     * 区间分隔符。
+     */
+    rangeSeparator?: string;
+    /**
+     * 是否允许清空。
+     */
+    allowClear?: boolean;
+}
+/**
+ * 日期区间选择器。
+ */
+declare const ReactDateRangePicker: react.ForwardRefExoticComponent<ReactDateRangePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ReactDateTimePickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
+    /**
+     * 当前日期时间值，格式为 YYYY-MM-DD HH:mm:ss。
+     */
+    value?: string;
+    /**
+     * 值变化回调。
+     */
+    onChange?: (value: string) => void;
+    /**
+     * 弹层类名。
+     */
+    popupClassName?: string;
+    /**
+     * 是否允许清空。
+     */
+    allowClear?: boolean;
+}
+/**
+ * 年月日时分秒选择器。
+ */
+declare const ReactDateTimePicker: react.ForwardRefExoticComponent<ReactDateTimePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ReactDateTimeRangePickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
+    /**
+     * 当前日期时间区间值，格式为 `[开始日期时间, 结束日期时间]`。
+     */
+    value?: [string, string];
+    /**
+     * 值变化回调。
+     */
+    onChange?: (value: [string, string]) => void;
+    /**
+     * 弹层类名。
+     */
+    popupClassName?: string;
+    /**
+     * 区间分隔符。
+     */
+    rangeSeparator?: string;
+    /**
+     * 是否允许清空。
+     */
+    allowClear?: boolean;
+}
+/**
+ * 日期时间区间选择器。
+ */
+declare const ReactDateTimeRangePicker: react.ForwardRefExoticComponent<ReactDateTimeRangePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ReactImagePreviewProps {
+    open: boolean;
+    src: string;
+    alt?: string;
+    onClose: () => void;
+}
+/**
+ * 图片遮罩预览组件。
+ */
+declare function ReactImagePreview(props: ReactImagePreviewProps): react.JSX.Element | null;
+
+interface ReactMonthPickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
+    /**
+     * 当前月份值，格式为 YYYY-MM。
+     */
+    value?: string;
+    /**
+     * 值变化回调。
+     */
+    onChange?: (value: string) => void;
+    /**
+     * 弹层类名。
+     */
+    popupClassName?: string;
+    /**
+     * 是否允许清空。
+     */
+    allowClear?: boolean;
+}
+/**
+ * 基础月份选择器。
+ */
+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;
+}
+/**
+ * 基础数字输入框。
+ */
+declare const ReactNumberInput: react.ForwardRefExoticComponent<ReactNumberInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ReactPaginationProps {
+    /**
+     * 当前页码，从 1 开始。
+     */
+    current: number;
+    /**
+     * 总条数。
+     */
+    total: number;
+    /**
+     * 每页条数。
+     */
+    pageSize?: number;
+    /**
+     * 每页条数候选。
+     */
+    pageSizeOptions?: number[];
+    /**
+     * 是否禁用。
+     */
+    disabled?: boolean;
+    /**
+     * 是否显示页大小切换。
+     */
+    showSizeChanger?: boolean;
+    /**
+     * 是否显示快速跳转。
+     */
+    showQuickJumper?: boolean;
+    /**
+     * 是否使用更紧凑的页码数量。
+     */
+    showLessItems?: boolean;
+    /**
+     * 是否简易模式。
+     */
+    simple?: boolean;
+    /**
+     * 总数文案。
+     */
+    showTotal?: (total: number, range: [number, number]) => string;
+    /**
+     * 页码变化回调。
+     */
+    onChange?: (page: number, pageSize: number) => void;
+    /**
+     * 每页条数变化回调。
+     */
+    onPageSizeChange?: (page: number, pageSize: number) => void;
+}
+/**
+ * 基础分页器。
+ */
+declare function ReactPagination(props: ReactPaginationProps): react.JSX.Element;
+
+type PopupPlacement = "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "leftTop" | "leftBottom";
+interface PopupAnchorRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface ReactPopupProps {
+    /**
+     * 是否显示弹层。
+     */
+    open: boolean;
+    /**
+     * 触发元素引用。
+     */
+    anchorRef?: RefObject<HTMLElement | null>;
+    /**
+     * 外部直接传入的锚点矩形。
+     */
+    anchorRect?: PopupAnchorRect | null;
+    /**
+     * 弹层位置。
+     */
+    placement?: PopupPlacement;
+    /**
+     * 与锚点的间距。
+     */
+    offset?: number;
+    /**
+     * 是否跟随触发器宽度。
+     */
+    matchAnchorWidth?: boolean;
+    /**
+     * 最小宽度。
+     */
+    minWidth?: number;
+    /**
+     * 自定义层级。
+     */
+    zIndex?: number;
+    /**
+     * 弹层容器类名。
+     */
+    className?: string;
+    /**
+     * 弹层面板类名。
+     */
+    surfaceClassName?: string;
+    /**
+     * 弹层容器样式。
+     */
+    style?: CSSProperties;
+    /**
+     * 弹层面板样式。
+     */
+    surfaceStyle?: CSSProperties;
+    /**
+     * 打开状态变化回调。
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * 弹层内容。
+     */
+    children: ReactNode;
+}
+/**
+ * 通用弹出层组件。
+ */
+declare function ReactPopup(props: ReactPopupProps): react.ReactPortal | null;
+
+interface ReactQuarterPickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
+    /**
+     * 当前季度值，格式为 YYYY-QN。
+     */
+    value?: string;
+    /**
+     * 值变化回调。
+     */
+    onChange?: (value: string) => void;
+    /**
+     * 弹层类名。
+     */
+    popupClassName?: string;
+    /**
+     * 是否允许清空。
+     */
+    allowClear?: boolean;
+}
+/**
+ * 基础季度选择器。
+ */
+declare const ReactQuarterPicker: react.ForwardRefExoticComponent<ReactQuarterPickerProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ReactSelectOption {
+    /**
+     * 选项文本。
+     */
+    label: string;
+    /**
+     * 选项值。
+     */
+    value: string | number;
+    /**
+     * 是否禁用。
+     */
+    disabled?: boolean;
+}
+interface ReactSelectProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
+    /**
+     * 当前值。
+     */
+    value?: string | number;
+    /**
+     * 选项列表。
+     */
+    options: ReactSelectOption[];
+    /**
+     * 值变化回调。
+     */
+    onChange?: (value: string) => void;
+    /**
+     * 占位提示。
+     */
+    placeholder?: string;
+    /**
+     * 弹层类名。
+     */
+    popupClassName?: string;
+    /**
+     * 列表高度。
+     */
+    listHeight?: number;
+    /**
+     * 单项高度。
+     */
+    optionHeight?: number;
+    /**
+     * 是否启用虚拟列表。
+     */
+    virtual?: boolean;
+    /**
+     * 是否开启搜索过滤。
+     */
+    showSearch?: boolean;
+    /**
+     * 是否允许清空。
+     */
+    allowClear?: boolean;
+}
+/**
+ * 基础下拉选择框。
+ */
+declare const ReactSelect: react.ForwardRefExoticComponent<ReactSelectProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ReactTimePickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
+    value?: string;
+    onChange?: (value: string) => void;
+    popupClassName?: string;
+    allowClear?: boolean;
+}
+/**
+ * 基础时间选择器，支持时分秒面板选择。
+ */
+declare const ReactTimePicker: react.ForwardRefExoticComponent<ReactTimePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ReactTimeRangePickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
+    /**
+     * 当前时间范围值，格式为 `[开始时间, 结束时间]`。
+     */
+    value?: [string, string];
+    /**
+     * 值变化回调。
+     */
+    onChange?: (value: [string, string]) => void;
+    /**
+     * 弹层类名。
+     */
+    popupClassName?: string;
+    /**
+     * 范围分隔符。
+     */
+    rangeSeparator?: string;
+}
+/**
+ * 基础时间范围选择器。
+ */
+declare const ReactTimeRangePicker: react.ForwardRefExoticComponent<ReactTimeRangePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ReactVirtualListRef {
+    /**
+     * 滚动到指定项。
+     */
+    scrollToIndex: (index: number) => void;
+    /**
+     * 当前滚动容器。
+     */
+    element: HTMLDivElement | null;
+}
+interface ReactVirtualListRenderMeta {
+    /**
+     * 当前项样式。
+     */
+    style: CSSProperties;
+}
+interface ReactVirtualListProps<Item> {
+    /**
+     * 数据项。
+     */
+    items: Item[];
+    /**
+     * 容器高度。
+     */
+    height: number;
+    /**
+     * 单项高度。
+     */
+    itemHeight: number;
+    /**
+     * 是否启用虚拟滚动。
+     */
+    virtual?: boolean;
+    /**
+     * 额外预渲染项数。
+     */
+    overscan?: number;
+    /**
+     * 容器类名。
+     */
+    className?: string;
+    /**
+     * 内层类名。
+     */
+    innerClassName?: string;
+    /**
+     * 容器样式。
+     */
+    style?: CSSProperties;
+    /**
+     * 空状态内容。
+     */
+    empty?: ReactNode;
+    /**
+     * 获取项 key。
+     */
+    itemKey: (item: Item, index: number) => string | number;
+    /**
+     * 渲染项。
+     */
+    renderItem: (item: Item, index: number, meta: ReactVirtualListRenderMeta) => ReactNode;
+}
+/**
+ * 通用虚拟列表组件。
+ */
+declare const ReactVirtualList: <Item>(props: ReactVirtualListProps<Item> & {
+    ref?: React.ForwardedRef<ReactVirtualListRef>;
+}) => React.JSX.Element;
+
+interface ReactYearPickerProps extends Omit<ReactInputProps, "value" | "onChange" | "onPressEnter"> {
+    /**
+     * 当前年份值。
+     */
+    value?: string | number;
+    /**
+     * 值变化回调。
+     */
+    onChange?: (value: string) => void;
+    /**
+     * 弹层类名。
+     */
+    popupClassName?: string;
+    /**
+     * 是否允许清空。
+     */
+    allowClear?: boolean;
+}
+/**
+ * 基础年份选择器。
+ */
+declare const ReactYearPicker: react.ForwardRefExoticComponent<ReactYearPickerProps & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * 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 };