fix(form): Fix the display style of the switch

close #5740
ant-design · Jul 14, 2023 · 8cdeda4 · 8cdeda4
1 parent adb75e0
commit 8cdeda4
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 1 deletion.
diff --git a/packages/field/src/components/Switch/index.tsx b/packages/field/src/components/Switch/index.tsx
@@ -6,6 +6,7 @@ import React, { useMemo } from 'react';
 import type { ProFieldFC } from '../../index';
 
 // 兼容代码-----------
+import { FieldLabel } from '@ant-design/pro-utils';
 import 'antd/lib/switch/style';
 //------------
 
@@ -15,7 +16,7 @@ import 'antd/lib/switch/style';
  * @param
  */
 const FieldSwitch: ProFieldFC<{ text: boolean; fieldProps?: SwitchProps }> = (
-  { text, mode, render, renderFormItem, fieldProps },
+  { text, mode, render, light, label, renderFormItem, fieldProps },
   ref,
 ) => {
   const intl = useIntl();
@@ -38,10 +39,33 @@ const FieldSwitch: ProFieldFC<{ text: boolean; fieldProps?: SwitchProps }> = (
     const editDom = (
       <Switch
         ref={ref}
+        size={light ? 'small' : undefined}
         {...Omit(fieldProps, ['value'])}
         checked={fieldProps?.checked ?? fieldProps?.value}
       />
     );
+    if (light) {
+      const { disabled, bordered } = fieldProps;
+      return (
+        <FieldLabel
+          label={label}
+          disabled={disabled}
+          bordered={bordered}
+          downIcon={false}
+          value={
+            <div
+              style={{
+                paddingLeft: 8,
+              }}
+            >
+              {editDom}
+            </div>
+          }
+          allowClear={false}
+        />
+      );
+    }
+
     if (renderFormItem) {
       return renderFormItem(text, { mode, ...fieldProps }, editDom);
     }

diff --git a/packages/form/src/components/QueryFilter/demos/light-filter.tsx b/packages/form/src/components/QueryFilter/demos/light-filter.tsx
@@ -185,6 +185,7 @@ export default () => {
           label="区域"
           initialValue={['zhejiang', 'hangzhou', 'xihu']}
         />
+        <ProFormSwitch name="open" label="开关" />
         <ProFormDigit name="count" label="数量" />
         <ProFormSlider name="range" label="范围" range />
         <ProFormSlider name="slider" label="范围" />

diff --git a/packages/form/src/components/Switch/index.tsx b/packages/form/src/components/Switch/index.tsx
@@ -34,6 +34,7 @@ const ProFormSwitch: React.FC<ProFormSwitchProps> = React.forwardRef(
         filedConfig={{
           valuePropName: 'checked',
           ignoreWidth: true,
+          customLightMode: true,
         }}
         {...rest}
       />

diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
@@ -17655,6 +17655,68 @@ exports[`form demos 📸 renders ./packages/form/src/components/QueryFilter/demo
               </div>
             </div>
           </div>
+          <div
+            class="ant-pro-form-light-filter-item"
+          >
+            <div
+              class="ant-form-item"
+            >
+              <div
+                class="ant-row ant-form-item-row"
+              >
+                <div
+                  class="ant-col ant-form-item-control"
+                >
+                  <div
+                    class="ant-form-item-control-input"
+                  >
+                    <div
+                      class="ant-form-item-control-input-content"
+                    >
+                      <span
+                        class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-active"
+                      >
+                        <span
+                          style="display: inline-flex; align-items: center;"
+                        >
+                          <span
+                            class="ant-pro-core-field-label-text"
+                          >
+                            开关: 
+                          </span>
+                          <div
+                            style="padding-left: 8px;"
+                          >
+                            <button
+                              aria-checked="false"
+                              class="ant-switch ant-switch-small"
+                              id="open"
+                              role="switch"
+                              type="button"
+                            >
+                              <div
+                                class="ant-switch-handle"
+                              />
+                              <span
+                                class="ant-switch-inner"
+                              >
+                                <span
+                                  class="ant-switch-inner-checked"
+                                />
+                                <span
+                                  class="ant-switch-inner-unchecked"
+                                />
+                              </span>
+                            </button>
+                          </div>
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
             class="ant-pro-form-light-filter-item"
           >