build search bar

nhkyxx · Dec 22, 2018 · e04c625 · e04c625
1 parent e51c37f
commit e04c625
Show file tree

Hide file tree

Showing 46 changed files with 2,641 additions and 179 deletions.
diff --git a/.gitignore b/.gitignore
@@ -28,3 +28,4 @@ docs/html
 app/css
 app/js
 app/images
+app/fonts
diff --git a/app/index.html b/app/index.html
@@ -15,8 +15,8 @@
   <link type="text/css" rel="stylesheet" href="./css/app.css">
   <script src="js/lib.js"></script>
 </head>
-<body>
-<div class="app" id="app"></div>
+<body ontouchstart>
+<div class="app"></div>
 <script src="./js/app.js"></script>
 </body>
 </html>
diff --git a/assets/fonts/Dressedless_Three.svg b/assets/fonts/Dressedless_Three.svg
diff --git a/assets/fonts/Dressedless_Three.ttf b/assets/fonts/Dressedless_Three.ttf
diff --git a/assets/fonts/FontAwesome.otf b/assets/fonts/FontAwesome.otf
diff --git a/assets/fonts/fontawesome-webfont.eot b/assets/fonts/fontawesome-webfont.eot
diff --git a/assets/fonts/fontawesome-webfont.svg b/assets/fonts/fontawesome-webfont.svg
diff --git a/assets/fonts/fontawesome-webfont.ttf b/assets/fonts/fontawesome-webfont.ttf
diff --git a/assets/fonts/fontawesome-webfont.woff b/assets/fonts/fontawesome-webfont.woff
diff --git a/assets/fonts/fontawesome-webfont.woff2 b/assets/fonts/fontawesome-webfont.woff2
diff --git a/assets/images/codelf_logo.png b/assets/images/codelf_logo.png
diff --git a/assets/images/paypal.png b/assets/images/paypal.png
diff --git a/assets/images/twohardtings.jpg b/assets/images/twohardtings.jpg
diff --git a/assets/images/wechatpay.jpg b/assets/images/wechatpay.jpg
diff --git a/assets/images/zhifubao.png b/assets/images/zhifubao.png
diff --git a/build-system/build.js b/build-system/build.js
@@ -52,6 +52,11 @@ gulp.task('build:images', 'Builds the app style.', () => {
     .pipe(gulp.dest('./app/images/'));
 });
 
