bee-button-group - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

build/ButtonGroup.js

@@ -0,0 +0,0 @@ 'use strict';

demo/ButtonGroupDemo.js

@@ -0,0 +0,0 @@ import  ButtonGroup  from '../src';

demo/demolist/Demo1.js

@@ -0,0 +0,0 @@ /**

demo/demolist/Demo2.js

@@ -0,0 +0,0 @@ /**

demo/index-demo-base.js

@@ -1,2 +0,1 @@
-
 import { Con, Row, Col } from 'bee-layout';
@@ -29,20 +28,22 @@ import { Panel } from 'bee-panel';
     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 headerContent expanded={ this.state.open } colors='bordered' header={ example } footer={footer} footerStyle = {{padding: 0, borderColor: "transparent"}}>
+                <Panel copyable 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>
@@ -60,11 +61,11 @@ </Col>
         return (
-                <Row>
-                    {DemoArray.map((child,index) => {
+            <Row>
+                {DemoArray.map((child,index) => {
 
-                        return (
-                            <Demo example= {child.example} title= {child.title} code= {child.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>
         )
@@ -71,0 +72,0 @@ }

demo/index.js

@@ -1,2 +0,1 @@
-
 import { Con, Row, Col } from 'bee-layout';
@@ -14,3 +13,3 @@ import { Panel } from 'bee-panel';
 
-var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var DemoArray = [{"example":<Demo1 />,"title":" 默认按钮组","code":"/**\n *\n * @title 默认按钮组\n * @description 基础按钮组\n *\n */\n\nimport React, { Component } from 'react';\nimport ButtonGroup from 'bee-button-group';\nimport Button from 'bee-button';\nimport Icon from 'bee-icon';\n\nclass Demo1 extends Component {\n    render () {\n        return (\n            <div>\n            <ButtonGroup style={{ margin: 10 }}>\n                <Button shape='border'><Icon type='uf-navmenu' /></Button>\n                <Button shape='border'><Icon type='uf-file' /></Button>\n                <Button shape='border'><Icon type='uf-pencil' /></Button>\n                <Button shape='border'><Icon type='uf-del' /></Button>\n            </ButtonGroup>\n            <ButtonGroup style={{ margin: 10 }}>\n                <Button colors=\"primary\">新增</Button>\n                <Button colors=\"primary\">修改</Button>\n                <Button colors=\"primary\">删除</Button>\n            </ButtonGroup>\n            <ButtonGroup style={{ margin: 10 }}>\n                <Button colors=\"primary\"><Icon type='uf-navmenu' /></Button>\n                <Button colors=\"primary\"><Icon type='uf-file' /></Button>\n                <Button colors=\"primary\"><Icon type='uf-pencil' /></Button>\n                <Button colors=\"primary\"><Icon type='uf-del' /></Button>\n            </ButtonGroup>\n            </div>\n\n        )\n    }\n}\n\n\n","desc":" 基础按钮组"},{"example":<Demo2 />,"title":" 垂直排列的按钮组","code":"/**\n *\n * @title 垂直排列的按钮组\n * @description 通过`vertical`属性设置按钮组垂直排列\n *\n */\n\nimport React, { Component } from 'react';\nimport ButtonGroup from 'bee-button-group';\nimport Button from 'bee-button';\nimport Icon from 'bee-icon';\n\nclass Demo2 extends Component {\n    render () {\n        return (\n            <ButtonGroup vertical>\n                <Button colors=\"primary\"><Icon type='uf-navmenu' /></Button>\n                <Button colors=\"info\"><Icon type='uf-file' /></Button>\n                <Button colors=\"warning\"><Icon type='uf-del' /></Button>\n            </ButtonGroup>\n        )\n    }\n}\n\n\n\n","desc":" 通过`vertical`属性设置按钮组垂直排列"},{"example":<Demo3 />,"title":" 传入列表渲染按钮组","code":"/**\r\n *\r\n * @title 传入列表渲染按钮组\r\n * @description 通过`list`属性传入按钮组信息, 并且按钮具有选中样式,信息为Button组件可接受的props\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport ButtonGroup from 'bee-button-group';\r\n\r\nconst LIST = [\r\n    {\r\n        title: '未读信息',\r\n        colors: 'primary',\r\n        key: 'notRead'\r\n    },\r\n    {\r\n        title: '已读信息',\r\n        colors: 'primary',\r\n        key: 'readed'\r\n    },\r\n    {\r\n        title: '已发送信息',\r\n        colors: 'primary',\r\n        key: 'write'\r\n    },\r\n]\r\n\r\nclass Demo3 extends Component {\r\n    render () {\r\n        return (\r\n            <ButtonGroup list={ LIST } />\r\n        )\r\n    }\r\n}\r\n\r\n\r\n","desc":" 通过`list`属性传入按钮组信息, 并且按钮具有选中样式,信息为Button组件可接受的props"}]
+var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var DemoArray = [{"example":<Demo1 />,"title":" 默认按钮组","code":"/**\r\n *\r\n * @title 默认按钮组\r\n * @description 基础按钮组\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport { ButtonGroup, Icon, Button } from 'tinper-bee';\r\n\n\n\r\nclass Demo1 extends Component {\r\n    render () {\r\n        return (\r\n            <div>\r\n            <ButtonGroup style={{ margin: 10 }}>\r\n                <Button shape='border'><Icon type='uf-navmenu' /></Button>\r\n                <Button shape='border'><Icon type='uf-file' /></Button>\r\n                <Button shape='border'><Icon type='uf-pencil' /></Button>\r\n                <Button shape='border'><Icon type='uf-del' /></Button>\r\n            </ButtonGroup>\r\n            <ButtonGroup style={{ margin: 10 }}>\r\n                <Button colors=\"primary\">新增</Button>\r\n                <Button colors=\"primary\">修改</Button>\r\n                <Button colors=\"primary\">删除</Button>\r\n            </ButtonGroup>\r\n            <ButtonGroup style={{ margin: 10 }}>\r\n                <Button colors=\"primary\"><Icon type='uf-navmenu' /></Button>\r\n                <Button colors=\"primary\"><Icon type='uf-file' /></Button>\r\n                <Button colors=\"primary\"><Icon type='uf-pencil' /></Button>\r\n                <Button colors=\"primary\"><Icon type='uf-del' /></Button>\r\n            </ButtonGroup>\r\n            </div>\r\n\r\n        )\r\n    }\r\n}\r\n\r\n\r\n","desc":" 基础按钮组"},{"example":<Demo2 />,"title":" 垂直排列的按钮组","code":"/**\r\n *\r\n * @title 垂直排列的按钮组\r\n * @description 通过`vertical`属性设置按钮组垂直排列\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport { ButtonGroup, Icon, Button } from 'tinper-bee';\r\n\n\n\r\nclass Demo2 extends Component {\r\n    render () {\r\n        return (\r\n            <ButtonGroup vertical>\r\n                <Button colors=\"primary\"><Icon type='uf-navmenu' /></Button>\r\n                <Button colors=\"info\"><Icon type='uf-file' /></Button>\r\n                <Button colors=\"warning\"><Icon type='uf-del' /></Button>\r\n            </ButtonGroup>\r\n        )\r\n    }\r\n}\r\n\r\n\r\n\r\n","desc":" 通过`vertical`属性设置按钮组垂直排列"},{"example":<Demo3 />,"title":" 传入列表渲染按钮组","code":"/**\r\n *\r\n * @title 传入列表渲染按钮组\r\n * @description 通过`list`属性传入按钮组信息, 并且按钮具有选中样式,信息为Button组件可接受的props\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport { ButtonGroup } from 'tinper-bee';\r\n\r\nconst LIST = [\r\n    {\r\n        title: '未读信息',\r\n        colors: 'primary',\r\n        key: 'notRead'\r\n    },\r\n    {\r\n        title: '已读信息',\r\n        colors: 'primary',\r\n        key: 'readed'\r\n    },\r\n    {\r\n        title: '已发送信息',\r\n        colors: 'primary',\r\n        key: 'write'\r\n    },\r\n]\r\n\r\nclass Demo3 extends Component {\r\n    render () {\r\n        return (\r\n            <ButtonGroup list={ LIST } />\r\n        )\r\n    }\r\n}\r\n\r\n\r\n","desc":" 通过`list`属性传入按钮组信息, 并且按钮具有选中样式,信息为Button组件可接受的props"}]
 
@@ -31,20 +30,22 @@
     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 headerContent expanded={ this.state.open } colors='bordered' header={ example } footer={footer} footerStyle = {{padding: 0, borderColor: "transparent"}}>
+                <Panel copyable 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>
@@ -62,11 +63,11 @@ </Col>
         return (
-                <Row>
-                    {DemoArray.map((child,index) => {
+            <Row>
+                {DemoArray.map((child,index) => {
 
-                        return (
-                            <Demo example= {child.example} title= {child.title} code= {child.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 +74,0 @@ }

docs/api.md

@@ -0,0 +0,0 @@ ## ButtonGroup

package.json

 {
  "name": "bee-button-group",
- "version": "1.1.0",
+ "version": "2.0.0",
  "description": "button-group ui component for react",
@@ -40,5 +40,5 @@ "keywords": [
   "babel-runtime": "^6.23.0",
-  "bee-button": "^1.0.6",
+  "bee-button": "^2.0.0",
   "classnames": "^2.2.5",
-  "tinper-bee-core": "^0.4.1"
+  "tinper-bee-core": "latest"
  },
@@ -53,3 +53,3 @@ "peerDependencies": {
   "bee-layout": "latest",
-  "bee-panel": "latest",
+  "bee-panel": "1.2.12",
   "chai": "^3.5.0",
@@ -56,0 +56,0 @@ "console-polyfill": "~0.2.1",

README.md

@@ -0,0 +0,0 @@ # bee-button-group

src/ButtonGroup.js

@@ -0,0 +0,0 @@ import React, {Component} from 'react'

src/index.js

 import ButtonGroup from './ButtonGroup';
 export default ButtonGroup;

test/ButtonGroup.test.js

@@ -0,0 +0,0 @@ import React from 'react';

New alerts

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

1212783

increased by16.97%

Number of package files

27

increased by3.85%

Lines of code

11556

increased by15.58%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedbee-button@2.0.20(transitive)

• + Addedtinper-bee-core@2.0.38(transitive)

• - Removedbee-button@1.0.6(transitive)

• - Removedtinper-bee-core@0.4.1(transitive)

• Updatedbee-button@^2.0.0

• Updatedtinper-bee-core@latest