refactor(table): extract general jobs table

Author: mydearxym

components/JobsTable/index.js

@@ -0,0 +1,204 @@
+/*
+ *
+ * JobsTable
+ *
+ */
+
+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, cutFrom } from '../../utils'
+
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('c:JobsTable:index')
+/* eslint-enable no-unused-vars */
+
+class JobsTable 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,
+        dataIndex: 'title',
+        align: 'center',
+        fixed: 'left',
+        render: text => {
+          return <div>{cutFrom(text, 50)}</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="JOB"
+              onDelete={unsetCommunity}
+              onAdd={setCommunity}
+              withSetter
+            />
+          )
+        },
+      },
+      {
+        title: '标签',
+        width: 250,
+        dataIndex: 'tags',
+        align: 'center',
+        render: (tags, record) => (
+          <TagsCell
+            thread="JOB"
+            source={record}
+            onDelete={unsetTag}
+            onAdd={setTag}
+          />
+        ),
+      },
+      {
+        title: '浏览',
+        width: 100,
+        dataIndex: 'views',
+        align: 'center',
+      },
+      {
+        title: '评论数',
+        width: 100,
+        dataIndex: 'commentsCount',
+        align: 'center',
+      },
+      /*
+         {
+         title: '收藏',
+         width: 100,
+         dataIndex: 'favoritedCount',
+         align: 'center',
+         },
+       */
+      {
+        title: '时间戳',
+        width: 120,
+        align: 'center',
+        render: (text, record) => <TimeStampCell data={record} />,
+      },
+      {
+        title: '操作',
+        width: 200,
+        dataIndex: '',
+        align: 'center',
+        render: (text, record) => (
+          <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>
+    )
+  }
+}
+
+JobsTable.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,
+}
+
+JobsTable.defaultProps = {
+  loading: false,
+  pageChange: debug,
+  setCommunity: debug,
+  unsetCommunity: debug,
+  unsetTag: debug,
+  setTag: debug,
+  onEdit: debug,
+  onDelete: debug,
+}
+
+export default JobsTable

components/JobsTable/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/JobsTable/tests/index.test.js

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

containers/CommunitiesBanner/JobsBanner.js

@@ -1,15 +1,14 @@
 import React from 'react'
 
 import { ICON_CMD } from '../../config'
-import { Tag, Popover, BannerCountBrief } from '../../components'
+import { Popover, BannerCountBrief } from '../../components'
 
 import {
   BannerContentWrapper,
   Operation,
   OperationItem,
   OperationDivider,
   OperationTitle,
-  FilterTags,
   OperationIcon,
   OperationIconChart,
 } from './styles/common_banner'
@@ -31,6 +30,11 @@ class JobsBanner extends React.Component {
           thread="招聘贴"
         />
         <Operation>
+          <OperationItem onClick={console.log}>
+            <OperationIconChart src={`${ICON_CMD}/refresh.svg`} />
+            刷新
+          </OperationItem>
+          <OperationDivider />
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/filter2.svg`} />
             <Popover
@@ -39,10 +43,6 @@ class JobsBanner extends React.Component {
             >
               <OperationTitle>过滤</OperationTitle>
             </Popover>
-            <FilterTags>
-              <Tag closable>最多xx</Tag>
-              <Tag closable>最少..</Tag>
-            </FilterTags>
           </OperationItem>
           <OperationDivider />
           <OperationItem onClick={logic.onAdd}>