From eec20d1642a73579189e9577400bf0d8dd6b4547 Mon Sep 17 00:00:00 2001 From: "peijie.dpj" Date: Wed, 12 Sep 2018 16:46:05 +0800 Subject: [PATCH] ver. 2.2.1 --- HISTORY.md | 4 ++++ demo/TagDemo.jsx | 44 +++++++++++++++++++++++---------------- package.json | 7 ++++--- src/Item.jsx | 52 ++++++++++++++++++++++++++--------------------- src/Tag.jsx | 25 ++++++++++++++++++----- style/index.js | 3 +++ tests/Tag.spec.js | 14 +++++++------ webpack.custom.js | 19 +++++++++++++++++ 8 files changed, 113 insertions(+), 55 deletions(-) create mode 100644 style/index.js create mode 100644 webpack.custom.js diff --git a/HISTORY.md b/HISTORY.md index 808c46b..f19f85f 100644 --- 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 index 7c8db38..09be57f 100644 --- 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 {

互动性 TAG

- {me.state.data.map((item, index) => ( - - {item.tag} - - ))} + {me.state.data.map((item, index) => { + const res = ( + + {item.tag} + ); + + if (index < 5) { + return test

} placement="bottom" trigger={["hover"]}>{res}; + } + + return res; + })}

展示型 TAG （只读）

diff --git a/package.json b/package.json index 359bbd0..57ae986 100644 --- 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,8 +31,10 @@ "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", @@ -40,8 +42,7 @@ "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 index 026acba..dd1b79e 100644 --- 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 = ( -
+
{props.confirmDeleteText}
@@ -98,8 +100,8 @@ 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; @@ -107,7 +109,7 @@ class TagItem extends React.Component { return (
  • maxDisplayCount, })} - >{me.renderCount(count)} + > + {me.renderCount(count)} + +1 + > + +1 + - {confirmDeleteText ? - ( + {confirmDeleteText + ? ( +
  • { me.onInputKeyDown(e); }} value={me.state.inputValue} /> - { me.onAdd(); }}> + { me.onAdd(); }}>
    • ); } return ( -
  • { me.onClickAddButton(); }}> +
    • ); @@ -148,7 +161,7 @@ export default class Tag extends React.Component { const props = me.props; return (
      @@ -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 new file mode 100644 index 0000000..a4405fe --- /dev/null +++ b/style/index.js @@ -0,0 +1,3 @@ +import '../src/Tag.less'; +import 'uxcore-icon/style'; +import 'uxcore-popover/style'; diff --git a/tests/Tag.spec.js b/tests/Tag.spec.js index 6756a97..e59a86f 100644 --- a/tests/Tag.spec.js +++ b/tests/Tag.spec.js @@ -9,6 +9,8 @@ const TagItem = Tag.Item; Enzyme.configure({ adapter: new Adapter() }); +const prefixCls = 'uxcore-tag'; + describe('Tag', () => { it('render correct', () => { mount(); @@ -185,7 +187,7 @@ describe('TagItem props', () => { it('count support', () => { [0, 20].forEach(count => { - const wrapper = mount(); + const wrapper = mount(); if (count === 0) { expect(wrapper.find('.uxcore-tag-item-option').hasClass('is-zero')); } @@ -194,7 +196,7 @@ describe('TagItem props', () => { }); it('maxDisplayCount support', () => { - expect(mount().find('.uxcore-tag-item-count').text()).to.equal('10+'); + expect(mount().find('.uxcore-tag-item-count').text()).to.equal('10+'); }); it('canDelete support', () => { @@ -205,7 +207,7 @@ describe('TagItem props', () => { it('onClick support', () => { let clickedTag; const handleClickTag = (tag) => { clickedTag = tag; }; - const wrapper = mount(TagItem); + const wrapper = mount(TagItem); wrapper.find('.uxcore-tag-item-tag').simulate('click'); expect(clickedTag).to.be('TagItem'); }); @@ -222,7 +224,7 @@ describe('TagItem props', () => { let deletedTag; const handleDeleteTag = (tag) => { deletedTag = tag; }; const confirmDeleteText = '确认删除该Tag吗?'; - const wrapper = mount(TagItem); + const wrapper = mount(TagItem); wrapper.find('.uxcore-icon.uxicon-biaodanlei-tongyongqingchu').simulate('click'); expect(deletedTag).to.be(undefined); expect(document.querySelector('.uxcore-tag-popup-delete > span').innerText).to.be(confirmDeleteText); @@ -235,7 +237,7 @@ describe('TagItem props', () => { addTag = tag; addTime += 1; } - const wrapper = mount(TagItem); + const wrapper = mount(TagItem); wrapper.find('.uxcore-tag-item-add-count').simulate('click'); expect(addTime).to.be(1); expect(addTag).to.be('1'); @@ -244,7 +246,7 @@ describe('TagItem props', () => { it('propsChange count + 1', () => { const props = {tag: 'tag', count: 1} const handleAddCount = () => { props.count += 1; }; - const wrapper = mount(); + const wrapper = mount(); wrapper.find('.uxcore-tag-item-add-count').simulate('click'); expect(props.count).to.be(2); diff --git a/webpack.custom.js b/webpack.custom.js new file mode 100644 index 0000000..aea07bf --- /dev/null +++ b/webpack.custom.js @@ -0,0 +1,19 @@ +const modifyVars = require('kuma-base/jsvars/orange'); + +/* eslint-disable no-param-reassign */ +module.exports = (config) => { + config.module.rules.forEach((rule) => { + if (rule.test.toString() === /\.less$/.toString()) { + rule.use = [ + 'style-loader', + 'css-loader', + { + loader: 'less-loader', + options: { + modifyVars, + }, + }, + ]; + } + }); +};