dropdown

src/client/js/components/Admin/Common/AdminDropdownOption.jsx

@@ -2,30 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import FormGroup from 'react-bootstrap/es/FormGroup';
-import FormControl from 'react-bootstrap/es/FormControl';
-import ControlLabel from 'react-bootstrap/es/ControlLabel';
-
 class AdminDropdownOption extends React.PureComponent {
 
   render() {
+
+    const menuItem = this.props.options.map((option) => {
+      return <button key={option} className="dropdown-item" type="button" onClick={() => this.props.onChangeValue(option)}>{option}</button>;
+    });
+
     return (
-      <React.Fragment>
-        <FormGroup controlId="formControlsSelect" className="my-0">
-          <ControlLabel>{this.props.label}</ControlLabel>
-          <FormControl
-            componentClass="select"
-            placeholder="select"
-            className="btn-group-sm selectpicker"
-            onChange={event => this.props.onChange(event.target.value)}
-          >
-            {this.props.options.map((option) => {
-              return <option key={option} value={option}>{option}</option>;
-            })}
-          </FormControl>
-        </FormGroup>
+      <div className="my-0 form-group">
+        <label>{this.props.label}</label>
+        <div className="dropdown">
+          <button className="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            {this.props.selectedValue}
+          </button>
+          <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">
+            {menuItem}
+          </div>
+        </div>
         {this.props.children}
-      </React.Fragment>
+      </div>
     );
   }
 
@@ -34,9 +31,9 @@ class AdminDropdownOption extends React.PureComponent {
 AdminDropdownOption.propTypes = {
   t: PropTypes.func.isRequired, // i18next
 
-  value: PropTypes.number.isRequired,
+  selectedValue: PropTypes.number.isRequired,
   label: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
+  onChangeValue: PropTypes.func.isRequired,
   options: PropTypes.array.isRequired,
   children: PropTypes.object.isRequired,
 };

src/client/js/components/Admin/Customize/CustomizeFunctionSetting.jsx

@@ -99,8 +99,8 @@ class CustomizeBehaviorSetting extends React.Component {
           <div className="col-xs-offset-2 col-xs-8 text-left">
             <AdminDropdownOption
               label={t('customize_page.recent_created__n_draft_num_desc')}
-              value={adminCustomizeContainer.state.currentRecentCreatedLimit}
-              onChange={(value) => { adminCustomizeContainer.switchRecentCreatedLimit(value) }}
+              selectedValue={adminCustomizeContainer.state.currentRecentCreatedLimit}
+              onChangeValue={(value) => { adminCustomizeContainer.switchRecentCreatedLimit(value) }}
               options={[10, 30, 50]}
             >
               <p className="help-block">