1
This commit is contained in:
+118
@@ -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
@@ -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;
|
||||
+4
@@ -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;
|
||||
+44
@@ -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
@@ -0,0 +1,4 @@
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
import type { SelectToken } from './token';
|
||||
declare const genSingleStyle: GenerateStyle<SelectToken>;
|
||||
export default genSingleStyle;
|
||||
+152
@@ -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
@@ -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
@@ -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
|
||||
}
|
||||
});
|
||||
+5
@@ -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;
|
||||
+30
@@ -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;
|
||||
+5
@@ -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;
|
||||
+143
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user