initial commit

Madadata · Jul 18, 2016 · 5502f1a · 5502f1a
commit 5502f1a
Show file tree

Hide file tree

Showing 15 changed files with 339 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,8 @@
+{
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": [
+    ["module-alias", [
+      { "src": "./src", "expose": "src" }
+    ]]
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,45 @@
+# project specific 
+dist/
+
+# Git
+.git
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+.DS_Store
diff --git a/App.js b/App.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import MDSearchBox from './src/MDSearchBox.jsx';
+
+const App = () => (
+  <div>
+    <MDSearchBox
+      onChange={(text) => { console.log(`changed to ${text}`); }}
+    />
+  </div>
+);
+
+export default App;
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 MadaData
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,15 @@
+# MDSearchBox
+
+[![Build Status](https://travis-ci.org/Madadata/MDSearchBox.svg?branch=master)](https://travis-ci.org/Madadata/MDSearchBox)
+[![Dependency Status](https://dependencyci.com/github/Madadata/MDSearchBox/badge)](https://dependencyci.com/github/Madadata/MDSearchBox)
+[![GitHub issues](https://img.shields.io/github/issues/Madadata/MDSearchBox.svg)](https://github.com/Madadata/MDSearchBox/issues)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/Madadata/MDSearchBox/master/LICENSE)
+
+[![NPM](https://nodei.co/npm/MDSearchBox.png)](https://nodei.co/npm/MDSearchBox/)
+
+# Properties
+----
+* **text**:     string - the default string to search
+* **onChange**: (text) => () - the function fired every time the input text changes.
+* **width**:    number - width of the search box
+* **height**:   number - height of the search box
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>MDSearchBox</title>
+    <style>
+      @import url(http://weloveiconfonts.com/api/?family=fontawesome);
+      /* fontawesome */
+      [class*="fontawesome-"]:before {
+        font-family: 'FontAwesome', sans-serif;
+      }
+
+      body {
+        background-color: #ddd;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="dist/index.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,2 @@
+var MDSearchBox = require('./lib/MDSearchBox').default;
+module.exports = MDSearchBox;
diff --git a/main.js b/main.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import App from './App';
+
+ReactDom.render(
+  <App />,
+  document.getElementById('app')
+);
diff --git a/package.json b/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "mdsearchbox",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack-dev-server --inline --hot --port 3000",
+    "compile": "npm-run-all --parallel compile:source compile:postcss",
+    "compile:postcss": "postcss  --use precss --use postcss-cssnext -d lib src/*.css",
+    "compile:source": "babel src --out-dir lib",
+    "prepublish": "npm-run-all clean compile",
+    "clean": "rimraf lib dist",
+    "test:watch": "mocha --watch",
+    "test": "mocha"
+  },
+  "keywords": [],
+  "author": "zhenghe",
+  "license": "MIT",
+  "config": {
+    "ghooks": {
+      "pre-commit": "npm run prepublish"
+    }
+  },
+  "peerDependencies": {
+    "react": "15.x",
+    "react-dom": "15.x"
+  },
+  "devDependencies": {
+    "babel-cli": "6.10.1",
+    "babel-core": "6.10.4",
+    "babel-loader": "6.2.4",
+    "babel-plugin-module-alias": "1.5.0",
+    "babel-preset-es2015": "6.9.0",
+    "babel-preset-react": "6.11.1",
+    "babel-preset-react-hmre": "1.1.1",
+    "babel-preset-stage-0": "6.5.0",
+    "css-loader": "0.23.1",
+    "enzyme": "2.4.1",
+    "expect": "1.20.2",
+    "expect-jsx": "2.6.0",
+    "ghooks": "1.3.2",
+    "ignore-styles": "4.0.0",
+    "jsdom": "9.4.1",
+    "mocha": "2.5.3",
+    "npm-run-all": "2.3.0",
+    "postcss": "5.1.0",
+    "postcss-cli": "2.5.2",
+    "postcss-cssnext": "2.7.0",
+    "postcss-loader": "0.9.1",
+    "precss": "1.4.0",
+    "react-addons-test-utils": "15.2.1",
+    "style-loader": "0.13.1",
+    "url-loader": "0.5.7",
+    "webpack": "1.13.1",
+    "webpack-dev-server": "1.14.1"
+  }
+}
diff --git a/src/MDSearchBox.css b/src/MDSearchBox.css
@@ -0,0 +1,23 @@
+:local .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 300px;
+  border: 1px solid #ccc;
+  background-color: white;
+
+  .searchbox {
+    margin: 10px 10px;
+    display: flex;
+    flex-flow: row nowrap;
+    .input {
+      flex-grow: 1;
+      font-size: 15px;
+      margin-left: 10px;
+      border-radius: 0px;
+      border-style: none;
+      outline:none;
+    }
+  }
+}
diff --git a/src/MDSearchBox.jsx b/src/MDSearchBox.jsx
@@ -0,0 +1,55 @@
+import React, { PropTypes, Component } from 'react';
+import styles from './MDSearchBox.css';
+
+class MDSearchBox extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { text: this.props.text };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(e) {
+    e.preventDefault();
+    const text = this.refs.searchbox.value;
+    this.setState({ text });
+    this.props.onChange(text);
+  }
+
+  render() {
+    const { width, height } = this.props;
+    const style = { width, height };
+    return (
+      <div className={styles.container} style={style}>
+        <div className={styles.searchbox}>
+          <span className="fontawesome-search"></span>
+          <input
+            type="searchbox"
+            id="searchbox"
+            ref="searchbox"
+            placeholder="搜索"
+            onChange={this.onChange}
+            className={styles.input}
+            value={!!this.props.text || null}
+          />
+        </div>
+      </div>
+    );
+  }
+
+}
+
+MDSearchBox.propTypes = {
+  text: PropTypes.string,
+  onChange: PropTypes.func,
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+MDSearchBox.defaultProps = {
+  text: '',
+  width: 300,
+  height: 42,
+}
+
+export default MDSearchBox;
diff --git a/test/MDSearchBox.spec.js b/test/MDSearchBox.spec.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import expect from 'expect';
+import expectJSX from 'expect-jsx';
+import { shallow } from 'enzyme';
+import { createRenderer } from 'react-addons-test-utils';
+import MDSearchBox from 'src/MDSearchBox';
+
+expect.extend(expectJSX);
+
+describe('MDSearchBox', () => {
+  it('should work', () => {
+
+  })
+});
diff --git a/test/mocha.opts b/test/mocha.opts
@@ -0,0 +1,3 @@
+--require babel-register
+--require ignore-styles
+--require ./test/setup
diff --git a/test/setup.js b/test/setup.js
@@ -0,0 +1,13 @@
+import jsdom from 'jsdom';
+
+function setupDom() {
+  if (typeof document !== 'undefined') {
+    return;
+  }
+
+  global.document = jsdom.jsdom('<html><body></body></html>');
+  global.window = document.defaultView;
+  global.navigator = window.navigator;
+};
+
+setupDom();
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,41 @@
+const cssnext = require('postcss-cssnext');
+const precss = require('precss');
+const path = require('path');
+
+module.exports = {
+  entry: './main.js',
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'index.js',
+    publicPath: '/dist/',
+  },
+  extensions: [
+    "", ".js", ".jsx",
+  ],
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel',
+        query: {
+          presets: ['es2015', 'stage-0', 'react', 'react-hmre'],
+        }
+      },
+      {
+        test: /\.css$/,
+        loader: 'style!css!postcss'
+      },
+      {
+        test: /\.png$/,
+        loader: 'url-loader'
+      }
+    ]
+  },
+  postcss: function() {
+    return [
+      precss,
+      cssnext
+    ];
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		var MDSearchBox = require('./lib/MDSearchBox').default;
		module.exports = MDSearchBox;