Add highlighting to search results as mocked.
This commit is contained in:
parent
8b2f6f193f
commit
2d8a41a982
|
@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
|
||||||
import Document from 'models/Document';
|
import Document from 'models/Document';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color } from 'shared/styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
import Highlight from 'components/Highlight';
|
||||||
import StarredIcon from 'components/Icon/StarredIcon';
|
import StarredIcon from 'components/Icon/StarredIcon';
|
||||||
import PublishingInfo from './components/PublishingInfo';
|
import PublishingInfo from './components/PublishingInfo';
|
||||||
|
|
||||||
|
@ -84,12 +85,18 @@ class DocumentPreview extends Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { document, showCollection, innerRef, ...rest } = this.props;
|
const {
|
||||||
|
document,
|
||||||
|
showCollection,
|
||||||
|
innerRef,
|
||||||
|
highlight,
|
||||||
|
...rest
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DocumentLink to={document.url} innerRef={innerRef} {...rest}>
|
<DocumentLink to={document.url} innerRef={innerRef} {...rest}>
|
||||||
<h3>
|
<h3>
|
||||||
{document.title}
|
<Highlight text={document.title} highlight={highlight} />
|
||||||
{document.starred ? (
|
{document.starred ? (
|
||||||
<a onClick={this.unstar}>
|
<a onClick={this.unstar}>
|
||||||
<StyledStar solid />
|
<StyledStar solid />
|
||||||
|
|
|
@ -0,0 +1,34 @@
|
||||||
|
// @flow
|
||||||
|
import React from 'react';
|
||||||
|
import replace from 'string-replace-to-array';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { color } from 'shared/styles/constants';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
highlight: ?string,
|
||||||
|
text: string,
|
||||||
|
caseSensitive?: boolean,
|
||||||
|
};
|
||||||
|
|
||||||
|
function Highlight({ highlight, caseSensitive, text, ...rest }: Props) {
|
||||||
|
return (
|
||||||
|
<span {...rest}>
|
||||||
|
{highlight
|
||||||
|
? replace(
|
||||||
|
text,
|
||||||
|
new RegExp(
|
||||||
|
(highlight || '').replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&'),
|
||||||
|
caseSensitive ? 'g' : 'gi'
|
||||||
|
),
|
||||||
|
(tag, index) => <Mark key={index}>{tag}</Mark>
|
||||||
|
)
|
||||||
|
: text}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const Mark = styled.mark`
|
||||||
|
background: ${color.yellow};
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default Highlight;
|
|
@ -0,0 +1,3 @@
|
||||||
|
// @flow
|
||||||
|
import Highlight from './Highlight';
|
||||||
|
export default Highlight;
|
33
package.json
33
package.json
|
@ -4,10 +4,8 @@
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"clean": "rimraf dist",
|
"clean": "rimraf dist",
|
||||||
"build:webpack":
|
"build:webpack": "NODE_ENV=production webpack --config webpack.config.prod.js",
|
||||||
"NODE_ENV=production webpack --config webpack.config.prod.js",
|
"build:analyze": "NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer",
|
||||||
"build:analyze":
|
|
||||||
"NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer",
|
|
||||||
"build": "npm run clean && npm run build:webpack",
|
"build": "npm run clean && npm run build:webpack",
|
||||||
"start": "NODE_ENV=production node index.js",
|
"start": "NODE_ENV=production node index.js",
|
||||||
"dev": "NODE_ENV=development nodemon --watch server index.js",
|
"dev": "NODE_ENV=development nodemon --watch server index.js",
|
||||||
|
@ -20,23 +18,35 @@
|
||||||
"sequelize:migrate": "sequelize db:migrate",
|
"sequelize:migrate": "sequelize db:migrate",
|
||||||
"test": "npm run test:app && npm run test:server",
|
"test": "npm run test:app && npm run test:server",
|
||||||
"test:app": "jest",
|
"test:app": "jest",
|
||||||
"test:server":
|
"test:server": "jest --config=server/.jestconfig.json --runInBand --forceExit",
|
||||||
"jest --config=server/.jestconfig.json --runInBand --forceExit",
|
|
||||||
"precommit": "lint-staged"
|
"precommit": "lint-staged"
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"*.js": ["eslint --fix", "git add"]
|
"*.js": [
|
||||||
|
"eslint --fix",
|
||||||
|
"git add"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"jest": {
|
"jest": {
|
||||||
"verbose": false,
|
"verbose": false,
|
||||||
"roots": ["app"],
|
"roots": [
|
||||||
|
"app"
|
||||||
|
],
|
||||||
"moduleNameMapper": {
|
"moduleNameMapper": {
|
||||||
"^.*[.](s?css|css)$": "<rootDir>/__mocks__/styleMock.js",
|
"^.*[.](s?css|css)$": "<rootDir>/__mocks__/styleMock.js",
|
||||||
"^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
|
"^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
|
||||||
},
|
},
|
||||||
"moduleFileExtensions": ["js", "jsx", "json"],
|
"moduleFileExtensions": [
|
||||||
"moduleDirectories": ["node_modules"],
|
"js",
|
||||||
"modulePaths": ["app"],
|
"jsx",
|
||||||
|
"json"
|
||||||
|
],
|
||||||
|
"moduleDirectories": [
|
||||||
|
"node_modules"
|
||||||
|
],
|
||||||
|
"modulePaths": [
|
||||||
|
"app"
|
||||||
|
],
|
||||||
"setupFiles": [
|
"setupFiles": [
|
||||||
"raf/polyfill",
|
"raf/polyfill",
|
||||||
"<rootDir>/setupJest.js",
|
"<rootDir>/setupJest.js",
|
||||||
|
@ -158,6 +168,7 @@
|
||||||
"slate-trailing-block": "^0.2.4",
|
"slate-trailing-block": "^0.2.4",
|
||||||
"slug": "0.9.1",
|
"slug": "0.9.1",
|
||||||
"string-hash": "^1.1.0",
|
"string-hash": "^1.1.0",
|
||||||
|
"string-replace-to-array": "^1.0.3",
|
||||||
"style-loader": "^0.18.2",
|
"style-loader": "^0.18.2",
|
||||||
"styled-components": "^2.2.3",
|
"styled-components": "^2.2.3",
|
||||||
"styled-components-grid": "^1.0.0-preview.15",
|
"styled-components-grid": "^1.0.0-preview.15",
|
||||||
|
|
|
@ -8355,6 +8355,14 @@ string-length@^1.0.0, string-length@^1.0.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
strip-ansi "^3.0.0"
|
strip-ansi "^3.0.0"
|
||||||
|
|
||||||
|
string-replace-to-array@^1.0.3:
|
||||||
|
version "1.0.3"
|
||||||
|
resolved "https://registry.npmjs.org/string-replace-to-array/-/string-replace-to-array-1.0.3.tgz#c93eba999a5ee24d731aebbaf5aba36b5f18f7bf"
|
||||||
|
dependencies:
|
||||||
|
invariant "^2.2.1"
|
||||||
|
lodash.flatten "^4.2.0"
|
||||||
|
lodash.isstring "^4.0.1"
|
||||||
|
|
||||||
string-width@^1.0.1, string-width@^1.0.2:
|
string-width@^1.0.1, string-width@^1.0.2:
|
||||||
version "1.0.2"
|
version "1.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
|
resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
|
||||||
|
|
Reference in New Issue