GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

chore: code style optimization (#43458)

pull/43461/head
thinkasany 1 year ago
committed by GitHub
parent
a5bb59c76c
commit
efa427072a
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 194 additions and 216 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      components/badge/Ribbon.tsx
  2. 124
      components/badge/ScrollNumber.tsx
  3. 11
      components/button/LoadingIcon.tsx
  4. 172
      components/input/TextArea.tsx
  5. 80
      components/typography/Typography.tsx

23
components/badge/Ribbon.tsx
View File

@ -1,10 +1,10 @@
import classNames from 'classnames'; import classNames from 'classnames';
import * as React from 'react'; import * as React from 'react';
import { ConfigContext } from '../config-provider';
import type { PresetColorType } from '../_util/colors'; import type { PresetColorType } from '../_util/colors';
import { isPresetColor } from '../_util/colors';
import type { LiteralUnion } from '../_util/type'; import type { LiteralUnion } from '../_util/type';
import { ConfigContext } from '../config-provider';
import useStyle from './style'; import useStyle from './style';
import { isPresetColor } from '../_util/colors';
type RibbonPlacement = 'start' | 'end'; type RibbonPlacement = 'start' | 'end';
@ -18,15 +18,16 @@ export interface RibbonProps {
placement?: RibbonPlacement; placement?: RibbonPlacement;
} }
const Ribbon: React.FC<RibbonProps> = ({ const Ribbon: React.FC<RibbonProps> = (props) => {
className, const {
prefixCls: customizePrefixCls, className,
style, prefixCls: customizePrefixCls,
color, style,
children, color,
text, children,
placement = 'end', text,
}) => { placement = 'end',
} = props;
const { getPrefixCls, direction } = React.useContext(ConfigContext); const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('ribbon', customizePrefixCls); const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
const colorInPreset = isPresetColor(color, false); const colorInPreset = isPresetColor(color, false);

124
components/badge/ScrollNumber.tsx
View File

@ -1,7 +1,7 @@
import classNames from 'classnames'; import classNames from 'classnames';
import * as React from 'react'; import * as React from 'react';
import { ConfigContext } from '../config-provider';
import { cloneElement } from '../_util/reactNode'; import { cloneElement } from '../_util/reactNode';
import { ConfigContext } from '../config-provider';
import SingleNumber from './SingleNumber'; import SingleNumber from './SingleNumber';
export interface ScrollNumberProps { export interface ScrollNumberProps {
@ -21,75 +21,67 @@ export interface ScrollNumberState {
count?: string | number | null; count?: string | number | null;
} }
const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>( const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>((props, ref) => {
( const {
{ prefixCls: customizePrefixCls,
prefixCls: customizePrefixCls, count,
count, className,
className, motionClassName,
motionClassName, style,
style, title,
title, show,
show, component: Component = 'sup',
component: Component = 'sup', children,
children, ...restProps
...restProps } = props;
}, const { getPrefixCls } = React.useContext(ConfigContext);
ref, const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
) => {
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
// ============================ Render ============================ // ============================ Render ============================
const newProps = { const newProps = {
...restProps, ...restProps,
'data-show': show, 'data-show': show,
style, style,
className: classNames(prefixCls, className, motionClassName), className: classNames(prefixCls, className, motionClassName),
title: title as string, title: title as string,
}; };
// Only integer need motion // Only integer need motion
let numberNodes: React.ReactNode = count; let numberNodes: React.ReactNode = count;
if (count && Number(count) % 1 === 0) { if (count && Number(count) % 1 === 0) {
const numberList = String(count).split(''); const numberList = String(count).split('');
numberNodes = numberList.map((num, i) => ( numberNodes = numberList.map((num, i) => (
<SingleNumber <SingleNumber
prefixCls={prefixCls} prefixCls={prefixCls}
count={Number(count)} count={Number(count)}
value={num} value={num}
// eslint-disable-next-line react/no-array-index-key // eslint-disable-next-line react/no-array-index-key
key={numberList.length - i} key={numberList.length - i}
/> />
)); ));
} }
// allow specify the border // allow specify the border
// mock border-color by box-shadow for compatible with old usage: // mock border-color by box-shadow for compatible with old usage:
// <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} /> // <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
if (style && style.borderColor) { if (style && style.borderColor) {
newProps.style = { newProps.style = {
...style, ...style,
boxShadow: `0 0 0 1px ${style.borderColor} inset`, boxShadow: `0 0 0 1px ${style.borderColor} inset`,
}; };
} }
if (children) { if (children) {
return cloneElement(children, (oriProps) => ({ return cloneElement(children, (oriProps) => ({
className: classNames( className: classNames(`${prefixCls}-custom-component`, oriProps?.className, motionClassName),
`${prefixCls}-custom-component`, }));
oriProps?.className, }
motionClassName,
),
}));
}
return ( return (
<Component {...newProps} ref={ref}> <Component {...newProps} ref={ref}>
{numberNodes} {numberNodes}
</Component> </Component>
); );
}, });
);
export default ScrollNumber; export default ScrollNumber;

11
components/button/LoadingIcon.tsx
View File

@ -1,7 +1,7 @@
import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import classNames from 'classnames';
import CSSMotion from 'rc-motion'; import CSSMotion from 'rc-motion';
import React, { forwardRef } from 'react'; import React, { forwardRef } from 'react';
import classNames from 'classnames';
import IconWrapper from './IconWrapper'; import IconWrapper from './IconWrapper';
type InnerLoadingIconProps = { type InnerLoadingIconProps = {
@ -43,13 +43,8 @@ const getRealWidth = (node: HTMLElement): React.CSSProperties => ({
transform: 'scale(1)', transform: 'scale(1)',
}); });
const LoadingIcon: React.FC<LoadingIconProps> = ({ const LoadingIcon: React.FC<LoadingIconProps> = (props) => {
prefixCls, const { prefixCls, loading, existIcon, className, style } = props;
loading,
existIcon,
className,
style,
}) => {
const visible = !!loading; const visible = !!loading;
if (existIcon) { if (existIcon) {

172
components/input/TextArea.tsx
View File

@ -29,103 +29,97 @@ export interface TextAreaRef {
resizableTextArea?: RcTextAreaRef['resizableTextArea']; resizableTextArea?: RcTextAreaRef['resizableTextArea'];
} }
const TextArea = forwardRef<TextAreaRef, TextAreaProps>( const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
( const {
{ prefixCls: customizePrefixCls,
prefixCls: customizePrefixCls, bordered = true,
bordered = true, size: customizeSize,
size: customizeSize, disabled: customDisabled,
disabled: customDisabled, status: customStatus,
status: customStatus, allowClear,
allowClear, showCount,
showCount, classNames: classes,
classNames: classes, ...rest
...rest } = props;
}, const { getPrefixCls, direction } = React.useContext(ConfigContext);
ref,
) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
// ===================== Size ===================== // ===================== Size =====================
const mergedSize = useSize(customizeSize); const mergedSize = useSize(customizeSize);
// ===================== Disabled ===================== // ===================== Disabled =====================
const disabled = React.useContext(DisabledContext); const disabled = React.useContext(DisabledContext);
const mergedDisabled = customDisabled ?? disabled; const mergedDisabled = customDisabled ?? disabled;
// ===================== Status ===================== // ===================== Status =====================
const { const {
status: contextStatus, status: contextStatus,
hasFeedback, hasFeedback,
feedbackIcon, feedbackIcon,
} = React.useContext(FormItemInputContext); } = React.useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus); const mergedStatus = getMergedStatus(contextStatus, customStatus);
// ===================== Ref ===================== // ===================== Ref =====================
const innerRef = React.useRef<RcTextAreaRef>(null); const innerRef = React.useRef<RcTextAreaRef>(null);
React.useImperativeHandle(ref, () => ({ React.useImperativeHandle(ref, () => ({
resizableTextArea: innerRef.current?.resizableTextArea, resizableTextArea: innerRef.current?.resizableTextArea,
focus: (option?: InputFocusOptions) => { focus: (option?: InputFocusOptions) => {
triggerFocus(innerRef.current?.resizableTextArea?.textArea, option); triggerFocus(innerRef.current?.resizableTextArea?.textArea, option);
}, },
blur: () => innerRef.current?.blur(), blur: () => innerRef.current?.blur(),
})); }));
const prefixCls = getPrefixCls('input', customizePrefixCls); const prefixCls = getPrefixCls('input', customizePrefixCls);
// Allow clear // Allow clear
let mergedAllowClear: BaseInputProps['allowClear']; let mergedAllowClear: BaseInputProps['allowClear'];
if (typeof allowClear === 'object' && allowClear?.clearIcon) { if (typeof allowClear === 'object' && allowClear?.clearIcon) {
mergedAllowClear = allowClear; mergedAllowClear = allowClear;
} else if (allowClear) { } else if (allowClear) {
mergedAllowClear = { clearIcon: <CloseCircleFilled /> }; mergedAllowClear = { clearIcon: <CloseCircleFilled /> };
} }
// ===================== Style ===================== // ===================== Style =====================
const [wrapSSR, hashId] = useStyle(prefixCls); const [wrapSSR, hashId] = useStyle(prefixCls);
return wrapSSR( return wrapSSR(
<RcTextArea <RcTextArea
{...rest} {...rest}
disabled={mergedDisabled} disabled={mergedDisabled}
allowClear={mergedAllowClear} allowClear={mergedAllowClear}
classes={{ classes={{
affixWrapper: classNames( affixWrapper: classNames(
`${prefixCls}-textarea-affix-wrapper`, `${prefixCls}-textarea-affix-wrapper`,
{ {
[`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl', [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
[`${prefixCls}-affix-wrapper-borderless`]: !bordered, [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
[`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small', [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
[`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large', [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
[`${prefixCls}-textarea-show-count`]: showCount, [`${prefixCls}-textarea-show-count`]: showCount,
}, },
getStatusClassNames(`${prefixCls}-affix-wrapper`, mergedStatus), getStatusClassNames(`${prefixCls}-affix-wrapper`, mergedStatus),
hashId, hashId,
), ),
}} }}
classNames={{ classNames={{
...classes, ...classes,
textarea: classNames( textarea: classNames(
{ {
[`${prefixCls}-borderless`]: !bordered, [`${prefixCls}-borderless`]: !bordered,
[`${prefixCls}-sm`]: mergedSize === 'small', [`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-lg`]: mergedSize === 'large', [`${prefixCls}-lg`]: mergedSize === 'large',
}, },
getStatusClassNames(prefixCls, mergedStatus), getStatusClassNames(prefixCls, mergedStatus),
hashId, hashId,
classes?.textarea, classes?.textarea,
), ),
}} }}
prefixCls={prefixCls} prefixCls={prefixCls}
suffix={ suffix={hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>}
hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span> showCount={showCount}
} ref={innerRef}
showCount={showCount} />,
ref={innerRef} );
/>, });
);
},
);
export default TextArea; export default TextArea;

80
components/typography/Typography.tsx
View File

@ -1,9 +1,9 @@
import classNames from 'classnames'; import classNames from 'classnames';
import { composeRef } from 'rc-util/lib/ref'; import { composeRef } from 'rc-util/lib/ref';
import * as React from 'react'; import * as React from 'react';
import warning from '../_util/warning';
import type { DirectionType } from '../config-provider'; import type { DirectionType } from '../config-provider';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import warning from '../_util/warning';
import useStyle from './style'; import useStyle from './style';
export interface TypographyProps<C extends keyof JSX.IntrinsicElements> export interface TypographyProps<C extends keyof JSX.IntrinsicElements>
@ -29,53 +29,49 @@ interface InternalTypographyProps<C extends keyof JSX.IntrinsicElements>
const Typography = React.forwardRef< const Typography = React.forwardRef<
HTMLElement, HTMLElement,
InternalTypographyProps<keyof JSX.IntrinsicElements> InternalTypographyProps<keyof JSX.IntrinsicElements>
>( >((props, ref) => {
( const {
{ prefixCls: customizePrefixCls,
prefixCls: customizePrefixCls, component: Component = 'article',
component: Component = 'article', className,
className, rootClassName,
rootClassName, setContentRef,
setContentRef, children,
children, direction: typographyDirection,
direction: typographyDirection, ...restProps
...restProps } = props;
}, const { getPrefixCls, direction: contextDirection } = React.useContext(ConfigContext);
ref,
) => {
const { getPrefixCls, direction: contextDirection } = React.useContext(ConfigContext);
const direction = typographyDirection ?? contextDirection; const direction = typographyDirection ?? contextDirection;
let mergedRef = ref; let mergedRef = ref;
if (setContentRef) { if (setContentRef) {
warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.'); warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
mergedRef = composeRef(ref, setContentRef); mergedRef = composeRef(ref, setContentRef);
} }
const prefixCls = getPrefixCls('typography', customizePrefixCls); const prefixCls = getPrefixCls('typography', customizePrefixCls);
// Style // Style
const [wrapSSR, hashId] = useStyle(prefixCls); const [wrapSSR, hashId] = useStyle(prefixCls);
const componentClassName = classNames( const componentClassName = classNames(
prefixCls, prefixCls,
{ {
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
}, },
className, className,
rootClassName, rootClassName,
hashId, hashId,
); );
return wrapSSR( return wrapSSR(
// @ts-expect-error: Expression produces a union type that is too complex to represent. // @ts-expect-error: Expression produces a union type that is too complex to represent.
<Component className={componentClassName} ref={mergedRef} {...restProps}> <Component className={componentClassName} ref={mergedRef} {...restProps}>
{children} {children}
</Component>, </Component>,
); );
}, });
);
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
Typography.displayName = 'Typography'; Typography.displayName = 'Typography';

Write Preview
Loading…
Cancel
Save