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 styled from 'styled-components';
|
||||
import { color } from 'shared/styles/constants';
|
||||
import Highlight from 'components/Highlight';
|
||||
import StarredIcon from 'components/Icon/StarredIcon';
|
||||
import PublishingInfo from './components/PublishingInfo';
|
||||
|
||||
|
@ -84,12 +85,18 @@ class DocumentPreview extends Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
const { document, showCollection, innerRef, ...rest } = this.props;
|
||||
const {
|
||||
document,
|
||||
showCollection,
|
||||
innerRef,
|
||||
highlight,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<DocumentLink to={document.url} innerRef={innerRef} {...rest}>
|
||||
<h3>
|
||||
{document.title}
|
||||
<Highlight text={document.title} highlight={highlight} />
|
||||
{document.starred ? (
|
||||
<a onClick={this.unstar}>
|
||||
<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",
|
||||
"scripts": {
|
||||
"clean": "rimraf dist",
|
||||
"build:webpack":
|
||||
"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:webpack": "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": "npm run clean && npm run build:webpack",
|
||||
"start": "NODE_ENV=production node index.js",
|
||||
"dev": "NODE_ENV=development nodemon --watch server index.js",
|
||||
|
@ -20,23 +18,35 @@
|
|||
"sequelize:migrate": "sequelize db:migrate",
|
||||
"test": "npm run test:app && npm run test:server",
|
||||
"test:app": "jest",
|
||||
"test:server":
|
||||
"jest --config=server/.jestconfig.json --runInBand --forceExit",
|
||||
"test:server": "jest --config=server/.jestconfig.json --runInBand --forceExit",
|
||||
"precommit": "lint-staged"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.js": ["eslint --fix", "git add"]
|
||||
"*.js": [
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"jest": {
|
||||
"verbose": false,
|
||||
"roots": ["app"],
|
||||
"roots": [
|
||||
"app"
|
||||
],
|
||||
"moduleNameMapper": {
|
||||
"^.*[.](s?css|css)$": "<rootDir>/__mocks__/styleMock.js",
|
||||
"^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
|
||||
},
|
||||
"moduleFileExtensions": ["js", "jsx", "json"],
|
||||
"moduleDirectories": ["node_modules"],
|
||||
"modulePaths": ["app"],
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"jsx",
|
||||
"json"
|
||||
],
|
||||
"moduleDirectories": [
|
||||
"node_modules"
|
||||
],
|
||||
"modulePaths": [
|
||||
"app"
|
||||
],
|
||||
"setupFiles": [
|
||||
"raf/polyfill",
|
||||
"<rootDir>/setupJest.js",
|
||||
|
@ -158,6 +168,7 @@
|
|||
"slate-trailing-block": "^0.2.4",
|
||||
"slug": "0.9.1",
|
||||
"string-hash": "^1.1.0",
|
||||
"string-replace-to-array": "^1.0.3",
|
||||
"style-loader": "^0.18.2",
|
||||
"styled-components": "^2.2.3",
|
||||
"styled-components-grid": "^1.0.0-preview.15",
|
||||
|
|
|
@ -8355,6 +8355,14 @@ string-length@^1.0.0, string-length@^1.0.1:
|
|||
dependencies:
|
||||
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:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
|
||||
|
|
Reference in New Issue