Skip to content

Commit

Permalink
feat: 增加 tag 组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@lijinke666
lijinke666 committed Sep 30, 2018
1 parent 37832c2 commit bff7924
Show file tree
Hide file tree
Showing 16 changed files with 373 additions and 46 deletions.
4 changes: 2 additions & 2 deletions components/alert/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
&-close {
position: absolute;
right: 15px;
top:50%;
top: 50%;
transform: translateY(-50%);
font-size: @font-size;
cursor: pointer;
Expand Down Expand Up @@ -65,4 +65,4 @@
color: @warning-color;
}
}
}
}
2 changes: 1 addition & 1 deletion components/button/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,4 +106,4 @@
&.btn-dashed {
border: 1px dashed;
}
}
}
2 changes: 1 addition & 1 deletion components/drawer/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,4 +146,4 @@
pointer-events: none;
animation: cuke-mask-fade-out @default-transition forwards;
}
}
}
2 changes: 1 addition & 1 deletion components/dropdown/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,4 @@
animation: cuke-slide-right @default-transition;
}
}
}
}
1 change: 1 addition & 0 deletions components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,6 @@ export { default as Timeline } from "./timeline";
export { default as Checkbox } from "./checkbox";
export { default as Icon } from "./icon";
export { default as Switch } from "./switch";
export { default as Tag } from "./tag";

