refactor(checkbox):重构多选框 (#863，#845)

package.json

@@ -4,11 +4,11 @@
   "homepage": "https://uiwjs.github.io",
   "private": true,
   "scripts": {
-    "lib": "lerna exec --scope @uiw/react-button -- tsbb build --target react",
-    "lib:css": "lerna exec --scope @uiw/react-button -- compile-less -d src -o esm",
-    "lib:css:dist": "lerna exec --scope @uiw/react-button -- compile-less -d src -o lib --combine=dist.css",
-    "lib:css:watch": "lerna exec --scope @uiw/react-button -- compile-less -d src -o esm --watch",
-    "lib:watch": "lerna exec --scope @uiw/react-button -- tsbb watch ",
+    "lib": "lerna exec --scope @uiw/react-checkbox -- tsbb build --target react",
+    "lib:css": "lerna exec --scope @uiw/react-checkbox -- compile-less -d src -o esm",
+    "lib:css:dist": "lerna exec --scope @uiw/react-checkbox -- compile-less -d src -o lib --combine=dist.css",
+    "lib:css:watch": "lerna exec --scope @uiw/react-checkbox -- compile-less -d src -o esm --watch",
+    "lib:watch": "lerna exec --scope @uiw/react-checkbox -- tsbb watch ",
     "lib:bootstrap": "lerna bootstrap --hoist --scope @uiw/react-button",
     "lib:build": "npm run lib && npm run lib:css && npm run lib:css:dist",
     "//>>>>>>>>>>>>": "<<<<<<<<<<",

packages/react-checkbox/src/Checkbox.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { RadioAbstract, RadioAbstractProps } from '@uiw/react-radio';
 import { CheckboxGroup } from './Group';
-import './style/index.less';
+import { CheckboxBase } from './style';
+// import './style/index.less';
 
 export interface CheckboxProps extends RadioAbstractProps {
   indeterminate?: boolean;
@@ -20,7 +21,8 @@ function InternalCheckbox(props: CheckboxProps, ref: React.ForwardedRef<HTMLInpu
 
   const cls = [className, indeterminate && 'indeterminate'].filter(Boolean).join(' ').trim();
   return (
-    <RadioAbstract
+    <CheckboxBase
+      as={RadioAbstract}
       ref={ref}
       {...other}
       type={type}

packages/react-checkbox/src/Group.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo, useRef } from 'react';
 import { IProps, HTMLDivProps } from '@uiw/utils';
-import './style/group.less';
+import { CheckGroupBase } from './style';
+// import './style/group.less';
 
 export type Value = string | number;
 export interface CheckboxGroupPorps extends IProps, Omit<HTMLDivProps, 'onChange'> {
@@ -16,7 +17,7 @@ export const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupPorps
   const childs = React.Children.toArray(props.children);
   useMemo(() => (valueRef.current = value || []), [value]);
   return (
-    <div {...other} className={cls} ref={ref}>
+    <CheckGroupBase {...other} className={cls} ref={ref}>
       {React.Children.map(childs, (element: React.ReactNode) => {
         if (!React.isValidElement(element)) return;
         if (
@@ -49,6 +50,6 @@ export const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupPorps
           }),
         );
       })}
-    </div>
+    </CheckGroupBase>
   );
 });

packages/react-checkbox/src/style/index.ts

@@ -0,0 +1,107 @@
+import styled, { css } from 'styled-components';
+import { RadioAbstractProps, RadioText } from '@uiw/react-radio';
+
+export interface CheckboxBaseProps extends RadioAbstractProps {
+  disabled?: boolean;
+  indeterminate?: boolean;
+}
+
+const disabledCss = ({ disabled }: CheckboxBaseProps) => {
+  return (
+    disabled &&
+    css`
+      input[type='checkbox'] {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+      ${RadioText} {
+        color: #6e6e6e;
+      }
+    `
+  );
+};
+
+const indeterminateCss = ({ indeterminate }: CheckboxBaseProps) => {
+  return (
+    indeterminate &&
+    css`
+      input[type='checkbox']:checked {
+        background-color: transparent;
+        box-shadow: inset 0 0 0 1px rgb(0, 142, 240);
+        &:after {
+          display: inline-block;
+          background-color: #008df8;
+          box-sizing: inherit;
+          transform: rotate(0);
+          position: relative;
+          top: -1px;
+          right: -3px;
+          border-width: 0;
+          border-radius: 2px;
+          height: 8px;
+          width: 8px;
+        }
+      }
+    `
+  );
+};
+
+const CheckGroupBase = styled.div<CheckboxBaseProps>`
+  vertical-align: middle;
+  font-size: 0;
+  cursor: pointer;
+  white-space: nowrap;
+`;
+
+const CheckboxBase = styled.div<CheckboxBaseProps>`
+  display: inline-block;
+  input[type='checkbox'] {
+    vertical-align: middle;
+    outline: none;
+    width: 14px;
+    height: 14px;
+    font-size: 14px;
+    line-height: 14px;
+    border-radius: 2px;
+    background-clip: border-box;
+    appearance: none;
+    margin: 0 !important;
+    background-color: #d7d7d7;
+    transition: background-color 0.3s, box-shadow 0.3s;
+    &:after {
+      content: '';
+      box-sizing: inherit;
+    }
+    &:not(:checked):not(:disabled):not(.disabled) {
+      &:focus,
+      &:hover {
+        box-shadow: inset 0 1px 2px rgba(16, 22, 26, 0.35);
+      }
+    }
+  }
+  ${disabledCss}
+  ${indeterminateCss}
+  input[type='checkbox']:checked {
+    background-color: #008ef0;
+    &:after {
+      transition: background-color 0.2s ease-in;
+      display: inline-block;
+      border: solid #fff;
+      border-width: 0 2px 2px 0;
+      transform: rotate(33deg);
+      position: relative;
+      top: -1px;
+      right: -4px;
+      height: 10px;
+      width: 6px;
+    }
+  }
+  ${RadioText} {
+    display: inline-block;
+    padding-left: 4px;
+    margin-right: 5px;
+    font-size: 14px;
+  }
+`;
+
+export { CheckGroupBase, CheckboxBase };

packages/react-radio/src/index.ts

@@ -2,6 +2,7 @@ export * from './Radio';
 export * from './RadioGroup';
 export * from './RadioAbstract';
 export * from './RadioButton';
+export * from './style';
 export { default as Radio } from './Radio';
 export { default as RadioGroup } from './RadioGroup';
 export { default as RadioButton } from './RadioButton';