fix(form): ColorPicker use antd style-n

ant-design · Jun 9, 2023 · 8d3cd04 · 8d3cd04
1 parent 973ac28
commit 8d3cd04
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 27 deletions.
diff --git a/packages/field/src/components/ColorPicker/index.tsx b/packages/field/src/components/ColorPicker/index.tsx
@@ -1,4 +1,5 @@
-import type { SketchPickerProps } from '@chenshuai2144/sketch-color';
+import { useStyle } from '@ant-design/pro-provider';
+import type { SketchPickerProps } from '@chenshuai2144/sketch-color';
 import { SketchPicker } from '@chenshuai2144/sketch-color';
 import { ConfigProvider, Popover, PopoverProps, theme } from 'antd';
 
@@ -37,22 +38,36 @@ const ColorPicker = React.forwardRef(
   ) => {
     const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
     const prefixCls = getPrefixCls('pro-field-color-picker');
+
     const { token } = theme.useToken();
     const [color, setColor] = useMergedState('#1890ff', {
       value: rest.value,
       onChange: rest.onChange,
     });
 
-    const readDom = (
-      <div
-        className={prefixCls}
-        style={{
-          padding: 5,
-          width: 48,
+    const { wrapSSR, hashId } = useStyle('ProFiledColorPicker' + color, () => {
+      return {
+        [`.${prefixCls}`]: {
+          width: 32,
+          height: 32,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
           boxSizing: 'border-box',
           border: `1px solid ${token.colorSplit}`,
           borderRadius: token.borderRadius,
-          cursor: rest.disabled ? 'pointer' : 'not-allowed',
+          '&:hover': {
+            borderColor: color,
+          },
+        },
+      };
+    });
+
+    const readDom = wrapSSR(
+      <div
+        className={`${prefixCls} ${hashId}`.trim()}
+        style={{
+          cursor: rest.disabled ? 'not-allowed' : 'pointer',
           backgroundColor: rest.disabled
             ? token.colorBgContainerDisabled
             : token.colorBgContainer,
@@ -61,13 +76,13 @@ const ColorPicker = React.forwardRef(
         <div
           style={{
             backgroundColor: color,
-            width: 36,
+            width: 24,
             boxSizing: 'border-box',
-            height: 14,
+            height: 24,
             borderRadius: token.borderRadius,
           }}
         />
-      </div>
+      </div>,
     );
 
     useImperativeHandle(ref, () => {});

diff --git a/tests/field/__snapshots__/demo.test.ts.snap b/tests/field/__snapshots__/demo.test.ts.snap
@@ -266,10 +266,10 @@ exports[`field demos 📸 renders ./packages/field/src/demos/base.tsx correctly
                 >
                   <div
                     class="ant-pro-field-color-picker"
-                    style="padding: 5px; width: 48px; border: 1px solid #ddd; border-radius: 2px; cursor: pointer;"
+                    style="cursor: pointer; background-color: rgb(255, 255, 255);"
                   >
                     <div
-                      style="background-color: blue; width: 36px; height: 14px; border-radius: 2px;"
+                      style="background-color: blue; width: 24px; box-sizing: border-box; height: 24px; border-radius: 6px;"
                     />
                   </div>
                 </span>
@@ -1657,14 +1657,16 @@ exports[`field demos 📸 renders ./packages/field/src/demos/base_test.tsx corre
                 <span
                   class="ant-descriptions-item-content"
                 >
-                  <div
-                    class="ant-pro-field-color-picker"
-                    style="padding: 5px; width: 48px; border: 1px solid #ddd; border-radius: 2px; cursor: pointer;"
-                  >
+                  <span>
                     <div
-                      style="background-color: rgb(24, 144, 255); width: 36px; height: 14px; border-radius: 2px;"
-                    />
-                  </div>
+                      class="ant-pro-field-color-picker"
+                      style="cursor: pointer; background-color: rgb(255, 255, 255);"
+                    >
+                      <div
+                        style="background-color: rgb(24, 144, 255); width: 24px; box-sizing: border-box; height: 24px; border-radius: 6px;"
+                      />
+                    </div>
+                  </span>
                 </span>
               </div>
             </td>

diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
@@ -2957,6 +2957,7 @@ exports[`form demos 📸 renders ./packages/form/src/components/FieldSet/demos/c
             </div>
             <div
               class="ant-space-item"
+              style="margin-right: 32px;"
             >
               <div
                 class="ant-form-item"
@@ -3112,6 +3113,51 @@ exports[`form demos 📸 renders ./packages/form/src/components/FieldSet/demos/c
                 </div>
               </div>
             </div>
+            <div
+              class="ant-space-item"
+            >
+              <div
+                class="ant-form-item"
+              >
+                <div
+                  class="ant-row ant-form-item-row"
+                >
+                  <div
+                    class="ant-col ant-form-item-label"
+                  >
+                    <label
+                      class=""
+                      for="validate_other_color"
+                      title="颜色选择"
+                    >
+                      颜色选择
+                    </label>
+                  </div>
+                  <div
+                    class="ant-col ant-form-item-control"
+                  >
+                    <div
+                      class="ant-form-item-control-input"
+                    >
+                      <div
+                        class="ant-form-item-control-input-content"
+                      >
+                        <span>
+                          <div
+                            class="ant-pro-field-color-picker"
+                            style="cursor: pointer; background-color: rgb(255, 255, 255);"
+                          >
+                            <div
+                              style="background-color: rgb(24, 144, 255); width: 24px; box-sizing: border-box; height: 24px; border-radius: 6px;"
+                            />
+                          </div>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>

diff --git a/tests/layout/__snapshots__/demo.test.ts.snap b/tests/layout/__snapshots__/demo.test.ts.snap
@@ -1432,14 +1432,16 @@ exports[`layout demos 📸 renders ./packages/layout/src/components/WaterMark/de
                       <div
                         class="ant-form-item-control-input-content"
                       >
-                        <div
-                          class="ant-pro-field-color-picker"
-                          style="padding: 5px; width: 48px; border: 1px solid #ddd; border-radius: 2px; cursor: pointer;"
-                        >
+                        <span>
                           <div
-                            style="background-color: rgba(0, 0, 0, 0.15); width: 36px; height: 14px; border-radius: 2px;"
-                          />
-                        </div>
+                            class="ant-pro-field-color-picker"
+                            style="cursor: pointer; background-color: rgb(255, 255, 255);"
+                          >
+                            <div
+                              style="background-color: rgba(0, 0, 0, 0.15); width: 24px; box-sizing: border-box; height: 24px; border-radius: 6px;"
+                            />
+                          </div>
+                        </span>
                       </div>
                     </div>
                   </div>