diff --git a/packages/strapi-plugin-content-manager/admin/src/components/Search/index.js b/packages/strapi-plugin-content-manager/admin/src/components/Search/index.js
index e96a2305f2..0251ed4b18 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/Search/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/Search/index.js
@@ -5,23 +5,65 @@
*/
import React from 'react';
+import { upperFirst } from 'lodash';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import Logo from 'assets/images/icon_filter.png';
import styles from './styles.scss';
+const WAIT = 100;
+
class Search extends React.Component {
state = { value: '' };
+ timer = null;
+
handleChange = ({ target }) => {
+ clearTimeout(this.timer);
this.setState({ value: target.value });
+ this.timer = setTimeout(this.triggerChange, WAIT);
+ }
+
+ // TODO check if we send the request only when the user is done typing
+ triggerChange = () => {
+ console.log('End typing');
+
+ // this.props......
}
render() {
+ const { model } = this.props;
+
return (
-
+
+
+ {(message) => (
+
+ )}
+
+
+
+

+ {upperFirst(model)}
+
);
}
}
+Search.defaultProps = {
+ model: '',
+};
+
+Search.propTypes = {
+ model: PropTypes.string,
+};
+
export default Search;
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/Search/styles.scss b/packages/strapi-plugin-content-manager/admin/src/components/Search/styles.scss
index d6ecea16f2..b60af09e67 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/Search/styles.scss
+++ b/packages/strapi-plugin-content-manager/admin/src/components/Search/styles.scss
@@ -4,6 +4,7 @@
top: 0;
height: 6rem;
min-width: 44rem;
+ padding-right: 30px;
line-height: 6rem;
z-index: 999;
background-color: #FFFFFF;
@@ -18,7 +19,36 @@
font-weight: bolder;
}
input {
- width: 60%;
+ width: 100%;
outline: 0;
}
+ > div:first-child {
+ flex: 2;
+ }
+}
+
+
+.searchLabel {
+ position: relative;
+ height: 22px;
+ margin: auto;
+ margin-left: 30px;
+ padding-right: 10px;
+ padding-left: 27px;
+ background: rgba(0,126,255,0.08);
+ border: 1px solid rgba(0,126,255,0.24);
+ border-radius: 2px;
+ line-height: 22px;
+ color: #007EFF;
+ font-size: 13px;
+ font-weight: 500;
+ -webkit-font-smoothing: antialiased;
+ > img {
+ position: absolute;
+ top: 1px;
+ margin: auto;
+ bottom: 0;
+ left: 10px;
+ height: 7px;
+ }
}
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js
index 901d359e6f..6c30ac750d 100644
--- a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js
@@ -343,7 +343,9 @@ export class ListPage extends React.Component {
return (