mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

refactor: color-picker panel dom logic (#46327)

Browse Source 
* 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:
红 2023-12-18 13:56:01 +08:00 committed by GitHub
parent a8fc2ec3f3
commit ce7da2ef41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 8981 additions and 8800 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/color-picker/ColorPickerPanel.tsx
View File

@ -15,7 +15,7 @@ interface ColorPickerPanelProps extends ColorPickerBaseProps {
const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
const { prefixCls, presets, panelRender, color, onChange, onClear, ...injectProps } = props;
const colorPickerPanelPrefixCls = `${prefixCls}-inner-content`;
const colorPickerPanelPrefixCls = `${prefixCls}-inner`;
// ==== Inject props ===
const panelPickerProps = {
@ -38,11 +38,11 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
// ====================== Render ======================
const innerPanel = (
<>
<div className={`${colorPickerPanelPrefixCls}-content`}>
<PanelPicker />
{Array.isArray(presets) && <Divider className={`${colorPickerPanelPrefixCls}-divider`} />}
{Array.isArray(presets) && <Divider />}
<PanelPresets />
</>
</div>
);
return (

626
components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

16
components/color-picker/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -212,9 +212,6 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
>
<div
class="ant-space-item"
>
<div
class="ant-row ant-row-middle"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
@ -228,9 +225,6 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
</div>
<div
class="ant-space-item"
>
<div
class="ant-col"
>
<div
class="ant-color-picker-trigger"
@ -247,13 +241,8 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
</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 ant-space-gap-row-small ant-space-gap-col-small"
@ -267,9 +256,6 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
</div>
<div
class="ant-space-item"
>
<div
class="ant-col"
>
<div
class="ant-color-picker-trigger"
@ -287,8 +273,6 @@ exports[`renders components/color-picker/demo/panel-render.tsx correctly 1`] = `
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders components/color-picker/demo/presets.tsx correctly 1`] = `

8
components/color-picker/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -40,10 +40,13 @@ exports[`ColorPicker Should panelRender work 1`] = `
class="ant-popover-inner-content"
>
<div
class="ant-color-picker-inner-content"
class="ant-color-picker-inner"
>
<div
class="custom-panel"
>
<div
class="ant-color-picker-inner-content"
>
<div
class="ant-color-picker-panel"
@ -293,6 +296,7 @@ exports[`ColorPicker Should panelRender work 1`] = `
</div>
</div>
</div>
</div>
`;
exports[`ColorPicker Should panelRender work 2`] = `
@ -323,7 +327,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
class="ant-popover-inner-content"
>
<div
class="ant-color-picker-inner-content"
class="ant-color-picker-inner"
>
<div
class="custom-panel"

3
components/color-picker/__tests__/index.test.tsx
View File

@ -441,7 +441,8 @@ describe('ColorPicker', () => {
/>,
);
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();
});

164
components/color-picker/demo/panel-render.tsx
View File

@ -1,12 +1,52 @@
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 = () => (
<Space direction="vertical">
<Row align="middle">
<Space>
<span>Add title: </span>
<Col>
type Presets = Required<ColorPickerProps>['presets'][number];
const genPresets = (presets = presetPalettes) =>
Object.entries(presets).map<Presets>(([label, colors]) => ({
label,
colors,
}));
const HorizontalLayoutDemo = () => {
const { token } = theme.useToken();
const presets = genPresets({
primary: generate(token.colorPrimary),
red,
green,
cyan,
});
const customPanelRender: ColorPickerProps['panelRender'] = (
_,
{ components: { Picker, Presets } },
) => (
<Row justify="space-between" wrap={false}>
<Col span={12}>
<Presets />
</Col>
<Divider type="vertical" style={{ height: 'auto' }} />
<Col flex="auto">
<Picker />
</Col>
</Row>
);
return (
<ColorPicker
defaultValue={token.colorPrimary}
styles={{ popupOverlayInner: { width: 480 } }}
presets={presets}
panelRender={customPanelRender}
/>
);
};
const BasicDemo = () => (
<ColorPicker
defaultValue="#1677ff"
panelRender={(panel) => (
@ -25,103 +65,17 @@ const Demo = () => (
</div>
)}
/>
</Col>
</Space>
</Row>
<Row align="middle">
<Space>
<span>Horizontal layout: </span>
<Col>
<ColorPicker
defaultValue="#1677ff"
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;
export default () => (
<Space direction="vertical">
<Space>
<span>Add title:</span>
<BasicDemo />
</Space>
<Space>
<span>Horizontal layout:</span>
<HorizontalLayoutDemo />
</Space>
</Space>
);

8
components/color-picker/style/index.ts
View File

@ -156,6 +156,7 @@ const genSizeStyle = (token: ColorPickerToken): CSSObject => {
const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
const {
antCls,
componentCls,
colorPickerWidth,
colorPrimary,
@ -183,14 +184,17 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
return [
{
[componentCls]: {
[`${componentCls}-inner-content`]: {
[`${componentCls}-inner`]: {
'&-content': {
display: 'flex',
flexDirection: 'column',
width: colorPickerWidth,
'&-divider': {
[`& > ${antCls}-divider`]: {
margin: `${unit(marginSM)} 0 ${unit(marginXS)}`,
},
},
[`${componentCls}-panel`]: {
...genPickerStyle(token),
},

8
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -5391,6 +5391,9 @@ Array [
>
<div
class="ant-popover-inner-content"
>
<div
class="ant-color-picker-inner"
>
<div
class="ant-color-picker-inner-content"
@ -5746,6 +5749,7 @@ Array [
</div>
</div>
</div>
</div>
</form>,
]
`;
@ -21310,6 +21314,9 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
>
<div
class="ant-popover-inner-content"
>
<div
class="ant-color-picker-inner"
>
<div
class="ant-color-picker-inner-content"
@ -21662,6 +21669,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
</div>
</div>
</div>
</div>
<div
class="ant-form-item"
>

4
components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -150,6 +150,9 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
>
<div
class="ant-popover-inner-content"
>
<div
class="ant-color-picker-inner"
>
<div
class="ant-color-picker-inner-content"
@ -502,6 +505,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
</div>
</div>
</div>
</div>
<div
class="ant-form-item"
>