From 13fda44fb140522897a2bfb2349f8610d98bce2c Mon Sep 17 00:00:00 2001 From: Rustin Date: Tue, 14 Apr 2020 10:30:14 +0800 Subject: [PATCH] refactor(skeleton): rewrite with hook (#23206) * refactor(skeleton): rewrite with hook * fix(skeleton): refine lint and compile issues * fix(skeleton): refine compile issues * chore: ignore eslint warning --- .antd-tools.config.js | 1 + components/skeleton/Avatar.tsx | 24 ++++++------- components/skeleton/Button.tsx | 24 ++++++------- components/skeleton/Element.tsx | 56 +++++++++++++++---------------- components/skeleton/Input.tsx | 24 ++++++------- components/skeleton/Paragraph.tsx | 33 +++++++++--------- components/skeleton/Skeleton.tsx | 42 +++++++++++------------ components/skeleton/index.tsx | 6 ---- 8 files changed, 92 insertions(+), 118 deletions(-) diff --git a/.antd-tools.config.js b/.antd-tools.config.js index 8ddbf3ba78..82409a567e 100644 --- a/.antd-tools.config.js +++ b/.antd-tools.config.js @@ -104,6 +104,7 @@ function finalizeDist() { path.join(process.cwd(), 'dist', 'theme.js'), `const defaultTheme = require('./default-theme.js');\n`, ); + // eslint-disable-next-line no-console console.log('Built a entry less file to dist/antd.less'); buildThemeFile('default', defaultVars); buildThemeFile('dark', darkVars); diff --git a/components/skeleton/Avatar.tsx b/components/skeleton/Avatar.tsx index c4c13ddada..547b4ce1a2 100644 --- a/components/skeleton/Avatar.tsx +++ b/components/skeleton/Avatar.tsx @@ -8,17 +8,11 @@ export interface AvatarProps extends Omit { shape?: 'circle' | 'square'; } -// eslint-disable-next-line react/prefer-stateless-function -class SkeletonAvatar extends React.Component { - static defaultProps: Partial = { - size: 'default', - shape: 'circle', - }; - - renderSkeletonAvatar = ({ getPrefixCls }: ConfigConsumerProps) => { - const { prefixCls: customizePrefixCls, className, active } = this.props; +const SkeletonAvatar = (props: AvatarProps) => { + const renderSkeletonAvatar = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className, active } = props; const prefixCls = getPrefixCls('skeleton', customizePrefixCls); - const otherProps = omit(this.props, ['prefixCls']); + const otherProps = omit(props, ['prefixCls']); const cls = classNames(prefixCls, className, `${prefixCls}-element`, { [`${prefixCls}-active`]: active, }); @@ -28,10 +22,12 @@ class SkeletonAvatar extends React.Component { ); }; - - render() { - return {this.renderSkeletonAvatar}; - } + return {renderSkeletonAvatar}; } +SkeletonAvatar.defaultProps = { + size: 'default', + shape: 'circle', +}; + export default SkeletonAvatar; diff --git a/components/skeleton/Button.tsx b/components/skeleton/Button.tsx index 0fdd201190..8a2d0ce5b9 100644 --- a/components/skeleton/Button.tsx +++ b/components/skeleton/Button.tsx @@ -4,20 +4,15 @@ import classNames from 'classnames'; import Element, { SkeletonElementProps } from './Element'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -interface SkeletonButtonProps extends Omit { +export interface SkeletonButtonProps extends Omit { size?: 'large' | 'small' | 'default'; } -// eslint-disable-next-line react/prefer-stateless-function -class SkeletonButton extends React.Component { - static defaultProps: Partial = { - size: 'default', - }; - - renderSkeletonButton = ({ getPrefixCls }: ConfigConsumerProps) => { - const { prefixCls: customizePrefixCls, className, active } = this.props; +const SkeletonButton = (props: SkeletonButtonProps) => { + const renderSkeletonButton = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className, active } = props; const prefixCls = getPrefixCls('skeleton', customizePrefixCls); - const otherProps = omit(this.props, ['prefixCls']); + const otherProps = omit(props, ['prefixCls']); const cls = classNames(prefixCls, className, `${prefixCls}-element`, { [`${prefixCls}-active`]: active, }); @@ -27,10 +22,11 @@ class SkeletonButton extends React.Component { ); }; + return {renderSkeletonButton}; +}; - render() { - return {this.renderSkeletonButton}; - } -} +SkeletonButton.defaultProps = { + size: 'default', +}; export default SkeletonButton; diff --git a/components/skeleton/Element.tsx b/components/skeleton/Element.tsx index 61ad71ab17..836e94bff6 100644 --- a/components/skeleton/Element.tsx +++ b/components/skeleton/Element.tsx @@ -10,37 +10,35 @@ export interface SkeletonElementProps { active?: boolean; } -// eslint-disable-next-line react/prefer-stateless-function -class Element extends React.Component { - render() { - const { prefixCls, className, style, size, shape } = this.props; +const Element = (props: SkeletonElementProps) => { + const { prefixCls, className, style, size, shape } = props; - const sizeCls = classNames({ - [`${prefixCls}-lg`]: size === 'large', - [`${prefixCls}-sm`]: size === 'small', - }); + const sizeCls = classNames({ + [`${prefixCls}-lg`]: size === 'large', + [`${prefixCls}-sm`]: size === 'small', + }); - const shapeCls = classNames({ - [`${prefixCls}-circle`]: shape === 'circle', - [`${prefixCls}-square`]: shape === 'square', - [`${prefixCls}-round`]: shape === 'round', - }); + const shapeCls = classNames({ + [`${prefixCls}-circle`]: shape === 'circle', + [`${prefixCls}-square`]: shape === 'square', + [`${prefixCls}-round`]: shape === 'round', + }); + + const sizeStyle: React.CSSProperties = + typeof size === 'number' + ? { + width: size, + height: size, + lineHeight: `${size}px`, + } + : {}; + return ( + + ); +}; - const sizeStyle: React.CSSProperties = - typeof size === 'number' - ? { - width: size, - height: size, - lineHeight: `${size}px`, - } - : {}; - return ( - - ); - } -} export default Element; diff --git a/components/skeleton/Input.tsx b/components/skeleton/Input.tsx index c2c79ffc74..6ed8fac11c 100644 --- a/components/skeleton/Input.tsx +++ b/components/skeleton/Input.tsx @@ -4,20 +4,15 @@ import classNames from 'classnames'; import Element, { SkeletonElementProps } from './Element'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -interface SkeletonInputProps extends Omit { +export interface SkeletonInputProps extends Omit { size?: 'large' | 'small' | 'default'; } -// eslint-disable-next-line react/prefer-stateless-function -class SkeletonInput extends React.Component { - static defaultProps: Partial = { - size: 'default', - }; - - renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => { - const { prefixCls: customizePrefixCls, className, active } = this.props; +const SkeletonInput = (props: SkeletonInputProps) => { + const renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className, active } = props; const prefixCls = getPrefixCls('skeleton', customizePrefixCls); - const otherProps = omit(this.props, ['prefixCls']); + const otherProps = omit(props, ['prefixCls']); const cls = classNames(prefixCls, className, `${prefixCls}-element`, { [`${prefixCls}-active`]: active, }); @@ -27,10 +22,11 @@ class SkeletonInput extends React.Component { ); }; + return {renderSkeletonInput}; +}; - render() { - return {this.renderSkeletonInput}; - } -} +SkeletonInput.defaultProps = { + size: 'default', +}; export default SkeletonInput; diff --git a/components/skeleton/Paragraph.tsx b/components/skeleton/Paragraph.tsx index 12ae6ad109..0948b62711 100644 --- a/components/skeleton/Paragraph.tsx +++ b/components/skeleton/Paragraph.tsx @@ -11,9 +11,9 @@ export interface SkeletonParagraphProps { rows?: number; } -class Paragraph extends React.Component { - getWidth(index: number) { - const { width, rows = 2 } = this.props; +const Paragraph = (props: SkeletonParagraphProps) => { + const getWidth = (index: number) => { + const { width, rows = 2 } = props; if (Array.isArray(width)) { return width[index]; } @@ -22,20 +22,17 @@ class Paragraph extends React.Component { return width; } return undefined; - } - - render() { - const { prefixCls, className, style, rows } = this.props; - const rowList = [...Array(rows)].map((_, index) => ( - // eslint-disable-next-line react/no-array-index-key -
  • - )); - return ( -
      - {rowList} -
    - ); - } -} + }; + const { prefixCls, className, style, rows } = props; + const rowList = [...Array(rows)].map((_, index) => ( + // eslint-disable-next-line react/no-array-index-key +
  • + )); + return ( +
      + {rowList} +
    + ); +}; export default Paragraph; diff --git a/components/skeleton/Skeleton.tsx b/components/skeleton/Skeleton.tsx index 887a806e71..3d5b118e10 100644 --- a/components/skeleton/Skeleton.tsx +++ b/components/skeleton/Skeleton.tsx @@ -3,13 +3,14 @@ import classNames from 'classnames'; import Title, { SkeletonTitleProps } from './Title'; import Paragraph, { SkeletonParagraphProps } from './Paragraph'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -import SkeletonButton from './Button'; import Element from './Element'; import SkeletonAvatar, { AvatarProps } from './Avatar'; +import SkeletonButton from './Button'; import SkeletonInput from './Input'; /* This only for skeleton internal. */ -interface SkeletonAvatarProps extends Omit {} +interface SkeletonAvatarProps extends Omit { +} export interface SkeletonProps { active?: boolean; @@ -68,20 +69,8 @@ function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): Skeleton return basicProps; } -class Skeleton extends React.Component { - static Button: typeof SkeletonButton; - - static Avatar: typeof SkeletonAvatar; - - static Input: typeof SkeletonInput; - - static defaultProps: Partial = { - avatar: false, - title: true, - paragraph: true, - }; - - renderSkeleton = ({ getPrefixCls, direction }: ConfigConsumerProps) => { +const Skeleton = (props: SkeletonProps) => { + const renderSkeleton = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, loading, @@ -91,11 +80,11 @@ class Skeleton extends React.Component { title, paragraph, active, - } = this.props; + } = props; const prefixCls = getPrefixCls('skeleton', customizePrefixCls); - if (loading || !('loading' in this.props)) { + if (loading || !('loading' in props)) { const hasAvatar = !!avatar; const hasTitle = !!title; const hasParagraph = !!paragraph; @@ -166,10 +155,17 @@ class Skeleton extends React.Component { return children; }; - - render() { - return {this.renderSkeleton}; - } -} + return {renderSkeleton}; +}; + +Skeleton.defaultProps = { + avatar: false, + title: true, + paragraph: true, +}; + +Skeleton.Button = SkeletonButton; +Skeleton.Avatar = SkeletonAvatar; +Skeleton.Input = SkeletonInput; export default Skeleton; diff --git a/components/skeleton/index.tsx b/components/skeleton/index.tsx index 87f2c398fe..d5ce51274f 100644 --- a/components/skeleton/index.tsx +++ b/components/skeleton/index.tsx @@ -1,11 +1,5 @@ import Skeleton from './Skeleton'; -import SkeletonButton from './Button'; -import SkeletonAvatar from './Avatar'; -import SkeletonInput from './Input'; export { SkeletonProps } from './Skeleton'; -Skeleton.Button = SkeletonButton; -Skeleton.Avatar = SkeletonAvatar; -Skeleton.Input = SkeletonInput; export default Skeleton;