refactor(table): add reposTable & improve

Author: mydearxym

components/ReposTable/index.js

@@ -0,0 +1,202 @@
+/*
+ *
+ * ReposTable
+ *
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Table, Button } from 'antd'
+
+import Pagi from '../Pagi'
+import { TableLoading } from '../LoadingEffects'
+import { Space } from '../BaseStyled'
+import UserCell from '../UserCell'
+import CommunityCell from '../CommunityCell'
+import TagsCell from '../TagsCell'
+import TimeStampCell from '../TimeStampCell'
+
+import { OperationWrapper } from './styles'
+
+import { makeDebugger, TYPE } from '../../utils'
+
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('c:ReposTable:index')
+/* eslint-enable no-unused-vars */
+
+class ReposTable extends React.PureComponent {
+  columns() {
+    const {
+      setCommunity,
+      unsetCommunity,
+      unsetTag,
+      setTag,
+      onEdit,
+      onDelete,
+    } = this.props
+
+    return [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        align: 'center',
+        width: 80,
+        fixed: 'left',
+      },
+      {
+        title: '标题',
+        width: 300,
+        align: 'left',
+        fixed: 'left',
+        render: (text, record) => (
+          <div>
+            <div>{record.ownerName}</div>
+            <div>{record.title}</div>
+          </div>
+        ),
+      },
+      {
+        title: '作者',
+        width: 200,
+        dataIndex: 'author',
+        align: 'center',
+        render: author => {
+          return <UserCell user={author} />
+        },
+      },
+      {
+        title: '社区',
+        width: 150,
+        dataIndex: 'communities',
+        align: 'center',
+        render: (communities, record) => {
+          return (
+            <CommunityCell
+              array={communities}
+              source={record}
+              thread={TYPE.REPO}
+              onDelete={unsetCommunity}
+              onAdd={setCommunity}
+              withSetter
+            />
+          )
+        },
+      },
+      {
+        title: '标签',
+        width: 250,
+        dataIndex: 'tags',
+        align: 'center',
+        render: (tags, record) => (
+          <TagsCell
+            thread={TYPE.REPO}
+            source={record}
+            onDelete={unsetTag}
+            onAdd={setTag}
+          />
+        ),
+      },
+      {
+        title: '浏览',
+        width: 100,
+        dataIndex: 'views',
+        align: 'center',
+      },
+      {
+        title: '评论数',
+        width: 100,
+        dataIndex: 'commentsCount',
+        align: 'center',
+      },
+      {
+        title: '时间戳',
+        width: 120,
+        align: 'center',
+        render: (text, record) => <TimeStampCell data={record} />,
+      },
+      {
+        title: '操作',
+        width: 200,
+        dataIndex: '',
+        align: 'center',
+        render: (text, record) => {
+          return (
+            <OperationWrapper>
+              <Button
+                size="small"
+                type="primary"
+                ghost
+                onClick={onEdit.bind(this, record)}
+              >
+                编辑
+              </Button>
+              <Space right="10px" />
+              <Button
+                size="small"
+                type="red"
+                ghost
+                onClick={onDelete.bind(this, record)}
+              >
+                删除
+              </Button>
+            </OperationWrapper>
+          )
+        },
+      },
+    ]
+  }
+
+  render() {
+    const { data, loading, pageChange } = this.props
+
+    return (
+      <React.Fragment>
+        {data ? (
+          <div>
+            <Table
+              columns={this.columns()}
+              dataSource={data.entries}
+              scroll={{ x: 2000 }}
+              loading={TableLoading(loading)}
+              pagination={false}
+            />
+            <Pagi
+              left="-10px"
+              pageNumber={data.pageNumber}
+              pageSize={data.pageSize}
+              totalCount={data.totalCount}
+              onChange={pageChange}
+            />
+          </div>
+        ) : null}
+      </React.Fragment>
+    )
+  }
+}
+
+ReposTable.propTypes = {
+  data: PropTypes.any.isRequired,
+  loading: PropTypes.bool,
+  pageChange: PropTypes.func,
+
+  setCommunity: PropTypes.func,
+  unsetCommunity: PropTypes.func,
+  unsetTag: PropTypes.func,
+  setTag: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+}
+
+ReposTable.defaultProps = {
+  loading: false,
+  pageChange: debug,
+
+  setCommunity: debug,
+  unsetCommunity: debug,
+  unsetTag: debug,
+  setTag: debug,
+  onEdit: debug,
+  onDelete: debug,
+}
+
+export default ReposTable

components/ReposTable/styles/index.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+import { Img } from '../..'
+import { theme } from '../../../utils'
+
+export const Wrapper = styled.div`
+  min-height: 800px;
+`
+export const CommunityIcon = styled(Img)`
+  fill: ${theme('banner.title')};
+  width: 30px;
+  height: 30px;
+`
+export const OperationWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`

components/ReposTable/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import ReposTable from '../index'
+
+describe('TODO <ReposTable />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})

components/VideosTable/index.js

@@ -18,7 +18,7 @@ import CommunityCell from '../CommunityCell'
 import TagsCell from '../TagsCell'
 import TimeStampCell from '../TimeStampCell'
 
-import { makeDebugger, cutFrom } from '../../utils'
+import { makeDebugger, cutFrom, TYPE } from '../../utils'
 
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('c:VideosTable:index')
@@ -73,7 +73,7 @@ class VideosTable extends React.Component {
           <CommunityCell
             array={communities}
             source={record}
-            thread="JOB"
+            thread={TYPE.VIDEO}
             onDelete={unsetCommunity}
             onAdd={setCommunity}
             withSetter
@@ -87,7 +87,7 @@ class VideosTable extends React.Component {
         align: 'center',
         render: (tags, record) => (
           <TagsCell
-            thread="JOB"
+            thread={TYPE.VIDEO}
             source={record}
             onDelete={unsetTag}
             onAdd={setTag}