refactor(switch): support customize checked value #4329

components/switch/__tests__/index.test.js

@@ -4,6 +4,7 @@ import focusTest from '../../../tests/shared/focusTest';
 import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import { ref } from 'vue';
+import { asyncExpect } from '@/tests/utils';
 
 describe('Switch', () => {
   focusTest(Switch);
@@ -42,4 +43,31 @@ describe('Switch', () => {
     );
     errorSpy.mockRestore();
   });
+
+  it('customize checked value should work', async () => {
+    resetWarned();
+    const checked = ref(1);
+    const onUpdate = val => (checked.value = val);
+    const wrapper = mount({
+      render() {
+        return (
+          <Switch
+            {...{ 'onUpdate:checked': onUpdate }}
+            checked={checked.value}
+            falseValue={1}
+            trueValue={2}
+          />
+        );
+      },
+    });
+    await asyncExpect(() => {
+      wrapper.find('button').trigger('click');
+    });
+    expect(checked.value).toBe(2);
+
+    await asyncExpect(() => {
+      wrapper.find('button').trigger('click');
+    });
+    expect(checked.value).toBe(1);
+  });
 });

components/switch/index.tsx

@@ -30,7 +30,9 @@ const switchProps = {
   tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   autofocus: PropTypes.looseBool,
   loading: PropTypes.looseBool,
-  checked: PropTypes.looseBool,
+  checked: PropTypes.any,
+  trueValue: PropTypes.any.def(true),
+  falseValue: PropTypes.any.def(false),
   onChange: PropTypes.func,
   onClick: PropTypes.func,
   onKeydown: PropTypes.func,
@@ -59,12 +61,13 @@ const Switch = defineComponent({
         '`value` is not validate prop, do you mean `checked`?',
       );
     });
-    const checked = ref(props.checked !== undefined ? !!props.checked : !!attrs.defaultChecked);
+    const checked = ref(props.checked !== undefined ? props.checked : attrs.defaultChecked);
+    const checkedStatus = computed(() => checked.value === props.trueValue);
 
     watch(
       () => props.checked,
       () => {
-        checked.value = !!props.checked;
+        checked.value = props.checked;
       },
     );
 
@@ -92,29 +95,26 @@ const Switch = defineComponent({
       });
     });
 
-    const setChecked = (check: boolean, e: MouseEvent | KeyboardEvent) => {
+    const setChecked = (check: any, e: MouseEvent | KeyboardEvent) => {
       if (props.disabled) {
         return;
       }
-      if (props.checked === undefined) {
-        checked.value = check;
-      }
       emit('update:checked', check);
       emit('change', check, e);
     };
 
     const handleClick = (e: MouseEvent) => {
       focus();
-      const newChecked = !checked.value;
+      const newChecked = checkedStatus.value ? props.falseValue : props.trueValue;
       setChecked(newChecked, e);
       emit('click', newChecked, e);
     };
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.keyCode === KeyCode.LEFT) {
-        setChecked(false, e);
+        setChecked(props.falseValue, e);
       } else if (e.keyCode === KeyCode.RIGHT) {
-        setChecked(true, e);
+        setChecked(props.trueValue, e);
       }
       emit('keydown', e);
     };
@@ -133,6 +133,8 @@ const Switch = defineComponent({
             'checked',
             'autofocus',
             'defaultChecked',
+            'trueValue',
+            'falseValue',
           ])}
           {...attrs}
           onKeydown={handleKeyDown}
@@ -147,7 +149,7 @@ const Switch = defineComponent({
             [prefixCls.value]: true,
             [`${prefixCls.value}-small`]: props.size === 'small',
             [`${prefixCls.value}-loading`]: props.loading,
-            [`${prefixCls.value}-checked`]: checked.value,
+            [`${prefixCls.value}-checked`]: checkedStatus.value,
             [`${prefixCls.value}-disabled`]: props.disabled,
           }}
           ref={refSwitchNode}