From fae35dae1c071114ee7b9dd6825b4cc4806f3f3d Mon Sep 17 00:00:00 2001 From: MariannaMilovanova Date: Wed, 11 Jul 2018 11:55:04 +0300 Subject: [PATCH 1/6] feature: add new bool preperty withClasses that add classes to rows --- README.md | 1 + src/index.js | 17 ++++++++++++++--- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 0b411a1..8392ea8 100644 --- a/README.md +++ b/README.md @@ -126,6 +126,7 @@ Properties marked with an asterisk (`*`) are required. | | `object` | CSS styles to apply to the parent table tag. | | | `function` | Function returning one of the above. The function receives a state object with boolean property narrow indicating if the current presentation is narrow or wide. | | `initialNarrow` | `bool` | Initially render the table in narrow mode when rendering serverside. Set to true when you expect the browser to be narrow to prevent rerendering client side. | +| `withClasses` | `bool` | Add classNames to each rows and headers cells by using keyGetter function. | ## name diff --git a/src/index.js b/src/index.js index 0e05d43..261f776 100644 --- a/src/index.js +++ b/src/index.js @@ -26,6 +26,14 @@ const getClassNameOrStyleProps = (classNameOrStyle, componentState) => { return {}; }; +function headerClass(withClasses, key) { + return withClasses ? { className: `th-${key}` } : {}; +} + +function rowClass(withClasses, key) { + return withClasses ? { className: `tr-${key}` } : {}; +} + const inBrowser = typeof window !== 'undefined'; const matchMedia = inBrowser && window.matchMedia !== null; @@ -44,10 +52,12 @@ class HyperResponsiveTable extends Component { PropTypes.func, ]), initialNarrow: PropTypes.bool, + withClasses: PropTypes.bool }; static defaultProps = { initialNarrow: false, + withClasses: false, tableStyling: null, }; @@ -113,6 +123,7 @@ class HyperResponsiveTable extends Component { headers, rows, keyGetter, + withClasses } = this.props; const { narrow } = this.state; @@ -123,7 +134,7 @@ class HyperResponsiveTable extends Component { {rows.map(row => ( - {dataKeys.map(key => )} + {dataKeys.map(key => )} )) }
{headers[key]}{row[key]}
{headers[key]}{row[key]}
); @@ -133,12 +144,12 @@ class HyperResponsiveTable extends Component { - { dataKeys.map(key => ) } + {dataKeys.map(key => )} {rows.map(row => ( - + {dataKeys.map(key => )} ))} From d2ad14f9995f7647ab042387d0ed5613ca02c97a Mon Sep 17 00:00:00 2001 From: MariannaMilovanova Date: Wed, 11 Jul 2018 12:25:53 +0300 Subject: [PATCH 2/6] test the property withClasses --- demo/src/index.js | 1 + tests/index-test.js | 26 +++++++++++++++++++++++++- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/demo/src/index.js b/demo/src/index.js index 5ed28e4..100e2a2 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -53,6 +53,7 @@ const Demo = () => ( rows={rows} keyGetter={keyGetter} breakpoint={578} + withClasses tableStyling={({ narrow }) => (narrow ? 'narrowtable' : 'widetable')} /> ); diff --git a/tests/index-test.js b/tests/index-test.js index 79e31b6..7dfb666 100644 --- a/tests/index-test.js +++ b/tests/index-test.js @@ -24,6 +24,8 @@ const rows = [ ]; const keyGetter = r => r.a; +const withClasses = true; + describe('Component', () => { let node; @@ -42,7 +44,7 @@ describe('Component', () => { headers, rows, keyGetter, - breakpoint, + breakpoint }; render(, node, () => { @@ -169,4 +171,26 @@ describe('Component', () => { expect(table.getAttribute('style')).toEqual(null); }); }); + + it('add classes to headers and rows if pass the property `withClasses`', () => { + const breakpoint = 0; + const tableStyling = 1234; + const props = { + headers, + rows, + keyGetter, + breakpoint, + tableStyling, + withClasses + }; + + render(, node, () => { + const th = node.querySelectorAll('th'); + const tbody = node.querySelectorAll('tbody'); + const tr = tbody[0].querySelectorAll('tr'); + + expect(th[0].getAttribute('class')).toEqual('th-a'); + expect(tr[0].getAttribute('class')).toEqual('tr-A 1'); + }); + }); }); From 0bd057969cbff43f35eece4b630469851fdda5f2 Mon Sep 17 00:00:00 2001 From: MariannaMilovanova Date: Wed, 11 Jul 2018 12:41:37 +0300 Subject: [PATCH 3/6] fix spaces and commas --- src/index.js | 10 +++++----- tests/index-test.js | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index 261f776..bec7965 100644 --- a/src/index.js +++ b/src/index.js @@ -28,11 +28,11 @@ const getClassNameOrStyleProps = (classNameOrStyle, componentState) => { function headerClass(withClasses, key) { return withClasses ? { className: `th-${key}` } : {}; -} +}; function rowClass(withClasses, key) { return withClasses ? { className: `tr-${key}` } : {}; -} +}; const inBrowser = typeof window !== 'undefined'; const matchMedia = inBrowser && window.matchMedia !== null; @@ -52,7 +52,7 @@ class HyperResponsiveTable extends Component { PropTypes.func, ]), initialNarrow: PropTypes.bool, - withClasses: PropTypes.bool + withClasses: PropTypes.bool, }; static defaultProps = { @@ -123,7 +123,7 @@ class HyperResponsiveTable extends Component { headers, rows, keyGetter, - withClasses + withClasses, } = this.props; const { narrow } = this.state; @@ -149,7 +149,7 @@ class HyperResponsiveTable extends Component { {rows.map(row => ( - + {dataKeys.map(key => )} ))} diff --git a/tests/index-test.js b/tests/index-test.js index 7dfb666..cf44141 100644 --- a/tests/index-test.js +++ b/tests/index-test.js @@ -44,7 +44,7 @@ describe('Component', () => { headers, rows, keyGetter, - breakpoint + breakpoint, }; render(, node, () => { @@ -181,7 +181,7 @@ describe('Component', () => { keyGetter, breakpoint, tableStyling, - withClasses + withClasses, }; render(, node, () => { From 3d6806ae8117d766f1918dd429bf1910dd614949 Mon Sep 17 00:00:00 2001 From: MariannaMilovanova Date: Wed, 11 Jul 2018 12:46:11 +0300 Subject: [PATCH 4/6] kill semicolons --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index bec7965..5dca1ed 100644 --- a/src/index.js +++ b/src/index.js @@ -28,11 +28,11 @@ const getClassNameOrStyleProps = (classNameOrStyle, componentState) => { function headerClass(withClasses, key) { return withClasses ? { className: `th-${key}` } : {}; -}; +} function rowClass(withClasses, key) { return withClasses ? { className: `tr-${key}` } : {}; -}; +} const inBrowser = typeof window !== 'undefined'; const matchMedia = inBrowser && window.matchMedia !== null; From 6a9c3e85e1f5b14e3f004a941212976b3be047f7 Mon Sep 17 00:00:00 2001 From: MariannaMilovanova Date: Mon, 13 Aug 2018 13:38:37 +0300 Subject: [PATCH 5/6] apply comments --- README.md | 2 +- src/index.js | 4 ++-- tests/index-test.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 8392ea8..e48ad33 100644 --- a/README.md +++ b/README.md @@ -126,7 +126,7 @@ Properties marked with an asterisk (`*`) are required. | | `object` | CSS styles to apply to the parent table tag. | | | `function` | Function returning one of the above. The function receives a state object with boolean property narrow indicating if the current presentation is narrow or wide. | | `initialNarrow` | `bool` | Initially render the table in narrow mode when rendering serverside. Set to true when you expect the browser to be narrow to prevent rerendering client side. | -| `withClasses` | `bool` | Add classNames to each rows and headers cells by using keyGetter function. | +| `withClasses` | `bool` | Add unique class names to each row and header cell, respectively row-KEY and header-KEY | ## name diff --git a/src/index.js b/src/index.js index 5dca1ed..35f880f 100644 --- a/src/index.js +++ b/src/index.js @@ -27,11 +27,11 @@ const getClassNameOrStyleProps = (classNameOrStyle, componentState) => { }; function headerClass(withClasses, key) { - return withClasses ? { className: `th-${key}` } : {}; + return withClasses ? { className: `header-${key}` } : {}; } function rowClass(withClasses, key) { - return withClasses ? { className: `tr-${key}` } : {}; + return withClasses ? { className: `row-${key}` } : {}; } const inBrowser = typeof window !== 'undefined'; diff --git a/tests/index-test.js b/tests/index-test.js index cf44141..4777220 100644 --- a/tests/index-test.js +++ b/tests/index-test.js @@ -24,8 +24,6 @@ const rows = [ ]; const keyGetter = r => r.a; -const withClasses = true; - describe('Component', () => { let node; @@ -175,6 +173,8 @@ describe('Component', () => { it('add classes to headers and rows if pass the property `withClasses`', () => { const breakpoint = 0; const tableStyling = 1234; + const withClasses = true; + const props = { headers, rows, From f89acc30dcb74c6275981d024ce612cb3e707afb Mon Sep 17 00:00:00 2001 From: MariannaMilovanova Date: Mon, 13 Aug 2018 13:45:14 +0300 Subject: [PATCH 6/6] fix tests --- tests/index-test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/index-test.js b/tests/index-test.js index 4777220..86df813 100644 --- a/tests/index-test.js +++ b/tests/index-test.js @@ -189,8 +189,8 @@ describe('Component', () => { const tbody = node.querySelectorAll('tbody'); const tr = tbody[0].querySelectorAll('tr'); - expect(th[0].getAttribute('class')).toEqual('th-a'); - expect(tr[0].getAttribute('class')).toEqual('tr-A 1'); + expect(th[0].getAttribute('class')).toEqual('header-a'); + expect(tr[0].getAttribute('class')).toEqual('row-A 1'); }); }); });
{headers[key]}{headers[key]}
{row[key]}
{row[key]}