@tecsinapse/react-web-kit 1.18.3 → 1.18.4
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/CHANGELOG.md +11 -0
- package/dist/components/organisms/DataGrid/Footer/Footer.js +6 -2
- package/dist/components/organisms/DataGrid/Footer/Footer.js.map +1 -1
- package/dist/components/organisms/DataGrid/Footer/styled.d.ts +3 -0
- package/dist/components/organisms/DataGrid/Footer/styled.js +13 -1
- package/dist/components/organisms/DataGrid/Footer/styled.js.map +1 -1
- package/package.json +2 -2
- package/src/components/organisms/DataGrid/Footer/Footer.tsx +51 -38
- package/src/components/organisms/DataGrid/Footer/styled.ts +7 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.18.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.18.3...@tecsinapse/react-web-kit@1.18.4) (2022-08-08)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* added text in Footer DataGrid inform quantity items rendered of total items. ([#179497](https://github.com/tecsinapse/design-system/issues/179497)) ([0ba47c6](https://github.com/tecsinapse/design-system/commit/0ba47c66da0173418e56fcdcfa1ee5e5e9d966e3))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [1.18.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.18.2...@tecsinapse/react-web-kit@1.18.3) (2022-08-03)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -67,6 +67,7 @@ const Footer = ({
|
|
|
67
67
|
onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(0);
|
|
68
68
|
}, [onPageChange, onRowsPerPageChange]);
|
|
69
69
|
|
|
70
|
+
const quantityRowsRendered = rowsPerPage > rowsCount ? rowsCount : rowsPerPage;
|
|
70
71
|
return _react.default.createElement(_Table.TFoot, null, _react.default.createElement(_Table.Tr, null, _react.default.createElement(_styled.TdFooterStyled, {
|
|
71
72
|
colSpan: 99
|
|
72
73
|
}, _react.default.createElement(_styled.FooterContainer, null, _react.default.createElement(_styled.FooterContainerStart, null, pagination && _react.default.createElement(_styled.SelectContainer, null, _react.default.createElement(_reactWebKit.Select, {
|
|
@@ -83,7 +84,10 @@ const Footer = ({
|
|
|
83
84
|
}, _react.default.createElement(_reactWebKit.Text, {
|
|
84
85
|
fontColor: "orange",
|
|
85
86
|
fontWeight: "bold"
|
|
86
|
-
}, exportLabel)))), pagination && _react.default.createElement(
|
|
87
|
+
}, exportLabel)))), pagination && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styled.TextPagination, {
|
|
88
|
+
fontWeight: 'bold',
|
|
89
|
+
fontColor: 'medium'
|
|
90
|
+
}, `Exibindo ${quantityRowsRendered} de ${rowsCount} registros`), _react.default.createElement(_styled.FooterContainerEnd, null, _react.default.createElement(_styled.NavigationButton, {
|
|
87
91
|
onPress: () => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page - 1),
|
|
88
92
|
disabled: page === 0
|
|
89
93
|
}, _react.default.createElement(_reactWebKit.Icon, {
|
|
@@ -105,7 +109,7 @@ const Footer = ({
|
|
|
105
109
|
name: 'chevron-right',
|
|
106
110
|
type: 'material-community',
|
|
107
111
|
fontColor: 'light'
|
|
108
|
-
})))))));
|
|
112
|
+
}))))))));
|
|
109
113
|
};
|
|
110
114
|
|
|
111
115
|
var _default = _react.default.memo(Footer);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/Footer.tsx"],"names":["Footer","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","rowsPerPageLabel","exportFunction","exportLabel","rowsCount","page","onPageChange","pagination","exportComponent","Error","getPaginationSlice","totalPages","Math","ceil","start","end","handleRowsPerPage","React","useCallback","value","String","Array","keys","slice","map","memo"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/Footer.tsx"],"names":["Footer","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","rowsPerPageLabel","exportFunction","exportLabel","rowsCount","page","onPageChange","pagination","exportComponent","Error","getPaginationSlice","totalPages","Math","ceil","start","end","handleRowsPerPage","React","useCallback","value","quantityRowsRendered","String","Array","keys","slice","map","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, Icon, Select, Text } from '@tecsinapse/react-web-kit';\nimport { TFoot, Tr } from '../../../atoms/Table';\nimport {\n FooterContainer,\n FooterContainerEnd,\n FooterContainerStart,\n HoveredText,\n NavigationButton,\n PageButton,\n PagesContainer,\n SelectContainer,\n TdFooterStyled,\n TextPagination,\n} from './styled';\n\ninterface DataGridFooterProps {\n rowsPerPage: number;\n onRowsPerPageChange?: (value: number) => void;\n rowsPerPageOptions: number[];\n rowsPerPageLabel: (value: number) => string;\n exportLabel?: string;\n exportFunction?: () => void;\n /** Total data elements */\n rowsCount: number;\n page: number;\n onPageChange?: (page: number) => void;\n pagination: boolean;\n exportComponent?: React.ReactNode;\n}\n\nconst Footer: React.FC<DataGridFooterProps> = ({\n rowsPerPage,\n onRowsPerPageChange,\n rowsPerPageOptions,\n rowsPerPageLabel,\n exportFunction,\n exportLabel,\n rowsCount,\n page,\n onPageChange,\n pagination,\n exportComponent,\n}) => {\n if (pagination && (!onPageChange || !onRowsPerPageChange)) {\n throw new Error(\n '[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)'\n );\n }\n\n const getPaginationSlice = (): { start: number; end: number } => {\n const totalPages = Math.ceil(rowsCount / rowsPerPage);\n if (totalPages < 4) {\n return { start: 0, end: totalPages };\n }\n if (page === 0) {\n return { start: page, end: page + 3 };\n }\n if (page === totalPages - 1) {\n return { start: page - 2, end: page + 1 };\n }\n return { start: page - 1, end: page + 2 };\n };\n\n const handleRowsPerPage = React.useCallback(\n value => {\n onRowsPerPageChange?.(value as number);\n onPageChange?.(0);\n },\n [onPageChange, onRowsPerPageChange]\n );\n\n const quantityRowsRendered =\n rowsPerPage > rowsCount ? rowsCount : rowsPerPage;\n\n return (\n <TFoot>\n <Tr>\n <TdFooterStyled colSpan={99}>\n <FooterContainer>\n <FooterContainerStart>\n {pagination && (\n <SelectContainer>\n <Select\n options={rowsPerPageOptions}\n onSelect={handleRowsPerPage}\n value={rowsPerPage}\n type={'single'}\n keyExtractor={value => String(value)}\n labelExtractor={rowsPerPageLabel}\n anchor=\"top\"\n />\n </SelectContainer>\n )}\n {exportComponent && !exportFunction && <>{exportComponent}</>}\n {exportFunction && (\n <HoveredText>\n <Button variant=\"outlined\" onPress={() => exportFunction()}>\n <Text fontColor=\"orange\" fontWeight=\"bold\">\n {exportLabel}\n </Text>\n </Button>\n </HoveredText>\n )}\n </FooterContainerStart>\n {pagination && (\n <>\n <TextPagination\n fontWeight={'bold'}\n fontColor={'medium'}\n >{`Exibindo ${quantityRowsRendered} de ${rowsCount} registros`}</TextPagination>\n <FooterContainerEnd>\n <NavigationButton\n onPress={() => onPageChange?.(page - 1)}\n disabled={page === 0}\n >\n <Icon\n name={'chevron-left'}\n type={'material-community'}\n fontColor={'light'}\n />\n </NavigationButton>\n <PagesContainer>\n {[...Array(Math.ceil(rowsCount / rowsPerPage)).keys()]\n .slice(\n getPaginationSlice().start,\n getPaginationSlice().end\n )\n .map(value => (\n <HoveredText key={`page-${value}`}>\n <PageButton\n variant={page === value ? 'outlined' : 'text'}\n onPress={() => onPageChange?.(value)}\n >\n <Text fontColor=\"medium\" fontWeight=\"bold\">\n {value + 1}\n </Text>\n </PageButton>\n </HoveredText>\n ))}\n </PagesContainer>\n <NavigationButton\n onPress={() => onPageChange?.(page + 1)}\n disabled={page === Math.ceil(rowsCount / rowsPerPage) - 1}\n >\n <Icon\n name={'chevron-right'}\n type={'material-community'}\n fontColor={'light'}\n />\n </NavigationButton>\n </FooterContainerEnd>\n </>\n )}\n </FooterContainer>\n </TdFooterStyled>\n </Tr>\n </TFoot>\n );\n};\n\nexport default React.memo(Footer);\n"],"file":"Footer.js"}
|
|
@@ -33,3 +33,6 @@ export declare const NavigationButton: import("@emotion/native").StyledComponent
|
|
|
33
33
|
export declare const PageButton: import("@emotion/native").StyledComponent<any, {}, {}>;
|
|
34
34
|
export declare const PagesContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
35
35
|
export declare const HoveredText: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
36
|
+
export declare const TextPagination: import("@emotion/native").StyledComponent<any, {}, {
|
|
37
|
+
ref?: import("react").Ref<any> | undefined;
|
|
38
|
+
}>;
|
|
@@ -3,12 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.HoveredText = exports.PagesContainer = exports.PageButton = exports.NavigationButton = exports.SelectContainer = exports.FooterContainerEnd = exports.FooterContainerStart = exports.FooterContainer = exports.FlexContainer = exports.TdFooterStyled = void 0;
|
|
6
|
+
exports.TextPagination = exports.HoveredText = exports.PagesContainer = exports.PageButton = exports.NavigationButton = exports.SelectContainer = exports.FooterContainerEnd = exports.FooterContainerStart = exports.FooterContainer = exports.FlexContainer = exports.TdFooterStyled = void 0;
|
|
7
7
|
|
|
8
8
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
9
9
|
|
|
10
10
|
var _native = _interopRequireDefault(require("@emotion/native"));
|
|
11
11
|
|
|
12
|
+
var _reactWebKit = require("@tecsinapse/react-web-kit");
|
|
13
|
+
|
|
12
14
|
var _Table = require("../../../atoms/Table");
|
|
13
15
|
|
|
14
16
|
var _Button = require("../../../atoms/Button");
|
|
@@ -90,4 +92,14 @@ const HoveredText = (0, _styled.default)('div')`
|
|
|
90
92
|
}
|
|
91
93
|
`;
|
|
92
94
|
exports.HoveredText = HoveredText;
|
|
95
|
+
const TextPagination = (0, _native.default)(_reactWebKit.Text)`
|
|
96
|
+
padding-right: ${({
|
|
97
|
+
theme
|
|
98
|
+
}) => theme.spacing.deca};
|
|
99
|
+
padding-left: ${({
|
|
100
|
+
theme
|
|
101
|
+
}) => theme.spacing.deca};
|
|
102
|
+
|
|
103
|
+
`;
|
|
104
|
+
exports.TextPagination = TextPagination;
|
|
93
105
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/styled.ts"],"names":["TdFooterStyled","Td","theme","spacing","centi","FlexContainer","FooterContainer","FooterContainerStart","FooterContainerEnd","SelectContainer","deca","NavigationButton","Button","borderRadius","mili","PageButton","micro","PagesContainer","HoveredText","font","color","light"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEO,MAAMA,cAAc,GAAG,qBAAOC,SAAP,CAAgC;AAC9D,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAChD,CAFO;;AAIA,MAAMC,aAAa,GAAG,qBAAO,KAAP,CAAc;AAC3C;AACA;AACA,CAHO;;AAKA,MAAMC,eAAe,GAAG,qBAAOD,aAAP,CAAsB;AACrD;AACA;AACA,CAHO;;AAKA,MAAME,oBAAoB,GAAG,qBAAOF,aAAP,CAAsB;AAC1D;AACA,CAFO;;AAIA,MAAMG,kBAAkB,GAAG,qBAAOH,aAAP,CAAsB;AACxD;AACA,CAFO;;AAIA,MAAMI,eAAe,GAAG,qBAAO,KAAP,CAAmC;AAClE,kBAAkB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACpD,CAFO;;AAIA,MAAMC,gBAAgB,GAAG,qBAAaC,cAAb,CAA0C;AAC1E,qBAAqB,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA;AACA,eAAe,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAClD;AACA,CANO;;AASA,MAAMW,UAAU,GAAG,qBAAaJ,gBAAb,CAAoD;AAC9E,qBAAqB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACvD,oBAAoB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACtD,qBAAqB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA,mBAAmB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACtD,oBAAoB,CAAC;AAAEd,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACvD,CAPO;;AASA,MAAMC,cAAc,GAAG,qBAAO,KAAP,CAAmC;AACjE;AACA;AACA,CAHO;;AAKA,MAAMC,WAAW,GAAG,qBAAO,KAAP,CAAmC;AAC9D;AACA;AACA,aAAa,CAAC;AAAEhB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACiB,IAAN,CAAWC,KAAX,CAAiBC,KAAM;AACnD;AACA,CALO","sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { Td } from '../../../atoms/Table';\nimport { Button } from '../../../atoms/Button';\n\nexport const TdFooterStyled = styled(Td)<Partial<StyleProps>>`\n padding: ${({ theme }) => theme.spacing.centi} 0 0 0;\n`;\n\nexport const FlexContainer = styled('div')`\n display: flex;\n flex-grow: 1;\n`;\n\nexport const FooterContainer = styled(FlexContainer)`\n justify-content: space-between;\n align-items: center;\n`;\n\nexport const FooterContainerStart = styled(FlexContainer)`\n justify-content: flex-start;\n`;\n\nexport const FooterContainerEnd = styled(FlexContainer)`\n justify-content: flex-end;\n`;\n\nexport const SelectContainer = styled('div')<Partial<StyleProps>>`\n margin-right: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>` \n border-radius: ${({ theme }) => theme.borderRadius.mili};\n height: 44px;\n justify-content: center;\n padding: ${({ theme }) => theme.spacing.centi};\n width: 44px; \n`;\n\n// Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text\nexport const PageButton = nativeStyled(NavigationButton)<Partial<StyleProps>>`\n padding-right: ${({ theme }) => theme.spacing.deca};\n padding-left: ${({ theme }) => theme.spacing.deca};\n border-radius: ${({ theme }) => theme.borderRadius.mili};\n justify-content: center;\n margin-left: ${({ theme }) => theme.spacing.micro};\n margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n\nexport const PagesContainer = styled('div')<Partial<StyleProps>>`\n margin: 0 20px;\n display: flex;\n`;\n\nexport const HoveredText = styled('div')<Partial<StyleProps>>`\n user-select: none;\n &:hover * {\n color: ${({ theme }) => theme.font.color.light};\n }\n`;\n"],"file":"styled.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/styled.ts"],"names":["TdFooterStyled","Td","theme","spacing","centi","FlexContainer","FooterContainer","FooterContainerStart","FooterContainerEnd","SelectContainer","deca","NavigationButton","Button","borderRadius","mili","PageButton","micro","PagesContainer","HoveredText","font","color","light","TextPagination","Text"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;AAEO,MAAMA,cAAc,GAAG,qBAAOC,SAAP,CAAgC;AAC9D,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAChD,CAFO;;AAIA,MAAMC,aAAa,GAAG,qBAAO,KAAP,CAAc;AAC3C;AACA;AACA,CAHO;;AAKA,MAAMC,eAAe,GAAG,qBAAOD,aAAP,CAAsB;AACrD;AACA;AACA,CAHO;;AAKA,MAAME,oBAAoB,GAAG,qBAAOF,aAAP,CAAsB;AAC1D;AACA,CAFO;;AAIA,MAAMG,kBAAkB,GAAG,qBAAOH,aAAP,CAAsB;AACxD;AACA,CAFO;;AAIA,MAAMI,eAAe,GAAG,qBAAO,KAAP,CAAmC;AAClE,kBAAkB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACpD,CAFO;;AAIA,MAAMC,gBAAgB,GAAG,qBAAaC,cAAb,CAA0C;AAC1E,qBAAqB,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA;AACA,eAAe,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAClD;AACA,CANO;;AASA,MAAMW,UAAU,GAAG,qBAAaJ,gBAAb,CAAoD;AAC9E,qBAAqB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACvD,oBAAoB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACtD,qBAAqB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA,mBAAmB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACtD,oBAAoB,CAAC;AAAEd,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACvD,CAPO;;AASA,MAAMC,cAAc,GAAG,qBAAO,KAAP,CAAmC;AACjE;AACA;AACA,CAHO;;AAKA,MAAMC,WAAW,GAAG,qBAAO,KAAP,CAAmC;AAC9D;AACA;AACA,aAAa,CAAC;AAAEhB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACiB,IAAN,CAAWC,KAAX,CAAiBC,KAAM;AACnD;AACA,CALO;;AAOA,MAAMC,cAAc,GAAG,qBAAaC,iBAAb,CAAwC;AACtE,mBAAmB,CAAC;AAAErB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACrD,kBAAkB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACpD;AACA,CAJO","sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { Text } from '@tecsinapse/react-web-kit';\nimport { Td } from '../../../atoms/Table';\nimport { Button } from '../../../atoms/Button';\n\nexport const TdFooterStyled = styled(Td)<Partial<StyleProps>>`\n padding: ${({ theme }) => theme.spacing.centi} 0 0 0;\n`;\n\nexport const FlexContainer = styled('div')`\n display: flex;\n flex-grow: 1;\n`;\n\nexport const FooterContainer = styled(FlexContainer)`\n justify-content: space-between;\n align-items: center;\n`;\n\nexport const FooterContainerStart = styled(FlexContainer)`\n justify-content: flex-start;\n`;\n\nexport const FooterContainerEnd = styled(FlexContainer)`\n justify-content: flex-end;\n`;\n\nexport const SelectContainer = styled('div')<Partial<StyleProps>>`\n margin-right: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>` \n border-radius: ${({ theme }) => theme.borderRadius.mili};\n height: 44px;\n justify-content: center;\n padding: ${({ theme }) => theme.spacing.centi};\n width: 44px; \n`;\n\n// Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text\nexport const PageButton = nativeStyled(NavigationButton)<Partial<StyleProps>>`\n padding-right: ${({ theme }) => theme.spacing.deca};\n padding-left: ${({ theme }) => theme.spacing.deca};\n border-radius: ${({ theme }) => theme.borderRadius.mili};\n justify-content: center;\n margin-left: ${({ theme }) => theme.spacing.micro};\n margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n\nexport const PagesContainer = styled('div')<Partial<StyleProps>>`\n margin: 0 20px;\n display: flex;\n`;\n\nexport const HoveredText = styled('div')<Partial<StyleProps>>`\n user-select: none;\n &:hover * {\n color: ${({ theme }) => theme.font.color.light};\n }\n`;\n\nexport const TextPagination = nativeStyled(Text)<Partial<StyleProps>>`\n padding-right: ${({ theme }) => theme.spacing.deca};\n padding-left: ${({ theme }) => theme.spacing.deca};\n\n`;\n"],"file":"styled.js"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-web-kit",
|
|
3
3
|
"description": "TecSinapse React components",
|
|
4
|
-
"version": "1.18.
|
|
4
|
+
"version": "1.18.4",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"license": "MIT",
|
|
@@ -36,5 +36,5 @@
|
|
|
36
36
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
37
37
|
"react-native-web": "^0.17.1"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "5d7f7db939a5b380cd1fb560b4f4529f10162215"
|
|
40
40
|
}
|
|
@@ -11,6 +11,7 @@ import {
|
|
|
11
11
|
PagesContainer,
|
|
12
12
|
SelectContainer,
|
|
13
13
|
TdFooterStyled,
|
|
14
|
+
TextPagination,
|
|
14
15
|
} from './styled';
|
|
15
16
|
|
|
16
17
|
interface DataGridFooterProps {
|
|
@@ -69,6 +70,9 @@ const Footer: React.FC<DataGridFooterProps> = ({
|
|
|
69
70
|
[onPageChange, onRowsPerPageChange]
|
|
70
71
|
);
|
|
71
72
|
|
|
73
|
+
const quantityRowsRendered =
|
|
74
|
+
rowsPerPage > rowsCount ? rowsCount : rowsPerPage;
|
|
75
|
+
|
|
72
76
|
return (
|
|
73
77
|
<TFoot>
|
|
74
78
|
<Tr>
|
|
@@ -100,44 +104,53 @@ const Footer: React.FC<DataGridFooterProps> = ({
|
|
|
100
104
|
)}
|
|
101
105
|
</FooterContainerStart>
|
|
102
106
|
{pagination && (
|
|
103
|
-
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
>
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
107
|
+
<>
|
|
108
|
+
<TextPagination
|
|
109
|
+
fontWeight={'bold'}
|
|
110
|
+
fontColor={'medium'}
|
|
111
|
+
>{`Exibindo ${quantityRowsRendered} de ${rowsCount} registros`}</TextPagination>
|
|
112
|
+
<FooterContainerEnd>
|
|
113
|
+
<NavigationButton
|
|
114
|
+
onPress={() => onPageChange?.(page - 1)}
|
|
115
|
+
disabled={page === 0}
|
|
116
|
+
>
|
|
117
|
+
<Icon
|
|
118
|
+
name={'chevron-left'}
|
|
119
|
+
type={'material-community'}
|
|
120
|
+
fontColor={'light'}
|
|
121
|
+
/>
|
|
122
|
+
</NavigationButton>
|
|
123
|
+
<PagesContainer>
|
|
124
|
+
{[...Array(Math.ceil(rowsCount / rowsPerPage)).keys()]
|
|
125
|
+
.slice(
|
|
126
|
+
getPaginationSlice().start,
|
|
127
|
+
getPaginationSlice().end
|
|
128
|
+
)
|
|
129
|
+
.map(value => (
|
|
130
|
+
<HoveredText key={`page-${value}`}>
|
|
131
|
+
<PageButton
|
|
132
|
+
variant={page === value ? 'outlined' : 'text'}
|
|
133
|
+
onPress={() => onPageChange?.(value)}
|
|
134
|
+
>
|
|
135
|
+
<Text fontColor="medium" fontWeight="bold">
|
|
136
|
+
{value + 1}
|
|
137
|
+
</Text>
|
|
138
|
+
</PageButton>
|
|
139
|
+
</HoveredText>
|
|
140
|
+
))}
|
|
141
|
+
</PagesContainer>
|
|
142
|
+
<NavigationButton
|
|
143
|
+
onPress={() => onPageChange?.(page + 1)}
|
|
144
|
+
disabled={page === Math.ceil(rowsCount / rowsPerPage) - 1}
|
|
145
|
+
>
|
|
146
|
+
<Icon
|
|
147
|
+
name={'chevron-right'}
|
|
148
|
+
type={'material-community'}
|
|
149
|
+
fontColor={'light'}
|
|
150
|
+
/>
|
|
151
|
+
</NavigationButton>
|
|
152
|
+
</FooterContainerEnd>
|
|
153
|
+
</>
|
|
141
154
|
)}
|
|
142
155
|
</FooterContainer>
|
|
143
156
|
</TdFooterStyled>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import styled from '@emotion/styled';
|
|
2
2
|
import { default as nativeStyled } from '@emotion/native';
|
|
3
3
|
import { StyleProps } from '@tecsinapse/react-core';
|
|
4
|
+
import { Text } from '@tecsinapse/react-web-kit';
|
|
4
5
|
import { Td } from '../../../atoms/Table';
|
|
5
6
|
import { Button } from '../../../atoms/Button';
|
|
6
7
|
|
|
@@ -59,3 +60,9 @@ export const HoveredText = styled('div')<Partial<StyleProps>>`
|
|
|
59
60
|
color: ${({ theme }) => theme.font.color.light};
|
|
60
61
|
}
|
|
61
62
|
`;
|
|
63
|
+
|
|
64
|
+
export const TextPagination = nativeStyled(Text)<Partial<StyleProps>>`
|
|
65
|
+
padding-right: ${({ theme }) => theme.spacing.deca};
|
|
66
|
+
padding-left: ${({ theme }) => theme.spacing.deca};
|
|
67
|
+
|
|
68
|
+
`;
|