Skip to content

Commit e04c625

Browse files
unbugunbug
committed
build search bar
1 parent e51c37f commit e04c625

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+2641
-179
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,4 @@ docs/html
2828
app/css
2929
app/js
3030
app/images
31+
app/fonts

‎app/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
<link type="text/css" rel="stylesheet" href="./css/app.css">
1616
<script src="js/lib.js"></script>
1717
</head>
18-
<body>
19-
<div class="app" id="app"></div>
18+
<body ontouchstart>
19+
<div class="app"></div>
2020
<script src="./js/app.js"></script>
2121
</body>
2222
</html>

‎assets/fonts/Dressedless_Three.svg

+281
Loading

‎assets/fonts/Dressedless_Three.ttf

13.7 KB
Binary file not shown.

‎assets/fonts/FontAwesome.otf

107 KB
Binary file not shown.

‎assets/fonts/fontawesome-webfont.eot

69.1 KB
Binary file not shown.

‎assets/fonts/fontawesome-webfont.svg

+655
Loading

‎assets/fonts/fontawesome-webfont.ttf

139 KB
Binary file not shown.

‎assets/fonts/fontawesome-webfont.woff

81.6 KB
Binary file not shown.

‎assets/fonts/fontawesome-webfont.woff2

65.1 KB
Binary file not shown.

‎assets/images/codelf_logo.png

3.87 KB
Loading

‎assets/images/paypal.png

8.26 KB
Loading

‎assets/images/twohardtings.jpg

24.4 KB
Loading

‎assets/images/wechatpay.jpg

19.9 KB
Loading

‎assets/images/zhifubao.png

3.97 KB
Loading

‎build-system/build.js

+14-1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,11 @@ gulp.task('build:images', 'Builds the app style.', () => {
5252
.pipe(gulp.dest('./app/images/'));
5353
});
5454

