@tecsinapse/react-web-kit 1.18.2 → 1.18.5

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.18.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.18.4...@tecsinapse/react-web-kit@1.18.5) (2022-08-08)
+
+
+### Bug Fixes
+
+* update peerdep ([cb4ec62](https://github.com/tecsinapse/design-system/commit/cb4ec62ab2532ad7d7e38328d23bdde2581a470e))
+
+
+
+
+
+## [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)
+
+
+### Features
+
+* 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))
+
+
+
+
+
+## [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)
+
+
+### Features
+
+* added prop exportComponent in Footer Data Grid. ([c4b63de](https://github.com/tecsinapse/design-system/commit/c4b63deeb5853e538c55a035f2312eef06efef48))
+
+
+
+
+
 ## [1.18.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.18.1...@tecsinapse/react-web-kit@1.18.2) (2022-08-02)
 
 

package/dist/components/organisms/DataGrid/DataGrid.d.ts

@@ -23,6 +23,7 @@ export interface DataGridProps<Data> extends React.HTMLAttributes<HTMLDivElement
     loading?: boolean;
     skeletonComponent?: React.ReactNode;
     emptyPlaceholder?: React.ReactNode;
+    exportComponent?: React.ReactNode;
 }
-declare const DataGrid: <Data extends unknown>({ headers, data, rowKeyExtractor, toolbarTitle, toolbarFooter, toolbarRightIcons, selectable, selectedRows, onSelectedRows, pagination, rowsPerPage, onRowsPerPageChange, rowsPerPageOptions: _rowsPerPageOptions, rowsPerPageLabel: _rowsPerPageLabel, exportLabel, exportFunction, rowsCount, page, onPageChange, loading, skeletonComponent, emptyPlaceholder, ...rest }: DataGridProps<Data>) => JSX.Element;
+declare const DataGrid: <Data extends unknown>({ headers, data, rowKeyExtractor, toolbarTitle, toolbarFooter, toolbarRightIcons, selectable, selectedRows, onSelectedRows, pagination, rowsPerPage, onRowsPerPageChange, rowsPerPageOptions: _rowsPerPageOptions, rowsPerPageLabel: _rowsPerPageLabel, exportLabel, exportFunction, rowsCount, page, onPageChange, loading, skeletonComponent, emptyPlaceholder, exportComponent, ...rest }: DataGridProps<Data>) => JSX.Element;
 export default DataGrid;

package/dist/components/organisms/DataGrid/DataGrid.js

@@ -44,6 +44,7 @@ const DataGrid = ({
   loading = false,
   skeletonComponent,
   emptyPlaceholder,
+  exportComponent,
   ...rest
 }) => {
   if (selectable && (!selectedRows || !onSelectedRows)) {
@@ -113,7 +114,8 @@ const DataGrid = ({
     rowsCount: rowsCount ?? data.length,
     page: page,
     onPageChange: onPageChange,
-    pagination: pagination
+    pagination: pagination,
+    exportComponent: exportComponent
   })));
 };
 

