bee-message - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

CHANGELOG.md

@@ -0,3 +1,23 @@
+<a name="2.0.1"></a>
+## [2.0.1](https://github.com/tinper-bee/bee-message/compare/v2.0.0...v2.0.1) (2019-04-24)
+
+
+### Bug Fixes
+
+* 每次创建新的Message对象前，没有销毁之前的对象 ([2cec5f2](https://github.com/tinper-bee/bee-message/commit/2cec5f2))
+
+
+
+<a name="2.0.0"></a>
+# [2.0.0](https://github.com/tinper-bee/bee-message/compare/v1.0.13...v2.0.0) (2019-03-13)
+
+
+
+<a name="1.0.13"></a>
+## [1.0.13](https://github.com/tinper-bee/bee-message/compare/v1.0.12...v1.0.13) (2018-12-12)
+
+
+
 <a name="1.0.4"></a>
-## 1.0.4 (2018-02-01)
+## [1.0.4](https://github.com/tinper-bee/bee-message/compare/87214cd...v1.0.4) (2018-02-01)
 
@@ -4,0 +24,0 @@

demo/demolist/Demo2.js

@@ -15,18 +15,24 @@ /**
  const top = function () {
-   Message.create({content: 'This is a Info message', position: 'top'});
+    Message.destroy();
+    Message.create({content: 'This is a Info message', position: 'top'});
  };
  const bottom = function () {
-   Message.create({content: 'This is a Info message', position: 'bottom'});
+    Message.destroy();
+    Message.create({content: 'This is a Info message', position: 'bottom'});
  };
  const topRight = function () {
-   Message.create({content: 'This is a Info message', position: 'topRight'});
+    Message.destroy();
+    Message.create({content: 'This is a Info message', position: 'topRight'});
  };
  const topLeft = function () {
-   Message.create({content: 'This is a Info message', position: 'topLeft'});
+    Message.destroy();
+    Message.create({content: 'This is a Info message', position: 'topLeft'});
  };
  const bottomRight = function () {
-   Message.create({content: 'This is a Info message', position: 'bottomRight'});
+    Message.destroy();
+    Message.create({content: 'This is a Info message', position: 'bottomRight'});
  };
  const bottomLeft = function () {
-   Message.create({content: 'This is a Info message', position: 'bottomLeft'});
+    Message.destroy();
+    Message.create({content: 'This is a Info message', position: 'bottomLeft'});
  };
@@ -33,0 +39,0 @@ class Demo2 extends Component {

demo/index-demo-base.js

@@ -0,13 +1,11 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
 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 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}
@@ -21,32 +19,44 @@
         }
-        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}
-                <Button style={{"marginTop": "10px"}} shape="block" onClick={ this.handleClick }>
-                    { caret }
-                    { text }
-                </Button>
+                <p className='component-title'>{ title }</p>
+                <p>{ desc }</p>
+                <span className='component-code' onClick={this.handleClick}> 查看源码 <i className='uf uf-arrow-right'/> </span>
             </div>
         );
         return (
-            <Col md={12} >
-                <h3>{ title }</h3>
-                <p>{ desc }</p>
-                <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>
-        )
+            <Col md={12} id={title.trim()} className='component-demo'>
+            <Panel header={header}>
+                {example}
+            </Panel>
+           
+            <Drawer className='component-drawerc' title={title} show={this.state.open} placement='right' onClose={this.fCloseDrawer}>
+            <div className='component-code-copy'> JS代码 
+                <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>
+    )
     }
@@ -62,11 +72,11 @@ }
             <Row>
-                {DemoArray.map((child,index) => {
+            {DemoArray.map((child,index) => {
 
-                    return (
-                        <Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
-                    )
+                return (
+            <Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
+    )
 
-                })}
-            </Row>
-        )
+    })}
+    </Row>
+    )
     }
@@ -73,0 +83,0 @@ }

demo/index.js

@@ -0,16 +1,14 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
 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 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>;
+var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var DemoArray = [{"example":<Demo1 />,"title":" 不同颜色的消息提醒","code":"/**\n *\n * @title 不同颜色的消息提醒\n * @description 提供10种颜色，包括黑色白色及四个语义色及四个浅语义色\n *\n */\n\nimport React, { Component } from 'react';\nimport { Message, Button,  Panel ,  Con, Row, Col  } from 'tinper-bee';\n\n const info = function () {\n   let aa = Message.create({content: 'This is a Info message', color: 'info', duration: null});\n\n };\n const danger = function () {\n   Message.create({content: 'This is a danger message', color: 'danger'});\n };\n const success = function () {\n   Message.create({content: 'This is a success message', color: 'success'});\n };\n const warning = function () {\n   Message.create({content: 'This is a warning message', color: 'warning'});\n };\n const loading = function () {\n   Message.create({content: 'This is a dark message', color: 'dark'});\n };\n const light = function () {\n   Message.create({content: 'This is a light message', color: 'light'});\n };\nclass Demo1 extends Component {\n    constructor(props){\n        super(props);\n    }\n    render () {\n        return (\n            <div className=\"paddingDemo\">\n            <Button\n                colors=\"info\"\n                onClick={info}>\n                info\n            </Button>\n            <Button\n                colors=\"danger\"\n                onClick={danger}>\n                danger\n            </Button>\n            <Button\n                colors=\"warning\"\n                onClick={warning}>\n                warning\n            </Button>\n            <Button\n                colors=\"success\"\n                onClick={success}>\n                success\n            </Button>\n            <Button\n                colors=\"primary\"\n                onClick={loading}>\n                dark\n            </Button>\n            <Button\n                shape=\"border\"\n                onClick={light}>\n                light\n            </Button>\n            </div>\n        )\n    }\n}\n\n\n\n","desc":" 提供10种颜色，包括黑色白色及四个语义色及四个浅语义色","scss_code":".paddingDemo{\n  button{\n    margin: 10px;\n  }\n}"},{"example":<Demo2 />,"title":" 不同显示位置的消息提醒","code":"/**\n *\n * @title 不同显示位置的消息提醒\n * @description 一个页面的message只能设置一中显示位置，提供六种位置选择，查看每种示例，需每次刷新\n *\n */\n\nimport React, { Component } from 'react';\nimport { Message, Button,  Panel ,  Con, Row, Col  } from 'tinper-bee';\n\n const top = function () {\n    Message.destroy();\n    Message.create({content: 'This is a Info message', position: 'top'});\n };\n const bottom = function () {\n    Message.destroy();\n    Message.create({content: 'This is a Info message', position: 'bottom'});\n };\n const topRight = function () {\n    Message.destroy();\n    Message.create({content: 'This is a Info message', position: 'topRight'});\n };\n const topLeft = function () {\n    Message.destroy();\n    Message.create({content: 'This is a Info message', position: 'topLeft'});\n };\n const bottomRight = function () {\n    Message.destroy();\n    Message.create({content: 'This is a Info message', position: 'bottomRight'});\n };\n const bottomLeft = function () {\n    Message.destroy();\n    Message.create({content: 'This is a Info message', position: 'bottomLeft'});\n };\nclass Demo2 extends Component {\n    constructor(props){\n        super(props);\n    }\n    render () {\n        return (\n            <div className=\"paddingDemo\">\n            <Button\n                colors=\"info\"\n                onClick={top}>\n                top\n            </Button>\n            <Button\n                colors=\"info\"\n                onClick={bottom}>\n                bottom\n            </Button>\n            <Button\n                colors=\"info\"\n                onClick={topRight}>\n                topRight\n            </Button>\n            <Button\n                colors=\"info\"\n                onClick={topLeft}>\n                topLeft\n            </Button>\n            <Button\n                colors=\"info\"\n                onClick={bottomRight}>\n                bottomRight\n            </Button>\n            <Button\n                colors=\"info\"\n                onClick={bottomLeft}>\n                bottomLeft\n            </Button>\n            </div>\n        )\n    }\n}\n\n\n","desc":" 一个页面的message只能设置一中显示位置，提供六种位置选择，查看每种示例，需每次刷新","scss_code":".paddingDemo{\n  button{\n    margin: 10px;\n  }\n}"}]
 
 
-var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var DemoArray = [{"example":<Demo1 />,"title":" 不同颜色的消息提醒","code":"/**\n *\n * @title 不同颜色的消息提醒\n * @description 提供10种颜色，包括黑色白色及四个语义色及四个浅语义色\n *\n */\n\nimport React, { Component } from 'react';\nimport { Message, Button,  Panel ,  Con, Row, Col  } from 'tinper-bee';\n\n const info = function () {\n   let aa = Message.create({content: 'This is a Info message', color: 'info', duration: null});\n\n };\n const danger = function () {\n   Message.create({content: 'This is a danger message', color: 'danger'});\n };\n const success = function () {\n   Message.create({content: 'This is a success message', color: 'success'});\n };\n const warning = function () {\n   Message.create({content: 'This is a warning message', color: 'warning'});\n };\n const loading = function () {\n   Message.create({content: 'This is a dark message', color: 'dark'});\n };\n const light = function () {\n   Message.create({content: 'This is a light message', color: 'light'});\n };\nclass Demo1 extends Component {\n    constructor(props){\n        super(props);\n    }\n    render () {\n        return (\n            <div className=\"paddingDemo\">\n            <Button\n                colors=\"info\"\n                onClick={info}>\n                info\n            </Button>\n            <Button\n                colors=\"danger\"\n                onClick={danger}>\n                danger\n            </Button>\n            <Button\n                colors=\"warning\"\n                onClick={warning}>\n                warning\n            </Button>\n            <Button\n                colors=\"success\"\n                onClick={success}>\n                success\n            </Button>\n            <Button\n                colors=\"primary\"\n                onClick={loading}>\n                dark\n            </Button>\n            <Button\n                shape=\"border\"\n                onClick={light}>\n                light\n            </Button>\n            </div>\n        )\n    }\n}\n\n\n\n","desc":" 提供10种颜色，包括黑色白色及四个语义色及四个浅语义色","scss_code":".paddingDemo{\n  button{\n    margin: 10px;\n  }\n}"},{"example":<Demo2 />,"title":" 不同显示位置的消息提醒","code":"/**\n *\n * @title 不同显示位置的消息提醒\n * @description 一个页面的message只能设置一中显示位置，提供六种位置选择，查看每种示例，需每次刷新\n *\n */\n\nimport React, { Component } from 'react';\nimport { Message, Button,  Panel ,  Con, Row, Col  } from 'tinper-bee';\n\n const top = function () {\n   Message.create({content: 'This is a Info message', position: 'top'});\n };\n const bottom = function () {\n   Message.create({content: 'This is a Info message', position: 'bottom'});\n };\n const topRight = function () {\n   Message.create({content: 'This is a Info message', position: 'topRight'});\n };\n const topLeft = function () {\n   Message.create({content: 'This is a Info message', position: 'topLeft'});\n };\n const bottomRight = function () {\n   Message.create({content: 'This is a Info message', position: 'bottomRight'});\n };\n const bottomLeft = function () {\n   Message.create({content: 'This is a Info message', position: 'bottomLeft'});\n };\nclass Demo2 extends Component {\n    constructor(props){\n        super(props);\n    }\n    render () {\n        return (\n            <div className=\"paddingDemo\">\n            <Button\n                colors=\"info\"\n                onClick={top}>\n                top\n            </Button>\n            <Button\n                colors=\"info\"\n                onClick={bottom}>\n                bottom\n            </Button>\n            <Button\n                colors=\"info\"\n                onClick={topRight}>\n                topRight\n            </Button>\n            <Button\n                colors=\"info\"\n                onClick={topLeft}>\n                topLeft\n            </Button>\n            <Button\n                colors=\"info\"\n                onClick={bottomRight}>\n                bottomRight\n            </Button>\n            <Button\n                colors=\"info\"\n                onClick={bottomLeft}>\n                bottomLeft\n            </Button>\n            </div>\n        )\n    }\n}\n\n\n","desc":" 一个页面的message只能设置一中显示位置，提供六种位置选择，查看每种示例，需每次刷新","scss_code":".paddingDemo{\n  button{\n    margin: 10px;\n  }\n}"}]
-
-
 class Demo extends Component {
@@ -22,32 +20,44 @@ constructor(props){
         }
-        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}
-                <Button style={{"marginTop": "10px"}} shape="block" onClick={ this.handleClick }>
-                    { caret }
-                    { text }
-                </Button>
+                <p className='component-title'>{ title }</p>
+                <p>{ desc }</p>
+                <span className='component-code' onClick={this.handleClick}> 查看源码 <i className='uf uf-arrow-right'/> </span>
             </div>
         );
         return (
-            <Col md={12} >
-                <h3>{ title }</h3>
-                <p>{ desc }</p>
-                <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>
-        )
+            <Col md={12} id={title.trim()} className='component-demo'>
+            <Panel header={header}>
+                {example}
+            </Panel>
+           
+            <Drawer className='component-drawerc' title={title} show={this.state.open} placement='right' onClose={this.fCloseDrawer}>
+            <div className='component-code-copy'> JS代码 
+                <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>
+    )
     }
