From b868919cc1ff3ef383f6b682345b1fdf8116b871 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=AC=E4=BC=AF?= Date: Fri, 2 Dec 2016 16:39:31 +0800 Subject: [PATCH] feat: 1st ci --- .eslintrc.json | 13 +++ .gitignore | 29 ++++++ .npmignore | 29 ++++++ .travis.yml | 37 ++++++++ .yo-rc.json | 3 + HISTORY.md | 4 + README.md | 83 +++++++++++++++++ demo/TransferFormFieldDemo.jsx | 155 ++++++++++++++++++++++++++++++++ demo/TransferFormFieldDemo.less | 10 +++ demo/index.jsx | 14 +++ index.html | 18 ++++ package.json | 54 +++++++++++ src/TransferFormField.jsx | 62 +++++++++++++ src/TransferFormField.less | 8 ++ src/index.js | 9 ++ tests/TransferFormField.spec.js | 9 ++ tests/index.js | 6 ++ 17 files changed, 543 insertions(+) create mode 100644 .eslintrc.json create mode 100644 .gitignore create mode 100644 .npmignore create mode 100644 .travis.yml create mode 100644 .yo-rc.json create mode 100644 HISTORY.md create mode 100644 README.md create mode 100644 demo/TransferFormFieldDemo.jsx create mode 100644 demo/TransferFormFieldDemo.less create mode 100644 demo/index.jsx create mode 100644 index.html create mode 100644 package.json create mode 100644 src/TransferFormField.jsx create mode 100644 src/TransferFormField.less create mode 100644 src/index.js create mode 100644 tests/TransferFormField.spec.js create mode 100644 tests/index.js diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..ee92fe4 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,13 @@ +{ + "extends": "airbnb", + "plugins": [ + "react" + ], + "env": { + "browser": true + }, + "rules": { + "import/no-extraneous-dependencies": "off", + "react/jsx-no-bind": "off" + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..372e187 --- /dev/null +++ b/.gitignore @@ -0,0 +1,29 @@ +*.iml +*.log +.idea/ +.ipr +.iws +*~ +~* +*.diff +*.patch +*.bak +.DS_Store +Thumbs.db +.project +.*proj +.svn/ +*.swp +*.swo +*.pyc +*.pyo +.build +node_modules +_site +sea-modules +spm_modules +.cache +.happypack +dist +build +assets/**/*.css diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..8eee222 --- /dev/null +++ b/.npmignore @@ -0,0 +1,29 @@ +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 +.happypack +node_modules +_site +sea-modules +spm_modules +.cache +dist \ No newline at end of file diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..6fc0e4a --- /dev/null +++ b/.travis.yml @@ -0,0 +1,37 @@ +language: node_js + +sudo: false + +notification: + email: + - wsj7552715@hotmail.com + +node_js: +- 4.0.0 + +before_install: +- | + if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qve '(\.md$)|(\.html$)' + then + echo "Only docs were updated, stopping build process." + exit + fi + phantomjs --version + +script: +- | + if [ "$TEST_TYPE" = test ]; then + npm test + else + npm run $TEST_TYPE + fi + +env: + matrix: + - TEST_TYPE=test + - TEST_TYPE=coverage + - TEST_TYPE=saucelabs + +matrix: + allow_failures: + - env: "TEST_TYPE=saucelabs" diff --git a/.yo-rc.json b/.yo-rc.json new file mode 100644 index 0000000..32fcf8c --- /dev/null +++ b/.yo-rc.json @@ -0,0 +1,3 @@ +{ + "generator-uxcore": {} +} \ No newline at end of file diff --git a/HISTORY.md b/HISTORY.md new file mode 100644 index 0000000..bdaeae3 --- /dev/null +++ b/HISTORY.md @@ -0,0 +1,4 @@ +# history + +## 0.1.0 + `NEW` a new form field component \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..cadb0a5 --- /dev/null +++ b/README.md @@ -0,0 +1,83 @@ +## uxcore-transfer-form-field + +React transfer form field + +[![NPM version][npm-image]][npm-url] +[![build status][travis-image]][travis-url] +[![Test Coverage][coveralls-image]][coveralls-url] +[![Dependency Status][dep-image]][dep-url] +[![devDependency Status][devdep-image]][devdep-url] +[![NPM downloads][downloads-image]][npm-url] + +[![Sauce Test Status][sauce-image]][sauce-url] + +[npm-image]: http://img.shields.io/npm/v/uxcore-transfer-form-field.svg?style=flat-square +[npm-url]: http://npmjs.org/package/uxcore-transfer-form-field +[travis-image]: https://img.shields.io/travis/uxcore/uxcore-transfer-form-field.svg?style=flat-square +[travis-url]: https://travis-ci.org/uxcore/uxcore-transfer-form-field +[coveralls-image]: https://img.shields.io/coveralls/uxcore/uxcore-transfer-form-field.svg?style=flat-square +[coveralls-url]: https://coveralls.io/r/uxcore/uxcore-transfer-form-field?branch=master +[dep-image]: http://img.shields.io/david/uxcore/uxcore-transfer-form-field.svg?style=flat-square +[dep-url]: https://david-dm.org/uxcore/uxcore-transfer-form-field +[devdep-image]: http://img.shields.io/david/dev/uxcore/uxcore-transfer-form-field.svg?style=flat-square +[devdep-url]: https://david-dm.org/uxcore/uxcore-transfer-form-field#info=devDependencies +[downloads-image]: https://img.shields.io/npm/dm/uxcore-transfer-form-field.svg +[sauce-image]: https://saucelabs.com/browser-matrix/uxcore-transfer-form-field.svg +[sauce-url]: https://saucelabs.com/u/uxcore-transfer-form-field + + +### Development + +```sh +git clone https://github.com/uxcore/uxcore-transfer-form-field +cd uxcore-transfer-form-field +npm install +npm run server +``` + +if you'd like to save your install time，you can use uxcore-tools globally. + +```sh +npm install uxcore-tools -g +git clone https://github.com/uxcore/uxcore-transfer-form-field +cd uxcore-transfer-form-field +npm install +npm run dep +npm run start +``` + +### Test Case + +```sh +npm run test +``` + +### Coverage + +```sh +npm run coverage +``` + +## Demo + +http://uxcore.github.io/components/transfer-form-field + +## Contribute + +Yes please! See the [CONTRIBUTING](https://github.com/uxcore/uxcore/blob/master/CONTRIBUTING.md) for details. + +## API + +## Props + +|参数|类型|必需|默认值|说明| +|---|----|---|----|---| +|height|number|optional|220|transfer高度| +|disabled|boolean|optional|false|是否启用 disable 模式| +|showSearch|boolean|optional|true|是否显示搜索条| +|searchPlaceholder|string|optional|定位输入内容|| +|leftTitle|string|optional|'未选中的'|左侧标题| +|rightTitle|string|optional|'已选中的'|右侧标题| + +* 其它props请参考[FormField通用配置](http://uxcore.coding.me/components/form/#formfield-专属配置) + diff --git a/demo/TransferFormFieldDemo.jsx b/demo/TransferFormFieldDemo.jsx new file mode 100644 index 0000000..89b5d79 --- /dev/null +++ b/demo/TransferFormFieldDemo.jsx @@ -0,0 +1,155 @@ +/** + * TransferFormField Component Demo for uxcore + * @author maquanyun + * + * Copyright 2015-2016, Uxcore Team, Alinw. + * All rights reserved. + */ + +import React from 'react'; +import Form from 'uxcore-form'; +import Button from 'uxcore-button'; +import TransferFormField from '../src'; + +const { OtherFormField: Other } = Form; + +// const mockData = []; +// const len = (Math.random() * 10) + 10; +// for (let i = 0; i < len; i++) { +// mockData.push({ +// name: `内容${i + 1}`, +// value: (i + 1), +// description: `内容${i + 1}的描述`, +// chosen: Math.random() * 2 > 1, +// }); +// } + +const mockData = [ + { + name: '内容1', + value: 1, + description: '内容1的描述', + chosen: true, + }, + { + name: '内容2', + value: 2, + description: '内容2的描述', + chosen: true, + }, + { + name: '内容3', + value: 3, + description: '内容3的描述', + chosen: true, + }, + { + name: '内容4', + value: 4, + description: '内容4的描述', + chosen: true, + }, + { + name: '内容5', + value: 5, + description: '内容5的描述', + chosen: false, + }, + { + name: '内容6', + value: 6, + description: '内容6的描述', + chosen: true, + }, + { + name: '内容7', + value: 7, + description: '内容7的描述', + chosen: true, + }, + { + name: '内容8', + value: 8, + description: '内容8的描述', + chosen: false, + }, + { + name: '内容9', + value: 9, + description: '内容9的描述', + chosen: true, + }, + { + name: '内容10', + value: 10, + description: '内容10的描述', + chosen: false, + }, + { + name: '内容11', + value: 11, + description: '内容11的描述', + chosen: true, + }, + { + name: '内容12', + value: 12, + description: '内容12的描述', + chosen: false, + }, + { + name: '内容13', + value: 13, + description: '内容13的描述', + chosen: false, + }, + { + name: '内容14', + value: 14, + description: '内容14的描述', + chosen: false, + }, +]; + +class Demo extends React.Component { + + constructor(props) { + super(props); + this.state = { + values: {}, + }; + } + + handleClick() { + const me = this; + alert(JSON.stringify(me.form.getValues())); + } + + handleChange(data) { + console.log(data); + } + + handleReset() { + const me = this; + me.refs.form.resetValues(); + } + + render() { + const me = this; + return ( + + ); + } +} + +module.exports = Demo; diff --git a/demo/TransferFormFieldDemo.less b/demo/TransferFormFieldDemo.less new file mode 100644 index 0000000..4f658d3 --- /dev/null +++ b/demo/TransferFormFieldDemo.less @@ -0,0 +1,10 @@ +/** + * TransferFormField Component Demo Style for Uxcore + * @author maquanyun + * + * Copyright 2015-2016, Uxcore Team, Alinw. + * All rights reserved. + */ + +@import "../node_modules/kuma-base/theme/orange"; +@import "../src/TransferFormField.less"; \ No newline at end of file diff --git a/demo/index.jsx b/demo/index.jsx new file mode 100644 index 0000000..1c90c9d --- /dev/null +++ b/demo/index.jsx @@ -0,0 +1,14 @@ +/** + * TransferFormField Component Demo for uxcore + * @author maquanyun + * + * Copyright 2015-2016, Uxcore Team, Alinw. + * All rights reserved. + */ + +import ReactDOM from 'react-dom'; +import React from 'react'; +import Demo from './TransferFormFieldDemo'; + +ReactDOM.render(, document.getElementById('UXCoreDemo')); + diff --git a/index.html b/index.html new file mode 100644 index 0000000..1d7cefa --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + uxcore-transfer-form-field + + + + + +
+ + + + + + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..921e214 --- /dev/null +++ b/package.json @@ -0,0 +1,54 @@ +{ + "name": "uxcore-transfer-form-field", + "version": "0.1.0", + "description": "uxcore-transfer-form-field component for uxcore.", + "repository": "https://github.com/uxcore/uxcore-transfer-form-field.git", + "author": "maquanyun", + "main": "build/index.js", + "scripts": { + "start": "uxcore-tools run start", + "server": "uxcore-tools run server", + "lint": "uxcore-tools run lint", + "build": "uxcore-tools run build", + "test": "uxcore-tools run test", + "coverage": "uxcore-tools run coverage", + "pub": "uxcore-tools run pub", + "dep": "uxcore-tools run dep", + "tnpm-dep": "uxcore-tools run tnpm-dep", + "chrome": "uxcore-tools run chrome", + "browsers": "uxcore-tools run browsers", + "saucelabs": "uxcore-tools run saucelabs", + "update": "uxcore-tools run update" + }, + "bugs": { + "url": "http://github.com/uxcore/uxcore-transfer-form-field/issues" + }, + "keywords": [ + "react", + "react-component", + "uxcore-transfer-form-field", + "TransferFormField", + "component" + ], + "devDependencies": { + "console-polyfill": "^0.2.2", + "es5-shim": "^4.5.8", + "expect.js": "~0.3.1", + "kuma-base": "1.x", + "react": "0.14.x", + "react-addons-test-utils": "0.14.x", + "react-dom": "0.14.x", + "uxcore-button": "^0.4.5", + "uxcore-kuma": "2.x", + "uxcore-tools": "0.2.x" + }, + "dependencies": { + "classnames": "^2.1.2", + "object-assign": "^4.1.0", + "uxcore-form": "^1.8.8", + "uxcore-form-field": "^0.2.3", + "uxcore-transfer": "^0.3.0" + }, + "contributors": [], + "license": "MIT" +} diff --git a/src/TransferFormField.jsx b/src/TransferFormField.jsx new file mode 100644 index 0000000..65c3870 --- /dev/null +++ b/src/TransferFormField.jsx @@ -0,0 +1,62 @@ +/** + * TransferFormField Component for uxcore + * @author maquanyun + * + * Copyright 2015-2016, Uxcore Team, Alinw. + * All rights reserved. + */ +import React from 'react'; +import Transfer from 'uxcore-transfer'; +import assign from 'object-assign'; +import FormField from 'uxcore-form-field'; + +class TransferFormField extends FormField { + + addSpecificClass() { + const me = this; + if (me.props.jsxprefixCls === 'kuma-uxform-field') { + return `${me.props.jsxprefixCls} kuma-transfer-uxform-field`; + } + return me.props.jsxprefixCls; + } + + handleChange(data) { + const newValue = data.chosen.concat(data.unChosen); + this.handleDataChange(newValue); + } + + renderField() { + const me = this; + const arr = []; + const { + height, disabled, showSearch, searchPlaceholder, leftTitle, rightTitle, + } = this.props; + arr.push( + + ); + return arr; + } +} + +TransferFormField.defaultProps = assign({}, FormField.defaultProps, { + height: 220, +}); + +TransferFormField.propTypes = assign({}, FormField.propTypes, { + height: React.PropTypes.number, + value: React.PropTypes.array, +}); + +TransferFormField.displayName = 'TransferFormField'; + +export default TransferFormField; diff --git a/src/TransferFormField.less b/src/TransferFormField.less new file mode 100644 index 0000000..71cb85c --- /dev/null +++ b/src/TransferFormField.less @@ -0,0 +1,8 @@ +/** + * TransferFormField Component Style for uxcore + * @author maquanyun + * + * Copyright 2015-2016, Uxcore Team, Alinw. + * All rights reserved. + */ + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..abc17fb --- /dev/null +++ b/src/index.js @@ -0,0 +1,9 @@ +/** + * TransferFormField Component for uxcore + * @author maquanyun + * + * Copyright 2015-2016, Uxcore Team, Alinw. + * All rights reserved. + */ + +module.exports = require('./TransferFormField'); diff --git a/tests/TransferFormField.spec.js b/tests/TransferFormField.spec.js new file mode 100644 index 0000000..3e3bab2 --- /dev/null +++ b/tests/TransferFormField.spec.js @@ -0,0 +1,9 @@ +import expect from 'expect.js'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import TestUtils, { Simulate } from 'react-addons-test-utils'; +import TransferFormField from '../src'; + +describe('TransferFormField', () => { + +}); \ No newline at end of file diff --git a/tests/index.js b/tests/index.js new file mode 100644 index 0000000..d671a52 --- /dev/null +++ b/tests/index.js @@ -0,0 +1,6 @@ +/** + * only require other specs here + */ + + const req = require.context('.', false, /\.spec\.js$/); + req.keys().forEach(req); \ No newline at end of file