package/dist/components/organisms/DataGrid/DataGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/organisms/DataGrid/DataGrid.tsx"],"names":["DataGrid","headers","data","rowKeyExtractor","toolbarTitle","toolbarFooter","toolbarRightIcons","selectable","selectedRows","onSelectedRows","pagination","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","_rowsPerPageOptions","rowsPerPageLabel","_rowsPerPageLabel","exportLabel","exportFunction","rowsCount","page","onPageChange","loading","skeletonComponent","emptyPlaceholder","rest","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","length","map","item","some","sel","Array","keys","padding","width","Number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  Table,\n  TableToolbar,\n  TableContainer,\n  Tr,\n  Td,\n  TBody,\n} from '../../atoms/Table';\nimport { Header } from './Header';\nimport { Row } from './Row';\nimport { HeadersType } from './types';\nimport { Footer } from './Footer';\nimport { Skeleton } from '../../atoms/Skeleton';\nimport { getData, removeElement } from './utils';\n\nexport interface DataGridProps<Data>\n  extends React.HTMLAttributes<HTMLDivElement> {\n  headers: HeadersType<Data>[];\n  data: Data[];\n  /** Unique identifier for row data */\n  rowKeyExtractor: (data: Data) => string;\n  toolbarRightIcons?: React.ReactNode;\n  toolbarFooter?: React.ReactNode;\n  toolbarTitle: string;\n  /** Enable rows selection */\n  selectable?: boolean;\n  /** Selected items */\n  selectedRows?: Data[];\n  /** Selection handler */\n  onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;\n  /** Shows pagination controls */\n  pagination?: boolean;\n  /** Results per page */\n  rowsPerPage?: number;\n  /** Results per page handler */\n  onRowsPerPageChange?: (value: number) => void;\n  rowsPerPageOptions?: number[];\n  rowsPerPageLabel?: (value: number) => string;\n  /** Export button label */\n  exportLabel?: string;\n  exportFunction?: () => void;\n  /** Total data elements. Only specify this property if your data is server-side */\n  rowsCount?: number;\n  /** Current page. Always start in 0 */\n  page?: number;\n  /** Current page handler */\n  onPageChange?: (page: number) => void;\n  /** Loading state. The amount of skeleton rows is based on current rowsPerPage */\n  loading?: boolean;\n  /** Custom skeleton component for better visual */\n  skeletonComponent?: React.ReactNode;\n  /** Empty state placeholder */\n  emptyPlaceholder?: React.ReactNode;\n}\n\n/** Note: Consider memoizing functions for a better performance */\nconst DataGrid = <Data extends unknown>({\n  headers,\n  data,\n  rowKeyExtractor,\n  toolbarTitle,\n  toolbarFooter,\n  toolbarRightIcons,\n  selectable = false,\n  selectedRows = [],\n  onSelectedRows,\n  pagination = false,\n  rowsPerPage = 10,\n  onRowsPerPageChange,\n  rowsPerPageOptions: _rowsPerPageOptions,\n  rowsPerPageLabel: _rowsPerPageLabel,\n  exportLabel = 'Exportar',\n  exportFunction,\n  rowsCount,\n  page = 0,\n  onPageChange,\n  loading = false,\n  skeletonComponent,\n  emptyPlaceholder,\n  ...rest\n}: DataGridProps<Data>): JSX.Element => {\n  if (selectable && (!selectedRows || !onSelectedRows)) {\n    throw new Error(\n      '[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)'\n    );\n  }\n\n  const rowsPerPageLabel = React.useCallback(\n    value =>\n      _rowsPerPageLabel\n        ? _rowsPerPageLabel(value)\n        : `Exibir por página: ${value} itens`,\n    [_rowsPerPageLabel]\n  );\n  const rowsPerPageOptions = React.useMemo(\n    () => _rowsPerPageOptions ?? [10, 25, 50],\n    [_rowsPerPageOptions]\n  );\n\n  const handleSelect = React.useCallback(\n    (current, checked) => {\n      if (checked) {\n        onSelectedRows?.(prevState => [...prevState, current]);\n        return;\n      }\n\n      onSelectedRows?.(prevState => {\n        const idx = prevState.findIndex(\n          el => rowKeyExtractor(el) === rowKeyExtractor(current)\n        );\n        return [...removeElement(prevState, idx)];\n      });\n    },\n    [onSelectedRows, rowKeyExtractor]\n  );\n\n  return (\n    <TableContainer {...rest}>\n      <TableToolbar\n        title={toolbarTitle}\n        rightIcons={toolbarRightIcons}\n        footer={toolbarFooter}\n      />\n      <Table>\n        <Header\n          selectable={selectable}\n          headers={headers}\n          data={data}\n          rowsCount={rowsCount ?? data.length}\n          rowKeyExtractor={rowKeyExtractor}\n          selectedRows={selectedRows}\n          onSelected={onSelectedRows}\n        />\n\n        {!loading ? (\n          <TBody>\n            {data.length > 0 ? (\n              getData(\n                data,\n                rowsCount,\n                page,\n                rowsPerPage,\n                pagination\n              ).map(item => (\n                <Row\n                  key={rowKeyExtractor(item)}\n                  rowKeyExtractor={rowKeyExtractor}\n                  handleSelect={handleSelect}\n                  selectable={selectable}\n                  headers={headers}\n                  data={item}\n                  checked={selectedRows?.some(\n                    sel => rowKeyExtractor(sel) === rowKeyExtractor(item)\n                  )}\n                />\n              ))\n            ) : (\n              <tr>\n                <td colSpan={99}>{emptyPlaceholder}</td>\n              </tr>\n            )}\n          </TBody>\n        ) : (\n          <TBody>\n            {[...Array(rowsPerPage).keys()].map(idx => (\n              <Tr key={`skeleton-${idx}`}>\n                <Td colSpan={99} style={{ padding: 0 }}>\n                  {skeletonComponent ?? (\n                    <Skeleton height={55} radius=\"mili\" animation=\"wave\">\n                      <div style={{ width: '100%' }} />\n                    </Skeleton>\n                  )}\n                </Td>\n              </Tr>\n            ))}\n          </TBody>\n        )}\n\n        {(Number(rowsCount) > 0 || data.length > 0) && (\n          <Footer\n            exportFunction={exportFunction}\n            exportLabel={exportLabel}\n            rowsPerPageLabel={rowsPerPageLabel}\n            rowsPerPage={rowsPerPage}\n            onRowsPerPageChange={onRowsPerPageChange}\n            rowsPerPageOptions={rowsPerPageOptions}\n            rowsCount={rowsCount ?? data.length}\n            page={page}\n            onPageChange={onPageChange}\n            pagination={pagination}\n          />\n        )}\n      </Table>\n    </TableContainer>\n  );\n};\n\nexport default DataGrid;\n"],"file":"DataGrid.js"}
+{"version":3,"sources":["../../../../src/components/organisms/DataGrid/DataGrid.tsx"],"names":["DataGrid","headers","data","rowKeyExtractor","toolbarTitle","toolbarFooter","toolbarRightIcons","selectable","selectedRows","onSelectedRows","pagination","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","_rowsPerPageOptions","rowsPerPageLabel","_rowsPerPageLabel","exportLabel","exportFunction","rowsCount","page","onPageChange","loading","skeletonComponent","emptyPlaceholder","exportComponent","rest","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","length","map","item","some","sel","Array","keys","padding","width","Number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  Table,\n  TableToolbar,\n  TableContainer,\n  Tr,\n  Td,\n  TBody,\n} from '../../atoms/Table';\nimport { Header } from './Header';\nimport { Row } from './Row';\nimport { HeadersType } from './types';\nimport { Footer } from './Footer';\nimport { Skeleton } from '../../atoms/Skeleton';\nimport { getData, removeElement } from './utils';\n\nexport interface DataGridProps<Data>\n  extends React.HTMLAttributes<HTMLDivElement> {\n  headers: HeadersType<Data>[];\n  data: Data[];\n  /** Unique identifier for row data */\n  rowKeyExtractor: (data: Data) => string;\n  toolbarRightIcons?: React.ReactNode;\n  toolbarFooter?: React.ReactNode;\n  toolbarTitle: string;\n  /** Enable rows selection */\n  selectable?: boolean;\n  /** Selected items */\n  selectedRows?: Data[];\n  /** Selection handler */\n  onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;\n  /** Shows pagination controls */\n  pagination?: boolean;\n  /** Results per page */\n  rowsPerPage?: number;\n  /** Results per page handler */\n  onRowsPerPageChange?: (value: number) => void;\n  rowsPerPageOptions?: number[];\n  rowsPerPageLabel?: (value: number) => string;\n  /** Export button label */\n  exportLabel?: string;\n  exportFunction?: () => void;\n  /** Total data elements. Only specify this property if your data is server-side */\n  rowsCount?: number;\n  /** Current page. Always start in 0 */\n  page?: number;\n  /** Current page handler */\n  onPageChange?: (page: number) => void;\n  /** Loading state. The amount of skeleton rows is based on current rowsPerPage */\n  loading?: boolean;\n  /** Custom skeleton component for better visual */\n  skeletonComponent?: React.ReactNode;\n  /** Empty state placeholder */\n  emptyPlaceholder?: React.ReactNode;\n  /** Export component, use if default button with label is not ideal. This prop, not receive \"exportLabel\" and \"exportFunction\" */\n  exportComponent?: React.ReactNode;\n}\n\n/** Note: Consider memoizing functions for a better performance */\nconst DataGrid = <Data extends unknown>({\n  headers,\n  data,\n  rowKeyExtractor,\n  toolbarTitle,\n  toolbarFooter,\n  toolbarRightIcons,\n  selectable = false,\n  selectedRows = [],\n  onSelectedRows,\n  pagination = false,\n  rowsPerPage = 10,\n  onRowsPerPageChange,\n  rowsPerPageOptions: _rowsPerPageOptions,\n  rowsPerPageLabel: _rowsPerPageLabel,\n  exportLabel = 'Exportar',\n  exportFunction,\n  rowsCount,\n  page = 0,\n  onPageChange,\n  loading = false,\n  skeletonComponent,\n  emptyPlaceholder,\n  exportComponent,\n  ...rest\n}: DataGridProps<Data>): JSX.Element => {\n  if (selectable && (!selectedRows || !onSelectedRows)) {\n    throw new Error(\n      '[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)'\n    );\n  }\n\n  const rowsPerPageLabel = React.useCallback(\n    value =>\n      _rowsPerPageLabel\n        ? _rowsPerPageLabel(value)\n        : `Exibir por página: ${value} itens`,\n    [_rowsPerPageLabel]\n  );\n  const rowsPerPageOptions = React.useMemo(\n    () => _rowsPerPageOptions ?? [10, 25, 50],\n    [_rowsPerPageOptions]\n  );\n\n  const handleSelect = React.useCallback(\n    (current, checked) => {\n      if (checked) {\n        onSelectedRows?.(prevState => [...prevState, current]);\n        return;\n      }\n\n      onSelectedRows?.(prevState => {\n        const idx = prevState.findIndex(\n          el => rowKeyExtractor(el) === rowKeyExtractor(current)\n        );\n        return [...removeElement(prevState, idx)];\n      });\n    },\n    [onSelectedRows, rowKeyExtractor]\n  );\n\n  return (\n    <TableContainer {...rest}>\n      <TableToolbar\n        title={toolbarTitle}\n        rightIcons={toolbarRightIcons}\n        footer={toolbarFooter}\n      />\n      <Table>\n        <Header\n          selectable={selectable}\n          headers={headers}\n          data={data}\n          rowsCount={rowsCount ?? data.length}\n          rowKeyExtractor={rowKeyExtractor}\n          selectedRows={selectedRows}\n          onSelected={onSelectedRows}\n        />\n\n        {!loading ? (\n          <TBody>\n            {data.length > 0 ? (\n              getData(\n                data,\n                rowsCount,\n                page,\n                rowsPerPage,\n                pagination\n              ).map(item => (\n                <Row\n                  key={rowKeyExtractor(item)}\n                  rowKeyExtractor={rowKeyExtractor}\n                  handleSelect={handleSelect}\n                  selectable={selectable}\n                  headers={headers}\n                  data={item}\n                  checked={selectedRows?.some(\n                    sel => rowKeyExtractor(sel) === rowKeyExtractor(item)\n                  )}\n                />\n              ))\n            ) : (\n              <tr>\n                <td colSpan={99}>{emptyPlaceholder}</td>\n              </tr>\n            )}\n          </TBody>\n        ) : (\n          <TBody>\n            {[...Array(rowsPerPage).keys()].map(idx => (\n              <Tr key={`skeleton-${idx}`}>\n                <Td colSpan={99} style={{ padding: 0 }}>\n                  {skeletonComponent ?? (\n                    <Skeleton height={55} radius=\"mili\" animation=\"wave\">\n                      <div style={{ width: '100%' }} />\n                    </Skeleton>\n                  )}\n                </Td>\n              </Tr>\n            ))}\n          </TBody>\n        )}\n\n        {(Number(rowsCount) > 0 || data.length > 0) && (\n          <Footer\n            exportFunction={exportFunction}\n            exportLabel={exportLabel}\n            rowsPerPageLabel={rowsPerPageLabel}\n            rowsPerPage={rowsPerPage}\n            onRowsPerPageChange={onRowsPerPageChange}\n            rowsPerPageOptions={rowsPerPageOptions}\n            rowsCount={rowsCount ?? data.length}\n            page={page}\n            onPageChange={onPageChange}\n            pagination={pagination}\n            exportComponent={exportComponent}\n          />\n        )}\n      </Table>\n    </TableContainer>\n  );\n};\n\nexport default DataGrid;\n"],"file":"DataGrid.js"}

package/dist/components/organisms/DataGrid/Footer/Footer.d.ts

@@ -10,6 +10,7 @@ interface DataGridFooterProps {
     page: number;
     onPageChange?: (page: number) => void;
     pagination: boolean;
+    exportComponent?: React.ReactNode;
 }
 declare const _default: React.NamedExoticComponent<DataGridFooterProps>;
 export default _default;

package/dist/components/organisms/DataGrid/Footer/Footer.js

@@ -25,7 +25,8 @@ const Footer = ({
   rowsCount,
   page,
   onPageChange,
-  pagination
+  pagination,
+  exportComponent
 }) => {
   if (pagination && (!onPageChange || !onRowsPerPageChange)) {
     throw new Error('[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)');
@@ -66,6 +67,7 @@ const Footer = ({
     onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(0);
   }, [onPageChange, onRowsPerPageChange]);
 
+  const quantityRowsRendered = rowsPerPage > rowsCount ? rowsCount : rowsPerPage;
   return _react.default.createElement(_Table.TFoot, null, _react.default.createElement(_Table.Tr, null, _react.default.createElement(_styled.TdFooterStyled, {
     colSpan: 99
   }, _react.default.createElement(_styled.FooterContainer, null, _react.default.createElement(_styled.FooterContainerStart, null, pagination && _react.default.createElement(_styled.SelectContainer, null, _react.default.createElement(_reactWebKit.Select, {
@@ -76,13 +78,16 @@ const Footer = ({
     keyExtractor: value => String(value),
     labelExtractor: rowsPerPageLabel,
     anchor: "top"
-  })), exportFunction && _react.default.createElement(_styled.HoveredText, null, _react.default.createElement(_reactWebKit.Button, {
+  })), exportComponent && !exportFunction && _react.default.createElement(_react.default.Fragment, null, exportComponent), exportFunction && _react.default.createElement(_styled.HoveredText, null, _react.default.createElement(_reactWebKit.Button, {
     variant: "outlined",
     onPress: () => exportFunction()
   }, _react.default.createElement(_reactWebKit.Text, {
     fontColor: "orange",
     fontWeight: "bold"
-  }, exportLabel)))), pagination && _react.default.createElement(_styled.FooterContainerEnd, null, _react.default.createElement(_styled.NavigationButton, {
+  }, exportLabel)))), pagination && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styled.TextPagination, {
+    fontWeight: 'bold',
+    fontColor: 'medium'
+  }, `Exibindo ${quantityRowsRendered} de ${rowsCount} registros`), _react.default.createElement(_styled.FooterContainerEnd, null, _react.default.createElement(_styled.NavigationButton, {
     onPress: () => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page - 1),
     disabled: page === 0
   }, _react.default.createElement(_reactWebKit.Icon, {
@@ -104,7 +109,7 @@ const Footer = ({
     name: 'chevron-right',
     type: 'material-community',
     fontColor: 'light'
-  })))))));
+  }))))))));
 };
 
 var _default = _react.default.memo(Footer);

