docs(table): add table use of checkbox

yehuozhili · Jul 6, 2020 · f5f9265 · f5f9265
1 parent f4c5b16
commit f5f9265
Show file tree

Hide file tree

Showing 4 changed files with 218 additions and 8 deletions.
diff --git a/src/components/CheckBox/checkbox.tsx b/src/components/CheckBox/checkbox.tsx
@@ -1,4 +1,4 @@
-import React, { useState, PropsWithChildren, useMemo } from "react";
+import React, { useState, PropsWithChildren, useMemo, CSSProperties } from "react";
 import classnames from "classnames";
 
 interface CheckBoxProps {
@@ -18,6 +18,8 @@ interface CheckBoxProps {
 	parentState?: Array<boolean>;
 	/** 是否显示文字 */
 	text?: boolean;
+	/** 外层容器样式，有时可能需要把box-shadow设置none*/
+	style?: CSSProperties;
 }
 
 function CheckBox(props: PropsWithChildren<CheckBoxProps>) {
@@ -29,6 +31,7 @@ function CheckBox(props: PropsWithChildren<CheckBoxProps>) {
 		disableIndex,
 		parentSetStateCallback,
 		parentState,
+		style,
 		text
 	} = props;
 	const classes = classnames("bigbear-checkbox-wrapper", className);
@@ -49,7 +52,7 @@ function CheckBox(props: PropsWithChildren<CheckBoxProps>) {
 	}, [data.length, defaultIndexArr]);
 	const [state, setState] = useState<Array<boolean>>(initArr);
 	return (
-		<div className={classes}>
+		<div className={classes} style={style}>
 			{data.map((value, index) => {
 				const judgeStateIndex = parentState ? parentState[index] : state[index];
 				return (

diff --git a/src/components/Table/table.example.tsx b/src/components/Table/table.example.tsx
@@ -1,6 +1,10 @@
-import React from "react";
-import { SourceDataType } from "./table";
+import React, { useState } from "react";
+import Table, { SourceDataType } from "./table";
 import Button from "../Button";
+import CheckBox from "../CheckBox";
+import InputNumber from "../InputNumber";
+import Popconfirm from "../Popconfirm";
+import { stat } from "fs";
 
 export const columns = [
 	{
@@ -132,3 +136,98 @@ export const columnsRender = [
 		render: (data: number) => <Button>{data}</Button>
 	}
 ];
+
+function TableCheckbox() {
+	const data = [
+		{
+			key: "1",
+			lesson: "react",
+			checked: true
+		},
+		{
+			key: "2",
+			lesson: "vue",
+			checked: false
+		},
+		{
+			key: "3",
+			lesson: "math",
+			checked: false
+		},
+		{
+			key: "4",
+			lesson: "english",
+			checked: false
+		}
+	];
+	const [state, setState] = useState<SourceDataType[]>(data);
+	const columns = [
+		{
+			title: (
+				<div>
+					<div>全选</div>
+					<CheckBox
+						data={[""]}
+						parentState={
+							state.filter((v) => v.checked === true).length === data.length
+								? [true]
+								: [false]
+						}
+						style={{ boxShadow: "none", background: "none" }}
+						text={false}
+						parentSetStateCallback={(e: boolean[], i: number) => {
+							let tmp = state.map((v) => {
+								v.checked = !e[0];
+								return v;
+							});
+							setState([...tmp]);
+						}}
+					/>
+				</div>
+			),
+			dataIndex: "count",
+			render: (_val: number, row: SourceDataType) => (
+				<CheckBox
+					data={[""]}
+					parentState={[state.find((v) => v.key === row.key)!.checked]}
+					style={{ boxShadow: "none", background: "none" }}
+					text={false}
+					parentSetStateCallback={(e: boolean[]) => {
+						let tmp = state;
+						tmp.find((v) => v.key === row.key)!.checked = !e[0];
+						setState([...tmp]);
+					}}
+				/>
+			)
+		},
+		{
+			title: "商品",
+			dataIndex: "lesson",
+			render: (val: string) => (
+				<>
+					<p>{val}</p>
+				</>
+			)
+		},
+		{
+			title: "操作",
+			dataIndex: "option",
+			render: () => (
+				<Popconfirm
+					title="是否要删除商品?"
+					directions="LEFT"
+					callback={(v: boolean) => {}}
+					okText="是"
+					cancelText="否"
+					wrapperNode={
+						<Button size="sm" btnType="danger">
+							删除
+						</Button>
+					}
+				></Popconfirm>
+			)
+		}
+	];
+	return <Table columns={columns} data={data}></Table>;
+}
+export { TableCheckbox };
diff --git a/src/components/Table/table.stories.mdx b/src/components/Table/table.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
 import  Tabel  from './table';
-import {data,columns,longdata,longcolumns,longlongdata,columnsRender} from './table.example'
+import {data,columns,longdata,longcolumns,longlongdata,columnsRender,TableCheckbox} from './table.example'
 
 
 <Meta title='DISPLAY | Tabel 表格' component={Tabel} />
@@ -162,6 +162,110 @@ export const columnsRender = [
     </Story>
 </Preview>
 
+## checkbox封装demo
+
+<Preview>
+    <Story name='checkbox'> 
+        <TableCheckbox />
+    </Story>
+</Preview>
+
+```typescript
+function TableCheckbox() {
+	const data = [
+		{
+			key: "1",
+			lesson: "react",
+			checked: true
+		},
+		{
+			key: "2",
+			lesson: "vue",
+			checked: false
+		},
+		{
+			key: "3",
+			lesson: "math",
+			checked: false
+		},
+		{
+			key: "4",
+			lesson: "english",
+			checked: false
+		}
+	];
+	const [state, setState] = useState<SourceDataType[]>(data);
+	const columns = [
+		{
+			title: (
+				<div>
+					<div>全选</div>
+					<CheckBox
+						data={[""]}
+						parentState={
+							state.filter((v) => v.checked === true).length === data.length
+								? [true]
+								: [false]
+						}
+						style={{ boxShadow: "none", background: "none" }}
+						text={false}
+						parentSetStateCallback={(e: boolean[], i: number) => {
+							let tmp = state.map((v) => {
+								v.checked = !e[0];
+								return v;
+							});
+							setState([...tmp]);
+						}}
+					/>
+				</div>
+			),
+			dataIndex: "count",
+			render: (_val: number, row: SourceDataType) => (
+				<CheckBox
+					data={[""]}
+					parentState={[state.find((v) => v.key === row.key)!.checked]}
+					style={{ boxShadow: "none", background: "none" }}
+					text={false}
+					parentSetStateCallback={(e: boolean[]) => {
+						let tmp = state;
+						tmp.find((v) => v.key === row.key)!.checked = !e[0];
+						setState([...tmp]);
+					}}
+				/>
+			)
+		},
+		{
+			title: "商品",
+			dataIndex: "lesson",
+			render: (val: string) => (
+				<>
+					<p>{val}</p>
+				</>
+			)
+		},
+		{
+			title: "操作",
+			dataIndex: "option",
+			render: () => (
+				<Popconfirm
+					title="是否要删除商品?"
+					directions="LEFT"
+					callback={(v: boolean) => {}}
+					okText="是"
+					cancelText="否"
+					wrapperNode={
+						<Button size="sm" btnType="danger">
+							删除
+						</Button>
+					}
+				></Popconfirm>
+			)
+		}
+	];
+	return <Table columns={columns} data={data}></Table>;
+}
+export { TableCheckbox };
+```
 
 
 ## 属性详情

diff --git a/src/components/Table/table.tsx b/src/components/Table/table.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect, ReactNode } from "react";
+import React, { useState, useMemo, useEffect, ReactNode, CSSProperties } from "react";
 import Icon from "../Icon";
 import Pagination from "../Pagination";
 
@@ -13,6 +13,10 @@ export interface TableProps {
 	pagination?: boolean;
 	/** 开启页码时才有效，设置每页显示几个*/
 	pageSize?: number;
+	/** 外层容器类名*/
+	className?: string;
+	/** 外层容器样式*/
+	style?: CSSProperties;
 }
 
 export interface SourceDataType {
@@ -51,7 +55,7 @@ const MapData = (data: SourceDataType[], columnData: ColumnType[]) => {
 };
 
 function Table(props: TableProps) {
-	const { data, columns, sorted, pagination, pageSize } = props;
+	const { data, columns, sorted, pagination, pageSize, className, style } = props;
 	const [sourceData, setSourceData] = useState<SourceDataType[]>([]);
 	const [columnData, setColumnData] = useState<ColumnType[]>([]);
 	const [sortedData, setSortedData] = useState<SourceDataType[]>([]);
@@ -100,7 +104,7 @@ function Table(props: TableProps) {
 		}
 	}, [originPagination, sortedData]);
 	return (
-		<div className="bigbear-table-container">
+		<div className={`bigbear-table-container ${className ? className : ""}`} style={style}>
 			<div className="bigbear-table-wrapper">
 				<table className="bigbear-table-table">
 					<thead className="bigbear-table-head">