├── .editorconfig ├── .gitignore ├── .npmignore ├── .travis.yml ├── HISTORY.md ├── LICENSE.md ├── README.md ├── assets └── index.less ├── examples ├── simple.html └── simple.js ├── index.js ├── package.json ├── src ├── Radio.jsx └── index.js └── tests └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # top-most EditorConfig file 2 | root = true 3 | 4 | # Unix-style newlines with a newline ending every file 5 | [*.{js,css}] 6 | end_of_line = lf 7 | insert_final_newline = true 8 | indent_style = space 9 | indent_size = 2 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | *.log 3 | .idea/ 4 | .ipr 5 | .iws 6 | *~ 7 | ~* 8 | *.diff 9 | *.patch 10 | *.bak 11 | .DS_Store 12 | Thumbs.db 13 | .project 14 | .*proj 15 | .svn/ 16 | *.swp 17 | *.swo 18 | *.pyc 19 | *.pyo 20 | .build 21 | node_modules 22 | .cache 23 | dist 24 | assets/**/*.css 25 | build 26 | lib -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | build/ 2 | *.cfg 3 | nohup.out 4 | *.iml 5 | .idea/ 6 | .ipr 7 | .iws 8 | *~ 9 | ~* 10 | *.diff 11 | *.log 12 | *.patch 13 | *.bak 14 | .DS_Store 15 | Thumbs.db 16 | .project 17 | .*proj 18 | .svn/ 19 | *.swp 20 | out/ 21 | .build 22 | node_modules 23 | .cache 24 | examples 25 | tests 26 | src 27 | /index.js 28 | .* 29 | assets/**/*.less -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | notifications: 4 | email: 5 | - yiminghe@gmail.com 6 | 7 | node_js: 8 | - 6 9 | 10 | before_install: 11 | - | 12 | if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/' 13 | then 14 | echo "Only docs were updated, stopping build process." 15 | exit 16 | fi 17 | npm install mocha-phantomjs -g 18 | phantomjs --version 19 | 20 | script: 21 | - | 22 | if [ "$TEST_TYPE" = test ]; then 23 | npm test 24 | else 25 | npm run $TEST_TYPE 26 | fi 27 | 28 | env: 29 | matrix: 30 | - TEST_TYPE=lint 31 | - TEST_TYPE=chrome-test 32 | - TEST_TYPE=coverage 33 | - TEST_TYPE=saucelabs 34 | global: 35 | - secure: Uf3gHWC2QEnOtIeDTWnWwxyQCXUAZYegkx0GAD9PK9CBEBJfezQM3VphGoOlguBMK8n5u4BFiJfOAPOsadpQiYeG6Qu07U0/3BkNT9Q9f5uOIC0Di3YaoqS1uGHJZey/molbIEcbuAo5YNIBvKZmJiBHduJ5ni+StnETehYkTjU= 36 | - secure: icXxTaCvXlzEQ/e/Ih2VhgPrw64okBagFad88mKuI+XpR8Sx/u5bNOaltBIB0rgPA439IFezda9i5DnlBacJIT6zLjHxDtdxElZ5fnBZPYwk9BU6JNtxHtfrLcQsFhUVwsJMuAtKYBAmdzGqhNzYvnBwgmZDTUTTEYtgn6huaxY= 37 | - secure: OaBJynPhXVOGkuiHePxr/5LawnEjiCN+Ywl1h5wXjIc5PZiEzsSqCJkXtVjUftuzBACBne8h+pZkPrVBK5ACwVT+Z9T0cFSdT4PIzorrmO12aSUtwSo08eP6OgpkWzav79Z0DTlUTNZjEZVUMF6KBqlZySTJeCOq+LA418V3S4c= 38 | - secure: TbGWieoxComExvFyZCTRybPs3OCQomVBjZzBdGorNEKNZb2IaKMPJKTIFkHco9zeRySpOE5Yw2GWFRQXNVsNUd45CYADaCERXECf4su8MQL8VRgRdYmK1s0xuIBdKSRUgDXcVxbA0TwF9owixMfO8CuA006ks1Z5ET4xcEYWDXs= 39 | -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-component/radio/df1b50f7241fc35b28d46d8298fbad315e921105/HISTORY.md -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-present yiminghe 4 | 5 | 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: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | 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. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rc-radio 2 | --- 3 | 4 | react rc-radio component 5 | 6 | [![NPM version][npm-image]][npm-url] 7 | [![build status][travis-image]][travis-url] 8 | [![Test coverage][coveralls-image]][coveralls-url] 9 | [![gemnasium deps][gemnasium-image]][gemnasium-url] 10 | [![node version][node-image]][node-url] 11 | [![npm download][download-image]][download-url] 12 | 13 | [npm-image]: http://img.shields.io/npm/v/rc-radio.svg?style=flat-square 14 | [npm-url]: http://npmjs.org/package/rc-radio 15 | [travis-image]: https://img.shields.io/travis/react-component/radio.svg?style=flat-square 16 | [travis-url]: https://travis-ci.org/react-component/radio 17 | [coveralls-image]: https://img.shields.io/coveralls/react-component/radio.svg?style=flat-square 18 | [coveralls-url]: https://coveralls.io/r/react-component/radio?branch=master 19 | [gemnasium-image]: http://img.shields.io/gemnasium/react-component/radio.svg?style=flat-square 20 | [gemnasium-url]: https://gemnasium.com/react-component/radio 21 | [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square 22 | [node-url]: http://nodejs.org/download/ 23 | [download-image]: https://img.shields.io/npm/dm/rc-radio.svg?style=flat-square 24 | [download-url]: https://npmjs.org/package/rc-radio 25 | 26 | ## install 27 | 28 | [![rc-radio](https://nodei.co/npm/rc-radio.png)](https://npmjs.org/package/rc-radio) 29 | 30 | ## example 31 | 32 | http://localhost:9090/examples/ 33 | 34 | online example: http://react-component.github.io/radio/examples/ 35 | 36 | ## Usage 37 | 38 | ```js 39 | var Radio = require('rc-radio'); 40 | // use rc-radio 41 | ``` 42 | 43 | ## Api 44 | 45 | same with ``, but only support controlled radio. 46 | 47 | ## Development 48 | 49 | ``` 50 | npm install 51 | npm start 52 | ``` 53 | 54 | ## Test Case 55 | 56 | http://localhost:9090/tests/runner.html?coverage 57 | 58 | https://travis-ci.org/react-component/radio 59 | 60 | ## Coverage 61 | 62 | http://localhost:9090/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:9090/tests/runner.html?coverage 63 | 64 | ## License 65 | 66 | rc-radio is released under the MIT license. 67 | 68 | -------------------------------------------------------------------------------- /assets/index.less: -------------------------------------------------------------------------------- 1 | @checkboxWarpPrefixCls: rc-radio; 2 | @checkboxInnerPrefixCls: ~"@{checkboxWarpPrefixCls}-inner"; 3 | @duration:.3s; 4 | @ease-in-out-circ:cubic-bezier(0.78, 0.14, 0.15, 0.86); 5 | @ease-out-back:cubic-bezier(0.18, 0.89, 0.32, 1.28); 6 | 7 | /* 一般状态 */ 8 | .@{checkboxWarpPrefixCls} { 9 | white-space: nowrap; 10 | outline: none; 11 | display: inline-block; 12 | position: relative; 13 | 14 | &:hover { 15 | .@{checkboxInnerPrefixCls} { 16 | border-color: #bcbcbc; 17 | } 18 | } 19 | 20 | &-inner { 21 | &:after { 22 | position: absolute; 23 | width: 6px; 24 | height: 6px; 25 | left: 4px; 26 | top:4px; 27 | border-radius: 6px; 28 | display: table; 29 | border-top: 0; 30 | border-left: 0; 31 | content: ' '; 32 | background-color: #3dbcf6; 33 | transform: scale(0); 34 | -webkit-transform: scale(0); 35 | opacity: 0; 36 | transition: transform @duration @ease-in-out-circ,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ; 37 | -webkit-transition: -webkit-transform @duration @ease-in-out-circ,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ; 38 | } 39 | 40 | position: relative; 41 | top: 0; 42 | left: 0; 43 | display: inline-block; 44 | width: 14px; 45 | height: 14px; 46 | border-width: 1px; 47 | border-style: solid; 48 | border-radius: 14px; 49 | border-color: #d9d9d9; 50 | background-color: #ffffff; 51 | transition: border-color @duration @ease-in-out-circ, background-color @duration @ease-in-out-circ; 52 | } 53 | 54 | &-input { 55 | position: absolute; 56 | left: 0; 57 | z-index: 9999; 58 | cursor: pointer; 59 | opacity: 0; 60 | top: 0; 61 | bottom: 0; 62 | right: 0; 63 | } 64 | } 65 | 66 | /* 选中状态 */ 67 | .@{checkboxWarpPrefixCls}-checked { 68 | 69 | .@{checkboxInnerPrefixCls} { 70 | border-color: #d9d9d9; 71 | &:after { 72 | transform: scale(1); 73 | -webkit-transform: scale(1); 74 | opacity: 1; 75 | transition: transform @duration @ease-out-back,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ; 76 | -webkit-transition: -webkit-transform @duration @ease-out-back,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ; 77 | } 78 | } 79 | } 80 | 81 | .@{checkboxWarpPrefixCls}-disabled { 82 | &:hover { 83 | .@{checkboxInnerPrefixCls} { 84 | border-color: #d9d9d9; 85 | } 86 | } 87 | .@{checkboxInnerPrefixCls} { 88 | border-color: #d9d9d9; 89 | background-color: #f3f3f3; 90 | &:after { 91 | background-color: #cccccc; 92 | } 93 | } 94 | 95 | .@{checkboxInnerPrefixCls}-input { 96 | cursor: default; 97 | } 98 | } -------------------------------------------------------------------------------- /examples/simple.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-component/radio/df1b50f7241fc35b28d46d8298fbad315e921105/examples/simple.html -------------------------------------------------------------------------------- /examples/simple.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Radio from 'rc-radio'; 4 | import 'rc-radio/assets/index.less'; 5 | 6 | class Test extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | disabled: false, 11 | checked: null, 12 | r: 'a', 13 | }; 14 | } 15 | 16 | handleChange = (e) => { 17 | this.setState({ 18 | r: e.target.value, 19 | }); 20 | } 21 | 22 | toggle = () => { 23 | this.setState({ 24 | disabled: !this.state.disabled, 25 | }); 26 | } 27 | 28 | render() { 29 | return (
30 |
31 |

