mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-18 03:14:07 +08:00
refactor: color-picker panel dom logic (#46327)
* refactor: refactoring custom panel logic * chore: update test case & update snapshot * chore: update un-stable snap??? * docs: update demo * chore: update snapshots * fix: table filterDropdown should accept cssvar (#46314) * chore: revert files * chore: update demo * chore: update snap --------- Co-authored-by: MadCcc <madccc@foxmail.com>
This commit is contained in:
红
GitHub
parent
a8fc2ec3f3
commit
ce7da2ef41
@ -15,7 +15,7 @@ interface ColorPickerPanelProps extends ColorPickerBaseProps {
|
|||||||
|
|
||||||
const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
||||||
const { prefixCls, presets, panelRender, color, onChange, onClear, ...injectProps } = props;
|
const { prefixCls, presets, panelRender, color, onChange, onClear, ...injectProps } = props;
|
||||||
const colorPickerPanelPrefixCls = `${prefixCls}-inner-content`;
|
const colorPickerPanelPrefixCls = `${prefixCls}-inner`;
|
||||||
|
|
||||||
// ==== Inject props ===
|
// ==== Inject props ===
|
||||||
const panelPickerProps = {
|
const panelPickerProps = {
|
||||||
@ -38,11 +38,11 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
|||||||
|
|
||||||
// ====================== Render ======================
|
// ====================== Render ======================
|
||||||
const innerPanel = (
|
const innerPanel = (
|
||||||
<>
|
<div className={`${colorPickerPanelPrefixCls}-content`}>
|
||||||
<PanelPicker />
|
<PanelPicker />
|
||||||
{Array.isArray(presets) && <Divider className={`${colorPickerPanelPrefixCls}-divider`} />}
|
{Array.isArray(presets) && <Divider />}
|
||||||
<PanelPresets />
|
<PanelPresets />
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -214,36 +214,28 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
|
|||||||
class="ant-space-item"
|
class="ant-space-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-row ant-row-middle"
|
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Add title:
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
class="ant-color-picker-trigger"
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Add title:
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col"
|
class="ant-color-picker-color-block"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-trigger"
|
class="ant-color-picker-color-block-inner"
|
||||||
>
|
style="background:rgb(22, 119, 255)"
|
||||||
<div
|
/>
|
||||||
class="ant-color-picker-color-block"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-color-picker-color-block-inner"
|
|
||||||
style="background:rgb(22, 119, 255)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -253,36 +245,28 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
|
|||||||
class="ant-space-item"
|
class="ant-space-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-row ant-row-middle"
|
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Horizontal layout:
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
class="ant-color-picker-trigger"
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Horizontal layout:
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col"
|
class="ant-color-picker-color-block"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-trigger"
|
class="ant-color-picker-color-block-inner"
|
||||||
>
|
style="background:rgb(22, 119, 255)"
|
||||||
<div
|
/>
|
||||||
class="ant-color-picker-color-block"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-color-picker-color-block-inner"
|
|
||||||
style="background:rgb(22, 119, 255)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -40,218 +40,142 @@ exports[`ColorPicker Should panelRender work 1`] = `
|
|||||||
class="ant-popover-inner-content"
|
class="ant-popover-inner-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-inner-content"
|
class="ant-color-picker-inner"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="custom-panel"
|
class="custom-panel"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-panel"
|
class="ant-color-picker-inner-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-select"
|
class="ant-color-picker-panel"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-palette"
|
class="ant-color-picker-select"
|
||||||
style="position: relative;"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style="position: absolute; left: -50px; top: 50px; z-index: 1;"
|
class="ant-color-picker-palette"
|
||||||
|
style="position: relative;"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-handler"
|
style="position: absolute; left: -50px; top: 50px; z-index: 1;"
|
||||||
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-color-picker-slider ant-color-picker-slider-hue"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-color-picker-palette"
|
|
||||||
style="position: relative;"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
|
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-color-picker-slider ant-color-picker-slider-hue"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-palette"
|
||||||
|
style="position: relative;"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
|
||||||
style="background-color: rgb(255, 0, 0);"
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||||
|
style="background-color: rgb(255, 0, 0);"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-gradient"
|
||||||
|
style="position: absolute; inset: 0;"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-slider ant-color-picker-slider-alpha"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-gradient"
|
class="ant-color-picker-palette"
|
||||||
style="position: absolute; inset: 0;"
|
style="position: relative;"
|
||||||
/>
|
>
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||||
|
style="background-color: rgba(0, 0, 0, 0);"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-gradient"
|
||||||
|
style="position: absolute; inset: 0;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-slider ant-color-picker-slider-alpha"
|
class="ant-color-picker-color-block"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-palette"
|
class="ant-color-picker-color-block-inner"
|
||||||
style="position: relative;"
|
style="background: rgba(0, 0, 0, 0);"
|
||||||
>
|
/>
|
||||||
<div
|
|
||||||
style="position: absolute; left: -50px; top: -16.666666666666668px; z-index: 1;"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
|
||||||
style="background-color: rgba(0, 0, 0, 0);"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-color-picker-gradient"
|
|
||||||
style="position: absolute; inset: 0;"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-input-container"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-color-block"
|
class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-color-block-inner"
|
class="ant-select-selector"
|
||||||
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>
|
|
||||||
<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="000000"
|
|
||||||
/>
|
|
||||||
</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="false"
|
|
||||||
aria-label="Increase Value"
|
|
||||||
class="ant-input-number-handler ant-input-number-handler-up"
|
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-label="up"
|
class="ant-select-selection-search"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
|
||||||
role="img"
|
|
||||||
>
|
>
|
||||||
<svg
|
<input
|
||||||
aria-hidden="true"
|
aria-autocomplete="list"
|
||||||
data-icon="up"
|
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||||
fill="currentColor"
|
aria-expanded="false"
|
||||||
focusable="false"
|
aria-haspopup="listbox"
|
||||||
height="1em"
|
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||||
viewBox="64 64 896 896"
|
autocomplete="off"
|
||||||
width="1em"
|
class="ant-select-selection-search-input"
|
||||||
>
|
id="rc_select_TEST_OR_SSR"
|
||||||
<path
|
readonly=""
|
||||||
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"
|
role="combobox"
|
||||||
/>
|
style="opacity: 0;"
|
||||||
</svg>
|
type="search"
|
||||||
|
unselectable="on"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
<span
|
||||||
|
class="ant-select-selection-item"
|
||||||
|
title="HEX"
|
||||||
|
>
|
||||||
|
HEX
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<span
|
<span
|
||||||
aria-disabled="true"
|
aria-hidden="true"
|
||||||
aria-label="Decrease Value"
|
class="ant-select-arrow"
|
||||||
class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
|
style="user-select: none;"
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-label="down"
|
aria-label="down"
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
class="anticon anticon-down ant-select-suffix"
|
||||||
role="img"
|
role="img"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@ -271,18 +195,98 @@ exports[`ColorPicker Should panelRender work 1`] = `
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number-input-wrap"
|
class="ant-color-picker-input"
|
||||||
>
|
>
|
||||||
<input
|
<span
|
||||||
aria-valuemax="100"
|
class="ant-input-affix-wrapper ant-color-picker-hex-input ant-input-affix-wrapper-sm"
|
||||||
aria-valuemin="0"
|
>
|
||||||
aria-valuenow="0"
|
<span
|
||||||
autocomplete="off"
|
class="ant-input-prefix"
|
||||||
class="ant-input-number-input"
|
>
|
||||||
role="spinbutton"
|
#
|
||||||
step="1"
|
</span>
|
||||||
value="0%"
|
<input
|
||||||
/>
|
class="ant-input ant-input-sm"
|
||||||
|
type="text"
|
||||||
|
value="000000"
|
||||||
|
/>
|
||||||
|
</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="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>
|
||||||
@ -323,7 +327,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
|
|||||||
class="ant-popover-inner-content"
|
class="ant-popover-inner-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-inner-content"
|
class="ant-color-picker-inner"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="custom-panel"
|
class="custom-panel"
|
||||||
|
|||||||
@ -441,7 +441,8 @@ describe('ColorPicker', () => {
|
|||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
expect(componentContainer.querySelector('.custom-panel')).toBeTruthy();
|
expect(componentContainer.querySelector('.custom-panel')).toBeTruthy();
|
||||||
expect(componentContainer.querySelector('.ant-color-picker-inner-content')).toBeTruthy();
|
expect(componentContainer.querySelector('.ant-color-picker-inner-content')).not.toBeTruthy();
|
||||||
|
expect(componentContainer.querySelector('.ant-color-picker-inner')).toBeTruthy();
|
||||||
expect(componentContainer).toMatchSnapshot();
|
expect(componentContainer).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,127 +1,81 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Col, ColorPicker, Divider, Row, Space } from 'antd';
|
import { Col, ColorPicker, Divider, Row, Space, theme } from 'antd';
|
||||||
|
import type { ColorPickerProps } from 'antd';
|
||||||
|
import { generate, green, presetPalettes, red, cyan } from '@ant-design/colors';
|
||||||
|
|
||||||
const Demo = () => (
|
type Presets = Required<ColorPickerProps>['presets'][number];
|
||||||
<Space direction="vertical">
|
|
||||||
<Row align="middle">
|
const genPresets = (presets = presetPalettes) =>
|
||||||
<Space>
|
Object.entries(presets).map<Presets>(([label, colors]) => ({
|
||||||
<span>Add title: </span>
|
label,
|
||||||
<Col>
|
colors,
|
||||||
<ColorPicker
|
}));
|
||||||
defaultValue="#1677ff"
|
|
||||||
panelRender={(panel) => (
|
const HorizontalLayoutDemo = () => {
|
||||||
<div className="custom-panel">
|
const { token } = theme.useToken();
|
||||||
<div
|
|
||||||
style={{
|
const presets = genPresets({
|
||||||
fontSize: 12,
|
primary: generate(token.colorPrimary),
|
||||||
color: 'rgba(0, 0, 0, 0.88)',
|
red,
|
||||||
lineHeight: '20px',
|
green,
|
||||||
marginBottom: 8,
|
cyan,
|
||||||
}}
|
});
|
||||||
>
|
|
||||||
Color Picker
|
const customPanelRender: ColorPickerProps['panelRender'] = (
|
||||||
</div>
|
_,
|
||||||
{panel}
|
{ components: { Picker, Presets } },
|
||||||
</div>
|
) => (
|
||||||
)}
|
<Row justify="space-between" wrap={false}>
|
||||||
/>
|
<Col span={12}>
|
||||||
</Col>
|
<Presets />
|
||||||
</Space>
|
</Col>
|
||||||
|
<Divider type="vertical" style={{ height: 'auto' }} />
|
||||||
|
<Col flex="auto">
|
||||||
|
<Picker />
|
||||||
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row align="middle">
|
);
|
||||||
<Space>
|
|
||||||
<span>Horizontal layout: </span>
|
return (
|
||||||
<Col>
|
<ColorPicker
|
||||||
<ColorPicker
|
defaultValue={token.colorPrimary}
|
||||||
defaultValue="#1677ff"
|
styles={{ popupOverlayInner: { width: 480 } }}
|
||||||
styles={{
|
presets={presets}
|
||||||
popupOverlayInner: {
|
panelRender={customPanelRender}
|
||||||
width: 468 + 24,
|
/>
|
||||||
},
|
);
|
||||||
}}
|
};
|
||||||
presets={[
|
|
||||||
{
|
const BasicDemo = () => (
|
||||||
label: 'Recommended',
|
<ColorPicker
|
||||||
colors: [
|
defaultValue="#1677ff"
|
||||||
'#000000',
|
panelRender={(panel) => (
|
||||||
'#000000E0',
|
<div className="custom-panel">
|
||||||
'#000000A6',
|
<div
|
||||||
'#00000073',
|
style={{
|
||||||
'#00000040',
|
fontSize: 12,
|
||||||
'#00000026',
|
color: 'rgba(0, 0, 0, 0.88)',
|
||||||
'#0000001A',
|
lineHeight: '20px',
|
||||||
'#00000012',
|
marginBottom: 8,
|
||||||
'#0000000A',
|
}}
|
||||||
'#00000005',
|
>
|
||||||
'#F5222D',
|
Color Picker
|
||||||
'#FA8C16',
|
</div>
|
||||||
'#FADB14',
|
{panel}
|
||||||
'#8BBB11',
|
</div>
|
||||||
'#52C41A',
|
)}
|
||||||
'#13A8A8',
|
/>
|
||||||
'#1677FF',
|
|
||||||
'#2F54EB',
|
|
||||||
'#722ED1',
|
|
||||||
'#EB2F96',
|
|
||||||
'#F5222D4D',
|
|
||||||
'#FA8C164D',
|
|
||||||
'#FADB144D',
|
|
||||||
'#8BBB114D',
|
|
||||||
'#52C41A4D',
|
|
||||||
'#13A8A84D',
|
|
||||||
'#1677FF4D',
|
|
||||||
'#2F54EB4D',
|
|
||||||
'#722ED14D',
|
|
||||||
'#EB2F964D',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Recent',
|
|
||||||
colors: [
|
|
||||||
'#F5222D4D',
|
|
||||||
'#FA8C164D',
|
|
||||||
'#FADB144D',
|
|
||||||
'#8BBB114D',
|
|
||||||
'#52C41A4D',
|
|
||||||
'#13A8A84D',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
panelRender={(_, { components: { Picker, Presets } }) => (
|
|
||||||
<div
|
|
||||||
className="custom-panel"
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
width: 468,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Presets />
|
|
||||||
</div>
|
|
||||||
<Divider
|
|
||||||
type="vertical"
|
|
||||||
style={{
|
|
||||||
height: 'auto',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: 234,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Picker />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
</Space>
|
|
||||||
</Row>
|
|
||||||
</Space>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Demo;
|
export default () => (
|
||||||
|
<Space direction="vertical">
|
||||||
|
<Space>
|
||||||
|
<span>Add title:</span>
|
||||||
|
<BasicDemo />
|
||||||
|
</Space>
|
||||||
|
<Space>
|
||||||
|
<span>Horizontal layout:</span>
|
||||||
|
<HorizontalLayoutDemo />
|
||||||
|
</Space>
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
|
|||||||
@ -156,6 +156,7 @@ const genSizeStyle = (token: ColorPickerToken): CSSObject => {
|
|||||||
|
|
||||||
const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
|
const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
|
||||||
const {
|
const {
|
||||||
|
antCls,
|
||||||
componentCls,
|
componentCls,
|
||||||
colorPickerWidth,
|
colorPickerWidth,
|
||||||
colorPrimary,
|
colorPrimary,
|
||||||
@ -183,14 +184,17 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
|
|||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
[componentCls]: {
|
[componentCls]: {
|
||||||
[`${componentCls}-inner-content`]: {
|
[`${componentCls}-inner`]: {
|
||||||
display: 'flex',
|
'&-content': {
|
||||||
flexDirection: 'column',
|
display: 'flex',
|
||||||
width: colorPickerWidth,
|
flexDirection: 'column',
|
||||||
|
width: colorPickerWidth,
|
||||||
|
|
||||||
'&-divider': {
|
[`& > ${antCls}-divider`]: {
|
||||||
margin: `${unit(marginSM)} 0 ${unit(marginXS)}`,
|
margin: `${unit(marginSM)} 0 ${unit(marginXS)}`,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
[`${componentCls}-panel`]: {
|
[`${componentCls}-panel`]: {
|
||||||
...genPickerStyle(token),
|
...genPickerStyle(token),
|
||||||
},
|
},
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -152,312 +152,236 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
|||||||
class="ant-popover-inner-content"
|
class="ant-popover-inner-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-inner-content"
|
class="ant-color-picker-inner"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-panel"
|
class="ant-color-picker-inner-content"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-select"
|
class="ant-color-picker-panel"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-palette"
|
class="ant-color-picker-select"
|
||||||
style="position: relative;"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
class="ant-color-picker-palette"
|
||||||
|
style="position: relative;"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-handler"
|
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||||
style="background-color: rgba(0, 0, 0, 0.15);"
|
|
||||||
/>
|
|
||||||
</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-color-picker-slider ant-color-picker-slider-hue"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-color-picker-palette"
|
|
||||||
style="position: relative;"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
class="ant-color-picker-handler"
|
||||||
>
|
style="background-color: rgba(0, 0, 0, 0.15);"
|
||||||
<div
|
|
||||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
|
||||||
style="background-color: rgb(255, 0, 0);"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-color-picker-gradient"
|
|
||||||
style="position: absolute; inset: 0;"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-saturation"
|
||||||
|
style="background-color: rgb(255, 0, 0);"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-color-picker-slider-container"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-slider ant-color-picker-slider-alpha"
|
class="ant-color-picker-slider-group"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-palette"
|
class="ant-color-picker-slider ant-color-picker-slider-hue"
|
||||||
style="position: relative;"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
class="ant-color-picker-palette"
|
||||||
|
style="position: relative;"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||||
style="background-color: rgba(0, 0, 0, 0.15);"
|
>
|
||||||
/>
|
|
||||||
</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: rgba(0, 0, 0, 0.15);"
|
|
||||||
/>
|
|
||||||
</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
|
<div
|
||||||
class="rc-virtual-list-holder-inner"
|
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||||
style="display: flex; flex-direction: column;"
|
style="background-color: rgb(255, 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: rgba(0, 0, 0, 0.15);"
|
||||||
|
/>
|
||||||
|
</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: rgba(0, 0, 0, 0.15);"
|
||||||
|
/>
|
||||||
|
</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
|
<div
|
||||||
aria-selected="true"
|
class="rc-virtual-list-holder-inner"
|
||||||
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
style="display: flex; flex-direction: column;"
|
||||||
title="HEX"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-select-item-option-content"
|
aria-selected="true"
|
||||||
|
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||||
|
title="HEX"
|
||||||
>
|
>
|
||||||
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>
|
||||||
<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
|
<div
|
||||||
class="ant-select-item-option-content"
|
aria-selected="false"
|
||||||
|
class="ant-select-item ant-select-item-option"
|
||||||
|
title="HSB"
|
||||||
>
|
>
|
||||||
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>
|
||||||
<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
|
<div
|
||||||
class="ant-select-item-option-content"
|
aria-selected="false"
|
||||||
|
class="ant-select-item ant-select-item-option"
|
||||||
|
title="RGB"
|
||||||
>
|
>
|
||||||
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>
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="ant-select-item-option-state"
|
|
||||||
style="user-select: none;"
|
|
||||||
unselectable="on"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="ant-select-arrow"
|
|
||||||
style="user-select: none;"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
aria-label="down"
|
aria-hidden="true"
|
||||||
class="anticon anticon-down ant-select-suffix"
|
class="ant-select-arrow"
|
||||||
role="img"
|
style="user-select: none;"
|
||||||
>
|
|
||||||
<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="000000"
|
|
||||||
/>
|
|
||||||
</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="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="false"
|
|
||||||
aria-label="Decrease Value"
|
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-label="down"
|
aria-label="down"
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
class="anticon anticon-down ant-select-suffix"
|
||||||
role="img"
|
role="img"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@ -477,18 +401,98 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number-input-wrap"
|
class="ant-color-picker-input"
|
||||||
>
|
>
|
||||||
<input
|
<span
|
||||||
aria-valuemax="100"
|
class="ant-input-affix-wrapper ant-color-picker-hex-input ant-input-affix-wrapper-sm"
|
||||||
aria-valuemin="0"
|
>
|
||||||
aria-valuenow="15"
|
<span
|
||||||
autocomplete="off"
|
class="ant-input-prefix"
|
||||||
class="ant-input-number-input"
|
>
|
||||||
role="spinbutton"
|
#
|
||||||
step="1"
|
</span>
|
||||||
value="15%"
|
<input
|
||||||
/>
|
class="ant-input ant-input-sm"
|
||||||
|
type="text"
|
||||||
|
value="000000"
|
||||||
|
/>
|
||||||
|
</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="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="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="15"
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-input-number-input"
|
||||||
|
role="spinbutton"
|
||||||
|
step="1"
|
||||||
|
value="15%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user