uxcore-badge - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

build/Badge.js

@@ -65,3 +65,4 @@ 'use strict';
         dot = _props.dot,
-        text = _props.text;
+        text = _props.text,
+        themeType = _props.themeType;
     var count = this.props.count;
@@ -79,7 +80,9 @@
     var scrollNumberCls = prefixCls + (dot ? '-dot' : '-count');
-    var badgeCls = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, className, !!className), _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, prefixCls + '-not-a-wrapper', !children), _classNames));
+    var badgeCls = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, className, !!className), _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, prefixCls + '-' + themeType, themeType && themeType !== 'default'), _defineProperty(_classNames, prefixCls + '-not-a-wrapper', !children), _classNames));
 
     return _react2["default"].createElement(
       'span',
-      { className: badgeCls, title: count,
+      {
+        className: badgeCls,
+        title: count,
         style: this.props.style
@@ -99,3 +102,4 @@ },
           className: scrollNumberCls,
-          count: count, style: style
+          count: count,
+          style: style
         })
@@ -114,3 +118,4 @@ )
   overflowCount: 99,
-  text: null
+  text: null,
+  themeType: 'default'
 };
@@ -126,3 +131,4 @@
   style: _propTypes2["default"].object,
-  children: _propTypes2["default"].any
+  children: _propTypes2["default"].any,
+  themeType: _propTypes2["default"].oneOf(['default', 'dark'])
 };
@@ -129,0 +135,0 @@

demo/BadgeDemo.jsx

@@ -10,7 +10,6 @@ /**
 const React = require('react');
+const Button = require('uxcore-button');
 const Badge = require('../src');
-const Button = require('uxcore-button');
 
 class Demo extends React.Component {
-
   constructor(props) {
@@ -53,15 +52,37 @@ super(props);
       >
-        <h1>基本模式</h1>
+        <h1>
+          基本模式
+        </h1>
         <Badge count={1}>
           <span href="#" className="head-example" />
         </Badge>
-        <h1>小点</h1>
+        <h1>
+          小点
+        </h1>
         <Badge dot>
           <span href="#" className="head-example" />
         </Badge>
-        <h1>文字型</h1>
-        <Badge text={'NEW'}>
+        <h1>
+          文字型
+        </h1>
+        <Badge text="NEW">
           <span href="#" className="head-example" />
         </Badge>
-        <h1>显示/隐藏</h1>
+        <h1>
+          深色背景下
+        </h1>
+        <div style={{ background: '#F37327', padding: '10px 0' }}>
+          <Badge themeType="dark" count={1}>
+            <span href="#" className="head-example" />
+          </Badge>
+          <Badge themeType="dark" dot>
+            <span href="#" className="head-example" />
+          </Badge>
+          <Badge themeType="dark" text="NEW">
+            <span href="#" className="head-example" />
+          </Badge>
+        </div>
+        <h1>
+          显示/隐藏
+        </h1>
         <Badge count={this.state.count}>
@@ -81,9 +102,17 @@ <span href="#" className="head-example" />
         <div>
-          <Button type="outline" onClick={this.handleShow.bind(this)}>显示/隐藏</Button>
+          <Button type="outline" onClick={this.handleShow.bind(this)}>
+            显示/隐藏
+          </Button>
         </div>
-        <h1>包裹文字</h1>
+        <h1>
+          包裹文字
+        </h1>
         <Badge dot style={{ top: '-1px' }}>
-          <a href="https://uxcore.coding.me" rel="noopener noreferrer" target="_blank">链接文字</a>
+          <a href="https://uxcore.coding.me" rel="noopener noreferrer" target="_blank">
+            链接文字
+          </a>
         </Badge>
-        <h1>数字增减</h1>
+        <h1>
+          数字增减
+        </h1>
         <Badge count={this.state.count2}>
@@ -96,7 +125,13 @@ <span href="#" className="head-example" />
             type="outline"
-            onClick={this.handlePlus.bind(this)} style={{
+            onClick={this.handlePlus.bind(this)}
+            style={{
               marginRight: 10,
             }}
-          >+</Button>
-          <Button size="small" type="outline" onClick={this.handleMinus.bind(this)}>-</Button>
+          >
+            +
+
+          </Button>
+          <Button size="small" type="outline" onClick={this.handleMinus.bind(this)}>
+            -
+          </Button>
         </div>
@@ -103,0 +138,0 @@ </div>

HISTORY.md

@@ -0,1 +1,5 @@
+## 0.3.4
+
+* `CHANGED` support new prop  `themeType`
+
 ## 0.3.1
@@ -2,0 +6,0 @@

package.json

 {
   "name": "uxcore-badge",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "uxcore-badge component for uxcore.",
@@ -5,0 +5,0 @@ "repository": "https://github.com/uxcore/uxcore-badge.git",

README.md

@@ -39,2 +39,3 @@ ---
 | text | string | optional | "" | 展示的文字 |
+| themeType | string | optional | default | 主题，枚举值，default、dark，dark 用于深色背景下 |
 

src/Badge.jsx

@@ -18,3 +18,5 @@ /**
   render() {
-    const { prefixCls, overflowCount, className, style, children, dot, text } = this.props;
+    const {
+      prefixCls, overflowCount, className, style, children, dot, text, themeType,
+    } = this.props;
     let { count } = this.props;
@@ -34,2 +36,3 @@ count = count > overflowCount ? `${overflowCount}+` : count;
       [prefixCls]: true,
+      [`${prefixCls}-${themeType}`]: themeType && themeType !== 'default',
       [`${prefixCls}-not-a-wrapper`]: !children,
@@ -39,3 +42,5 @@ });
     return (
-      <span className={badgeCls} title={count}
+      <span
+        className={badgeCls}
+        title={count}
         style={this.props.style}
@@ -51,8 +56,11 @@ >
           {
-            hidden ? null :
-              <ScrollNumber
-                data-show={!hidden}
-                className={scrollNumberCls}
-                count={count} style={style}
-              />
+            hidden ? null
+              : (
+                <ScrollNumber
+                  data-show={!hidden}
+                  className={scrollNumberCls}
+                  count={count}
+                  style={style}
+                />
+              )
           }
@@ -71,2 +79,3 @@ </Animate>
   text: null,
+  themeType: 'default',
 };
@@ -86,2 +95,3 @@
   children: PropTypes.any,
+  themeType: PropTypes.oneOf(['default', 'dark']),
 };
@@ -88,0 +98,0 @@

Fixed 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

Improved metrics

Total package byte prevSize

41183

increased by4.26%

Lines of code

739

increased by7.57%

Number of lines in readme file

41

increased by2.5%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes