mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

refactor(rate): rewrite with hook (#23545)

Browse Source 
* refactor(rate): rewrite with hook

* fix: useContext

* fix

* remove

* fix: add displayName
This commit is contained in:
xrkffgg 2020-04-27 13:42:04 +08:00 committed by GitHub
parent 0d927a18f1
commit df63f2567a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/rate/__tests__/index.test.js
View File

@ -4,7 +4,7 @@ import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
describe('Rate', () => {
focusTest(Rate);
focusTest(Rate, { refFocus: true });
mountTest(Rate);
rtlTest(Rate);
});

69
components/rate/index.tsx
View File

@ -5,7 +5,7 @@ import classNames from 'classnames';
import StarFilled from '@ant-design/icons/StarFilled';
import Tooltip from '../tooltip';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
export interface RateProps {
prefixCls?: string;
@ -27,53 +27,36 @@ interface RateNodeProps {
index: number;
}
export default class Rate extends React.Component<RateProps, any> {
static defaultProps = {
character: <StarFilled />,
};
private rcRate: any;
saveRate = (node: any) => {
this.rcRate = node;
};
characterRender = (node: React.ReactElement, { index }: RateNodeProps) => {
const { tooltips } = this.props;
const Rate = React.forwardRef<unknown, RateProps>((props, ref) => {
const characterRender = (node: React.ReactElement, { index }: RateNodeProps) => {
const { tooltips } = props;
if (!tooltips) return node;
return <Tooltip title={tooltips[index]}>{node}</Tooltip>;
};
focus() {
this.rcRate.focus();
}
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const { prefixCls, className, ...restProps } = props;
const rateProps = omit(restProps, ['tooltips']);
const ratePrefixCls = getPrefixCls('rate', prefixCls);
const rateClassNames = classNames(className, {
[`${ratePrefixCls}-rtl`]: direction === 'rtl',
});
blur() {
this.rcRate.blur();
}
return (
<RcRate
ref={ref}
characterRender={characterRender}
{...rateProps}
prefixCls={ratePrefixCls}
className={rateClassNames}
/>
);
});
renderRate = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
const { prefixCls, className, ...restProps } = this.props;
Rate.displayName = 'Rate';
const rateProps = omit(restProps, ['tooltips']);
const ratePrefixCls = getPrefixCls('rate', prefixCls);
const rateClassNames = classNames(className, {
[`${ratePrefixCls}-rtl`]: direction === 'rtl',
});
Rate.defaultProps = {
character: <StarFilled />,
};
return (
<RcRate
ref={this.saveRate}
characterRender={this.characterRender}
{...rateProps}
prefixCls={ratePrefixCls}
className={rateClassNames}
/>
);
};
render() {
return <ConfigConsumer>{this.renderRate}</ConfigConsumer>;
}
}
export default Rate;