one-design-next 0.0.4-alpha.57

package/dist/pagination/index.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import './style';
+export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * @description 当前页码
+     * @default 1
+     */
+    value?: number;
+    /**
+     * @description 总条数
+     */
+    totalSize: number;
+    /**
+     * @description 每页条数
+     * @default 10
+     */
+    pageSize?: number;
+    /**
+     * @description 页码变化时的回调
+     */
+    onChange?: (e: React.MouseEvent<HTMLDivElement>, value: number, pageSize: number) => void;
+    /**
+     * @description 每页条数变化时的回调
+     */
+    onPageSizeChange?: (newPageSize: number, pageSize: number) => void;
+    /**
+     * @description 是否显示上一页和下一页
+     * @default true
+     */
+    showPrevNext?: boolean;
+    /**
+     * @description 类型
+     * @default 'default'
+     */
+    type?: 'default' | 'simple';
+}
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;

package/dist/pagination/index.js

@@ -0,0 +1,349 @@
+var _excluded = ["value", "totalSize", "pageSize", "onChange", "onPageSizeChange", "onMouseEnter", "onMouseLeave", "showPrevNext", "type"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useEffect, useRef } from 'react';
+import "./style";
+var range = function range(start, end) {
+  var length = end - start + 1;
+  return Array.from({
+    length: length
+  }, function (_, i) {
+    return start + i;
+  });
+};
+var Pagination = function Pagination(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 1 : _ref$value,
+    totalSize = _ref.totalSize,
+    _ref$pageSize = _ref.pageSize,
+    pageSize = _ref$pageSize === void 0 ? 10 : _ref$pageSize,
+    onChange = _ref.onChange,
+    onPageSizeChange = _ref.onPageSizeChange,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    _ref$showPrevNext = _ref.showPrevNext,
+    showPrevNext = _ref$showPrevNext === void 0 ? true : _ref$showPrevNext,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var hoverFillRef = useRef(null);
+  var hoverFillBgRef = useRef(null);
+  var activeIndicatorRef = useRef(null);
+  var containerRef = useRef(null);
+  var hoverFillVisibleRef = useRef(false);
+  var itemLeaveTimer = useRef(0);
+  var pageNumber = Math.ceil(totalSize / pageSize);
+  var isPrevDisabled = value === 1 && type === 'default';
+  var isNextDisabled = value === pageNumber && type === 'default';
+  var handleItemMouseEnter = function handleItemMouseEnter(e) {
+    e.persist();
+    clearTimeout(itemLeaveTimer.current);
+    if (!hoverFillBgRef.current || !hoverFillRef.current) {
+      return;
+    }
+    hoverFillRef.current.style.left = "".concat(e.currentTarget.offsetLeft, "px");
+    hoverFillBgRef.current.style.transform = 'scale(1)';
+    hoverFillBgRef.current.style.background = 'rgba(33, 34, 38, 0.05)';
+    if (!hoverFillVisibleRef.current) {
+      hoverFillVisibleRef.current = true;
+      hoverFillRef.current.style.transitionDuration = '0s';
+      var clientX = e.clientX,
+        clientY = e.clientY;
+      var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
+        x = _e$currentTarget$getB.x,
+        y = _e$currentTarget$getB.y;
+      hoverFillBgRef.current.style.transformOrigin = "".concat(clientX - x, "px ").concat(clientY - y, "px");
+    } else {
+      hoverFillRef.current.style.transitionDuration = 'var(--odn-hoverfill-duration)';
+    }
+  };
+  var handleItemMouseLeave = function handleItemMouseLeave(e) {
+    e.persist();
+    clearTimeout(itemLeaveTimer.current);
+    if (!hoverFillBgRef.current || !hoverFillRef.current) {
+      return;
+    }
+    var clientX = e.clientX,
+      clientY = e.clientY;
+    var _e$currentTarget$getB2 = e.currentTarget.getBoundingClientRect(),
+      x = _e$currentTarget$getB2.x,
+      y = _e$currentTarget$getB2.y;
+    itemLeaveTimer.current = window.setTimeout(function () {
+      hoverFillVisibleRef.current = false;
+      if (hoverFillBgRef.current) {
+        hoverFillBgRef.current.style.transformOrigin = "".concat(clientX - x, "px ").concat(clientY - y, "px");
+        hoverFillBgRef.current.style.transform = 'scale(0.92)';
+        hoverFillBgRef.current.style.background = 'rgba(33, 34, 38, 0)';
+      }
+    }, 100);
+  };
+  var rePosition = function rePosition() {
+    setTimeout(function () {
+      if (!activeIndicatorRef.current || !containerRef.current || !hoverFillRef.current) {
+        return;
+      }
+      var currentEl = containerRef.current.querySelector("[data-odn-pagination-item-page='".concat(value, "']"));
+      if (!currentEl) {
+        // 可能改变了 pageSize 后导致 value 超出范围，这时隐藏 activeIndicator
+        activeIndicatorRef.current.style.opacity = '0';
+      } else {
+        activeIndicatorRef.current.style.transform = "translate3d(".concat(currentEl.offsetLeft, "px, 0, 0)");
+        activeIndicatorRef.current.style.opacity = '1';
+
+        // 当 value 为 1 时，hoverFill 这时可能处于 0 的位置，但按钮已 disabled，这时需将 hoverFill 隐藏；尾页同理
+        if (hoverFillBgRef.current && (value === 1 && hoverFillRef.current.offsetLeft === 0 || value === pageNumber && hoverFillRef.current.offsetLeft + hoverFillRef.current.offsetWidth >= containerRef.current.offsetWidth)) {
+          hoverFillBgRef.current.style.background = 'rgba(33, 34, 38, 0)';
+        }
+      }
+    }, 0);
+  };
+  useEffect(function () {
+    rePosition();
+  }, [value, pageNumber, showPrevNext]);
+  useEffect(function () {
+    var resizeObserver = new ResizeObserver(function () {
+      rePosition();
+    });
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  var boundaryCount = 1;
+  var siblingCount = 1;
+  var startPages = range(1, Math.min(boundaryCount, pageNumber));
+  var endPages = range(Math.max(pageNumber - boundaryCount + 1, boundaryCount + 1), pageNumber);
+  var siblingsStart = Math.max(Math.min(
+  // Natural start
+  value - siblingCount,
+  // Lower boundary when page is high
+  pageNumber - boundaryCount - siblingCount * 2 - 1),
+  // Greater than startPages
+  boundaryCount + 2);
+  var siblingsEnd = Math.min(Math.max(
+  // Natural end
+  value + siblingCount,
+  // Upper boundary when page is low
+  boundaryCount + siblingCount * 2 + 2),
+  // Less than endPages
+  pageNumber - boundaryCount - 1);
+  var itemList = [].concat(_toConsumableArray(showPrevNext && pageNumber > 1 ? ['previous'] : []), _toConsumableArray(startPages), _toConsumableArray(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < pageNumber - boundaryCount ? [boundaryCount + 1] : []), _toConsumableArray(range(siblingsStart, siblingsEnd)), _toConsumableArray(siblingsEnd < pageNumber - boundaryCount - 1 ? ['end-ellipsis'] : pageNumber - boundaryCount > boundaryCount ? [pageNumber - boundaryCount] : []), _toConsumableArray(endPages), _toConsumableArray(showPrevNext && pageNumber > 1 ? ['next'] : []));
+  var firstButton = /*#__PURE__*/React.createElement("div", {
+    "data-odn-pagination-item": true,
+    "data-odn-pagination-item-first": true,
+    onMouseEnter: function onMouseEnter(e) {
+      handleItemMouseEnter(e);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      handleItemMouseLeave(e);
+    },
+    onClick: function onClick(e) {
+      if (!isPrevDisabled) {
+        onChange === null || onChange === void 0 || onChange(e, 1, pageSize);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11.0114 12.9829C11.1091 13.0805 11.2674 13.0805 11.365 12.9829L11.9307 12.4172C12.0283 12.3196 12.0283 12.1613 11.9307 12.0636L7.86481 7.99778L11.9307 3.93192C12.0283 3.83428 12.0283 3.67599 11.9307 3.57836L11.365 3.01268C11.2674 2.91505 11.1091 2.91505 11.0114 3.01268L6.20311 7.821C6.10547 7.91863 6.10548 8.07692 6.20311 8.17456L11.0114 12.9829Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4.25 2.99966C4.11193 2.99966 4 3.11159 4 3.24966V12.7497C4 12.8877 4.11193 12.9997 4.25 12.9997H4.95C5.08807 12.9997 5.2 12.8877 5.2 12.7497V3.24966C5.2 3.11159 5.08807 2.99966 4.95 2.99966H4.25Z",
+    fill: "currentColor"
+  })));
+  var prevButton = /*#__PURE__*/React.createElement("div", {
+    "data-odn-pagination-item": true,
+    "data-odn-pagination-item-prev": true,
+    "data-odn-pagination-item-disabled": isPrevDisabled,
+    onMouseEnter: function onMouseEnter(e) {
+      if (isPrevDisabled) {
+        return;
+      }
+      handleItemMouseEnter(e);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      if (isPrevDisabled) {
+        return;
+      }
+      handleItemMouseLeave(e);
+    },
+    onClick: function onClick(e) {
+      if (!isPrevDisabled) {
+        onChange === null || onChange === void 0 || onChange(e, Math.max(1, value - 1), pageSize);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.677 12.9832C9.57937 13.0808 9.42107 13.0808 9.32344 12.9832L4.51512 8.17489C4.41749 8.07726 4.41749 7.91897 4.51512 7.82134L9.32344 3.01301C9.42107 2.91538 9.57937 2.91538 9.677 3.01301L10.2427 3.5787C10.3403 3.67633 10.3403 3.83462 10.2427 3.93225L6.17682 7.99812L10.2427 12.064C10.3403 12.1616 10.3403 12.3199 10.2427 12.4175L9.677 12.9832Z"
+  })));
+  var nextButton = /*#__PURE__*/React.createElement("div", {
+    "data-odn-pagination-item": true,
+    "data-odn-pagination-item-next": true,
+    "data-odn-pagination-item-disabled": isNextDisabled,
+    onMouseEnter: function onMouseEnter(e) {
+      if (isNextDisabled) {
+        return;
+      }
+      handleItemMouseEnter(e);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      if (isNextDisabled) {
+        return;
+      }
+      handleItemMouseLeave(e);
+    },
+    onClick: function onClick(e) {
+      if (!isNextDisabled) {
+        onChange === null || onChange === void 0 || onChange(e, Math.min(pageNumber, value + 1), pageSize);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.32299 3.01677C6.42062 2.91913 6.57891 2.91913 6.67654 3.01677L11.4849 7.82509C11.5825 7.92272 11.5825 8.08101 11.4849 8.17865L6.67654 12.987C6.57891 13.0846 6.42062 13.0846 6.32299 12.987L5.75731 12.4213C5.65967 12.3237 5.65967 12.1654 5.75731 12.0677L9.82317 8.00187L5.75731 3.936C5.65968 3.83837 5.65968 3.68008 5.75731 3.58245L6.32299 3.01677Z"
+  })));
+  var lastButton = /*#__PURE__*/React.createElement("div", {
+    "data-odn-pagination-item": true,
+    "data-odn-pagination-item-last": true,
+    onMouseEnter: function onMouseEnter(e) {
+      handleItemMouseEnter(e);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      handleItemMouseLeave(e);
+    },
+    onClick: function onClick(e) {
+      if (!isNextDisabled) {
+        onChange === null || onChange === void 0 || onChange(e, pageNumber, pageSize);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4.99246 3.01268C4.89483 2.91505 4.73654 2.91505 4.63891 3.01268L4.07322 3.57836C3.97559 3.67599 3.97559 3.83428 4.07322 3.93192L8.13909 7.99778L4.07322 12.0636C3.97559 12.1613 3.97559 12.3196 4.07322 12.4172L4.63891 12.9829C4.73654 13.0805 4.89483 13.0805 4.99246 12.9829L9.80079 8.17456C9.89842 8.07693 9.89842 7.91863 9.80079 7.821L4.99246 3.01268Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11.7539 12.9959C11.892 12.9959 12.0039 12.884 12.0039 12.7459V3.24589C12.0039 3.10782 11.892 2.99589 11.7539 2.99589L11.0539 2.99589C10.9158 2.99589 10.8039 3.10782 10.8039 3.24589L10.8039 12.7459C10.8039 12.884 10.9158 12.9959 11.0539 12.9959H11.7539Z",
+    fill: "currentColor"
+  })));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: containerRef,
+    "data-odn-pagination": true,
+    "data-odn-pagination-simple": type === 'simple'
+  }, props), /*#__PURE__*/React.createElement("i", {
+    "data-odn-pagination-hover-fill": true,
+    ref: hoverFillRef
+  }, /*#__PURE__*/React.createElement("i", {
+    "data-odn-pagination-hover-fill-bg": true,
+    ref: hoverFillBgRef
+  })), /*#__PURE__*/React.createElement("i", {
+    "data-odn-pagination-active-indicator": true,
+    ref: activeIndicatorRef
+  }), type === 'default' ? /*#__PURE__*/React.createElement(React.Fragment, null, itemList.map(function (item) {
+    if (item === 'previous') {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: item
+      }, prevButton);
+    }
+    if (item === 'next') {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: item
+      }, nextButton);
+    }
+    if (item === 'start-ellipsis' || item === 'end-ellipsis') {
+      return /*#__PURE__*/React.createElement("div", {
+        key: item,
+        "data-odn-pagination-item": true,
+        "data-odn-pagination-item-ellipsis": true,
+        onMouseEnter: handleItemMouseEnter,
+        onMouseLeave: handleItemMouseLeave,
+        onClick: function onClick(e) {
+          onChange === null || onChange === void 0 || onChange(e, Math.min(Math.max(1, item === 'start-ellipsis' ? value - 5 : value + 5), pageNumber), pageSize);
+        }
+      }, /*#__PURE__*/React.createElement("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        "data-odn-pagination-item-ellipsis-icon": true
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M4.00312 8.0002C4.00312 8.55248 3.55541 9.0002 3.00313 9.0002C2.45084 9.0002 2.00313 8.55248 2.00313 8.0002C2.00313 7.44791 2.45084 7.0002 3.00313 7.0002C3.55541 7.0002 4.00312 7.44791 4.00312 8.0002Z"
+      }), /*#__PURE__*/React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M4.30312 8.0002C4.30312 8.71817 3.7211 9.3002 3.00313 9.3002C2.28516 9.3002 1.70312 8.71817 1.70312 8.0002C1.70312 7.28223 2.28516 6.7002 3.00313 6.7002C3.7211 6.7002 4.30312 7.28223 4.30312 8.0002ZM3.00313 9.0002C3.55541 9.0002 4.00312 8.55248 4.00312 8.0002C4.00312 7.44791 3.55541 7.0002 3.00313 7.0002C2.45084 7.0002 2.00313 7.44791 2.00313 8.0002C2.00313 8.55248 2.45084 9.0002 3.00313 9.0002Z"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M9.00313 8.0002C9.00313 8.55248 8.55541 9.0002 8.00313 9.0002C7.45084 9.0002 7.00312 8.55248 7.00312 8.0002C7.00312 7.44791 7.45084 7.0002 8.00313 7.0002C8.55541 7.0002 9.00313 7.44791 9.00313 8.0002Z"
+      }), /*#__PURE__*/React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M9.30313 8.0002C9.30313 8.71817 8.7211 9.3002 8.00313 9.3002C7.28515 9.3002 6.70312 8.71817 6.70312 8.0002C6.70312 7.28223 7.28515 6.7002 8.00313 6.7002C8.7211 6.7002 9.30313 7.28223 9.30313 8.0002ZM8.00313 9.0002C8.55541 9.0002 9.00313 8.55248 9.00313 8.0002C9.00313 7.44791 8.55541 7.0002 8.00313 7.0002C7.45084 7.0002 7.00312 7.44791 7.00312 8.0002C7.00312 8.55248 7.45084 9.0002 8.00313 9.0002Z"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M14.0031 8.0002C14.0031 8.55248 13.5554 9.0002 13.0031 9.0002C12.4508 9.0002 12.0031 8.55248 12.0031 8.0002C12.0031 7.44791 12.4508 7.0002 13.0031 7.0002C13.5554 7.0002 14.0031 7.44791 14.0031 8.0002Z"
+      }), /*#__PURE__*/React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M14.3031 8.0002C14.3031 8.71817 13.7211 9.3002 13.0031 9.3002C12.2851 9.3002 11.7031 8.71817 11.7031 8.0002C11.7031 7.28223 12.2851 6.7002 13.0031 6.7002C13.7211 6.7002 14.3031 7.28223 14.3031 8.0002ZM13.0031 9.0002C13.5554 9.0002 14.0031 8.55248 14.0031 8.0002C14.0031 7.44791 13.5554 7.0002 13.0031 7.0002C12.4508 7.0002 12.0031 7.44791 12.0031 8.0002C12.0031 8.55248 12.4508 9.0002 13.0031 9.0002Z"
+      })), item === 'start-ellipsis' ? /*#__PURE__*/React.createElement("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        "data-odn-pagination-item-ellipsis-icon-hover": true
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M7.77293 11.7123C7.87056 11.6147 7.87056 11.4564 7.77293 11.3587L4.41418 7.99999L7.77293 4.64123C7.87056 4.5436 7.87056 4.38531 7.77293 4.28768L7.41938 3.93412C7.32175 3.83649 7.16346 3.83649 7.06583 3.93412L3.17674 7.82321C3.07911 7.92084 3.07911 8.07913 3.17674 8.17676L7.06583 12.0659C7.16346 12.1635 7.32175 12.1635 7.41938 12.0659L7.77293 11.7123Z"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M12.2729 11.7123C12.3706 11.6147 12.3706 11.4564 12.2729 11.3587L8.91418 7.99999L12.2729 4.64123C12.3706 4.5436 12.3706 4.38531 12.2729 4.28768L11.9194 3.93412C11.8217 3.83649 11.6635 3.83649 11.5658 3.93412L7.67674 7.82321C7.57911 7.92084 7.57911 8.07913 7.67674 8.17676L11.5658 12.0659C11.6635 12.1635 11.8217 12.1635 11.9194 12.0659L12.2729 11.7123Z"
+      })) : /*#__PURE__*/React.createElement("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        "data-odn-pagination-item-ellipsis-icon-hover": true
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M8.21238 4.28769C8.11475 4.38532 8.11475 4.54362 8.21238 4.64125L11.5711 8L8.21238 11.3588C8.11475 11.4564 8.11475 11.6147 8.21238 11.7123L8.56594 12.0659C8.66357 12.1635 8.82186 12.1635 8.91949 12.0659L12.8086 8.17678C12.9062 8.07915 12.9062 7.92086 12.8086 7.82323L8.91949 3.93414C8.82186 3.83651 8.66357 3.83651 8.56594 3.93414L8.21238 4.28769Z"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M3.71238 4.28769C3.61475 4.38532 3.61475 4.54362 3.71238 4.64125L7.07114 8L3.71238 11.3588C3.61475 11.4564 3.61475 11.6147 3.71238 11.7123L4.06594 12.0659C4.16357 12.1635 4.32186 12.1635 4.41949 12.0659L8.30858 8.17678C8.40621 8.07915 8.40621 7.92086 8.30858 7.82323L4.41949 3.93414C4.32186 3.83651 4.16357 3.83651 4.06594 3.93414L3.71238 4.28769Z"
+      })));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: item,
+      "data-odn-pagination-item": true,
+      "data-odn-pagination-item-page": item,
+      "data-odn-pagination-item-active": item === value,
+      onMouseEnter: handleItemMouseEnter,
+      onMouseLeave: handleItemMouseLeave,
+      onClick: function onClick(e) {
+        if (onChange) {
+          onChange(e, Number(item), pageSize);
+        }
+      }
+    }, item);
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, firstButton, prevButton, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+    "data-odn-pagination-simple-page-value": true
+  }, value), " /", ' ', pageNumber), nextButton, lastButton));
+};
+export default Pagination;

