add configuration button

src/client/js/components/Admin/ImportData/GrowiZipImportForm.jsx

@@ -71,6 +71,7 @@ class GrowiImportForm extends React.Component {
     this.checkAll = this.checkAll.bind(this);
     this.uncheckAll = this.uncheckAll.bind(this);
     this.updateOption = this.updateOption.bind(this);
+    this.openConfigurationModal = this.openConfigurationModal.bind(this);
     this.showErrorsViewer = this.showErrorsViewer.bind(this);
     this.validate = this.validate.bind(this);
     this.import = this.import.bind(this);
@@ -144,6 +145,11 @@ class GrowiImportForm extends React.Component {
     this.setState({ optionsMap });
   }
 
+  openConfigurationModal(collectionName) {
+    console.log('openConfigurationModal', collectionName);
+    // TODO: impl
+  }
+
   showErrorsViewer(collectionName) {
     this.setState({ isErrorsViewerOpen: true, collectionNameForErrorsViewer: collectionName });
   }
@@ -367,6 +373,7 @@ class GrowiImportForm extends React.Component {
                 option={optionsMap[collectionName]}
                 onChange={this.toggleCheckbox}
                 onOptionChange={this.updateOption}
+                onConfigButtonClicked={this.openConfigurationModal}
                 onErrorLinkClicked={this.showErrorsViewer}
               />
             </div>

src/client/js/components/Admin/ImportData/GrowiZipImportItem.jsx

@@ -28,6 +28,7 @@ export default class GrowiZipImportItem extends React.Component {
 
     this.changeHandler = this.changeHandler.bind(this);
     this.modeSelectedHandler = this.modeSelectedHandler.bind(this);
+    this.configButtonClickedHandler = this.configButtonClickedHandler.bind(this);
     this.errorLinkClickedHandler = this.errorLinkClickedHandler.bind(this);
   }
 
@@ -52,6 +53,16 @@ export default class GrowiZipImportItem extends React.Component {
     onOptionChange(collectionName, option);
   }
 
+  configButtonClickedHandler() {
+    const { collectionName, onConfigButtonClicked } = this.props;
+
+    if (onConfigButtonClicked == null) {
+      return;
+    }
+
+    onConfigButtonClicked(collectionName);
+  }
+
   errorLinkClickedHandler() {
     const { collectionName, onErrorLinkClicked } = this.props;
 
@@ -132,6 +143,14 @@ export default class GrowiZipImportItem extends React.Component {
     );
   }
 
+  renderConfigButton() {
+    return (
+      <button type="button" className="btn btn-default btn-xs ml-2" onClick={this.configButtonClickedHandler}>
+        <i className="icon-settings"></i>
+      </button>
+    );
+  }
+
   renderProgressBar() {
     const {
       isImporting, insertedCount, modifiedCount, errorsCount,
@@ -181,7 +200,10 @@ export default class GrowiZipImportItem extends React.Component {
             {/* left */}
             {this.renderCheckbox()}
             {/* right */}
-            {this.renderModeSelector()}
+            <span className="d-flex align-items-center">
+              {this.renderModeSelector()}
+              {this.renderConfigButton()}
+            </span>
           </div>
         </div>
         { isSelected && (
@@ -211,6 +233,7 @@ GrowiZipImportItem.propTypes = {
 
   onChange: PropTypes.func,
   onOptionChange: PropTypes.func,
+  onConfigButtonClicked: PropTypes.func,
   onErrorLinkClicked: PropTypes.func,
 };