currentRecentCreatedLimit

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

@@ -0,0 +1,46 @@
+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 CustomizeFunctionDropdownOption extends React.PureComponent {
+
+  render() {
+    return (
+      <div className="form-group row">
+        <div className="col-xs-offset-3 col-xs-6 text-left">
+          <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>
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+
+}
+
+CustomizeFunctionDropdownOption.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
+  value: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  options: PropTypes.array.isRequired,
+  children: PropTypes.object.isRequired,
+};
+
+export default withTranslation()(CustomizeFunctionDropdownOption);

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

@@ -16,7 +16,7 @@ class CustomizeFunctionOption extends React.PureComponent {
               onChange={this.props.onChecked}
             />
             <label htmlFor={this.props.optionId}>
-              {this.props.label}
+              <strong>{this.props.label}</strong>
             </label>
           </div>
           {this.props.children}

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

@@ -12,6 +12,7 @@ import AppContainer from '../../../services/AppContainer';
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 import CustomizeFunctionOption from './CustomizeFunctionOption';
+import CustomizeFunctionDropdownOption from './CustomizeFunctionDropdownOption';
 
 const logger = loggerFactory('growi:importer');
 
@@ -82,6 +83,17 @@ class CustomizeBehaviorSetting extends React.Component {
           </p>
         </CustomizeFunctionOption>
 
+        <CustomizeFunctionDropdownOption
+          label={t('customize_page.recent_created__n_draft_num_desc')}
+          value={adminCustomizeContainer.state.currentRecentCreatedLimit}
+          onChange={(value) => { adminCustomizeContainer.switchRecentCreatedLimit(value) }}
+          options={[10, 30, 50]}
+        >
+          <p className="help-block">
+            { t('customize_page.recently_created_n_draft_num_desc') }
+          </p>
+        </CustomizeFunctionDropdownOption>
+
         <AdminUpdateButtonRow onClick={this.onClickSubmit} />
       </React.Fragment>
     );

src/client/js/services/AdminCustomizeContainer.js

@@ -18,6 +18,7 @@ export default class AdminCustomizeContainer extends Container {
       isEnabledTimeline: appContainer.config.isEnabledTimeline,
       isSavedStatesOfTabChanges: appContainer.config.isSavedStatesOfTabChanges,
       isEnabledAttachTitleHeader: appContainer.config.isEnabledAttachTitleHeader,
+      currentRecentCreatedLimit: appContainer.config.recentCreatedLimit,
     };
 
   }
@@ -75,6 +76,13 @@ export default class AdminCustomizeContainer extends Container {
     this.setState({ isEnabledAttachTitleHeader:  !this.state.isEnabledAttachTitleHeader });
   }
 
+  /**
+   * Switch recentCreatedLimit
+   */
+  switchRecentCreatedLimit(value) {
+    this.setState({ currentRecentCreatedLimit: value });
+  }
+
   /**
    * Update layout
    * @memberOf AdminCustomizeContainer