#3059: add SplitterMask for onsenui-react

react-onsenui/CHANGELOG.md

@@ -2,6 +2,11 @@
 CHANGELOG
 ====
 
+1.13.2
+---
+### Bug Fixes
+* Splitter: Add SplitterMask component.
+
 1.13.2
 ---
 ### Misc

react-onsenui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-onsenui",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "description": "Onsen UI - React Components for Hybrid Cordova/PhoneGap Apps with Material Design and iOS UI components",
   "scripts": {
     "build": "npm run build:rollup && npm run build:minify",

react-onsenui/src/components/SplitterMask.jsx

@@ -0,0 +1,39 @@
+import 'onsenui/esm/elements/ons-splitter-mask';
+
+import onsCustomElement from '../onsCustomElement';
+
+/**
+ * @original ons-splitter-mask
+ * @category menu
+ * @tutorial react/Reference/splitter
+ * @description
+ * [en]  The SplitterMask  element is used as a child element of Splitter.
+ *    It contains the mask content of the page.
+ [/en]
+ * [ja][/ja]
+ * @example
+  <Splitter>
+    <SplitterSide
+      side="left"
+      width={200}
+      isSwipeable={true}>
+      <Page> Page Left </Page>
+    </SplitterSide>
+    <SplitterMask>
+      <Page> Page Content </Page>
+    </SplitterMask>
+    <SplitterSide
+      side="right"
+      width={300}
+      collapse={!this.state.showRight}
+      isOpen={this.state.openRight}
+      onClose={this.handleRightClose.bind(this)}
+      onOpen={this.handleRightOpen.bind(this)}
+      isSwipeable={true}>
+      <Page> Page Right </Page>
+    </SplitterSide>
+  </Splitter>
+ */
+const SplitterMask = onsCustomElement('ons-splitter-mask');
+
+export default SplitterMask;

react-onsenui/src/index.umd.js

@@ -42,6 +42,7 @@ import SpeedDial from './components/SpeedDial.jsx';
 import SpeedDialItem from './components/SpeedDialItem.jsx';
 import Splitter from './components/Splitter.jsx';
 import SplitterContent from './components/SplitterContent.jsx';
+import SplitterMask from './components/SplitterMask.jsx';
 import SplitterSide from './components/SplitterSide.jsx';
 import Switch from './components/Switch.jsx';
 import Tab from './components/Tab.jsx';
@@ -95,6 +96,7 @@ export {
   SpeedDialItem,
   Splitter,
   SplitterContent,
+  SplitterMask,
   SplitterSide,
   Switch,
   Tab,

react-onsenui/test/splitterMask-test.js

@@ -0,0 +1,13 @@
+ /* global describe it assert */
+
+import React from 'react';
+import {SplitterMask} from '../dist/react-onsenui.js';
+
+import rendersToComponent from './testUtil.js';
+
+describe('SplitterMask', function() {
+  rendersToComponent(
+    <SplitterMask />,
+    'ons-splitter-mask'
+  );
+});