From a55d7e904962d86031533597e013bd5b3c39ba4a Mon Sep 17 00:00:00 2001 From: liushzh Date: Wed, 6 Sep 2017 16:23:21 +0800 Subject: [PATCH] initializaion --- .gitignore | 38 ++++++++++++ .npmignore | 28 +++++++++ .travis.yml | 22 +++++++ HISTORY.md | 0 README.md | 61 ++++++++++++++++++ README_EN.md | 38 ++++++++++++ demo/SearchPanelDemo.js | 5 ++ demo/SearchPanelDemo.scss | 6 ++ demo/atom-one-dark.css | 96 +++++++++++++++++++++++++++++ demo/demolist/Demo1.js | 126 ++++++++++++++++++++++++++++++++++++++ demo/index-demo-base.js | 71 +++++++++++++++++++++ demo/index.js | 72 ++++++++++++++++++++++ docs/api.md | 11 ++++ docs/api_en.md | 5 ++ index.html | 23 +++++++ package.json | 59 ++++++++++++++++++ src/SearchPanel.js | 85 +++++++++++++++++++++++++ src/SearchPanel.scss | 14 +++++ src/index.js | 2 + test/index.test.js | 11 ++++ 20 files changed, 773 insertions(+) create mode 100644 .gitignore create mode 100644 .npmignore create mode 100644 .travis.yml create mode 100644 HISTORY.md create mode 100644 README.md create mode 100644 README_EN.md create mode 100644 demo/SearchPanelDemo.js create mode 100644 demo/SearchPanelDemo.scss create mode 100644 demo/atom-one-dark.css create mode 100644 demo/demolist/Demo1.js create mode 100644 demo/index-demo-base.js create mode 100644 demo/index.js create mode 100644 docs/api.md create mode 100644 docs/api_en.md create mode 100644 index.html create mode 100644 package.json create mode 100644 src/SearchPanel.js create mode 100644 src/SearchPanel.scss create mode 100644 src/index.js create mode 100644 test/index.test.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..25052a1 --- /dev/null +++ b/.gitignore @@ -0,0 +1,38 @@ +# 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 + + +# Dependency directories +node_modules +jspm_packages + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history + +dist +coverage diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..b6fadc1 --- /dev/null +++ b/.npmignore @@ -0,0 +1,28 @@ +bower_components/ +*.cfg +node_modules/ +nohup.out +*.iml +.idea/ +.ipr +.iws +*~ +~* +*.diff +*.log +*.patch +*.bak +.DS_Store +Thumbs.db +.project +.*proj +.svn/ +*.swp +out/ +.build +node_modules +_site +sea-modules +spm_modules +.cache +coverage diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..e5a6d34 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,22 @@ +sudo: false + +language: node_js + +node_js: + - "6" + +service_name: travis-ci +repo_token: add + +env: + global: + - NODE_ENV=travisci + - NPM_CONFIG_PROGRESS="false" + +before_install: + - npm install -g bee-tools + +script: npm test + +after_script: + - npm run coveralls diff --git a/HISTORY.md b/HISTORY.md new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md new file mode 100644 index 0000000..5372d47 --- /dev/null +++ b/README.md @@ -0,0 +1,61 @@ +# bee-search-panel + +[![npm version](https://img.shields.io/npm/v/bee-search-panel.svg)](https://www.npmjs.com/package/bee-search-panel) +[![Build Status](https://img.shields.io/travis/tinper-bee/bee-search-panel/master.svg)](https://travis-ci.org/tinper-bee/bee-search-panel) +[![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-search-panel/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-search-panel?branch=master) +[![devDependency Status](https://img.shields.io/david/dev/tinper-bee/bee-search-panel.svg)](https://david-dm.org/tinper-bee/bee-search-panel#info=devDependencies) +[![NPM downloads](http://img.shields.io/npm/dm/bee-search-panel.svg?style=flat)](https://npmjs.org/package/bee-search-panel) +[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tinper-bee/bee-search-panel.svg)](http://isitmaintained.com/project/tinper-bee/bee-search-panel "Average time to resolve an issue") +[![Percentage of issues still open](http://isitmaintained.com/badge/open/tinper-bee/bee-search-panel.svg)](http://isitmaintained.com/project/tinper-bee/bee-search-panel "Percentage of issues still open") + + +react bee-search-panel component for tinper-bee + +折叠查询条件 + +## 使用方法 + +``` +import SearchPanel from 'bee-search-panel'; + +class SearchPanelDemo extends Component { + render() { + return ( + + ) + } +} +``` +#### 样式引入 +- 可以使用link引入build目录下SearchPanel.css +``` + +``` +- 可以在js中import样式 +```js +import "./node_modules/bee-search-panel/src/SearchPanel.scss" +//或是 +import "./node_modules/bee-search-panel/build/SearchPanel.css" +``` + + +## API + +|参数|说明|类型|默认值| +|:--|:---:|:--:|---:| +|searchOpen|是否默认展开|boolean|false| +|showIcon|是否显示展开关闭图标|boolean|true| +|searchHead|标题|string|-| +|searchContent|表单内容|ReactNode/string|-| +|searchClick|查询按钮回调|function|()=>{}| +|clearClick|清空按钮回调|function|()=>{}| + +#### 开发调试 + +```sh +$ npm install -g bee-tools +$ git clone https://github.com/tinper-bee/bee-search-panel +$ cd bee-search-panel +$ npm install +$ npm run dev +``` diff --git a/README_EN.md b/README_EN.md new file mode 100644 index 0000000..dae7c7d --- /dev/null +++ b/README_EN.md @@ -0,0 +1,38 @@ +# bee-search-panel + +[![npm version](https://img.shields.io/npm/v/bee-search-panel.svg)](https://www.npmjs.com/package/bee-search-panel) +[![Build Status](https://img.shields.io/travis/tinper-bee/bee-search-panel/master.svg)](https://travis-ci.org/tinper-bee/bee-search-panel) +[![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-search-panel/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-search-panel?branch=master) +[![devDependency Status](https://img.shields.io/david/dev/tinper-bee/bee-search-panel.svg)](https://david-dm.org/tinper-bee/bee-search-panel#info=devDependencies) +[![NPM downloads](http://img.shields.io/npm/dm/bee-search-panel.svg?style=flat)](https://npmjs.org/package/bee-search-panel) +[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tinper-bee/bee-search-panel.svg)](http://isitmaintained.com/project/tinper-bee/bee-search-panel "Average time to resolve an issue") +[![Percentage of issues still open](http://isitmaintained.com/badge/open/tinper-bee/bee-search-panel.svg)](http://isitmaintained.com/project/tinper-bee/bee-search-panel "Percentage of issues still open") + + + +react bee-search-panel component for tinper-bee + + +## Usage + +```js + + +``` + + + +## API + +|参数|说明|类型|默认值| +|:--|:---:|:--:|---:| + +#### develop + +```sh +$ npm install -g bee-tools +$ git clone https://github.com/tinper-bee/bee-search-panel +$ cd bee-search-panel +$ npm install +$ npm run dev +``` diff --git a/demo/SearchPanelDemo.js b/demo/SearchPanelDemo.js new file mode 100644 index 0000000..742f65d --- /dev/null +++ b/demo/SearchPanelDemo.js @@ -0,0 +1,5 @@ +import SearchPanel from '../src/index'; +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +class Demo extends Component {render(){return( )}} +export default Demo; \ No newline at end of file diff --git a/demo/SearchPanelDemo.scss b/demo/SearchPanelDemo.scss new file mode 100644 index 0000000..97db959 --- /dev/null +++ b/demo/SearchPanelDemo.scss @@ -0,0 +1,6 @@ +@import "../node_modules/tinper-bee-core/scss/index.scss"; +@import "../src/SearchPanel.scss"; +@import "../node_modules/bee-panel/src/Panel.scss"; +@import "../node_modules/bee-layout/src/Layout.scss"; +@import "../node_modules/bee-button/src/Button.scss"; +@import "../node_modules/bee-transition/src/Transition.scss"; \ No newline at end of file diff --git a/demo/atom-one-dark.css b/demo/atom-one-dark.css new file mode 100644 index 0000000..1616aaf --- /dev/null +++ b/demo/atom-one-dark.css @@ -0,0 +1,96 @@ +/* + +Atom One Dark by Daniel Gamage +Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax + +base: #282c34 +mono-1: #abb2bf +mono-2: #818896 +mono-3: #5c6370 +hue-1: #56b6c2 +hue-2: #61aeee +hue-3: #c678dd +hue-4: #98c379 +hue-5: #e06c75 +hue-5-2: #be5046 +hue-6: #d19a66 +hue-6-2: #e6c07b + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #abb2bf; + background: #282c34; +} + +.hljs-comment, +.hljs-quote { + color: #5c6370; + font-style: italic; +} + +.hljs-doctag, +.hljs-keyword, +.hljs-formula { + color: #c678dd; +} + +.hljs-section, +.hljs-name, +.hljs-selector-tag, +.hljs-deletion, +.hljs-subst { + color: #e06c75; +} + +.hljs-literal { + color: #56b6c2; +} + +.hljs-string, +.hljs-regexp, +.hljs-addition, +.hljs-attribute, +.hljs-meta-string { + color: #98c379; +} + +.hljs-built_in, +.hljs-class .hljs-title { + color: #e6c07b; +} + +.hljs-attr, +.hljs-variable, +.hljs-template-variable, +.hljs-type, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-number { + color: #d19a66; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-link, +.hljs-meta, +.hljs-selector-id, +.hljs-title { + color: #61aeee; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +.hljs-link { + text-decoration: underline; +} diff --git a/demo/demolist/Demo1.js b/demo/demolist/Demo1.js new file mode 100644 index 0000000..ceb18ba --- /dev/null +++ b/demo/demolist/Demo1.js @@ -0,0 +1,126 @@ +/** + * + * @title 基础示例 + * @description 基础示例 + * + */ +import React, {Component} from 'react'; +import SearchPanel from '../../src'; +import {FormControl,Row, Col,Label,FormGroup,Radio} from 'tinper-bee' + + +class Demo1 extends Component { + constructor(props){ + super(props); + this.state={ + state:'all', + type:'all', + degree:'all' + } + } + stateChange(value){ + this.setState({ + state:value + }) + } + typeChange(value){ + this.setState({ + type:value + }) + } + degreeChange(value){ + this.setState({ + degree:value + }) + } + search(){ + + } + clear(){ + + } + render() { + let searchContent=()=>{ + return ( +
+ + + + + + + + 全部 + 待处理 + 处理中 + 已完成 + + + + + + + + + + 全部 + 问题 + 建议 + 体验 + + + + + + + + + + 全部 + 一般 + 严重 + 紧急 + + + + + + + + + + + + + + + + + + + + + +
+ ) + } + return ( + + ) + } +} +export default Demo1; \ No newline at end of file diff --git a/demo/index-demo-base.js b/demo/index-demo-base.js new file mode 100644 index 0000000..4fde489 --- /dev/null +++ b/demo/index-demo-base.js @@ -0,0 +1,71 @@ + +import { Con, Row, Col } from 'bee-layout'; +import { Panel } from 'bee-panel'; +import Button from 'bee-button'; +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import SearchPanel from '../src'; + + +const CARET = ; + +const CARETUP = ; + + +{demolist} + +class Demo extends Component { + constructor(props){ + super(props); + this.state = { + open: false + } + this.handleClick = this.handleClick.bind(this); + } + handleClick() { + this.setState({ open: !this.state.open }) + } + + render () { + const { title, example, code, desc } = this.props; + let caret = this.state.open ? CARETUP : CARET; + let text = this.state.open ? "隐藏代码" : "查看代码"; + + const footer = ( + + ); + return ( + +

{ title }

+

{ desc }

+ + 
{ code }
+ + + ) + } +} + +class DemoGroup extends Component { + constructor(props){ + super(props) + } + render () { + return ( + + {DemoArray.map((child,index) => { + + return ( + + ) + + })} + + ) + } +} + +ReactDOM.render(, document.getElementById('tinperBeeDemo')); diff --git a/demo/index.js b/demo/index.js new file mode 100644 index 0000000..cda9f0c --- /dev/null +++ b/demo/index.js @@ -0,0 +1,72 @@ + +import { Con, Row, Col } from 'bee-layout'; +import { Panel } from 'bee-panel'; +import Button from 'bee-button'; +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import SearchPanel from '../src'; + + +const CARET = ; + +const CARETUP = ; + + +var Demo1 = require("./demolist/Demo1");var DemoArray = [{"example":,"title":" 基础示例","code":"/**\n *\n * @title 基础示例\n * @description 基础示例\n *\n */\nimport React, {Component} from 'react';\nimport SearchPanel from 'tinper-bee';\nimport {FormControl,Row, Col,Label,FormGroup,Radio} from 'tinper-bee'\n\n\nclass Demo1 extends Component {\n constructor(props){\n super(props);\n this.state={\n state:'all',\n type:'all',\n degree:'all'\n }\n }\n stateChange(value){\n this.setState({\n state:value\n })\n }\n typeChange(value){\n this.setState({\n type:value\n })\n }\n degreeChange(value){\n this.setState({\n degree:value\n })\n }\n search(){\n\n }\n clear(){\n\n }\n render() {\n let searchContent=()=>{\n return (\n
\n \n \n \n \n \n \n \n 全部\n 待处理\n 处理中\n 已完成\n \n \n \n \n \n \n \n \n \n 全部\n 问题\n 建议\n 体验\n \n \n \n \n \n \n \n \n \n 全部\n 一般\n 严重\n 紧急\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n
\n )\n }\n return (\n \n )\n }\n}\n","desc":" 基础示例"}] + + +class Demo extends Component { + constructor(props){ + super(props); + this.state = { + open: false + } + this.handleClick = this.handleClick.bind(this); + } + handleClick() { + this.setState({ open: !this.state.open }) + } + + render () { + const { title, example, code, desc } = this.props; + let caret = this.state.open ? CARETUP : CARET; + let text = this.state.open ? "隐藏代码" : "查看代码"; + + const footer = ( + + ); + return ( + +