package/dist/components/organisms/DataGrid/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/Footer.tsx"],"names":["Footer","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","rowsPerPageLabel","exportFunction","exportLabel","rowsCount","page","onPageChange","pagination","Error","getPaginationSlice","totalPages","Math","ceil","start","end","handleRowsPerPage","React","useCallback","value","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} 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}\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}) => {\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  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              {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              <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(getPaginationSlice().start, getPaginationSlice().end)\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          </FooterContainer>\n        </TdFooterStyled>\n      </Tr>\n    </TFoot>\n  );\n};\n\nexport default React.memo(Footer);\n"],"file":"Footer.js"}
+{"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":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AA4BA,MAAMA,MAAqC,GAAG,CAAC;AAC7CC,EAAAA,WAD6C;AAE7CC,EAAAA,mBAF6C;AAG7CC,EAAAA,kBAH6C;AAI7CC,EAAAA,gBAJ6C;AAK7CC,EAAAA,cAL6C;AAM7CC,EAAAA,WAN6C;AAO7CC,EAAAA,SAP6C;AAQ7CC,EAAAA,IAR6C;AAS7CC,EAAAA,YAT6C;AAU7CC,EAAAA,UAV6C;AAW7CC,EAAAA;AAX6C,CAAD,KAYxC;AACJ,MAAID,UAAU,KAAK,CAACD,YAAD,IAAiB,CAACP,mBAAvB,CAAd,EAA2D;AACzD,UAAM,IAAIU,KAAJ,CACJ,uFADI,CAAN;AAGD;;AAED,QAAMC,kBAAkB,GAAG,MAAsC;AAC/D,UAAMC,UAAU,GAAGC,IAAI,CAACC,IAAL,CAAUT,SAAS,GAAGN,WAAtB,CAAnB;;AACA,QAAIa,UAAU,GAAG,CAAjB,EAAoB;AAClB,aAAO;AAAEG,QAAAA,KAAK,EAAE,CAAT;AAAYC,QAAAA,GAAG,EAAEJ;AAAjB,OAAP;AACD;;AACD,QAAIN,IAAI,KAAK,CAAb,EAAgB;AACd,aAAO;AAAES,QAAAA,KAAK,EAAET,IAAT;AAAeU,QAAAA,GAAG,EAAEV,IAAI,GAAG;AAA3B,OAAP;AACD;;AACD,QAAIA,IAAI,KAAKM,UAAU,GAAG,CAA1B,EAA6B;AAC3B,aAAO;AAAEG,QAAAA,KAAK,EAAET,IAAI,GAAG,CAAhB;AAAmBU,QAAAA,GAAG,EAAEV,IAAI,GAAG;AAA/B,OAAP;AACD;;AACD,WAAO;AAAES,MAAAA,KAAK,EAAET,IAAI,GAAG,CAAhB;AAAmBU,MAAAA,GAAG,EAAEV,IAAI,GAAG;AAA/B,KAAP;AACD,GAZD;;AAcA,QAAMW,iBAAiB,GAAGC,eAAMC,WAAN,CACxBC,KAAK,IAAI;AACPpB,IAAAA,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAGoB,KAAH,CAAnB;AACAb,IAAAA,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAG,CAAH,CAAZ;AACD,GAJuB,EAKxB,CAACA,YAAD,EAAeP,mBAAf,CALwB,CAA1B;;AAQA,QAAMqB,oBAAoB,GACxBtB,WAAW,GAAGM,SAAd,GAA0BA,SAA1B,GAAsCN,WADxC;AAGA,SACE,6BAAC,YAAD,QACE,6BAAC,SAAD,QACE,6BAAC,sBAAD;AAAgB,IAAA,OAAO,EAAE;AAAzB,KACE,6BAAC,uBAAD,QACE,6BAAC,4BAAD,QACGS,UAAU,IACT,6BAAC,uBAAD,QACE,6BAAC,mBAAD;AACE,IAAA,OAAO,EAAEP,kBADX;AAEE,IAAA,QAAQ,EAAEgB,iBAFZ;AAGE,IAAA,KAAK,EAAElB,WAHT;AAIE,IAAA,IAAI,EAAE,QAJR;AAKE,IAAA,YAAY,EAAEqB,KAAK,IAAIE,MAAM,CAACF,KAAD,CAL/B;AAME,IAAA,cAAc,EAAElB,gBANlB;AAOE,IAAA,MAAM,EAAC;AAPT,IADF,CAFJ,EAcGO,eAAe,IAAI,CAACN,cAApB,IAAsC,4DAAGM,eAAH,CAdzC,EAeGN,cAAc,IACb,6BAAC,mBAAD,QACE,6BAAC,mBAAD;AAAQ,IAAA,OAAO,EAAC,UAAhB;AAA2B,IAAA,OAAO,EAAE,MAAMA,cAAc;AAAxD,KACE,6BAAC,iBAAD;AAAM,IAAA,SAAS,EAAC,QAAhB;AAAyB,IAAA,UAAU,EAAC;AAApC,KACGC,WADH,CADF,CADF,CAhBJ,CADF,EA0BGI,UAAU,IACT,4DACE,6BAAC,sBAAD;AACE,IAAA,UAAU,EAAE,MADd;AAEE,IAAA,SAAS,EAAE;AAFb,KAGG,YAAWa,oBAAqB,OAAMhB,SAAU,YAHnD,CADF,EAKE,6BAAC,0BAAD,QACE,6BAAC,wBAAD;AACE,IAAA,OAAO,EAAE,MAAME,YAAN,aAAMA,YAAN,uBAAMA,YAAY,CAAGD,IAAI,GAAG,CAAV,CAD7B;AAEE,IAAA,QAAQ,EAAEA,IAAI,KAAK;AAFrB,KAIE,6BAAC,iBAAD;AACE,IAAA,IAAI,EAAE,cADR;AAEE,IAAA,IAAI,EAAE,oBAFR;AAGE,IAAA,SAAS,EAAE;AAHb,IAJF,CADF,EAWE,6BAAC,sBAAD,QACG,CAAC,GAAGiB,KAAK,CAACV,IAAI,CAACC,IAAL,CAAUT,SAAS,GAAGN,WAAtB,CAAD,CAAL,CAA0CyB,IAA1C,EAAJ,EACEC,KADF,CAEGd,kBAAkB,GAAGI,KAFxB,EAGGJ,kBAAkB,GAAGK,GAHxB,EAKEU,GALF,CAKMN,KAAK,IACR,6BAAC,mBAAD;AAAa,IAAA,GAAG,EAAG,QAAOA,KAAM;AAAhC,KACE,6BAAC,kBAAD;AACE,IAAA,OAAO,EAAEd,IAAI,KAAKc,KAAT,GAAiB,UAAjB,GAA8B,MADzC;AAEE,IAAA,OAAO,EAAE,MAAMb,YAAN,aAAMA,YAAN,uBAAMA,YAAY,CAAGa,KAAH;AAF7B,KAIE,6BAAC,iBAAD;AAAM,IAAA,SAAS,EAAC,QAAhB;AAAyB,IAAA,UAAU,EAAC;AAApC,KACGA,KAAK,GAAG,CADX,CAJF,CADF,CANH,CADH,CAXF,EA8BE,6BAAC,wBAAD;AACE,IAAA,OAAO,EAAE,MAAMb,YAAN,aAAMA,YAAN,uBAAMA,YAAY,CAAGD,IAAI,GAAG,CAAV,CAD7B;AAEE,IAAA,QAAQ,EAAEA,IAAI,KAAKO,IAAI,CAACC,IAAL,CAAUT,SAAS,GAAGN,WAAtB,IAAqC;AAF1D,KAIE,6BAAC,iBAAD;AACE,IAAA,IAAI,EAAE,eADR;AAEE,IAAA,IAAI,EAAE,oBAFR;AAGE,IAAA,SAAS,EAAE;AAHb,IAJF,CA9BF,CALF,CA3BJ,CADF,CADF,CADF,CADF;AAoFD,CAhID;;eAkIemB,eAAMS,IAAN,CAAW7B,MAAX,C","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"}

package/dist/components/organisms/DataGrid/Footer/styled.d.ts

@@ -33,3 +33,6 @@ export declare const NavigationButton: import("@emotion/native").StyledComponent
 export declare const PageButton: import("@emotion/native").StyledComponent<any, {}, {}>;
 export declare const PagesContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const HoveredText: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TextPagination: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<any> | undefined;
+}>;

package/dist/components/organisms/DataGrid/Footer/styled.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HoveredText = exports.PagesContainer = exports.PageButton = exports.NavigationButton = exports.SelectContainer = exports.FooterContainerEnd = exports.FooterContainerStart = exports.FooterContainer = exports.FlexContainer = exports.TdFooterStyled = void 0;
+exports.TextPagination = exports.HoveredText = exports.PagesContainer = exports.PageButton = exports.NavigationButton = exports.SelectContainer = exports.FooterContainerEnd = exports.FooterContainerStart = exports.FooterContainer = exports.FlexContainer = exports.TdFooterStyled = void 0;
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _native = _interopRequireDefault(require("@emotion/native"));
 
+var _reactWebKit = require("@tecsinapse/react-web-kit");
+
 var _Table = require("../../../atoms/Table");
 
 var _Button = require("../../../atoms/Button");
@@ -90,4 +92,14 @@ const HoveredText = (0, _styled.default)('div')`
   }
 `;
 exports.HoveredText = HoveredText;
+const TextPagination = (0, _native.default)(_reactWebKit.Text)`
+  padding-right: ${({
+  theme
+}) => theme.spacing.deca};
+  padding-left: ${({
+  theme
+}) => theme.spacing.deca};
+
+`;
+exports.TextPagination = TextPagination;
 //# sourceMappingURL=styled.js.map

