ver. 2.2.1

uxcore · Sep 12, 2018 · eec20d1 · eec20d1
1 parent 686e4d4
commit eec20d1
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 55 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,5 +1,9 @@
 # history
 
+## 2.2.1
+
+`CHANGED` support js style export
+
 ## 2.2.0
 
 * `CHANGED` upgrade react to v16

diff --git a/demo/TagDemo.jsx b/demo/TagDemo.jsx
@@ -11,6 +11,7 @@
 /* eslint-disable no-param-reassign */
 
 const React = require('react');
+const Tooltip = require('uxcore-tooltip');
 
 const Tag = require('../src');
 
@@ -186,24 +187,31 @@ class Demo extends React.Component {
       <div className="demo">
         <h2>互动性 TAG</h2>
         <Tag {...props}>
-          {me.state.data.map((item, index) => (
-            <Item
-              key={`uxcore-tag-item-${index}`}
-              className={item.createByOwner ? 'create-by-owner' : ''}
-              tag={item.tag}
-              count={item.count}
-              canAddCount={item.canAddCount}
-              canDelete
-              onClick={me.onClickTag.bind(me)}
-              maxDisplayCount={99}
-              onAddCount={me.onLike.bind(me)}
-              onDelete={me.onDelete.bind(me)}
-              confirmDeleteText="确定删除该标签吗?"
-              locale="zh-cn"
-            >
-              {item.tag}
-            </Item>
-          ))}
+          {me.state.data.map((item, index) => {
+            const res = (
+              <Item
+                key={`uxcore-tag-item-${index}`}
+                className={item.createByOwner ? 'create-by-owner' : ''}
+                tag={item.tag}
+                count={item.count}
+                canAddCount={item.canAddCount}
+                canDelete
+                onClick={me.onClickTag.bind(me)}
+                maxDisplayCount={99}
+                onAddCount={me.onLike.bind(me)}
+                onDelete={me.onDelete.bind(me)}
+                confirmDeleteText="确定删除该标签吗?"
+                locale="zh-cn"
+              >
+                {item.tag}
+              </Item>);
+
+            if (index < 5) {
+              return <Tooltip overlay={<p>test</p>} placement="bottom" trigger={["hover"]}><span>{res}</span></Tooltip>;
+            }
+
+            return res;
+          })}
         </Tag>
         <h2>展示型 TAG （只读）</h2>
         <Tag addTags={false}>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uxcore-tag",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "uxcore-tag component for uxcore.",
   "repository": "https://github.com/uxcore/uxcore-tag.git",
   "author": "peijie.dpj",
@@ -31,17 +31,18 @@
     "Tag"
   ],
   "devDependencies": {
+    "babel-polyfill": "6.x",
     "console-polyfill": "^0.2.2",
     "enzyme": "^3.0.0",
+    "enzyme-adapter-react-16": "1.x",
     "expect.js": "~0.3.1",
     "kuma-base": "1.x",
     "react": "16.x",
     "react-dom": "16.x",
     "react-test-renderer": "16.x",
     "uxcore-kuma": "*",
     "uxcore-tools": "^0.3.0",
-    "babel-polyfill": "6.x",
-    "enzyme-adapter-react-16": "1.x"
+    "uxcore-tooltip": "*"
   },
   "dependencies": {
     "classnames": "^2.1.2",

diff --git a/src/Item.jsx b/src/Item.jsx
@@ -11,9 +11,9 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Popover from 'uxcore-popover';
 import Icon from 'uxcore-icon';
+import { polyfill } from 'react-lifecycles-compat';
 
 import Lang from './i18n';
-import { polyfill } from 'react-lifecycles-compat';
 
 class TagItem extends React.Component {
   constructor(props) {
@@ -24,40 +24,40 @@ class TagItem extends React.Component {
     };
   }
 
+  static contextTypes = {
+    tagPrefixCls: PropTypes.string
+  }
+
   static getDerivedStateFromProps(props, state) {
     if (props.count === state.count + 1) {
       return {
         animationTag: props.tag,
         count: props.count,
-      }
+      };
     }
     return null;
   }
 
   onClick(tag) {
-    const me = this;
-    const props = me.props;
+    const { props } = this;
 
     props.onClick(tag);
   }
 
   onAddCount(tag) {
-    const me = this;
-    const props = me.props;
+    const { props } = this;
 
     props.onAddCount(tag);
   }
 
   onDelete(tag, cb = () => { }) {
-    const me = this;
-    const props = me.props;
+    const { props } = this;
 
     props.onDelete(tag, cb);
   }
 
   renderCount(num) {
-    const me = this;
-    const props = me.props;
+    const { props } = this;
 
     if (num > props.maxDisplayCount) {
       return `${props.maxDisplayCount}+`;
@@ -68,9 +68,8 @@ class TagItem extends React.Component {
 
   render() {
     const me = this;
-    const { props, state } = me;
+    const { props, state, context } = me;
     const {
-      prefixCls,
       locale,
       type,
       className,
@@ -80,16 +79,19 @@ class TagItem extends React.Component {
       maxDisplayCount,
       confirmDeleteText,
     } = props;
-    const { 
+    const {
       count,
     } = state;
+
+    const deleteOverlayPrefixCls = context.tagPrefixCls;
+    const prefixCls = props.prefixCls ? props.prefixCls : `${context.tagPrefixCls}-item`;
     const lang = Lang[locale];
 
     let deleteOverlay;
 
     if (props.confirmDeleteText) {
       deleteOverlay = (
-        <div className="uxcore-tag-popup-delete">
+        <div className={`${deleteOverlayPrefixCls}-popup-delete`}>
           <i className="kuma-icon kuma-icon-caution" />
           <span>{props.confirmDeleteText}</span>
         </div>
@@ -98,16 +100,16 @@ class TagItem extends React.Component {
 
     const tagProps = {
       className: `${prefixCls}-tag`,
-      onClick: me.onClick.bind(me, tag)
-    }
+      onClick: me.onClick.bind(me, tag),
+    };
 
     if (typeof children === 'string') {
       tagProps.title = children;
     }
 
     return (
       <li
-        className={classnames(prefixCls, {
+        className={classnames(`${prefixCls}`, {
           [className]: !!className,
           'can-delete': canDelete,
           [`${prefixCls}-show`]: !!type,
@@ -125,7 +127,9 @@ class TagItem extends React.Component {
             className={classnames(`${prefixCls}-count`, {
               'max-count': count > maxDisplayCount,
             })}
-          >{me.renderCount(count)}</span>
+          >
+            {me.renderCount(count)}
+          </span>
           <span
             className={`${prefixCls}-add-count`}
             onClick={me.onAddCount.bind(me, tag)}
@@ -136,10 +140,12 @@ class TagItem extends React.Component {
             className={classnames(`${prefixCls}-add-animation`, {
               show: me.state.animationTag === tag,
             })}
-          >+1</span>
+          >
+            +1
+          </span>
         </span>
-        {confirmDeleteText ?
-          (
+        {confirmDeleteText
+          ? (
             <Popover
               overlay={deleteOverlay}
               placement="top"
@@ -161,7 +167,6 @@ class TagItem extends React.Component {
 }
 
 TagItem.defaultProps = {
-  prefixCls: 'uxcore-tag-item',
   className: '',
   count: 0,                   // 标签后面的数字
   canAddCount: false,         // 是否可以增加数字
@@ -177,6 +182,7 @@ TagItem.defaultProps = {
 
 // http://facebook.github.io/react/docs/reusable-components.html
 TagItem.propTypes = {
+  prefixCls: PropTypes.string,
   className: PropTypes.string,
   type: PropTypes.oneOf(['show', 'success', 'danger', 'info', 'warning']),
   tag: PropTypes.string,
@@ -195,4 +201,4 @@ TagItem.displayName = 'TagItem';
 
 polyfill(TagItem);
 
-export default TagItem;
+export default TagItem;
diff --git a/src/Tag.jsx b/src/Tag.jsx
@@ -32,6 +32,16 @@ export default class Tag extends React.Component {
     };
   }
 
+  static childContextTypes = {
+    tagPrefixCls: PropTypes.string,
+  }
+
+  getChildContext () {
+    return {
+      tagPrefixCls: this.props.prefixCls,
+    }
+  }
+
   onAdd() {
     const me = this;
     const props = me.props;
@@ -112,14 +122,14 @@ export default class Tag extends React.Component {
 
   renderAddTag() {
     const me = this;
-    const { addTags, locale } = me.props;
+    const { addTags, locale, prefixCls } = me.props;
     const lang = Lang[locale.toLowerCase()];
     if (!addTags) {
       return null;
     }
     if (me.state.showInput) {
       return (
-        <li className="uxcore-tag-add-input">
+        <li className={`${prefixCls}-add-input`}>
           <input
             ref={me.saveRef('input')}
             className="kuma-input"
@@ -129,14 +139,17 @@ export default class Tag extends React.Component {
             onKeyDown={(e) => { me.onInputKeyDown(e); }}
             value={me.state.inputValue}
           />
-          <span className="uxcore-tag-add-input-submit" onMouseDown={() => { me.onAdd(); }}>
+          <span className={`${prefixCls}-add-input-submit`} onMouseDown={() => { me.onAdd(); }}>
             <Icon name="biaoqianxuanze-duoxuan-gou" usei />
           </span>
         </li>
       );
     }
     return (
-      <li className="uxcore-tag-add" onClick={() => { me.onClickAddButton(); }}>
+      <li
+        className={`${prefixCls}-add`}
+        onClick={me.onClickAddButton.bind(me)}
+      >
         <i className="kuma-icon kuma-icon-add" />
       </li>
     );
@@ -148,7 +161,7 @@ export default class Tag extends React.Component {
     const props = me.props;
     return (
       <ul
-        className={classnames('uxcore-tag', {
+        className={classnames(props.prefixCls, {
           [props.className]: !!props.className,
         })}
       >
@@ -160,6 +173,7 @@ export default class Tag extends React.Component {
 }
 
 Tag.defaultProps = {
+  prefixCls: 'uxcore-tag',
   className: '',      //
   addTags: true,      // 是否可以新增标签
   onAdd: () => { },    // 添加标签回调
@@ -169,6 +183,7 @@ Tag.defaultProps = {
 
 // http://facebook.github.io/react/docs/reusable-components.html
 Tag.propTypes = {
+  prefixCls: PropTypes.string,
   className: PropTypes.string,
   addTags: PropTypes.bool,
   onAdd: PropTypes.func,

diff --git a/style/index.js b/style/index.js
@@ -0,0 +1,3 @@
+import '../src/Tag.less';
+import 'uxcore-icon/style';
+import 'uxcore-popover/style';