bee-button - npm Package Compare versions

Comparing version 0.0.6 to 0.1.0

build/Button.js

@@ -37,3 +37,3 @@ 'use strict';
      */
-    size: _react.PropTypes.oneOf(['sm', 'xg', 'lg', '']),
+    size: _react.PropTypes.oneOf(['sm', 'xg', 'lg']),
     /**
@@ -46,7 +46,7 @@ * @title 样式
      */
-    shape: _react.PropTypes.oneOf(['block', 'round', 'squared', 'floating', 'pillRight', 'pillLeft', '']),
+    shape: _react.PropTypes.oneOf(['block', 'round', 'squared', 'floating', 'pillRight', 'pillLeft', 'border']),
     /**
     * @title 类型
     */
-    type: _react.PropTypes.oneOf(['primary', 'accent', 'success', 'info', 'warning', 'danger', '']),
+    colors: _react.PropTypes.oneOf(['primary', 'accent', 'success', 'info', 'warning', 'danger', 'default']),
     /**
@@ -62,7 +62,4 @@ * @title 是否禁用
     className: _react.PropTypes.string,
+
     /**
-     * @title 内容
-     */
-    children: _react.PropTypes.oneOfType([_react2["default"].PropTypes.element, _react2["default"].PropTypes.string]),
-    /**
      * @title <button> 的 type
@@ -75,9 +72,6 @@ * @veIgnore
 var defaultProps = {
-    size: '',
-    type: 'primary',
-    shape: '',
     disabled: false,
-    className: '',
-    children: '',
-    htmlType: 'button'
+    htmlType: 'button',
+    clsPrefix: 'u-button'
+
 };
@@ -90,3 +84,3 @@
 },
-    typeMap = {
+    colorsMap = {
     primary: 'primary',
@@ -102,2 +96,3 @@ accent: 'accent',
     round: 'round',
+    border: 'border',
     squared: 'squared',
@@ -107,7 +102,6 @@ floating: 'floating',
     pillLeft: 'pill-left'
-},
-    clsPrefix = 'u-button';
+};
 
-var Button = function (_React$Component) {
-    _inherits(Button, _React$Component);
+var Button = function (_Component) {
+    _inherits(Button, _Component);
 
@@ -117,3 +111,3 @@ function Button(props) {
 
-        return _possibleConstructorReturn(this, _React$Component.call(this, props));
+        return _possibleConstructorReturn(this, _Component.call(this, props));
     }
@@ -123,3 +117,3 @@
         var _props = this.props;
-        var type = _props.type;
+        var colors = _props.colors;
         var shape = _props.shape;
@@ -131,4 +125,5 @@ var disabled = _props.disabled;
         var htmlType = _props.htmlType;
+        var clsPrefix = _props.clsPrefix;
 
-        var others = _objectWithoutProperties(_props, ['type', 'shape', 'disabled', 'className', 'size', 'children', 'htmlType']);
+        var others = _objectWithoutProperties(_props, ['colors', 'shape', 'disabled', 'className', 'size', 'children', 'htmlType', 'clsPrefix']);
 
@@ -145,6 +140,6 @@ var clsObj = {};
         }
-        if (typeMap[type]) {
-            clsObj[clsPrefix + '-' + typeMap[type]] = true;
+        if (colorsMap[colors]) {
+            clsObj[clsPrefix + '-' + colorsMap[colors]] = true;
         }
-        var classNames = (0, _classnames2["default"])(clsPrefix, clsObj);
+        var classes = (0, _classnames2["default"])(clsPrefix, clsObj);
         return _react2["default"].createElement(
@@ -154,3 +149,3 @@ 'button',
                 type: htmlType,
-                className: classNames,
+                className: classes,
                 disabled: disabled
@@ -163,3 +158,3 @@ }, others),
     return Button;
-}(_react2["default"].Component);
+}(_react.Component);
 
@@ -166,0 +161,0 @@ Button.propTypes = propTypes;

demo/ButtonDemo.js

@@ -15,10 +15,10 @@ import Button from '../src';
 					<h2>{"默认:"}</h2>
-					<Button htmlType="submit" className="xxxx" style={{color: '#f00'}}>default</Button>
+					<Button htmltype="submit" className="xxxx" style={{color: '#f00'}}>default</Button>
 				</div>
 				<div>
 					<h2>{"大小:"}</h2>
-					<Button size="sm" type="primary">小按钮</Button>
-					<Button type="primary">默认</Button>
-					<Button size="lg" type="primary">大按钮</Button>
-					<Button size="xg" type="primary">巨大按钮</Button>
+					<Button size="sm" colors="primary">小按钮</Button>
+					<Button colors="primary">默认</Button>
+					<Button size="lg" colors="primary">大按钮</Button>
+					<Button size="xg" colors="primary">巨大按钮</Button>
 				</div>
@@ -28,18 +28,19 @@
 					<h2>{"颜色:"}</h2>
-					<Button type="primary">default 主色按钮</Button>
-					<Button type="accent">辅色按钮</Button>
-          <Button disabled>不可点击</Button>
-					<Button type="success">辅色按钮</Button>
-					<Button type="info">辅色按钮</Button>
-					<Button type="warning">辅色按钮</Button>
-					<Button type="danger">辅色按钮</Button>
+					<Button colors="primary">主色按钮</Button>
+					<Button colors="accent">辅色按钮</Button>
+                    <Button disabled>不可点击</Button>
+					<Button colors="success">success</Button>
+					<Button colors="info">info</Button>
+					<Button colors="warning">warning</Button>
+					<Button colors="danger">danger</Button>
 				</div>
 				<div>
 					<h2>{"形状:"}</h2>
-					<Button shape="block" type="primary">块状按钮</Button>
-					<Button shape="round" type="primary">圆形边按钮</Button>
-					<Button shape="squared" type="primary">方形按钮</Button>
-					<Button shape="floating" type="primary">圆形按钮</Button>
-					<Button shape="pillRight" type="primary">右半圆按钮</Button>
-					<Button shape="pillLeft" type="primary">左半圆按钮</Button>
+					<Button shape="block" colors="primary">块状按钮</Button>
+					<Button shape="round" colors="primary">圆形边按钮</Button>
+					<Button shape="border" colors="primary">边框按钮</Button>
+					<Button shape="squared" colors="primary">方形按钮</Button>
+					<Button shape="floating" colors="primary">圆形按钮</Button>
+					<Button shape="pillRight" colors="primary">右半圆按钮</Button>
+					<Button shape="pillLeft" colors="primary">左半圆按钮</Button>
 				</div>
@@ -46,0 +47,0 @@ <div>

demo/index.js

@@ -1,2 +0,56 @@
-let Demo = require('./ButtonDemo');
-ReactDOM.render(<Demo/>, document.getElementById('neouiReactDemo'));
+import Button from '../src';
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+
+function demo1() {
+    return (
+        <div>
+                <Button size="sm" colors="primary">小按钮</Button>
+                <Button colors="primary">默认</Button>
+                <Button size="lg" colors="primary">大按钮</Button>
+                <Button size="xg" colors="primary">巨大按钮</Button>
+        </div>
+
+
+    );
+}
+
+function demo2 () {
+    return (
+        <div>
+            <Button>Default</Button>
+            <Button colors="primary">主色按钮</Button>
+            <Button colors="accent">辅色按钮</Button>
+            <Button disabled>不可点击</Button>
+            <Button colors="success">success</Button>
+            <Button colors="info">info</Button>
+            <Button colors="warning">warning</Button>
+            <Button colors="danger">danger</Button>
+        </div>
+    );
+}
+
+function demo3 () {
+    return (
+        <div>
+            <Button shape="block" colors="primary">块状按钮</Button>
+            <Button shape="round" colors="primary">圆形边按钮</Button>
+            <Button shape="squared" colors="primary">方形按钮</Button>
+            <Button shape="border" colors="primary">边框按钮</Button>
+            <Button shape="border" colors="accent">边框按钮</Button>
+            <Button shape="border" colors="success">边框按钮</Button>
+            <Button shape="border" colors="warning">边框按钮</Button>
+            <Button shape="border" colors="info">边框按钮</Button>
+            <Button shape="border" colors="danger">边框按钮</Button>
+            <Button shape="floating" colors="primary">圆形按钮</Button>
+            <Button shape="pillRight" colors="primary">右半圆按钮</Button>
+            <Button shape="pillLeft" colors="primary">左半圆按钮</Button>
+        </div>
+    );
+}
+
+
+ReactDOM.render(demo1(), document.getElementById('neouiReactDemo1'));
+ReactDOM.render(demo2(), document.getElementById('neouiReactDemo2'));
+ReactDOM.render(demo3(), document.getElementById('neouiReactDemo3'));

package.json

 {
  "name": "bee-button",
- "version": "0.0.6",
+ "version": "0.1.0",
  "description": "tinper-bee button ui component for react",
@@ -26,3 +26,3 @@ "keywords": [
  "scripts": {
-  "dev": "bee-tools run dev",
+  "dev": "bee-tools run start",
   "build": "bee-tools run build",
@@ -32,2 +32,3 @@ "lint": "bee-tools run lint",
   "chrome": "bee-tools run chrome",
+  "coveralls": "bee-tools run coverage",
   "browsers": "bee-tools run browsers",
@@ -38,3 +39,3 @@ "pub": "bee-tools run pub"
   "classnames": "^2.2.5",
-  "tinper-bee-core": "^0.0.4"
+  "tinper-bee-core": "latest"
  },
@@ -45,5 +46,7 @@ "devDependencies": {
   "react": "~0.14.0",
-  "react-addons-test-utils": "^15.3.2",
+  "console-polyfill": "~0.2.1",
+  "es5-shim": "~4.1.10",
+  "react-addons-test-utils": "15.3.2",
   "react-dom": "~0.14.0"
  }
 }

README.md

 # button
 
 [![npm version](https://img.shields.io/npm/v/bee-button.svg)](https://www.npmjs.com/package/bee-button)
-[![Build Status](https://img.shields.io/travis/tinper-bee/button/master.svg)](https://travis-ci.org/tinper-bee/button)
-[![devDependency Status](https://img.shields.io/david/dev/tinper-bee/button.svg)](https://david-dm.org/tinper-bee/button#info=devDependencies)
+[![Build Status](https://img.shields.io/travis/tinper-bee/bee-button/master.svg)](https://travis-ci.org/tinper-bee/bee-button)
+[![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-button/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-button?branch=master)
 
+
 react button component for tinper-bee
 
-#### setup develop environment
+可定制的按钮组件
 
-```sh
-$ git clone https://github.com/tinper-bee/button
-$ cd button
-$ npm install
-$ npm run dev
-```
-
 ## 使用
@@ -22,3 +16,3 @@
 #### 组件引入
-先进行下载button包
+先进行下载bee-button包
 ```
@@ -29,11 +23,9 @@ npm install --save bee-button
 ```js
-import { Button } from 'bee-button';
-React.render(<div>
-    <div>
+import Button from 'bee-button';
+ReactDOM.render(
         <Button type="primary" size="lg" style={{color: '#000'}}>Button</Button>
-    </div>
-</div>, document.getElementById('target'));
+        , document.getElementById('target'));
 ```
 #### 样式引入
-- 可以使用link引入dist目录下button.css
+- 可以使用link引入build目录下button.css
 ```
@@ -56,6 +48,7 @@ <link rel="stylesheet" href="./node_modules/build/bee-button.css">
 ## API
+
 |参数|说明|类型|默认值|
-|---|----|---|------|
+|:---|:----:|:---:|------:|
 |size|按钮大小(`large` `medium` `small`)|string|medium|
-|type|类型(`primary` `success`)|string|''|
+|colors|颜色(`primary` `success`)|string|''|
 |shape|形状(`round` `squared`)|string|''|
@@ -66,1 +59,11 @@ |disabled|是否禁用(`disabled` 或 `true` `false`)|string|false|
 |style|style 属性|object|''|
+
+#### setup develop environment
+
+```sh
+$ git clone https://github.com/tinper-bee/bee-button
+$ cd bee-button
+$ npm install -g bee-tools
+$ npm install
+$ npm run dev
+```

src/Button.js

@@ -1,2 +0,2 @@
-import  React, { PropTypes } from 'react';
+import  React, { PropTypes, Component } from 'react';
 import ReactDOM from 'react-dom';
@@ -9,3 +9,3 @@ import classnames from 'classnames';
    */
