@impulse-ui-native/pagination 8.3.0 → 9.0.0
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useMemo, useState } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { StyleSheet } from "react-native";
|
|
4
4
|
import {
|
|
5
5
|
useControllableState,
|
|
6
6
|
useEventCallback
|
|
@@ -75,8 +75,6 @@ const Pagination = memo(function Pagination2({
|
|
|
75
75
|
setAvailableWidth(event.nativeEvent.layout.width);
|
|
76
76
|
onLayout?.(event);
|
|
77
77
|
});
|
|
78
|
-
const PreviousIcon = I18nManager.isRTL ? CaretRightIcon : CaretLeftIcon;
|
|
79
|
-
const NextIcon = I18nManager.isRTL ? CaretLeftIcon : CaretRightIcon;
|
|
80
78
|
const previousDisabled = disabled || resolvedPage === 1;
|
|
81
79
|
const nextDisabled = disabled || resolvedPage === normalizedPageCount;
|
|
82
80
|
const showCompact = compact || windowLayout === "compact";
|
|
@@ -85,7 +83,7 @@ const Pagination = memo(function Pagination2({
|
|
|
85
83
|
PaginationButton,
|
|
86
84
|
{
|
|
87
85
|
disabled: previousDisabled,
|
|
88
|
-
Icon:
|
|
86
|
+
Icon: CaretLeftIcon,
|
|
89
87
|
onSelect: selectPage,
|
|
90
88
|
size,
|
|
91
89
|
targetPage: resolvedPage - 1
|
|
@@ -109,7 +107,7 @@ const Pagination = memo(function Pagination2({
|
|
|
109
107
|
PaginationButton,
|
|
110
108
|
{
|
|
111
109
|
disabled: nextDisabled,
|
|
112
|
-
Icon:
|
|
110
|
+
Icon: CaretRightIcon,
|
|
113
111
|
onSelect: selectPage,
|
|
114
112
|
size,
|
|
115
113
|
targetPage: resolvedPage + 1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/pagination.tsx"],"sourcesContent":["import type { LayoutChangeEvent } from \"react-native\";\nimport { memo, useMemo, useState } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/pagination.tsx"],"sourcesContent":["import type { LayoutChangeEvent } from \"react-native\";\nimport { memo, useMemo, useState } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport {\n useControllableState,\n useEventCallback,\n} from \"@impulse-ui-native/core\";\nimport { CaretLeftIcon } from \"@impulse-ui-native/icon/icons/caret-left\";\nimport { CaretRightIcon } from \"@impulse-ui-native/icon/icons/caret-right\";\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport {\n getPaginationStateTokens,\n useComponentsTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { PaginationProps, PaginationThemeProps } from \"../types\";\nimport {\n clampPage,\n getDefaultCompactLabel,\n getPaginationItems,\n getPaginationWindowLayout,\n normalizePageCount,\n} from \"../utils\";\nimport { PaginationButton } from \"./pagination-button\";\n\nexport const Pagination = memo(function Pagination({\n compact = false,\n defaultPage = 1,\n disabled = false,\n getCompactLabel = getDefaultCompactLabel,\n onLayout,\n onPageChange,\n page: pageProp,\n pageCount,\n size = \"medium\",\n style,\n ...props\n}: PaginationProps) {\n const tokens = useComponentsTokens().pagination;\n\n const [availableWidth, setAvailableWidth] = useState<number>();\n\n const normalizedPageCount = normalizePageCount(pageCount);\n\n const [page, setPage] = useControllableState<number>({\n prop: pageProp,\n defaultProp: clampPage(defaultPage, normalizedPageCount),\n onChange: onPageChange,\n });\n\n const resolvedPage = clampPage(page, normalizedPageCount);\n\n const styles = useThemedStyles(themedStyles, { disabled, size }, [\n disabled,\n size,\n ]);\n\n const windowLayout = useMemo(\n () =>\n getPaginationWindowLayout(\n availableWidth,\n normalizedPageCount,\n tokens.sizes[size].controlSize,\n tokens.sizes[size].compactMinWidth,\n tokens.gap,\n ),\n [availableWidth, normalizedPageCount, size, tokens.gap, tokens.sizes],\n );\n const items = useMemo(\n () =>\n getPaginationItems(\n resolvedPage,\n normalizedPageCount,\n windowLayout === \"condensed\" ? 5 : 7,\n ),\n [normalizedPageCount, resolvedPage, windowLayout],\n );\n const rootStyle = useMemo(() => [styles.root, style], [style, styles.root]);\n\n const selectPage = useEventCallback((nextPage: number) => {\n if (!disabled) {\n setPage(clampPage(nextPage, normalizedPageCount));\n }\n });\n\n const handleLayout = useEventCallback((event: LayoutChangeEvent) => {\n setAvailableWidth(event.nativeEvent.layout.width);\n onLayout?.(event);\n });\n\n const previousDisabled = disabled || resolvedPage === 1;\n const nextDisabled = disabled || resolvedPage === normalizedPageCount;\n const showCompact = compact || windowLayout === \"compact\";\n\n return (\n <View {...props} onLayout={handleLayout} style={rootStyle}>\n <PaginationButton\n disabled={previousDisabled}\n Icon={CaretLeftIcon}\n onSelect={selectPage}\n size={size}\n targetPage={resolvedPage - 1}\n />\n\n {showCompact ? (\n <View style={styles.compactStatus}>\n <Typography.Label numeric style={styles.compactLabel}>\n {getCompactLabel(resolvedPage, normalizedPageCount)}\n </Typography.Label>\n </View>\n ) : (\n items.map((item) =>\n typeof item === \"number\" ? (\n <PaginationButton\n key={item}\n current={item === resolvedPage}\n disabled={disabled}\n label={item}\n onSelect={selectPage}\n size={size}\n targetPage={item}\n />\n ) : (\n <View key={item} style={styles.ellipsis}>\n <Typography.Label style={styles.ellipsisLabel}>\n {\"\\u2026\"}\n </Typography.Label>\n </View>\n ),\n )\n )}\n\n <PaginationButton\n disabled={nextDisabled}\n Icon={CaretRightIcon}\n onSelect={selectPage}\n size={size}\n targetPage={resolvedPage + 1}\n />\n </View>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: PaginationThemeProps) {\n const tokens = theme.components.pagination;\n const sizeTokens = tokens.sizes[props.size];\n const statusTokens = getPaginationStateTokens(tokens.states, {\n current: false,\n disabled: props.disabled,\n });\n\n return StyleSheet.create({\n root: {\n alignItems: \"center\",\n flexDirection: \"row\",\n flexWrap: \"nowrap\",\n gap: tokens.gap,\n },\n compactStatus: {\n alignItems: \"center\",\n justifyContent: \"center\",\n\n minWidth: sizeTokens.compactMinWidth,\n height: sizeTokens.controlSize,\n paddingHorizontal: sizeTokens.paddingHorizontal,\n\n backgroundColor: statusTokens.backgroundColor,\n borderColor: statusTokens.borderColor,\n borderRadius: tokens.borderRadius,\n borderWidth: tokens.borderWidth,\n },\n compactLabel: {\n color: statusTokens.color,\n fontSize: sizeTokens.fontSize,\n textAlign: \"center\",\n },\n ellipsis: {\n alignItems: \"center\",\n justifyContent: \"center\",\n width: sizeTokens.controlSize,\n height: sizeTokens.controlSize,\n },\n ellipsisLabel: {\n color: statusTokens.ellipsisColor,\n fontSize: sizeTokens.fontSize,\n textAlign: \"center\",\n },\n });\n}\n"],"mappings":"AAkGI,SACE,KADF;AAjGJ,SAAS,MAAM,SAAS,gBAAgB;AACxC,SAAS,kBAAkB;AAG3B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,YAAY,YAAY;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AAE1B,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD,UAAU;AAAA,EACV,cAAc;AAAA,EACd,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,SAAS,oBAAoB,EAAE;AAErC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAiB;AAE7D,QAAM,sBAAsB,mBAAmB,SAAS;AAExD,QAAM,CAAC,MAAM,OAAO,IAAI,qBAA6B;AAAA,IACnD,MAAM;AAAA,IACN,aAAa,UAAU,aAAa,mBAAmB;AAAA,IACvD,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,eAAe,UAAU,MAAM,mBAAmB;AAExD,QAAM,SAAS,gBAAgB,cAAc,EAAE,UAAU,KAAK,GAAG;AAAA,IAC/D;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe;AAAA,IACnB,MACE;AAAA,MACE;AAAA,MACA;AAAA,MACA,OAAO,MAAM,IAAI,EAAE;AAAA,MACnB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnB,OAAO;AAAA,IACT;AAAA,IACF,CAAC,gBAAgB,qBAAqB,MAAM,OAAO,KAAK,OAAO,KAAK;AAAA,EACtE;AACA,QAAM,QAAQ;AAAA,IACZ,MACE;AAAA,MACE;AAAA,MACA;AAAA,MACA,iBAAiB,cAAc,IAAI;AAAA,IACrC;AAAA,IACF,CAAC,qBAAqB,cAAc,YAAY;AAAA,EAClD;AACA,QAAM,YAAY,QAAQ,MAAM,CAAC,OAAO,MAAM,KAAK,GAAG,CAAC,OAAO,OAAO,IAAI,CAAC;AAE1E,QAAM,aAAa,iBAAiB,CAAC,aAAqB;AACxD,QAAI,CAAC,UAAU;AACb,cAAQ,UAAU,UAAU,mBAAmB,CAAC;AAAA,IAClD;AAAA,EACF,CAAC;AAED,QAAM,eAAe,iBAAiB,CAAC,UAA6B;AAClE,sBAAkB,MAAM,YAAY,OAAO,KAAK;AAChD,eAAW,KAAK;AAAA,EAClB,CAAC;AAED,QAAM,mBAAmB,YAAY,iBAAiB;AACtD,QAAM,eAAe,YAAY,iBAAiB;AAClD,QAAM,cAAc,WAAW,iBAAiB;AAEhD,SACE,qBAAC,QAAM,GAAG,OAAO,UAAU,cAAc,OAAO,WAC9C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV;AAAA,QACA,YAAY,eAAe;AAAA;AAAA,IAC7B;AAAA,IAEC,cACC,oBAAC,QAAK,OAAO,OAAO,eAClB,8BAAC,WAAW,OAAX,EAAiB,SAAO,MAAC,OAAO,OAAO,cACrC,0BAAgB,cAAc,mBAAmB,GACpD,GACF,IAEA,MAAM;AAAA,MAAI,CAAC,SACT,OAAO,SAAS,WACd;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,SAAS;AAAA,UAClB;AAAA,UACA,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA,YAAY;AAAA;AAAA,QANP;AAAA,MAOP,IAEA,oBAAC,QAAgB,OAAO,OAAO,UAC7B,8BAAC,WAAW,OAAX,EAAiB,OAAO,OAAO,eAC7B,oBACH,KAHS,IAIX;AAAA,IAEJ;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV;AAAA,QACA,YAAY,eAAe;AAAA;AAAA,IAC7B;AAAA,KACF;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA6B;AAClE,QAAM,SAAS,MAAM,WAAW;AAChC,QAAM,aAAa,OAAO,MAAM,MAAM,IAAI;AAC1C,QAAM,eAAe,yBAAyB,OAAO,QAAQ;AAAA,IAC3D,SAAS;AAAA,IACT,UAAU,MAAM;AAAA,EAClB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,UAAU;AAAA,MACV,KAAK,OAAO;AAAA,IACd;AAAA,IACA,eAAe;AAAA,MACb,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,UAAU,WAAW;AAAA,MACrB,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAE9B,iBAAiB,aAAa;AAAA,MAC9B,aAAa,aAAa;AAAA,MAC1B,cAAc,OAAO;AAAA,MACrB,aAAa,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,OAAO,aAAa;AAAA,MACpB,UAAU,WAAW;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,IACA,UAAU;AAAA,MACR,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO,WAAW;AAAA,MAClB,QAAQ,WAAW;AAAA,IACrB;AAAA,IACA,eAAe;AAAA,MACb,OAAO,aAAa;AAAA,MACpB,UAAU,WAAW;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,EACF,CAAC;AACH;","names":["Pagination"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/pagination",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "9.0.0",
|
|
4
4
|
"description": "Token-aware pagination controls for ImpulseUI Native applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/core": "
|
|
32
|
-
"@impulse-ui-native/icon": "
|
|
33
|
-
"@impulse-ui-native/primitives": "
|
|
34
|
-
"@impulse-ui-native/theme": "
|
|
31
|
+
"@impulse-ui-native/core": "9.0.0",
|
|
32
|
+
"@impulse-ui-native/icon": "9.0.0",
|
|
33
|
+
"@impulse-ui-native/primitives": "9.0.0",
|
|
34
|
+
"@impulse-ui-native/theme": "9.0.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/react": "~19.2.14",
|