package/dist/pagination/style/index.css

@@ -0,0 +1,128 @@
+@charset "UTF-8";
+html {
+  /* 按钮的间距 */
+  --odn-pagination-gap: 0;
+  /* 按钮宽度 */
+  --odn-pagination-item-width: 32px;
+  /* 按钮高度 */
+  --odn-pagination-item-height: 32px;
+  /* 按钮字体大小 */
+  --odn-pagination-item-font-size: 14px;
+  /* 按钮字重 */
+  --odn-pagination-item-font-weight: 400;
+  /* 按钮字体颜色 */
+  --odn-pagination-item-color: rgba(0, 0, 0, 0.95);
+  /* hover 背景颜色 */
+  --odn-pagination-item-bg-hover: #f0f0f0;
+  /* active 背景颜色 */
+  --odn-pagination-item-bg-active: #f5f8ff;
+  /* active 字重 */
+  --odn-pagination-item-font-weight-active: 600;
+  /* active 字体颜色 */
+  --odn-pagination-item-color-active: var(--odn-color-primary);
+  /* active 边框样式 */
+  --odn-pagination-item-border-active: 1px solid var(--odn-color-primary);
+  /* 按钮的圆角 */
+  --odn-pagination-item-border-radius: 6px;
+}
+
+[data-odn-pagination] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  gap: var(--odn-pagination-gap);
+  font-size: var(--odn-pagination-item-font-size);
+  color: var(--odn-pagination-item-color);
+}
+
+[data-odn-pagination-simple=true] {
+  gap: 8px;
+}
+
+[data-odn-pagination-item] {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--odn-pagination-item-width);
+  height: var(--odn-pagination-item-height);
+  cursor: pointer;
+  transition: color 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-pagination-hover-fill] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--odn-pagination-item-width);
+  height: var(--odn-pagination-item-height);
+  pointer-events: none;
+  transition: left 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-pagination-hover-fill-bg] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: var(--odn-pagination-item-border-radius);
+  transform: scale(0.8);
+  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), background 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-pagination-active-indicator] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--odn-pagination-item-width);
+  height: var(--odn-pagination-item-height);
+  background-color: var(--odn-pagination-item-bg-active);
+  border: var(--odn-pagination-item-border-active);
+  border-radius: var(--odn-pagination-item-border-radius);
+  opacity: 0;
+  pointer-events: none;
+  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-pagination-item-active=true] {
+  color: var(--odn-pagination-item-color-active);
+  font-weight: var(--odn-pagination-item-font-weight-active);
+}
+
+[data-odn-pagination-item-disabled=true] {
+  cursor: not-allowed;
+  color: rgba(69, 80, 102, 0.25);
+}
+
+[data-odn-pagination-item-ellipsis-icon] {
+  transition: opacity 0.1s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-pagination-item-ellipsis-icon-hover] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  opacity: 0;
+  transition: opacity 0.1s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-pagination-item-ellipsis]:hover [data-odn-pagination-item-ellipsis-icon] {
+  opacity: 0;
+}
+
+[data-odn-pagination-item-ellipsis]:hover [data-odn-pagination-item-ellipsis-icon-hover] {
+  opacity: 1;
+}
+
+[data-odn-pagination-simple-page-value] {
+  display: inline-block;
+  margin-left: -5px;
+  width: 15px;
+  text-align: right;
+  white-space: nowrap;
+}

