This commit is contained in:
2026-05-25 17:08:18 +08:00
parent df501f6151
commit f1259b71b5
9178 changed files with 1626125 additions and 0 deletions
+60
View File
@@ -0,0 +1,60 @@
import React from 'react';
import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
import type { SizeType } from '../config-provider/SizeContext';
import Group from './ButtonGroup';
import type { ButtonColorType, ButtonHTMLType, ButtonShape, ButtonType, ButtonVariantType } from './buttonHelpers';
export type LegacyButtonType = ButtonType | 'danger';
export type ButtonSemanticName = keyof ButtonSemanticClassNames & keyof ButtonSemanticStyles;
export type ButtonSemanticClassNames = {
root?: string;
icon?: string;
content?: string;
};
export type ButtonSemanticStyles = {
root?: React.CSSProperties;
icon?: React.CSSProperties;
content?: React.CSSProperties;
};
export type ButtonClassNamesType = SemanticClassNamesType<BaseButtonProps, ButtonSemanticClassNames>;
export type ButtonStylesType = SemanticStylesType<BaseButtonProps, ButtonSemanticStyles>;
export interface BaseButtonProps {
type?: ButtonType;
color?: ButtonColorType;
variant?: ButtonVariantType;
icon?: React.ReactNode;
/** @deprecated please use `iconPlacement` instead */
iconPosition?: 'start' | 'end';
iconPlacement?: 'start' | 'end';
shape?: ButtonShape;
size?: SizeType;
disabled?: boolean;
loading?: boolean | {
delay?: number;
icon?: React.ReactNode;
};
prefixCls?: string;
className?: string;
rootClassName?: string;
ghost?: boolean;
danger?: boolean;
block?: boolean;
children?: React.ReactNode;
[key: `data-${string}`]: string;
classNames?: ButtonClassNamesType;
styles?: ButtonStylesType;
/** @private Only for internal usage. Do not use in your production */
_skipSemantic?: boolean;
}
type MergedHTMLAttributes = Omit<React.HTMLAttributes<HTMLElement> & React.ButtonHTMLAttributes<HTMLElement> & React.AnchorHTMLAttributes<HTMLElement>, 'type' | 'color'>;
export interface ButtonProps extends BaseButtonProps, MergedHTMLAttributes {
href?: string;
htmlType?: ButtonHTMLType;
autoInsertSpace?: boolean;
}
declare const InternalCompoundedButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
type CompoundedComponent = typeof InternalCompoundedButton & {
/** @deprecated Please use `Space.Compact` */
Group: typeof Group;
};
declare const Button: CompoundedComponent;
export default Button;
+325
View File
@@ -0,0 +1,325 @@
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _util = require("@rc-component/util");
var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
var _clsx = require("clsx");
var _hooks = require("../_util/hooks");
var _is = require("../_util/is");
var _warning = require("../_util/warning");
var _wave = _interopRequireDefault(require("../_util/wave"));
var _context = require("../config-provider/context");
var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
var _Compact = require("../space/Compact");
var _ButtonGroup = _interopRequireWildcard(require("./ButtonGroup"));
var _buttonHelpers = require("./buttonHelpers");
var _DefaultLoadingIcon = _interopRequireDefault(require("./DefaultLoadingIcon"));
var _IconWrapper = _interopRequireDefault(require("./IconWrapper"));
var _style = _interopRequireDefault(require("./style"));
var _compact = _interopRequireDefault(require("./style/compact"));
function getLoadingConfig(loading) {
if ((0, _is.isPlainObject)(loading)) {
let delay = loading?.delay;
delay = (0, _is.isNumber)(delay) ? delay : 0;
return {
loading: delay <= 0,
delay
};
}
return {
loading: !!loading,
delay: 0
};
}
const ButtonTypeMap = {
default: ['default', 'outlined'],
primary: ['primary', 'solid'],
dashed: ['default', 'dashed'],
// `link` is not a real color but we should compatible with it
link: ['link', 'link'],
text: ['default', 'text']
};
const InternalCompoundedButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
const {
_skipSemantic,
loading = false,
prefixCls: customizePrefixCls,
color,
variant,
type,
danger = false,
shape: customizeShape,
size: customizeSize,
disabled: customDisabled,
className,
rootClassName,
children,
icon,
iconPosition,
iconPlacement,
ghost = false,
block = false,
// React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
htmlType = 'button',
classNames,
styles,
style,
autoInsertSpace,
autoFocus,
...rest
} = props;
const childNodes = (0, _util.toArray)(children);
// https://github.com/ant-design/ant-design/issues/47605
// Compatible with original `type` behavior
const mergedType = type || 'default';
const {
getPrefixCls,
direction,
autoInsertSpace: contextAutoInsertSpace,
className: contextClassName,
style: contextStyle,
classNames: contextClassNames,
styles: contextStyles,
loadingIcon: contextLoadingIcon,
shape: contextShape,
color: contextColor,
variant: contextVariant
} = (0, _context.useComponentConfig)('button');
const mergedShape = customizeShape || contextShape || 'default';
const [parsedColor, parsedVariant] = (0, _react.useMemo)(() => {
// >>>>> Local
// Color & Variant
if (color && variant) {
return [color, variant];
}
// Sugar syntax
if (type || danger) {
const colorVariantPair = ButtonTypeMap[mergedType] || [];
if (danger) {
return ['danger', colorVariantPair[1]];
}
return colorVariantPair;
}
// >>> Context fallback
if (contextColor && contextVariant) {
return [contextColor, contextVariant];
}
return ['default', 'outlined'];
}, [color, variant, type, danger, contextColor, contextVariant, mergedType]);
const [mergedColor, mergedVariant] = (0, _react.useMemo)(() => {
if (ghost && parsedVariant === 'solid') {
return [parsedColor, 'outlined'];
}
return [parsedColor, parsedVariant];
}, [parsedColor, parsedVariant, ghost]);
const isDanger = mergedColor === 'danger';
const mergedColorText = isDanger ? 'dangerous' : mergedColor;
const mergedInsertSpace = autoInsertSpace ?? contextAutoInsertSpace ?? true;
const prefixCls = getPrefixCls('btn', customizePrefixCls);
const [hashId, cssVarCls] = (0, _style.default)(prefixCls);
const disabled = (0, _react.useContext)(_DisabledContext.default);
const mergedDisabled = customDisabled ?? disabled;
const groupSize = (0, _react.useContext)(_ButtonGroup.GroupSizeContext);
const loadingOrDelay = (0, _react.useMemo)(() => getLoadingConfig(loading), [loading]);
const [innerLoading, setInnerLoading] = (0, _react.useState)(loadingOrDelay.loading);
const [hasTwoCNChar, setHasTwoCNChar] = (0, _react.useState)(false);
const buttonRef = (0, _react.useRef)(null);
const mergedRef = (0, _util.useComposeRef)(ref, buttonRef);
const needInserted = childNodes.length === 1 && !icon && !(0, _buttonHelpers.isUnBorderedButtonVariant)(mergedVariant);
// ========================= Mount ==========================
// Record for mount status.
// This will help to no to show the animation of loading on the first mount.
const isMountRef = (0, _react.useRef)(true);
_react.default.useEffect(() => {
isMountRef.current = false;
return () => {
isMountRef.current = true;
};
}, []);
// ========================= Effect =========================
// Loading. Should use `useLayoutEffect` to avoid low perf multiple click issue.
// https://github.com/ant-design/ant-design/issues/51325
(0, _useLayoutEffect.default)(() => {
let delayTimer = null;
if (loadingOrDelay.delay > 0) {
delayTimer = setTimeout(() => {
delayTimer = null;
setInnerLoading(true);
}, loadingOrDelay.delay);
} else {
setInnerLoading(loadingOrDelay.loading);
}
function cleanupTimer() {
if (delayTimer) {
clearTimeout(delayTimer);
delayTimer = null;
}
}
return cleanupTimer;
}, [loadingOrDelay.delay, loadingOrDelay.loading]);
// Two chinese characters check
(0, _react.useEffect)(() => {
// FIXME: for HOC usage like <FormatMessage />
if (!buttonRef.current || !mergedInsertSpace) {
return;
}
const buttonText = buttonRef.current.textContent || '';
if (needInserted && (0, _buttonHelpers.isTwoCNChar)(buttonText)) {
if (!hasTwoCNChar) {
setHasTwoCNChar(true);
}
} else if (hasTwoCNChar) {
setHasTwoCNChar(false);
}
});
// Auto focus
(0, _react.useEffect)(() => {
if (autoFocus && buttonRef.current) {
buttonRef.current.focus();
}
}, []);
// ========================= Events =========================
const handleClick = _react.default.useCallback(e => {
// FIXME: https://github.com/ant-design/ant-design/issues/30207
if (innerLoading || mergedDisabled) {
e.preventDefault();
return;
}
props.onClick?.('href' in props ? e : e);
}, [props.onClick, innerLoading, mergedDisabled]);
// ========================== Warn ==========================
if (process.env.NODE_ENV !== 'production') {
const warning = (0, _warning.devUseWarning)('Button');
process.env.NODE_ENV !== "production" ? warning(!(typeof icon === 'string' && icon.length > 2), 'breaking', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`) : void 0;
process.env.NODE_ENV !== "production" ? warning(!(ghost && (0, _buttonHelpers.isUnBorderedButtonVariant)(mergedVariant)), 'usage', "`link` or `text` button can't be a `ghost` button.") : void 0;
warning.deprecated(!iconPosition, 'iconPosition', 'iconPlacement');
}
// ========================== Size ==========================
const {
compactSize,
compactItemClassnames
} = (0, _Compact.useCompactItemContext)(prefixCls, direction);
const sizeFullName = (0, _useSize.default)(ctxSize => customizeSize ?? compactSize ?? groupSize ?? ctxSize);
const iconType = innerLoading ? 'loading' : icon;
const mergedIconPlacement = iconPlacement ?? iconPosition ?? 'start';
const linkButtonRestProps = (0, _util.omit)(rest, ['navigate']);
// =========== Merged Props for Semantic ===========
const mergedProps = {
...props,
type: mergedType,
color: mergedColor,
variant: mergedVariant,
danger: isDanger,
shape: mergedShape,
size: sizeFullName,
disabled: mergedDisabled,
loading: innerLoading,
iconPlacement: mergedIconPlacement
};
// ========================= Style ==========================
const [mergedClassNames, mergedStyles] = (0, _hooks.useMergeSemantic)([_skipSemantic ? undefined : contextClassNames, classNames], [_skipSemantic ? undefined : contextStyles, styles], {
props: mergedProps
});
// ========================= Render =========================
const classes = (0, _clsx.clsx)(prefixCls, hashId, cssVarCls, {
[`${prefixCls}-${mergedShape}`]: mergedShape !== 'default' && mergedShape !== 'square' && mergedShape,
// Compatible with versions earlier than 5.21.0
[`${prefixCls}-${mergedType}`]: mergedType,
[`${prefixCls}-dangerous`]: danger,
[`${prefixCls}-color-${mergedColorText}`]: mergedColorText,
[`${prefixCls}-variant-${mergedVariant}`]: mergedVariant,
[`${prefixCls}-lg`]: sizeFullName === 'large',
[`${prefixCls}-sm`]: sizeFullName === 'small',
[`${prefixCls}-icon-only`]: !children && children !== 0 && !!iconType,
[`${prefixCls}-background-ghost`]: ghost && !(0, _buttonHelpers.isUnBorderedButtonVariant)(mergedVariant),
[`${prefixCls}-loading`]: innerLoading,
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && mergedInsertSpace && !innerLoading,
[`${prefixCls}-block`]: block,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-icon-end`]: mergedIconPlacement === 'end'
}, compactItemClassnames, className, rootClassName, contextClassName, mergedClassNames.root);
const fullStyle = {
...mergedStyles.root,
...contextStyle,
...style
};
const iconSharedProps = {
className: mergedClassNames.icon,
style: mergedStyles.icon
};
/**
* Extract icon node
* If there is a custom icon and not in loading state: show custom icon
*/
const iconWrapperElement = child => (/*#__PURE__*/_react.default.createElement(_IconWrapper.default, {
prefixCls: prefixCls,
...iconSharedProps
}, child));
const defaultLoadingIconElement = /*#__PURE__*/_react.default.createElement(_DefaultLoadingIcon.default, {
existIcon: !!icon,
prefixCls: prefixCls,
loading: innerLoading,
mount: isMountRef.current,
...iconSharedProps
});
const mergedLoadingIcon = (0, _is.isPlainObject)(loading) ? loading.icon || contextLoadingIcon : contextLoadingIcon;
/**
* Using if-else statements can improve code readability without affecting future expansion.
*/
let iconNode;
if (icon && !innerLoading) {
iconNode = iconWrapperElement(icon);
} else if (loading && mergedLoadingIcon) {
iconNode = iconWrapperElement(mergedLoadingIcon);
} else {
iconNode = defaultLoadingIconElement;
}
const contentNode = (0, _is.isNonNullable)(children) ? (0, _buttonHelpers.spaceChildren)(children, needInserted && mergedInsertSpace, mergedStyles.content, mergedClassNames.content) : null;
if (linkButtonRestProps.href !== undefined) {
return /*#__PURE__*/_react.default.createElement("a", {
...linkButtonRestProps,
className: (0, _clsx.clsx)(classes, {
[`${prefixCls}-disabled`]: mergedDisabled
}),
href: mergedDisabled ? undefined : linkButtonRestProps.href,
style: fullStyle,
onClick: handleClick,
ref: mergedRef,
tabIndex: mergedDisabled ? -1 : 0,
"aria-disabled": mergedDisabled
}, iconNode, contentNode);
}
let buttonNode = /*#__PURE__*/_react.default.createElement("button", {
...rest,
type: htmlType,
className: classes,
style: fullStyle,
onClick: handleClick,
disabled: mergedDisabled,
ref: mergedRef
}, iconNode, contentNode, compactItemClassnames && /*#__PURE__*/_react.default.createElement(_compact.default, {
prefixCls: prefixCls
}));
if (!(0, _buttonHelpers.isUnBorderedButtonVariant)(mergedVariant)) {
buttonNode = /*#__PURE__*/_react.default.createElement(_wave.default, {
component: "Button",
disabled: innerLoading
}, buttonNode);
}
return buttonNode;
});
const Button = InternalCompoundedButton;
Button.Group = _ButtonGroup.default;
Button.__ANT_BUTTON = true;
if (process.env.NODE_ENV !== 'production') {
Button.displayName = 'Button';
}
var _default = exports.default = Button;
+12
View File
@@ -0,0 +1,12 @@
import * as React from 'react';
import type { SizeType } from '../config-provider/SizeContext';
export interface ButtonGroupProps {
size?: SizeType;
style?: React.CSSProperties;
className?: string;
prefixCls?: string;
children?: React.ReactNode;
}
export declare const GroupSizeContext: React.Context<SizeType>;
declare const ButtonGroup: React.FC<ButtonGroupProps>;
export default ButtonGroup;
+54
View File
@@ -0,0 +1,54 @@
"use strict";
"use client";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.GroupSizeContext = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = require("clsx");
var _warning = require("../_util/warning");
var _configProvider = require("../config-provider");
var _internal = require("../theme/internal");
const GroupSizeContext = exports.GroupSizeContext = /*#__PURE__*/React.createContext(undefined);
const ButtonGroup = props => {
const {
getPrefixCls,
direction
} = React.useContext(_configProvider.ConfigContext);
const {
prefixCls: customizePrefixCls,
size,
className,
...others
} = props;
const prefixCls = getPrefixCls('btn-group', customizePrefixCls);
const [,, hashId] = (0, _internal.useToken)();
const sizeCls = React.useMemo(() => {
switch (size) {
case 'large':
return 'lg';
case 'small':
return 'sm';
default:
return '';
}
}, [size]);
if (process.env.NODE_ENV !== 'production') {
const warning = (0, _warning.devUseWarning)('Button.Group');
warning.deprecated(false, 'Button.Group', 'Space.Compact');
process.env.NODE_ENV !== "production" ? warning(!size || ['large', 'medium', 'small'].includes(size), 'usage', 'Invalid prop `size`.') : void 0;
}
const classes = (0, _clsx.clsx)(prefixCls, {
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-rtl`]: direction === 'rtl'
}, className, hashId);
return /*#__PURE__*/React.createElement(GroupSizeContext.Provider, {
value: size
}, /*#__PURE__*/React.createElement("div", {
...others,
className: classes
}));
};
var _default = exports.default = ButtonGroup;
+11
View File
@@ -0,0 +1,11 @@
import React from 'react';
export type DefaultLoadingIconProps = {
prefixCls: string;
existIcon: boolean;
loading?: boolean | object;
className?: string;
style?: React.CSSProperties;
mount: boolean;
};
declare const DefaultLoadingIcon: React.FC<DefaultLoadingIconProps>;
export default DefaultLoadingIcon;
+89
View File
@@ -0,0 +1,89 @@
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _LoadingOutlined = _interopRequireDefault(require("@ant-design/icons/LoadingOutlined"));
var _motion = _interopRequireDefault(require("@rc-component/motion"));
var _clsx = require("clsx");
var _IconWrapper = _interopRequireDefault(require("./IconWrapper"));
const InnerLoadingIcon = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
const {
prefixCls,
className,
style,
iconClassName
} = props;
const mergedIconCls = (0, _clsx.clsx)(`${prefixCls}-loading-icon`, className);
return /*#__PURE__*/_react.default.createElement(_IconWrapper.default, {
prefixCls: prefixCls,
className: mergedIconCls,
style: style,
ref: ref
}, /*#__PURE__*/_react.default.createElement(_LoadingOutlined.default, {
className: iconClassName
}));
});
const getCollapsedWidth = () => ({
width: 0,
opacity: 0,
transform: 'scale(0)'
});
const getRealWidth = node => ({
width: node.scrollWidth,
opacity: 1,
transform: 'scale(1)'
});
const DefaultLoadingIcon = props => {
const {
prefixCls,
loading,
existIcon,
className,
style,
mount
} = props;
const visible = !!loading;
if (existIcon) {
return /*#__PURE__*/_react.default.createElement(InnerLoadingIcon, {
prefixCls: prefixCls,
className: className,
style: style
});
}
return /*#__PURE__*/_react.default.createElement(_motion.default, {
visible: visible,
// Used for minus flex gap style only
motionName: `${prefixCls}-loading-icon-motion`,
motionAppear: !mount,
motionEnter: !mount,
motionLeave: !mount,
removeOnLeave: true,
onAppearStart: getCollapsedWidth,
onAppearActive: getRealWidth,
onEnterStart: getCollapsedWidth,
onEnterActive: getRealWidth,
onLeaveStart: getRealWidth,
onLeaveActive: getCollapsedWidth
}, ({
className: motionCls,
style: motionStyle
}, ref) => {
const mergedStyle = {
...style,
...motionStyle
};
return /*#__PURE__*/_react.default.createElement(InnerLoadingIcon, {
prefixCls: prefixCls,
className: (0, _clsx.clsx)(className, motionCls),
style: mergedStyle,
ref: ref
});
});
};
var _default = exports.default = DefaultLoadingIcon;
+9
View File
@@ -0,0 +1,9 @@
import React from 'react';
export type IconWrapperProps = {
prefixCls: string;
className?: string;
style?: React.CSSProperties;
children?: React.ReactNode;
};
declare const IconWrapper: React.ForwardRefExoticComponent<IconWrapperProps & React.RefAttributes<HTMLSpanElement>>;
export default IconWrapper;
+25
View File
@@ -0,0 +1,25 @@
"use strict";
"use client";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _clsx = require("clsx");
const IconWrapper = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
const {
className,
style,
children,
prefixCls
} = props;
const iconWrapperCls = (0, _clsx.clsx)(`${prefixCls}-icon`, className);
return /*#__PURE__*/_react.default.createElement("span", {
ref: ref,
className: iconWrapperCls,
style: style
}, children);
});
var _default = exports.default = IconWrapper;
+17
View File
@@ -0,0 +1,17 @@
import React from 'react';
import type { BaseButtonProps, LegacyButtonType } from './Button';
export declare const isTwoCNChar: (string: string) => boolean;
export declare function convertLegacyProps(type?: LegacyButtonType): Pick<BaseButtonProps, 'danger' | 'type'>;
export declare function isUnBorderedButtonVariant(type?: ButtonVariantType): type is "link" | "text";
export declare function spaceChildren(children: React.ReactNode, needInserted: boolean, style?: React.CSSProperties, className?: string): React.JSX.Element[] | null | undefined;
declare const _ButtonTypes: readonly ["default", "primary", "dashed", "link", "text"];
export type ButtonType = (typeof _ButtonTypes)[number];
declare const _ButtonShapes: readonly ["default", "circle", "round", "square"];
export type ButtonShape = (typeof _ButtonShapes)[number];
declare const _ButtonHTMLTypes: readonly ["submit", "button", "reset"];
export type ButtonHTMLType = (typeof _ButtonHTMLTypes)[number];
export declare const _ButtonVariantTypes: readonly ["outlined", "dashed", "solid", "filled", "text", "link"];
export type ButtonVariantType = (typeof _ButtonVariantTypes)[number];
export declare const _ButtonColorTypes: readonly ["default", "primary", "danger", "blue", "purple", "cyan", "green", "magenta", "pink", "red", "orange", "yellow", "volcano", "geekblue", "lime", "gold"];
export type ButtonColorType = (typeof _ButtonColorTypes)[number];
export {};
+96
View File
@@ -0,0 +1,96 @@
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports._ButtonVariantTypes = exports._ButtonColorTypes = void 0;
exports.convertLegacyProps = convertLegacyProps;
exports.isTwoCNChar = void 0;
exports.isUnBorderedButtonVariant = isUnBorderedButtonVariant;
exports.spaceChildren = spaceChildren;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireDefault(require("react"));
var _clsx = require("clsx");
var _is = require("../_util/is");
var _reactNode = require("../_util/reactNode");
var _interface = require("../theme/interface");
const rxTwoCNChar = /^[\u4E00-\u9FA5]{2}$/;
const isTwoCNChar = exports.isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
function convertLegacyProps(type) {
if (type === 'danger') {
return {
danger: true
};
}
return {
type
};
}
function isUnBorderedButtonVariant(type) {
return type === 'text' || type === 'link';
}
function splitCNCharsBySpace(child, needInserted, style, className) {
if (!(0, _is.isNonNullable)(child) || child === '') {
return;
}
const SPACE = needInserted ? ' ' : '';
if (typeof child !== 'string' && typeof child !== 'number' && (0, _is.isString)(child.type) && isTwoCNChar(child.props.children)) {
return (0, _reactNode.cloneElement)(child, oriProps => {
const mergedCls = (0, _clsx.clsx)(oriProps.className, className) || undefined;
const mergedStyle = {
...style,
...oriProps.style
};
return {
...oriProps,
children: oriProps.children.split('').join(SPACE),
className: mergedCls,
style: mergedStyle
};
});
}
if ((0, _is.isString)(child)) {
return /*#__PURE__*/_react.default.createElement("span", {
className: className,
style: style
}, isTwoCNChar(child) ? child.split('').join(SPACE) : child);
}
if ((0, _reactNode.isFragment)(child)) {
return /*#__PURE__*/_react.default.createElement("span", {
className: className,
style: style
}, child);
}
return (0, _reactNode.cloneElement)(child, oriProps => ({
...oriProps,
className: (0, _clsx.clsx)(oriProps.className, className) || undefined,
style: {
...oriProps.style,
...style
}
}));
}
function spaceChildren(children, needInserted, style, className) {
let isPrevChildPure = false;
const childList = [];
_react.default.Children.forEach(children, child => {
const type = typeof child;
const isCurrentChildPure = type === 'string' || type === 'number';
if (isPrevChildPure && isCurrentChildPure) {
const lastIndex = childList.length - 1;
const lastChild = childList[lastIndex];
childList[lastIndex] = `${lastChild}${child}`;
} else {
childList.push(child);
}
isPrevChildPure = isCurrentChildPure;
});
return _react.default.Children.map(childList, child => splitCNCharsBySpace(child, needInserted, style, className));
}
const _ButtonTypes = ['default', 'primary', 'dashed', 'link', 'text'];
const _ButtonShapes = ['default', 'circle', 'round', 'square'];
const _ButtonHTMLTypes = ['submit', 'button', 'reset'];
const _ButtonVariantTypes = exports._ButtonVariantTypes = ['outlined', 'dashed', 'solid', 'filled', 'text', 'link'];
const _ButtonColorTypes = exports._ButtonColorTypes = ['default', 'primary', 'danger'].concat((0, _toConsumableArray2.default)(_interface.PresetColors));
+6
View File
@@ -0,0 +1,6 @@
import Button from './Button';
export type { SizeType as ButtonSize } from '../config-provider/SizeContext';
export type { ButtonProps, ButtonSemanticClassNames, ButtonSemanticName, ButtonSemanticStyles, } from './Button';
export type { ButtonGroupProps } from './ButtonGroup';
export * from './buttonHelpers';
export default Button;
+23
View File
@@ -0,0 +1,23 @@
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {};
exports.default = void 0;
var _Button = _interopRequireDefault(require("./Button"));
var _buttonHelpers = require("./buttonHelpers");
Object.keys(_buttonHelpers).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _buttonHelpers[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _buttonHelpers[key];
}
});
});
var _default = exports.default = _Button.default;
+2
View File
@@ -0,0 +1,2 @@
declare const _default: import("react").FunctionComponent<import("@ant-design/cssinjs-utils/lib/util/genStyleUtils").SubStyleComponentProps>;
export default _default;
+64
View File
@@ -0,0 +1,64 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _compactItem = require("../../style/compact-item");
var _compactItemVertical = require("../../style/compact-item-vertical");
var _internal = require("../../theme/internal");
var _genStyleUtils = require("../../theme/util/genStyleUtils");
var _token = require("./token");
const genButtonCompactStyle = token => {
const {
antCls,
componentCls,
lineWidth,
calc,
colorBgContainer
} = token;
const solidSelector = `${componentCls}-variant-solid:not([disabled])`;
const insetOffset = calc(lineWidth).mul(-1).equal();
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'btn');
const getCompactBorderStyle = vertical => {
const itemCls = `${componentCls}-compact${vertical ? '-vertical' : ''}-item`;
return {
// TODO: Border color transition should be not cover when has color.
[itemCls]: {
[varName('compact-connect-border-color')]: varRef('bg-color-hover'),
[`&${solidSelector}`]: {
transition: `none`,
[`& + ${solidSelector}:before`]: [{
position: 'absolute',
backgroundColor: varRef('compact-connect-border-color'),
content: '""'
}, vertical ? {
top: insetOffset,
insetInline: insetOffset,
height: lineWidth
} : {
insetBlock: insetOffset,
insetInlineStart: insetOffset,
width: lineWidth
}],
'&:hover:before': {
display: 'none'
}
}
}
};
};
// Special styles for solid Button
return [getCompactBorderStyle(), getCompactBorderStyle(true), {
[`${solidSelector}${componentCls}-color-default`]: {
[varName('compact-connect-border-color')]: `color-mix(in srgb, ${varRef('bg-color-hover')} 75%, ${colorBgContainer})`
}
}];
};
// ============================== Export ==============================
var _default = exports.default = (0, _internal.genSubStyleComponent)(['Button', 'compact'], token => {
const buttonToken = (0, _token.prepareToken)(token);
return [
// Space Compact
(0, _compactItem.genCompactItemStyle)(buttonToken), (0, _compactItemVertical.genCompactItemVerticalStyle)(buttonToken), genButtonCompactStyle(buttonToken)];
}, _token.prepareComponentToken);
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { GenerateStyle } from '../../theme/internal';
import type { ButtonToken } from './token';
declare const genGroupStyle: GenerateStyle<ButtonToken, CSSObject>;
export default genGroupStyle;
+72
View File
@@ -0,0 +1,72 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
const genButtonBorderStyle = (buttonTypeCls, borderColor) => ({
// Border
[`> span, > ${buttonTypeCls}`]: {
'&:not(:last-child)': {
[`&, & > ${buttonTypeCls}`]: {
'&:not(:disabled)': {
borderInlineEndColor: borderColor
}
}
},
'&:not(:first-child)': {
[`&, & > ${buttonTypeCls}`]: {
'&:not(:disabled)': {
borderInlineStartColor: borderColor
}
}
}
}
});
const genGroupStyle = token => {
const {
componentCls,
fontSize,
lineWidth,
groupBorderColor,
colorErrorHover
} = token;
return {
[`${componentCls}-group`]: [{
position: 'relative',
display: 'inline-flex',
// Border
[`> span, > ${componentCls}`]: {
'&:not(:last-child)': {
[`&, & > ${componentCls}`]: {
borderStartEndRadius: 0,
borderEndEndRadius: 0
}
},
'&:not(:first-child)': {
marginInlineStart: token.calc(lineWidth).mul(-1).equal(),
[`&, & > ${componentCls}`]: {
borderStartStartRadius: 0,
borderEndStartRadius: 0
}
}
},
[componentCls]: {
position: 'relative',
zIndex: 1,
'&:hover, &:focus, &:active': {
zIndex: 2
},
'&[disabled]': {
zIndex: 0
}
},
[`${componentCls}-icon-only`]: {
fontSize
}
},
// Border Color
genButtonBorderStyle(`${componentCls}-primary`, groupBorderColor), genButtonBorderStyle(`${componentCls}-danger`, colorErrorHover)]
};
};
var _default = exports.default = genGroupStyle;
+4
View File
@@ -0,0 +1,4 @@
import type { ComponentToken } from './token';
export type { ComponentToken };
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
export default _default;
+218
View File
@@ -0,0 +1,218 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _cssinjs = require("@ant-design/cssinjs");
var _style = require("../../style");
var _motion = require("../../style/motion");
var _internal = require("../../theme/internal");
var _group = _interopRequireDefault(require("./group"));
var _token = require("./token");
var _variant = _interopRequireDefault(require("./variant"));
// ============================== Shared ==============================
const genSharedButtonStyle = token => {
const {
componentCls,
iconCls,
fontWeight,
opacityLoading,
motionDurationSlow,
motionEaseInOut,
iconGap,
calc
} = token;
return {
[componentCls]: {
outline: 'none',
position: 'relative',
display: 'inline-flex',
gap: iconGap,
alignItems: 'center',
justifyContent: 'center',
fontWeight,
whiteSpace: 'nowrap',
textAlign: 'center',
backgroundImage: 'none',
cursor: 'pointer',
transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
userSelect: 'none',
touchAction: 'manipulation',
...(0, _motion.genNoMotionStyle)(),
'&:disabled > *': {
pointerEvents: 'none'
},
// https://github.com/ant-design/ant-design/issues/51380
[`${componentCls}-icon > svg`]: (0, _style.resetIcon)(),
'> a': {
color: 'currentColor'
},
'&:not(:disabled)': (0, _style.genFocusStyle)(token),
[`&${componentCls}-two-chinese-chars::first-letter`]: {
letterSpacing: '0.34em'
},
[`&${componentCls}-two-chinese-chars > *:not(${iconCls})`]: {
marginInlineEnd: '-0.34em',
letterSpacing: '0.34em'
},
[`&${componentCls}-icon-only`]: {
paddingInline: 0,
// make `btn-icon-only` not too narrow
[`&${componentCls}-compact-item`]: {
flex: 'none'
}
},
// Loading
[`&${componentCls}-loading`]: {
opacity: opacityLoading,
cursor: 'default'
},
[`${componentCls}-loading-icon`]: {
transition: ['width', 'opacity', 'margin'].map(prop => `${prop} ${motionDurationSlow} ${motionEaseInOut}`).join(',')
},
// iconPlacement
[`&:not(${componentCls}-icon-end)`]: {
[`${componentCls}-loading-icon-motion`]: {
'&-appear-start, &-enter-start': {
marginInlineEnd: calc(iconGap).mul(-1).equal()
},
'&-appear-active, &-enter-active': {
marginInlineEnd: 0
},
'&-leave-start': {
marginInlineEnd: 0
},
'&-leave-active': {
marginInlineEnd: calc(iconGap).mul(-1).equal()
}
}
},
'&-icon-end': {
flexDirection: 'row-reverse',
[`${componentCls}-loading-icon-motion`]: {
'&-appear-start, &-enter-start': {
marginInlineStart: calc(iconGap).mul(-1).equal()
},
'&-appear-active, &-enter-active': {
marginInlineStart: 0
},
'&-leave-start': {
marginInlineStart: 0
},
'&-leave-active': {
marginInlineStart: calc(iconGap).mul(-1).equal()
}
}
}
}
};
};
// ============================== Shape ===============================
const genCircleButtonStyle = token => ({
minWidth: token.controlHeight,
paddingInline: 0,
borderRadius: '50%'
});
// =============================== Size ===============================
const genButtonStyle = (token, prefixCls = '') => {
const {
componentCls,
controlHeight,
fontSize,
borderRadius,
buttonPaddingHorizontal,
iconCls,
buttonPaddingVertical,
buttonIconOnlyFontSize
} = token;
return [{
[prefixCls]: {
fontSize,
height: controlHeight,
padding: `${(0, _cssinjs.unit)(buttonPaddingVertical)} ${(0, _cssinjs.unit)(buttonPaddingHorizontal)}`,
borderRadius,
[`&${componentCls}-icon-only`]: {
width: controlHeight,
[iconCls]: {
fontSize: buttonIconOnlyFontSize
}
}
}
},
// Shape - patch prefixCls again to override solid border radius style
{
[`${componentCls}${componentCls}-circle${prefixCls}`]: genCircleButtonStyle(token)
}, {
[`${componentCls}${componentCls}-round${prefixCls}`]: {
borderRadius: token.controlHeight,
[`&:not(${componentCls}-icon-only)`]: {
paddingInline: token.buttonPaddingHorizontal
}
}
}];
};
const genSizeBaseButtonStyle = token => {
const baseToken = (0, _internal.mergeToken)(token, {
fontSize: token.contentFontSize
});
return genButtonStyle(baseToken, token.componentCls);
};
const genSizeSmallButtonStyle = token => {
const smallToken = (0, _internal.mergeToken)(token, {
controlHeight: token.controlHeightSM,
fontSize: token.contentFontSizeSM,
padding: token.paddingXS,
buttonPaddingHorizontal: token.paddingInlineSM,
buttonPaddingVertical: 0,
borderRadius: token.borderRadiusSM,
buttonIconOnlyFontSize: token.onlyIconSizeSM
});
return genButtonStyle(smallToken, `${token.componentCls}-sm`);
};
const genSizeLargeButtonStyle = token => {
const largeToken = (0, _internal.mergeToken)(token, {
controlHeight: token.controlHeightLG,
fontSize: token.contentFontSizeLG,
buttonPaddingHorizontal: token.paddingInlineLG,
buttonPaddingVertical: 0,
borderRadius: token.borderRadiusLG,
buttonIconOnlyFontSize: token.onlyIconSizeLG
});
return genButtonStyle(largeToken, `${token.componentCls}-lg`);
};
const genBlockButtonStyle = token => {
const {
componentCls
} = token;
return {
[componentCls]: {
[`&${componentCls}-block`]: {
width: '100%'
}
}
};
};
// ============================== Export ==============================
var _default = exports.default = (0, _internal.genStyleHooks)('Button', token => {
const buttonToken = (0, _token.prepareToken)(token);
return [
// Shared
genSharedButtonStyle(buttonToken),
// Size
genSizeBaseButtonStyle(buttonToken), genSizeSmallButtonStyle(buttonToken), genSizeLargeButtonStyle(buttonToken),
// Block
genBlockButtonStyle(buttonToken),
// Variant
(0, _variant.default)(buttonToken),
// Button Group
(0, _group.default)(buttonToken)];
}, _token.prepareComponentToken, {
unitless: {
fontWeight: true,
contentLineHeight: true,
contentLineHeightSM: true,
contentLineHeightLG: true
}
});
+258
View File
@@ -0,0 +1,258 @@
import type { CSSProperties } from 'react';
import type { FullToken, GenStyleFn, GetDefaultToken, PresetColorKey } from '../../theme/internal';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
/**
* @desc 文字字重
* @descEN Font weight of text
*/
fontWeight: CSSProperties['fontWeight'];
/**
* @desc 图标文字间距
* @descEN Gap between icon and text
*/
iconGap: CSSProperties['gap'];
/**
* @desc 默认按钮阴影
* @descEN Shadow of default button
*/
defaultShadow: string;
/**
* @desc 主要按钮阴影
* @descEN Shadow of primary button
*/
primaryShadow: string;
/**
* @desc 危险按钮阴影
* @descEN Shadow of danger button
*/
dangerShadow: string;
/**
* @desc 主要按钮文本颜色
* @descEN Text color of primary button
*/
primaryColor: string;
/**
* @desc 默认按钮文本颜色
* @descEN Text color of default button
*/
defaultColor: string;
/**
* @desc 默认按钮背景色
* @descEN Background color of default button
*/
defaultBg: string;
/**
* @desc 默认按钮边框颜色
* @descEN Border color of default button
*/
defaultBorderColor: string;
/**
* @desc 危险按钮文本颜色
* @descEN Text color of danger button
*/
dangerColor: string;
/**
* @desc 默认按钮悬浮态背景色
* @descEN Background color of default button when hover
*/
defaultHoverBg: string;
/**
* @desc 默认按钮悬浮态文本颜色
* @descEN Text color of default button when hover
*/
defaultHoverColor: string;
/**
* @desc 默认按钮悬浮态边框颜色
* @descEN Border color of default button
*/
defaultHoverBorderColor: string;
/**
* @desc 默认按钮激活态背景色
* @descEN Background color of default button when active
*/
defaultActiveBg: string;
/**
* @desc 默认按钮激活态文字颜色
* @descEN Text color of default button when active
*/
defaultActiveColor: string;
/**
* @desc 默认按钮激活态边框颜色
* @descEN Border color of default button when active
*/
defaultActiveBorderColor: string;
/**
* @deprecated use `colorBorderDisabled` instead
* @desc 禁用状态边框颜色
* @descEN Border color of disabled button
*/
borderColorDisabled: string;
/**
* @desc 默认幽灵按钮文本颜色
* @descEN Text color of default ghost button
*/
defaultGhostColor: string;
/**
* @desc 幽灵按钮背景色
* @descEN Background color of ghost button
*/
ghostBg: string;
/**
* @desc 默认幽灵按钮边框颜色
* @descEN Border color of default ghost button
*/
defaultGhostBorderColor: string;
/**
* @desc 主要填充按钮的浅色背景颜色
* @descEN Background color of primary filled button
*/
/**
* @desc 默认实心按钮的文本色
* @descEN Default text color for solid buttons.
*/
solidTextColor: string;
/**
* @desc 默认文本按钮的文本色
* @descEN Default text color for text buttons
*/
textTextColor: string;
/**
* @desc 默认文本按钮悬浮态文本颜色
* @descEN Default text color for text buttons on hover
*/
textTextHoverColor: string;
/**
* @desc 默认文本按钮激活态文字颜色
* @descEN Default text color for text buttons on active
*/
textTextActiveColor: string;
/**
* @desc 按钮横向内间距
* @descEN Horizontal padding of button
*/
paddingInline: CSSProperties['paddingInline'];
/**
* @desc 大号按钮横向内间距
* @descEN Horizontal padding of large button
*/
paddingInlineLG: CSSProperties['paddingInline'];
/**
* @desc 小号按钮横向内间距
* @descEN Horizontal padding of small button
*/
paddingInlineSM: CSSProperties['paddingInline'];
/**
* @desc 按钮纵向内间距
* @descEN Vertical padding of button
* @deprecated not used
*/
paddingBlock: CSSProperties['paddingBlock'];
/**
* @desc 大号按钮纵向内间距
* @descEN Vertical padding of large button
* @deprecated not used
*/
paddingBlockLG: CSSProperties['paddingBlock'];
/**
* @desc 小号按钮纵向内间距
* @descEN Vertical padding of small button
* @deprecated not used
*/
paddingBlockSM: CSSProperties['paddingBlock'];
/**
* @desc 只有图标的按钮图标尺寸
* @descEN Icon size of button which only contains icon
*/
onlyIconSize: number | string;
/**
* @desc 大号只有图标的按钮图标尺寸
* @descEN Icon size of large button which only contains icon
*/
onlyIconSizeLG: number | string;
/**
* @desc 小号只有图标的按钮图标尺寸
* @descEN Icon size of small button which only contains icon
*/
onlyIconSizeSM: number | string;
/**
* @desc 链接按钮悬浮态背景色
* @descEN Background color of link button when hover
*/
linkHoverBg: string;
/**
* @desc 文本按钮悬浮态背景色
* @descEN Background color of text button when hover
*/
textHoverBg: string;
/**
* @desc 按钮内容字体大小
* @descEN Font size of button content
*/
contentFontSize: number;
/**
* @desc 大号按钮内容字体大小
* @descEN Font size of large button content
*/
contentFontSizeLG: number;
/**
* @desc 小号按钮内容字体大小
* @descEN Font size of small button content
*/
contentFontSizeSM: number;
/**
* @desc 按钮内容字体行高
* @descEN Line height of button content
* @deprecated not used
*/
contentLineHeight: number;
/**
* @desc 大号按钮内容字体行高
* @descEN Line height of large button content
* @deprecated not used
*/
contentLineHeightLG: number;
/**
* @desc 小号按钮内容字体行高
* @descEN Line height of small button content
* @deprecated not used
*/
contentLineHeightSM: number;
/**
* @desc type='default' 禁用状态下的背景颜色
* @descE background color when type='default' is disabled
*/
defaultBgDisabled: string;
/**
* @desc type='dashed' 禁用状态下的背景颜色
* @descE background color when type='dashed' is disabled
*/
dashedBgDisabled: string;
}
type ShadowColorMap = {
[Key in `${PresetColorKey}ShadowColor`]: string;
};
type PresetColorHoverActiveMap = {
[Key in `${PresetColorKey}Hover` | `${PresetColorKey}Active`]: string;
};
type GroupToken = {};
export interface ButtonToken extends FullToken<'Button'>, ShadowColorMap, PresetColorHoverActiveMap, GroupToken {
/**
* @desc 按钮横向内边距
* @descEN Horizontal padding of button
*/
buttonPaddingHorizontal: CSSProperties['paddingInline'];
/**
* @desc 按钮纵向内边距
* @descEN Vertical padding of button
*/
buttonPaddingVertical: CSSProperties['paddingBlock'];
/**
* @desc 只有图标的按钮图标尺寸
* @descEN Icon size of button which only contains icon
*/
buttonIconOnlyFontSize: number | string;
}
export declare const prepareToken: (token: Parameters<GenStyleFn<"Button">>[0]) => ButtonToken;
export declare const prepareComponentToken: GetDefaultToken<'Button'>;
export {};
+92
View File
@@ -0,0 +1,92 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.prepareToken = exports.prepareComponentToken = void 0;
var _cssinjs = require("@ant-design/cssinjs");
var _color = require("../../color-picker/color");
var _ColorPresets = require("../../color-picker/components/ColorPresets");
var _interface = require("../../theme/interface");
var _internal = require("../../theme/internal");
var _getAlphaColor = _interopRequireDefault(require("../../theme/util/getAlphaColor"));
const prepareToken = token => {
const {
paddingInline,
onlyIconSize,
borderColorDisabled
} = token;
const buttonToken = (0, _internal.mergeToken)(token, {
buttonPaddingHorizontal: paddingInline,
buttonPaddingVertical: 0,
buttonIconOnlyFontSize: onlyIconSize,
colorBorderDisabled: borderColorDisabled
});
return buttonToken;
};
exports.prepareToken = prepareToken;
const prepareComponentToken = token => {
const contentFontSize = token.contentFontSize ?? token.fontSize;
const contentFontSizeSM = token.contentFontSizeSM ?? token.fontSize;
const contentFontSizeLG = token.contentFontSizeLG ?? token.fontSizeLG;
const contentLineHeight = token.contentLineHeight ?? (0, _internal.getLineHeight)(contentFontSize);
const contentLineHeightSM = token.contentLineHeightSM ?? (0, _internal.getLineHeight)(contentFontSizeSM);
const contentLineHeightLG = token.contentLineHeightLG ?? (0, _internal.getLineHeight)(contentFontSizeLG);
const solidTextColor = (0, _ColorPresets.isBright)(new _color.AggregationColor(token.colorBgSolid), '#fff') ? '#000' : '#fff';
const shadowColorTokens = _interface.PresetColors.reduce((prev, colorKey) => ({
...prev,
[`${colorKey}ShadowColor`]: `0 ${(0, _cssinjs.unit)(token.controlOutlineWidth)} 0 ${(0, _getAlphaColor.default)(token[`${colorKey}1`], token.colorBgContainer)}`
}), {});
const defaultBgDisabled = token.colorBgContainerDisabled;
const dashedBgDisabled = token.colorBgContainerDisabled;
return {
...shadowColorTokens,
fontWeight: 400,
iconGap: token.marginXS,
defaultShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
primaryShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,
dangerShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
primaryColor: token.colorTextLightSolid,
dangerColor: token.colorTextLightSolid,
borderColorDisabled: token.colorBorderDisabled,
defaultGhostColor: token.colorBgContainer,
ghostBg: 'transparent',
defaultGhostBorderColor: token.colorBgContainer,
paddingInline: token.paddingContentHorizontal - token.lineWidth,
paddingInlineLG: token.paddingContentHorizontal - token.lineWidth,
paddingInlineSM: 8 - token.lineWidth,
onlyIconSize: 'inherit',
onlyIconSizeSM: 'inherit',
onlyIconSizeLG: 'inherit',
groupBorderColor: token.colorPrimaryHover,
linkHoverBg: 'transparent',
textTextColor: token.colorText,
textTextHoverColor: token.colorText,
textTextActiveColor: token.colorText,
textHoverBg: token.colorFillTertiary,
defaultColor: token.colorText,
defaultBg: token.colorBgContainer,
defaultBorderColor: token.colorBorder,
defaultBorderColorDisabled: token.colorBorder,
defaultHoverBg: token.colorBgContainer,
defaultHoverColor: token.colorPrimaryHover,
defaultHoverBorderColor: token.colorPrimaryHover,
defaultActiveBg: token.colorBgContainer,
defaultActiveColor: token.colorPrimaryActive,
defaultActiveBorderColor: token.colorPrimaryActive,
solidTextColor,
contentFontSize,
contentFontSizeSM,
contentFontSizeLG,
contentLineHeight,
contentLineHeightSM,
contentLineHeightLG,
paddingBlock: Math.max((token.controlHeight - contentFontSize * contentLineHeight) / 2 - token.lineWidth, 0),
paddingBlockSM: Math.max((token.controlHeightSM - contentFontSizeSM * contentLineHeightSM) / 2 - token.lineWidth, 0),
paddingBlockLG: Math.max((token.controlHeightLG - contentFontSizeLG * contentLineHeightLG) / 2 - token.lineWidth, 0),
defaultBgDisabled,
dashedBgDisabled
};
};
exports.prepareComponentToken = prepareComponentToken;
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { GenerateStyle } from '../../theme/interface';
import type { ButtonToken } from './token';
declare const genVariantStyle: GenerateStyle<ButtonToken, CSSObject>;
export default genVariantStyle;
+275
View File
@@ -0,0 +1,275 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _interface = require("../../theme/interface");
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const genVariantStyle = token => {
const {
componentCls,
antCls,
lineWidth
} = token;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'btn');
return {
[componentCls]: [
// ==============================================================
// == Variable ==
// ==============================================================
{
// Border
[varName('border-width')]: lineWidth,
[varName('border-color')]: '#000',
[varName('border-color-hover')]: varRef('border-color'),
[varName('border-color-active')]: varRef('border-color'),
[varName('border-color-disabled')]: varRef('border-color'),
[varName('border-style')]: 'solid',
// Text
[varName('text-color')]: '#000',
[varName('text-color-hover')]: varRef('text-color'),
[varName('text-color-active')]: varRef('text-color'),
[varName('text-color-disabled')]: varRef('text-color'),
// Background
[varName('bg-color')]: '#ddd',
[varName('bg-color-hover')]: varRef('bg-color'),
[varName('bg-color-active')]: varRef('bg-color'),
[varName('bg-color-disabled')]: token.colorBgContainerDisabled,
[varName('bg-color-container')]: token.colorBgContainer,
// Shadow
[varName('shadow')]: 'none'
},
// ==============================================================
// == Template ==
// ==============================================================
{
// Basic
border: [varRef('border-width'), varRef('border-style'), varRef('border-color')].join(' '),
color: varRef('text-color'),
backgroundColor: varRef('bg-color'),
// Status
[`&:not(:disabled):not(${componentCls}-disabled)`]: {
// Hover
'&:hover': {
border: [varRef('border-width'), varRef('border-style'), varRef('border-color-hover')].join(' '),
color: varRef('text-color-hover'),
backgroundColor: varRef('bg-color-hover')
},
// Active
'&:active': {
border: [varRef('border-width'), varRef('border-style'), varRef('border-color-active')].join(' '),
color: varRef('text-color-active'),
backgroundColor: varRef('bg-color-active')
}
}
},
// ==============================================================
// == Variants ==
// ==============================================================
{
// >>>>> Solid
[`&${componentCls}-variant-solid`]: {
// Solid Variables
[varName('solid-bg-color')]: varRef('color-base'),
[varName('solid-bg-color-hover')]: varRef('color-hover'),
[varName('solid-bg-color-active')]: varRef('color-active'),
// Variables
[varName('border-color')]: 'transparent',
[varName('text-color')]: token.colorTextLightSolid,
[varName('bg-color')]: varRef('solid-bg-color'),
[varName('bg-color-hover')]: varRef('solid-bg-color-hover'),
[varName('bg-color-active')]: varRef('solid-bg-color-active'),
// Box Shadow
boxShadow: varRef('shadow')
},
// >>>>> Outlined & Dashed
[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
[varName('border-color')]: varRef('color-base'),
[varName('border-color-hover')]: varRef('color-hover'),
[varName('border-color-active')]: varRef('color-active'),
[varName('bg-color')]: varRef('bg-color-container'),
[varName('text-color')]: varRef('color-base'),
[varName('text-color-hover')]: varRef('color-hover'),
[varName('text-color-active')]: varRef('color-active'),
// Box Shadow
boxShadow: varRef('shadow')
},
// >>>>> Dashed
[`&${componentCls}-variant-dashed`]: {
[varName('border-style')]: 'dashed',
[varName('bg-color-disabled')]: token.dashedBgDisabled
},
// >>>>> Filled
[`&${componentCls}-variant-filled`]: {
[varName('border-color')]: 'transparent',
[varName('text-color')]: varRef('color-base'),
[varName('bg-color')]: varRef('color-light'),
[varName('bg-color-hover')]: varRef('color-light-hover'),
[varName('bg-color-active')]: varRef('color-light-active')
},
// >>>>> Text & Link
[`&${componentCls}-variant-text, &${componentCls}-variant-link`]: {
[varName('border-color')]: 'transparent',
[varName('text-color')]: varRef('color-base'),
[varName('text-color-hover')]: varRef('color-hover'),
[varName('text-color-active')]: varRef('color-active'),
[varName('bg-color')]: 'transparent',
[varName('bg-color-hover')]: 'transparent',
[varName('bg-color-active')]: 'transparent',
[`&:disabled, &${token.componentCls}-disabled`]: {
background: 'transparent',
borderColor: 'transparent'
}
},
// >>>>> Text
[`&${componentCls}-variant-text`]: {
[varName('bg-color-hover')]: varRef('color-light'),
[varName('bg-color-active')]: varRef('color-light-active')
}
},
// ==============================================================
// == Colors ==
// ==============================================================
{
// ======================== By Default ========================
// >>>>> Link
[`&${componentCls}-variant-link`]: {
[varName('color-base')]: token.colorLink,
[varName('color-hover')]: token.colorLinkHover,
[varName('color-active')]: token.colorLinkActive,
[varName('bg-color-hover')]: token.linkHoverBg
},
// ======================== Compatible ========================
// >>>>> Primary
[`&${componentCls}-color-primary`]: {
[varName('color-base')]: token.colorPrimary,
[varName('color-hover')]: token.colorPrimaryHover,
[varName('color-active')]: token.colorPrimaryActive,
[varName('color-light')]: token.colorPrimaryBg,
[varName('color-light-hover')]: token.colorPrimaryBgHover,
[varName('color-light-active')]: token.colorPrimaryBorder,
[varName('shadow')]: token.primaryShadow,
[`&${componentCls}-variant-solid`]: {
[varName('text-color')]: token.primaryColor,
[varName('text-color-hover')]: varRef('text-color'),
[varName('text-color-active')]: varRef('text-color')
}
},
// >>>>> Danger
[`&${componentCls}-color-dangerous`]: {
[varName('color-base')]: token.colorError,
[varName('color-hover')]: token.colorErrorHover,
[varName('color-active')]: token.colorErrorActive,
[varName('color-light')]: token.colorErrorBg,
[varName('color-light-hover')]: token.colorErrorBgFilledHover,
[varName('color-light-active')]: token.colorErrorBgActive,
[varName('shadow')]: token.dangerShadow,
[`&${componentCls}-variant-solid`]: {
[varName('text-color')]: token.dangerColor,
[varName('text-color-hover')]: varRef('text-color'),
[varName('text-color-active')]: varRef('text-color')
}
},
// >>>>> Default
[`&${componentCls}-color-default`]: {
[varName('solid-bg-color')]: token.colorBgSolid,
[varName('solid-bg-color-hover')]: token.colorBgSolidHover,
[varName('solid-bg-color-active')]: token.colorBgSolidActive,
[varName('color-base')]: token.defaultBorderColor,
[varName('color-hover')]: token.defaultHoverBorderColor,
[varName('color-active')]: token.defaultActiveBorderColor,
[varName('color-light')]: token.colorFillTertiary,
[varName('color-light-hover')]: token.colorFillSecondary,
[varName('color-light-active')]: token.colorFill,
[varName('text-color')]: token.defaultColor,
[varName('text-color-hover')]: token.defaultHoverColor,
[varName('text-color-active')]: token.defaultActiveColor,
[varName('shadow')]: token.defaultShadow,
[`&${componentCls}-variant-outlined`]: {
[varName('bg-color-disabled')]: token.defaultBgDisabled
},
[`&${componentCls}-variant-solid`]: {
[varName('text-color')]: token.solidTextColor,
[varName('text-color-hover')]: varRef('text-color'),
[varName('text-color-active')]: varRef('text-color')
},
[`&${componentCls}-variant-filled, &${componentCls}-variant-text`]: {
[varName('text-color-hover')]: varRef('text-color'),
[varName('text-color-active')]: varRef('text-color')
},
[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
[varName('text-color')]: token.defaultColor,
[varName('text-color-hover')]: token.defaultHoverColor,
[varName('text-color-active')]: token.defaultActiveColor,
[varName('bg-color-container')]: token.defaultBg,
[varName('bg-color-hover')]: token.defaultHoverBg,
[varName('bg-color-active')]: token.defaultActiveBg
},
[`&${componentCls}-variant-text`]: {
[varName('text-color')]: token.textTextColor,
[varName('text-color-hover')]: token.textTextHoverColor,
[varName('text-color-active')]: token.textTextActiveColor,
[varName('bg-color-hover')]: token.textHoverBg
},
[`&${componentCls}-background-ghost`]: {
[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
[varName('text-color')]: token.defaultGhostColor,
[varName('border-color')]: token.defaultGhostBorderColor
}
}
}
},
// >>>>> Preset Colors
_interface.PresetColors.map(colorKey => {
const darkColor = token[`${colorKey}6`];
const lightColor = token[`${colorKey}1`];
const hoverColor = token[`${colorKey}Hover`];
const lightHoverColor = token[`${colorKey}2`];
const lightActiveColor = token[`${colorKey}3`];
const activeColor = token[`${colorKey}Active`];
const shadowColor = token[`${colorKey}ShadowColor`];
return {
[`&${componentCls}-color-${colorKey}`]: {
[varName('color-base')]: darkColor,
[varName('color-hover')]: hoverColor,
[varName('color-active')]: activeColor,
[varName('color-light')]: lightColor,
[varName('color-light-hover')]: lightHoverColor,
[varName('color-light-active')]: lightActiveColor,
[varName('shadow')]: shadowColor
}
};
}),
// ==============================================================
// == Disabled ==
// ==============================================================
{
// Disabled
[`&:disabled, &${token.componentCls}-disabled`]: {
cursor: 'not-allowed',
borderColor: token.colorBorderDisabled,
background: varRef('bg-color-disabled'),
color: token.colorTextDisabled,
boxShadow: 'none'
}
},
// ==============================================================
// == Ghost ==
// ==============================================================
{
// Ghost
[`&${componentCls}-background-ghost`]: {
[varName('bg-color')]: token.ghostBg,
[varName('bg-color-hover')]: token.ghostBg,
[varName('bg-color-active')]: token.ghostBg,
[varName('shadow')]: 'none',
[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
[varName('bg-color-hover')]: token.ghostBg,
[varName('bg-color-active')]: token.ghostBg
}
}
}]
};
};
var _default = exports.default = genVariantStyle;