diff --git a/packages/strapi-plugin-content-manager/admin/src/components/LimitSelect/index.js b/packages/strapi-plugin-content-manager/admin/src/components/LimitSelect/index.js index 1d68621bc1..c25bbb812f 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/LimitSelect/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/LimitSelect/index.js @@ -6,7 +6,9 @@ import React from 'react'; // import PropTypes from 'prop-types'; -import _ from 'lodash'; +import { FormattedMessage } from 'react-intl'; +import { map } from 'lodash'; +import styles from './styles.scss'; class LimitSelect extends React.Component { componentWillMount() { @@ -14,10 +16,6 @@ class LimitSelect extends React.Component { this.setState({ id }); } - shouldComponentUpdate() { - return false; - } - /** * Return the list of default values to populate the select options * @@ -28,39 +26,30 @@ class LimitSelect extends React.Component { } render() { - return
; + return ( +
- // // Generate options - // const options = this.getOptionsValues().map(optionValue => ( - // - // )); - // - // // Get id in order to link the `label` and the `select` elements - // const id = this.state.id; - // - // return ( - // - //
- // - //
- // - //
- //
- //
- // ); +
+ +
+ + + ); } } LimitSelect.propTypes = { - // onLimitChange: PropTypes.func.isRequired, + handleChange: PropTypes.func.isRequired, + limit: PropTypes.number.isRequired, }; export default LimitSelect; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/LimitSelect/styles.scss b/packages/strapi-plugin-content-manager/admin/src/components/LimitSelect/styles.scss index 437c66a760..56bc5359c2 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/LimitSelect/styles.scss +++ b/packages/strapi-plugin-content-manager/admin/src/components/LimitSelect/styles.scss @@ -1,27 +1,28 @@ .selectWrapper { display: inline-block; - &:after { - content: "\f104"; - position: absolute; - top: 10px; - right: 26px; - font-family: 'ionicons', Helvetica; - color: #465373; - font-size: 1.1rem; - pointer-events: none; - } } .select { + + height: 3.2rem !important; + min-width: 5.4rem; + padding-top: 0rem; + padding-left: 1rem; + padding-right: 3rem; + background-position: right -1px center; + background-repeat: no-repeat; + background-image: url('./background_input.svg'); + border: 1px solid #E3E9F3; + border-radius: 0.25rem; + line-height: 3.2rem; + font-size: 1.3rem; + font-family: 'Lato' !important; + -moz-appearance: none; -webkit-appearance: none; - background: #ffffff; - border-radius: 2.4rem; - padding-top: 0.6rem; - padding-right: 1.4rem; } .label { color: #465373; - margin-right: 1rem; -} \ No newline at end of file + margin-left: 1rem; +} diff --git a/packages/strapi-plugin-content-manager/admin/src/components/TableFooter/index.js b/packages/strapi-plugin-content-manager/admin/src/components/TableFooter/index.js index 31788db430..809d6214a3 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/TableFooter/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/TableFooter/index.js @@ -18,8 +18,8 @@ class TableFooter extends React.Component {
@@ -43,7 +43,7 @@ TableFooter.propTypes = { PropTypes.bool, ]).isRequired, currentPage: PropTypes.number.isRequired, - handleLimit: PropTypes.func.isRequired, + handleChangeLimit: PropTypes.func.isRequired, limit: PropTypes.number.isRequired, }; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/List/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/List/index.js index ea64158ded..c40d72793f 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/List/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/List/index.js @@ -125,6 +125,14 @@ export class List extends React.Component { this.addRoute = `${this.props.match.path.replace(':slug', slug)}/create`; } + handleChangeLimit = ({ target }) => { + this.props.changeLimit(parseInt(target.value)); + router.push({ + pathname: this.props.location.pathname, + search: `?page=${this.props.currentPage}&limit=${target.value}&sort=${this.props.sort}`, + }); + } + handleDelete = (e) => { e.preventDefault(); e.stopPropagation(); @@ -234,7 +242,7 @@ export class List extends React.Component { changePage={this.changePage} count={this.props.count} className="push-lg-right" - handleLimit={this.props.changeLimit} + handleChangeLimit={this.handleChangeLimit} />
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/List/reducer.js b/packages/strapi-plugin-content-manager/admin/src/containers/List/reducer.js index 71448b106c..5630846022 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/List/reducer.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/List/reducer.js @@ -33,7 +33,7 @@ const initialState = fromJS({ loadingCount: true, count: false, currentPage: 1, - limit: 2, + limit: 10, sort: 'id', }); diff --git a/packages/strapi-plugin-content-manager/admin/src/translations/en.json b/packages/strapi-plugin-content-manager/admin/src/translations/en.json index f62877648f..662d711b9f 100644 --- a/packages/strapi-plugin-content-manager/admin/src/translations/en.json +++ b/packages/strapi-plugin-content-manager/admin/src/translations/en.json @@ -10,7 +10,7 @@ "containers.Edit.returnList": "Return to list", "containers.List.addAnEntry": "Add New {entity}", "containers.List.pluginHeaderDescription": "Manage your {label}", - "components.LimitSelect.itemsPerPage": "Number of items per page", + "components.LimitSelect.itemsPerPage": "Items per page", "containers.List.errorFetchRecords": "Error", "pageNotFound": "Page not found", diff --git a/packages/strapi-plugin-content-manager/admin/src/translations/fr.json b/packages/strapi-plugin-content-manager/admin/src/translations/fr.json index 3bcfa5db9f..5ade49cbe6 100644 --- a/packages/strapi-plugin-content-manager/admin/src/translations/fr.json +++ b/packages/strapi-plugin-content-manager/admin/src/translations/fr.json @@ -10,7 +10,7 @@ "containers.Edit.returnList": "Retourner à la liste", "containers.List.addAnEntry": "Ajouter {entity}", "containers.List.pluginHeaderDescription": "Gérér vos {label}", - "components.LimitSelect.itemsPerPage": "Nombre d'éléments par page", + "components.LimitSelect.itemsPerPage": "Éléments par page", "containers.List.errorFetchRecords": "Erreur", "popUpWarning.button.cancel": "Annuler",