refactor(usersTable): adjust litte

Author: mydearxym

components/MaybeCell/index.js

@@ -14,24 +14,26 @@ const debug = makeDebugger('c:MaybeCell:index')
 /* eslint-enable no-unused-vars */
 
 export const NoneText = styled.div`
-  text-align: center;
+  text-align: ${({ align }) => align};
   font-size: 0.8rem;
   color: lightgrey;
   font-style: italic;
 `
-const MaybeCell = ({ text }) => {
+const MaybeCell = ({ text, align }) => {
   if (isEmptyNil(text)) {
-    return <NoneText>暂无</NoneText>
+    return <NoneText align={align}>--</NoneText>
   }
   return <div>{text}</div>
 }
 
 MaybeCell.propTypes = {
   text: PropTypes.string,
+  align: PropTypes.oneOf(['left', 'center', 'right']),
 }
 
 MaybeCell.defaultProps = {
   text: '',
+  align: 'center',
 }
 
 export default MaybeCell

components/UsersTable/index.js

@@ -47,6 +47,29 @@ class UsersTable extends React.PureComponent {
           return <UserCell user={user} left="20px" />
         },
       },
+      {
+        title: '城市',
+        dataIndex: 'location',
+        align: 'left',
+        width: 120,
+        render: text => <MaybeCell text={text} align="left" />,
+      },
+      {
+        title: 'email',
+        dataIndex: 'email',
+        align: 'left',
+        width: 150,
+        render: text => <MaybeCell text={text} align="left" />,
+      },
+      {
+        title: '社交账号',
+        dataIndex: 'social',
+        align: 'center',
+        width: 150,
+        render: () => {
+          return <div>hello</div>
+        },
+      },
       {
         title: '关注社区',
         dataIndex: 'subscribedCommunitiesCount',
@@ -80,20 +103,6 @@ class UsersTable extends React.PureComponent {
           <PermissionCell source={record} onMutate={cmsPermisstionOnChange} />
         ),
       },
-      {
-        title: 'email',
-        dataIndex: 'email',
-        align: 'center',
-        width: 100,
-        render: text => <MaybeCell text={text} />,
-      },
-      {
-        title: '位置',
-        dataIndex: 'location',
-        align: 'center',
-        width: 220,
-        render: text => <MaybeCell text={text} />,
-      },
       {
         title: '时间戳',
         width: 120,
@@ -106,6 +115,8 @@ class UsersTable extends React.PureComponent {
   render() {
     const { data, loading, pageOnChange } = this.props
 
+    console.log('UsersTable data: ', data)
+
     return (
       <React.Fragment>
         {data ? (