permission explanation

frontend/src/components/select-editor/select-editor.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Input } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import Select from 'react-select';
+import '../../css/select-editor.css';
 
 const propTypes = {
   isTextMode: PropTypes.bool.isRequired, // there will be two mode. first: text and select. second: just select
@@ -9,6 +10,7 @@ const propTypes = {
   options: PropTypes.array.isRequired,
   currentOption: PropTypes.string.isRequired,
   translateOption: PropTypes.func.isRequired,
+  translateExplanation: PropTypes.func,
   onOptionChanged: PropTypes.func.isRequired,
 };
 
@@ -19,24 +21,36 @@ class SelectEditor extends React.Component {
     this.state = {
       isEditing: false,
     }
+    this.options = [];
   }
 
   componentDidMount() {
     document.addEventListener('click', this.onHideSelect);
+    this.setOptions();
+  }
+
+  setOptions = () => {
+    this.options = [];
+    const options = this.props.options;
+    for (let i = 0, length = options.length; i < length; i++) {
+      let option = {};
+      option.value = options[i];
+      option.label = <div>{this.props.translateOption(options[i])}{ this.props.translateExplanation && <div className="permission-editor-explanation">{this.props.translateExplanation(options[i])}</div>}</div>;
+      this.options.push(option);
+    }
   }
 
   componentWillUnmount() {
     document.removeEventListener('click', this.onHideSelect);
   }
 
-  onEidtPermission = (e) => {
+  onEditPermission = (e) => {
     e.nativeEvent.stopImmediatePropagation();
     this.setState({isEditing: true});
   }
 
   onOptionChanged = (e) => {
-    e.nativeEvent.stopImmediatePropagation();
-    let permission = e.target.value;
+    let permission = e.value;
     if (permission !== this.props.currentOption) {
       this.props.onOptionChanged(permission);
     }
@@ -56,23 +70,16 @@ class SelectEditor extends React.Component {
 
     // scence1: isTextMode (text)editor-icon --> select
     // scence2: !isTextMode select
-    let selectStyle = {
-      height: '1.5rem',
-      padding: 0
-    };
-    if (!isTextMode) {
-      selectStyle = {};
-    }
     return (
-      <div className="permission-editor">
+      <div className="permission-editor" onClick={this.onSelectHandler}>
         {(!isTextMode || this.state.isEditing) &&
-          <Input style={selectStyle} type="select" onChange={this.onOptionChanged} onClick={this.onSelectHandler} value={currentOption}>
-            {options.map((item, index) => {
-              return (
-                <option key={index} value={item}>{this.props.translateOption(item)}</option>
-              );
-            })}
-          </Input>
+          <Select
+            options={this.options}
+            className="permission-editor-select"
+            classNamePrefix="select"
+            onChange={this.onOptionChanged}
+            menuPlacement="auto"
+          />
         }
         {(isTextMode && !this.state.isEditing) &&
           <div>
@@ -81,7 +88,7 @@ class SelectEditor extends React.Component {
               <span 
                 title={gettext('Edit')} 
                 className="fa fa-pencil attr-action-icon" 
-                onClick={this.onEidtPermission}>
+                onClick={this.onEditPermission}>
               </span>
             )}
           </div>

frontend/src/components/select-editor/share-permission-editor.js

@@ -17,6 +17,10 @@ class SharePermissionEditor extends React.Component {
     return Utils.sharePerms(permission);
   }
 
+  translateExplanation = (explanation) => {
+    return Utils.sharePermsExplanation(explanation);
+  }
+
   render() {
     return (
       <SelectEditor 
@@ -26,6 +30,7 @@ class SharePermissionEditor extends React.Component {
         currentOption={this.props.currentPermission}
         onOptionChanged={this.props.onPermissionChanged}
         translateOption={this.translatePermission}
+        translateExplanation={this.translateExplanation}
       />
     );
   }