use svg icon in input-number component

This commit is contained in:
HeskeyBaozi 2018-07-25 15:14:16 +08:00
parent 010bdebc28
commit 318528dc4f
2 changed files with 14 additions and 10 deletions

View File

@ -1,7 +1,7 @@
import * as React from 'react';
import classNames from 'classnames';
import RcInputNumber from 'rc-input-number';
import Icon from '../icon';
import { Omit } from '../_util/type';
// omitting this attrs because they conflicts with the ones defined in InputNumberProps
@ -42,8 +42,18 @@ export default class InputNumber extends React.Component<InputNumberProps, any>
[`${this.props.prefixCls}-lg`]: size === 'large',
[`${this.props.prefixCls}-sm`]: size === 'small',
}, className);
const upIcon = <Icon type="up" className={`${this.props.prefixCls}-handler-up-inner`}/>;
const downIcon = <Icon type="down" className={`${this.props.prefixCls}-handler-down-inner`}/>;
return <RcInputNumber ref={(c: any) => this.inputNumberRef = c} className={inputNumberClass} {...others} />;
return (
<RcInputNumber
ref={(c: any) => this.inputNumberRef = c}
className={inputNumberClass}
upHandler={upIcon}
downHandler={downIcon}
{...others}
/>
);
}
focus() {

View File

@ -124,10 +124,7 @@
&-inner {
top: 50%;
margin-top: -6px;
&:before {
text-align: center;
content: "\e61e";
}
text-align: center;
}
&:hover {
height: 60% !important;
@ -141,10 +138,7 @@
&-inner {
top: 50%;
margin-top: -6px;
&:before {
text-align: center;
content: "\e61d";
}
text-align: center;
}
&:hover {
height: 60% !important;