export { default as version } from "./version";
4 changes: 2 additions & 2 deletions components/message/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ export default class Message extends PureComponent {
});
}, duration * 1000);
}
componentWillUnmount(){
this.removeNode()
componentWillUnmount() {
this.removeNode();
}
removeNode = () => {
ReactDOM.unmountComponentAtNode(this.container);
Expand Down
2 changes: 1 addition & 1 deletion components/modal/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,4 +162,4 @@
pointer-events: none;
animation: cuke-mask-fade-out @default-transition forwards;
}
}
}
99 changes: 62 additions & 37 deletions components/styles/mixins.less
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,79 @@
.btn-hover(@color: @default-color, @lighten: 5%, @font-color: #fff) {
color: @font-color;
background-color: @color;
border: 1px solid @color;
&:not(.btn-disabled):not(.btn-default) {
&:hover,
&:active,
&:focus {
background-color: lighten(@color, @lighten);
}
color: @font-color;
background-color: @color;
border: 1px solid @color;
&:not(.btn-disabled):not(.btn-default) {
&:hover,
&:active,
&:focus {
background-color: lighten(@color, @lighten);
}
}
}

.btn-hollow(@color,@lighten : 5%) {
color: @color;
background: transparent;
.tag-hover(@color: @default-color, @lighten: 5%, @font-color: #fff) {
color: @font-color;
background-color: @color;
border: 1px solid @color;
&:not(.cuke-tag-disabled):not(.cuke-tag-default) {
&:hover,
&:active,
&:focus {
background-color: lighten(@color, @lighten);
}
}
}

&:not(.btn-disabled) {
&:hover,
&:active,
&:focus {
background-color: transparent;
border-color: lighten(@color, @lighten);
color: lighten(@color, @lighten);
}
.btn-hollow(@color, @lighten : 5%) {
color: @color;
background: transparent;
&:not(.btn-disabled) {
&:hover,
&:active,
&:focus {
background-color: transparent;
border-color: lighten(@color, @lighten);
color: lighten(@color, @lighten);
}
}
}

.flex-center(@justify:center,@align:center) {
display: flex;
justify-content: @justify;
align-items: @align;
.tag-hollow(@color, @lighten : 5%) {
color: @color;
background: transparent;
&:not(.cuke-tag-disabled) {
&:hover,
&:active,
&:focus {
background-color: transparent;
border-color: lighten(@color, @lighten);
color: lighten(@color, @lighten);
}
}
}

.flex-center(@justify: center, @align: center) {
display: flex;
justify-content: @justify;
align-items: @align;
}

.add-alert-style(@color: @default-color,@opacity: 10%) {
border-color: @color;
background-color: fade(@color, @opacity);
.add-alert-style(@color: @default-color, @opacity: 10%) {
border-color: @color;
background-color: fade(@color, @opacity);
}

.clearfix() {
&::before,
&::after {
clear: both;
content: "";
display: table;
zoom: 1;
}
&::before,
&::after {
clear: both;
content: "";
display: table;
zoom: 1;
}
}


.set-progress-bar-bg(@primaryColor: @primary-color) {
background: repeating-linear-gradient(-45deg, @bg-color 25%, @primaryColor 0, @primaryColor 50%, @bg-color 0, @bg-color 75%, @primaryColor 0);
background-size: @progress-bg-offset;
background: repeating-linear-gradient(-45deg, @bg-color 25%, @primaryColor 0, @primaryColor 50%, @bg-color 0, @bg-color 75%, @primaryColor 0);
background-size: @progress-bg-offset;
}
9 changes: 9 additions & 0 deletions components/styles/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,3 +171,12 @@
@cuke-switch-border-radius: 100px;
@cuke-switch-bg-color:rgba(0, 0, 0, .25);
@cuke-switch-offset: 2px;

//Tag 标签
@cuke-tag-border-radius: 20px;
@tag-small-height: 30px;
@tag-large-height: 50px;
@tag-large-font-size : 16px;
@tag-small-font-size : 12px;
@tag-small-padding: 0 5px;
@tag-large-padding: 2px 20px;
54 changes: 54 additions & 0 deletions components/tag/__tests__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Tag/> should render tag 1`] = `
<div>
<span
class="cuke-tag cuke-tag-default"
style="background-color:"
>
黄瓜 ui
</span>
<span
class="cuke-tag cuke-tag-primary"
style="background-color:"
>
黄瓜 ui
</span>
<span
class="cuke-tag cuke-tag-info"
style="background-color:"
>
黄瓜 ui
</span>
<span
class="cuke-tag cuke-tag-success"
style="background-color:"
>
黄瓜 ui
</span>
<span
class="cuke-tag cuke-tag-error"
style="background-color:"
>
黄瓜 ui
</span>
<span
class="cuke-tag cuke-tag-warning"
style="background-color:"
>
黄瓜 ui
</span>
<span
class="cuke-tag cuke-tag-default cuke-tag-dashed"
style="background-color:"
>
黄瓜 ui
</span>
<span
class="cuke-tag cuke-tag-default cuke-tag-disabled"
style="background-color:"
>
黄瓜 ui
</span>
</div>
`;
46 changes: 46 additions & 0 deletions components/tag/__tests__/index.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import assert from "power-assert";
import React from "react";
import { render, shallow } from "enzyme";
import toJson from "enzyme-to-json";
import Tag from "../index";

describe("<Tag/>", () => {
it("should render tag", () => {
const wrapper = render(
<div>
<Tag>黄瓜 ui</Tag>
<Tag type="primary">黄瓜 ui</Tag>
<Tag type="info">黄瓜 ui</Tag>
<Tag type="success">黄瓜 ui</Tag>
<Tag type="error">黄瓜 ui</Tag>
<Tag type="warning">黄瓜 ui</Tag>
<Tag dashed>黄瓜 ui</Tag>
<Tag disabled>黄瓜 ui</Tag>
</div>
);
expect(toJson(wrapper)).toMatchSnapshot();
});

it.skip("should find cuke-tag classnames", () => {
const wrapper = shallow(
<div>
<Tag>黄瓜 ui</Tag>
<Tag type="primary">黄瓜 ui</Tag>
<Tag type="info">黄瓜 ui</Tag>
<Tag type="success">黄瓜 ui</Tag>
<Tag type="error">黄瓜 ui</Tag>
<Tag type="warning">黄瓜 ui</Tag>
<Tag dashed>黄瓜 ui</Tag>
<Tag disabled>黄瓜 ui</Tag>
</div>
);
assert(wrapper.find(".cuke-tag").length >= 1);
assert(wrapper.find(".cuke-tag-primary").length === 1);
assert(wrapper.find(".cuke-tag-info").length === 1);
assert(wrapper.find(".cuke-tag-success").length === 1);
assert(wrapper.find(".cuke-tag-error").length === 1);
assert(wrapper.find(".cuke-tag-warning").length === 1);
assert(wrapper.find(".cuke-tag-dashed").length === 1);
assert(wrapper.find(".cuke-tag-disabled").length === 1);
});
});
71 changes: 71 additions & 0 deletions components/tag/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React, { PureComponent } from "react";
import cls from "classnames";
import PropTypes from "prop-types";

const types = [
"default",
"primary",
"warning",
"success",
"error",
"info",
"loading"
];

export default class Tag extends PureComponent {
static defaultProps = {
prefixCls: "cuke-tag",
type: types[0],
color: "",
hollow: false,
dashed: false,
disabled: false,
size: "default"
};

static propTypes = {
prefixCls: PropTypes.string.isRequired,
types: PropTypes.oneOf(types),
color: PropTypes.string,
hollow: PropTypes.bool,
disabled: PropTypes.bool,
dashed: PropTypes.bool,
size: PropTypes.oneOf(["small", "default", "large"])
};

render() {
const {
prefixCls,
className,
children,
type,
disabled,
hollow,
dashed,
size,
style,
color,
...attr
} = this.props;

return (
<span
className={cls(prefixCls, className, {
[`${prefixCls}-${type}`]: type,
[`${prefixCls}-hollow`]: hollow,
[`${prefixCls}-disabled`]: disabled,
[`${prefixCls}-large`]: size === "large",
[`${prefixCls}-small`]: size === "small",
[`${prefixCls}-dashed`]: dashed
})}
style={{
backgroundColor: color,
...style
}}
{...attr}
>
{children}
</span>
);
}
}
Loading

0 comments on commit bff7924

Please sign in to comment.