uxcore-empty-data - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

.eslintrc.json

@@ -11,4 +11,5 @@ {
         "import/no-extraneous-dependencies": "off",
-        "react/jsx-no-bind": "off"
+        "react/jsx-no-bind": "off",
+        "react/forbid-prop-types": "off"
     }
 }

build/EmptyData.js

@@ -5,2 +5,4 @@ 'use strict';
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -20,2 +22,3 @@
 var React = require('react');
+var classnames = require('classnames');
 
@@ -35,11 +38,30 @@ var EmptyData = function (_React$Component) {
   EmptyData.prototype.render = function render() {
+    var _classnames;
+
     var me = this;
-    var _me$props = me.props;
-    var prefixCls = _me$props.prefixCls;
-    var children = _me$props.children;
+    var _me$props = me.props,
+        prefixCls = _me$props.prefixCls,
+        children = _me$props.children,
+        type = _me$props.type,
+        icon = _me$props.icon,
+        largeIcon = _me$props.largeIcon,
+        style = _me$props.style,
+        className = _me$props.className;
 
+    var iconMap = {
+      normal: icon,
+      large: largeIcon
+    };
     return React.createElement(
       'div',
-      { className: '' + prefixCls },
-      React.createElement('i', { className: 'kuma-icon kuma-icon-smile' }),
+      {
+        className: classnames((_classnames = {}, _defineProperty(_classnames, prefixCls + ' ' + type, true), _defineProperty(_classnames, className, !!className), _classnames)),
+        style: style
+      },
+      React.createElement('div', {
+        className: prefixCls + '-icon',
+        style: {
+          backgroundImage: 'url(' + iconMap[type] + ')'
+        }
+      }),
       React.createElement(
@@ -58,7 +80,16 @@ 'div',
   prefixCls: 'kuma-empty-data',
-  children: '暂无数据'
+  children: '暂无数据',
+  type: 'normal',
+  icon: 'https://img.alicdn.com/tps/TB1SFFFOpXXXXXzXVXXXXXXXXXX-166-168.png',
+  largeIcon: 'https://img.alicdn.com/tps/TB1oWW_OXXXXXXyapXXXXXXXXXX-390-390.png'
 };
 
 // http://facebook.github.io/react/docs/reusable-components.html
-EmptyData.propTypes = {};
+EmptyData.propTypes = {
+  prefixCls: React.PropTypes.string,
+  icon: React.PropTypes.string,
+  largeIcon: React.PropTypes.string,
+  style: React.PropTypes.object,
+  type: React.PropTypes.oneOf(['normal', 'large'])
+};
 
@@ -65,0 +96,0 @@ EmptyData.displayName = 'EmptyData';

demo/EmptyDataDemo.jsx

@@ -11,2 +11,3 @@ /**
 const EmptyData = require('../src');
+const Button = require('uxcore-button');
 
@@ -25,8 +26,15 @@ class Demo extends React.Component {
         <h2>默认</h2>
-        <EmptyData />
+        <EmptyData style={{ width: '200px' }} />
         <h2>定制</h2>
-        <EmptyData>
-          你还没有创建目标哦，马上去
-          <a>添加目标</a>
+        <EmptyData style={{ width: '200px' }}>
+          <div style={{ lineHeight: 2 }}>
+            <div>你还没有创建目标哦</div>
+            <div>马上去<a>添加目标</a></div>
+          </div>
         </EmptyData>
+        <h2>页面级</h2>
+        <EmptyData style={{ width: '200px' }} type="large">
+          <div>你还没有创建目标哦</div>
+          <Button type="outline" style={{ marginTop: '10px' }}>添加目标</Button>
+        </EmptyData>
       </div>
@@ -33,0 +41,0 @@ );

HISTORY.md

@@ -1,1 +0,5 @@
-# history
+# history
+
+## 0.1.2
+
+* `CHANGED` icon change

package.json

 {
  "name": "uxcore-empty-data",
- "version": "0.1.1",
+ "version": "0.1.2",
  "description": "uxcore-empty-data component for uxcore.",
@@ -35,9 +35,10 @@ "repository": "https://github.com/uxcore/uxcore-empty-data.git",
   "es5-shim": "^4.5.8",
+  "expect.js": "~0.3.1",
+  "kuma-base": "1.x",
   "react": "0.14.x",
+  "react-addons-test-utils": "0.14.x",
   "react-dom": "0.14.x",
-  "react-addons-test-utils": "0.14.x",
-  "expect.js": "~0.3.1",
-  "uxcore-tools": "0.2.x",
+  "uxcore-button": "^0.4.5",
   "uxcore-kuma": "2.x",
-  "kuma-base": "1.x"
+  "uxcore-tools": "0.2.x"
  },
@@ -44,0 +45,0 @@ "dependencies": {

README.md

@@ -76,2 +76,8 @@ ## uxcore-empty-data
 |children|jsx|optional|暂无数据|内容|
+|icon|string|optional| - | 默认的图标 |
+|largeIcon|string|optional| - | 默认的大图标 |
+|style|object|optional| - | root 节点的样式 |
+|prefixCls|string|optional|kuma-empty-data|类名前缀，不想使用 kuma 主题时使用|
+|className|string|oprional| - |root 节点的额外类名，用于定制|
 
+

src/EmptyData.jsx

@@ -9,2 +9,3 @@ /**
 const React = require('react');
+const classnames = require('classnames');
 
@@ -20,6 +21,21 @@ class EmptyData extends React.Component {
     const me = this;
-    const { prefixCls, children } = me.props; 
+    const { prefixCls, children, type, icon, largeIcon, style, className } = me.props;
+    const iconMap = {
+      normal: icon,
+      large: largeIcon,
+    };
     return (
-      <div className={`${prefixCls}`}>
-        <i className="kuma-icon kuma-icon-smile" />
+      <div
+        className={classnames({
+          [`${prefixCls} ${type}`]: true,
+          [className]: !!className,
+        })}
+        style={style}
+      >
+        <div
+          className={`${prefixCls}-icon`}
+          style={{
+            backgroundImage: `url(${iconMap[type]})`,
+          }}
+        />
         <div className={`${prefixCls}-content`}>{children}</div>
@@ -34,2 +50,5 @@ </div>
   children: '暂无数据',
+  type: 'normal',
+  icon: 'https://img.alicdn.com/tps/TB1SFFFOpXXXXXzXVXXXXXXXXXX-166-168.png',
+  largeIcon: 'https://img.alicdn.com/tps/TB1oWW_OXXXXXXyapXXXXXXXXXX-390-390.png',
 };
@@ -40,2 +59,7 @@
 EmptyData.propTypes = {
+  prefixCls: React.PropTypes.string,
+  icon: React.PropTypes.string,
+  largeIcon: React.PropTypes.string,
+  style: React.PropTypes.object,
+  type: React.PropTypes.oneOf(['normal', 'large']),
 };
@@ -42,0 +66,0 @@

No alert changes

Improved metrics

Total package byte prevSize

13818

increased by27.07%

Lines of code

224

increased by38.27%

Number of lines in readme file

83

increased by7.79%

Worsened metrics

Dev dependency count

10

increased by11.11%

No dependency changes