Repository: laboratoriobridge/bold
Pull request #481 (2019-10-03 17:03:50)

display integer value in table footer
The table footer show only abbreved form 7,2k.

Now was added a prop abbrev to control when show abbreved form (7,2k results) or full form (7,200 results)


Patch:
diff --git a/src/components/Table/TableFooter/TableFooter.stories.tsx b/src/components/Table/TableFooter/TableFooter.stories.tsx
index 44e90b79d..0d78836cc 100644
--- a/src/components/Table/TableFooter/TableFooter.stories.tsx
+++ b/src/components/Table/TableFooter/TableFooter.stories.tsx
@@ -10,7 +10,7 @@ storiesOf('Components|Table', module).add('TableFooter', () => (
     page={number('page', 0)}
     pageSize={number('pageSize', 10)}
     totalPages={number('totalPages', 10)}
-    totalElements={number('totalElements', 100)}
+    totalElements={number('totalElements', 1000)}
     onPageChange={action('page-changed')}
     onSizeChange={action('size-changed')}
   />
diff --git a/src/components/Table/TableFooter/TableFooter.tsx b/src/components/Table/TableFooter/TableFooter.tsx
index dcb7c6615..2f78a2838 100644
--- a/src/components/Table/TableFooter/TableFooter.tsx
+++ b/src/components/Table/TableFooter/TableFooter.tsx
@@ -12,6 +12,7 @@ export interface TableFooterProps {
   page: number
   totalPages: number
   totalElements: number
+  abbrev?: boolean
   pageSize: number
   style?: ExternalStyles
   sizeOptions?: number[]
@@ -20,7 +21,7 @@ export interface TableFooterProps {
 }
 
 export function TableFooter(props: TableFooterProps) {
-  const { style, page, totalPages, totalElements, pageSize, sizeOptions, onSizeChange, onPageChange } = props
+  const { style, page, totalPages, totalElements, abbrev, pageSize, sizeOptions, onSizeChange, onPageChange } = props
   const { classes, css } = useStyles(createStyles)
 
   const showPagination = () => {
@@ -30,7 +31,11 @@ export function TableFooter(props: TableFooterProps) {
   return (
     <div className={css(classes.footer, style)}>
       <span className={classes.results}>
-        <Number value={totalElements} suffix={' ' + (totalElements === 1 ? 'resultado' : 'resultados')} abbrev />
+        <Number
+          value={totalElements}
+          suffix={' ' + (totalElements === 1 ? 'resultado' : 'resultados')}
+          abbrev={abbrev}
+        />
       </span>
       {showPagination() && (
         <div className={classes.pagination}>


Test patch:
diff --git a/src/components/Table/PagedTable/__snapshots__/PagedTable.test.tsx.snap b/src/components/Table/PagedTable/__snapshots__/PagedTable.test.tsx.snap
index 68997bcee..f024c14c3 100644
--- a/src/components/Table/PagedTable/__snapshots__/PagedTable.test.tsx.snap
+++ b/src/components/Table/PagedTable/__snapshots__/PagedTable.test.tsx.snap
@@ -211,9 +211,7 @@ exports[`should render correctly 1`] = `
       <span
         class="emotion-27"
       >
-        <span
-          title="3"
-        >
+        <span>
           3 resultados
         </span>
       </span>
diff --git a/src/components/Table/TableFooter/TableFooter.test.tsx b/src/components/Table/TableFooter/TableFooter.test.tsx
index 1321026f4..b48649d5f 100644
--- a/src/components/Table/TableFooter/TableFooter.test.tsx
+++ b/src/components/Table/TableFooter/TableFooter.test.tsx
@@ -41,3 +41,13 @@ it('does not show pagination options if totalElements is less than pageSize and
   )
   expect(container3.querySelector('input')).toBeTruthy()
 })
+
+it('change default state when abbrev equals true', () => {
+  const { container } = render(createComponent({ totalElements: 1000, abbrev: true }))
+  expect(container.querySelector('[title="1,000"]').textContent).toEqual('1k resultados')
+})
+
+it('default value of prop abbrev equals false', () => {
+  const { container } = render(createComponent({ totalElements: 1000 }))
+  expect(container.querySelector('div > span').textContent).toEqual('1,000 resultados')
+})
diff --git a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
index 74c49d6c1..b3ce3954c 100644
--- a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
+++ b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
@@ -329,9 +329,7 @@ exports[`renders correctly 1`] = `
     <span
       class="emotion-0"
     >
-      <span
-        title="100"
-      >
+      <span>
         100 resultados
       </span>
     </span>
@@ -473,9 +471,7 @@ exports[`renders without pagination 1`] = `
     <span
       class="emotion-0"
     >
-      <span
-        title="10"
-      >
+      <span>
         10 resultados
       </span>
     </span>