Skip to content
Permalink
Browse files

feat(bee-checkbox): tab键radioGroup中选中的radio设置焦点

  • Loading branch information...
liushaozhen committed Nov 29, 2018
1 parent ca8b410 commit a5134cbc65dc16f2dddcd244ac9f4d3f737256c5
Showing with 13 additions and 13 deletions.
  1. +2 −2 build/Radio.js
  2. +1 −1 demo/demolist/Demo1.js
  3. +1 −1 demo/demolist/Demo2.js
  4. +1 −1 demo/index.js
  5. +5 −5 dist/demo.js
  6. +1 −1 dist/demo.js.map
  7. +1 −1 package.json
  8. +1 −1 src/Radio.js
@@ -77,7 +77,6 @@ var Radio = function (_React$Component) {
if (this.props.disabled) {
return;
}

if (onChange) {
onChange(this.props.value);
}
@@ -124,7 +123,8 @@ var Radio = function (_React$Component) {
var input = _react2["default"].createElement('input', _extends({}, others, {
type: 'radio',
name: name,
disabled: this.props.disabled
disabled: this.props.disabled,
tabIndex: optional.checked ? 0 : -1
}));
return _react2["default"].createElement(
'label',
@@ -12,7 +12,7 @@ class Demo1 extends Component{
constructor(props) {
super(props);
this.state = {
selectedValue: 'ig'
selectedValue: 'rng'
};
}
handleChange(value) {
@@ -12,7 +12,7 @@ class Demo2 extends Component{
constructor(props) {
super(props);
this.state = {
selectedValue: 'ig'
selectedValue: 'rng'
};
}
handleChange(value) {
@@ -11,7 +11,7 @@ const CARET = <i className="uf uf-arrow-down"></i>;
const CARETUP = <i className="uf uf-arrow-up"></i>;


var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var DemoArray = [{"example":<Demo1 />,"title":" Radio","code":"/**\n * @title Radio\n * @description 基本用法 \n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo1 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'ig'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"lol\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio value=\"ig\" >IG</Radio>\n <Radio value=\"edg\" >EDG</Radio>\n <Radio value=\"rng\" >RNG</Radio>\n <Radio value=\"we\" >WE</Radio>\n <Radio value=\"skt\" >SKT</Radio>\n <Radio value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" 基本用法 "},{"example":<Demo2 />,"title":" 不同颜色的radio","code":"/**\n * @title 不同颜色的radio\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo2 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'ig'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"color\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio colors=\"primary\" value=\"ig\" >IG</Radio>\n <Radio colors=\"success\" value=\"edg\" >EDG</Radio>\n <Radio colors=\"info\" value=\"rng\" >RNG</Radio>\n <Radio colors=\"warning\" value=\"we\" >WE</Radio>\n <Radio colors=\"danger\" value=\"skt\" >SKT</Radio>\n <Radio colors=\"dark\" value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" `colors`参数控制背景色"},{"example":<Demo3 />,"title":" 竖方向Radio","code":"/**\n * @title 竖方向Radio\n * @description 可以通过style来设置radio样式\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo3 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'ig'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n const radioStyle = {\n display: 'block'\n };\n return (\n <Radio.RadioGroup\n name=\"team\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio style={radioStyle} value=\"ig\" >IG</Radio>\n <Radio style={radioStyle} value=\"edg\" >EDG</Radio>\n <Radio style={radioStyle} value=\"rng\" >RNG</Radio>\n <Radio style={radioStyle} value=\"we\" >WE</Radio>\n <Radio style={radioStyle} value=\"skt\" >SKT</Radio>\n <Radio style={radioStyle} value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" 可以通过style来设置radio样式"},{"example":<Demo4 />,"title":" RadioButton","code":"/**\n * @title RadioButton\n * @description \n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\nconst RadioGroup = Radio.RadioGroup;\n\nclass Demo4 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'banana'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"fruit\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n\n <Radio.RadioButton value=\"apple\">apple</Radio.RadioButton>\n\n <Radio.RadioButton value=\"banana\">banana</Radio.RadioButton>\n\n <Radio.RadioButton value=\"orange\">orange</Radio.RadioButton>\n\n </Radio.RadioGroup>\n \n\n )\n }\n};\n\n","desc":" "}]
var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var DemoArray = [{"example":<Demo1 />,"title":" Radio","code":"/**\n * @title Radio\n * @description 基本用法 \n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo1 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'rng'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"lol\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio value=\"ig\" >IG</Radio>\n <Radio value=\"edg\" >EDG</Radio>\n <Radio value=\"rng\" >RNG</Radio>\n <Radio value=\"we\" >WE</Radio>\n <Radio value=\"skt\" >SKT</Radio>\n <Radio value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" 基本用法 "},{"example":<Demo2 />,"title":" 不同颜色的radio","code":"/**\n * @title 不同颜色的radio\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo2 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'rng'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"color\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio colors=\"primary\" value=\"ig\" >IG</Radio>\n <Radio colors=\"success\" value=\"edg\" >EDG</Radio>\n <Radio colors=\"info\" value=\"rng\" >RNG</Radio>\n <Radio colors=\"warning\" value=\"we\" >WE</Radio>\n <Radio colors=\"danger\" value=\"skt\" >SKT</Radio>\n <Radio colors=\"dark\" value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" `colors`参数控制背景色"},{"example":<Demo3 />,"title":" 竖方向Radio","code":"/**\n * @title 竖方向Radio\n * @description 可以通过style来设置radio样式\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo3 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'ig'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n const radioStyle = {\n display: 'block'\n };\n return (\n <Radio.RadioGroup\n name=\"team\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio style={radioStyle} value=\"ig\" >IG</Radio>\n <Radio style={radioStyle} value=\"edg\" >EDG</Radio>\n <Radio style={radioStyle} value=\"rng\" >RNG</Radio>\n <Radio style={radioStyle} value=\"we\" >WE</Radio>\n <Radio style={radioStyle} value=\"skt\" >SKT</Radio>\n <Radio style={radioStyle} value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" 可以通过style来设置radio样式"},{"example":<Demo4 />,"title":" RadioButton","code":"/**\n * @title RadioButton\n * @description \n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\nconst RadioGroup = Radio.RadioGroup;\n\nclass Demo4 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'banana'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"fruit\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n\n <Radio.RadioButton value=\"apple\">apple</Radio.RadioButton>\n\n <Radio.RadioButton value=\"banana\">banana</Radio.RadioButton>\n\n <Radio.RadioButton value=\"orange\">orange</Radio.RadioButton>\n\n </Radio.RadioGroup>\n \n\n )\n }\n};\n\n","desc":" "}]


class Demo extends Component {

Some generated files are not rendered by default. Learn more.

Large diffs are not rendered by default.

@@ -1,6 +1,6 @@
{
"name": "bee-radio",
"version": "1.0.4",
"version": "1.0.5",
"description": "radio ui component for react",
"keywords": [
"react",
@@ -46,7 +46,6 @@ class Radio extends React.Component {
if (this.props.disabled) {
return;
}

if (onChange) {
onChange(this.props.value);
}
@@ -93,6 +92,7 @@ class Radio extends React.Component {
type="radio"
name={name}
disabled={this.props.disabled}
tabIndex={optional.checked?0:-1}
/>
);
return (

0 comments on commit a5134cb

Please sign in to comment.
You can’t perform that action at this time.