[added] additional data attributes.

reactjs · Jul 4, 2018 · c3e06ab · c3e06ab
1 parent e5a80d6
commit c3e06ab
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -112,6 +112,12 @@ import ReactModal from 'react-modal';
     labelledby: "heading",
     describedby: "full_description"
   }}
+  /*
+    Additional data attributes (optional).
+  */
+  data={{
+    background: "green"
+  }}
   /*
     Overlay ref callback.
   */

diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
@@ -393,6 +393,17 @@ export default () => {
     unmountModal();
   });
 
+  it("additional data attributes", () => {
+    const modal = renderModal(
+      { isOpen: true, data: { background: "green" } },
+      "hello"
+    );
+    mcontent(modal)
+      .getAttribute("data-background")
+      .should.be.eql("green");
+    unmountModal();
+  });
+
   it("raises an exception if the appElement selector does not match", () => {
     should(() => ariaAppHider.setElement(".test")).throw();
   });

diff --git a/src/components/Modal.js b/src/components/Modal.js
@@ -60,6 +60,7 @@ class Modal extends Component {
     shouldReturnFocusAfterClose: PropTypes.bool,
     parentSelector: PropTypes.func,
     aria: PropTypes.object,
+    data: PropTypes.object,
     role: PropTypes.string,
     contentLabel: PropTypes.string,
     shouldCloseOnEsc: PropTypes.bool,

diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
@@ -51,6 +51,7 @@ export default class ModalPortal extends Component {
     role: PropTypes.string,
     contentLabel: PropTypes.string,
     aria: PropTypes.object,
+    data: PropTypes.object,
     children: PropTypes.node,
     shouldCloseOnEsc: PropTypes.bool,
     overlayRef: PropTypes.func,
@@ -315,9 +316,9 @@ export default class ModalPortal extends Component {
       : className;
   };
 
-  ariaAttributes = items =>
+  attributesFromObject = (prefix, items) =>
     Object.keys(items).reduce((acc, name) => {
-      acc[`aria-${name}`] = items[name];
+      acc[`${prefix}-${name}`] = items[name];
       return acc;
     }, {});
 
@@ -346,8 +347,8 @@ export default class ModalPortal extends Component {
           onClick={this.handleContentOnClick}
           role={this.props.role}
           aria-label={this.props.contentLabel}
-          {...this.ariaAttributes(this.props.aria || {})}
-          data-testid={this.props.testId}
+          {...this.attributesFromObject("aria", this.props.aria || {})}
+          {...this.attributesFromObject("data", this.props.data || {})}
         >
           {this.props.children}
         </div>