32 | 40 |    41 | 49 |    50 |

51 |

52 | 59 |    60 | 66 |    67 |

68 |
69 | 70 | 71 | 72 |
); 73 | } 74 | } 75 | 76 | ReactDOM.render(, document.getElementById('__react-content')); 77 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/'); 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rc-radio", 3 | "version": "2.0.1", 4 | "description": "radio ui component for react", 5 | "keywords": [ 6 | "react", 7 | "react-component", 8 | "react-radio", 9 | "radio" 10 | ], 11 | "main": "lib/index", 12 | "homepage": "http://github.com/react-component/radio", 13 | "repository": { 14 | "type": "git", 15 | "url": "git@github.com:react-component/radio.git" 16 | }, 17 | "bugs": { 18 | "url": "http://github.com/react-component/radio/issues" 19 | }, 20 | "licenses": "MIT", 21 | "config": { 22 | "port": 9090 23 | }, 24 | "scripts": { 25 | "build": "rc-tools run build", 26 | "less": "rc-tools run less", 27 | "gh-pages": "rc-tools run gh-pages", 28 | "history": "rc-tools run history", 29 | "start": "rc-tools run server", 30 | "pub": "rc-tools run pub", 31 | "lint": "rc-tools run lint", 32 | "saucelabs": "node --harmony node_modules/.bin/rc-tools run saucelabs", 33 | "test": "rc-tools run test", 34 | "chrome-test": "rc-tools run chrome-test", 35 | "coverage": "rc-tools run coverage" 36 | }, 37 | "devDependencies": { 38 | "expect.js": "~0.3.1", 39 | "precommit-hook": "^1.0.7", 40 | "rc-tools": "^5.11.4", 41 | "react": "^15.0.0", 42 | "react-dom": "^15.5.4" 43 | }, 44 | "precommit": [ 45 | "lint" 46 | ], 47 | "dependencies": { 48 | "rc-checkbox": "1.x" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/Radio.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Checkbox from 'rc-checkbox'; 3 | 4 | export default class Radio extends React.Component { 5 | static defaultProps = { 6 | prefixCls: 'rc-radio', 7 | type: 'radio', 8 | }; 9 | 10 | render() { 11 | return ; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './Radio'; 2 | 3 | export default Radio; 4 | -------------------------------------------------------------------------------- /tests/index.js: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const ReactDOM = require('react-dom'); 3 | const TestUtils = require('react-dom/test-utils'); 4 | const expect = require('expect.js'); 5 | const Radio = require('../index'); 6 | 7 | describe('rc-radio', () => { 8 | let inst; 9 | const container = document.createElement('div'); 10 | document.body.appendChild(container); 11 | 12 | beforeEach((done) => { 13 | ReactDOM.render(, container, function init() { 14 | inst = this; 15 | done(); 16 | }); 17 | }); 18 | 19 | afterEach(() => { 20 | ReactDOM.unmountComponentAtNode(container); 21 | }); 22 | 23 | it('works', () => { 24 | expect(inst.refs.checkbox.state.checked).to.be(false); 25 | TestUtils.scryRenderedDOMComponentsWithTag(inst, 'input')[0].click(); 26 | expect(inst.refs.checkbox.state.checked).to.be(true); 27 | }); 28 | }); 29 | --------------------------------------------------------------------------------