apply bst4 dropdown

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import {
   Card, CardBody,
-  ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem,
+  Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
 } from 'reactstrap';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
@@ -20,9 +20,18 @@ class CustomizeBehaviorSetting extends React.Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      isDropdownOpen: false,
+    };
+
+    this.onToggleDropdown = this.onToggleDropdown.bind(this);
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
+  onToggleDropdown() {
+    this.setState({ isDropdownOpen: !this.state.isDropdownOpen });
+  }
+
   async onClickSubmit() {
     const { t, adminCustomizeContainer } = this.props;
 
@@ -101,10 +110,10 @@ class CustomizeBehaviorSetting extends React.Component {
             <div className="my-0 w-100">
               <label>{t('admin:customize_setting.function_options.recent_created__n_draft_num_desc')}</label>
             </div>
-            <ButtonDropdown className="">
-              <DropdownToggle className="" data-toggle="dropdown" aria-haspopup="true" caret>
+            <Dropdown className="w-100" isOpen={this.state.isDropdownOpen} toggle={this.onToggleDropdown}>
+              <DropdownToggle caret>
                 <span className="float-left">{adminCustomizeContainer.state.currentRecentCreatedLimit}</span>
-                <span className="bs-caret">
+                <span className="bs-caret float-right">
                   <span className="caret" />
                 </span>
               </DropdownToggle>
@@ -120,7 +129,7 @@ class CustomizeBehaviorSetting extends React.Component {
                   <a role="menuitem">50</a>
                 </DropdownItem>
               </DropdownMenu>
-            </ButtonDropdown>
+            </Dropdown>
             <p className="form-text text-muted">
               {t('admin:customize_setting.function_options.recently_created_n_draft_num_desc')}
             </p>

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

@@ -19,9 +19,18 @@ class CustomizeHighlightSetting extends React.Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      isDropdownOpen: false,
+    };
+
+    this.onToggleDropdown = this.onToggleDropdown.bind(this);
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
+  onToggleDropdown() {
+    this.setState({ isDropdownOpen: !this.state.isDropdownOpen });
+  }
+
   async onClickSubmit() {
     const { t, adminCustomizeContainer } = this.props;
 
@@ -67,9 +76,13 @@ class CustomizeHighlightSetting extends React.Component {
       const isBorderEnable = option[1].border;
 
       menuItem.push(
-        <li key={styleId} role="presentation" type="button" onClick={() => adminCustomizeContainer.switchHighlightJsStyle(styleId, styleName, isBorderEnable)}>
-          <a role="button">{styleName}</a>
-        </li>,
+        <DropdownItem
+          key={styleId}
+          role="presentation"
+          onClick={() => adminCustomizeContainer.switchHighlightJsStyle(styleId, styleName, isBorderEnable)}
+        >
+          <a role="menuitem">{styleName}</a>
+        </DropdownItem>,
       );
     });
 
@@ -79,24 +92,24 @@ class CustomizeHighlightSetting extends React.Component {
 
         <div className="form-group row">
           <div className="offset-3 col-6 text-left">
-            <div className="my-0 w-100">
+            <div className="my-0">
               <label>{t('admin:customize_setting.theme')}</label>
-              <Dropdown>
-                <DropdownToggle data-toggle="dropdown" aria-haspopup="true" caret>
-                  <span className="float-left">{adminCustomizeContainer.state.currentHighlightJsStyleName}</span>
-                  <span className="bs-caret float-right">
-                    <span className="caret" />
-                  </span>
-                </DropdownToggle>
-                <DropdownMenu className="dropdown-menu" role="menu">
-                  <DropdownItem>
-                    <ul className="dropdown-menu" role="menu">
-                      {menuItem}
-                    </ul>
-                  </DropdownItem>
-                </DropdownMenu>
-              </Dropdown>
             </div>
+            <Dropdown className="w-100" isOpen={this.state.isDropdownOpen} toggle={this.onToggleDropdown}>
+              <DropdownToggle caret>
+                <span className="float-left col-6">{adminCustomizeContainer.state.currentHighlightJsStyleName}</span>
+                <span className="bs-caret caret col-6">
+                  <span className="caret" />
+                </span>
+              </DropdownToggle>
+              <DropdownMenu className="dropdown-menu" role="menu">
+                {menuItem}
+              </DropdownMenu>
+            </Dropdown>
+            <p className="form-text text-warning">
+              {/* eslint-disable-next-line react/no-danger */}
+              <span dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.nocdn_desc') }} />
+            </p>
           </div>
         </div>