Skip to content

Commit 8d3cd04

Browse files
chenshuai2144chenshuai2144
committed
fix(form): ColorPicker use antd style-n
1 parent 973ac28 commit 8d3cd04

File tree

4 files changed

+92
-27
lines changed

4 files changed

+92
-27
lines changed

‎packages/field/src/components/ColorPicker/index.tsx

+26-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import type { SketchPickerProps } from '@chenshuai2144/sketch-color';
1+
import { useStyle } from '@ant-design/pro-provider';
2+
import type { SketchPickerProps } from '@chenshuai2144/sketch-color';
23
import { SketchPicker } from '@chenshuai2144/sketch-color';
34
import { ConfigProvider, Popover, PopoverProps, theme } from 'antd';
45

@@ -37,22 +38,36 @@ const ColorPicker = React.forwardRef(
3738
) => {
3839
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
3940
const prefixCls = getPrefixCls('pro-field-color-picker');
41+
4042
const { token } = theme.useToken();
4143
const [color, setColor] = useMergedState('#1890ff', {
4244
value: rest.value,
4345
onChange: rest.onChange,
4446
});
4547

46-
const readDom = (
47-
<div
48-
className={prefixCls}
49-
style={{
50-
padding: 5,
51-
width: 48,
48+
const { wrapSSR, hashId } = useStyle('ProFiledColorPicker' + color, () => {
49+
return {
50+
[`.${prefixCls}`]: {
51+
width: 32,
52+
height: 32,
53+
display: 'flex',
54+
alignItems: 'center',
55+
justifyContent: 'center',
5256
boxSizing: 'border-box',
5357
border: `1px solid ${token.colorSplit}`,
5458
borderRadius: token.borderRadius,
55-
cursor: rest.disabled ? 'pointer' : 'not-allowed',
59+
'&:hover': {
60+
borderColor: color,
61+
},
62+
},
63+
};
64+
});
65+
66+
const readDom = wrapSSR(
67+
<div
68+
className={`${prefixCls} ${hashId}`.trim()}
69+
style={{
70+
cursor: rest.disabled ? 'not-allowed' : 'pointer',
5671
backgroundColor: rest.disabled
5772
? token.colorBgContainerDisabled
5873
: token.colorBgContainer,
@@ -61,13 +76,13 @@ const ColorPicker = React.forwardRef(
6176
<div
6277
style={{
6378
backgroundColor: color,
64-
width: 36,
79+
width: 24,
6580
boxSizing: 'border-box',
66-
height: 14,
81+
height: 24,
6782
borderRadius: token.borderRadius,
6883
}}
6984
/>
70-
</div>
85+
</div>,
7186
);
7287

7388
useImperativeHandle(ref, () => {});

‎tests/field/__snapshots__/demo.test.ts.snap

+11-9
Original file line numberDiff line numberDiff line change
@@ -266,10 +266,10 @@ exports[`field demos 📸 renders ./packages/field/src/demos/base.tsx correctly
266266
>
267267
<div
268268
class="ant-pro-field-color-picker"
269-
style="padding: 5px; width: 48px; border: 1px solid #ddd; border-radius: 2px; cursor: pointer;"
269+
style="cursor: pointer; background-color: rgb(255, 255, 255);"
270270
>
271271
<div
272-
style="background-color: blue; width: 36px; height: 14px; border-radius: 2px;"
272+
style="background-color: blue; width: 24px; box-sizing: border-box; height: 24px; border-radius: 6px;"
273273
/>
274274
</div>
275275
</span>
@@ -1657,14 +1657,16 @@ exports[`field demos 📸 renders ./packages/field/src/demos/base_test.tsx corre
16571657
<span
16581658
class="ant-descriptions-item-content"
16591659
>
1660-
<div
1661-
class="ant-pro-field-color-picker"
1662-
style="padding: 5px; width: 48px; border: 1px solid #ddd; border-radius: 2px; cursor: pointer;"
1663-
>
1660+
<span>
16641661
<div
1665-
style="background-color: rgb(24, 144, 255); width: 36px; height: 14px; border-radius: 2px;"
1666-
/>
1667-
</div>
1662+
class="ant-pro-field-color-picker"
1663+
style="cursor: pointer; background-color: rgb(255, 255, 255);"
1664+
>
1665+
<div
1666+
style="background-color: rgb(24, 144, 255); width: 24px; box-sizing: border-box; height: 24px; border-radius: 6px;"
1667+
/>
1668+
</div>
1669+
</span>
16681670
</span>
16691671
</div>
16701672
</td>

‎tests/form/__snapshots__/demo.test.ts.snap

+46
Original file line numberDiff line numberDiff line change
@@ -2957,6 +2957,7 @@ exports[`form demos 📸 renders ./packages/form/src/components/FieldSet/demos/c
29572957
</div>
29582958
<div
29592959
class="ant-space-item"
2960+
style="margin-right: 32px;"
29602961
>
29612962
<div
29622963
class="ant-form-item"
@@ -3112,6 +3113,51 @@ exports[`form demos 📸 renders ./packages/form/src/components/FieldSet/demos/c
31123113
</div>
31133114
</div>
31143115
</div>
3116+
<div
3117+
class="ant-space-item"
3118+
>
3119+
<div
3120+
class="ant-form-item"
3121+
>
3122+
<div
3123+
class="ant-row ant-form-item-row"
3124+
>
3125+
<div
3126+
class="ant-col ant-form-item-label"
3127+
>
3128+
<label
3129+
class=""
3130+
for="validate_other_color"
3131+
title="颜色选择"
3132+
>
3133+
颜色选择
3134+
</label>
3135+
</div>
3136+
<div
3137+
class="ant-col ant-form-item-control"
3138+
>
3139+
<div
3140+
class="ant-form-item-control-input"
3141+
>
3142+
<div
3143+
class="ant-form-item-control-input-content"
3144+
>
3145+
<span>
3146+
<div
3147+
class="ant-pro-field-color-picker"
3148+
style="cursor: pointer; background-color: rgb(255, 255, 255);"
3149+
>
3150+
<div
3151+
style="background-color: rgb(24, 144, 255); width: 24px; box-sizing: border-box; height: 24px; border-radius: 6px;"
3152+
/>
3153+
</div>
3154+
</span>
3155+
</div>
3156+
</div>
3157+
</div>
3158+
</div>
3159+
</div>
3160+
</div>
31153161
</div>
31163162
</div>
31173163
</div>

‎tests/layout/__snapshots__/demo.test.ts.snap

+9-7
Original file line numberDiff line numberDiff line change
@@ -1432,14 +1432,16 @@ exports[`layout demos 📸 renders ./packages/layout/src/components/WaterMark/de
14321432
<div
14331433
class="ant-form-item-control-input-content"
14341434
>
1435-
<div
1436-
class="ant-pro-field-color-picker"
1437-
style="padding: 5px; width: 48px; border: 1px solid #ddd; border-radius: 2px; cursor: pointer;"
1438-
>
1435+
<span>
14391436
<div
1440-
style="background-color: rgba(0, 0, 0, 0.15); width: 36px; height: 14px; border-radius: 2px;"
1441-
/>
1442-
</div>
1437+
class="ant-pro-field-color-picker"
1438+
style="cursor: pointer; background-color: rgb(255, 255, 255);"
1439+
>
1440+
<div
1441+
style="background-color: rgba(0, 0, 0, 0.15); width: 24px; box-sizing: border-box; height: 24px; border-radius: 6px;"
1442+
/>
1443+
</div>
1444+
</span>
14431445
</div>
14441446
</div>
14451447
</div>

0 commit comments

Comments
 (0)