refactor(Checker): refactor with composition api

src/checkbox/Checker.js

@@ -1,147 +0,0 @@
-import { addUnit } from '../utils';
-import Icon from '../icon';
-
-export const checkerProps = {
-  name: null,
-  disabled: Boolean,
-  iconSize: [Number, String],
-  modelValue: null,
-  checkedColor: String,
-  labelPosition: String,
-  labelDisabled: Boolean,
-  shape: {
-    type: String,
-    default: 'round',
-  },
-  bindGroup: {
-    type: Boolean,
-    default: true,
-  },
-};
-
-export default {
-  props: {
-    ...checkerProps,
-    bem: Function,
-    role: String,
-    parent: Object,
-    checked: Boolean,
-  },
-
-  emits: ['click', 'toggle'],
-
-  computed: {
-    isDisabled() {
-      return (this.parent && this.parent.disabled) || this.disabled;
-    },
-
-    direction() {
-      return (this.parent && this.parent.direction) || null;
-    },
-
-    iconStyle() {
-      const checkedColor =
-        this.checkedColor || (this.parent && this.parent.checkedColor);
-
-      if (checkedColor && this.checked && !this.isDisabled) {
-        return {
-          borderColor: checkedColor,
-          backgroundColor: checkedColor,
-        };
-      }
-    },
-
-    tabindex() {
-      return this.isDisabled ? -1 : 0;
-    },
-
-    disableBindRelation() {
-      return !this.bindGroup;
-    },
-  },
-
-  methods: {
-    onClick(event) {
-      const { target } = event;
-      const { icon } = this.$refs;
-      const iconClicked = icon === target || icon.contains(target);
-
-      if (!this.isDisabled && (iconClicked || !this.labelDisabled)) {
-        this.$emit('toggle');
-
-        // wait for toggle method to complete
-        // so we can get the changed value in the click event listener
-        setTimeout(() => {
-          this.$emit('click', event);
-        });
-      } else {
-        this.$emit('click', event);
-      }
-    },
-
-    genIcon() {
-      const { checked } = this;
-      const iconSize = this.iconSize || (this.parent && this.parent.iconSize);
-
-      return (
-        <div
-          ref="icon"
-          class={this.bem('icon', [
-            this.shape,
-            { disabled: this.isDisabled, checked },
-          ])}
-          style={{ fontSize: addUnit(iconSize) }}
-        >
-          {this.$slots.icon ? (
-            this.$slots.icon({ checked })
-          ) : (
-            <Icon name="success" style={this.iconStyle} />
-          )}
-        </div>
-      );
-    },
-
-    genLabel() {
-      if (this.$slots.default) {
-        return (
-          <span
-            class={this.bem('label', [
-              this.labelPosition,
-              { disabled: this.isDisabled },
-            ])}
-          >
-            {this.$slots.default()}
-          </span>
-        );
-      }
-    },
-  },
-
-  render() {
-    const Children = [this.genIcon()];
-
-    if (this.labelPosition === 'left') {
-      Children.unshift(this.genLabel());
-    } else {
-      Children.push(this.genLabel());
-    }
-
-    return (
-      <div
-        role={this.role}
-        class={this.bem([
-          {
-            disabled: this.isDisabled,
-            'label-disabled': this.labelDisabled,
-          },
-          this.direction,
-        ])}
-        tabindex={this.tabindex}
-        aria-checked={String(this.checked)}
-        onClick={this.onClick}
-      >
-        {Children}
-      </div>
-    );
-  },
-};

src/checkbox/Checker.tsx

@@ -0,0 +1,136 @@
+import { ref, computed, defineComponent } from 'vue';
+import { addUnit } from '../utils';
+import Icon from '../icon';
+
+export const checkerProps = {
+  name: null,
+  disabled: Boolean,
+  iconSize: [Number, String],
+  modelValue: null,
+  checkedColor: String,
+  labelPosition: String,
+  labelDisabled: Boolean,
+  shape: {
+    type: String,
+    default: 'round',
+  },
+};
+
+export default defineComponent({
+  props: {
+    ...checkerProps,
+    role: String,
+    parent: Object,
+    checked: Boolean,
+    bem: {
+      type: Function,
+      required: true,
+    },
+  },
+
+  emits: ['click', 'toggle'],
+
+  setup(props, { emit, slots }) {
+    const iconRef = ref();
+
+    const disabled = computed(
+      () => (props.parent && props.parent.disabled) || props.disabled
+    );
+
+    const direction = computed(
+      () => (props.parent && props.parent.direction) || null
+    );
+
+    const iconStyle = computed(() => {
+      const checkedColor =
+        props.checkedColor || (props.parent && props.parent.checkedColor);
+
+      if (checkedColor && props.checked && !disabled.value) {
+        return {
+          borderColor: checkedColor,
+          backgroundColor: checkedColor,
+        };
+      }
+    });
+
+    const onClick = (event: MouseEvent) => {
+      const { target } = event;
+      const icon = iconRef.value;
+      const iconClicked = icon === target || icon.contains(target);
+
+      if (!disabled.value && (iconClicked || !props.labelDisabled)) {
+        emit('toggle');
+
+        // wait for toggle method to complete
+        // so we can get the changed value in the click event listener
+        setTimeout(() => {
+          emit('click', event);
+        });
+      } else {
+        emit('click', event);
+      }
+    };
+
+    const renderIcon = () => {
+      const { bem, shape, parent, checked } = props;
+      const iconSize = props.iconSize || (parent && parent.iconSize);
+
+      return (
+        <div
+          ref={iconRef}
+          class={bem('icon', [shape, { disabled: disabled.value, checked }])}
+          style={{ fontSize: addUnit(iconSize) }}
+        >
+          {slots.icon ? (
+            slots.icon({ checked })
+          ) : (
+            <Icon name="success" style={iconStyle.value} />
+          )}
+        </div>
+      );
+    };
+
+    const renderLabel = () => {
+      if (slots.default) {
+        return (
+          <span
+            class={props.bem('label', [
+              props.labelPosition,
+              { disabled: disabled.value },
+            ])}
+          >
+            {slots.default()}
+          </span>
+        );
+      }
+    };
+
+    return () => {
+      const nodes: (JSX.Element | undefined)[] = [renderIcon()];
+
+      if (props.labelPosition === 'left') {
+        nodes.unshift(renderLabel());
+      } else {
+        nodes.push(renderLabel());
+      }
+
+      return (
+        <div
+          role={props.role}
+          class={props.bem([
+            {
+              disabled: disabled.value,
+              'label-disabled': props.labelDisabled,
+            },
+            direction.value,
+          ])}
+          tabindex={disabled.value ? -1 : 0}
+          aria-checked={props.checked}
+          onClick={onClick}
+        >
+          {nodes}
+        </div>
+      );
+    };
+  },
+});

src/checkbox/index.js

@@ -8,7 +8,13 @@ const [createComponent, bem] = createNamespace('checkbox');
 export default createComponent({
   mixins: [FieldMixin, ChildrenMixin('vanCheckbox')],
 
-  props: checkerProps,
+  props: {
+    ...checkerProps,
+    bindGroup: {
+      type: Boolean,
+      default: true,
+    },
+  },
 
   emits: ['change', 'update:modelValue'],