doui-react 1.0.0

package/lib/form/style/form-item.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFormItemStyle = getFormItemStyle;
+exports.getFormItemWidth = getFormItemWidth;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _api = require("../../api");
+var _style = require("../../stack/style");
+var _css = require("@emotion/css");
+var _constant = require("../component/constant");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _excluded = ["labelWidth", "controlWidth", "requiredMark", "layout", "type"];
+function getFormItemWidth(_ref) {
+  var width = _ref.width,
+    type = _ref.type;
+  if (width) {
+    return width;
+  }
+  if (_constant.useUnsetWidthKeys.includes(type)) {
+    return 'unset';
+  }
+}
+function getFormItemStyle(_ref2) {
+  var labelWidth = _ref2.labelWidth,
+    controlWidth = _ref2.controlWidth,
+    _ref2$requiredMark = _ref2.requiredMark,
+    requiredMark = _ref2$requiredMark === void 0 ? true : _ref2$requiredMark,
+    layout = _ref2.layout,
+    type = _ref2.type,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var baseStyle = (0, _css.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    &.ant-form-item {\n      min-width: 0;\n\n      .ant-form-item-label {\n        width: ", ";\n\n        .ant-form-item-tooltip {\n          color: inherit;\n          font-size: 13px;\n          margin-inline-start: unset;\n          margin-left: 3px;\n        }\n      }\n\n      .ant-form-item-control-input {\n        width: ", ";\n      }\n\n      .ant-form-item-required::before {\n        display: ", ";\n      }\n\n      ", "\n      ", "\n      ", "\n    }\n  "])), (0, _api.transformValueWithStyleUnit)(labelWidth), (0, _api.transformValueWithStyleUnit)(controlWidth), requiredMark ? undefined : 'none', layout === 'horizontal' && getHorizontalStyle(), layout === 'vertical' && getVerticalStyle(), type === 'tree' && treeItemStyle());
+  return (0, _css.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n  "])), (0, _style.getWidthAndFlex)(props), baseStyle);
+}
+function getHorizontalStyle() {
+  return (0, _css.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    .ant-form-item-row {\n      flex-direction: row;\n    }\n\n    .ant-form-item-label {\n      padding-bottom: 0;\n\n      > label {\n        height: 32px;\n        margin-right: 8px;\n      }\n    }\n\n    .ant-form-item-control {\n      flex: 1;\n      min-width: 0;\n    }\n  "])));
+}
+function getVerticalStyle() {
+  return (0, _css.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    .ant-form-item-row {\n      flex-direction: column;\n    }\n\n    .ant-form-item-label {\n      > label {\n        height: auto;\n        margin-bottom: 4px;\n      }\n\n      .ant-form-item-required::before {\n        position: unset;\n      }\n    }\n  "])));
+}
+function treeItemStyle() {
+  return (0, _css.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    &,\n    .ant-form-item-row,\n    .ant-form-item-control,\n    .ant-form-item-control-input,\n    .ant-form-item-control-input-content {\n      height: 100%;\n    }\n  "])));
+}

package/lib/form/style/index.d.ts

@@ -0,0 +1,7 @@
+import { FormProps } from "..";
+export * from './form-item';
+type WrapperProps = Pick<FormProps, 'labelWidth' | 'formItemMarginBottom'>;
+declare const style: {
+    wrapper: ({ labelWidth, formItemMarginBottom }: WrapperProps) => import("@emotion/react").SerializedStyles;
+};
+export default style;

package/lib/form/style/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _api = require("../../api");
+var _react = require("@emotion/react");
+var _formItem = require("./form-item");
+Object.keys(_formItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _formItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _formItem[key];
+    }
+  });
+});
+var _templateObject;
+var style = {
+  wrapper: function wrapper(_ref) {
+    var labelWidth = _ref.labelWidth,
+      formItemMarginBottom = _ref.formItemMarginBottom;
+    return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n\n    .ant-form-item {\n      margin-bottom: ", ";\n    }\n\n    .ant-form-item-label {\n      width: ", ";\n    }\n\n    .ant-form-item-with-help .ant-form-item-explain {\n      line-height: 1.1;\n      padding: 4px 0;\n\n      .ant-form-item-explain-error + .ant-form-item-explain-error {\n        margin-top: 2px;\n      }\n    }\n\n    &.ant-form-horizontal {\n      .ant-form-item-required::before {\n        position: absolute;\n        left: -10px;\n      }\n    }\n\n    &.ant-form-vertical {\n      .ant-form-item-label {\n        padding-bottom: 2px;\n      }\n    }\n\n    // disabled \u65F6\u4E5F\u9700\u8981\u663E\u793A error \u6846\n    .ant-picker-status-error.ant-picker,\n    .ant-select-status-error.ant-select:not(.ant-select-customize-input) .ant-select-selector,\n    .ant-input-status-error:not(.ant-input-borderless),\n    .ant-input-number-status-error:not(.ant-input-number-borderless),\n    .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-borderless) {\n      border-color: #ff4d4f;\n    }\n  "])), _api.commonFontFamily, (0, _api.transformValueWithStyleUnit)(formItemMarginBottom), (0, _api.transformValueWithStyleUnit)(labelWidth));
+  }
+};
+var _default = exports.default = style;

package/lib/form/type/form-item.d.ts

@@ -0,0 +1,141 @@
+import { FunctionReturn, Refs } from "../../api";
+import { CheckboxProps } from "../../checkbox";
+import { DatePickerProps, RangePickerProps } from "../../date-picker";
+import { CommonParams, FormListContext, FormValues } from "..";
+import { InputProps } from "../../input";
+import { RadioProps } from "../../radio";
+import { SelectOptions, SelectProps } from "../../select";
+import { SwitchProps } from "../../switch";
+import { TreeSelectProps } from "../../tree-select";
+import { FormItemProps as AntdFormItemProps } from 'antd/lib/form/FormItem';
+import { SliderRangeProps, SliderSingleProps } from 'antd/lib/slider';
+import { Rule } from 'rc-field-form/lib/interface';
+import { ReactElement, ReactNode } from 'react';
+import { InputComponentType, OtherComponentType } from '../component/form-item';
+type SliderProps = SliderSingleProps | SliderRangeProps;
+type UnionType = Omit<AntdFormItemProps & InputProps & SelectProps & TreeSelectProps & SwitchProps & RadioProps & CheckboxProps & SliderProps, 'rules' | 'type' | 'disabled' | 'options' | 'required'>;
+/**
+ * @noExtends
+ */
+export interface FormItemProps extends UnionType {
+    /**
+     * @description 表单类型
+     * @default input
+     */
+    type?: InputComponentType | OtherComponentType;
+    /**
+     * @description 表单名称，支持层级嵌套，如：a.b.c
+     * @default (必选)
+     */
+    name?: string;
+    /**
+     * @description 是否禁用
+     */
+    disabled?: boolean | ((values: FormValues, params: CommonParams) => boolean);
+    /**
+     * @description 选择框下拉选项
+     * @link SelectOptions: /components/select#select-option
+     */
+    options?: SelectOptions | ((values: FormValues, params: OptionsParams) => FunctionReturn<SelectOptions>);
+    /**
+     * @description 是否必填
+     */
+    required?: boolean | string;
+    /**
+     * @description 校验 `value` 是否在 `options` 中
+     * @default false
+     */
+    requiredInOptions?: boolean | string;
+    /**
+     * @description 自定义校验
+     */
+    validator?(params: ValidatorProps): FunctionReturn<string | void>;
+    /**
+     * @description 是否过滤选项中不存在的值
+     * @default false
+     * @replaceAll boolean | "useFirstOption" | string | number
+     */
+    filterNotExistValue?: boolean | string | number | 'useFirstOption';
+    /**
+     * @description 是否显示
+     * @default true
+     */
+    show?: boolean | ((values: FormValues, params: CommonParams) => boolean);
+    /**
+     * @link FormItemRule: https://4x.ant.design/components/form-cn/#Rule
+     */
+    rules?: FormItemRule[];
+    /**
+     * @description 日期选择器属性（当 `type` 为 `date`、`rangeDate` 时生效）
+     * @link DatePickerProps | RangePickerProps: /components/date-picker#api
+     */
+    dateProps?: DatePickerProps | RangePickerProps;
+    /**
+     * @description flex 布局属性
+     * @default 1
+     */
+    flex?: number | string;
+    /**
+     * @description label 宽度
+     */
+    labelWidth?: number | string;
+    /**
+     * @description 输入框宽度
+     */
+    controlWidth?: number | string;
+    /**
+     * @description 布局方式
+     * @default horizontal
+     */
+    layout?: 'horizontal' | 'vertical';
+    preserveStatus?: boolean;
+    /**
+     * @description 自定义渲染
+     */
+    render?: (params: RenderProps) => ReactElement;
+    /**
+     * @description 子节点
+     */
+    children?: ReactNode | ((params: RenderChildrenProps) => ReactNode);
+    formListContext?: FormListContext;
+    dependencies?: string[];
+    removeErrorOnBlur?: boolean;
+    __noCollectState__?: boolean;
+}
+export interface FormItemContext extends Pick<FormItemPropsWithType, 'type' | 'optionDependencies' | 'loading' | 'rules' | 'formListContext'> {
+    name: string;
+    options?: SelectOptions;
+    refs: Refs;
+}
+export interface OptionsParams extends CommonParams {
+    search: string;
+}
+export interface RenderProps extends CommonParams, FormItemProps {
+    id: string;
+    name: string;
+    refs: Refs;
+    collectState(item: Partial<FormItemContext>): void;
+}
+interface RenderChildrenProps {
+    id: string;
+    refs: Refs;
+    value?: any;
+    onChange?(value: any): void;
+    onBlur?(event: any): void;
+    onFocus?(event: any): void;
+}
+export type FormItemRenderProps = Partial<RenderProps>;
+export type FormItemChildrenProps = Partial<RenderChildrenProps>;
+export type FormItemPropsWithType = FormItemProps & {
+    type: string;
+    name: string;
+};
+export interface ValidatorProps extends CommonParams {
+    value: any;
+    item: FormItemProps;
+}
+export type FormItemRule = {
+    validateOnMount?: boolean;
+    validator?: FormItemProps['validator'];
+} | Omit<Rule, 'validator'>;
+export {};

package/lib/form/type/form-item.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/form/type/form-list.d.ts

@@ -0,0 +1,91 @@
+import { ButtonProps } from "../../button";
+import { FormItemProps, FormValues } from "..";
+import { ListOperation } from "../../hooks";
+import { FormListFieldData } from 'antd/lib/form/FormList';
+import { ReactNode } from 'react';
+export interface FormListContext extends FormListCommonProps {
+    name: FormItemProps['name'];
+}
+/**
+ * @noExtends
+ */
+export interface FormListProps extends FormItemProps {
+    /**
+     * @description 表单名称，支持层级嵌套，如：a.b.c
+     */
+    name: FormItemProps['name'];
+    /**
+     * @description 每一项渲染函数
+     */
+    item?: ReactNode | ((props: FormListItemProps) => ReactNode);
+    /**
+     * @description 渲染函数
+     */
+    children?(props: FormListChildrenProps): ReactNode;
+    /**
+     * @description 是否在新增时，聚焦第一个输入框
+     * @default true
+     */
+    focusFirstOnAdd?: boolean | string;
+}
+export interface FormListItemProps extends FormListCommonProps {
+    /**
+     * @description 当前项的索引
+     */
+    index: number;
+    /**
+     * @description 当前项的值
+     */
+    value: any;
+    /**
+     * @description 更新当前项的值
+     */
+    onChange(value?: any): void;
+}
+export interface FormListChildrenProps extends FormListCommonProps {
+    /**
+     * @description 当前 `List` 中，所有表单项的内容
+     */
+    component: ReactNode;
+}
+type FormListOperation = Omit<ListOperation, 'value'>;
+export interface FormListCommonProps extends FormListOperation {
+    /**
+     * @description 表单值
+     */
+    values: FormValues;
+    /**
+     * @description 当前 `List` 中，所有表单字段
+     */
+    fields: FormListFieldData[];
+    /**
+     * @description 错误信息
+     */
+    errors: ReactNode[];
+    warnings: ReactNode[];
+}
+/**
+ * @noExtends
+ */
+export interface FormListActionProps extends ButtonProps {
+    /**
+     * @description 操作类型
+     * @replaceAll "add" | "remove" | "moveUp" | "moveDown" | "move"
+     */
+    operation: keyof Omit<FormListOperation, 'update'>;
+    /**
+     * @description 新增时的默认值（当 `operation` 为 `add` 时生效）
+     */
+    defaultValue?: any;
+    /**
+     * @description 插入位置，默认为数组末尾（当 `operation` 为 `add` 时生效）
+     */
+    insertIndex?: number;
+    /**
+     * @description 当前项的索引（当 `operation` 为 `remove` 时，`index` 为数组支持批量删除，不传时，则清空所有项）
+     */
+    index?: number | number[];
+    from?: number;
+    to?: number;
+}
+export {};

package/lib/form/type/form-list.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/form/type/index.d.ts

@@ -0,0 +1,134 @@
+import { FunctionReturn } from "../../api";
+import { ButtonProps } from "../../button";
+import { FormContext, FormItemContext, FormItemProps, FormListContext } from "..";
+import { FormProps as AntdFormProps } from 'antd/lib/form/Form';
+import { FormInstance as AntdFormInstance } from 'antd/lib/form/hooks/useForm';
+import { InputFocusOptions } from 'antd/lib/input/Input';
+import { ValidateOptions } from 'rc-field-form/es/interface';
+import { StoreValue } from 'rc-field-form/lib/interface';
+import { ReactNode } from 'react';
+import { registerMethods } from '../component/constant';
+export * from './form-item';
+export * from './form-list';
+export type RegisterMethodType = keyof typeof registerMethods;
+export type FormValues = Record<string, StoreValue>;
+export interface FormInstance extends AntdFormInstance {
+    /**
+     * @description 设置表单的值
+     * @style { minWidth: 350 }
+     * @replaceAll (name: string, value: StoreValue): void;
+     *             (params: FormValues): void;
+     */
+    setValue(name: string, value: StoreValue): void;
+    setValue(params?: FormValues): void;
+    /**
+     * @description 获取表单的值，不传入 name 则返回所有值
+     */
+    getValue(name?: string): StoreValue;
+    /**
+     * @description 设置上下文
+     * @replaceAll (name: string, value: StoreValue): void;
+     *             (params: FormValues): void;
+     */
+    setContext(name: string, value: StoreValue): void;
+    setContext(params?: FormValues): void;
+    getContext(name?: string): FormContext;
+    /**
+     * @description 设置表单的错误信息
+     * @replaceAll (name: string, message: string): void;
+     *             (params: Record<string, string>): void;
+     */
+    setError(name: string, message?: string): Promise<void>;
+    setError(params?: Record<string, string>): Promise<void>;
+    /**
+     * @description 获取表单的错误信息
+     */
+    getError(name?: string): any;
+    /**
+     * @description 重置表单的错误信息
+     */
+    resetError(name?: string | string[]): void;
+    /**
+     * @description 校验表单，返回校验结果
+     */
+    validate(name?: string | string[], options?: ValidateOptions): Promise<boolean>;
+    /**
+     * @description 提交表单，返回表单值
+     */
+    submit(): Promise<FormValues>;
+    /**
+     * @description 重置表单
+     */
+    reset(name?: string | string[]): void;
+    /**
+     * @description 聚焦表单项
+     */
+    focus(name: string, option?: InputFocusOptions): void;
+    /**
+     * FormItem 相关方法
+     */
+    setItems(items: FormItemContext[]): void;
+    getItems(): FormItemContext[];
+    getItems(name: string): FormItemContext | undefined;
+    update(): void;
+    getName(): string;
+    /**
+     * 获取 FormList，不传入 name 则返回所有 FormList
+     */
+    getFormList(): FormListContext[];
+    getFormList(name: string): FormListContext | undefined;
+    __INTERNAL__: any;
+    registerMethod(name: RegisterMethodType, fn: Function): void;
+    callMethod(name: RegisterMethodType, ...args: any): FunctionReturn<any>;
+}
+export interface FormProps extends AntdFormProps {
+    children?: ReactNode;
+    items?: FormItemProps[];
+    loading?: boolean;
+    form?: FormInstance;
+    context?: Record<string, any>;
+    footer?: ReactNode;
+    /**
+     * @description 表单初始值
+     */
+    initialValues?: FormValues | ((context?: FormContext) => FunctionReturn<FormValues>);
+    /**
+     * @description 该方法可以初始化其他额外数据，可通过 `useFormContext()` 获取
+     */
+    initialContext?: FormValues | ((props?: any) => FunctionReturn<FormValues>);
+    /**
+     * @description label 宽度
+     */
+    labelWidth?: number | string;
+    /**
+     * @description formItem 底部间距
+     * @default 24px
+     */
+    formItemMarginBottom?: number | string;
+    /**
+     * 是否在首次渲染时校验表单
+     */
+    validateOnMount?: boolean;
+    /**
+     * 是否在首次渲染时，聚焦第一个输入框
+     */
+    focusFirstOnMount?: boolean | string;
+    /**
+     * @description 校验失败，返回错误信息
+     */
+    onValidateFailed?(error: Record<string, string>): void;
+    onValidate?(valid: boolean, form: FormInstance): boolean | void;
+    onMount?(params: CommonParams): void;
+    debug?: boolean;
+}
+export interface CommonParams {
+    form: FormInstance;
+    items: FormItemContext[];
+}
+export interface SubmitButtonProps extends Omit<ButtonProps, 'onClick'>, Pick<FormProps, 'onValidate'> {
+    disableOnValidateFailure?: boolean;
+    /**
+     * @description 点击事件
+     */
+    onClick(value: FormValues, form: FormInstance): FunctionReturn<void>;
+}

package/lib/form/type/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _formItem = require("./form-item");
+Object.keys(_formItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _formItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _formItem[key];
+    }
+  });
+});
+var _formList = require("./form-list");
+Object.keys(_formList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _formList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _formList[key];
+    }
+  });
+});

