feat: add checkbox 组件

ChocolateUI · Sep 1, 2021 · b8187a9 · b8187a9
1 parent 866969c
commit b8187a9
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 25 deletions.
diff --git a/src/components/Checkbox/checkbox-doc.mdx b/src/components/Checkbox/checkbox-doc.mdx
@@ -0,0 +1,41 @@
+<!-- CheckBox Doc -->
+## 复选框
+
+import { Story, Meta, ArgsTable, Source } from '@storybook/addon-docs/blocks';
+import { CheckboxComponent } from './checkbox';
+import dedent from 'ts-dedent';
+<Meta title="Components/CheckBox" component={CheckboxComponent} />;
+
+### 使用
+
+<Source
+  language='jsx'
+  code={
+    dedent`
+    <Checkbox
+        onChange={(e) => console.log(e.target.checked)}
+        disabled={disabled}
+        checked={checked}
+        defaultValue={defaultValue}
+        indeterminate={indeterminate}
+        isButton={isButton}
+        size={size}
+      >
+        香蕉
+      </Checkbox>`
+  }
+/>
+
+### 具体参数
+<ArgsTable of={CheckboxComponent} />
+
+export const Template = (args) => <CheckboxComponent {...args} />
+
+
+### 组件展示
+
+##### 默认
+
+<Story name="default-value" id="checkbox--default">
+{Template.bind({})}
+</Story>
diff --git a/src/components/Checkbox/checkbox.stories.tsx b/src/components/Checkbox/checkbox.stories.tsx
@@ -4,12 +4,20 @@ import { action } from "@storybook/addon-actions";
 import { CheckboxProps } from "./checkbox";
 import Checkbox from "./index";
 import { CheckboxGroupProps } from "./checkboxGroup";
-
+import CheckBox from './checkbox-doc.mdx'
 
 const BaseCheckbox = (props: CheckboxProps) => {
-  const { disabled, checked, defaultValue, indeterminate, size, isButton } = props;
+  const {
+    disabled,
+    checked,
+    defaultValue,
+    indeterminate,
+    size,
+    isButton,
+  } = props;
   return (
     <div>
+      <h6>基本使用</h6>
       <Checkbox
         onChange={(e) => console.log(e.target.checked)}
         disabled={disabled}
@@ -18,46 +26,64 @@ const BaseCheckbox = (props: CheckboxProps) => {
         indeterminate={indeterminate}
         isButton={isButton}
         size={size}
-      >香蕉</Checkbox>
+        style={{ marginRight: 20 }}
+      >
+        香蕉
+      </Checkbox>
+      <h6 style={{ marginTop: 50 }}>禁用</h6>
       <Checkbox
         onChange={(e) => console.log(e.target.checked)}
+        checked={true}
         disabled={true}
-      >香蕉1</Checkbox>
+      >
+        葡萄
+      </Checkbox>
+      <h6 style={{ marginTop: 50 }}>不确定</h6>
       <Checkbox
         onChange={(e) => console.log(e.target.checked)}
         checked={true}
-        disabled={true}
-      >香蕉2</Checkbox>
+        indeterminate={true}
+      >
+        橘子
+      </Checkbox>
       {CheckboxGroup(props as CheckboxGroupProps)}
-      {CheckButton(props)}
+      {/* {CheckButton(props)} */}
     </div>
   );
 };
 
 const CheckboxGroup = (props: CheckboxGroupProps) => {
   return (
-    <Checkbox.Group onChange={(value: string[]) => {
-      console.log(value, 'value');
-    }}>
-      <Checkbox value="黄瓜" checked>黄瓜</Checkbox>
-      <Checkbox value="茄子" isButton={true}>茄子</Checkbox>
-      <Checkbox value="玉米" indeterminate={true} checked>
-        玉米
-      </Checkbox>
-      <Checkbox value="番茄">
-        番茄
-      </Checkbox>
-    </Checkbox.Group>
+    <div>
+      <h6 style={{ marginTop: 50 }}>组合 && 默认选中</h6>
+      <Checkbox.Group
+        onChange={(value: string[]) => {
+          console.log(value, "value");
+        }}
+      >
+        <Checkbox value="苹果" checked  style={{ marginRight: 20 }}>
+          苹果
+        </Checkbox>
+        <Checkbox value="茄子" isButton={true} style={{ marginRight: 20 }}>
+          茄子
+        </Checkbox>
+        <Checkbox value="玉米" indeterminate={false} checked style={{ marginRight: 20 }}>
+          玉米
+        </Checkbox>
+        <Checkbox value="番茄">番茄</Checkbox>
+      </Checkbox.Group>
+    </div>
   );
 };
 
 const CheckButton = (props: CheckboxProps) => {
   return (
     <div>
-      <Checkbox.Button>黄瓜 ui</Checkbox.Button>
-      <Checkbox.Button>黄瓜 ui</Checkbox.Button>
+      <h6 style={{ marginTop: 50 }}>按钮模式</h6>
+      <Checkbox.Button style={{ marginRight: 20 }}>苹果</Checkbox.Button>
+      <Checkbox.Button style={{ marginRight: 20 }}>茄子</Checkbox.Button>
       <Checkbox.Button checked disabled>
-        黄瓜 ui
+        玉米
       </Checkbox.Button>
     </div>
   );
@@ -66,6 +92,14 @@ const CheckButton = (props: CheckboxProps) => {
 export default {
   component: BaseCheckbox,
   title: "Checkbox",
+  parameters: {
+    docs: {
+      page: CheckBox,
+      source: {
+        type: 'code'
+      }
+    }
+  },
   decorators: [
     (Story) => (
       <div>

diff --git a/src/components/Tree/tree-doc.mdx b/src/components/Tree/tree-doc.mdx
@@ -33,6 +33,12 @@ export const Template = (args) => <Tree {...args} />
 
 ### 组件展示
 
+##### 基础
+
+<Story name="default-value" id="tree--primary">
+{Template.bind({})}
+</Story>
+
 ##### 有默认值
 
 <Story name="default-value" id="tree--default-value">

diff --git a/src/components/Tree/tree-node.tsx b/src/components/Tree/tree-node.tsx
@@ -88,10 +88,12 @@ const TreeNode: FC<TreeNodeProps> = (props) => {
             onChange={(e) => {
               onNodeCheck && onNodeCheck(e, key);
             }}
-          />
+          >
+            {name}
+          </Checkbox>
         ) : null}
         {/* {icon} */}
-        {name}
+        { checkable ? null : name }
       </span>
     );
   };

diff --git a/src/components/Tree/tree.stories.tsx b/src/components/Tree/tree.stories.tsx
@@ -68,7 +68,7 @@ DefaultValue.args = {
   treeData: singleData,
   checkedKeys: [],
   checkable: true,
-  defaultCheckedKeys: ["0-0-0-0-0", "0-0-0-0-1"],
+  defaultCheckedKeys: ["0-0-0-0-1"],
 };
 
 // multipleParent

diff --git a/src/components/Tree/tree.tsx b/src/components/Tree/tree.tsx
@@ -132,6 +132,7 @@ export const Tree: FC<TreeProps> = (props) => {
         checkedKeyEntity = parseCheckedKeys(checkedKeysState) || {};
         firstRender.current = false;
       }
+      setCheckedKeysState(checkedKeyEntity?.checkedKeys || [])
     }
 
     if (checkedKeyEntity) {