{ title }

+

{ desc }

+ + 
{ code }
+ + + ) + } +} + +class DemoGroup extends Component { + constructor(props){ + super(props) + } + render () { + return ( + + {DemoArray.map((child,index) => { + + return ( + + ) + + })} + + ) + } +} + +ReactDOM.render(, document.getElementById('tinperBeeDemo')); diff --git a/docs/api.md b/docs/api.md new file mode 100644 index 0000000..2231861 --- /dev/null +++ b/docs/api.md @@ -0,0 +1,11 @@ +# SearchPanel +## 代码演示 +## API +|参数|说明|类型|默认值| +|:---|:-----|:----|:------| +|searchOpen|是否默认展开|boolean|false| +|showIcon|是否显示展开关闭图标|boolean|true| +|searchHead|标题|string|-| +|searchContent|表单内容|ReactNode/string|-| +|searchClick|查询按钮回调|function|()=>{}| +|clearClick|清空按钮回调|function|()=>{}| \ No newline at end of file diff --git a/docs/api_en.md b/docs/api_en.md new file mode 100644 index 0000000..1cb6480 --- /dev/null +++ b/docs/api_en.md @@ -0,0 +1,5 @@ +## SearchPanel +## Code display +## API +|Property|Description|Type|Default| +|:---|:-----|:----|:------| \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..277df2f --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + tinper-bee demo + + + + + +
+ + + + + + + + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..f13581a --- /dev/null +++ b/package.json @@ -0,0 +1,59 @@ +{ + "name": "bee-search-panel", + "version": "0.1.0", + "description": "SearchPanel ui component for react", + "keywords": [ + "react", + "react-component", + "bee-search-panel", + "iuap-design", + "tinper-bee", + "SearchPanel" + ], + "engines": { + "node": ">=4.0.0" + }, + "homepage": "https://github.com/tinper-bee/bee-search-panel", + "author": "liushaozhen", + "repository": "http://github.com/tinper-bee/bee-search-panel", + "bugs": "https://github.com/tinper-bee/bee-search-panel/issues", + "license": "MIT", + "main": "./build/index.js", + "config": { + "port": 8000 + }, + "scripts": { + "dev": "bee-tools run start", + "build": "bee-tools run build", + "lint": "bee-tools-test run lint", + "test": "bee-tools-test run test", + "chrome": "bee-tools-test run chrome", + "coveralls": "bee-tools-test run coverage", + "browsers": "bee-tools-test run browsers", + "pub": "bee-tools run pub" + }, + "dependencies": { + "babel-runtime": "^6.23.0", + "bee-form": "^0.1.3", + "bee-form-control": "^0.1.9", + "bee-form-group": "^1.0.11", + "bee-label": "^0.2.2", + "bee-radio": "^0.1.9", + "bee-select": "^0.1.6", + "classnames": "^2.2.5", + "tinper-bee": "^0.6.2", + "tinper-bee-core": "latest" + }, + "devDependencies": { + "chai": "^3.5.0", + "enzyme": "^2.4.1", + "react": "15.3.2", + "react-addons-test-utils": "15.3.2", + "react-dom": "15.3.2", + "console-polyfill": "~0.2.1", + "es5-shim": "~4.1.10", + "bee-panel": "latest", + "bee-layout": "latest", + "bee-button": "latest" + } +} diff --git a/src/SearchPanel.js b/src/SearchPanel.js new file mode 100644 index 0000000..00424bf --- /dev/null +++ b/src/SearchPanel.js @@ -0,0 +1,85 @@ +import React, {Component, PropTypes} from 'react'; +import {Panel} from 'bee-panel'; +import {Row, Col} from 'bee-layout'; +import Button from 'bee-button'; +import classnames from 'classnames'; +const propTypes = { + searchOpen:PropTypes.bool, + showIcon:PropTypes.bool, + searchHead:PropTypes.string, + searchClick:PropTypes.func, + clearClick:PropTypes.func, +}; +const defaultProps = { + searchOpen:false,//是否默认展开，false默认关闭 + showIcon:true,//是否显示icon + searchHead:'', + searchContent:'', + searchClick:()=>{//查询回调 + + }, + clearClick:()=>{//清空回调 + + }, + clsPrefix:'u-search', + style:{} +}; +class SearchPanel extends Component { + constructor(props) { + super(props); + this.state = { + searchOpen: this.props.searchOpen + }; + this.open = this.open.bind(this); + } + + open() { + this.setState({ + searchOpen: !this.state.searchOpen + }) + } + + render() { + const {className,clsPrefix,searchClick,clearClick,searchContent,showIcon,searchHead,searchOpen,style,...others}=this.props; + let header = () => { + return ( +
+ + {searchHead} + + + {this.state.searchOpen ? '收起' : '展开'} + { + showIcon?( ):'' + } + +
+ ) + }; + + return ( +
+ + + + {searchContent} +
+ + +
+ + + +
+ + ) + } +} +; +SearchPanel.propTypes = propTypes; +SearchPanel.defaultProps = defaultProps; +export default SearchPanel; \ No newline at end of file diff --git a/src/SearchPanel.scss b/src/SearchPanel.scss new file mode 100644 index 0000000..26123f2 --- /dev/null +++ b/src/SearchPanel.scss @@ -0,0 +1,14 @@ +@import "../node_modules/tinper-bee-core/scss/minxin-variables"; +@import "../node_modules/tinper-bee-core/scss/minxin-mixins"; +.u-search .u-search-content .u-panel-body:after { + clear: both; +} +.u-search .u-panel-heading{ + cursor: pointer; +} +.u-search .u-search-footer{ + margin-top:10px; +} +.u-search .u-search-footer>.u-button:nth-of-type(1){ + margin-right: 10px; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..96f6083 --- /dev/null +++ b/src/index.js @@ -0,0 +1,2 @@ +import SearchPanel from './SearchPanel'; +export default SearchPanel; \ No newline at end of file diff --git a/test/index.test.js b/test/index.test.js new file mode 100644 index 0000000..ecc0688 --- /dev/null +++ b/test/index.test.js @@ -0,0 +1,11 @@ +import React from 'react'; +import {shallow, mount, render} from 'enzyme'; +import {expect} from 'chai'; +import SearchPanel from '../src/index'; + +describe('Enzyme Shallow', function () { + it('SearchPanel should be exist', function () { + let searchPanel = shallow(); + expect(searchPanel.hasClass('u-search')).to.equal(true); + }); +}); \ No newline at end of file