55+
gulp.task('build:fonts', 'Builds the app fonts.', () => {
56+
return gulp.src('./assets/fonts/**/*.*')
57+
.pipe(gulp.dest('./app/fonts/'));
58+
});
59+
5560
gulp.task('build:extra', 'Builds extra files.', () => {
5661
return Promise.all(require('../lib.config').extra.map(key => {
5762
const dest = Object.keys(key);
@@ -62,5 +67,13 @@ gulp.task('build:extra', 'Builds extra files.', () => {
6267
});
6368

6469
gulp.task('build', 'Builds the app.', cb => {
65-
runSequence(['build:extra', 'build:images', 'build:app-js', 'build:lib-css', 'build:app-css', 'build:lib-js'], cb);
70+
runSequence([
71+
'build:extra',
72+
'build:fonts',
73+
'build:images',
74+
'build:app-js',
75+
'build:lib-css',
76+
'build:app-css',
77+
'build:lib-js'
78+
], cb);
6679
});

‎gulpfile.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ gulp.task('default', (cb) => {
1313
);
1414
runSequence(
1515
'clean', 'lint',
16-
'build:extra', 'build:images', 'build:app-css', 'build:lib-js', 'build:lib-css', 'watch', 'server', () => {
16+
'build:fonts', 'build:extra', 'build:images', 'build:app-css', 'build:lib-js', 'build:lib-css',
17+
'watch', 'server', () => {
1718
cb();
1819
$.util.log(
1920
$.util.colors.green('Ready! Run "gulp help" for more build command usages.'), '\n'

‎lib.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22

33
exports.js = [
44
'./node_modules/react/umd/react.production.min.js',
5-
'./node_modules/react-dom/umd/react-dom.production.min.js'
5+
'./node_modules/react-dom/umd/react-dom.production.min.js',
66
];
77

88
exports.css = [
99
'./node_modules/semantic-ui-css/semantic.min.css',
10+
'./node_modules/animate.css/animate.min.css'
1011
];
1112

1213
exports.extra = [{

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
},
6363
"dependencies": {
6464
"@babel/polyfill": "^7.0.0",
65+
"animate.css": "^3.7.0",
6566
"events": "^3.0.0",
6667
"react": "^16.5.2",
6768
"react-dom": "^16.5.2",

‎src/App.js

+1-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
1-
import React from 'react';
21
import ReactDOM from 'react-dom';
32
import MainContainer from './containers/MainContainer';
43

5-
class App extends React.Component {
6-
render() {
7-
return <MainContainer/>
8-
}
9-
}
10-
114
ReactDOM.render(
12-
<App name="App"/>,
5+
<MainContainer/>,
136
document.querySelector('.app')
147
);

‎src/components/Button.js

-15
This file was deleted.

‎src/components/SearchBar.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from 'react';
2+
import {Dropdown, Icon, Input} from 'semantic-ui-react';
3+
4+
export default class SearchBar extends React.Component {
5+
input = React.createRef();
6+
select = React.createRef();
7+
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
type: 'title',
12+
prevProps: props
13+
}
14+
}
15+
16+
static getDerivedStateFromProps(nextProps, prevState) {
17+
// avoid calculating expensive derived data
18+
if (prevState.prevProps === nextProps) { return null}
19+
let newState = {
20+
prevProps: nextProps // prevProps memoization
21+
}
22+
// derived state from props
23+
if (prevState.prevProps.searchType != nextProps.searchType) {
24+
newState.type = nextProps.searchType;
25+
}
26+
return newState;
27+
}
28+
29+
handleSearch = () => {
30+
this.props.onSearch({
31+
type: this.state.type,
32+
value: this.input.current.inputRef.value
33+
});
34+
}
35+
36+
handleTypeChange = (e, { value }) => this.setState({ type: value });
37+
38+
render() {
39+
return (
40+
<div className='search-bar'>
41+
<div className='search-bar__desc'>
42+
Search over GitHub, Bitbucket, GitLab to find real-world usage variable names
43+
</div>
44+
<Input className='search-bar__input'
45+
icon fluid placeholder={this.props.placeholder} size={document.body.offsetWidth > 800 ? 'huge' : ''}>
46+
<Dropdown text='' icon='filter' className='search-bar__dropdown'>
47+
<Dropdown.Menu>
48+
<Dropdown.Item icon='undo' text='All 90 Languages (Reset)' />
49+
<Dropdown.Menu scrolling>
50+
<Dropdown.Item text='Open...' description='ctrl + o' />
51+
<Dropdown.Item text='Save as...' description='ctrl + s' />
52+
<Dropdown.Item text='Rename' description='ctrl + r' />
53+
<Dropdown.Item text='Make a copy' />
54+
<Dropdown.Item icon='folder' text='Move to folder' />
55+
<Dropdown.Item icon='trash' text='Move to trash' />
56+
<Dropdown.Item icon='trash' text='Move to trash' />
57+
<Dropdown.Item icon='trash' text='Move to trash' />
58+
<Dropdown.Item icon='trash' text='Move to trash' />
59+
<Dropdown.Item icon='trash' text='Move to trash' />
60+
<Dropdown.Item icon='trash' text='Move to trash' />
61+
<Dropdown.Item icon='trash' text='Move to trash' />
62+
</Dropdown.Menu>
63+
</Dropdown.Menu>
64+
</Dropdown>
65+
<input defaultValue={this.props.searchValue}
66+
onKeyPress={e => {e.key === 'Enter' && this.handleSearch()}}/>
67+
<Icon name='search' link onClick={() => this.handleSearch()}/>
68+
</Input>
69+
<div className='search-bar__helper'>
70+
</div>
71+
</div>
72+
)
73+
}
74+
}

‎src/components/Title.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
3+
export default class Title extends React.Component {
4+
5+
render() {
6+
return (
7+
<header className='title animated'>
8+
<h1><a href="./"><span>C</span><span>O</span><span>D</span><span>E</span><span>L</span><span>F</span></a></h1>
9+
</header>
10+
)
11+
}
12+
}

‎src/components/VariableList.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import {Dropdown, Icon, Input } from 'semantic-ui-react';
3+
4+
export default class VariableList extends React.Component {
5+
6+
constructor(props) {
7+
super(props);
8+
this.state = {
9+
}
10+
}
11+
12+
render() {
13+
return (
14+
<div className='search-bar'>
15+
16+
</div>
17+
)
18+
}
19+
}

‎src/containers/MainContainer.js

+24-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,32 @@
11
import React from 'react';
2-
import Button from '../components/Button'
2+
import {Container} from 'semantic-ui-react';
3+
import SearchBar from '../components/SearchBar';
4+
import Title from '../components/Title';
35

46
export default class MainContainer extends React.Component {
7+
state = {
8+
searchValue: null,
9+
}
10+
11+
constructor(props) {
12+
super(props);
13+
}
14+
15+
componentDidUpdate(prevProps) {
16+
if (this.props.location !== prevProps.location) {
17+
}
18+
}
19+
20+
componentDidMount() {
21+
document.body.classList.add('dark')
22+
}
23+
524
render() {
625
return (
7-
<div>
8-
<div>Hello World!</div>
9-
<Button name="click me!"/>
10-
</div>
26+
<Container className='main'>
27+
<Title {...this.state}/>
28+
<SearchBar placeholder='AI 人工智能' {...this.state}/>
29+
</Container>
1130
)
1231
}
1332
}

‎src/models/BaseModel.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import EventEmitter from 'events';
2+
3+
class Mutation {
4+
constructor(data) {
5+
this._data = data;
6+
this._serialize();
7+
this.has = this.has.bind(this);
8+
}
9+
10+
_serialize() {
11+
Object.keys(this._data).forEach(key => {
12+
this[key] = true;
13+
});
14+
}
15+
16+
get() {
17+
return this._data;
18+
}
19+
20+
has(fields) {
21+
if (/string/i.test(typeof fields)) {
22+
fields = fields.split(',');
23+
}
24+
if (Array.isArray(fields)) {
25+
return fields.every((key) => {
26+
key = key.trim();
27+
return this[key];
28+
});
29+
}
30+
return false;
31+
}
32+
}
33+
34+
class BaseModel extends EventEmitter {
35+
constructor() {
36+
super();
37+
this.on('error', () => {});
38+
this.setMaxListeners(99);
39+
this._updateEventName = 'update';
40+
this._data = {};
41+
}
42+
43+
set(data) {
44+
let prevData = Object.assign({}, this._data);
45+
this._data = data || {};
46+
this.notify(prevData, Object.assign({}, prevData, data, {isReset: true}));
47+
}
48+
49+
get() {
50+
return this._data;
51+
}
52+
53+
create(data) {
54+
let instance = Object.create(Object.getPrototypeOf(this));
55+
instance._data = data;
56+
return instance;
57+
}
58+
59+
notify(prevData, mutationData) {
60+
let data = Object.assign({}, this._data);
61+
this.emit(this._updateEventName, data, prevData || data, new Mutation(mutationData));
62+
}
63+
64+
update(data) {
65+
let prevData = Object.assign({}, this._data);
66+
Object.assign(this._data, data);
67+
this.notify(prevData, data);
68+
}
69+
70+
onUpdated(listener) {
71+
this.on(this._updateEventName, listener);
72+
}
73+
74+
offUpdated(listener) {
75+
this.removeListener(this._updateEventName, listener);
76+
}
77+
}
78+
79+
export default BaseModel;

0 commit comments

Comments
 (0)