package/lib/grid/component/index.d.ts

@@ -0,0 +1,2 @@
+import { GridProps } from "..";
+export declare function Grid(props: GridProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/grid/component/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Grid = Grid;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _api = require("../../api");
+var _empty = require("../../empty");
+var _stack = require("../../stack");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = require("react");
+var _reactUse = require("react-use");
+var _style = _interopRequireDefault(require("../style"));
+var _pagination = require("./pagination");
+var _utils = require("./utils");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["column", "gap", "onSize"],
+  _excluded2 = ["showData"],
+  _excluded3 = ["data", "emptyText", "children", "pagination", "rows"];
+function useGrid(_ref) {
+  var _ref$column = _ref.column,
+    column = _ref$column === void 0 ? 5 : _ref$column,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 16 : _ref$gap,
+    onSize = _ref.onSize,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var size = (0, _reactUse.useWindowSize)();
+  var columns = _lodash.default.isArray(column) ? column : [{
+    column: column
+  }];
+  var css = _style.default.wrapper({
+    columns: columns,
+    gap: gap
+  });
+  var config = (0, _utils.getColumnConfig)(columns, size.width);
+  var currentColumn = +config.column;
+  var _usePagination = (0, _pagination.usePagination)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
+      column: currentColumn
+    })),
+    showData = _usePagination.showData,
+    pagination = (0, _objectWithoutProperties2.default)(_usePagination, _excluded2);
+  (0, _react.useEffect)(function () {
+    onSize === null || onSize === void 0 || onSize((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, size), config), {}, {
+      column: currentColumn
+    }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentColumn]);
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    css: css
+  }, restProps), {}, {
+    className: (0, _api.combineClassName)('grid', restProps),
+    data: showData,
+    pagination: pagination
+  });
+}
+function Grid(props) {
+  var _useGrid = useGrid(props),
+    data = _useGrid.data,
+    emptyText = _useGrid.emptyText,
+    children = _useGrid.children,
+    pagination = _useGrid.pagination,
+    rows = _useGrid.rows,
+    params = (0, _objectWithoutProperties2.default)(_useGrid, _excluded3);
+  if (_lodash.default.isEmpty(data)) {
+    return (0, _jsxRuntime.jsx)(_empty.Empty, {
+      description: emptyText
+    });
+  }
+  return (0, _jsxRuntime.jsxs)(_stack.VStack, {
+    className: (0, _api.getClassName)('grid-container'),
+    children: [(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params), {}, {
+      children: _lodash.default.map(data, function (item, index) {
+        return (0, _jsxRuntime.jsx)("div", {
+          className: (0, _api.getClassName)('grid-item'),
+          children: children(item, index)
+        }, index);
+      })
+    })), rows && (0, _jsxRuntime.jsx)(_pagination.Pagination, (0, _objectSpread2.default)({}, pagination))]
+  });
+}

