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
+118
View File
@@ -0,0 +1,118 @@
import * as React from 'react';
import type { BaseSelectRef, SelectProps as RcSelectProps } from '@rc-component/select';
import { OptGroup, Option } from '@rc-component/select';
import type { OptionProps } from '@rc-component/select/lib/Option';
import type { BaseOptionType, DefaultOptionType } from '@rc-component/select/lib/Select';
import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
import type { SelectCommonPlacement } from '../_util/motion';
import type { InputStatus } from '../_util/statusUtils';
import type { Variant } from '../config-provider';
import type { SizeType } from '../config-provider/SizeContext';
type RawValue = string | number;
export type { BaseOptionType, DefaultOptionType, OptionProps, BaseSelectRef as RefSelectProps };
export interface LabeledValue {
key?: string;
value: RawValue;
label: React.ReactNode;
}
export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;
export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'mode'> {
rootClassName?: string;
prefix?: React.ReactNode;
suffixIcon?: React.ReactNode;
size?: SizeType;
disabled?: boolean;
mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE' | 'combobox';
/** @deprecated Use `variant` instead. */
bordered?: boolean;
/**
* @deprecated `showArrow` is deprecated which will be removed in next major version. It will be a
* default behavior, you can hide it by setting `suffixIcon` to null.
*/
showArrow?: boolean;
/**
* @since 5.13.0
* @default "outlined"
*/
variant?: Variant;
classNames?: SelectSemanticClassNames & {
popup?: SelectPopupSemanticClassNames;
};
styles?: SelectSemanticStyles & {
popup?: SelectPopupSemanticStyles;
};
}
export type SelectSemanticName = keyof SelectSemanticClassNames & keyof SelectSemanticStyles;
export type SelectSemanticClassNames = {
root?: string;
prefix?: string;
suffix?: string;
input?: string;
placeholder?: string;
content?: string;
item?: string;
itemContent?: string;
itemRemove?: string;
clear?: string;
};
export type SelectSemanticStyles = {
root?: React.CSSProperties;
prefix?: React.CSSProperties;
suffix?: React.CSSProperties;
input?: React.CSSProperties;
placeholder?: React.CSSProperties;
content?: React.CSSProperties;
item?: React.CSSProperties;
itemContent?: React.CSSProperties;
itemRemove?: React.CSSProperties;
clear?: React.CSSProperties;
};
export type SelectPopupSemanticName = keyof SelectPopupSemanticClassNames & keyof SelectPopupSemanticStyles;
export type SelectPopupSemanticClassNames = {
root?: string;
listItem?: string;
list?: string;
};
export type SelectPopupSemanticStyles = {
root?: React.CSSProperties;
listItem?: React.CSSProperties;
list?: React.CSSProperties;
};
export type SelectClassNamesType = SemanticClassNamesType<SelectProps, SelectSemanticClassNames, {
popup?: SelectPopupSemanticClassNames;
}>;
export type SelectStylesType = SemanticStylesType<SelectProps, SelectSemanticStyles, {
popup?: SelectPopupSemanticStyles;
}>;
export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<InternalSelectProps<ValueType, OptionType>, 'mode' | 'getInputElement' | 'getRawInputElement' | 'backfill' | 'placement' | 'dropdownClassName' | 'dropdownStyle'> {
placement?: SelectCommonPlacement;
mode?: 'multiple' | 'tags';
status?: InputStatus;
/** @deprecated Please use `classNames.popup.root` instead */
popupClassName?: string;
/** @deprecated Please use `classNames.popup.root` instead */
dropdownClassName?: string;
/** @deprecated Please use `styles.popup` instead */
dropdownStyle?: React.CSSProperties;
/** @deprecated Please use `popupRender` instead */
dropdownRender?: SelectProps['popupRender'];
/** @deprecated Please use `onOpenChange` instead */
onDropdownVisibleChange?: SelectProps['onPopupVisibleChange'];
/** @deprecated Please use `popupMatchSelectWidth` instead */
dropdownMatchSelectWidth?: boolean | number;
popupMatchSelectWidth?: boolean | number;
styles?: SelectStylesType;
classNames?: SelectClassNamesType;
onOpenChange?: (visible: boolean) => void;
}
declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
displayName?: string;
SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
/** @deprecated Please use `options` instead. */
Option: typeof Option;
/** @deprecated Please use `options` instead. */
OptGroup: typeof OptGroup;
_InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
};
declare const PurePanel: (props: import("../_util/type").AnyObject) => React.JSX.Element;
export default Select;
+276
View File
@@ -0,0 +1,276 @@
"use strict";
"use client";
// TODO: 4.0 - codemod should help to change `filterOption` to support node props.
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 _select = _interopRequireWildcard(require("@rc-component/select"));
var _util = require("@rc-component/util");
var _clsx = require("clsx");
var _hooks = require("../_util/hooks");
var _motion = require("../_util/motion");
var _PurePanel = _interopRequireDefault(require("../_util/PurePanel"));
var _statusUtils = require("../_util/statusUtils");
var _warning = require("../_util/warning");
var _configProvider = require("../config-provider");
var _context = require("../config-provider/context");
var _defaultRenderEmpty = _interopRequireDefault(require("../config-provider/defaultRenderEmpty"));
var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
var _context2 = require("../form/context");
var _useVariants = _interopRequireDefault(require("../form/hooks/useVariants"));
var _Compact = require("../space/Compact");
var _internal = require("../theme/internal");
var _mergedBuiltinPlacements = _interopRequireDefault(require("./mergedBuiltinPlacements"));
var _style = _interopRequireDefault(require("./style"));
var _useIcons = _interopRequireDefault(require("./useIcons"));
var _usePopupRender = _interopRequireDefault(require("./usePopupRender"));
var _useShowArrow = _interopRequireDefault(require("./useShowArrow"));
const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
const InternalSelect = (props, ref) => {
const {
prefixCls: customizePrefixCls,
bordered,
className,
rootClassName,
getPopupContainer,
popupClassName,
dropdownClassName,
listHeight = 256,
placement,
listItemHeight: customListItemHeight,
size: customizeSize,
disabled: customDisabled,
notFoundContent,
status: customStatus,
builtinPlacements,
dropdownMatchSelectWidth,
popupMatchSelectWidth,
direction: propDirection,
style,
allowClear,
variant: customizeVariant,
popupStyle,
dropdownStyle,
transitionName,
tagRender,
maxCount,
prefix,
dropdownRender,
/**
* @since 5.25.0
*/
popupRender,
onDropdownVisibleChange,
onOpenChange,
styles,
classNames,
...rest
} = props;
const {
getPopupContainer: getContextPopupContainer,
getPrefixCls,
renderEmpty,
direction: contextDirection,
virtual,
popupMatchSelectWidth: contextPopupMatchSelectWidth,
popupOverflow
} = React.useContext(_configProvider.ConfigContext);
const {
showSearch,
style: contextStyle,
styles: contextStyles,
className: contextClassName,
classNames: contextClassNames
} = (0, _context.useComponentConfig)('select');
const [, token] = (0, _internal.useToken)();
const listItemHeight = customListItemHeight ?? token?.controlHeight;
const prefixCls = getPrefixCls('select', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const direction = propDirection ?? contextDirection;
const {
compactSize,
compactItemClassnames
} = (0, _Compact.useCompactItemContext)(prefixCls, direction);
const [variant, enableVariantCls] = (0, _useVariants.default)('select', customizeVariant, bordered);
const rootCls = (0, _useCSSVarCls.default)(prefixCls);
const [hashId, cssVarCls] = (0, _style.default)(prefixCls, rootCls);
const mode = React.useMemo(() => {
const {
mode: m
} = props;
if (m === 'combobox') {
return undefined;
}
if (m === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
return 'combobox';
}
return m;
}, [props.mode]);
const isMultiple = mode === 'multiple' || mode === 'tags';
const showSuffixIcon = (0, _useShowArrow.default)(props.suffixIcon, props.showArrow);
const mergedPopupMatchSelectWidth = popupMatchSelectWidth ?? dropdownMatchSelectWidth ?? contextPopupMatchSelectWidth;
const mergedPopupRender = (0, _usePopupRender.default)(popupRender || dropdownRender);
const mergedOnOpenChange = onOpenChange || onDropdownVisibleChange;
// ===================== Form Status =====================
const {
status: contextStatus,
hasFeedback,
isFormItemInput,
feedbackIcon
} = React.useContext(_context2.FormItemInputContext);
const mergedStatus = (0, _statusUtils.getMergedStatus)(contextStatus, customStatus);
// ===================== Empty =====================
let mergedNotFound;
if (notFoundContent !== undefined) {
mergedNotFound = notFoundContent;
} else if (mode === 'combobox') {
mergedNotFound = null;
} else {
mergedNotFound = renderEmpty?.('Select') || /*#__PURE__*/React.createElement(_defaultRenderEmpty.default, {
componentName: "Select"
});
}
// ===================== Icons =====================
const {
suffixIcon,
itemIcon,
removeIcon,
clearIcon
} = (0, _useIcons.default)({
...rest,
multiple: isMultiple,
hasFeedback,
feedbackIcon,
showSuffixIcon,
prefixCls,
componentName: 'Select'
});
const mergedAllowClear = allowClear === true ? {
clearIcon
} : allowClear;
const selectProps = (0, _util.omit)(rest, ['suffixIcon', 'itemIcon']);
const mergedSize = (0, _useSize.default)(ctx => customizeSize ?? compactSize ?? ctx);
// ===================== Disabled =====================
const disabled = React.useContext(_DisabledContext.default);
const mergedDisabled = customDisabled ?? disabled;
// ========== Merged Props for Semantic ==================
const mergedProps = {
...props,
variant,
status: mergedStatus,
disabled: mergedDisabled,
size: mergedSize
};
const [mergedClassNames, mergedStyles] = (0, _hooks.useMergeSemantic)([contextClassNames, classNames], [contextStyles, styles], {
props: mergedProps
}, {
popup: {
_default: 'root'
}
});
const mergedPopupClassName = (0, _clsx.clsx)(mergedClassNames.popup?.root, popupClassName, dropdownClassName, {
[`${prefixCls}-dropdown-${direction}`]: direction === 'rtl'
}, rootClassName, cssVarCls, rootCls, hashId);
const mergedPopupStyle = {
...mergedStyles.popup?.root,
...(popupStyle ?? dropdownStyle)
};
const mergedClassName = (0, _clsx.clsx)({
[`${prefixCls}-lg`]: mergedSize === 'large',
[`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-${variant}`]: enableVariantCls,
[`${prefixCls}-in-form-item`]: isFormItemInput
}, (0, _statusUtils.getStatusClassNames)(prefixCls, mergedStatus, hasFeedback), compactItemClassnames, contextClassName, className, mergedClassNames.root, rootClassName, cssVarCls, rootCls, hashId);
// ===================== Placement =====================
const memoPlacement = React.useMemo(() => {
if (placement !== undefined) {
return placement;
}
return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
}, [placement, direction]);
// ====================== Warning ======================
if (process.env.NODE_ENV !== 'production') {
const warning = (0, _warning.devUseWarning)('Select');
const deprecatedProps = {
dropdownMatchSelectWidth: 'popupMatchSelectWidth',
dropdownStyle: 'styles.popup.root',
dropdownClassName: 'classNames.popup.root',
popupClassName: 'classNames.popup.root',
dropdownRender: 'popupRender',
onDropdownVisibleChange: 'onOpenChange',
bordered: 'variant'
};
Object.entries(deprecatedProps).forEach(([oldProp, newProp]) => {
warning.deprecated(!(oldProp in props), oldProp, newProp);
});
process.env.NODE_ENV !== "production" ? warning(!('showArrow' in props), 'deprecated', '`showArrow` is deprecated which will be removed in next major version. It will be a default behavior, you can hide it by setting `suffixIcon` to null.') : void 0;
process.env.NODE_ENV !== "production" ? warning(!(typeof maxCount !== 'undefined' && !isMultiple), 'usage', '`maxCount` only works with mode `multiple` or `tags`') : void 0;
}
// ====================== zIndex =========================
const [zIndex] = (0, _hooks.useZIndex)('SelectLike', mergedStyles.popup?.root?.zIndex ?? mergedPopupStyle?.zIndex);
// ====================== Render =======================
return /*#__PURE__*/React.createElement(_select.default, {
ref: ref,
virtual: virtual,
classNames: mergedClassNames,
styles: mergedStyles,
showSearch: showSearch,
...selectProps,
style: {
...mergedStyles.root,
...contextStyle,
...style
},
popupMatchSelectWidth: mergedPopupMatchSelectWidth,
transitionName: (0, _motion.getTransitionName)(rootPrefixCls, 'slide-up', transitionName),
builtinPlacements: (0, _mergedBuiltinPlacements.default)(builtinPlacements, popupOverflow),
listHeight: listHeight,
listItemHeight: listItemHeight,
mode: mode,
prefixCls: prefixCls,
placement: memoPlacement,
direction: direction,
prefix: prefix,
suffixIcon: suffixIcon,
menuItemSelectedIcon: itemIcon,
removeIcon: removeIcon,
allowClear: mergedAllowClear,
notFoundContent: mergedNotFound,
className: mergedClassName,
getPopupContainer: getPopupContainer || getContextPopupContainer,
popupClassName: mergedPopupClassName,
disabled: mergedDisabled,
popupStyle: {
...mergedStyles.popup?.root,
...mergedPopupStyle,
zIndex
},
maxCount: isMultiple ? maxCount : undefined,
tagRender: isMultiple ? tagRender : undefined,
popupRender: mergedPopupRender,
onPopupVisibleChange: mergedOnOpenChange
});
};
if (process.env.NODE_ENV !== 'production') {
InternalSelect.displayName = 'Select';
}
const Select = /*#__PURE__*/React.forwardRef(InternalSelect);
// We don't care debug panel
/* istanbul ignore next */
const PurePanel = (0, _PurePanel.default)(Select, 'popupAlign');
Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
Select.Option = _select.Option;
Select.OptGroup = _select.OptGroup;
Select._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
if (process.env.NODE_ENV !== 'production') {
Select.displayName = 'Select';
}
var _default = exports.default = Select;
@@ -0,0 +1,4 @@
import type { BuildInPlacements } from '@rc-component/trigger';
import type { PopupOverflow } from '../config-provider/context';
declare function mergedBuiltinPlacements(buildInPlacements?: BuildInPlacements, popupOverflow?: PopupOverflow): BuildInPlacements;
export default mergedBuiltinPlacements;
@@ -0,0 +1,44 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
const getBuiltInPlacements = popupOverflow => {
const htmlRegion = popupOverflow === 'scroll' ? 'scroll' : 'visible';
const sharedConfig = {
overflow: {
adjustX: true,
adjustY: true,
shiftY: true
},
htmlRegion,
dynamicInset: true
};
return {
bottomLeft: {
...sharedConfig,
points: ['tl', 'bl'],
offset: [0, 4]
},
bottomRight: {
...sharedConfig,
points: ['tr', 'br'],
offset: [0, 4]
},
topLeft: {
...sharedConfig,
points: ['bl', 'tl'],
offset: [0, -4]
},
topRight: {
...sharedConfig,
points: ['br', 'tr'],
offset: [0, -4]
}
};
};
function mergedBuiltinPlacements(buildInPlacements, popupOverflow) {
return buildInPlacements || getBuiltInPlacements(popupOverflow);
}
var _default = exports.default = mergedBuiltinPlacements;
+4
View File
@@ -0,0 +1,4 @@
import type { GenerateStyle } from '../../theme/internal';
import type { SelectToken } from './token';
declare const genSingleStyle: GenerateStyle<SelectToken>;
export default genSingleStyle;
+152
View File
@@ -0,0 +1,152 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _style = require("../../style");
var _motion = require("../../style/motion");
const genItemStyle = token => {
const {
optionHeight,
optionFontSize,
optionLineHeight,
optionPadding
} = token;
return {
position: 'relative',
display: 'block',
minHeight: optionHeight,
padding: optionPadding,
color: token.colorText,
fontWeight: 'normal',
fontSize: optionFontSize,
lineHeight: optionLineHeight,
boxSizing: 'border-box'
};
};
const genSingleStyle = token => {
const {
antCls,
componentCls
} = token;
const selectItemCls = `${componentCls}-item`;
const slideUpEnterActive = `&${antCls}-slide-up-enter${antCls}-slide-up-enter-active`;
const slideUpAppearActive = `&${antCls}-slide-up-appear${antCls}-slide-up-appear-active`;
const slideUpLeaveActive = `&${antCls}-slide-up-leave${antCls}-slide-up-leave-active`;
const dropdownPlacementCls = `${componentCls}-dropdown-placement-`;
const selectedItemCls = `${selectItemCls}-option-selected`;
return [{
[`${componentCls}-dropdown`]: {
// ========================== Popup ==========================
...(0, _style.resetComponent)(token),
position: 'absolute',
top: -9999,
zIndex: token.zIndexPopup,
boxSizing: 'border-box',
padding: token.paddingXXS,
overflow: 'hidden',
fontSize: token.fontSize,
// Fix select render lag of long text in chrome
// https://github.com/ant-design/ant-design/issues/11456
// https://github.com/ant-design/ant-design/issues/11843
fontVariant: 'initial',
backgroundColor: token.colorBgElevated,
borderRadius: token.borderRadiusLG,
outline: 'none',
boxShadow: token.boxShadowSecondary,
[`
${slideUpEnterActive}${dropdownPlacementCls}bottomLeft,
${slideUpAppearActive}${dropdownPlacementCls}bottomLeft
`]: {
animationName: _motion.slideUpIn
},
[`
${slideUpEnterActive}${dropdownPlacementCls}topLeft,
${slideUpAppearActive}${dropdownPlacementCls}topLeft,
${slideUpEnterActive}${dropdownPlacementCls}topRight,
${slideUpAppearActive}${dropdownPlacementCls}topRight
`]: {
animationName: _motion.slideDownIn
},
[`${slideUpLeaveActive}${dropdownPlacementCls}bottomLeft`]: {
animationName: _motion.slideUpOut
},
[`
${slideUpLeaveActive}${dropdownPlacementCls}topLeft,
${slideUpLeaveActive}${dropdownPlacementCls}topRight
`]: {
animationName: _motion.slideDownOut
},
'&-hidden': {
display: 'none'
},
[selectItemCls]: {
...genItemStyle(token),
cursor: 'pointer',
transition: `background-color ${token.motionDurationSlow} ease`,
borderRadius: token.borderRadiusSM,
// =========== Group ============
'&-group': {
color: token.colorTextDescription,
fontSize: token.fontSizeSM,
cursor: 'default'
},
// =========== Option ===========
'&-option': {
display: 'flex',
'&-content': {
flex: 'auto',
..._style.textEllipsis
},
'&-state': {
flex: 'none',
display: 'flex',
alignItems: 'center'
},
[`&-active:not(${selectItemCls}-option-disabled)`]: {
backgroundColor: token.optionActiveBg
},
[`&-selected:not(${selectItemCls}-option-disabled)`]: {
color: token.optionSelectedColor,
fontWeight: token.optionSelectedFontWeight,
backgroundColor: token.optionSelectedBg,
[`${selectItemCls}-option-state`]: {
color: token.colorPrimary
}
},
'&-disabled': {
[`&${selectItemCls}-option-selected`]: {
backgroundColor: token.colorBgContainerDisabled
},
color: token.colorTextDisabled,
cursor: 'not-allowed'
},
'&-grouped': {
paddingInlineStart: token.calc(token.controlPaddingHorizontal).mul(2).equal()
}
},
'&-empty': {
...genItemStyle(token),
color: token.colorTextDisabled
}
},
// https://github.com/ant-design/ant-design/pull/46646
[`${selectedItemCls}:has(+ ${selectedItemCls})`]: {
borderEndStartRadius: 0,
borderEndEndRadius: 0,
[`& + ${selectedItemCls}`]: {
borderStartStartRadius: 0,
borderStartEndRadius: 0
}
},
// =========================== RTL ===========================
'&-rtl': {
direction: 'rtl'
}
}
},
// Follow code may reuse in other components
(0, _motion.initSlideMotion)(token, 'slide-up'), (0, _motion.initSlideMotion)(token, 'slide-down'), (0, _motion.initMoveMotion)(token, 'move-up'), (0, _motion.initMoveMotion)(token, 'move-down')];
};
var _default = exports.default = genSingleStyle;
+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;
+146
View File
@@ -0,0 +1,146 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _style = require("../../style");
var _compactItem = require("../../style/compact-item");
var _internal = require("../../theme/internal");
var _dropdown = _interopRequireDefault(require("./dropdown"));
var _selectInput = _interopRequireDefault(require("./select-input"));
var _token = require("./token");
// =============================== Base ===============================
const genBaseStyle = token => {
const {
antCls,
componentCls,
motionDurationMid,
inputPaddingHorizontalBase
} = token;
const hoverShowClearStyle = {
[`${componentCls}-clear`]: {
opacity: 1,
background: token.colorBgBase,
borderRadius: '50%'
}
};
return {
[componentCls]: {
...(0, _style.resetComponent)(token),
// ======================== Selection ========================
[`${componentCls}-selection-item`]: {
flex: 1,
fontWeight: 'normal',
position: 'relative',
userSelect: 'none',
..._style.textEllipsis,
// https://github.com/ant-design/ant-design/issues/40421
[`> ${antCls}-typography`]: {
display: 'inline'
}
},
// ========================= Prefix ==========================
[`${componentCls}-prefix`]: {
flex: 'none',
marginInlineEnd: token.selectAffixPadding
},
// ========================== Clear ==========================
[`${componentCls}-clear`]: {
position: 'absolute',
top: '50%',
insetInlineStart: 'auto',
insetInlineEnd: inputPaddingHorizontalBase,
zIndex: 1,
display: 'inline-block',
width: token.fontSizeIcon,
height: token.fontSizeIcon,
marginTop: token.calc(token.fontSizeIcon).mul(-1).div(2).equal(),
color: token.colorTextQuaternary,
fontSize: token.fontSizeIcon,
fontStyle: 'normal',
lineHeight: 1,
textAlign: 'center',
textTransform: 'none',
cursor: 'pointer',
opacity: 0,
transition: ['color', 'opacity'].map(prop => `${prop} ${motionDurationMid} ease`).join(', '),
textRendering: 'auto',
// https://github.com/ant-design/ant-design/issues/54205
// Force GPU compositing on Safari to prevent flickering on opacity/transform transitions
transform: 'translateZ(0)',
'&:before': {
display: 'block'
},
'&:hover': {
color: token.colorIcon
}
},
'@media(hover:none)': hoverShowClearStyle,
'&:hover': hoverShowClearStyle
},
// ========================= Feedback ==========================
[`${componentCls}-status`]: {
'&-error, &-warning, &-success, &-validating': {
[`&${componentCls}-has-feedback`]: {
[`${componentCls}-clear`]: {
insetInlineEnd: token.calc(inputPaddingHorizontalBase).add(token.fontSize).add(token.paddingXS).equal()
}
}
}
}
};
};
// ============================== Styles ==============================
const genSelectStyle = token => {
const {
componentCls
} = token;
return [{
[componentCls]: {
// ==================== In Form ====================
[`&${componentCls}-in-form-item`]: {
width: '100%'
}
}
},
// =====================================================
// == LTR ==
// =====================================================
// Base
genBaseStyle(token),
// Dropdown
(0, _dropdown.default)(token),
// =====================================================
// == RTL ==
// =====================================================
{
[`${componentCls}-rtl`]: {
direction: 'rtl'
}
},
// =====================================================
// == Space Compact ==
// =====================================================
(0, _compactItem.genCompactItemStyle)(token, {
focusElCls: `${componentCls}-focused`
})];
};
// ============================== Export ==============================
var _default = exports.default = (0, _internal.genStyleHooks)('Select', (token, {
rootPrefixCls
}) => {
const selectToken = (0, _internal.mergeToken)(token, {
rootPrefixCls,
inputPaddingHorizontalBase: token.calc(token.paddingSM).sub(token.lineWidth).equal(),
multipleSelectItemHeight: token.multipleItemHeight,
selectHeight: token.controlHeight
});
return [genSelectStyle(selectToken), (0, _selectInput.default)(selectToken)];
}, _token.prepareComponentToken, {
unitless: {
optionLineHeight: true,
optionSelectedFontWeight: true
}
});
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { GenerateStyle } from '../../theme/interface';
import type { SelectToken } from './token';
declare const genSelectInputCustomizeStyle: GenerateStyle<SelectToken, CSSObject>;
export default genSelectInputCustomizeStyle;
@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
const genSelectInputCustomizeStyle = token => {
const {
componentCls
} = token;
return {
[`&${componentCls}-customize`]: {
border: 0,
padding: 0,
fontSize: 'inherit',
lineHeight: 'inherit',
[`${componentCls}-placeholder`]: {
display: 'none'
},
[`${componentCls}-content`]: {
margin: 0,
padding: 0,
'&-value': {
display: 'none'
}
}
}
};
};
var _default = exports.default = genSelectInputCustomizeStyle;
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { GenerateStyle } from '../../theme/interface';
import type { SelectToken } from './token';
declare const genSelectInputMultipleStyle: GenerateStyle<SelectToken, CSSObject>;
export default genSelectInputMultipleStyle;
@@ -0,0 +1,143 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _style = require("../../style");
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const FIXED_INPUT_MIN_WIDTH = 4;
const genSelectInputMultipleStyle = token => {
const {
componentCls,
calc,
iconCls,
paddingXS,
paddingXXS,
INTERNAL_FIXED_ITEM_MARGIN,
lineWidth,
colorIcon,
colorIconHover,
inputPaddingHorizontalBase,
antCls
} = token;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'select');
return {
'&-multiple': {
[varName('multi-item-background')]: token.multipleItemBg,
[varName('multi-item-border-color')]: 'transparent',
[varName('multi-item-border-radius')]: token.borderRadiusSM,
[varName('multi-item-height')]: token.multipleItemHeight,
[varName('multi-padding-base')]: `calc((${varRef('height')} - ${varRef('multi-item-height')}) / 2)`,
[varName('multi-padding-vertical')]: `calc(${varRef('multi-padding-base')} - ${INTERNAL_FIXED_ITEM_MARGIN} - ${lineWidth})`,
[varName('multi-item-padding-horizontal')]: `calc(${inputPaddingHorizontalBase} - ${varRef('multi-padding-vertical')} - ${lineWidth} * 2)`,
// ========================================================
// == Base ==
// ========================================================
// ========================= Root =========================
paddingBlock: varRef('multi-padding-vertical'),
paddingInlineStart: `calc(${varRef('multi-padding-base')} - ${lineWidth})`,
// ======================== Prefix ========================
[`${componentCls}-prefix`]: {
marginInlineStart: varRef('multi-item-padding-horizontal')
},
[`${componentCls}-prefix + ${componentCls}-content`]: {
[`${componentCls}-placeholder`]: {
insetInlineStart: 0
},
[`${componentCls}-content-item${componentCls}-content-item-suffix`]: {
marginInlineStart: 0
}
},
// ===================== Placeholder ======================
[`${componentCls}-placeholder`]: {
position: 'absolute',
lineHeight: varRef('line-height'),
insetInlineStart: varRef('multi-item-padding-horizontal'),
width: `calc(100% - ${varRef('multi-item-padding-horizontal')})`,
top: '50%',
transform: 'translateY(-50%)'
},
// ======================= Content ========================
[`${componentCls}-content`]: {
flexWrap: 'wrap',
alignItems: 'center',
lineHeight: 1,
'&-item-prefix': {
height: varRef('font-size')
},
'&-item': {
lineHeight: 1,
maxWidth: `calc(100% - ${FIXED_INPUT_MIN_WIDTH}px)`
},
[`${componentCls}-content-item-prefix + ${componentCls}-content-item-suffix,
${componentCls}-content-item-suffix:first-child`]: {
marginInlineStart: varRef('multi-item-padding-horizontal')
},
[`${componentCls}-selection-item`]: {
lineHeight: `calc(${varRef('multi-item-height')} - ${lineWidth} * 2)`,
border: `${lineWidth} solid ${varRef('multi-item-border-color')}`,
display: 'flex',
marginBlock: INTERNAL_FIXED_ITEM_MARGIN,
marginInlineEnd: calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).equal(),
background: varRef('multi-item-background'),
borderRadius: varRef('multi-item-border-radius'),
paddingInlineStart: paddingXS,
paddingInlineEnd: paddingXXS,
transition: ['height', 'line-height', 'padding'].map(key => `${key} ${token.motionDurationSlow}`).join(','),
// >>> Content
'&-content': {
..._style.textEllipsis,
marginInlineEnd: paddingXXS
},
// >>> Remove
'&-remove': {
...(0, _style.resetIcon)(),
display: 'inline-flex',
alignItems: 'center',
color: colorIcon,
fontWeight: 'bold',
fontSize: 10,
lineHeight: 'inherit',
cursor: 'pointer',
[`> ${iconCls}`]: {
verticalAlign: '-0.2em'
},
'&:hover': {
color: colorIconHover
}
}
},
[`${componentCls}-input`]: {
lineHeight: calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).add(varRef('multi-item-height')).equal(),
width: `calc(var(--select-input-width, 0) * 1px)`,
minWidth: FIXED_INPUT_MIN_WIDTH,
maxWidth: '100%',
transition: `line-height ${token.motionDurationSlow}`
}
},
// ========================================================
// == Size ==
// ========================================================
[`&${componentCls}-sm`]: {
[varName('multi-item-height')]: token.multipleItemHeightSM,
[varName('multi-item-border-radius')]: token.borderRadiusXS
},
[`&${componentCls}-lg`]: {
[varName('multi-item-height')]: token.multipleItemHeightLG,
[varName('multi-item-border-radius')]: token.borderRadius
},
// ========================================================
// == Variants ==
// ========================================================
[`&${componentCls}-filled`]: {
[varName('multi-item-border-color')]: token.colorSplit,
[varName('multi-item-background')]: token.colorBgContainer,
[`&${componentCls}-disabled`]: {
[varName('multi-item-border-color')]: 'transparent'
}
}
}
};
};
var _default = exports.default = genSelectInputMultipleStyle;
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { GenerateStyle } from '../../theme/interface';
import type { SelectToken } from './token';
declare const genSelectInputStyle: GenerateStyle<SelectToken, CSSObject>;
export default genSelectInputStyle;
+352
View File
@@ -0,0 +1,352 @@
"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 _genStyleUtils = require("../../theme/util/genStyleUtils");
var _selectInputCustomize = _interopRequireDefault(require("./select-input-customize"));
var _selectInputMultiple = _interopRequireDefault(require("./select-input-multiple"));
/** Set CSS variables and hover/focus styles for a Select input based on provided colors. */
const genSelectInputVariableStyle = (token, colors) => {
const {
componentCls,
antCls
} = token;
const [varName] = (0, _genStyleUtils.genCssVar)(antCls, 'select');
const {
border,
borderHover,
borderActive,
borderOutline
} = colors;
const baseBG = colors.background || token.selectorBg || token.colorBgContainer;
return {
[varName('border-color')]: border,
[varName('background-color')]: baseBG,
[varName('color')]: colors.color || token.colorText,
[`&:not(${componentCls}-disabled)`]: {
'&:hover': {
[varName('border-color')]: borderHover,
[varName('background-color')]: colors.backgroundHover || baseBG
},
[`&${componentCls}-focused`]: {
[varName('border-color')]: borderActive,
[varName('background-color')]: colors.backgroundActive || baseBG,
boxShadow: `0 0 0 ${(0, _cssinjs.unit)(token.controlOutlineWidth)} ${borderOutline}`
}
},
[`&${componentCls}-disabled`]: {
[varName('border-color')]: colors.borderDisabled || colors.border,
[varName('background-color')]: colors.backgroundDisabled || colors.background
}
};
};
/** Generate variant-scoped variable styles and status overrides for a Select input. */
const genSelectInputVariantStyle = (token, variant, colors, errorColors = {}, warningColors = {}, patchStyle) => {
const {
componentCls
} = token;
return {
[`&${componentCls}-${variant}`]: [genSelectInputVariableStyle(token, colors), {
[`&${componentCls}-status-error`]: genSelectInputVariableStyle(token, {
...colors,
color: errorColors.color || token.colorError,
...errorColors
}),
[`&${componentCls}-status-warning`]: genSelectInputVariableStyle(token, {
...colors,
color: warningColors.color || token.colorWarning,
...warningColors
})
}, patchStyle]
};
};
const genSelectInputStyle = token => {
const {
componentCls,
fontHeight,
controlHeight,
iconCls,
antCls,
calc
} = token;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'select');
return {
[componentCls]: [{
// Border
[varName('border-radius')]: token.borderRadius,
[varName('border-color')]: '#000',
[varName('border-size')]: token.lineWidth,
// Background
[varName('background-color')]: token.colorBgContainer,
// Font
[varName('font-size')]: token.fontSize,
[varName('line-height')]: token.lineHeight,
[varName('font-height')]: fontHeight,
[varName('color')]: token.colorText,
// Size
[varName('height')]: controlHeight,
[varName('padding-horizontal')]: calc(token.paddingSM).sub(token.lineWidth).equal(),
[varName('padding-vertical')]: `calc((${varRef('height')} - ${varRef('font-height')}) / 2 - ${varRef('border-size')})`,
// ==========================================================
// == Base ==
// ==========================================================
...(0, _style.resetComponent)(token, true),
display: 'inline-flex',
// gap: calc(token.paddingXXS).mul(1.5).equal(),
flexWrap: 'nowrap',
position: 'relative',
transition: `all ${token.motionDurationSlow}`,
alignItems: 'flex-start',
outline: 0,
cursor: 'pointer',
// Border
borderRadius: varRef('border-radius'),
borderWidth: varRef('border-size'),
borderStyle: token.lineType,
borderColor: varRef('border-color'),
// Background
background: varRef('background-color'),
// Font
fontSize: varRef('font-size'),
lineHeight: varRef('line-height'),
color: varRef('color'),
// Padding
paddingInline: varRef('padding-horizontal'),
paddingBlock: varRef('padding-vertical'),
// ========================= Prefix =========================
[`${componentCls}-prefix`]: {
flex: 'none',
lineHeight: 1
},
// ====================== Placeholder =======================
[`${componentCls}-placeholder`]: {
..._style.textEllipsis,
color: token.colorTextPlaceholder,
pointerEvents: 'none',
zIndex: 1
},
// ======================== Content =========================
[`${componentCls}-content`]: {
flex: 'auto',
minWidth: 0,
position: 'relative',
display: 'flex',
marginInlineEnd: calc(token.paddingXXS).mul(1.5).equal(),
'&:before': {
content: '"\\a0"',
width: 0,
overflow: 'hidden'
},
// >>> Value
'&-value': {
visibility: 'inherit'
},
// >>> Input: should only take effect for not customize mode
// input element with readOnly use cursor pointer
'input[readonly]': {
cursor: 'inherit',
caretColor: 'transparent'
}
},
// ========================= Suffix =========================
[`${componentCls}-suffix`]: {
flex: 'none',
color: token.colorTextQuaternary,
fontSize: token.fontSizeIcon,
lineHeight: 1,
'> :not(:last-child)': {
marginInlineEnd: token.marginXS
}
},
[`${componentCls}-prefix, ${componentCls}-suffix`]: {
alignSelf: 'center',
[iconCls]: {
verticalAlign: 'top'
}
},
// ==========================================================
// == Disabled ==
// ==========================================================
'&-disabled': {
background: token.colorBgContainerDisabled,
color: token.colorTextDisabled,
cursor: 'not-allowed',
input: {
cursor: 'not-allowed'
}
},
// ==========================================================
// == Size ==
// ==========================================================
'&-sm': {
[varName('height')]: token.controlHeightSM,
[varName('padding-horizontal')]: calc(token.paddingXS).sub(token.lineWidth).equal(),
[varName('border-radius')]: token.borderRadiusSM,
[`${componentCls}-clear`]: {
insetInlineEnd: varRef('padding-horizontal')
}
},
'&-lg': {
[varName('height')]: token.controlHeightLG,
[varName('font-size')]: token.fontSizeLG,
[varName('line-height')]: token.lineHeightLG,
[varName('font-height')]: token.fontHeightLG,
[varName('border-radius')]: token.borderRadiusLG
}
},
// ============================================================
// == Input ==
// ============================================================
{
[`&:not(${componentCls}-customize)`]: {
[`${componentCls}-input`]: {
outline: 'none',
background: 'transparent',
appearance: 'none',
border: 0,
margin: 0,
padding: 0,
color: varRef('color'),
'&::-webkit-search-cancel-button': {
display: 'none',
appearance: 'none'
}
}
}
},
// ============================================================
// == Single ==
// ============================================================
{
[`&-single:not(${componentCls}-customize)`]: {
[`${componentCls}-input`]: {
position: 'absolute',
inset: 0,
lineHeight: `calc(${varRef('font-height')} + ${varRef('padding-vertical')} * 2)`
},
// Content center align
[`${componentCls}-content`]: {
..._style.textEllipsis,
alignSelf: 'center',
'&-has-value': {
display: 'block',
'&:before': {
display: 'none'
}
},
'&-has-search-value': {
color: 'transparent'
},
// >>> Value
'&-value': {
transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
zIndex: 1
}
},
[`&${componentCls}-open ${componentCls}-content`]: {
color: token.colorTextPlaceholder,
'&-has-search-value': {
color: 'transparent'
}
}
}
},
// ======================== Show Search =======================
{
[`&-show-search:not(${componentCls}-customize-input):not(${componentCls}-disabled)`]: {
cursor: 'text'
}
},
// ============================================================
// == Multiple ==
// ============================================================
(0, _selectInputMultiple.default)(token),
// ========================= Variant ==========================
// >>> Outlined
genSelectInputVariantStyle(token, 'outlined', {
border: token.colorBorder,
borderHover: token.hoverBorderColor,
borderActive: token.activeBorderColor,
borderOutline: token.activeOutlineColor,
borderDisabled: token.colorBorderDisabled
},
// Error
{
border: token.colorError,
borderHover: token.colorErrorHover,
borderActive: token.colorError,
borderOutline: token.colorErrorOutline
},
// Warning
{
border: token.colorWarning,
borderHover: token.colorWarningHover,
borderActive: token.colorWarning,
borderOutline: token.colorWarningOutline
}),
// >>> Filled
genSelectInputVariantStyle(token, 'filled', {
border: 'transparent',
borderHover: 'transparent',
borderActive: token.activeBorderColor,
borderOutline: 'transparent',
borderDisabled: token.colorBorderDisabled,
background: token.colorFillTertiary,
backgroundHover: token.colorFillSecondary,
backgroundActive: token.colorBgContainer
},
// Error
{
background: token.colorErrorBg,
backgroundHover: token.colorErrorBgHover,
borderActive: token.colorError
},
// Warning
{
background: token.colorWarningBg,
backgroundHover: token.colorWarningBgHover,
borderActive: token.colorWarning
}),
// >>> Borderless
genSelectInputVariantStyle(token, 'borderless', {
border: 'transparent',
borderHover: 'transparent',
borderActive: 'transparent',
borderOutline: 'transparent',
background: 'transparent'
}),
// Underlined
genSelectInputVariantStyle(token, 'underlined', {
border: token.colorBorder,
borderHover: token.hoverBorderColor,
borderActive: token.activeBorderColor,
borderOutline: 'transparent'
},
// Error
{
border: token.colorError,
borderHover: token.colorErrorHover,
borderActive: token.colorError
},
// Warning
{
border: token.colorWarning,
borderHover: token.colorWarningHover,
borderActive: token.colorWarning
}, {
borderRadius: 0,
borderTopColor: 'transparent',
borderInlineColor: 'transparent'
}),
// ============================================================
// == Custom ==
// ============================================================
(0, _selectInputCustomize.default)(token)]
};
};
var _default = exports.default = genSelectInputStyle;
+138
View File
@@ -0,0 +1,138 @@
import type { CSSProperties } from 'react';
import type { FullToken, GetDefaultToken } from 'antd/es/theme/internal';
export interface MultipleSelectorToken {
/**
* @desc 多选标签背景色
* @descEN Background color of multiple tag
*/
multipleItemBg: string;
/**
* @desc 多选标签边框色
* @descEN Border color of multiple tag
*/
multipleItemBorderColor: string;
/**
* @desc 多选标签高度
* @descEN Height of multiple tag
*/
multipleItemHeight: number;
/**
* @desc 小号多选标签高度
* @descEN Height of multiple tag with small size
*/
multipleItemHeightSM: number;
/**
* @desc 大号多选标签高度
* @descEN Height of multiple tag with large size
*/
multipleItemHeightLG: number;
/**
* @desc 多选框禁用背景
* @descEN Background color of multiple selector when disabled
*/
multipleSelectorBgDisabled: string;
/**
* @desc 多选标签禁用文本颜色
* @descEN Text color of multiple tag when disabled
*/
multipleItemColorDisabled: string;
/**
* @desc 多选标签禁用边框色
* @descEN Border color of multiple tag when disabled
*/
multipleItemBorderColorDisabled: string;
}
export interface ComponentToken extends MultipleSelectorToken {
/**
* @desc 下拉菜单 z-index
* @descEN z-index of dropdown
*/
zIndexPopup: number;
/**
* @desc 选项选中时文本颜色
* @descEN Text color when option is selected
*/
optionSelectedColor: string;
/**
* @desc 选项选中时文本字重
* @descEN Font weight when option is selected
*/
optionSelectedFontWeight: CSSProperties['fontWeight'];
/**
* @desc 选项选中时背景色
* @descEN Background color when option is selected
*/
optionSelectedBg: string;
/**
* @desc 选项激活态时背景色
* @descEN Background color when option is active
*/
optionActiveBg: string;
/**
* @desc 选项内间距
* @descEN Padding of option
*/
optionPadding: CSSProperties['padding'];
/**
* @desc 选项字体大小
* @descEN Font size of option
*/
optionFontSize: number;
/**
* @desc 选项行高
* @descEN Line height of option
*/
optionLineHeight: CSSProperties['lineHeight'];
/**
* @desc 选项高度
* @descEN Height of option
*/
optionHeight: number;
/**
* @desc 选框背景色
* @descEN Background color of selector
*/
selectorBg: string;
/**
* @desc 清空按钮背景色
* @descEN Background color of clear button
*/
clearBg: string;
/**
* @desc 单选大号回填项高度
* @descEN Height of single selected item with large size
*/
singleItemHeightLG: number;
/**
* @desc 箭头的行末内边距
* @descEN Inline end padding of arrow
*/
showArrowPaddingInlineEnd: number;
/**
* @desc 悬浮态边框色
* @descEN Hover border color
*/
hoverBorderColor: string;
/**
* @desc 激活态边框色
* @descEN Active border color
*/
activeBorderColor: string;
/**
* @desc 激活态 outline 颜色
* @descEN Active outline color
*/
activeOutlineColor: string;
}
export interface SelectorToken {
selectAffixPadding: number | string;
inputPaddingHorizontalBase: number | string;
multipleSelectItemHeight: number;
selectHeight: number;
}
export interface SelectToken extends FullToken<'Select'>, SelectorToken {
rootPrefixCls: string;
/** @private Used for internal calculation */
INTERNAL_FIXED_ITEM_MARGIN: number;
}
export declare const prepareComponentToken: GetDefaultToken<'Select'>;
+69
View File
@@ -0,0 +1,69 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.prepareComponentToken = void 0;
const prepareComponentToken = token => {
const {
fontSize,
lineHeight,
lineWidth,
controlHeight,
controlHeightSM,
controlHeightLG,
paddingXXS,
controlPaddingHorizontal,
zIndexPopupBase,
colorText,
fontWeightStrong,
controlItemBgActive,
controlItemBgHover,
colorBgContainer,
colorFillSecondary,
colorBgContainerDisabled,
colorTextDisabled,
colorPrimaryHover,
colorPrimary,
controlOutline
} = token;
// Item height default use `controlHeight - 2 * paddingXXS`,
// but some case `paddingXXS=0`.
// Let's fallback it.
const dblPaddingXXS = paddingXXS * 2;
const dblLineWidth = lineWidth * 2;
const multipleItemHeight = Math.min(controlHeight - dblPaddingXXS, controlHeight - dblLineWidth);
const multipleItemHeightSM = Math.min(controlHeightSM - dblPaddingXXS, controlHeightSM - dblLineWidth);
const multipleItemHeightLG = Math.min(controlHeightLG - dblPaddingXXS, controlHeightLG - dblLineWidth);
// FIXED_ITEM_MARGIN is a hardcode calculation since calc not support rounding
const INTERNAL_FIXED_ITEM_MARGIN = Math.floor(paddingXXS / 2);
return {
INTERNAL_FIXED_ITEM_MARGIN,
zIndexPopup: zIndexPopupBase + 50,
optionSelectedColor: colorText,
optionSelectedFontWeight: fontWeightStrong,
optionSelectedBg: controlItemBgActive,
optionActiveBg: controlItemBgHover,
optionPadding: `${(controlHeight - fontSize * lineHeight) / 2}px ${controlPaddingHorizontal}px`,
optionFontSize: fontSize,
optionLineHeight: lineHeight,
optionHeight: controlHeight,
selectorBg: colorBgContainer,
clearBg: colorBgContainer,
singleItemHeightLG: controlHeightLG,
multipleItemBg: colorFillSecondary,
multipleItemBorderColor: 'transparent',
multipleItemHeight,
multipleItemHeightSM,
multipleItemHeightLG,
multipleSelectorBgDisabled: colorBgContainerDisabled,
multipleItemColorDisabled: colorTextDisabled,
multipleItemBorderColorDisabled: 'transparent',
showArrowPaddingInlineEnd: Math.ceil(token.fontSize * 1.25),
hoverBorderColor: colorPrimaryHover,
activeBorderColor: colorPrimary,
activeOutlineColor: controlOutline,
selectAffixPadding: paddingXXS
};
};
exports.prepareComponentToken = prepareComponentToken;
+27
View File
@@ -0,0 +1,27 @@
import type { ReactNode } from 'react';
import * as React from 'react';
type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
export default function useIcons({ suffixIcon, clearIcon, menuItemSelectedIcon, removeIcon, loading, loadingIcon, multiple, hasFeedback, showSuffixIcon, feedbackIcon, showArrow, componentName, }: {
suffixIcon?: React.ReactNode;
clearIcon?: RenderNode;
menuItemSelectedIcon?: RenderNode;
removeIcon?: RenderNode;
loading?: boolean;
loadingIcon?: React.ReactNode;
multiple?: boolean;
hasFeedback?: boolean;
feedbackIcon?: ReactNode;
prefixCls: string;
showSuffixIcon?: boolean;
showArrow?: boolean;
componentName: string;
}): {
clearIcon: React.ReactNode;
suffixIcon: React.JSX.Element | (({ open, showSearch }: {
open: boolean;
showSearch: boolean;
}) => React.JSX.Element | null) | null;
itemIcon: string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | React.JSX.Element | ((props: any) => React.ReactNode) | null;
removeIcon: string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | React.JSX.Element | ((props: any) => React.ReactNode) | null;
};
export {};
+86
View File
@@ -0,0 +1,86 @@
"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 = useIcons;
var React = _interopRequireWildcard(require("react"));
var _CheckOutlined = _interopRequireDefault(require("@ant-design/icons/CheckOutlined"));
var _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons/CloseCircleFilled"));
var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
var _DownOutlined = _interopRequireDefault(require("@ant-design/icons/DownOutlined"));
var _LoadingOutlined = _interopRequireDefault(require("@ant-design/icons/LoadingOutlined"));
var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
var _warning = require("../_util/warning");
function useIcons({
suffixIcon,
clearIcon,
menuItemSelectedIcon,
removeIcon,
loading,
loadingIcon,
multiple,
hasFeedback,
showSuffixIcon,
feedbackIcon,
showArrow,
componentName
}) {
if (process.env.NODE_ENV !== 'production') {
const warning = (0, _warning.devUseWarning)(componentName);
warning.deprecated(!clearIcon, 'clearIcon', 'allowClear={{ clearIcon: React.ReactNode }}');
}
// Clear Icon
const mergedClearIcon = clearIcon ?? /*#__PURE__*/React.createElement(_CloseCircleFilled.default, null);
// Validation Feedback Icon
const getSuffixIconNode = arrowIcon => {
if (suffixIcon === null && !hasFeedback && !showArrow) {
return null;
}
return /*#__PURE__*/React.createElement(React.Fragment, null, showSuffixIcon !== false && arrowIcon, hasFeedback && feedbackIcon);
};
// Arrow item icon
let mergedSuffixIcon = null;
if (suffixIcon !== undefined) {
mergedSuffixIcon = getSuffixIconNode(suffixIcon);
} else if (loading) {
mergedSuffixIcon = getSuffixIconNode(loadingIcon ?? /*#__PURE__*/React.createElement(_LoadingOutlined.default, {
spin: true
}));
} else {
mergedSuffixIcon = ({
open,
showSearch
}) => {
if (open && showSearch) {
return getSuffixIconNode(/*#__PURE__*/React.createElement(_SearchOutlined.default, null));
}
return getSuffixIconNode(/*#__PURE__*/React.createElement(_DownOutlined.default, null));
};
}
// Checked item icon
let mergedItemIcon = null;
if (menuItemSelectedIcon !== undefined) {
mergedItemIcon = menuItemSelectedIcon;
} else if (multiple) {
mergedItemIcon = /*#__PURE__*/React.createElement(_CheckOutlined.default, null);
} else {
mergedItemIcon = null;
}
let mergedRemoveIcon = null;
if (removeIcon !== undefined) {
mergedRemoveIcon = removeIcon;
} else {
mergedRemoveIcon = /*#__PURE__*/React.createElement(_CloseOutlined.default, null);
}
return {
// TODO: remove as when all the deps bumped
clearIcon: mergedClearIcon,
suffixIcon: mergedSuffixIcon,
itemIcon: mergedItemIcon,
removeIcon: mergedRemoveIcon
};
}
+4
View File
@@ -0,0 +1,4 @@
import React from 'react';
type RenderFunction<T extends any[]> = (...args: T) => React.ReactNode;
declare function usePopupRender<T extends [React.ReactElement, ...any[]]>(renderFn?: RenderFunction<T>): ((...args: T) => React.ReactElement) | undefined;
export default usePopupRender;
+21
View File
@@ -0,0 +1,21 @@
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _ContextIsolator = _interopRequireDefault(require("../_util/ContextIsolator"));
function usePopupRender(renderFn) {
return _react.default.useMemo(() => {
if (!renderFn) {
return undefined;
}
return (...args) => /*#__PURE__*/_react.default.createElement(_ContextIsolator.default, {
space: true
}, renderFn.apply(void 0, args));
}, [renderFn]);
}
var _default = exports.default = usePopupRender;
+8
View File
@@ -0,0 +1,8 @@
import type { ReactNode } from 'react';
/**
* Since Select, TreeSelect, Cascader is same Select like component.
* We just use same hook to handle this logic.
*
* If `suffixIcon` is not equal to `null`, always show it.
*/
export default function useShowArrow(suffixIcon?: ReactNode, showArrow?: boolean): boolean;
+15
View File
@@ -0,0 +1,15 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useShowArrow;
/**
* Since Select, TreeSelect, Cascader is same Select like component.
* We just use same hook to handle this logic.
*
* If `suffixIcon` is not equal to `null`, always show it.
*/
function useShowArrow(suffixIcon, showArrow) {
return showArrow !== undefined ? showArrow : suffixIcon !== null;
}