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) => ( + + )} + +
+
+ filter_logo + {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 (
- +