Skip to content
Permalink
Browse files

feat(demo.js): 修改demo的展现方式

  • Loading branch information...
HuYuee committed Jan 16, 2018
1 parent e3d1a3d commit d752c887ca2c77560c293a69b370b74c709403de
Showing with 150 additions and 152 deletions.
  1. 0 HISTORY.md
  2. +2 −2 build/Radio.css
  3. +3 −2 build/Radio.js
  4. +0 −20 changelog.md
  5. +13 −10 demo/index-demo-base.js
  6. +14 −11 demo/index.js
  7. +116 −105 dist/demo.js
  8. +1 −1 dist/demo.js.map
  9. +1 −1 package.json
No changes.
@@ -93,7 +93,7 @@
border-color: #108ee9; }
.u-radio.is-checked .u-radio-label:after {
position: absolute;
top: 9px;
top: 8px;
border-radius: 4px;
height: 8px;
width: 8px;
@@ -122,7 +122,7 @@
width: 18px;
height: 18px;
left: 0;
bottom: 0;
bottom: 1px;
text-align: center;
position: absolute; }
.u-radio .u-radio-label:after {
@@ -98,7 +98,8 @@ var Radio = function (_React$Component) {
className = _props.className,
children = _props.children,
clsPrefix = _props.clsPrefix,
others = _objectWithoutProperties(_props, ['disabled', 'colors', 'className', 'children', 'clsPrefix']);
style = _props.style,
others = _objectWithoutProperties(_props, ['disabled', 'colors', 'className', 'children', 'clsPrefix', 'style']);

var optional = {};
/**
@@ -127,7 +128,7 @@ var Radio = function (_React$Component) {
}));
return _react2["default"].createElement(
'label',
{ onClick: this.handleClick, className: (0, _classnames2["default"])(className, classNames) },
{ style: style, onClick: this.handleClick, className: (0, _classnames2["default"])(className, classNames) },
input,
_react2["default"].createElement(
'label',

This file was deleted.

@@ -4,7 +4,6 @@ import { Panel } from 'bee-panel';
import Button from 'bee-button';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Radio from '../src';


const CARET = <i className="uf uf-arrow-down"></i>;
@@ -27,22 +26,26 @@ class Demo extends Component {
}

render () {
const { title, example, code, desc } = this.props;
const { title, example, code, desc, scss_code } = this.props;
let caret = this.state.open ? CARETUP : CARET;
let text = this.state.open ? "隐藏代码" : "查看代码";

const footer = (
<Button shape="block" onClick={ this.handleClick }>
{ caret }
{ text }
</Button>
const header = (
<div>
{example}
<Button style={{"marginTop": "10px"}} shape="block" onClick={ this.handleClick }>
{ caret }
{ text }
</Button>
</div>
);
return (
<Col md={12}>
<Col md={12} >
<h3>{ title }</h3>
<p>{ desc }</p>
<Panel collapsible expanded={ this.state.open } colors='bordered' header={ example } footer={footer} footerStyle = {{padding: 0,borderColor: "transparent"}} >
<Panel collapsible headerContent expanded={ this.state.open } colors='bordered' header={ header } footerStyle = {{padding: 0}}>
<pre><code className="hljs javascript">{ code }</code></pre>
{ !!scss_code ? <pre><code className="hljs css">{ scss_code }</code></pre> : null }
</Panel>
</Col>
)
@@ -59,7 +62,7 @@ class DemoGroup extends Component {
{DemoArray.map((child,index) => {

return (
<Demo example= {child.example} title= {child.title} code= {child.code} desc= {child.desc} key= {index}/>
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
)

})}
@@ -4,15 +4,14 @@ import { Panel } from 'bee-panel';
import Button from 'bee-button';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Radio from '../src';


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 DemoArray = [{"example":<Demo1 />,"title":" Radio","code":"/**\n * @title Radio\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react'\nimport Radio from 'bee-radio'\n\n\n\nclass Demo1 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'apple'\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 value=\"apple\" >apple</Radio>\n\n <Radio value=\"orange\" >Orange</Radio>\n\n <Radio disabled value=\"watermelon\" >Watermelon</Radio>\n\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" `colors`参数控制背景色"},{"example":<Demo2 />,"title":" 竖方向Radio","code":"/**\n * @title 竖方向Radio\n * @description 可以通过style来设置radio样式\n */\n\nimport React, { Component } from 'react'\nimport Radio from 'bee-radio'\n\n\n\nclass demo2 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'apple'\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=\"fruit\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n\n <Radio style={radioStyle} value=\"apple\" >apple</Radio>\n\n <Radio style={radioStyle} value=\"orange\" >Orange</Radio>\n\n <Radio style={radioStyle} disabled value=\"watermelon\" >Watermelon</Radio>\n\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" 可以通过style来设置radio样式"},{"example":<Demo3 />,"title":" RadioButton","code":"/**\n * @title RadioButton\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react'\nimport Radio from 'bee-radio'\n\nconst RadioGroup = Radio.RadioGroup;\n\nclass demo3 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":" `colors`参数控制背景色"}]
var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var DemoArray = [{"example":<Demo1 />,"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 Demo1 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'apple'\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 value=\"apple\" >apple</Radio>\n\n <Radio value=\"orange\" >Orange</Radio>\n\n <Radio disabled value=\"watermelon\" >Watermelon</Radio>\n\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" `colors`参数控制背景色"},{"example":<Demo2 />,"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 demo2 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'apple'\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=\"fruit\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n\n <Radio style={radioStyle} value=\"apple\" >apple</Radio>\n\n <Radio style={radioStyle} value=\"orange\" >Orange</Radio>\n\n <Radio style={radioStyle} disabled value=\"watermelon\" >Watermelon</Radio>\n\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" 可以通过style来设置radio样式"},{"example":<Demo3 />,"title":" RadioButton","code":"/**\n * @title RadioButton\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\nconst RadioGroup = Radio.RadioGroup;\n\nclass demo3 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":" `colors`参数控制背景色"}]


class Demo extends Component {
@@ -28,22 +27,26 @@ class Demo extends Component {
}

render () {
const { title, example, code, desc } = this.props;
const { title, example, code, desc, scss_code } = this.props;
let caret = this.state.open ? CARETUP : CARET;
let text = this.state.open ? "隐藏代码" : "查看代码";

const footer = (
<Button shape="block" onClick={ this.handleClick }>
{ caret }
{ text }
</Button>
const header = (
<div>
{example}
<Button style={{"marginTop": "10px"}} shape="block" onClick={ this.handleClick }>
{ caret }
{ text }
</Button>
</div>
);
return (
<Col md={12}>
<Col md={12} >
<h3>{ title }</h3>
<p>{ desc }</p>
<Panel collapsible expanded={ this.state.open } colors='bordered' header={ example } footer={footer} footerStyle = {{padding: 0,borderColor: "transparent"}} >
<Panel collapsible headerContent expanded={ this.state.open } colors='bordered' header={ header } footerStyle = {{padding: 0}}>
<pre><code className="hljs javascript">{ code }</code></pre>
{ !!scss_code ? <pre><code className="hljs css">{ scss_code }</code></pre> : null }
</Panel>
</Col>
)
@@ -60,7 +63,7 @@ class DemoGroup extends Component {
{DemoArray.map((child,index) => {

return (
<Demo example= {child.example} title= {child.title} code= {child.code} desc= {child.desc} key= {index}/>
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
)

})}

0 comments on commit d752c88

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