-  size: PropTypes.oneOf(['sm', 'xg', 'lg', '']),
+  size: PropTypes.oneOf(['sm', 'xg', 'lg']),
   /**
@@ -18,7 +18,7 @@ * @title 样式
    */
-  shape: PropTypes.oneOf(['block', 'round', 'squared', 'floating', 'pillRight', 'pillLeft', '']),
+  shape: PropTypes.oneOf(['block', 'round', 'squared', 'floating', 'pillRight', 'pillLeft', 'border']),
    /**
    * @title 类型
    */
-  type: PropTypes.oneOf(['primary', 'accent', 'success', 'info', 'warning', 'danger', '']),
+  colors: PropTypes.oneOf(['primary', 'accent', 'success', 'info', 'warning', 'danger','default']),
   /**
@@ -34,10 +34,4 @@ * @title 是否禁用
   className: PropTypes.string,
+
   /**
-   * @title 内容
-   */
-  children: PropTypes.oneOfType([
-      React.PropTypes.element,
-      React.PropTypes.string
-  ]),
-  /**
    * @title <button> 的 type
@@ -50,9 +44,6 @@ * @veIgnore
 const defaultProps = {
-  size: '',
-  type: 'primary',
-  shape: '',
   disabled: false,
-  className: '',
-  children: '',
-  htmlType: 'button'
+  htmlType: 'button',
+  clsPrefix: 'u-button'
+
 }
@@ -65,3 +56,3 @@
     },
-    typeMap = {
+    colorsMap = {
         primary: 'primary',
@@ -77,2 +68,3 @@ accent: 'accent',
         round: 'round',
+        border: 'border',
         squared: 'squared',
@@ -82,7 +74,6 @@ floating: 'floating',
         pillLeft: 'pill-left'
-    },
-    clsPrefix = 'u-button';
+    };
 
 
-class Button extends React.Component {
+class Button extends Component {
     constructor(props) {
@@ -92,3 +83,11 @@ super(props);
     render() {
-        let {type, shape, disabled, className, size, children, htmlType, ...others} = this.props;
+        let {colors,
+            shape,
+            disabled,
+            className,
+            size,
+            children,
+            htmlType,
+            clsPrefix,
+            ...others} = this.props;
         let clsObj = {};
@@ -104,10 +103,10 @@ if (className) {
         }
-        if (typeMap[type]) {
-            clsObj[`${clsPrefix}-${typeMap[type]}`] = true;
+        if (colorsMap[colors]) {
+            clsObj[`${clsPrefix}-${colorsMap[colors]}`] = true;
         }
-        let classNames = classnames(clsPrefix, clsObj);
+        let classes = classnames(clsPrefix, clsObj);
         return (
             <button
                 type={htmlType}
-                className={classNames}
+                className={classes}
                 disabled={disabled}
@@ -114,0 +113,0 @@ {...others}>

test/index.test.js

@@ -28,23 +28,23 @@ import React from 'react';
   it('Button should be primary', function () {
-    let button = shallow(<Button type="primary" />);
+    let button = shallow(<Button colors="primary" />);
     expect(button.hasClass('u-button-primary')).to.equal(true);
   });
   it('Button should be accent', function () {
-    let button = shallow(<Button type="accent" />);
+    let button = shallow(<Button colors="accent" />);
     expect(button.hasClass('u-button-accent')).to.equal(true);
   });
   it('Button should be success', function () {
-    let button = shallow(<Button type="success" />);
+    let button = shallow(<Button colors="success" />);
     expect(button.hasClass('u-button-success')).to.equal(true);
   });
   it('Button should be info', function () {
-    let button = shallow(<Button type="info" />);
+    let button = shallow(<Button colors="info" />);
     expect(button.hasClass('u-button-info')).to.equal(true);
   });
   it('Button should be warning', function () {
-    let button = shallow(<Button type="warning" />);
+    let button = shallow(<Button colors="warning" />);
     expect(button.hasClass('u-button-warning')).to.equal(true);
   });
   it('Button should be danger', function () {
-    let button = shallow(<Button type="danger" />);
+    let button = shallow(<Button colors="danger" />);
     expect(button.hasClass('u-button-danger')).to.equal(true);
@@ -51,0 +51,0 @@ });

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

Improved metrics

Number of lines in readme file

66

increased by4.76%

Worsened metrics

Total package byte prevSize

25237

decreased by-75.14%

Dev dependency count

7

increased by40%

Number of package files

16

decreased by-52.94%

Lines of code

422

decreased by-61.21%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedadd-dom-event-listener@1.1.0(transitive)

• + Addedcomponent-classes@1.2.6(transitive)

• + Addedcomponent-indexof@0.0.3(transitive)

• + Addedcreate-react-class@15.7.0(transitive)

• + Addeddom-align@1.12.4(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-dom@16.14.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedscheduler@0.19.1(transitive)

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

• + Addedwarning@3.0.0(transitive)

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

• Updatedtinper-bee-core@latest