feat(usersTable): add social cell

Author: mydearxym

components/SocialSell/index.js

@@ -0,0 +1,47 @@
+/*
+ *
+ * SocialSell
+ *
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import R from 'ramda'
+
+import { ICON_CMD } from 'config'
+import { makeDebugger } from 'utils'
+
+import { Wrapper, SocalIcon } from './styles'
+
+/* eslint-disable-next-line */
+const debug = makeDebugger('c:SocialSell:index')
+
+const SocialSell = ({ data }) => {
+  const validList = []
+
+  R.forEachObjIndexed((v, k) => {
+    if (v) {
+      validList.push({ social: k, value: v })
+    }
+  }, data)
+
+  return (
+    <Wrapper>
+      {validList.map(item => (
+        <div key={item.social}>
+          <a href={item.value} target="_blank" rel="noopener noreferrer">
+            <SocalIcon src={`${ICON_CMD}/${item.social}.svg`} />
+          </a>
+        </div>
+      ))}
+    </Wrapper>
+  )
+}
+
+SocialSell.propTypes = {
+  data: PropTypes.object.isRequired,
+}
+
+SocialSell.defaultProps = {}
+
+export default React.memo(SocialSell)

components/SocialSell/styles/index.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+import Img from 'Img'
+// import { theme } from '@utils'
+
+export const Wrapper = styled.div``
+export const Title = styled.div``
+
+export const SocalIcon = styled(Img)`
+  width: 15px;
+  height: 15px;
+  display: block;
+`

components/SocialSell/tests/index.test.js

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

components/UsersTable/index.js

@@ -13,6 +13,7 @@ import Pagi from '../Pagi'
 import { TableLoading } from '../LoadingEffects'
 import MaybeCell from '../MaybeCell'
 import UserCell from '../UserCell'
+import SocialSell from '../SocialSell'
 import TimeStampCell from '../TimeStampCell'
 
 import PermissionCell from '../PermissionCell'
@@ -66,9 +67,7 @@ class UsersTable extends React.PureComponent {
         dataIndex: 'social',
         align: 'center',
         width: 150,
-        render: () => {
-          return <div>hello</div>
-        },
+        render: data => <SocialSell data={data} />,
       },
       {
         title: '关注社区',