package/dist/components/organisms/DataGrid/Footer/styled.js.map

@@ -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"}
+{"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

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.18.2",
+  "version": "1.18.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -17,7 +17,7 @@
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@tecsinapse/react-core": "^1.17.2",
+    "@tecsinapse/react-core": "^1.17.3",
     "@types/react-native": "^0.64.4",
     "react-native-vector-icons": "^9.2.0",
     "react-transition-group": "^4.4.2"
@@ -34,7 +34,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-native-web": "^0.17.1"
+    "react-native-web": "^0.17.1 || ^0.18.0"
   },
-  "gitHead": "077c192810529eb555031e7e35ef90477f8f830d"
+  "gitHead": "14c13e63e11837acd58c8076570979669aec154c"
 }

package/src/components/organisms/DataGrid/DataGrid.tsx

@@ -52,6 +52,8 @@ export interface DataGridProps<Data>
   skeletonComponent?: React.ReactNode;
   /** Empty state placeholder */
   emptyPlaceholder?: React.ReactNode;
+  /** Export component, use if default button with label is not ideal. This prop, not receive "exportLabel" and "exportFunction" */
+  exportComponent?: React.ReactNode;
 }
 
 /** Note: Consider memoizing functions for a better performance */
@@ -78,6 +80,7 @@ const DataGrid = <Data extends unknown>({
   loading = false,
   skeletonComponent,
   emptyPlaceholder,
+  exportComponent,
   ...rest
 }: DataGridProps<Data>): JSX.Element => {
   if (selectable && (!selectedRows || !onSelectedRows)) {
@@ -189,6 +192,7 @@ const DataGrid = <Data extends unknown>({
             page={page}
             onPageChange={onPageChange}
             pagination={pagination}
+            exportComponent={exportComponent}
           />
         )}
       </Table>

package/src/components/organisms/DataGrid/Footer/Footer.tsx

@@ -11,6 +11,7 @@ import {
   PagesContainer,
   SelectContainer,
   TdFooterStyled,
+  TextPagination,
 } from './styled';
 
 interface DataGridFooterProps {
@@ -25,6 +26,7 @@ interface DataGridFooterProps {
   page: number;
   onPageChange?: (page: number) => void;
   pagination: boolean;
+  exportComponent?: React.ReactNode;
 }
 
 const Footer: React.FC<DataGridFooterProps> = ({
@@ -38,6 +40,7 @@ const Footer: React.FC<DataGridFooterProps> = ({
   page,
   onPageChange,
   pagination,
+  exportComponent,
 }) => {
   if (pagination && (!onPageChange || !onRowsPerPageChange)) {
     throw new Error(
@@ -67,6 +70,9 @@ const Footer: React.FC<DataGridFooterProps> = ({
     [onPageChange, onRowsPerPageChange]
   );
 
+  const quantityRowsRendered =
+    rowsPerPage > rowsCount ? rowsCount : rowsPerPage;
+
   return (
     <TFoot>
       <Tr>
@@ -86,6 +92,7 @@ const Footer: React.FC<DataGridFooterProps> = ({
                   />
                 </SelectContainer>
               )}
+              {exportComponent && !exportFunction && <>{exportComponent}</>}
               {exportFunction && (
                 <HoveredText>
                   <Button variant="outlined" onPress={() => exportFunction()}>
@@ -97,44 +104,53 @@ const Footer: React.FC<DataGridFooterProps> = ({
               )}
             </FooterContainerStart>
             {pagination && (
-              <FooterContainerEnd>
-                <NavigationButton
-                  onPress={() => onPageChange?.(page - 1)}
-                  disabled={page === 0}
-                >
-                  <Icon
-                    name={'chevron-left'}
-                    type={'material-community'}
-                    fontColor={'light'}
-                  />
-                </NavigationButton>
-                <PagesContainer>
-                  {[...Array(Math.ceil(rowsCount / rowsPerPage)).keys()]
-                    .slice(getPaginationSlice().start, getPaginationSlice().end)
-                    .map(value => (
-                      <HoveredText key={`page-${value}`}>
-                        <PageButton
-                          variant={page === value ? 'outlined' : 'text'}
-                          onPress={() => onPageChange?.(value)}
-                        >
-                          <Text fontColor="medium" fontWeight="bold">
-                            {value + 1}
-                          </Text>
-                        </PageButton>
-                      </HoveredText>
-                    ))}
-                </PagesContainer>
-                <NavigationButton
-                  onPress={() => onPageChange?.(page + 1)}
-                  disabled={page === Math.ceil(rowsCount / rowsPerPage) - 1}
-                >
-                  <Icon
-                    name={'chevron-right'}
-                    type={'material-community'}
-                    fontColor={'light'}
-                  />
-                </NavigationButton>
-              </FooterContainerEnd>
+              <>
+                <TextPagination
+                  fontWeight={'bold'}
+                  fontColor={'medium'}
+                >{`Exibindo ${quantityRowsRendered} de ${rowsCount} registros`}</TextPagination>
+                <FooterContainerEnd>
+                  <NavigationButton
+                    onPress={() => onPageChange?.(page - 1)}
+                    disabled={page === 0}
+                  >
+                    <Icon
+                      name={'chevron-left'}
+                      type={'material-community'}
+                      fontColor={'light'}
+                    />
+                  </NavigationButton>
+                  <PagesContainer>
+                    {[...Array(Math.ceil(rowsCount / rowsPerPage)).keys()]
+                      .slice(
+                        getPaginationSlice().start,
+                        getPaginationSlice().end
+                      )
+                      .map(value => (
+                        <HoveredText key={`page-${value}`}>
+                          <PageButton
+                            variant={page === value ? 'outlined' : 'text'}
+                            onPress={() => onPageChange?.(value)}
+                          >
+                            <Text fontColor="medium" fontWeight="bold">
+                              {value + 1}
+                            </Text>
+                          </PageButton>
+                        </HoveredText>
+                      ))}
+                  </PagesContainer>
+                  <NavigationButton
+                    onPress={() => onPageChange?.(page + 1)}
+                    disabled={page === Math.ceil(rowsCount / rowsPerPage) - 1}
+                  >
+                    <Icon
+                      name={'chevron-right'}
+                      type={'material-community'}
+                      fontColor={'light'}
+                    />
+                  </NavigationButton>
+                </FooterContainerEnd>
+              </>
             )}
           </FooterContainer>
         </TdFooterStyled>

package/src/components/organisms/DataGrid/Footer/styled.ts

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { default as nativeStyled } from '@emotion/native';
 import { StyleProps } from '@tecsinapse/react-core';
+import { Text } from '@tecsinapse/react-web-kit';
 import { Td } from '../../../atoms/Table';
 import { Button } from '../../../atoms/Button';
 
@@ -59,3 +60,9 @@ export const HoveredText = styled('div')<Partial<StyleProps>>`
     color: ${({ theme }) => theme.font.color.light};
   }
 `;
+
+export const TextPagination = nativeStyled(Text)<Partial<StyleProps>>`
+  padding-right: ${({ theme }) => theme.spacing.deca};
+  padding-left: ${({ theme }) => theme.spacing.deca};
+
+`;