+gulp.task('build:fonts', 'Builds the app fonts.', () => {
+  return gulp.src('./assets/fonts/**/*.*')
+    .pipe(gulp.dest('./app/fonts/'));
+});
+
 gulp.task('build:extra', 'Builds extra files.', () => {
   return Promise.all(require('../lib.config').extra.map(key => {
     const dest = Object.keys(key);
@@ -62,5 +67,13 @@ gulp.task('build:extra', 'Builds extra files.', () => {
 });
 
 gulp.task('build', 'Builds the app.', cb => {
-  runSequence(['build:extra', 'build:images', 'build:app-js', 'build:lib-css', 'build:app-css', 'build:lib-js'], cb);
+  runSequence([
+    'build:extra',
+    'build:fonts',
+    'build:images',
+    'build:app-js',
+    'build:lib-css',
+    'build:app-css',
+    'build:lib-js'
+  ], cb);
 });
diff --git a/gulpfile.js b/gulpfile.js
@@ -13,7 +13,8 @@ gulp.task('default', (cb) => {
   );
   runSequence(
     'clean', 'lint',
-    'build:extra', 'build:images', 'build:app-css', 'build:lib-js', 'build:lib-css', 'watch', 'server', () => {
+    'build:fonts', 'build:extra', 'build:images', 'build:app-css', 'build:lib-js', 'build:lib-css',
+    'watch', 'server', () => {
     cb();
     $.util.log(
       $.util.colors.green('Ready! Run "gulp help" for more build command usages.'), '\n'

diff --git a/lib.config.js b/lib.config.js
@@ -2,11 +2,12 @@
 
 exports.js = [
   './node_modules/react/umd/react.production.min.js',
-  './node_modules/react-dom/umd/react-dom.production.min.js'
+  './node_modules/react-dom/umd/react-dom.production.min.js',
 ];
 
 exports.css = [
   './node_modules/semantic-ui-css/semantic.min.css',
+  './node_modules/animate.css/animate.min.css'
 ];
 
 exports.extra = [{

diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.0.0",
+    "animate.css": "^3.7.0",
     "events": "^3.0.0",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",

diff --git a/src/App.js b/src/App.js
@@ -1,14 +1,7 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import MainContainer from './containers/MainContainer';
 
-class App extends React.Component {
-  render() {
-    return <MainContainer/>
-  }
-}
-
 ReactDOM.render(
-  <App name="App"/>,
+  <MainContainer/>,
   document.querySelector('.app')
 );
diff --git a/src/components/Button.js b/src/components/Button.js
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import {Dropdown, Icon, Input} from 'semantic-ui-react';
+
+export default class SearchBar extends React.Component {
+  input = React.createRef();
+  select = React.createRef();
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      type: 'title',
+      prevProps: props
+    }
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    // avoid calculating expensive derived data
+    if (prevState.prevProps === nextProps) { return null}
+    let newState = {
+      prevProps: nextProps // prevProps memoization
+    }
+    // derived state from props
+    if (prevState.prevProps.searchType != nextProps.searchType) {
+      newState.type = nextProps.searchType;
+    }
+    return newState;
+  }
+
+  handleSearch = () => {
+    this.props.onSearch({
+      type: this.state.type,
+      value: this.input.current.inputRef.value
+    });
+  }
+
+  handleTypeChange = (e, { value }) => this.setState({ type: value });
+
+  render() {
+    return (
+      <div className='search-bar'>
+        <div className='search-bar__desc'>
+          Search over GitHub, Bitbucket, GitLab to find real-world usage variable names
+        </div>
+        <Input className='search-bar__input'
+               icon fluid placeholder={this.props.placeholder} size={document.body.offsetWidth > 800 ? 'huge' : ''}>
+          <Dropdown text='' icon='filter' className='search-bar__dropdown'>
+            <Dropdown.Menu>
+              <Dropdown.Item icon='undo' text='All 90 Languages (Reset)' />
+              <Dropdown.Menu scrolling>
+                <Dropdown.Item text='Open...' description='ctrl + o' />
+                <Dropdown.Item text='Save as...' description='ctrl + s' />
+                <Dropdown.Item text='Rename' description='ctrl + r' />
+                <Dropdown.Item text='Make a copy' />
+                <Dropdown.Item icon='folder' text='Move to folder' />
+                <Dropdown.Item icon='trash' text='Move to trash' />
+                <Dropdown.Item icon='trash' text='Move to trash' />
+                <Dropdown.Item icon='trash' text='Move to trash' />
+                <Dropdown.Item icon='trash' text='Move to trash' />
+                <Dropdown.Item icon='trash' text='Move to trash' />
+                <Dropdown.Item icon='trash' text='Move to trash' />
+                <Dropdown.Item icon='trash' text='Move to trash' />
+              </Dropdown.Menu>
+            </Dropdown.Menu>
+          </Dropdown>
+          <input defaultValue={this.props.searchValue}
+                 onKeyPress={e => {e.key === 'Enter' && this.handleSearch()}}/>
+          <Icon name='search' link onClick={() => this.handleSearch()}/>
+        </Input>
+        <div className='search-bar__helper'>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/src/components/Title.js b/src/components/Title.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default class Title extends React.Component {
+
+  render() {
+    return (
+      <header className='title animated'>
+        <h1><a href="./"><span>C</span><span>O</span><span>D</span><span>E</span><span>L</span><span>F</span></a></h1>
+      </header>
+    )
+  }
+}
diff --git a/src/components/VariableList.js b/src/components/VariableList.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import {Dropdown, Icon, Input } from 'semantic-ui-react';
+
+export default class VariableList extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+    }
+  }
+
+  render() {
+    return (
+      <div className='search-bar'>
+
+      </div>
+    )
+  }
+}
diff --git a/src/containers/MainContainer.js b/src/containers/MainContainer.js
@@ -1,13 +1,32 @@
 import React from 'react';
-import Button from '../components/Button'
+import {Container} from 'semantic-ui-react';
+import SearchBar from '../components/SearchBar';
+import Title from '../components/Title';
 
 export default class MainContainer extends React.Component {
+  state = {
+    searchValue: null,
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.location !== prevProps.location) {
+    }
+  }
+
+  componentDidMount() {
+    document.body.classList.add('dark')
+  }
+
   render() {
     return (
-      <div>
-        <div>Hello World!</div>
-        <Button name="click me!"/>
-      </div>
+      <Container className='main'>
+        <Title {...this.state}/>
+        <SearchBar placeholder='AI 人工智能' {...this.state}/>
+      </Container>
     )
   }
 }
diff --git a/src/models/BaseModel.js b/src/models/BaseModel.js
@@ -0,0 +1,79 @@
+import EventEmitter from 'events';
+
+class Mutation {
+  constructor(data) {
+    this._data = data;
+    this._serialize();
+    this.has = this.has.bind(this);
+  }
+
+  _serialize() {
+    Object.keys(this._data).forEach(key => {
+      this[key] = true;
+    });
+  }
+
+  get() {
+    return this._data;
+  }
+
+  has(fields) {
+    if (/string/i.test(typeof fields)) {
+      fields = fields.split(',');
+    }
+    if (Array.isArray(fields)) {
+      return fields.every((key) => {
+        key = key.trim();
+        return this[key];
+      });
+    }
+    return false;
+  }
+}
+
+class BaseModel extends EventEmitter {
+  constructor() {
+    super();
+    this.on('error', () => {});
+    this.setMaxListeners(99);
+    this._updateEventName = 'update';
+    this._data = {};
+  }
+
+  set(data) {
+    let prevData = Object.assign({}, this._data);
+    this._data = data || {};
+    this.notify(prevData, Object.assign({}, prevData, data, {isReset: true}));
+  }
+
+  get() {
+    return this._data;
+  }
+
+  create(data) {
+    let instance = Object.create(Object.getPrototypeOf(this));
+    instance._data = data;
+    return instance;
+  }
+
+  notify(prevData, mutationData) {
+    let data = Object.assign({}, this._data);
+    this.emit(this._updateEventName, data, prevData || data, new Mutation(mutationData));
+  }
+
+  update(data) {
+    let prevData = Object.assign({}, this._data);
+    Object.assign(this._data, data);
+    this.notify(prevData, data);
+  }
+
+  onUpdated(listener) {
+    this.on(this._updateEventName, listener);
+  }
+
+  offUpdated(listener) {
+    this.removeListener(this._updateEventName, listener);
+  }
+}
+
+export default BaseModel;
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,3 +28,4 @@ docs/html @@
     app/css
     app/js
     app/images
+    app/fonts