package/lib/grid/component/pagination.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+/// <reference types="rc-pagination" />
+import { GridProps } from "..";
+import { HStackProps } from "../../stack";
+import { TablePaginationConfig } from 'antd';
+interface PaginationParams extends GridProps {
+    column: number;
+}
+export declare function usePagination({ data, rows, column, pagination }: PaginationParams): {
+    showData: any[];
+    pageSize: number;
+    current: number;
+    total: number;
+    onChange: import("react").Dispatch<import("react").SetStateAction<number>>;
+    position?: ("topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "topCenter" | "bottomCenter")[] | undefined;
+    showQuickJumper?: boolean | {
+        goButton?: import("react").ReactNode;
+    } | undefined;
+    size?: "small" | "default" | undefined;
+    responsive?: boolean | undefined;
+    role?: string | undefined;
+    totalBoundaryShowSizeChanger?: number | undefined;
+    onShowSizeChange?: ((current: number, size: number) => void) | undefined;
+    itemRender?: ((page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: import("react").ReactNode) => import("react").ReactNode) | undefined;
+    showTotal?: ((total: number, range: [number, number]) => import("react").ReactNode) | undefined;
+    className?: string | undefined;
+    selectPrefixCls?: string | undefined;
+    prefixCls?: string | undefined;
+    pageSizeOptions?: string[] | number[] | undefined;
+    defaultCurrent?: number | undefined;
+    defaultPageSize?: number | undefined;
+    hideOnSinglePage?: boolean | undefined;
+    showSizeChanger?: boolean | undefined;
+    showLessItems?: boolean | undefined;
+    showPrevNextJumpers?: boolean | undefined;
+    showTitle?: boolean | undefined;
+    simple?: boolean | undefined;
+    disabled?: boolean | undefined;
+    locale?: import("rc-pagination").PaginationLocale | undefined;
+    style?: import("react").CSSProperties | undefined;
+    selectComponentClass?: import("react").ComponentType<{}> | undefined;
+    prevIcon?: import("react").ReactNode | import("react").ComponentType<{}>;
+    nextIcon?: import("react").ReactNode | import("react").ComponentType<{}>;
+    jumpPrevIcon?: import("react").ReactNode | import("react").ComponentType<{}>;
+    jumpNextIcon?: import("react").ReactNode | import("react").ComponentType<{}>;
+    justify?: "center" | "left" | "right" | "between" | undefined;
+};
+export type PaginationProps = TablePaginationConfig & Pick<HStackProps, 'justify'>;
+export declare function Pagination({ justify, className, style, ...props }: PaginationProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};