mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-23 18:50:06 +08:00
fix: ColorPicker not support compact (#50291)
* fix: ColorPicker not support compact * test: update snapshot * test: update snapshot
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
37abf776f4
commit
c23d1875fe
@ -14,6 +14,7 @@ import useSize from '../config-provider/hooks/useSize';
|
||||
import { FormItemInputContext } from '../form/context';
|
||||
import type { PopoverProps } from '../popover';
|
||||
import Popover from '../popover';
|
||||
import { useCompactItemContext } from '../space/Compact';
|
||||
import { AggregationColor } from './color';
|
||||
import type { ColorPickerPanelProps } from './ColorPickerPanel';
|
||||
import ColorPickerPanel from './ColorPickerPanel';
|
||||
@ -166,8 +167,12 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
// ================== Form Status ==================
|
||||
const { status: contextStatus } = React.useContext(FormItemInputContext);
|
||||
|
||||
// ==================== Compact ====================
|
||||
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
|
||||
|
||||
// ===================== Style =====================
|
||||
const mergedSize = useSize(customizeSize);
|
||||
const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
|
||||
|
||||
const rootCls = useCSSVarCls(prefixCls);
|
||||
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
||||
const rtlCls = { [`${prefixCls}-rtl`]: direction };
|
||||
@ -178,6 +183,7 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
[`${prefixCls}-sm`]: mergedSize === 'small',
|
||||
[`${prefixCls}-lg`]: mergedSize === 'large',
|
||||
},
|
||||
compactItemClassnames,
|
||||
colorPicker?.className,
|
||||
mergedRootCls,
|
||||
className,
|
||||
|
||||
@ -51,10 +51,6 @@ const ColorTrigger = forwardRef<HTMLDivElement, ColorTriggerProps>((props, ref)
|
||||
}
|
||||
|
||||
if (color.isGradient()) {
|
||||
// return color
|
||||
// .getColors()
|
||||
// .map((c) => `${c.color.toRgbString()} ${c.percent}%`)
|
||||
// .join(', ');
|
||||
return color.getColors().map((c, index) => {
|
||||
const inactive = activeIndex !== -1 && activeIndex !== index;
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { unit } from '@ant-design/cssinjs';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
|
||||
import { genCompactItemStyle } from '../../style/compact-item';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
import genColorBlockStyle from './color-block';
|
||||
@ -284,6 +285,10 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
|
||||
...genRtlStyle(token),
|
||||
},
|
||||
},
|
||||
|
||||
genCompactItemStyle(token, {
|
||||
focusElCls: `${componentCls}-trigger-active`,
|
||||
}),
|
||||
];
|
||||
};
|
||||
|
||||
|
||||
@ -8938,6 +8938,395 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-outlined ant-input-compact-item ant-input-compact-first-item"
|
||||
placeholder="input here"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
class="ant-color-picker-trigger ant-color-picker-compact-item ant-color-picker-compact-last-item"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-clear"
|
||||
/>
|
||||
</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-inner"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-select"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0%; top: 100%; z-index: 1; transform: translate(-50%, -50%);"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler"
|
||||
style="background-color: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-saturation"
|
||||
style="background-color: rgb(255, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-slider-container"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-slider-group"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-color-picker-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail ant-color-picker-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="359"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
class="ant-slider-handle ant-slider-handle-1 ant-color-picker-slider-handle"
|
||||
role="slider"
|
||||
style="left: 0%; transform: translateX(-50%); background: rgb(255, 0, 0);"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-slider ant-color-picker-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail ant-color-picker-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
class="ant-slider-handle ant-slider-handle-1 ant-color-picker-slider-handle"
|
||||
role="slider"
|
||||
style="left: 0%; transform: translateX(-50%); background: rgba(0, 0, 0, 0);"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgba(0, 0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</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-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; z-index: 1150; 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-input-affix-wrapper-sm ant-input-outlined ant-color-picker-hex-input"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
#
|
||||
</span>
|
||||
<input
|
||||
class="ant-input ant-input-sm"
|
||||
type="text"
|
||||
value="000000"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number ant-input-number-sm ant-input-number-outlined ant-color-picker-steppers ant-color-picker-alpha-input"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
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="true"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
|
||||
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="0"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="0%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -1976,6 +1976,27 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-outlined ant-input-compact-item ant-input-compact-first-item"
|
||||
placeholder="input here"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
class="ant-color-picker-trigger ant-color-picker-compact-item ant-color-picker-compact-last-item"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-clear"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@ import {
|
||||
AutoComplete,
|
||||
Button,
|
||||
Cascader,
|
||||
ColorPicker,
|
||||
DatePicker,
|
||||
Input,
|
||||
InputNumber,
|
||||
@ -197,6 +198,10 @@ const App: React.FC = () => (
|
||||
<InputNumber placeholder="another input" addonBefore="$" />
|
||||
<InputNumber placeholder="another input" addonAfter="$" />
|
||||
</Space.Compact>
|
||||
<Space.Compact>
|
||||
<Input placeholder="input here" />
|
||||
<ColorPicker />
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
);
|
||||
|
||||
|
||||
@ -8,5 +8,6 @@
|
||||
},
|
||||
"watch": {
|
||||
"_nodeModulesRegexes": ["rc-.*"]
|
||||
}
|
||||
},
|
||||
"hmr": false
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user