demo修改

demo/atom-one-dark.css

@@ -22,13 +22,13 @@ hue-6-2: #e6c07b
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: #abb2bf;
+  color: #424242;
-  background: #282c34;
+  background: #FAFAFA;
 }
 
 .hljs-comment,
 .hljs-quote {
-  color: #5c6370;
+  color: #424242;
   font-style: italic;
 }
 
@@ -94,3 +94,129 @@ hue-6-2: #e6c07b
 .hljs-link {
   text-decoration: underline;
 }
+
+.component-demo .u-panel {
+  padding: 18px 20px;
+  border: 1px solid #F0F0F0;
+}
+.component-demo .u-panel-default .u-panel-heading{
+  background-color: #fff;
+  padding: 0;
+  position: relative;
+  margin-bottom: 20px;
+}
+.component-demo p{
+  margin: 0;
+  font-size: 14px;
+}
+
+.component-demo .component-title{
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.component-demo .component-code{
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: #E14C46;
+  font-size: 14px;
+  cursor: pointer;
+}
+.component-demo .u-panel .u-panel-body{
+  padding: 0;
+}
+
+.component-drawerc .pre-js,.component-drawerc .pre-css{
+  margin: 0;
+}
+
+
+.component-drawerc .drawer-body {
+  padding: 20px 20px;
+}
+.component-drawerc .component-code-copy {
+  font-size: 14px;
+  font-weight: 800;
+  color: #424242;
+  padding: 10px 0;
+  position: relative;
+}
+.component-drawerc .component-code-copy .uf-copy::before{
+  content: "\e6fc";
+}
+.component-drawerc .component-code-copy .uf{
+  font-weight: 100;
+}
+.component-drawerc .component-code-copy.copy-css{
+  margin-top: 20px;
+}
+
+.component-drawerc .component-code-copy .u-clipboard{
+  position: absolute;
+  right: 0;
+}
+/* 抽屉组件样式覆盖 */
+.component-drawerc{
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100000;
+  width: 0;
+  height: 100%;
+}
+.component-drawerc .drawer-mask{
+  background-color: rgba(0,0,0,.3);
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
+}
+.component-drawerc .drawer-close{
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+  cursor: pointer;
+}
+.component-drawerc .drawer{
+  position: fixed;
+  background-color: #fff;
+  transition: transform 300ms ease-in-out;
+  overflow: auto;
+}
+.component-drawerc .drawer-left{
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+.component-drawerc .drawer-right{
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+.component-drawerc .drawer-top{
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.component-drawerc .drawer-bottom{
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.component-drawerc .drawer-header{
+  padding: 0 20px;
+  border-radius: 0;
+  background: #E14C46;
+  color: #fff;
+  border-bottom: 1px solid #e8e8e8;
+}
+.component-drawerc .drawer-header-title{
+  margin: 0;
+  color: #fff;
+  height: 40px;
+  line-height: 40px;
+}

demo/index-demo-base.js

@@ -1,15 +1,12 @@
-
-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 { Con, Row, Col } from 'bee-layout';
+import { Panel } from 'bee-panel';
+import Drawer from 'bee-drawer';
+import Clipboard from 'bee-clipboard'; 
+import Button from '../src';
 
 
-const CARET = <i className="uf uf-arrow-down"></i>;
-
-const CARETUP = <i className="uf uf-arrow-up"></i>;
-
 
 {demolist}
 
@@ -19,36 +16,48 @@ class Demo extends Component {
         this.state = {
             open: false
         }
-        this.handleClick = this.handleClick.bind(this);
     }
-    handleClick() {
+    handleClick=()=> {
         this.setState({ open: !this.state.open })
     }
+    fCloseDrawer=()=>{
+        this.setState({
+            open: false
+        })
+    }
 
     render () {
         const { title, example, code, desc, scss_code  } = this.props;
-        let caret = this.state.open ? CARETUP : CARET;
-        let text = this.state.open ? "隐藏代码" : "查看代码";
 
         const header = (
             <div>
-                {example}
+                <p className='component-title'>{ title }</p>
-                <Button style={{"marginTop": "10px"}} shape="block" onClick={ this.handleClick }>
+                <p>{ desc }</p>
-                    { caret }
+                <span className='component-code' onClick={this.handleClick}> 查看源码 <i className='uf uf-arrow-right'/> </span>
-                    { text }
-                </Button>
             </div>
         );
         return (
-            <Col md={12} id={title.trim()} >
+            <Col md={12} id={title.trim()} className='component-demo'>
-                <h3>{ title }</h3>
+            <Panel header={header}>
-                <p>{ desc }</p>
+                {example}
-                <Panel copyable collapsible headerContent expanded={ this.state.open } colors='bordered' header={ header } footerStyle = {{padding: 0}}>
+            </Panel>
-                    <pre><code className="hljs javascript">{ code }</code></pre>
+           
-                    { !!scss_code ? <pre><code className="hljs css">{ scss_code }</code></pre> : null }
+            <Drawer className='component-drawerc' title={title} show={this.state.open} placement='right' onClose={this.fCloseDrawer}>
-                </Panel>
+            <div className='component-code-copy'> JS代码 
-            </Col>
+                <Clipboard action="copy" text={code}/>
-        )
+            </div>
+            <pre className="pre-js">
+                <code className="hljs javascript">{ code }</code>
+            </pre >
+            {!!scss_code ?<div className='component-code-copy copy-css'> SCSS代码 
+                <Clipboard action="copy" text={scss_code}/>
+            </div>:null }
+                { !!scss_code ? <pre className="pre-css">
+                 <code className="hljs css">{ scss_code }</code>
+                 </pre> : null }
+            </Drawer>
+        </Col>
+    )
     }
 }
 
@@ -58,16 +67,16 @@ class DemoGroup extends Component {
     }
     render () {
         return (
-                <Row>
+            <Row>
-                    {DemoArray.map((child,index) => {
+            {DemoArray.map((child,index) => {
 
-                        return (
+                return (
-                            <Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_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}/>
-                        )
+    )
 
-                    })}
+    })}
-                </Row>
+    </Row>
-        )
+    )
     }
 }
 

index.html

@@ -2,24 +2,23 @@
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <title>tinper-bee demo</title>
+    <title>neoui-react-button</title>
     <link rel="stylesheet" href="./dist/demo.css">
     <link rel="stylesheet" href="./demo/atom-one-dark.css">
     <link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" />
-    <!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> -->
 </head>
 <body style="background: #eceff1">
-    <div id="tinperBeeDemo"></div>
+<div id="tinperBeeDemo"></div>
-	<script src="//cdn.jsdelivr.net/highlight.js/9.8.0/highlight.min.js"></script>
+<script src="//cdn.jsdelivr.net/highlight.js/9.8.0/highlight.min.js"></script>
-	<script>
+<script>
-		hljs.initHighlightingOnLoad();
+    hljs.initHighlightingOnLoad();
-	</script>
+</script>
-    <script src="//design.yonyoucloud.com/static/console-polyfill/console-polyfill.js"></script>
+<script src="//design.yonyoucloud.com/static/console-polyfill/console-polyfill.js"></script>
-    <script src="//design.yonyoucloud.com/static/es5-shim/es5-shim.min.js"></script>
+<script src="//design.yonyoucloud.com/static/es5-shim/es5-shim.min.js"></script>
-    <script src="//design.yonyoucloud.com/static/es5-shim/es5-sham.min.js"></script>
+<script src="//design.yonyoucloud.com/static/es5-shim/es5-sham.min.js"></script>
-    <script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react.development.js"></script>
+<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react.production.min.js"></script>
-    <script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react-dom.development.js"></script>
+<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react-dom.production.min.js"></script>
-    <script src="//design.yonyoucloud.com/static/prop-types/15.6.0/prop-types.min.js"></script>
+<script src="//design.yonyoucloud.com/static/prop-types/15.6.0/prop-types.min.js"></script>
-    <script src="./dist/demo.js"></script>
+<script src="./dist/demo.js"></script>
 </body>
 </html>

package.json

@@ -73,9 +73,10 @@
  },
  "devDependencies": {
   "babel-jest": "^22.0.4",
-  "bee-panel": "latest",
+  "bee-clipboard": "^2.0.0",
+  "bee-drawer": "0.0.2",
   "bee-layout": "latest",
-  "tinper-bee": "latest",
+  "bee-panel": "latest",
   "chai": "^3.5.0",
   "console-polyfill": "~0.2.1",
   "cz-conventional-changelog": "^2.1.0",
@@ -84,6 +85,7 @@
   "jest": "^22.0.4",
   "react": "^16.6.3",
   "react-addons-test-utils": "^15.5.0",
-  "react-dom": "^16.6.3"
+  "react-dom": "^16.6.3",
+  "tinper-bee": "latest"
  }
-}
+}