mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
feat: ColorPicker implement showText API (#42865)
* feat: color-picker support showValue api * Update components/color-picker/index.en-US.md Co-authored-by: MadCcc <1075746765@qq.com> * docs: add version column * test: fix test coverage * feat: replace showValue with textRender * Update components/color-picker/components/ColorTrigger.tsx Co-authored-by: MadCcc <1075746765@qq.com> * fix: style issue * feat: add showText prop and optimization code * fix: lint issue * test: fix coverage * refactor: combine showText and textRender * fix: lint issue --------- Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
红果汁
GitHub
parent
2c20dcd4cc
commit
1fb8fc57d3
@ -41,6 +41,7 @@ export type ColorPickerProps = Omit<
|
||||
allowClear?: boolean;
|
||||
presets?: PresetsItem[];
|
||||
arrow?: boolean | { pointAtCenter: boolean };
|
||||
showText?: boolean | ((color: Color) => React.ReactNode);
|
||||
styles?: { popup?: CSSProperties };
|
||||
rootClassName?: string;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
@ -66,6 +67,7 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
disabled,
|
||||
placement = 'bottomLeft',
|
||||
arrow = true,
|
||||
showText,
|
||||
style,
|
||||
className,
|
||||
rootClassName,
|
||||
@ -91,6 +93,11 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
postState: (openData) => !disabled && openData,
|
||||
onChange: onOpenChange,
|
||||
});
|
||||
const [formatValue, setFormatValue] = useMergedState(format, {
|
||||
value: format,
|
||||
onChange: onFormatChange,
|
||||
});
|
||||
|
||||
const [colorCleared, setColorCleared] = useState(false);
|
||||
|
||||
const prefixCls = getPrefixCls('color-picker', customizePrefixCls);
|
||||
@ -151,8 +158,8 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
colorCleared,
|
||||
disabled,
|
||||
presets,
|
||||
format,
|
||||
onFormatChange,
|
||||
format: formatValue,
|
||||
onFormatChange: setFormatValue,
|
||||
};
|
||||
|
||||
return wrapSSR(
|
||||
@ -183,6 +190,8 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
prefixCls={prefixCls}
|
||||
disabled={disabled}
|
||||
colorCleared={colorCleared}
|
||||
showText={showText}
|
||||
format={formatValue}
|
||||
/>
|
||||
)}
|
||||
</Popover>,
|
||||
|
||||
@ -1162,6 +1162,11 @@ Array [
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-trigger-text"
|
||||
>
|
||||
#1677FF
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
|
||||
@ -4349,6 +4354,788 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/text-render.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-trigger-text"
|
||||
>
|
||||
#1677FF
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-popover-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-inner-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-select"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler"
|
||||
style="background-color: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-saturation"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-slider-container"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-slider-group"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-slider ant-color-picker-slider-hue"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-gradient"
|
||||
style="position: absolute; inset: 0;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-slider ant-color-picker-slider-alpha"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-gradient"
|
||||
style="position: absolute; inset: 0;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-input-container"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
id="rc_select_TEST_OR_SSR_list"
|
||||
role="listbox"
|
||||
style="height: 0px; width: 0px; overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
aria-label="HEX"
|
||||
aria-selected="true"
|
||||
id="rc_select_TEST_OR_SSR_list_0"
|
||||
role="option"
|
||||
>
|
||||
hex
|
||||
</div>
|
||||
<div
|
||||
aria-label="HSB"
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_1"
|
||||
role="option"
|
||||
>
|
||||
hsb
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rc-virtual-list"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="rc-virtual-list-holder"
|
||||
style="max-height: 256px; overflow-y: auto;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="rc-virtual-list-holder-inner"
|
||||
style="display: flex; flex-direction: column;"
|
||||
>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||
title="HEX"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
HEX
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="HSB"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
HSB
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="RGB"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
RGB
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-input"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-color-picker-hex-input ant-input-affix-wrapper-sm"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
#
|
||||
</span>
|
||||
<input
|
||||
class="ant-input ant-input-sm"
|
||||
type="text"
|
||||
value="1677FF"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number ant-input-number-sm ant-color-picker-steppers ant-color-picker-alpha-input"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="true"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="100"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-trigger-text"
|
||||
>
|
||||
<span>
|
||||
Custom Text (#1677ff)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-popover-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-inner-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-select"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler"
|
||||
style="background-color: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-saturation"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-slider-container"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-slider-group"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-slider ant-color-picker-slider-hue"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-gradient"
|
||||
style="position: absolute; inset: 0;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-slider ant-color-picker-slider-alpha"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-gradient"
|
||||
style="position: absolute; inset: 0;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-input-container"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
id="rc_select_TEST_OR_SSR_list"
|
||||
role="listbox"
|
||||
style="height: 0px; width: 0px; overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
aria-label="HEX"
|
||||
aria-selected="true"
|
||||
id="rc_select_TEST_OR_SSR_list_0"
|
||||
role="option"
|
||||
>
|
||||
hex
|
||||
</div>
|
||||
<div
|
||||
aria-label="HSB"
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_1"
|
||||
role="option"
|
||||
>
|
||||
hsb
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rc-virtual-list"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="rc-virtual-list-holder"
|
||||
style="max-height: 256px; overflow-y: auto;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="rc-virtual-list-holder-inner"
|
||||
style="display: flex; flex-direction: column;"
|
||||
>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||
title="HEX"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
HEX
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="HSB"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
HSB
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="RGB"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
RGB
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-input"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-color-picker-hex-input ant-input-affix-wrapper-sm"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
#
|
||||
</span>
|
||||
<input
|
||||
class="ant-input ant-input-sm"
|
||||
type="text"
|
||||
value="1677FF"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number ant-input-number-sm ant-color-picker-steppers ant-color-picker-alpha-input"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="true"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="100"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/trigger.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
|
||||
@ -57,6 +57,11 @@ exports[`renders components/color-picker/demo/disabled.tsx correctly 1`] = `
|
||||
style="background:rgb(22, 119, 255)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-trigger-text"
|
||||
>
|
||||
#1677FF
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -244,6 +249,62 @@ exports[`renders components/color-picker/demo/pure-panel.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/text-render.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background:rgb(22, 119, 255)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-trigger-text"
|
||||
>
|
||||
#1677FF
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background:rgb(22, 119, 255)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-trigger-text"
|
||||
>
|
||||
<span>
|
||||
Custom Text (
|
||||
<!-- -->
|
||||
#1677ff
|
||||
<!-- -->
|
||||
)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/trigger.tsx correctly 1`] = `
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
|
||||
@ -329,4 +329,41 @@ describe('ColorPicker', () => {
|
||||
|
||||
expect(container.querySelector('.ant-color-picker-presets-color-bright')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Should showText as render function work', async () => {
|
||||
const { container } = render(<ColorPicker showText={(color) => color.toHexString()} />);
|
||||
const targetEle = container.querySelector('.ant-color-picker-trigger-text');
|
||||
expect(targetEle).toBeTruthy();
|
||||
expect(targetEle?.innerHTML).toBe('#1677ff');
|
||||
});
|
||||
|
||||
it('Should showText work', async () => {
|
||||
const { container } = render(<ColorPicker open showText />);
|
||||
const targetEle = container.querySelector('.ant-color-picker-trigger-text');
|
||||
expect(targetEle).toBeTruthy();
|
||||
|
||||
fireEvent.mouseDown(
|
||||
container.querySelector('.ant-color-picker-format-select .ant-select-selector')!,
|
||||
);
|
||||
await waitFakeTimer();
|
||||
fireEvent.click(container.querySelector('.ant-select-item[title="HSB"]')!);
|
||||
await waitFakeTimer();
|
||||
expect(targetEle?.innerHTML).toEqual('hsb(215, 91%, 100%)');
|
||||
|
||||
fireEvent.mouseDown(
|
||||
container.querySelector('.ant-color-picker-format-select .ant-select-selector')!,
|
||||
);
|
||||
await waitFakeTimer();
|
||||
fireEvent.click(container.querySelector('.ant-select-item[title="RGB"]')!);
|
||||
await waitFakeTimer();
|
||||
expect(targetEle?.innerHTML).toEqual('rgb(22, 119, 255)');
|
||||
|
||||
fireEvent.mouseDown(
|
||||
container.querySelector('.ant-color-picker-format-select .ant-select-selector')!,
|
||||
);
|
||||
await waitFakeTimer();
|
||||
fireEvent.click(container.querySelector('.ant-select-item[title="HEX"]')!);
|
||||
await waitFakeTimer();
|
||||
expect(targetEle?.innerHTML).toEqual('#1677FF');
|
||||
});
|
||||
});
|
||||
|
||||
@ -2,13 +2,16 @@ import { ColorBlock } from '@rc-component/color-picker';
|
||||
import classNames from 'classnames';
|
||||
import type { CSSProperties, MouseEventHandler } from 'react';
|
||||
import React, { forwardRef, useMemo } from 'react';
|
||||
import type { ColorPickerProps } from '../ColorPicker';
|
||||
import type { ColorPickerBaseProps } from '../interface';
|
||||
import { getAlphaColor } from '../util';
|
||||
import ColorClear from './ColorClear';
|
||||
|
||||
interface colorTriggerProps
|
||||
extends Pick<ColorPickerBaseProps, 'prefixCls' | 'colorCleared' | 'disabled'> {
|
||||
extends Pick<ColorPickerBaseProps, 'prefixCls' | 'colorCleared' | 'disabled' | 'format'> {
|
||||
color: Exclude<ColorPickerBaseProps['color'], undefined>;
|
||||
open?: boolean;
|
||||
showText?: ColorPickerProps['showText'];
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
onClick?: MouseEventHandler<HTMLDivElement>;
|
||||
@ -17,7 +20,8 @@ interface colorTriggerProps
|
||||
}
|
||||
|
||||
const ColorTrigger = forwardRef<HTMLDivElement, colorTriggerProps>((props, ref) => {
|
||||
const { color, prefixCls, open, colorCleared, disabled, className, ...rest } = props;
|
||||
const { color, prefixCls, open, colorCleared, disabled, format, className, showText, ...rest } =
|
||||
props;
|
||||
const colorTriggerPrefixCls = `${prefixCls}-trigger`;
|
||||
|
||||
const containerNode = useMemo<React.ReactNode>(
|
||||
@ -30,6 +34,29 @@ const ColorTrigger = forwardRef<HTMLDivElement, colorTriggerProps>((props, ref)
|
||||
[color, colorCleared, prefixCls],
|
||||
);
|
||||
|
||||
const genColorString = () => {
|
||||
const hexString = color.toHexString().toUpperCase();
|
||||
const alpha = getAlphaColor(color);
|
||||
switch (format) {
|
||||
case 'rgb':
|
||||
return color.toRgbString();
|
||||
case 'hsb':
|
||||
return color.toHsbString();
|
||||
case 'hex':
|
||||
default:
|
||||
return alpha < 100 ? `${hexString.slice(0, 7)},${alpha}%` : hexString;
|
||||
}
|
||||
};
|
||||
|
||||
const renderText = () => {
|
||||
if (typeof showText === 'function') {
|
||||
return showText(color);
|
||||
}
|
||||
if (showText) {
|
||||
return genColorString();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
@ -40,6 +67,7 @@ const ColorTrigger = forwardRef<HTMLDivElement, colorTriggerProps>((props, ref)
|
||||
{...rest}
|
||||
>
|
||||
{containerNode}
|
||||
{showText && <div className={`${colorTriggerPrefixCls}-text`}>{renderText()}</div>}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ColorPicker } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export default () => <ColorPicker disabled />;
|
||||
export default () => <ColorPicker showText disabled />;
|
||||
|
||||
7
components/color-picker/demo/text-render.md
Normal file
7
components/color-picker/demo/text-render.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
渲染触发器的默认文本, `showText` 为 `true` 时生效。自定义文本时，可以使用 `showText` 为函数的方式，返回自定义的文本。
|
||||
|
||||
## en-US
|
||||
|
||||
Renders the default text of the trigger, effective when `showText` is `true`. When customizing text, you can use `showText` as a function to return custom text.
|
||||
11
components/color-picker/demo/text-render.tsx
Normal file
11
components/color-picker/demo/text-render.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import { ColorPicker, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const Demo = () => (
|
||||
<Space direction="vertical">
|
||||
<ColorPicker showText />
|
||||
<ColorPicker showText={(color) => <span>Custom Text ({color.toHexString()})</span>} />
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default Demo;
|
||||
@ -21,7 +21,8 @@ Used when the user needs to customize the color selection.
|
||||
<!-- prettier-ignore -->
|
||||
<code src="./demo/base.tsx">Basic Usage</code>
|
||||
<code src="./demo/controlled.tsx">controlled mode</code>
|
||||
<code src="./demo/disabled.tsx" debug>Disable</code>
|
||||
<code src="./demo/text-render.tsx">Rendering Trigger Text</code>
|
||||
<code src="./demo/disabled.tsx">Disable</code>
|
||||
<code src="./demo/allowClear.tsx">Clear Color</code>
|
||||
<code src="./demo/trigger.tsx">Custom Trigger</code>
|
||||
<code src="./demo/trigger-event.tsx">Custom Trigger Event</code>
|
||||
@ -34,24 +35,25 @@ Used when the user needs to customize the color selection.
|
||||
> This component is available since `antd@5.5.0`.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Property | Description | Type | Default |
|
||||
| :-- | :-- | :-- | :-- |
|
||||
| format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` |
|
||||
| value | Value of color | string \| `Color` | - |
|
||||
| defaultValue | Default value of color | string \| `Color` | - |
|
||||
| allowClear | Allow clearing color selected | boolean | false |
|
||||
| presets | Preset colors | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - |
|
||||
| children | Trigger of ColorPicker | React.ReactNode | - |
|
||||
| trigger | ColorPicker trigger mode | `hover` \| `click` | `click` |
|
||||
| open | Whether to show popup | boolean | - |
|
||||
| disabled | Disable ColorPicker | boolean | - |
|
||||
| placement | Placement of popup | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` |
|
||||
| arrow | Configuration for popup arrow | `boolean \| { pointAtCenter: boolean }` | `true` | - |
|
||||
| destroyTooltipOnHide | Whether destroy popover when hidden | `boolean` | `false` |
|
||||
| onChange | Callback when `value` is changed | `(value: Color, hex: string) => void` | - |
|
||||
| onFormatChange | Callback when `format` is changed | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - |
|
||||
| onOpenChange | Callback when `open` is changed | `(open: boolean) => void` | - |
|
||||
| onClear | Called when clear | `() => void` | - |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| :-- | :-- | :-- | :-- | :-- |
|
||||
| format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | |
|
||||
| value | Value of color | string \| `Color` | - | |
|
||||
| defaultValue | Default value of color | string \| `Color` | - | |
|
||||
| allowClear | Allow clearing color selected | boolean | false | |
|
||||
| presets | Preset colors | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - | |
|
||||
| children | Trigger of ColorPicker | React.ReactNode | - | |
|
||||
| trigger | ColorPicker trigger mode | `hover` \| `click` | `click` | |
|
||||
| open | Whether to show popup | boolean | - | |
|
||||
| disabled | Disable ColorPicker | boolean | - | |
|
||||
| placement | Placement of popup | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | |
|
||||
| arrow | Configuration for popup arrow | `boolean \| { pointAtCenter: boolean }` | true | |
|
||||
| destroyTooltipOnHide | Whether destroy popover when hidden | `boolean` | false | 5.7.0 |
|
||||
| showText | show color text | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
|
||||
| onChange | Callback when `value` is changed | `(value: Color, hex: string) => void` | - | |
|
||||
| onFormatChange | Callback when `format` is changed | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - | |
|
||||
| onOpenChange | Callback when `open` is changed | `(open: boolean) => void` | - | |
|
||||
| onClear | Called when clear | `() => void` | - | 5.6.0 |
|
||||
|
||||
### Color
|
||||
|
||||
|
||||
@ -22,7 +22,8 @@ group:
|
||||
<!-- prettier-ignore -->
|
||||
<code src="./demo/base.tsx">基本使用</code>
|
||||
<code src="./demo/controlled.tsx">受控模式</code>
|
||||
<code src="./demo/disabled.tsx" debug>禁用</code>
|
||||
<code src="./demo/text-render.tsx">渲染触发器文本</code>
|
||||
<code src="./demo/disabled.tsx">禁用</code>
|
||||
<code src="./demo/allowClear.tsx">清除颜色</code>
|
||||
<code src="./demo/trigger.tsx">自定义触发器</code>
|
||||
<code src="./demo/trigger-event.tsx">自定义触发事件</code>
|
||||
@ -35,24 +36,25 @@ group:
|
||||
> 自 `antd@5.5.0` 版本开始提供该组件。
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| :-- | :-- | :-- | :-- |
|
||||
| format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` |
|
||||
| value | 颜色的值 | string \| `Color` | - |
|
||||
| defaultValue | 颜色默认的值 | string \| `Color` | - |
|
||||
| allowClear | 允许清除选择的颜色 | boolean | false |
|
||||
| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - |
|
||||
| children | 颜色选择器的触发器 | React.ReactNode | - |
|
||||
| trigger | 颜色选择器的触发模式 | `hover` \| `click` | `click` |
|
||||
| open | 是否显示弹出窗口 | boolean | - |
|
||||
| disabled | 禁用颜色选择器 | boolean | - |
|
||||
| placement | 弹出窗口的位置 | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` |
|
||||
| arrow | 配置弹出的箭头 | `boolean \| { pointAtCenter: boolean }` | `true` | - |
|
||||
| destroyTooltipOnHide | 关闭后是否销毁弹窗 | `boolean` | `false` |
|
||||
| onChange | 颜色变化的回调 | `(value: Color, hex: string) => void` | - |
|
||||
| onFormatChange | 颜色格式变化的回调 | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - |
|
||||
| onOpenChange | 当 `open` 被改变时的回调 | `(open: boolean) => void` | - |
|
||||
| onClear | 清除的回调 | `() => void` | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| :-- | :-- | :-- | :-- | :-- |
|
||||
| format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | |
|
||||
| value | 颜色的值 | string \| `Color` | - | |
|
||||
| defaultValue | 颜色默认的值 | string \| `Color` | - | |
|
||||
| allowClear | 允许清除选择的颜色 | boolean | false | |
|
||||
| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - | |
|
||||
| children | 颜色选择器的触发器 | React.ReactNode | - | |
|
||||
| trigger | 颜色选择器的触发模式 | `hover` \| `click` | `click` | |
|
||||
| open | 是否显示弹出窗口 | boolean | - | |
|
||||
| disabled | 禁用颜色选择器 | boolean | - | |
|
||||
| placement | 弹出窗口的位置 | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | |
|
||||
| arrow | 配置弹出的箭头 | `boolean \| { pointAtCenter: boolean }` | true | |
|
||||
| destroyTooltipOnHide | 关闭后是否销毁弹窗 | `boolean` | false | 5.7.0 |
|
||||
| showText | 显示颜色文本 | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
|
||||
| onChange | 颜色变化的回调 | `(value: Color, hex: string) => void` | - | |
|
||||
| onFormatChange | 颜色格式变化的回调 | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - | |
|
||||
| onOpenChange | 当 `open` 被改变时的回调 | `(open: boolean) => void` | - | |
|
||||
| onClear | 清除的回调 | `() => void` | - | 5.6.0 |
|
||||
|
||||
### Color
|
||||
|
||||
|
||||
@ -80,6 +80,7 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
|
||||
motionDurationMid,
|
||||
colorBgElevated,
|
||||
colorTextDisabled,
|
||||
colorText,
|
||||
colorBgContainerDisabled,
|
||||
borderRadius,
|
||||
marginXS,
|
||||
@ -90,6 +91,8 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
|
||||
colorPickerPresetColorSize,
|
||||
lineWidth,
|
||||
colorBorder,
|
||||
paddingXXS,
|
||||
fontSizeSM,
|
||||
} = token;
|
||||
|
||||
return [
|
||||
@ -117,16 +120,23 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
|
||||
},
|
||||
|
||||
'&-trigger': {
|
||||
width: controlHeight,
|
||||
minWidth: controlHeight,
|
||||
height: controlHeight,
|
||||
borderRadius,
|
||||
border: `${lineWidth}px solid ${colorBorder}`,
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
transition: `all ${motionDurationMid}`,
|
||||
background: colorBgElevated,
|
||||
padding: paddingXXS - lineWidth,
|
||||
[`${componentCls}-trigger-text`]: {
|
||||
marginInlineStart: marginXS,
|
||||
marginInlineEnd: marginXS - (paddingXXS - lineWidth),
|
||||
fontSize: fontSizeSM,
|
||||
color: colorText,
|
||||
},
|
||||
'&-active': {
|
||||
...genActiveStyle(token),
|
||||
borderColor: colorPrimary,
|
||||
@ -141,6 +151,9 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
|
||||
'&:hover': {
|
||||
borderColor: colorBgTextActive,
|
||||
},
|
||||
[`${componentCls}-trigger-text`]: {
|
||||
color: colorTextDisabled,
|
||||
},
|
||||
},
|
||||
...genClearStyle(token, controlHeightSM),
|
||||
...genColorBlockStyle(token, controlHeightSM),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user