Render data- and aria- props (#227)

react-component · Oct 15, 2018 · fe68e44 · fe68e44
1 parent 78783cf
commit fe68e44
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 1 deletion.
diff --git a/src/Table.js b/src/Table.js
@@ -6,7 +6,7 @@ import { Provider, create } from 'mini-store';
 import merge from 'lodash/merge';
 import classes from 'component-classes';
 import { polyfill } from 'react-lifecycles-compat';
-import { debounce, warningOnce } from './utils';
+import { debounce, warningOnce, getDataAndAriaProps } from './utils';
 import ColumnManager from './ColumnManager';
 import HeadTable from './HeadTable';
 import BodyTable from './BodyTable';
@@ -502,6 +502,7 @@ class Table extends React.Component {
     }
     const hasLeftFixed = this.columnManager.isAnyColumnsLeftFixed();
     const hasRightFixed = this.columnManager.isAnyColumnsRightFixed();
+    const dataAndAriaProps = getDataAndAriaProps(props);
 
     return (
       <Provider store={this.store}>
@@ -514,6 +515,7 @@ class Table extends React.Component {
                 className={className}
                 style={props.style}
                 id={props.id}
+                {...dataAndAriaProps}
               >
                 {this.renderTitle()}
                 <div className={`${prefixCls}-content`}>

diff --git a/src/utils.js b/src/utils.js
@@ -79,3 +79,16 @@ export function remove(array, item) {
   const last = array.slice(index + 1, array.length);
   return front.concat(last);
 }
+
+/**
+ * Returns only data- and aria- key/value pairs
+ * @param {object} props
+ */
+export function getDataAndAriaProps(props) {
+  return Object.keys(props).reduce((memo, key) => {
+    if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-') {
+      memo[key] = props[key];
+    }
+    return memo;
+  }, {});
+}
diff --git a/tests/Table.spec.js b/tests/Table.spec.js
@@ -65,6 +65,16 @@ describe('Table', () => {
     expect(wrapper.find(`div#${testId}`)).toHaveLength(1);
   });
 
+  it('renders data- attributes', () => {
+    const wrapper = render(createTable({ 'data-test': 'names-table' }));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders aria- attributes', () => {
+    const wrapper = render(createTable({ 'aria-label': 'names-table-aria' }));
+    expect(wrapper).toMatchSnapshot();
+  });
+
   xit('sets row refs', () => {
     const wrapper = mount(createTable({ rowRef: record => record.key }));
     expect(wrapper.instance().refs.key0).toBe(

diff --git a/tests/__snapshots__/Table.spec.js.snap b/tests/__snapshots__/Table.spec.js.snap
@@ -553,6 +553,72 @@ exports[`Table dataIndex render text by path 1`] = `
 </div>
 `;
 
+exports[`Table renders aria- attributes 1`] = `
+<div
+  aria-label="names-table-aria"
+  class="rc-table rc-table-scroll-position-left"
+>
+  <div
+    class="rc-table-content"
+  >
+    <div
+      class="rc-table-body"
+    >
+      <table
+        class=""
+      >
+        <colgroup>
+          <col />
+        </colgroup>
+        <thead
+          class="rc-table-thead"
+        >
+          <tr>
+            <th
+              class=""
+            >
+              Name
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="rc-table-tbody"
+        >
+          <tr
+            class="rc-table-row  rc-table-row-level-0"
+            data-row-key="key0"
+          >
+            <td
+              class=""
+            >
+              <span
+                class="rc-table-row-indent indent-level-0"
+                style="padding-left:0px"
+              />
+              Lucy
+            </td>
+          </tr>
+          <tr
+            class="rc-table-row  rc-table-row-level-0"
+            data-row-key="key1"
+          >
+            <td
+              class=""
+            >
+              <span
+                class="rc-table-row-indent indent-level-0"
+                style="padding-left:0px"
+              />
+              Jack
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Table renders colSpan correctly 1`] = `
 <div
   class="rc-table rc-table-scroll-position-left"
@@ -991,6 +1057,72 @@ exports[`Table renders custom cell correctly 1`] = `
 </div>
 `;
 
+exports[`Table renders data- attributes 1`] = `
+<div
+  class="rc-table rc-table-scroll-position-left"
+  data-test="names-table"
+>
+  <div
+    class="rc-table-content"
+  >
+    <div
+      class="rc-table-body"
+    >
+      <table
+        class=""
+      >
+        <colgroup>
+          <col />
+        </colgroup>
+        <thead
+          class="rc-table-thead"
+        >
+          <tr>
+            <th
+              class=""
+            >
+              Name
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="rc-table-tbody"
+        >
+          <tr
+            class="rc-table-row  rc-table-row-level-0"
+            data-row-key="key0"
+          >
+            <td
+              class=""
+            >
+              <span
+                class="rc-table-row-indent indent-level-0"
+                style="padding-left:0px"
+              />
+              Lucy
+            </td>
+          </tr>
+          <tr
+            class="rc-table-row  rc-table-row-level-0"
+            data-row-key="key1"
+          >
+            <td
+              class=""
+            >
+              <span
+                class="rc-table-row-indent indent-level-0"
+                style="padding-left:0px"
+              />
+              Jack
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Table renders empty text correctly 1`] = `
 <div
   class="rc-table rc-table-scroll-position-left"

diff --git a/tests/utils.spec.js b/tests/utils.spec.js
@@ -0,0 +1,18 @@
+import { getDataAndAriaProps } from '../src/utils';
+
+describe('utils', () => {
+  describe('getDataAndAria', () => {
+    it('should return only data- and aria- properties', () => {
+      const props = {
+        'data-test': 'name',
+        'aria-label': 'name',
+        dataSource: '/api',
+        ariaLabel: 'some-label',
+      };
+      expect(getDataAndAriaProps(props)).toEqual({
+        'data-test': 'name',
+        'aria-label': 'name',
+      });
+    });
+  });
+});