From 92c7b0f6f77de55376aa0f60bcf0e8491fbe158b Mon Sep 17 00:00:00 2001
From: goodmice <av.sirotkin@autodrilling.ru>
Date: Thu, 18 Nov 2021 15:06:23 +0500
Subject: [PATCH] =?UTF-8?q?UserView=20=D0=B8=20Grid=20=D0=BF=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B5=D1=81=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=B0=20tsx?=
 =?UTF-8?q?,=20=D0=BF=D0=BE=D0=BB=D1=8F=20=D1=84=D0=B0=D0=BC=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B8=D0=B8=20=D0=B8=20=D0=B8=D0=BC=D0=B5=D0=BD=D0=B8=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=B5=D0=BD=D1=8F=D0=BD=D1=8B=20=D0=BC=D0=B5=D1=81?=
 =?UTF-8?q?=D1=82=D0=B0=D0=BC=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Grid.jsx     | 39 ---------------------------
 src/components/Grid.tsx     | 54 +++++++++++++++++++++++++++++++++++++
 src/components/UserView.jsx | 43 -----------------------------
 src/components/UserView.tsx | 29 ++++++++++++++++++++
 4 files changed, 83 insertions(+), 82 deletions(-)
 delete mode 100644 src/components/Grid.jsx
 create mode 100644 src/components/Grid.tsx
 delete mode 100644 src/components/UserView.jsx
 create mode 100644 src/components/UserView.tsx

diff --git a/src/components/Grid.jsx b/src/components/Grid.jsx
deleted file mode 100644
index 177fc31..0000000
--- a/src/components/Grid.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-export const Grid = ({children, style, ...other}) => {
-  const gridContainerStyle = {
-    display: 'grid',
-    margin: '8px',
-    justifyItems: 'stretch',
-    alignItems: 'stretch',
-    ...style,
-  }
-
-  return <div style={gridContainerStyle} {...other}>
-    {children}
-  </div>
-}
-
-export const GridItem = ({children, row, col, rowSpan, colSpan, style, ...other}) => {
-  const localRow = +row
-  const localCol = +col
-  const localColSpan = colSpan ? colSpan - 1 : 0
-  const localRowSpan = rowSpan ? rowSpan - 1 : 0
-  const gridItemStyle = {
-    gridColumnStart: localCol,
-    gridColumnEnd: localCol + localColSpan,
-    gridRowStart: localRow,
-    gridRowEnd: localRow + localRowSpan,
-    padding: '4px',
-    ...style,
-  }
-
-  return <div style={gridItemStyle} {...other}>
-    {children}
-  </div>
-}
-
-export const Flex = ({children, style, ...other}) => 
-  <div
-  style={{display:'flex', ...style}}
-  {...other}>
-    {children}
-  </div>
\ No newline at end of file
diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
new file mode 100644
index 0000000..3b653c4
--- /dev/null
+++ b/src/components/Grid.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+
+interface ComponentProps {
+  children?: React.ReactNode
+  style?: React.CSSProperties
+  [other: string]: any
+}
+
+interface GridItemProps extends ComponentProps {
+  children?: React.ReactNode
+  style?: React.CSSProperties
+  row: number
+  col: number
+  rowSpan?: number
+  colSpan?: number
+}
+
+const gridDefaultStyle = {
+  display: 'grid',
+  margin: '8px',
+  justifyItems: 'stretch',
+  alignItems: 'stretch',
+}
+
+export const Grid = ({ children, style, ...other }: ComponentProps) => (
+  <div style={{...gridDefaultStyle, ...style}} {...other}>
+    {children}
+  </div>
+)
+
+export const GridItem = ({ children, row, col, rowSpan, colSpan, style, ...other }: GridItemProps) => {
+  const localRow = +row
+  const localCol = +col
+  const localColSpan = colSpan ? colSpan - 1 : 0
+  const localRowSpan = rowSpan ? rowSpan - 1 : 0
+  const gridItemStyle = {
+    gridColumnStart: localCol,
+    gridColumnEnd: localCol + localColSpan,
+    gridRowStart: localRow,
+    gridRowEnd: localRow + localRowSpan,
+    padding: '4px',
+    ...style,
+  }
+
+  return <div style={gridItemStyle} {...other}>
+    {children}
+  </div>
+}
+
+export const Flex = ({ children, style, ...other } : ComponentProps) => (
+  <div style={{ display: 'flex', ...style }} {...other}>
+    {children}
+  </div>
+)
diff --git a/src/components/UserView.jsx b/src/components/UserView.jsx
deleted file mode 100644
index 08e7ab3..0000000
--- a/src/components/UserView.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import {Tooltip} from 'antd'
-import {UserOutlined} from '@ant-design/icons'
-import {Grid, GridItem} from './Grid'
-
-export const UserView = ({user}) => {
-  if(!user)
-    return <Tooltip title='нет пользователя'>-</Tooltip>
-
-  const displayName = user?.login
-
-  const tooltipInfo = <Grid columnGap='8px'>
-    <GridItem row={1} col={1}>
-      Имя:
-    </GridItem>
-    <GridItem row={1} col={2}>
-      {user?.name}
-    </GridItem>
-    <GridItem row={2} col={1}>
-      Фамилия:
-    </GridItem>
-    <GridItem row={2} col={2}>
-      {user?.surname}
-    </GridItem>
-    <GridItem row={3} col={1}>
-      Отчество:
-    </GridItem>
-    <GridItem row={3} col={2}>
-      {user?.patronymic}
-    </GridItem>
-    <GridItem row={4} col={1}>
-      Компания:
-    </GridItem>
-    <GridItem row={4} col={2}>
-      {user?.company?.caption}
-    </GridItem>
-  </Grid>
-
-  return <Tooltip title={tooltipInfo}>
-    <UserOutlined style={{marginRight:8}}/>
-    {displayName}
-  </Tooltip>
-  
-}
\ No newline at end of file
diff --git a/src/components/UserView.tsx b/src/components/UserView.tsx
new file mode 100644
index 0000000..c2fc142
--- /dev/null
+++ b/src/components/UserView.tsx
@@ -0,0 +1,29 @@
+import {Tooltip} from 'antd'
+import { UserOutlined } from '@ant-design/icons'
+import { Grid, GridItem } from './Grid'
+import { UserDto } from '../services/api'
+
+interface UserViewProps {
+  user: UserDto
+}
+
+export const UserView = ({ user } : UserViewProps) => (user ? (
+    <Tooltip title={(
+      <Grid columnGap='8px'>
+        <GridItem row={1} col={1}>Фамилия:</GridItem>
+        <GridItem row={1} col={2}>{user?.surname}</GridItem>
+        <GridItem row={2} col={1}>Имя:</GridItem>
+        <GridItem row={2} col={2}>{user?.name}</GridItem>
+        <GridItem row={3} col={1}>Отчество:</GridItem>
+        <GridItem row={3} col={2}>{user?.patronymic}</GridItem>
+        <GridItem row={4} col={1}>Компания:</GridItem>
+        <GridItem row={4} col={2}>{user?.company?.caption}</GridItem>
+      </Grid>
+    )}>
+      <UserOutlined style={{ marginRight: 8 }}/>
+      {user?.login}
+    </Tooltip>
+  ) : (
+    <Tooltip title='нет пользователя'>-</Tooltip>
+  )
+)