feat(checkbox): v14

scripts/build-taro.mjs

@@ -68,6 +68,7 @@ async function buildES(p) {
     [
       'src/packages/**/*.taro.{ts,tsx}',
       'src/packages/**/types.ts',
+      'src/packages/**/icon.tsx',
       'src/packages/**/context.ts',
       'src/packages/**/utils.ts',
       'src/utils/**/*.{ts,tsx}',

src/packages/checkbox/checkbox.scss

@@ -1,46 +1,82 @@
 @import '../checkboxgroup/checkboxgroup.scss';
 
-.nut-checkbox {
-  display: flex;
-  align-items: center;
+.nut-checkbox-self {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 50%;
+
+  &-normal {
+    border: 0.5px solid $color-text-disabled;
+    background: $color-background-overlay;
+  }
 
-  &-icon {
-    color: $color-text-disabled;
-    font-size: $checkbox-icon-font-size;
+  &-checked,
+  &-disabled,
+  &-checked-disabled {
+    &:after {
+      display: block;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: ' ';
+      background: $color-primary-text;
+    }
   }
 
-  &-icon-checked {
-    color: $color-primary;
-    transition-duration: 0.3s;
-    transition-property: color, border-color, background-color;
+  &-checked {
+    background: linear-gradient(
+      90deg,
+      $color-primary-stop-1 0%,
+      $color-primary-stop-2 100%
+    );
+    box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+
+    &:after {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+  }
+
+  &-disabled {
+    background: $color-text-disabled;
 
-    &.nut-checkbox-icon-disabled {
-      color: $color-primary-disabled-special;
+    &:after {
+      width: 8px;
+      height: 1.5px;
     }
   }
 
+  &-checked-disabled {
+    background: $color-primary-disabled-special;
+
+    &:after {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+  }
+}
+
+.nut-checkbox {
+  display: flex;
+  align-items: center;
+
   &-label {
     margin-left: $checkbox-label-margin-left;
     font-size: $checkbox-label-font-size;
     color: $checkbox-label-color;
+    white-space: nowrap;
 
     &-disabled {
       color: $color-text-disabled;
     }
   }
 
-  &-icon-indeterminate {
-    color: $color-primary;
-
-    &.nut-checkbox-icon-disabled {
-      color: $color-primary-disabled-special;
-    }
-  }
-
-  &-icon-disabled {
-    color: $color-text-disabled;
-  }
-
   &-reverse {
     flex-direction: row-reverse;
 

src/packages/checkbox/checkbox.taro.tsx

@@ -1,11 +1,11 @@
 import React, { ReactNode, useContext, useEffect, useState, FC } from 'react'
-import { CheckDisabled, Checked, CheckNormal } from '@nutui/icons-react-taro'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import Context from '../checkboxgroup/context'
 import { usePropsValue } from '@/utils/use-props-value'
 import { CheckboxLabelPosition } from '@/packages/checkboxgroup/types'
+import Icon from '@/packages/checkbox/icon'
 
 export type CheckboxShape = 'button' | 'round'
 
@@ -97,31 +97,31 @@ export const Checkbox: FC<
   const renderIcon = () => {
     if (innerDisabled) {
       if (innerIndeterminate) {
-        return <CheckDisabled className={color()} />
+        return <Icon tag={View} name="disabled" />
       }
       if (innerChecked) {
-        return <Checked className={color()} />
+        return <Icon tag={View} name="checked-disabled" />
       }
-      return <CheckDisabled className={color()} />
+      return <Icon tag={View} name="disabled" />
     }
     if (!innerChecked) {
       return React.isValidElement(icon) ? (
         icon
       ) : (
-        <CheckNormal className={color()} />
+        <Icon tag={View} name="normal" />
       )
     }
     if (innerIndeterminate) {
       return React.isValidElement(indeterminateIcon) ? (
         indeterminateIcon
       ) : (
-        <CheckDisabled className={color()} />
+        <Icon tag={View} name="disabled" />
       )
     }
     return React.isValidElement(activeIcon) ? (
       activeIcon
     ) : (
-      <Checked className={color()} />
+      <Icon tag={View} name="checked" />
     )
   }
   const color = () => {

src/packages/checkbox/checkbox.tsx

@@ -5,12 +5,12 @@ import React, {
   useEffect,
   useState,
 } from 'react'
-import { CheckDisabled, Checked, CheckNormal } from '@nutui/icons-react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import Context from '../checkboxgroup/context'
 import { usePropsValue } from '@/utils/use-props-value'
 import { CheckboxLabelPosition } from '@/packages/checkboxgroup/types'
+import Icon from '@/packages/checkbox/icon'
 
 export type CheckboxShape = 'button' | 'round'
 
@@ -102,52 +102,29 @@ export const Checkbox: FunctionComponent<
   const renderIcon = () => {
     if (innerDisabled) {
       if (innerIndeterminate) {
-        return <CheckDisabled className={color()} />
+        return <Icon name="disabled" />
       }
       if (innerChecked) {
-        return <Checked className={color()} />
+        return <Icon name="checked-disabled" />
       }
-      return <CheckDisabled className={color()} />
+      return <Icon name="disabled" />
     }
     if (!innerChecked) {
-      return React.isValidElement(icon) ? (
-        icon
-      ) : (
-        <CheckNormal className={color()} />
-      )
+      return React.isValidElement(icon) ? icon : <Icon name="normal" />
     }
     if (innerIndeterminate) {
       return React.isValidElement(indeterminateIcon) ? (
         indeterminateIcon
       ) : (
-        <CheckDisabled className={color()} />
+        <Icon name="disabled" />
       )
     }
     return React.isValidElement(activeIcon) ? (
       activeIcon
     ) : (
-      <Checked className={color()} />
+      <Icon name="checked" />
     )
   }
-  const color = () => {
-    const cls = `${classPrefix}-icon `
-    if (innerDisabled) {
-      if (innerChecked && !innerIndeterminate) {
-        return `${cls}${classPrefix}-icon-checked ${classPrefix}-icon-disabled`
-      }
-      if (innerChecked && innerIndeterminate) {
-        return `${cls}${classPrefix}-icon-indeterminate ${classPrefix}-icon-disabled`
-      }
-      return `${cls}${classPrefix}-icon-disabled`
-    }
-    if (innerChecked) {
-      if (innerIndeterminate) {
-        return `${cls}${classPrefix}-icon-indeterminate`
-      }
-      return `${cls}${classPrefix}-icon-checked`
-    }
-    return cls
-  }
   const renderLabel = () => {
     return (
       <span

src/packages/checkbox/icon.tsx

@@ -0,0 +1,24 @@
+import { createElement } from 'react'
+import { mergeProps } from '@/utils/merge-props'
+
+interface IconProps {
+  tag: any
+  classPrefix: string
+  name: 'normal' | 'disabled' | 'checked' | 'checked-disabled'
+}
+
+const Icon = (props: Partial<IconProps>) => {
+  const { tag, classPrefix, name } = mergeProps(
+    {
+      tag: 'div',
+      classPrefix: 'nut-checkbox-self',
+      name: 'normal',
+    },
+    props
+  )
+  return createElement<{ className: string }>(tag, {
+    className: `${classPrefix} ${classPrefix}-${name}`,
+  })
+}
+
+export default Icon