Add arrow style

This commit is contained in:
afc163 2015-12-29 22:34:23 +08:00
parent aa27737d24
commit 7051b2c786
2 changed files with 36 additions and 3 deletions

View File

@ -46,6 +46,7 @@ class AntCascader extends React.Component {
}
clearSelection(e) {
e.preventDefault();
e.stopPropagation();
this.setValue([]);
this.setState({ popupVisible: false });
}
@ -59,6 +60,10 @@ class AntCascader extends React.Component {
<Icon type="cross-circle"
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection} /> : null;
const arrowCls = classNames({
[`${prefixCls}-picker-arrow`]: true,
[`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible,
});
return (
<Cascader {...this.props}
value={this.state.value}
@ -73,6 +78,7 @@ class AntCascader extends React.Component {
value={this.getLabel()}
readOnly />
{clearIcon}
<Icon type="down" className={arrowCls} />
</span>
}
</Cascader>

View File

@ -1,17 +1,23 @@
.ant-cascader {
@cascader-prefix-cls: ant-cascader;
.@{cascader-prefix-cls} {
font-size: @font-size-base;
&-input {
width: 172px;
display: block;
cursor: pointer;
}
&-picker {
position: relative;
display: inline-block;
cursor: pointer;
&-clear {
opacity: 0;
visibility: hidden;
position: absolute;
right: 8px;
z-index: 1;
background: #fff;
top: 50%;
font-size: 12px;
color: #ccc;
@ -25,9 +31,30 @@
color: #999;
}
}
&:hover &-clear {
opacity: 1;
visibility: visible;
}
// arrow
&-arrow {
position: absolute;
top: 50%;
right: 8px;
width: 12px;
height: 12px;
margin-top: -6px;
line-height: 12px;
.iconfont-size-under-12px(8px);
&:before {
transition: transform 0.2s ease;
}
&&-expand {
.ie-rotate(2);
&:before {
.rotate(180deg);
}
}
}
}
&-menus {