Skip to content

Commit 3d6261f

Browse files
linhuiwlinhuiw
committed
inital commit
0 parents  commit 3d6261f

11 files changed

+257
-0
lines changed

‎.gitignore

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
lib
2+
dist
3+
build
4+
5+
# Logs
6+
logs
7+
*.log
8+
npm-debug.log*
9+
yarn-debug.log*
10+
yarn-error.log*
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Directory for instrumented libs generated by jscoverage/JSCover
19+
lib-cov
20+
21+
# Coverage directory used by tools like istanbul
22+
coverage
23+
24+
# nyc test coverage
25+
.nyc_output
26+
27+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
28+
.grunt
29+
30+
# Bower dependency directory (https://bower.io/)
31+
bower_components
32+
33+
# node-waf configuration
34+
.lock-wscript
35+
36+
# Compiled binary addons (http://nodejs.org/api/addons.html)
37+
build/Release
38+
39+
# Dependency directories
40+
node_modules/
41+
jspm_packages/
42+
43+
# Typescript v1 declaration files
44+
typings/
45+
46+
# Optional npm cache directory
47+
.npm
48+
49+
# Optional eslint cache
50+
.eslintcache
51+
52+
# Optional REPL history
53+
.node_repl_history
54+
55+
# Output of 'npm pack'
56+
*.tgz
57+
58+
# Yarn Integrity file
59+
.yarn-integrity
60+
61+
# dotenv environment variables file
62+
.env

‎.npmignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
src
2+
webpack.config.js
3+
.babelrc
4+
bower.json

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# React-deep-match
2+
a deep regex match component for react

‎demo/index.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.highlight {
2+
color: #f50;
3+
}

‎demo/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<title>Document</title>
7+
</head>
8+
9+
<body>
10+
11+
<div id="app"></div>
12+
13+
<script src="index.js"></script>
14+
15+
</body>
16+
17+
</html>

‎demo/index.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
import HighlightWord from '../src';
4+
require<any>('./index.css');
5+
6+
ReactDOM.render(
7+
<div>
8+
<HighlightWord text="测试一下高亮, 文字高亮一下" keyword="高亮" />
9+
</div>,
10+
document.getElementById('app')
11+
);

‎demo/webpack.config.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const path = require('path');
2+
3+
console.log(path.resolve(__dirname, 'build'), '====');
4+
module.exports = {
5+
entry: ['./demo/index'],
6+
watch: true,
7+
cache: true,
8+
devtool: 'eval-source-map',
9+
output: {
10+
filename: 'index.js',
11+
path: path.resolve(__dirname, 'build')
12+
},
13+
resolve: {
14+
extensions: ['.ts', '.tsx', '.js', '.css']
15+
},
16+
module: {
17+
loaders: [
18+
{
19+
test: /\.tsx?$/,
20+
exclude: /node_modules/,
21+
loaders: ['awesome-typescript-loader']
22+
},
23+
{
24+
test: /\.css?$/,
25+
loaders: ['style-loader', 'css-loader']
26+
}
27+
]
28+
},
29+
watchOptions: {
30+
aggregateTimeout: 300,
31+
poll: true,
32+
ignored: /node_modules/
33+
},
34+
devServer: {
35+
contentBase: path.join(__dirname, '/'),
36+
headers: {
37+
'Access-Control-Allow-Origin': '*'
38+
},
39+
historyApiFallback: {
40+
index: '/index.html'
41+
},
42+
stats: 'minimal',
43+
host: '0.0.0.0',
44+
port: 8000,
45+
compress: true
46+
}
47+
};

‎package.json

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "react-deep-match",
3+
"version": "1.0.0",
4+
"description": "a deep regex match component for react",
5+
"main": "lib/index.js",
6+
"types": "lib/index.d.js",
7+
"scripts": {
8+
"build": "webpack --define process.env.NODE_ENV=\"'production'\"",
9+
"build:dist": "webpack -p --output-path=\"./dist\"",
10+
"prepublish": "npm run build",
11+
"start": "webpack-dev-server --config ./demo/webpack.config.js"
12+
},
13+
"keywords": [
14+
"react-deep-match",
15+
"deep-match",
16+
"highlight",
17+
"match",
18+
"react",
19+
"typescript"
20+
],
21+
"repository": {
22+
"type": "git",
23+
"url": "https://github.com/dt-fe/react-deep-match.git"
24+
},
25+
"bugs": {
26+
"url": "https://github.com/dt-fe/react-deep-match/issues"
27+
},
28+
"homepage": "https://github.com/dt-fe/react-deep-match",
29+
"author": "[email protected]",
30+
"license": "MIT",
31+
"devDependencies": {
32+
"@types/react": "^15.0.22",
33+
"@types/react-dom": "^0.14.23",
34+
"@types/webpack-env": "^1.13.0",
35+
"awesome-typescript-loader": "^3.1.2",
36+
"css-loader": "^0.28.0",
37+
"react": "^15.5.4",
38+
"react-dom": "^15.5.4",
39+
"style-loader": "^0.16.1",
40+
"typescript": "^2.2.2",
41+
"webpack": "^2.4.1",
42+
"webpack-dev-server": "^2.4.2"
43+
}
44+
}

‎src/index.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as React from 'react';
2+
3+
export interface HighlightWordProps {
4+
text: string;
5+
keyword: string;
6+
}
7+
8+
const HighlightWord: React.SFC<HighlightWordProps> = ({ text, keyword }) => {
9+
if (!text || !keyword) {
10+
return <span>{text}</span>;
11+
}
12+
const reg = new RegExp(
13+
keyword.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'),
14+
'gi'
15+
);
16+
const matched = text.match(reg);
17+
const result = text.split(reg).map((partial, i) => {
18+
return i > 0
19+
? [<span className="highlight">{matched[i - 1]}</span>, partial]
20+
: partial;
21+
});
22+
return <span>{result}</span>;
23+
};
24+
25+
export default HighlightWord;

‎tsconfig.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"compilerOptions": {
3+
"outDir": "./lib/",
4+
"sourceMap": true,
5+
"noImplicitAny": true,
6+
"module": "commonjs",
7+
"target": "es5",
8+
"jsx": "react",
9+
"allowSyntheticDefaultImports": true,
10+
"declaration": true
11+
},
12+
"include": ["src/**/*", "demo/**/*"]
13+
}

‎webpack.config.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const path = require('path');
2+
3+
module.exports = {
4+
entry: ['./src/index'],
5+
externals: {
6+
react: 'react'
7+
},
8+
output: {
9+
filename: 'index.js',
10+
path: path.resolve(__dirname, 'lib'),
11+
libraryTarget: 'umd'
12+
},
13+
resolve: {
14+
extensions: ['.ts', '.tsx', '.js']
15+
},
16+
module: {
17+
loaders: [
18+
{
19+
test: /\.tsx?$/,
20+
exclude: /node_modules/,
21+
loaders: ['awesome-typescript-loader']
22+
},
23+
{
24+
test: /\.css?$/,
25+
loaders: ['style-loader', 'css-loader']
26+
}
27+
]
28+
}
29+
};

0 commit comments

Comments
 (0)