mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
feat: ColorPicker implement panelRender API (#43134)
* feat: implement `panelRender` api and add demo * test: add test case * docs: update doc * fix: styles add overlayInnerStyle * fix: variable name * docs: reorder api * refactor: optimize code * test: update snapshot * test: update snapshots * refactor: remove memo * refactor: rename overlayInnerStyle to popupOverlayInner * fix: props error * docs: update demo
This commit is contained in:
红果汁
GitHub
parent
2490d43eab
commit
6bb18b361d
@ -4,7 +4,7 @@ import type {
|
||||
} from '@rc-component/color-picker';
|
||||
import classNames from 'classnames';
|
||||
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
||||
import type { CSSProperties } from 'react';
|
||||
import type { CSSProperties, FC } from 'react';
|
||||
import React, { useContext, useRef, useState } from 'react';
|
||||
import genPurePanel from '../_util/PurePanel';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
@ -43,9 +43,13 @@ export type ColorPickerProps = Omit<
|
||||
allowClear?: boolean;
|
||||
presets?: PresetsItem[];
|
||||
arrow?: boolean | { pointAtCenter: boolean };
|
||||
panelRender?: (
|
||||
panel: React.ReactNode,
|
||||
extra: { components: { Picker: FC; Presets: FC } },
|
||||
) => React.ReactNode;
|
||||
showText?: boolean | ((color: Color) => React.ReactNode);
|
||||
styles?: { popup?: CSSProperties };
|
||||
size?: SizeType;
|
||||
styles?: { popup?: CSSProperties; popupOverlayInner?: CSSProperties };
|
||||
rootClassName?: string;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
onFormatChange?: (format: ColorFormat) => void;
|
||||
@ -70,6 +74,7 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
disabled,
|
||||
placement = 'bottomLeft',
|
||||
arrow = true,
|
||||
panelRender,
|
||||
showText,
|
||||
style,
|
||||
className,
|
||||
@ -172,6 +177,7 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
colorCleared,
|
||||
disabled,
|
||||
presets,
|
||||
panelRender,
|
||||
format: formatValue,
|
||||
onFormatChange: setFormatValue,
|
||||
};
|
||||
@ -179,6 +185,7 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
return wrapSSR(
|
||||
<Popover
|
||||
style={styles?.popup}
|
||||
overlayInnerStyle={styles?.popupOverlayInner}
|
||||
onOpenChange={(visible) => {
|
||||
if (popupAllowCloseRef.current) {
|
||||
setPopupOpen(visible);
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import type { HsbaColorType } from '@rc-component/color-picker';
|
||||
import RcColorPicker from '@rc-component/color-picker';
|
||||
import type { FC } from 'react';
|
||||
import React from 'react';
|
||||
import Divider from '../divider';
|
||||
import type { Color } from './color';
|
||||
import ColorClear from './components/ColorClear';
|
||||
import ColorInput from './components/ColorInput';
|
||||
import ColorPresets from './components/ColorPresets';
|
||||
import PanelPicker from './components/PanelPicker';
|
||||
import PanelPresets from './components/PanelPresets';
|
||||
import { PanelPickerProvider, PanelPresetsProvider } from './context';
|
||||
import type { ColorPickerBaseProps } from './interface';
|
||||
|
||||
interface ColorPickerPanelProps extends ColorPickerBaseProps {
|
||||
@ -18,49 +17,60 @@ interface ColorPickerPanelProps extends ColorPickerBaseProps {
|
||||
const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
||||
const {
|
||||
prefixCls,
|
||||
allowClear,
|
||||
presets,
|
||||
panelRender,
|
||||
color,
|
||||
onChange,
|
||||
onClear,
|
||||
onChangeComplete,
|
||||
color,
|
||||
colorCleared,
|
||||
...injectProps
|
||||
} = props;
|
||||
const colorPickerPanelPrefixCls = `${prefixCls}-inner-panel`;
|
||||
const colorPickerPanelPrefixCls = `${prefixCls}-inner-content`;
|
||||
|
||||
const extraPanelRender = (panel: React.ReactNode) => (
|
||||
<div className={colorPickerPanelPrefixCls}>
|
||||
{allowClear && (
|
||||
<ColorClear
|
||||
prefixCls={prefixCls}
|
||||
value={color}
|
||||
colorCleared={colorCleared}
|
||||
onChange={(clearColor) => {
|
||||
onChange?.(clearColor);
|
||||
onClear?.();
|
||||
}}
|
||||
{...injectProps}
|
||||
/>
|
||||
)}
|
||||
{panel}
|
||||
<ColorInput value={color} onChange={onChange} prefixCls={prefixCls} {...injectProps} />
|
||||
{Array.isArray(presets) && (
|
||||
<>
|
||||
<Divider className={`${colorPickerPanelPrefixCls}-divider`} />
|
||||
<ColorPresets value={color} presets={presets} prefixCls={prefixCls} onChange={onChange} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
// ==== Inject props ===
|
||||
const panelPickerProps = {
|
||||
prefixCls,
|
||||
value: color,
|
||||
onChange,
|
||||
onClear,
|
||||
onChangeComplete,
|
||||
...injectProps,
|
||||
};
|
||||
|
||||
const panelPresetsProps = React.useMemo(
|
||||
() => ({
|
||||
prefixCls,
|
||||
value: color,
|
||||
presets,
|
||||
onChange,
|
||||
}),
|
||||
[prefixCls, color, presets, onChange],
|
||||
);
|
||||
|
||||
// ====================== Render ======================
|
||||
const innerPanel = (
|
||||
<>
|
||||
<PanelPicker />
|
||||
{Array.isArray(presets) && <Divider className={`${colorPickerPanelPrefixCls}-divider`} />}
|
||||
<PanelPresets />
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<RcColorPicker
|
||||
prefixCls={prefixCls}
|
||||
value={color?.toHsb()}
|
||||
onChange={(colorValue, type) => onChange?.(colorValue, type, true)}
|
||||
panelRender={extraPanelRender}
|
||||
onChangeComplete={onChangeComplete}
|
||||
/>
|
||||
<PanelPickerProvider value={panelPickerProps}>
|
||||
<PanelPresetsProvider value={panelPresetsProps}>
|
||||
<div className={colorPickerPanelPrefixCls}>
|
||||
{typeof panelRender === 'function'
|
||||
? panelRender(innerPanel, {
|
||||
components: {
|
||||
Picker: PanelPicker,
|
||||
Presets: PanelPresets,
|
||||
},
|
||||
})
|
||||
: innerPanel}
|
||||
</div>
|
||||
</PanelPresetsProvider>
|
||||
</PanelPickerProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -210,6 +210,94 @@ exports[`renders components/color-picker/demo/format.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-row-middle"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<span>
|
||||
Add title:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-row-middle"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<span>
|
||||
Horizontal layout:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/presets.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-color-picker-trigger"
|
||||
|
||||
@ -17,6 +17,584 @@ exports[`ColorPicker Should disabled work 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ColorPicker Should panelRender work 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-color-picker-trigger ant-popover-open ant-color-picker-trigger-active"
|
||||
>
|
||||
<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-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-content"
|
||||
>
|
||||
<div
|
||||
class="custom-panel"
|
||||
>
|
||||
<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: 41.372549019607845px; top: -50px; 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: 9.728183118741065px; top: -16.666666666666668px; 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: 50px; top: -16.666666666666668px; 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>
|
||||
<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>
|
||||
<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>
|
||||
`;
|
||||
|
||||
exports[`ColorPicker Should panelRender work 2`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-color-picker-trigger ant-popover-open ant-color-picker-trigger-active"
|
||||
>
|
||||
<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-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-content"
|
||||
>
|
||||
<div
|
||||
class="custom-panel"
|
||||
>
|
||||
<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: 41.372549019607845px; top: -50px; 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: 9.728183118741065px; top: -16.666666666666668px; 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: 50px; top: -16.666666666666668px; 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>
|
||||
<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>
|
||||
<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>
|
||||
`;
|
||||
|
||||
exports[`ColorPicker Should render trigger work 1`] = `
|
||||
<div>
|
||||
<div
|
||||
|
||||
@ -373,4 +373,28 @@ describe('ColorPicker', () => {
|
||||
const { container: sm } = render(<ColorPicker size="small" />);
|
||||
expect(sm.querySelector('.ant-color-picker-sm')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('Should panelRender work', async () => {
|
||||
const { container: panelContainer } = render(
|
||||
<ColorPicker open panelRender={(panel) => <div className="custom-panel">{panel}</div>} />,
|
||||
);
|
||||
expect(panelContainer.querySelector('.custom-panel')).toBeTruthy();
|
||||
expect(panelContainer.querySelector('.ant-color-picker-inner-content')).toBeTruthy();
|
||||
expect(panelContainer).toMatchSnapshot();
|
||||
|
||||
const { container: componentContainer } = render(
|
||||
<ColorPicker
|
||||
open
|
||||
panelRender={(_, { components: { Picker, Presets } }) => (
|
||||
<div className="custom-panel">
|
||||
<Picker />
|
||||
<Presets />
|
||||
</div>
|
||||
)}
|
||||
/>,
|
||||
);
|
||||
expect(componentContainer.querySelector('.custom-panel')).toBeTruthy();
|
||||
expect(componentContainer.querySelector('.ant-color-picker-inner-content')).toBeTruthy();
|
||||
expect(componentContainer).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
54
components/color-picker/components/PanelPicker.tsx
Normal file
54
components/color-picker/components/PanelPicker.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import type { HsbaColorType } from '@rc-component/color-picker';
|
||||
import RcColorPicker from '@rc-component/color-picker';
|
||||
import type { FC } from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import type { Color } from '../color';
|
||||
import { PanelPickerContext } from '../context';
|
||||
import type { ColorPickerBaseProps } from '../interface';
|
||||
import ColorClear from './ColorClear';
|
||||
import ColorInput from './ColorInput';
|
||||
|
||||
export interface PanelPickerProps
|
||||
extends Pick<ColorPickerBaseProps, 'prefixCls' | 'colorCleared' | 'allowClear'> {
|
||||
value?: Color;
|
||||
onChange?: (value?: Color, type?: HsbaColorType, pickColor?: boolean) => void;
|
||||
onChangeComplete?: (type?: HsbaColorType) => void;
|
||||
onClear?: () => void;
|
||||
}
|
||||
|
||||
const PanelPicker: FC = () => {
|
||||
const {
|
||||
prefixCls,
|
||||
colorCleared,
|
||||
allowClear,
|
||||
value,
|
||||
onChange,
|
||||
onClear,
|
||||
onChangeComplete,
|
||||
...injectProps
|
||||
} = useContext(PanelPickerContext);
|
||||
return (
|
||||
<>
|
||||
{allowClear && (
|
||||
<ColorClear
|
||||
prefixCls={prefixCls}
|
||||
value={value}
|
||||
colorCleared={colorCleared}
|
||||
onChange={(clearColor) => {
|
||||
onChange?.(clearColor);
|
||||
onClear?.();
|
||||
}}
|
||||
{...injectProps}
|
||||
/>
|
||||
)}
|
||||
<RcColorPicker
|
||||
prefixCls={prefixCls}
|
||||
value={value?.toHsb()}
|
||||
onChange={(colorValue, type) => onChange?.(colorValue, type, true)}
|
||||
onChangeComplete={onChangeComplete}
|
||||
/>
|
||||
<ColorInput value={value} onChange={onChange} prefixCls={prefixCls} {...injectProps} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default PanelPicker;
|
||||
22
components/color-picker/components/PanelPresets.tsx
Normal file
22
components/color-picker/components/PanelPresets.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import type { FC } from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import type { Color } from '../color';
|
||||
import { PanelPresetsContext } from '../context';
|
||||
import type { ColorPickerBaseProps } from '../interface';
|
||||
import ColorPresets from './ColorPresets';
|
||||
|
||||
export interface PanelPresetsProps extends Pick<ColorPickerBaseProps, 'prefixCls' | 'presets'> {
|
||||
value?: Color;
|
||||
onChange?: (value: Color) => void;
|
||||
}
|
||||
|
||||
const PanelPresets: FC = () => {
|
||||
const { prefixCls, value, presets, onChange } = useContext(PanelPresetsContext);
|
||||
return (
|
||||
Array.isArray(presets) && (
|
||||
<ColorPresets value={value} presets={presets} prefixCls={prefixCls} onChange={onChange} />
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default PanelPresets;
|
||||
10
components/color-picker/context.ts
Normal file
10
components/color-picker/context.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import type { PanelPickerProps } from './components/PanelPicker';
|
||||
import type { PanelPresetsProps } from './components/PanelPresets';
|
||||
|
||||
export const PanelPickerContext = React.createContext<PanelPickerProps>({} as PanelPickerProps);
|
||||
|
||||
export const PanelPresetsContext = React.createContext<PanelPresetsProps>({} as PanelPresetsProps);
|
||||
|
||||
export const { Provider: PanelPickerProvider } = PanelPickerContext;
|
||||
export const { Provider: PanelPresetsProvider } = PanelPresetsContext;
|
||||
7
components/color-picker/demo/panel-render.md
Normal file
7
components/color-picker/demo/panel-render.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
通过 `panelRender` 自由控制面板的渲染。
|
||||
|
||||
## en-US
|
||||
|
||||
Rendering of the free control panel via `panelRender`.
|
||||
125
components/color-picker/demo/panel-render.tsx
Normal file
125
components/color-picker/demo/panel-render.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
import { Col, ColorPicker, Divider, Row, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const Demo = () => (
|
||||
<Space direction="vertical">
|
||||
<Row align="middle">
|
||||
<Space>
|
||||
<span>Add title: </span>
|
||||
<Col>
|
||||
<ColorPicker
|
||||
panelRender={(panel) => (
|
||||
<div className="custom-panel">
|
||||
<div
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: 'rgba(0, 0, 0, 0.88)',
|
||||
lineHeight: '20px',
|
||||
marginBottom: 8,
|
||||
}}
|
||||
>
|
||||
Color Picker
|
||||
</div>
|
||||
{panel}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Space>
|
||||
</Row>
|
||||
<Row align="middle">
|
||||
<Space>
|
||||
<span>Horizontal layout: </span>
|
||||
<Col>
|
||||
<ColorPicker
|
||||
styles={{
|
||||
popupOverlayInner: {
|
||||
width: 468 + 24,
|
||||
},
|
||||
}}
|
||||
presets={[
|
||||
{
|
||||
label: 'Recommended',
|
||||
colors: [
|
||||
'#000000',
|
||||
'#000000E0',
|
||||
'#000000A6',
|
||||
'#00000073',
|
||||
'#00000040',
|
||||
'#00000026',
|
||||
'#0000001A',
|
||||
'#00000012',
|
||||
'#0000000A',
|
||||
'#00000005',
|
||||
'#F5222D',
|
||||
'#FA8C16',
|
||||
'#FADB14',
|
||||
'#8BBB11',
|
||||
'#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;
|
||||
@ -29,6 +29,7 @@ Used when the user needs to customize the color selection.
|
||||
<code src="./demo/trigger-event.tsx">Custom Trigger Event</code>
|
||||
<code src="./demo/format.tsx">Color Format</code>
|
||||
<code src="./demo/presets.tsx">Preset Colors</code>
|
||||
<code src="./demo/panel-render.tsx">Custom Render Panel</code>
|
||||
<code src="./demo/pure-panel.tsx" debug>Pure Render</code>
|
||||
|
||||
## API
|
||||
@ -38,20 +39,21 @@ Used when the user needs to customize the color selection.
|
||||
<!-- prettier-ignore -->
|
||||
| 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 | |
|
||||
| children | Trigger of ColorPicker | React.ReactNode | - | |
|
||||
| defaultValue | Default value of color | string \| `Color` | - | |
|
||||
| disabled | Disable ColorPicker | boolean | - | |
|
||||
| destroyTooltipOnHide | Whether destroy popover when hidden | `boolean` | false | 5.7.0 |
|
||||
| showText | show color text | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
|
||||
| format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | |
|
||||
| open | Whether to show popup | boolean | - | |
|
||||
| presets | Preset colors | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - | |
|
||||
| placement | Placement of popup | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | |
|
||||
| panelRender | Custom Render Panel | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
|
||||
| showText | Show color text | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
|
||||
| size | Setting the trigger size | `large` \| `middle` \| `small` | `middle` | 5.7.0 |
|
||||
| trigger | ColorPicker trigger mode | `hover` \| `click` | `click` | |
|
||||
| value | Value of color | string \| `Color` | - | |
|
||||
| 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` | - | |
|
||||
|
||||
@ -30,6 +30,7 @@ group:
|
||||
<code src="./demo/trigger-event.tsx">自定义触发事件</code>
|
||||
<code src="./demo/format.tsx">颜色编码</code>
|
||||
<code src="./demo/presets.tsx">预设颜色</code>
|
||||
<code src="./demo/panel-render.tsx">自定义面板</code>
|
||||
<code src="./demo/pure-panel.tsx" debug>Pure Render</code>
|
||||
|
||||
## API
|
||||
@ -39,20 +40,21 @@ group:
|
||||
<!-- 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 | |
|
||||
| children | 颜色选择器的触发器 | React.ReactNode | - | |
|
||||
| defaultValue | 颜色默认的值 | string \| `Color` | - | |
|
||||
| disabled | 禁用颜色选择器 | boolean | - | |
|
||||
| destroyTooltipOnHide | 关闭后是否销毁弹窗 | `boolean` | false | 5.7.0 |
|
||||
| format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | |
|
||||
| open | 是否显示弹出窗口 | boolean | - | |
|
||||
| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - | |
|
||||
| placement | 弹出窗口的位置 | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | |
|
||||
| panelRender | 自定义渲染面板 | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
|
||||
| showText | 显示颜色文本 | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
|
||||
| size | 设置触发器大小 | `large` \| `middle` \| `small` | `middle` | 5.7.0 |
|
||||
| trigger | 颜色选择器的触发模式 | `hover` \| `click` | `click` | |
|
||||
| value | 颜色的值 | string \| `Color` | - | |
|
||||
| onChange | 颜色变化的回调 | `(value: Color, hex: string) => void` | - | |
|
||||
| onFormatChange | 颜色格式变化的回调 | `(format: 'hex' \| 'rgb' \| 'hsb') => void` | - | |
|
||||
| onOpenChange | 当 `open` 被改变时的回调 | `(open: boolean) => void` | - | |
|
||||
|
||||
@ -29,5 +29,6 @@ export interface ColorPickerBaseProps {
|
||||
colorCleared?: boolean;
|
||||
disabled?: boolean;
|
||||
presets?: PresetsItem[];
|
||||
panelRender?: ColorPickerProps['panelRender'];
|
||||
onFormatChange?: ColorPickerProps['onFormatChange'];
|
||||
}
|
||||
|
||||
@ -44,7 +44,11 @@ const genRtlStyle = (token: ColorPickerToken): CSSObject => {
|
||||
};
|
||||
};
|
||||
|
||||
const genClearStyle = (token: ColorPickerToken, size: number): CSSObject => {
|
||||
const genClearStyle = (
|
||||
token: ColorPickerToken,
|
||||
size: number,
|
||||
extraStyle?: CSSObject,
|
||||
): CSSObject => {
|
||||
const { componentCls, borderRadiusSM, lineWidth, colorSplit, red6 } = token;
|
||||
|
||||
return {
|
||||
@ -56,6 +60,7 @@ const genClearStyle = (token: ColorPickerToken, size: number): CSSObject => {
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
overflow: 'hidden',
|
||||
...extraStyle,
|
||||
'&::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
@ -129,6 +134,7 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
|
||||
controlHeightSM,
|
||||
colorBgTextActive,
|
||||
colorPickerPresetColorSize,
|
||||
colorPickerPreviewSize,
|
||||
lineWidth,
|
||||
colorBorder,
|
||||
paddingXXS,
|
||||
@ -138,25 +144,24 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
|
||||
return [
|
||||
{
|
||||
[componentCls]: {
|
||||
[`${componentCls}-panel`]: {
|
||||
[`${componentCls}-inner-content`]: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: colorPickerWidth,
|
||||
|
||||
[`${componentCls}-inner-panel`]: {
|
||||
[`${componentCls}-clear`]: {
|
||||
marginInlineStart: 'auto',
|
||||
marginBottom: marginXS,
|
||||
},
|
||||
'&-divider': {
|
||||
margin: `${marginSM}px 0 ${marginXS}px`,
|
||||
},
|
||||
'&-divider': {
|
||||
margin: `${marginSM}px 0 ${marginXS}px`,
|
||||
},
|
||||
|
||||
...genPickerStyle(token),
|
||||
[`${componentCls}-panel`]: {
|
||||
...genPickerStyle(token),
|
||||
},
|
||||
...genColorBlockStyle(token, colorPickerPreviewSize),
|
||||
...genInputStyle(token),
|
||||
...genPresetsStyle(token),
|
||||
...genClearStyle(token, colorPickerPresetColorSize),
|
||||
...genClearStyle(token, colorPickerPresetColorSize, {
|
||||
marginInlineStart: 'auto',
|
||||
marginBottom: marginXS,
|
||||
}),
|
||||
},
|
||||
|
||||
'&-trigger': {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
import genColorBlockStyle, { getTransBg } from './color-block';
|
||||
import { getTransBg } from './color-block';
|
||||
import type { ColorPickerToken } from './index';
|
||||
|
||||
const genPickerStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
|
||||
@ -16,7 +16,6 @@ const genPickerStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
|
||||
colorPickerHandlerSize,
|
||||
colorPickerHandlerSizeSM,
|
||||
colorPickerSliderHeight,
|
||||
colorPickerPreviewSize,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
@ -69,8 +68,6 @@ const genPickerStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
|
||||
flex: 1,
|
||||
},
|
||||
},
|
||||
|
||||
...genColorBlockStyle(token, colorPickerPreviewSize),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -73,7 +73,7 @@ const genPresetsStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
|
||||
boxSizing: 'border-box',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
insetInlineStart: '22.5%',
|
||||
insetInlineStart: '21.5%',
|
||||
display: 'table',
|
||||
width: (colorPickerPresetColorSize / 13) * 5,
|
||||
height: (colorPickerPresetColorSize / 13) * 8,
|
||||
|
||||
@ -149,10 +149,10 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-panel"
|
||||
class="ant-color-picker-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-inner-panel"
|
||||
class="ant-color-picker-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-select"
|
||||
@ -233,149 +233,229 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-input-container"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-input-container"
|
||||
class="ant-select ant-select-sm ant-select-borderless ant-select-in-form-item ant-color-picker-format-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-sm ant-select-borderless ant-select-in-form-item ant-color-picker-format-select ant-select-single ant-select-show-arrow"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<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;"
|
||||
<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"
|
||||
>
|
||||
<div>
|
||||
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
|
||||
id="rc_select_TEST_OR_SSR_list"
|
||||
role="listbox"
|
||||
style="height: 0px; width: 0px; overflow: hidden;"
|
||||
aria-label="HEX"
|
||||
aria-selected="true"
|
||||
id="rc_select_TEST_OR_SSR_list_0"
|
||||
role="option"
|
||||
>
|
||||
<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>
|
||||
hex
|
||||
</div>
|
||||
<div
|
||||
class="rc-virtual-list"
|
||||
style="position: relative;"
|
||||
aria-label="HSB"
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_1"
|
||||
role="option"
|
||||
>
|
||||
<div
|
||||
class="rc-virtual-list-holder"
|
||||
style="max-height: 256px; overflow-y: auto;"
|
||||
>
|
||||
<div>
|
||||
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
|
||||
class="rc-virtual-list-holder-inner"
|
||||
style="display: flex; flex-direction: column;"
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||
title="HEX"
|
||||
>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||
title="HEX"
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
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
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="HSB"
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
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
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="RGB"
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
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-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
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-input-number-in-form-item 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-select-suffix"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -395,98 +475,18 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-input"
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<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-input-number-in-form-item 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>
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user