From a4c6d59fdde71b93227232760952199d68112857 Mon Sep 17 00:00:00 2001
From: fikyair <shiming_xsm@163.com>
Date: Sat, 30 Oct 2021 12:07:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=A0=E5=85=A5=20table=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Message/message.stories.tsx    |   2 +-
 .../Pagination/pagination.stories.tsx         |   2 +-
 src/components/Progress/progress.stories.tsx  |   2 +-
 src/components/Table/index.tsx                |   3 +
 src/components/Table/style.scss               |  47 ++++
 src/components/Table/style.ts                 |   2 +
 src/components/Table/table-doc.mdx            |  30 +++
 src/components/Table/table.stories.tsx        | 210 ++++++++++++++++++
 src/components/Table/table.tsx                | 114 ++++++++++
 src/styles/_variables.scss                    |  14 +-
 src/styles/index.scss                         |   7 +-
 11 files changed, 426 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Table/index.tsx
 create mode 100644 src/components/Table/style.scss
 create mode 100644 src/components/Table/style.ts
 create mode 100644 src/components/Table/table-doc.mdx
 create mode 100644 src/components/Table/table.stories.tsx
 create mode 100644 src/components/Table/table.tsx

diff --git a/src/components/Message/message.stories.tsx b/src/components/Message/message.stories.tsx
index dc85c860..d5452359 100644
--- a/src/components/Message/message.stories.tsx
+++ b/src/components/Message/message.stories.tsx
@@ -13,7 +13,7 @@ const BaseMessage = () => {
   return (
     <div className="container">
       <div className="item">
-        <Card title="基本使用" style={cardCss} shadow>
+        <Card title="基础使用" style={cardCss} shadow>
           <div style={textCss}>用作页面信息反馈</div>
           <Button
             onClick={() => Message.info({ content: "这是一条普通的提示" })}
diff --git a/src/components/Pagination/pagination.stories.tsx b/src/components/Pagination/pagination.stories.tsx
index da51d82b..0b512f83 100644
--- a/src/components/Pagination/pagination.stories.tsx
+++ b/src/components/Pagination/pagination.stories.tsx
@@ -15,7 +15,7 @@ const BaseProgress = () => {
 
   return (
     <div style={{ display: "flex", flexWrap: "wrap" }}>
-      <Card title="基本使用" style={cardCss} shadow>
+      <Card title="基础使用" style={cardCss} shadow>
         <div>pageSize：{pageSize}</div>
         <div>pageNo：{pageNo}</div>
         <Pagination
diff --git a/src/components/Progress/progress.stories.tsx b/src/components/Progress/progress.stories.tsx
index ccf0d001..527f18bc 100644
--- a/src/components/Progress/progress.stories.tsx
+++ b/src/components/Progress/progress.stories.tsx
@@ -15,7 +15,7 @@ const BaseProgress = () => {
   return (
     <div className="container">
       <div className="item">
-        <Card title="基本使用" style={cardCss} shadow>
+        <Card title="基础使用" style={cardCss} shadow>
           <Progress
             percent={60}
             theme="primary"
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
new file mode 100644
index 00000000..7311df9d
--- /dev/null
+++ b/src/components/Table/index.tsx
@@ -0,0 +1,3 @@
+import Table from "./table";
+
+export default Table;
diff --git a/src/components/Table/style.scss b/src/components/Table/style.scss
new file mode 100644
index 00000000..1d5b9173
--- /dev/null
+++ b/src/components/Table/style.scss
@@ -0,0 +1,47 @@
+@import "../../styles/mixin";
+@import "../../styles/variables";
+@import "../../styles/reboot";
+
+.chocolate-table {
+  &-origin-table {
+    width: 100%;
+    border-collapse: collapse;
+    border-radius: $table-border-radius;
+  }
+
+  &-bordered {
+    .chocolate-table-origin-table {
+
+      th,
+      td {
+        border: 1px solid $table-border-color;
+      }
+    }
+  }
+
+  .chocolate-table-origin-table {
+    border: 1px solid $table-border-color;
+  }
+
+  &-thead {
+    tr>th {
+      background-color: $table-bg-color;
+      color: $table-font-color;
+      font-size: $font-size-base;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &-thead>tr>th,
+  &-tbody>tr>td {
+    padding: 9px;
+    text-align: left;
+    border-bottom: 1px solid $table-border-color;
+    transition: all $table-default-transition;
+  }
+
+  &-stripe>td {
+    background-color: $g09;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Table/style.ts b/src/components/Table/style.ts
new file mode 100644
index 00000000..4232a66f
--- /dev/null
+++ b/src/components/Table/style.ts
@@ -0,0 +1,2 @@
+import "./style.scss";
+import "../../styles"
\ No newline at end of file
diff --git a/src/components/Table/table-doc.mdx b/src/components/Table/table-doc.mdx
new file mode 100644
index 00000000..c11e6cb3
--- /dev/null
+++ b/src/components/Table/table-doc.mdx
@@ -0,0 +1,30 @@
+<!-- Table Doc -->
+
+## Table 表格
+
+表格组件 `Table`
+
+import { Story, Meta, ArgsTable, Source } from "@storybook/addon-docs/blocks";
+import { Table } from "./table";
+import dedent from "ts-dedent";
+<Meta title="Components/Table" component={Table} />;
+
+### 使用
+
+<Source
+  language="jsx"
+  code={dedent` 
+    <Table
+      columns={columns}
+      dataSource={dataSource}
+      showHeader
+      bordered
+    />
+  `}
+/>
+
+### 具体参数
+
+<ArgsTable of={Table} />
+
+export const Template = (args) => <Table {...args} />
diff --git a/src/components/Table/table.stories.tsx b/src/components/Table/table.stories.tsx
new file mode 100644
index 00000000..05033b7a
--- /dev/null
+++ b/src/components/Table/table.stories.tsx
@@ -0,0 +1,210 @@
+import React, { useState } from "react";
+import { Meta, Story } from "@storybook/react";
+import Card from "../Card/card";
+import Table, { TableProps } from "./table";
+import "../../styles/common.stories";
+import Button from "../Button";
+import {
+  DescriptionBrave,
+  DescriptionEle,
+  DescriptionMoon,
+} from "../../utils/constants";
+import TableDoc from "./table-doc.mdx";
+
+const BaseTabs = () => {
+  const [stripe, setStripe] = useState(false);
+  const [bordered, setBordered] = useState(false);
+  const cardCss = { margin: "20px 20px 0 0" };
+  const columns = [
+    {
+      title: "书名",
+      dataIndex: "name",
+      key: "name",
+      hStyle: { width: 150 },
+      cStyle: {},
+    },
+    {
+      title: "简介",
+      dataIndex: "intro",
+      key: "intro",
+      hStyle: {},
+      cStyle: {},
+    },
+    {
+      title: "豆瓣评分",
+      dataIndex: "score",
+      key: "score",
+      hStyle: { width: 140 },
+      cStyle: {},
+    },
+    {
+      title: "操作",
+      dataIndex: "opt",
+      key: "opt",
+      hStyle: {},
+      cStyle: {},
+    },
+  ];
+  const dataSource = [
+    {
+      name: (
+        <a
+          href="https://book.douban.com/subject/20260640/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          《象与骑象人》
+        </a>
+      ),
+      intro: <div>{DescriptionEle}</div>,
+      score: (
+        <div style={{ textAlign: "center" }}>
+          <div>
+            8.1 分
+            <span
+              style={{
+                color: "#999999",
+                fontSize: 12,
+              }}
+            >
+              {" "}
+              2521人评价
+            </span>
+          </div>
+        </div>
+      ),
+      opt: (
+        <div style={{ display: "flex" }}>
+          <Button btnType="primary" style={{ flex: 1, marginRight: 7 }}>
+            添加
+          </Button>
+          <Button btnType="danger" style={{ flex: 1 }}>
+            删除
+          </Button>
+        </div>
+      ),
+    },
+    {
+      name: (
+        <a
+          href="https://book.douban.com/subject/26369699/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          《被讨厌的勇气》
+        </a>
+      ),
+      intro: <div>{DescriptionBrave}</div>,
+      score: (
+        <div style={{ textAlign: "center" }}>
+          <div>
+            8.6 分
+            <span
+              style={{
+                color: "#999999",
+                fontSize: 12,
+              }}
+            >
+              {" "}
+              71596人评价
+            </span>
+          </div>
+        </div>
+      ),
+      opt: (
+        <div style={{ display: "flex" }}>
+          <Button btnType="primary" style={{ flex: 1, marginRight: 7 }}>
+            添加
+          </Button>
+          <Button btnType="danger" style={{ flex: 1 }}>
+            删除
+          </Button>
+        </div>
+      ),
+    },
+    {
+      name: (
+        <a
+          href="https://book.douban.com/subject/1858513/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          《月亮和六便士》
+        </a>
+      ),
+      intro: <div>{DescriptionMoon}</div>,
+      score: (
+        <div style={{ textAlign: "center" }}>
+          <div>
+            9.0 分
+            <span
+              style={{
+                color: "#999999",
+                fontSize: 12,
+              }}
+            >
+              {" "}
+              170874人评价
+            </span>
+          </div>
+        </div>
+      ),
+      opt: (
+        <div style={{ display: "flex" }}>
+          <Button btnType="primary" style={{ flex: 1, marginRight: 7 }}>
+            添加
+          </Button>
+          <Button btnType="danger" style={{ flex: 1 }}>
+            删除
+          </Button>
+        </div>
+      ),
+    },
+  ];
+  return (
+    <div className="container">
+      <div className="item">
+        <Card title="基础使用" style={cardCss} shadow>
+          <Table
+            columns={columns}
+            dataSource={dataSource}
+            showHeader
+            bordered={bordered}
+            stripe={stripe}
+          />
+          <Button onClick={() => setStripe(!stripe)} style={{ marginTop: 20 }}>
+            {stripe ? "取消隔行条纹" : "展示隔行条纹"}
+          </Button>
+          <Button
+            onClick={() => setBordered(!bordered)}
+            style={{ marginTop: 20, marginLeft: 20 }}
+            btnType="primary"
+          >
+            {bordered ? "取消表格边框" : "展示表格边框"}
+          </Button>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  component: Table,
+  title: "Table 表格",
+  parameters: {
+    docs: {
+      page: TableDoc,
+      source: {
+        type: "code",
+      },
+    },
+    controls: {
+      include: [],
+      hideNoControlsWarning: true,
+    },
+  },
+} as Meta;
+
+const _default: Story<TableProps> = () => <BaseTabs />;
+
+export const Primary = _default.bind({});
diff --git a/src/components/Table/table.tsx b/src/components/Table/table.tsx
new file mode 100644
index 00000000..2714c461
--- /dev/null
+++ b/src/components/Table/table.tsx
@@ -0,0 +1,114 @@
+import cls from "classnames";
+import React, { ReactNode, CSSProperties } from "react";
+
+export interface ColumnsType {
+  title: string;
+  render?: (value: string, item: string, index: number) => ReactNode;
+  key: string;
+  dataIndex: string;
+  cStyle?: CSSProperties;
+  hStyle?: CSSProperties;
+}
+
+export interface TableProps {
+  /**
+   * 列
+   */
+  columns: Array<ColumnsType>;
+  /**
+   * 数据源
+   */
+  dataSource: any[];
+  /**
+   * 是否有边框
+   */
+  bordered?: boolean;
+  /**
+   * 展示标题
+   */
+  showHeader?: boolean;
+  /**
+   * 隔行条纹
+   */
+  stripe?: boolean;
+  /**
+   * 自定义类
+   */
+  className?: string;
+}
+
+const prefixCls = "chocolate-table";
+
+export const Table = (props: TableProps) => {
+  const {
+    className,
+    bordered,
+    columns,
+    showHeader,
+    dataSource,
+    stripe,
+    ...attr
+  } = props;
+  const hasData = () => {
+    return dataSource.length >= 1;
+  };
+
+  const tableBody = () => {
+    return (
+      <tbody className={`${prefixCls}-tbody`}>
+        {dataSource.map((item, index) => {
+          const { key: rowKey = `tbody-${index}` } = columns[index] || {};
+          return (
+            <tr
+              key={rowKey}
+              className={cls({
+                [`${prefixCls}-stripe`]: stripe && (index + 1) % 2 === 0,
+              })}
+            >
+              {columns.map((column) => {
+                const { dataIndex, render, cStyle } = column;
+                const value = item[dataIndex];
+                return (
+                  <td key={`td-${dataIndex}`} style={cStyle}>
+                    {(render && render(value, item, index)) || value}
+                  </td>
+                );
+              })}
+            </tr>
+          );
+        })}
+      </tbody>
+    );
+  };
+
+  const tableHeader = () => {
+    return (
+      <thead className={`${prefixCls}-thead`}>
+        <tr>
+          {columns.map(({ title, hStyle }, index) => {
+            return (
+              <th key={`thead-${index}`} style={hStyle}>
+                {title}
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+    );
+  };
+  return (
+    <div
+      className={cls(prefixCls, className, {
+        [`${prefixCls}-bordered`]: bordered,
+      })}
+      {...attr}
+    >
+      <table className={`${prefixCls}-origin-table`}>
+        {showHeader && tableHeader()}
+        {hasData() && tableBody()}
+      </table>
+    </div>
+  );
+};
+
+export default Table;
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index d559fc93..469fdb31 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -374,7 +374,7 @@ $modal-close-font-size:             20px !default;
 $modal-close-font-color:            fade(red, 45%) !default;
 $modal-mask-color:                  rgba($black, .5);
 $modal-offset-top:                  100px !default;
-$modal-offset-bottom:               100px !default; // 超长 modal 距离底部的距离
+$modal-offset-bottom:               100px !default;
 $modal-width:                       400px !default;
 $modal-method-width:                420px !default;
 $modal-method-icon-size:            22px !default;
@@ -382,4 +382,14 @@ $modal-method-icon-offset:          10px !default;
 $modal-header-title-padding:        0 30px !default;
 
 // Pagination 分页器
-$pagination-disabled-color:         $g07 !default;     
\ No newline at end of file
+$pagination-disabled-color:         $g07 !default;     
+
+
+// Table 表格
+$table-border-radius: $border-radius          !default;
+$table-border-color: $border-color            !default;
+$table-bg-color: $g09                         !default;
+$table-font-color: $font-color                !default;
+$table-animate-time: $animate-time            !default;
+$table-animate-type: $animate-time            !default;
+$table-default-transition: $animate-time $animate-type;
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index be7c61a7..37b60784 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -61,5 +61,8 @@
 // Pagination
 @import "../components/Pagination/style";
 
-// message
-@import "../components/Message/style";
\ No newline at end of file
+// Message
+@import "../components/Message/style";
+
+// Table
+@import "../components/Table/style";
\ No newline at end of file