console.log(e.target.checked)}
+ disabled={disabled}
+ checked={checked}
+ defaultValue={defaultValue}
+ indeterminate={indeterminate}
+ isButton={isButton}
+ size={size}
+ >
+ 香蕉
+ `
+ }
+/>
+
+### 具体参数
+
+
+export const Template = (args) =>
+
+
+### 组件展示
+
+##### 默认
+
+
+{Template.bind({})}
+
\ No newline at end of file
diff --git a/src/components/Checkbox/checkbox.stories.tsx b/src/components/Checkbox/checkbox.stories.tsx
index 0b91b23d..f6fe5622 100644
--- 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 (
+
基本使用
console.log(e.target.checked)}
disabled={disabled}
@@ -18,46 +26,64 @@ const BaseCheckbox = (props: CheckboxProps) => {
indeterminate={indeterminate}
isButton={isButton}
size={size}
- >香蕉
+ style={{ marginRight: 20 }}
+ >
+ 香蕉
+
+ 禁用
console.log(e.target.checked)}
+ checked={true}
disabled={true}
- >香蕉1
+ >
+ 葡萄
+
+ 不确定
console.log(e.target.checked)}
checked={true}
- disabled={true}
- >香蕉2
+ indeterminate={true}
+ >
+ 橘子
+
{CheckboxGroup(props as CheckboxGroupProps)}
- {CheckButton(props)}
+ {/* {CheckButton(props)} */}
);
};
const CheckboxGroup = (props: CheckboxGroupProps) => {
return (
- {
- console.log(value, 'value');
- }}>
- 黄瓜
- 茄子
-
- 玉米
-
-
- 番茄
-
-
+
+
组合 && 默认选中
+ {
+ console.log(value, "value");
+ }}
+ >
+
+ 苹果
+
+
+ 茄子
+
+
+ 玉米
+
+ 番茄
+
+
);
};
const CheckButton = (props: CheckboxProps) => {
return (
- 黄瓜 ui
- 黄瓜 ui
+
按钮模式
+ 苹果
+ 茄子
- 黄瓜 ui
+ 玉米
);
@@ -66,6 +92,14 @@ const CheckButton = (props: CheckboxProps) => {
export default {
component: BaseCheckbox,
title: "Checkbox",
+ parameters: {
+ docs: {
+ page: CheckBox,
+ source: {
+ type: 'code'
+ }
+ }
+ },
decorators: [
(Story) => (
diff --git a/src/components/Tree/tree-doc.mdx b/src/components/Tree/tree-doc.mdx
index 2af4cabd..b5b76709 100644
--- a/src/components/Tree/tree-doc.mdx
+++ b/src/components/Tree/tree-doc.mdx
@@ -33,6 +33,12 @@ export const Template = (args) =>
### 组件展示
+##### 基础
+
+
+{Template.bind({})}
+
+
##### 有默认值
diff --git a/src/components/Tree/tree-node.tsx b/src/components/Tree/tree-node.tsx
index 564df5e6..6408bc25 100644
--- a/src/components/Tree/tree-node.tsx
+++ b/src/components/Tree/tree-node.tsx
@@ -88,10 +88,12 @@ const TreeNode: FC = (props) => {
onChange={(e) => {
onNodeCheck && onNodeCheck(e, key);
}}
- />
+ >
+ {name}
+
) : null}
{/* {icon} */}
- {name}
+ { checkable ? null : name }
);
};
diff --git a/src/components/Tree/tree.stories.tsx b/src/components/Tree/tree.stories.tsx
index 6772f722..9b1c6202 100644
--- 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
index a261c941..53de37f8 100644
--- a/src/components/Tree/tree.tsx
+++ b/src/components/Tree/tree.tsx
@@ -132,6 +132,7 @@ export const Tree: FC = (props) => {
checkedKeyEntity = parseCheckedKeys(checkedKeysState) || {};
firstRender.current = false;
}
+ setCheckedKeysState(checkedKeyEntity?.checkedKeys || [])
}
if (checkedKeyEntity) {