WIP: GC-572 get option values when submit button clicked

resource/js/app.js

@@ -212,6 +212,10 @@ const saveWithShortcut = function(markdown) {
     .catch(errorHandler);
 };
 
+const saveWithSubmitButton = function(options) {
+  console.log(options);
+};
+
 // render SavePageControls
 let savePageControls = null;
 const savePageControlsElem = document.getElementById('save-page-controls');
@@ -221,7 +225,7 @@ if (savePageControlsElem) {
   const pageGrantGroupName = savePageControlsElem.dataset.grantGroupName;
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
-      <SavePageControls crowi={crowi}
+      <SavePageControls crowi={crowi} onSubmit={saveWithSubmitButton}
           ref={(elem) => { savePageControls = elem.getWrappedInstance() }}
           pageId={pageId} pagePath={pagePath} slackChannels={slackChannels}
           pageGrant={pageGrant} pageGrantGroupId={pageGrantGroupId} pageGrantGroupName={pageGrantGroupName} />

resource/js/components/SavePageControls.jsx

@@ -13,6 +13,8 @@ class SavePageControls extends React.PureComponent {
     this.state = {
       pageId: this.props.pageId,
     };
+
+    this.submit = this.submit.bind(this);
   }
 
   componentWillMount() {
@@ -26,6 +28,13 @@ class SavePageControls extends React.PureComponent {
     this.setState({pageId});
   }
 
+  submit() {
+    const slackNotificationState = this.refs.slackNotification.state;
+    const grantSelectorState = this.refs.grantSelector.state;
+    const options = Object.assign(slackNotificationState, grantSelectorState);
+    this.props.onSubmit(options);
+  }
+
   render() {
     const { t } = this.props;
 
@@ -35,22 +44,24 @@ class SavePageControls extends React.PureComponent {
       <div className="d-flex align-items-center form-inline">
         <div className="mr-2">
           <SlackNotification
-            crowi={this.props.crowi}
-            pageId={this.props.pageId}
-            pagePath={this.props.pagePath}
-            isSlackEnabled={false}
-            slackChannels={this.props.slackChannels}
-            formName='pageForm' />
+              ref='slackNotification'
+              crowi={this.props.crowi}
+              pageId={this.props.pageId}
+              pagePath={this.props.pagePath}
+              isSlackEnabled={false}
+              slackChannels={this.props.slackChannels}
+              formName='pageForm' />
         </div>
 
         <div className="mr-2">
           <GrantSelector crowi={this.props.crowi}
-            pageGrant={this.props.pageGrant}
-            pageGrantGroupId={this.props.pageGrantGroupId}
-            pageGrantGroupName={this.props.pageGrantGroupName} />
+              ref={(elem) => { this.refs.grantSelector = elem.getWrappedInstance()} }
+              pageGrant={this.props.pageGrant}
+              pageGrantGroupId={this.props.pageGrantGroupId}
+              pageGrantGroupName={this.props.pageGrantGroupName} />
         </div>
 
-        <button className="btn btn-primary btn-submit">{label}</button>
+        <button className="btn btn-primary btn-submit" onClick={this.submit}>{label}</button>
       </div>
     );
   }
@@ -59,6 +70,7 @@ class SavePageControls extends React.PureComponent {
 SavePageControls.propTypes = {
   t: PropTypes.func.isRequired,               // i18next
   crowi: PropTypes.object.isRequired,
+  onSubmit: PropTypes.func.isRequired,
   pageId: PropTypes.string,
   // for SlackNotification
   pagePath: PropTypes.string,

resource/js/components/SlackNotification.js

@@ -43,8 +43,8 @@ export default class SlackNotification extends React.Component {
     const value = event.target.checked;
     this.setState({isSlackEnabled: value});
     // dispatch event
-    if (this.props.onSlackOnChange != null) {
-      this.props.onSlackOnChange(value);
+    if (this.props.onEnabledFlagChange != null) {
+      this.props.onEnabledFlagChange(value);
     }
   }
 
@@ -80,7 +80,7 @@ SlackNotification.propTypes = {
   slackChannels: PropTypes.string,
   formName: PropTypes.string,
   onChannelChange: PropTypes.func,
-  onSlackOnChange: PropTypes.func,
+  onEnabledFlagChange: PropTypes.func,
 };
 
 SlackNotification.defaultProps = {