@impulse-ui-native/pagination 14.1.0 → 15.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.
- package/README.md +7 -0
- package/dist/components/pagination-button.d.mts +3 -2
- package/dist/components/pagination-button.js +7 -6
- package/dist/components/pagination-button.js.map +1 -1
- package/dist/components/pagination.d.mts +1 -1
- package/dist/components/pagination.js +8 -3
- package/dist/components/pagination.js.map +1 -1
- package/dist/types/pagination.types.d.mts +4 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -39,3 +39,10 @@ layout when space is tighter. Set `compact` to force that layout. Override
|
|
|
39
39
|
|
|
40
40
|
Pagination items use the shared primitives `Pressable`; pressed feedback comes
|
|
41
41
|
from that primitive and is not modeled as Pagination state or theme tokens.
|
|
42
|
+
|
|
43
|
+
## Repository palette consistency
|
|
44
|
+
|
|
45
|
+
Pagination accepts `tone="neutral" | "primary" | "secondary"` (default primary).
|
|
46
|
+
The current page uses the shared filled Button palette. Disabled controls use the
|
|
47
|
+
shared unavailable filled palette; unselected pages and compact counts remain
|
|
48
|
+
neutral. Custom theme states move to pagination.colors[tone].
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { IconProps } from '@impulse-ui-native/icon/types';
|
|
3
|
-
import { ComponentSize } from '@impulse-ui-native/theme';
|
|
3
|
+
import { ComponentSize, ComponentTone } from '@impulse-ui-native/theme';
|
|
4
4
|
|
|
5
5
|
interface PaginationButtonProps {
|
|
6
6
|
current?: boolean;
|
|
@@ -9,8 +9,9 @@ interface PaginationButtonProps {
|
|
|
9
9
|
label?: number;
|
|
10
10
|
onSelect: (page: number) => void;
|
|
11
11
|
size: ComponentSize;
|
|
12
|
+
tone: ComponentTone;
|
|
12
13
|
targetPage: number;
|
|
13
14
|
}
|
|
14
|
-
declare const PaginationButton: react.MemoExoticComponent<({ current, disabled, Icon: IconComponent, label, onSelect, size, targetPage, }: PaginationButtonProps) => react.JSX.Element>;
|
|
15
|
+
declare const PaginationButton: react.MemoExoticComponent<({ current, disabled, Icon: IconComponent, label, onSelect, size, tone, targetPage, }: PaginationButtonProps) => react.JSX.Element>;
|
|
15
16
|
|
|
16
17
|
export { PaginationButton };
|
|
@@ -16,14 +16,15 @@ const PaginationButton = memo(function PaginationButton2({
|
|
|
16
16
|
label,
|
|
17
17
|
onSelect,
|
|
18
18
|
size,
|
|
19
|
+
tone,
|
|
19
20
|
targetPage
|
|
20
21
|
}) {
|
|
21
22
|
const tokens = useComponentsTokens().pagination;
|
|
22
|
-
const styles = useThemedStyles(
|
|
23
|
-
|
|
24
|
-
disabled,
|
|
25
|
-
size
|
|
26
|
-
|
|
23
|
+
const styles = useThemedStyles(
|
|
24
|
+
themedStyles,
|
|
25
|
+
{ current, disabled, size, tone },
|
|
26
|
+
[current, disabled, size, tone]
|
|
27
|
+
);
|
|
27
28
|
const handlePress = useEventCallback((_event) => {
|
|
28
29
|
onSelect(targetPage);
|
|
29
30
|
});
|
|
@@ -49,7 +50,7 @@ const PaginationButton = memo(function PaginationButton2({
|
|
|
49
50
|
function themedStyles(theme, props) {
|
|
50
51
|
const tokens = theme.components.pagination;
|
|
51
52
|
const sizeTokens = tokens.sizes[props.size];
|
|
52
|
-
const stateTokens = getPaginationStateTokens(tokens.
|
|
53
|
+
const stateTokens = getPaginationStateTokens(tokens.colors[props.tone], {
|
|
53
54
|
current: props.current,
|
|
54
55
|
disabled: props.disabled
|
|
55
56
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/pagination-button.tsx"],"sourcesContent":["import type { GestureResponderEvent } from \"react-native\";\nimport { memo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { IconProps } from \"@impulse-ui-native/icon/types\";\nimport type {
|
|
1
|
+
{"version":3,"sources":["../../src/components/pagination-button.tsx"],"sourcesContent":["import type { GestureResponderEvent } from \"react-native\";\nimport { memo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { IconProps } from \"@impulse-ui-native/icon/types\";\nimport type {\n AppTheme,\n ComponentSize,\n ComponentTone,\n} from \"@impulse-ui-native/theme\";\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport { Pressable, Typography } from \"@impulse-ui-native/primitives\";\nimport {\n getPaginationStateTokens,\n useComponentsTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { PaginationButtonThemeProps } from \"../types\";\n\ninterface PaginationButtonProps {\n current?: boolean;\n disabled?: boolean;\n Icon?: IconProps[\"icon\"];\n label?: number;\n onSelect: (page: number) => void;\n size: ComponentSize;\n tone: ComponentTone;\n targetPage: number;\n}\n\nexport const PaginationButton = memo(function PaginationButton({\n current = false,\n disabled = false,\n Icon: IconComponent,\n label,\n onSelect,\n size,\n tone,\n targetPage,\n}: PaginationButtonProps) {\n const tokens = useComponentsTokens().pagination;\n\n const styles = useThemedStyles(\n themedStyles,\n { current, disabled, size, tone },\n [current, disabled, size, tone],\n );\n\n const handlePress = useEventCallback((_event: GestureResponderEvent) => {\n onSelect(targetPage);\n });\n\n return (\n <Pressable\n disabled={disabled}\n hitSlop={tokens.sizes[size].hitSlop}\n onPress={handlePress}\n style={styles.root}\n >\n {IconComponent ? (\n <Icon\n color={styles.content.color}\n icon={IconComponent}\n size={tokens.sizes[size].iconSize}\n variant=\"bold\"\n />\n ) : (\n <Typography.Label numeric style={styles.content}>\n {label}\n </Typography.Label>\n )}\n </Pressable>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: PaginationButtonThemeProps) {\n const tokens = theme.components.pagination;\n const sizeTokens = tokens.sizes[props.size];\n const stateTokens = getPaginationStateTokens(tokens.colors[props.tone], {\n current: props.current,\n disabled: props.disabled,\n });\n\n return StyleSheet.create({\n root: {\n alignItems: \"center\",\n justifyContent: \"center\",\n\n width: sizeTokens.controlSize,\n height: sizeTokens.controlSize,\n\n backgroundColor: stateTokens.backgroundColor,\n borderColor: stateTokens.borderColor,\n borderRadius: tokens.borderRadius,\n borderWidth: tokens.borderWidth,\n },\n content: {\n color: stateTokens.color,\n fontSize: sizeTokens.fontSize,\n textAlign: \"center\",\n },\n });\n}\n"],"mappings":"AA8DQ;AA7DR,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAQ3B,SAAS,wBAAwB;AACjC,SAAS,YAAY;AACrB,SAAS,WAAW,kBAAkB;AACtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAeA,MAAM,mBAAmB,KAAK,SAASA,kBAAiB;AAAA,EAC7D,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,SAAS,oBAAoB,EAAE;AAErC,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,SAAS,UAAU,MAAM,KAAK;AAAA,IAChC,CAAC,SAAS,UAAU,MAAM,IAAI;AAAA,EAChC;AAEA,QAAM,cAAc,iBAAiB,CAAC,WAAkC;AACtE,aAAS,UAAU;AAAA,EACrB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,OAAO,MAAM,IAAI,EAAE;AAAA,MAC5B,SAAS;AAAA,MACT,OAAO,OAAO;AAAA,MAEb,0BACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,OAAO,QAAQ;AAAA,UACtB,MAAM;AAAA,UACN,MAAM,OAAO,MAAM,IAAI,EAAE;AAAA,UACzB,SAAQ;AAAA;AAAA,MACV,IAEA,oBAAC,WAAW,OAAX,EAAiB,SAAO,MAAC,OAAO,OAAO,SACrC,iBACH;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAmC;AACxE,QAAM,SAAS,MAAM,WAAW;AAChC,QAAM,aAAa,OAAO,MAAM,MAAM,IAAI;AAC1C,QAAM,cAAc,yBAAyB,OAAO,OAAO,MAAM,IAAI,GAAG;AAAA,IACtE,SAAS,MAAM;AAAA,IACf,UAAU,MAAM;AAAA,EAClB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,OAAO,WAAW;AAAA,MAClB,QAAQ,WAAW;AAAA,MAEnB,iBAAiB,YAAY;AAAA,MAC7B,aAAa,YAAY;AAAA,MACzB,cAAc,OAAO;AAAA,MACrB,aAAa,OAAO;AAAA,IACtB;AAAA,IACA,SAAS;AAAA,MACP,OAAO,YAAY;AAAA,MACnB,UAAU,WAAW;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,EACF,CAAC;AACH;","names":["PaginationButton"]}
|
|
@@ -3,6 +3,6 @@ import { PaginationProps } from '../types/pagination.types.mjs';
|
|
|
3
3
|
import 'react-native';
|
|
4
4
|
import '@impulse-ui-native/theme';
|
|
5
5
|
|
|
6
|
-
declare const Pagination: react.MemoExoticComponent<({ compact, defaultPage, disabled, getCompactLabel, onLayout, onPageChange, page: pageProp, pageCount, size, style, ...props }: PaginationProps) => react.JSX.Element>;
|
|
6
|
+
declare const Pagination: react.MemoExoticComponent<({ compact, defaultPage, disabled, getCompactLabel, onLayout, onPageChange, page: pageProp, pageCount, size, tone, style, ...props }: PaginationProps) => react.JSX.Element>;
|
|
7
7
|
|
|
8
8
|
export { Pagination };
|
|
@@ -31,6 +31,7 @@ const Pagination = memo(function Pagination2({
|
|
|
31
31
|
page: pageProp,
|
|
32
32
|
pageCount,
|
|
33
33
|
size = "medium",
|
|
34
|
+
tone = "primary",
|
|
34
35
|
style,
|
|
35
36
|
...props
|
|
36
37
|
}) {
|
|
@@ -43,9 +44,10 @@ const Pagination = memo(function Pagination2({
|
|
|
43
44
|
onChange: onPageChange
|
|
44
45
|
});
|
|
45
46
|
const resolvedPage = clampPage(page, normalizedPageCount);
|
|
46
|
-
const styles = useThemedStyles(themedStyles, { disabled, size }, [
|
|
47
|
+
const styles = useThemedStyles(themedStyles, { disabled, size, tone }, [
|
|
47
48
|
disabled,
|
|
48
|
-
size
|
|
49
|
+
size,
|
|
50
|
+
tone
|
|
49
51
|
]);
|
|
50
52
|
const windowLayout = useMemo(
|
|
51
53
|
() => getPaginationWindowLayout(
|
|
@@ -86,6 +88,7 @@ const Pagination = memo(function Pagination2({
|
|
|
86
88
|
Icon: CaretLeftIcon,
|
|
87
89
|
onSelect: selectPage,
|
|
88
90
|
size,
|
|
91
|
+
tone,
|
|
89
92
|
targetPage: resolvedPage - 1
|
|
90
93
|
}
|
|
91
94
|
),
|
|
@@ -98,6 +101,7 @@ const Pagination = memo(function Pagination2({
|
|
|
98
101
|
label: item,
|
|
99
102
|
onSelect: selectPage,
|
|
100
103
|
size,
|
|
104
|
+
tone,
|
|
101
105
|
targetPage: item
|
|
102
106
|
},
|
|
103
107
|
item
|
|
@@ -110,6 +114,7 @@ const Pagination = memo(function Pagination2({
|
|
|
110
114
|
Icon: CaretRightIcon,
|
|
111
115
|
onSelect: selectPage,
|
|
112
116
|
size,
|
|
117
|
+
tone,
|
|
113
118
|
targetPage: resolvedPage + 1
|
|
114
119
|
}
|
|
115
120
|
)
|
|
@@ -118,7 +123,7 @@ const Pagination = memo(function Pagination2({
|
|
|
118
123
|
function themedStyles(theme, props) {
|
|
119
124
|
const tokens = theme.components.pagination;
|
|
120
125
|
const sizeTokens = tokens.sizes[props.size];
|
|
121
|
-
const statusTokens = getPaginationStateTokens(tokens.
|
|
126
|
+
const statusTokens = getPaginationStateTokens(tokens.colors[props.tone], {
|
|
122
127
|
current: false,
|
|
123
128
|
disabled: props.disabled
|
|
124
129
|
});
|
|
@@ -1 +1 @@
|
|
|
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.
|
|
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 tone = \"primary\",\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, tone }, [\n disabled,\n size,\n tone,\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 tone={tone}\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 tone={tone}\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 tone={tone}\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.colors[props.tone], {\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":"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","names":["Pagination"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ViewProps } from 'react-native';
|
|
2
|
-
import { ComponentSize } from '@impulse-ui-native/theme';
|
|
2
|
+
import { ComponentSize, ComponentTone } from '@impulse-ui-native/theme';
|
|
3
3
|
|
|
4
4
|
type PaginationItemValue = number | "start-ellipsis" | "end-ellipsis";
|
|
5
5
|
type PaginationCompactLabelFormatter = (page: number, pageCount: number) => string;
|
|
@@ -10,6 +10,7 @@ interface PaginationCommonProps extends Omit<ViewProps, "children"> {
|
|
|
10
10
|
onPageChange?: (page: number) => void;
|
|
11
11
|
pageCount: number;
|
|
12
12
|
size?: ComponentSize;
|
|
13
|
+
tone?: ComponentTone;
|
|
13
14
|
}
|
|
14
15
|
interface PaginationControlledProps extends PaginationCommonProps {
|
|
15
16
|
defaultPage?: never;
|
|
@@ -23,11 +24,13 @@ type PaginationProps = PaginationControlledProps | PaginationUncontrolledProps;
|
|
|
23
24
|
interface PaginationThemeProps {
|
|
24
25
|
disabled: boolean;
|
|
25
26
|
size: ComponentSize;
|
|
27
|
+
tone: ComponentTone;
|
|
26
28
|
}
|
|
27
29
|
interface PaginationButtonThemeProps {
|
|
28
30
|
current: boolean;
|
|
29
31
|
disabled: boolean;
|
|
30
32
|
size: ComponentSize;
|
|
33
|
+
tone: ComponentTone;
|
|
31
34
|
}
|
|
32
35
|
|
|
33
36
|
export type { PaginationButtonThemeProps, PaginationCompactLabelFormatter, PaginationItemValue, PaginationProps, PaginationThemeProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/pagination",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.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": "15.0.0",
|
|
32
|
+
"@impulse-ui-native/icon": "15.0.0",
|
|
33
|
+
"@impulse-ui-native/primitives": "15.0.0",
|
|
34
|
+
"@impulse-ui-native/theme": "15.0.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@impulse-ui-native/eslint-config": "1.0.0",
|