@@ -63,11 +73,11 @@ }
             <Row>
-                {DemoArray.map((child,index) => {
+            {DemoArray.map((child,index) => {
 
-                    return (
-                        <Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
-                    )
+                return (
+            <Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
+    )
 
-                })}
-            </Row>
-        )
+    })}
+    </Row>
+    )
     }
@@ -74,0 +84,0 @@ }

docs/api.md

@@ -1,10 +0,26 @@
-## Message 消息
+# 消息提醒 Message
 
 全局展示操作反馈信息。
 
+## 何时使用
+
+例如：成功、失败、警告等提示
+
+## 如何使用
+
+```
+import { Message } from 'tinper-bee';
+
+or
+
+import Message from 'bee-message';
+import 'bee-message/build/Message.css';
+
+```
+
 ## 代码演示
 
-### API
+## API
 
-#### 函数api
+### 函数api
 
@@ -29,3 +45,3 @@ ```
 
-#### message函数参数
+### message函数参数
 
@@ -44,3 +60,3 @@ |参数|说明|类型|默认值|
 
-#### 已支持的键盘操作
+### 已支持的键盘操作
 
@@ -50,1 +66,7 @@ |按键|功能|
 |esc |关闭message|
+
+## 注意事项
+
+暂无
+
+## 更新日志

package.json

 {
  "name": "bee-message",
- "version": "2.0.0",
+ "version": "2.0.1",
  "description": "Message ui component for react",
@@ -51,2 +51,4 @@ "keywords": [
   "bee-button": "latest",
+  "bee-clipboard": "^2.0.0",
+  "bee-drawer": "0.0.2",
   "bee-layout": "latest",
@@ -53,0 +55,0 @@ "bee-panel": "latest",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2650033

increased by102.25%

Lines of code

30850

increased by117.84%

Worsened metrics

Dev dependency count

14

increased by16.67%

Number of package files

27

decreased by-3.57%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes