mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

refactor(Pagination): rewrite with hook (#24302)

Browse Source 
* refactor(Pagination): rewrite with hook

* Update Pagination.tsx

* Update index.tsx
This commit is contained in:
Tom Xu 2020-05-24 23:13:32 +08:00 committed by GitHub
parent 0c2eed6866
commit 4af818ca8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/pagination/MiniSelect.tsx
View File

@ -1,10 +1,12 @@
import * as React from 'react'; import * as React from 'react';
import Select from '../select'; import Select from '../select';
export default class MiniSelect extends React.Component<any, any> { interface MiniSelectInterface extends React.FC<any> {
static Option = Select.Option; Option: typeof Select.Option;
render() {
return <Select size="small" {...this.props} />;
}
} }
const MiniSelect: MiniSelectInterface = props => <Select size="small" {...props} />;
MiniSelect.Option = Select.Option;
export default MiniSelect;

101
components/pagination/Pagination.tsx
View File

@ -7,11 +7,11 @@ import RightOutlined from '@ant-design/icons/RightOutlined';
import DoubleLeftOutlined from '@ant-design/icons/DoubleLeftOutlined'; import DoubleLeftOutlined from '@ant-design/icons/DoubleLeftOutlined';
import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined'; import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined';
import ResponsiveObserve from '../_util/responsiveObserve';
import MiniSelect from './MiniSelect'; import MiniSelect from './MiniSelect';
import Select from '../select'; import Select from '../select';
import LocaleReceiver from '../locale-provider/LocaleReceiver'; import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider';
import useBreakpoint from '../grid/hooks/useBreakpoint';
export interface PaginationProps { export interface PaginationProps {
total?: number; total?: number;
@ -53,28 +53,20 @@ export interface PaginationConfig extends PaginationProps {
export type PaginationLocale = any; export type PaginationLocale = any;
export default class Pagination extends React.Component<PaginationProps, {}> { const Pagination: React.FC<PaginationProps> = ({
private token: string; prefixCls: customizePrefixCls,
selectPrefixCls: customizeSelectPrefixCls,
className,
size,
locale: customLocale,
...restProps
}) => {
const { xs } = useBreakpoint();
private inferredSmall: boolean = false; const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('pagination', customizePrefixCls);
componentDidMount() { const getIconsProps = () => {
this.token = ResponsiveObserve.subscribe(screens => {
const { xs } = screens;
const { size, responsive } = this.props;
const inferredSmall = !!(xs && !size && responsive);
if (this.inferredSmall !== inferredSmall) {
this.inferredSmall = inferredSmall;
this.forceUpdate();
}
});
}
componentWillUnmount() {
ResponsiveObserve.unsubscribe(this.token);
}
getIconsProps = (prefixCls: string, direction: 'ltr' | 'rtl' | undefined) => {
let prevIcon = ( let prevIcon = (
<a className={`${prefixCls}-item-link`}> <a className={`${prefixCls}-item-link`}>
<LeftOutlined /> <LeftOutlined />
@ -123,48 +115,33 @@ export default class Pagination extends React.Component<PaginationProps, {}> {
}; };
}; };
renderPagination = (contextLocale: PaginationLocale) => { const renderPagination = (contextLocale: PaginationLocale) => {
const {
prefixCls: customizePrefixCls,
selectPrefixCls: customizeSelectPrefixCls,
className,
size,
locale: customLocale,
...restProps
} = this.props;
const locale = { ...contextLocale, ...customLocale }; const locale = { ...contextLocale, ...customLocale };
const isSmall = size === 'small' || this.inferredSmall; const isSmall = size === 'small' || !!(xs && !size && restProps.responsive);
return ( const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
<ConfigConsumer> const extendedClassName = classNames(className, {
{({ getPrefixCls, direction }: ConfigConsumerProps) => { mini: isSmall,
const prefixCls = getPrefixCls('pagination', customizePrefixCls); [`${prefixCls}-rtl`]: direction === 'rtl',
const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls); });
const extendedClassName = classNames(className, {
mini: isSmall,
[`${prefixCls}-rtl`]: direction === 'rtl',
});
return ( return (
<RcPagination <RcPagination
{...restProps} {...restProps}
prefixCls={prefixCls} prefixCls={prefixCls}
selectPrefixCls={selectPrefixCls} selectPrefixCls={selectPrefixCls}
{...this.getIconsProps(prefixCls, direction)} {...getIconsProps()}
className={extendedClassName} className={extendedClassName}
selectComponentClass={isSmall ? MiniSelect : Select} selectComponentClass={isSmall ? MiniSelect : Select}
locale={locale} locale={locale}
/> />
);
}}
</ConfigConsumer>
); );
}; };
render() { return (
return ( <LocaleReceiver componentName="Pagination" defaultLocale={enUS}>
<LocaleReceiver componentName="Pagination" defaultLocale={enUS}> {renderPagination}
{this.renderPagination} </LocaleReceiver>
</LocaleReceiver> );
); };
}
} export default Pagination;

1
components/pagination/style/index.tsx
View File

@ -2,4 +2,5 @@ import '../../style/index.less';
import './index.less'; import './index.less';
// style dependencies // style dependencies
// deps-lint-skip: grid
import '../../select/style'; import '../../select/style';