package/dist/pagination/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/pagination/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/pop-base/index.d.ts

@@ -0,0 +1,123 @@
+import { OpenChangeReason } from '@floating-ui/react';
+import React from 'react';
+import './style';
+export interface PopoverProps {
+    /**
+     * @description 配置允许的适配位置
+     * @default []
+     */
+    autoPlacements?: ('top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom')[];
+    /**
+     * @description 是否显示箭头
+     * @default true
+     */
+    arrowed?: boolean;
+    /**
+     * @description 箭头偏移量，单位：px
+     * @default { x: 0, y: 0 }
+     */
+    arrowOffset?: {
+        x?: number;
+        y?: number;
+    };
+    /**
+     * @description 子元素
+     */
+    children?: React.ReactNode;
+    /**
+     * @description 是否翻转
+     * @default true
+     */
+    flip?: boolean;
+    /**
+     * @description 是否匹配宽度
+     * @default false
+     */
+    matchWidth?: boolean;
+    /**
+     * @description 鼠标进入延迟时间，单位：s，仅在 trigger="hover" 时有效
+     * @default 0
+     */
+    mouseEnterDelay?: number;
+    /**
+     * @description 鼠标离开延迟时间，单位：s，仅在 trigger="hover" 时有效
+     * @default 0
+     */
+    mouseLeaveDelay?: number;
+    /**
+     * @description 偏移量
+     */
+    offset?: number | {
+        mainAxis?: number;
+        crossAxis?: number;
+        alignmentAxis?: number | null;
+    };
+    /**
+     * @description 显示变化时触发
+     */
+    onVisibleChange?: (visible: boolean, e?: Event, reason?: OpenChangeReason) => void;
+    /**
+     * @description 位置
+     * @default 'top'
+     */
+    placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    /**
+     * @description 弹窗内容
+     */
+    popup: React.ReactNode;
+    /**
+     * @description 弹窗内容类名
+     */
+    popupClassName?: string;
+    /**
+     * @description 弹窗内容样式
+     */
+    popupStyle?: React.CSSProperties;
+    /**
+     * @description 是否使用 portal 渲染
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * @description 是否 shift
+     * @default true
+     */
+    shift?: boolean;
+    /**
+     * @description 弹窗内容大小，组件会吐出可用空间，业务方需要自行使用
+     */
+    size?: (params: {
+        availableWidth: number;
+        availableHeight: number;
+    }) => void;
+    /**
+     * @description 触发方式
+     * @default 'hover'
+     */
+    trigger?: 'hover' | 'focus' | 'click';
+    /**
+     * @description 外部控制
+     * @default null
+     */
+    visible?: boolean;
+    /**
+     * @description 关闭后是否销毁 dom
+     * @default true
+     */
+    destroyOnHidden?: boolean;
+    /**
+     * description 是否在祖先滚动时隐藏
+     */
+    hideOnAncestorScroll?: boolean;
+    /**
+     * @description z-index
+     */
+    zIndex?: number | string;
+}
+export declare const defaultProps: PopoverProps;
+declare const PopBase: React.ForwardRefExoticComponent<PopoverProps & {
+    type: 'popover' | 'tooltip';
+} & React.RefAttributes<{
+    refs: any;
+}>>;
+export default PopBase;