Merge branch master into master-merge-feature

This commit is contained in:
栗嘉男 2023-07-09 18:26:06 +08:00
commit 0e47a7673e
15 changed files with 227 additions and 234 deletions

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 type { LiteralUnion } from '../_util/type';
import useStyle from './style';
import { isPresetColor } from '../_util/colors'; import { isPresetColor } from '../_util/colors';
import type { LiteralUnion } from '../_util/type';
import { ConfigContext } from '../config-provider';
import useStyle from './style';
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);

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
let numberNodes: React.ReactNode = count;
if (count && Number(count) % 1 === 0) {
const numberList = String(count).split('');
numberNodes = numberList.map((num, i) => (
<SingleNumber
prefixCls={prefixCls}
count={Number(count)}
value={num}
// eslint-disable-next-line react/no-array-index-key
key={numberList.length - i}
/>
));
}
// allow specify the border
// mock border-color by box-shadow for compatible with old usage:
// <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
if (style && style.borderColor) {
newProps.style = {
...style,
boxShadow: `0 0 0 1px ${style.borderColor} inset`,
}; };
}
if (children) {
return cloneElement(children, (oriProps) => ({
className: classNames(`${prefixCls}-custom-component`, oriProps?.className, motionClassName),
}));
}
// Only integer need motion return (
let numberNodes: React.ReactNode = count; <Component {...newProps} ref={ref}>
if (count && Number(count) % 1 === 0) { {numberNodes}
const numberList = String(count).split(''); </Component>
);
numberNodes = numberList.map((num, i) => ( });
<SingleNumber
prefixCls={prefixCls}
count={Number(count)}
value={num}
// eslint-disable-next-line react/no-array-index-key
key={numberList.length - i}
/>
));
}
// allow specify the border
// mock border-color by box-shadow for compatible with old usage:
// <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
if (style && style.borderColor) {
newProps.style = {
...style,
boxShadow: `0 0 0 1px ${style.borderColor} inset`,
};
}
if (children) {
return cloneElement(children, (oriProps) => ({
className: classNames(
`${prefixCls}-custom-component`,
oriProps?.className,
motionClassName,
),
}));
}
return (
<Component {...newProps} ref={ref}>
{numberNodes}
</Component>
);
},
);
export default ScrollNumber; export default ScrollNumber;

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) {

View File

@ -21,7 +21,7 @@ jest.mock('@rc-component/trigger', () => {
const h: typeof React = jest.requireActual('react'); const h: typeof React = jest.requireActual('react');
return { return {
default: h.forwardRef<unknown, TriggerProps>((props, ref) => { default: h.forwardRef<HTMLElement, TriggerProps>((props, ref) => {
triggerProps = props; triggerProps = props;
return h.createElement(Trigger, { ref, ...props }); return h.createElement(Trigger, { ref, ...props });
}), }),

View File

@ -19,19 +19,20 @@ export interface CellProps {
colon?: boolean; colon?: boolean;
} }
const Cell: React.FC<CellProps> = ({ const Cell: React.FC<CellProps> = (props) => {
itemPrefixCls, const {
component, itemPrefixCls,
span, component,
className, span,
style, className,
labelStyle, style,
contentStyle, labelStyle,
bordered, contentStyle,
label, bordered,
content, label,
colon, content,
}) => { colon,
} = props;
const Component = component as any; const Component = component as any;
if (bordered) { if (bordered) {

View File

@ -92,6 +92,10 @@ function getRows(children: React.ReactNode, column: number) {
return rows; return rows;
} }
interface CompoundedComponent {
Item: typeof DescriptionsItem;
}
export interface DescriptionsProps { export interface DescriptionsProps {
prefixCls?: string; prefixCls?: string;
className?: string; className?: string;
@ -109,23 +113,24 @@ export interface DescriptionsProps {
contentStyle?: React.CSSProperties; contentStyle?: React.CSSProperties;
} }
function Descriptions({ const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props) => {
prefixCls: customizePrefixCls, const {
title, prefixCls: customizePrefixCls,
extra, title,
column = DEFAULT_COLUMN_MAP, extra,
colon = true, column = DEFAULT_COLUMN_MAP,
bordered, colon = true,
layout, bordered,
children, layout,
className, children,
rootClassName, className,
style, rootClassName,
size: customizeSize, style,
labelStyle, size: customizeSize,
contentStyle, labelStyle,
...restProps contentStyle,
}: DescriptionsProps) { ...restProps
} = props;
const { getPrefixCls, direction, descriptions } = React.useContext(ConfigContext); const { getPrefixCls, direction, descriptions } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('descriptions', customizePrefixCls); const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
const [screens, setScreens] = React.useState<ScreenMap>({}); const [screens, setScreens] = React.useState<ScreenMap>({});
@ -202,7 +207,7 @@ function Descriptions({
</div> </div>
</DescriptionsContext.Provider>, </DescriptionsContext.Provider>,
); );
} };
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
Descriptions.displayName = 'Descriptions'; Descriptions.displayName = 'Descriptions';

View File

@ -15,7 +15,7 @@ jest.mock('@rc-component/trigger', () => {
const h: typeof React = jest.requireActual('react'); const h: typeof React = jest.requireActual('react');
return { return {
default: h.forwardRef<unknown, TriggerProps>((props, ref) => { default: h.forwardRef<HTMLElement, TriggerProps>((props, ref) => {
triggerProps = props; triggerProps = props;
return h.createElement(Trigger, { ref, ...props }); return h.createElement(Trigger, { ref, ...props });
}), }),

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

View File

@ -1,5 +1,5 @@
import React, { useRef, useState } from 'react';
import { Button, Modal } from 'antd'; import { Button, Modal } from 'antd';
import React, { useRef, useState } from 'react';
import type { DraggableData, DraggableEvent } from 'react-draggable'; import type { DraggableData, DraggableEvent } from 'react-draggable';
import Draggable from 'react-draggable'; import Draggable from 'react-draggable';
@ -71,6 +71,7 @@ const App: React.FC = () => {
<Draggable <Draggable
disabled={disabled} disabled={disabled}
bounds={bounds} bounds={bounds}
nodeRef={draggleRef}
onStart={(event, uiData) => onStart(event, uiData)} onStart={(event, uiData) => onStart(event, uiData)}
> >
<div ref={draggleRef}>{modal}</div> <div ref={draggleRef}>{modal}</div>

View File

@ -9,7 +9,7 @@ import { cloneElement } from '../_util/reactNode';
import type { ButtonProps, LegacyButtonType } from '../button/button'; import type { ButtonProps, LegacyButtonType } from '../button/button';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import Popover from '../popover'; import Popover from '../popover';
import type { AbstractTooltipProps } from '../tooltip'; import type { AbstractTooltipProps, TooltipRef } from '../tooltip';
import PurePanel, { Overlay } from './PurePanel'; import PurePanel, { Overlay } from './PurePanel';
import usePopconfirmStyle from './style'; import usePopconfirmStyle from './style';
@ -37,7 +37,7 @@ export interface PopconfirmState {
open?: boolean; open?: boolean;
} }
const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => { const Popconfirm = React.forwardRef<TooltipRef, PopconfirmProps>((props, ref) => {
const { const {
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
placement = 'top', placement = 'top',

View File

@ -25,7 +25,11 @@ export interface PurePanelProps extends Omit<PopoverProps, 'children'> {
children?: React.ReactNode; children?: React.ReactNode;
} }
export function RawPurePanel(props: any) { interface RawPurePanelProps extends PopoverProps {
hashId: string;
}
export const RawPurePanel: React.FC<RawPurePanelProps> = (props) => {
const { const {
hashId, hashId,
prefixCls, prefixCls,
@ -50,13 +54,13 @@ export function RawPurePanel(props: any) {
> >
<div className={`${prefixCls}-arrow`} /> <div className={`${prefixCls}-arrow`} />
<Popup {...props} className={hashId} prefixCls={prefixCls}> <Popup {...props} className={hashId} prefixCls={prefixCls}>
{children || getOverlay(prefixCls, title, content)} {children || getOverlay(prefixCls!, title, content)}
</Popup> </Popup>
</div> </div>
); );
} };
export default function PurePanel(props: any) { const PurePanel: React.FC<PurePanelProps> = (props) => {
const { prefixCls: customizePrefixCls, ...restProps } = props; const { prefixCls: customizePrefixCls, ...restProps } = props;
const { getPrefixCls } = React.useContext(ConfigContext); const { getPrefixCls } = React.useContext(ConfigContext);
@ -64,4 +68,6 @@ export default function PurePanel(props: any) {
const [wrapSSR, hashId] = useStyle(prefixCls); const [wrapSSR, hashId] = useStyle(prefixCls);
return wrapSSR(<RawPurePanel {...restProps} prefixCls={prefixCls} hashId={hashId} />); return wrapSSR(<RawPurePanel {...restProps} prefixCls={prefixCls} hashId={hashId} />);
} };
export default PurePanel;

View File

@ -4,7 +4,7 @@ import type { RenderFunction } from '../_util/getRenderPropValue';
import { getRenderPropValue } from '../_util/getRenderPropValue'; import { getRenderPropValue } from '../_util/getRenderPropValue';
import { getTransitionName } from '../_util/motion'; import { getTransitionName } from '../_util/motion';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import type { AbstractTooltipProps } from '../tooltip'; import type { AbstractTooltipProps, TooltipRef } from '../tooltip';
import Tooltip from '../tooltip'; import Tooltip from '../tooltip';
import PurePanel from './PurePanel'; import PurePanel from './PurePanel';
// CSSINJS // CSSINJS
@ -28,7 +28,7 @@ const Overlay: React.FC<OverlayProps> = ({ title, content, prefixCls }) => (
</> </>
); );
const Popover = React.forwardRef<unknown, PopoverProps>((props, ref) => { const Popover = React.forwardRef<TooltipRef, PopoverProps>((props, ref) => {
const { const {
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
title, title,

View File

@ -10,6 +10,7 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
import * as React from 'react'; import * as React from 'react';
import type { PresetColorType } from '../_util/colors'; import type { PresetColorType } from '../_util/colors';
import type { RenderFunction } from '../_util/getRenderPropValue';
import { getTransitionName } from '../_util/motion'; import { getTransitionName } from '../_util/motion';
import type { AdjustOverflow, PlacementsConfig } from '../_util/placements'; import type { AdjustOverflow, PlacementsConfig } from '../_util/placements';
import getPlacements from '../_util/placements'; import getPlacements from '../_util/placements';
@ -110,8 +111,6 @@ export interface AbstractTooltipProps extends LegacyTooltipProps {
destroyTooltipOnHide?: boolean | { keepParent?: boolean }; destroyTooltipOnHide?: boolean | { keepParent?: boolean };
} }
export type RenderFunction = () => React.ReactNode;
export interface TooltipPropsWithOverlay extends AbstractTooltipProps { export interface TooltipPropsWithOverlay extends AbstractTooltipProps {
title?: React.ReactNode | RenderFunction; title?: React.ReactNode | RenderFunction;
overlay?: React.ReactNode | RenderFunction; overlay?: React.ReactNode | RenderFunction;

View File

@ -291,7 +291,7 @@
"stylelint": "^15.1.0", "stylelint": "^15.1.0",
"stylelint-config-rational-order": "^0.1.2", "stylelint-config-rational-order": "^0.1.2",
"stylelint-config-standard": "^34.0.0", "stylelint-config-standard": "^34.0.0",
"stylelint-prettier": "^3.0.0", "stylelint-prettier": "^4.0.0",
"sylvanas": "^0.6.1", "sylvanas": "^0.6.1",
"terser": "^5.16.1", "terser": "^5.16.1",
"ts-node": "^10.8.2", "ts-node": "^10.8.2",

View File

@ -1,4 +1,4 @@
import type { TriggerProps } from '@rc-component/trigger'; import type { TriggerProps, TriggerRef } from '@rc-component/trigger';
import MockTrigger from '@rc-component/trigger/lib/mock'; import MockTrigger from '@rc-component/trigger/lib/mock';
import * as React from 'react'; import * as React from 'react';
import { TriggerMockContext } from '../../shared/demoTestContext'; import { TriggerMockContext } from '../../shared/demoTestContext';
@ -6,22 +6,21 @@ import { TriggerMockContext } from '../../shared/demoTestContext';
let OriginTrigger = jest.requireActual('@rc-component/trigger'); let OriginTrigger = jest.requireActual('@rc-component/trigger');
OriginTrigger = OriginTrigger.default ?? OriginTrigger; OriginTrigger = OriginTrigger.default ?? OriginTrigger;
const ForwardTrigger = React.forwardRef<any, TriggerProps>((props, ref) => { const ForwardTrigger = React.forwardRef<TriggerRef, TriggerProps>((props, ref) => {
const context = React.useContext(TriggerMockContext); const context = React.useContext(TriggerMockContext);
const mergedPopupVisible = context?.popupVisible ?? props.popupVisible; const mergedPopupVisible = context?.popupVisible ?? props.popupVisible;
(global as any).triggerProps = props; (global as any).triggerProps = props;
const mergedProps = { const mergedProps: TriggerProps = {
...props, ...props,
ref, popupVisible: mergedPopupVisible,
popupVisible: mergedPopupVisible as boolean,
}; };
if (context?.mock === false) { if (context?.mock === false) {
return <OriginTrigger {...mergedProps} />; return <OriginTrigger ref={ref} {...mergedProps} />;
} }
return <MockTrigger {...mergedProps} />; return <MockTrigger ref={ref} {...mergedProps} />;
}); });
export default ForwardTrigger; export default ForwardTrigger;