@canvas-components/react-components 0.3.5 → 0.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +165 -62
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +10 -2
- package/dist/index.d.ts +10 -2
- package/dist/index.js +165 -62
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -319,6 +319,7 @@ function ReactPopup(props) {
|
|
|
319
319
|
style,
|
|
320
320
|
surfaceClassName,
|
|
321
321
|
surfaceStyle,
|
|
322
|
+
constrainHeight = false,
|
|
322
323
|
zIndex = 1200
|
|
323
324
|
} = props;
|
|
324
325
|
const { scale: contentScale } = useReactContentScale();
|
|
@@ -340,6 +341,7 @@ function ReactPopup(props) {
|
|
|
340
341
|
return;
|
|
341
342
|
}
|
|
342
343
|
const nextPosition = resolvePopupPosition({
|
|
344
|
+
constrainHeight,
|
|
343
345
|
anchor: nextAnchor,
|
|
344
346
|
contentScale,
|
|
345
347
|
matchAnchorWidth,
|
|
@@ -349,7 +351,7 @@ function ReactPopup(props) {
|
|
|
349
351
|
popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
|
|
350
352
|
});
|
|
351
353
|
setPosition((prev) => {
|
|
352
|
-
if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
|
|
354
|
+
if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth && prev?.style.maxHeight === nextPosition.style.maxHeight) {
|
|
353
355
|
return prev;
|
|
354
356
|
}
|
|
355
357
|
return nextPosition;
|
|
@@ -376,6 +378,7 @@ function ReactPopup(props) {
|
|
|
376
378
|
anchorRect,
|
|
377
379
|
anchorRef,
|
|
378
380
|
contentScale,
|
|
381
|
+
constrainHeight,
|
|
379
382
|
matchAnchorWidth,
|
|
380
383
|
minWidth,
|
|
381
384
|
offset,
|
|
@@ -392,6 +395,7 @@ function ReactPopup(props) {
|
|
|
392
395
|
return;
|
|
393
396
|
}
|
|
394
397
|
const nextPosition = resolvePopupPosition({
|
|
398
|
+
constrainHeight,
|
|
395
399
|
anchor: nextAnchor,
|
|
396
400
|
contentScale,
|
|
397
401
|
matchAnchorWidth,
|
|
@@ -401,7 +405,7 @@ function ReactPopup(props) {
|
|
|
401
405
|
popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
|
|
402
406
|
});
|
|
403
407
|
setPosition((prev) => {
|
|
404
|
-
if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
|
|
408
|
+
if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth && prev?.style.maxHeight === nextPosition.style.maxHeight) {
|
|
405
409
|
return prev;
|
|
406
410
|
}
|
|
407
411
|
return nextPosition;
|
|
@@ -419,6 +423,7 @@ function ReactPopup(props) {
|
|
|
419
423
|
anchorRect,
|
|
420
424
|
anchorRef,
|
|
421
425
|
contentScale,
|
|
426
|
+
constrainHeight,
|
|
422
427
|
matchAnchorWidth,
|
|
423
428
|
minWidth,
|
|
424
429
|
offset,
|
|
@@ -484,7 +489,7 @@ function ReactPopup(props) {
|
|
|
484
489
|
transition.className,
|
|
485
490
|
surfaceClassName
|
|
486
491
|
),
|
|
487
|
-
style: surfaceStyle,
|
|
492
|
+
style: resolvePopupSurfaceStyle(surfaceStyle, position.style.maxHeight),
|
|
488
493
|
children
|
|
489
494
|
}
|
|
490
495
|
)
|
|
@@ -513,7 +518,8 @@ function resolvePopupPosition(params) {
|
|
|
513
518
|
matchAnchorWidth ? anchor.width : 0
|
|
514
519
|
);
|
|
515
520
|
const popupWidth = preferredVisualWidth;
|
|
516
|
-
const
|
|
521
|
+
const maxVisualHeight = Math.max(0, viewportHeight - margin * 2);
|
|
522
|
+
const popupHeight = params.constrainHeight ? Math.min(popupRect?.height ?? 0, maxVisualHeight) : popupRect?.height ?? 0;
|
|
517
523
|
const isHorizontalPlacement = placement.startsWith("left") || placement.startsWith("right");
|
|
518
524
|
const preferredVertical = placement.startsWith("top") ? "top" : placement.endsWith("Top") ? "top" : "bottom";
|
|
519
525
|
const preferredTop = resolveRawTop({
|
|
@@ -558,6 +564,7 @@ function resolvePopupPosition(params) {
|
|
|
558
564
|
vertical: resolvedVertical
|
|
559
565
|
}),
|
|
560
566
|
style: {
|
|
567
|
+
...params.constrainHeight ? { maxHeight: toContentLayoutSize(maxVisualHeight, contentScale) } : {},
|
|
561
568
|
left,
|
|
562
569
|
top,
|
|
563
570
|
width: matchAnchorWidth ? layoutAnchorWidth : void 0,
|
|
@@ -565,6 +572,19 @@ function resolvePopupPosition(params) {
|
|
|
565
572
|
}
|
|
566
573
|
};
|
|
567
574
|
}
|
|
575
|
+
function resolvePopupSurfaceStyle(style, viewportMaxHeight) {
|
|
576
|
+
if (typeof viewportMaxHeight !== "number") return style;
|
|
577
|
+
const custom = style?.maxHeight;
|
|
578
|
+
const maxHeight = typeof custom === "number" ? Math.min(custom, viewportMaxHeight) : typeof custom === "string" && custom !== "none" ? `min(${custom}, ${viewportMaxHeight}px)` : viewportMaxHeight;
|
|
579
|
+
return {
|
|
580
|
+
...style,
|
|
581
|
+
boxSizing: "border-box",
|
|
582
|
+
minHeight: 0,
|
|
583
|
+
maxHeight,
|
|
584
|
+
overflowY: "auto",
|
|
585
|
+
overscrollBehaviorY: "contain"
|
|
586
|
+
};
|
|
587
|
+
}
|
|
568
588
|
function resolvePlacement(params) {
|
|
569
589
|
const { horizontal, isHorizontalPlacement, vertical } = params;
|
|
570
590
|
if (isHorizontalPlacement) {
|
|
@@ -6007,7 +6027,7 @@ function formatDisplayValue(value, formatter, precision, step) {
|
|
|
6007
6027
|
}
|
|
6008
6028
|
|
|
6009
6029
|
// src/components/pagination/style.css
|
|
6010
|
-
styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n --canvas-react-pagination-control-size: 32px;\n --canvas-react-pagination-gap: 8px;\n --canvas-react-pagination-padding-inline: 10px;\n --canvas-react-control-height: var(--canvas-react-pagination-control-size);\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--canvas-react-pagination-gap);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n white-space: nowrap;\n}\n.canvas-react-pagination-small {\n --canvas-react-pagination-control-size: 24px;\n --canvas-react-pagination-gap: 4px;\n --canvas-react-pagination-padding-inline: 6px;\n}\n.canvas-react-pagination-large {\n --canvas-react-pagination-control-size: 40px;\n --canvas-react-pagination-gap: 10px;\n --canvas-react-pagination-padding-inline: 14px;\n}\n.canvas-react-pagination-pages {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-button,\n.canvas-react-pagination-page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--canvas-react-pagination-control-size);\n height: var(--canvas-react-pagination-control-size);\n padding: 0 var(--canvas-react-pagination-padding-inline);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n color 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-pagination-button {\n position: relative;\n width: var(--canvas-react-pagination-control-size);\n min-width: var(--canvas-react-pagination-control-size);\n padding: 0;\n}\n.canvas-react-pagination-button:hover,\n.canvas-react-pagination-page:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-page-active {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-pagination-button:disabled,\n.canvas-react-pagination-page:disabled {\n opacity: 0.48;\n cursor: not-allowed;\n}\n.canvas-react-pagination-ellipsis {\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transition:\n border-color 0.18s ease,\n transform 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-pagination-arrow-prev {\n transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-pagination-arrow-next {\n transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-pagination-button:hover .canvas-react-pagination-arrow {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-button:disabled .canvas-react-pagination-arrow {\n opacity: 0.56;\n}\n.canvas-react-pagination-quick {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n color: var(--canvas-react-color-text-muted);\n}\n');
|
|
6030
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n --canvas-react-pagination-control-size: 32px;\n --canvas-react-pagination-gap: 8px;\n --canvas-react-pagination-padding-inline: 10px;\n --canvas-react-control-height: var(--canvas-react-pagination-control-size);\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--canvas-react-pagination-gap);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n white-space: nowrap;\n}\n.canvas-react-pagination-small {\n --canvas-react-pagination-control-size: 24px;\n --canvas-react-pagination-gap: 4px;\n --canvas-react-pagination-padding-inline: 6px;\n}\n.canvas-react-pagination > .canvas-react-select-wrap {\n flex: 0 0 auto;\n width: auto;\n height: auto;\n}\n.canvas-react-pagination > .canvas-react-select-wrap > .canvas-react-select {\n flex-shrink: 0;\n}\n.canvas-react-pagination-large {\n --canvas-react-pagination-control-size: 40px;\n --canvas-react-pagination-gap: 10px;\n --canvas-react-pagination-padding-inline: 14px;\n}\n.canvas-react-pagination-pages {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-button,\n.canvas-react-pagination-page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--canvas-react-pagination-control-size);\n height: var(--canvas-react-pagination-control-size);\n padding: 0 var(--canvas-react-pagination-padding-inline);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n color 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-pagination-button {\n position: relative;\n width: var(--canvas-react-pagination-control-size);\n min-width: var(--canvas-react-pagination-control-size);\n padding: 0;\n}\n.canvas-react-pagination-button:hover,\n.canvas-react-pagination-page:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-page-active {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-pagination-button:disabled,\n.canvas-react-pagination-page:disabled {\n opacity: 0.48;\n cursor: not-allowed;\n}\n.canvas-react-pagination-ellipsis {\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transition:\n border-color 0.18s ease,\n transform 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-pagination-arrow-prev {\n transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-pagination-arrow-next {\n transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-pagination-button:hover .canvas-react-pagination-arrow {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-button:disabled .canvas-react-pagination-arrow {\n opacity: 0.56;\n}\n.canvas-react-pagination-quick {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination button,\n.canvas-react-pagination input {\n font-family: inherit;\n font-weight: inherit;\n font-size: inherit;\n}\n');
|
|
6011
6031
|
var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
|
|
6012
6032
|
function ReactPagination(props) {
|
|
6013
6033
|
const {
|
|
@@ -6023,9 +6043,18 @@ function ReactPagination(props) {
|
|
|
6023
6043
|
showTotal,
|
|
6024
6044
|
simple,
|
|
6025
6045
|
size = "middle",
|
|
6026
|
-
total
|
|
6046
|
+
total,
|
|
6047
|
+
style: rootStyle,
|
|
6048
|
+
styles
|
|
6027
6049
|
} = props;
|
|
6050
|
+
const style = { ...rootStyle, ...styles?.root };
|
|
6028
6051
|
const [quickValue, setQuickValue] = React.useState("");
|
|
6052
|
+
const resolvedPageSizeOptions = React.useMemo(() => {
|
|
6053
|
+
if (pageSizeOptions.length === 0 || pageSizeOptions.includes(pageSize) || !Number.isSafeInteger(pageSize) || pageSize <= 0) {
|
|
6054
|
+
return pageSizeOptions;
|
|
6055
|
+
}
|
|
6056
|
+
return [...pageSizeOptions, pageSize].sort((left, right) => left - right);
|
|
6057
|
+
}, [pageSizeOptions, pageSize]);
|
|
6029
6058
|
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
|
6030
6059
|
const safeCurrent = clampPage(current, totalPages);
|
|
6031
6060
|
const range = total === 0 ? [0, 0] : [
|
|
@@ -6053,75 +6082,120 @@ function ReactPagination(props) {
|
|
|
6053
6082
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6054
6083
|
"div",
|
|
6055
6084
|
{
|
|
6085
|
+
style: {
|
|
6086
|
+
...style,
|
|
6087
|
+
...style?.borderColor ? { "--canvas-react-color-border": style.borderColor } : {},
|
|
6088
|
+
...style?.backgroundColor ? { "--canvas-react-color-bg": style.backgroundColor } : {},
|
|
6089
|
+
...style?.color ? {
|
|
6090
|
+
"--canvas-react-color-text": style.color,
|
|
6091
|
+
"--canvas-react-color-text-muted": style.color
|
|
6092
|
+
} : {},
|
|
6093
|
+
...style?.fontSize ? {
|
|
6094
|
+
"--canvas-react-font-size": typeof style.fontSize === "number" ? `${style.fontSize}px` : style.fontSize
|
|
6095
|
+
} : {}
|
|
6096
|
+
},
|
|
6056
6097
|
className: `${REACT_COMPONENT_PREFIX}-pagination ${REACT_COMPONENT_PREFIX}-pagination-${size}`,
|
|
6057
6098
|
children: [
|
|
6058
|
-
showTotal ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
6099
|
+
showTotal ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
6100
|
+
"span",
|
|
6101
|
+
{
|
|
6102
|
+
style: styles?.total,
|
|
6103
|
+
className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
|
|
6104
|
+
children: showTotal(total, range)
|
|
6105
|
+
}
|
|
6106
|
+
) : null,
|
|
6059
6107
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6060
6108
|
"button",
|
|
6061
6109
|
{
|
|
6062
6110
|
type: "button",
|
|
6063
6111
|
className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
|
|
6064
6112
|
"aria-label": "\u4E0A\u4E00\u9875",
|
|
6113
|
+
style: styles?.prevButton,
|
|
6065
6114
|
disabled: disabled || safeCurrent <= 1,
|
|
6066
6115
|
onClick: () => jumpToPage(safeCurrent - 1),
|
|
6067
6116
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
6068
6117
|
"span",
|
|
6069
6118
|
{
|
|
6070
|
-
className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev
|
|
6119
|
+
className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`,
|
|
6120
|
+
style: styles?.prevIcon
|
|
6071
6121
|
}
|
|
6072
6122
|
)
|
|
6073
6123
|
}
|
|
6074
6124
|
),
|
|
6075
|
-
simple ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6076
|
-
|
|
6077
|
-
|
|
6078
|
-
|
|
6079
|
-
|
|
6080
|
-
|
|
6081
|
-
|
|
6082
|
-
|
|
6083
|
-
|
|
6084
|
-
|
|
6085
|
-
|
|
6086
|
-
|
|
6087
|
-
|
|
6088
|
-
|
|
6089
|
-
|
|
6090
|
-
|
|
6091
|
-
|
|
6092
|
-
|
|
6093
|
-
|
|
6094
|
-
|
|
6095
|
-
|
|
6096
|
-
|
|
6097
|
-
|
|
6098
|
-
|
|
6099
|
-
|
|
6100
|
-
|
|
6101
|
-
|
|
6125
|
+
simple ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6126
|
+
"span",
|
|
6127
|
+
{
|
|
6128
|
+
style: styles?.pageItem,
|
|
6129
|
+
className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
|
|
6130
|
+
children: [
|
|
6131
|
+
safeCurrent,
|
|
6132
|
+
" / ",
|
|
6133
|
+
totalPages
|
|
6134
|
+
]
|
|
6135
|
+
}
|
|
6136
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
6137
|
+
"div",
|
|
6138
|
+
{
|
|
6139
|
+
style: styles?.pages,
|
|
6140
|
+
className: `${REACT_COMPONENT_PREFIX}-pagination-pages`,
|
|
6141
|
+
children: pages.map(
|
|
6142
|
+
(item, index) => item === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
6143
|
+
"span",
|
|
6144
|
+
{
|
|
6145
|
+
className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
|
|
6146
|
+
style: styles?.ellipsis,
|
|
6147
|
+
children: "..."
|
|
6148
|
+
},
|
|
6149
|
+
`ellipsis-${index}`
|
|
6150
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
6151
|
+
"button",
|
|
6152
|
+
{
|
|
6153
|
+
type: "button",
|
|
6154
|
+
style: {
|
|
6155
|
+
...styles?.pageItem,
|
|
6156
|
+
...item === safeCurrent ? styles?.activePageItem : void 0
|
|
6157
|
+
},
|
|
6158
|
+
className: [
|
|
6159
|
+
`${REACT_COMPONENT_PREFIX}-pagination-page`,
|
|
6160
|
+
item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
|
|
6161
|
+
].filter(Boolean).join(" "),
|
|
6162
|
+
disabled,
|
|
6163
|
+
onClick: () => jumpToPage(item),
|
|
6164
|
+
children: item
|
|
6165
|
+
},
|
|
6166
|
+
item
|
|
6167
|
+
)
|
|
6168
|
+
)
|
|
6169
|
+
}
|
|
6170
|
+
),
|
|
6102
6171
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6103
6172
|
"button",
|
|
6104
6173
|
{
|
|
6105
6174
|
type: "button",
|
|
6106
6175
|
className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
|
|
6107
6176
|
"aria-label": "\u4E0B\u4E00\u9875",
|
|
6177
|
+
style: styles?.nextButton,
|
|
6108
6178
|
disabled: disabled || safeCurrent >= totalPages,
|
|
6109
6179
|
onClick: () => jumpToPage(safeCurrent + 1),
|
|
6110
6180
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
6111
6181
|
"span",
|
|
6112
6182
|
{
|
|
6113
|
-
className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next
|
|
6183
|
+
className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`,
|
|
6184
|
+
style: styles?.nextIcon
|
|
6114
6185
|
}
|
|
6115
6186
|
)
|
|
6116
6187
|
}
|
|
6117
6188
|
),
|
|
6118
|
-
showSizeChanger &&
|
|
6189
|
+
showSizeChanger && resolvedPageSizeOptions.length ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
6119
6190
|
ReactSelect,
|
|
6120
6191
|
{
|
|
6121
6192
|
value: String(pageSize),
|
|
6122
6193
|
disabled,
|
|
6123
|
-
style: {
|
|
6124
|
-
|
|
6194
|
+
style: {
|
|
6195
|
+
width: resolvePaginationSelectWidth(size, resolvedPageSizeOptions),
|
|
6196
|
+
...styles?.sizeChanger
|
|
6197
|
+
},
|
|
6198
|
+
options: resolvedPageSizeOptions.map((size2) => ({
|
|
6125
6199
|
label: `${size2} / \u9875`,
|
|
6126
6200
|
value: size2
|
|
6127
6201
|
})),
|
|
@@ -6134,33 +6208,62 @@ function ReactPagination(props) {
|
|
|
6134
6208
|
}
|
|
6135
6209
|
}
|
|
6136
6210
|
) : null,
|
|
6137
|
-
showQuickJumper ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6138
|
-
|
|
6139
|
-
|
|
6140
|
-
|
|
6141
|
-
{
|
|
6142
|
-
|
|
6143
|
-
|
|
6144
|
-
|
|
6145
|
-
|
|
6146
|
-
|
|
6147
|
-
|
|
6148
|
-
|
|
6149
|
-
|
|
6150
|
-
|
|
6151
|
-
|
|
6152
|
-
|
|
6153
|
-
|
|
6154
|
-
|
|
6155
|
-
|
|
6156
|
-
|
|
6157
|
-
|
|
6211
|
+
showQuickJumper ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6212
|
+
"div",
|
|
6213
|
+
{
|
|
6214
|
+
style: styles?.quickJumper,
|
|
6215
|
+
className: `${REACT_COMPONENT_PREFIX}-pagination-quick`,
|
|
6216
|
+
children: [
|
|
6217
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6218
|
+
"span",
|
|
6219
|
+
{
|
|
6220
|
+
style: styles?.quickJumperText,
|
|
6221
|
+
className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
|
|
6222
|
+
children: "\u8DF3\u81F3"
|
|
6223
|
+
}
|
|
6224
|
+
),
|
|
6225
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6226
|
+
ReactInput,
|
|
6227
|
+
{
|
|
6228
|
+
value: quickValue,
|
|
6229
|
+
disabled,
|
|
6230
|
+
style: {
|
|
6231
|
+
width: resolvePaginationInputWidth(size),
|
|
6232
|
+
...styles?.quickJumperInput
|
|
6233
|
+
},
|
|
6234
|
+
onChange: (event) => {
|
|
6235
|
+
setQuickValue(event.target.value.replace(/[^\d]/g, ""));
|
|
6236
|
+
},
|
|
6237
|
+
onPressEnter: () => {
|
|
6238
|
+
handleQuickCommit();
|
|
6239
|
+
},
|
|
6240
|
+
onBlur: () => {
|
|
6241
|
+
handleQuickCommit();
|
|
6242
|
+
}
|
|
6243
|
+
}
|
|
6244
|
+
),
|
|
6245
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6246
|
+
"span",
|
|
6247
|
+
{
|
|
6248
|
+
style: styles?.quickJumperText,
|
|
6249
|
+
className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
|
|
6250
|
+
children: "\u9875"
|
|
6251
|
+
}
|
|
6252
|
+
)
|
|
6253
|
+
]
|
|
6254
|
+
}
|
|
6255
|
+
) : null
|
|
6158
6256
|
]
|
|
6159
6257
|
}
|
|
6160
6258
|
);
|
|
6161
6259
|
}
|
|
6162
|
-
function resolvePaginationSelectWidth(size) {
|
|
6163
|
-
|
|
6260
|
+
function resolvePaginationSelectWidth(size, pageSizeOptions) {
|
|
6261
|
+
const minWidth = size === "large" ? 120 : 108;
|
|
6262
|
+
const digits = Math.max(
|
|
6263
|
+
1,
|
|
6264
|
+
...pageSizeOptions.map((value) => String(value).length)
|
|
6265
|
+
);
|
|
6266
|
+
return `max(${minWidth}px, calc(${digits}ch + 3em + 44px))`;
|
|
6164
6267
|
}
|
|
6165
6268
|
function resolvePaginationInputWidth(size) {
|
|
6166
6269
|
return size === "small" ? 56 : size === "large" ? 80 : 72;
|