From b6e41a6e45e17ce06afe237fa655e343beeeecb9 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Wed, 6 Jan 2021 16:31:10 +0800
Subject: [PATCH] fix: add hover style for table rows

---
 packages/app/src/components/views/Form/style.less      |  4 ++++
 packages/app/src/components/views/SimpleTable.tsx      |  1 +
 .../app/src/components/views/SortableTable/index.tsx   |  5 +++--
 packages/app/src/components/views/Table.tsx            |  1 +
 packages/app/src/components/views/style.less           | 10 ++++++++++
 5 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/views/Form/style.less b/packages/app/src/components/views/Form/style.less
index f9bde90a5..e3a637747 100644
--- a/packages/app/src/components/views/Form/style.less
+++ b/packages/app/src/components/views/Form/style.less
@@ -2,4 +2,8 @@
   max-width: 368px;
   margin: 0 auto;
   padding-top: 100px;
+}
+
+.ant-form-item-with-help {
+  margin-bottom: 24px;
 }
\ No newline at end of file
diff --git a/packages/app/src/components/views/SimpleTable.tsx b/packages/app/src/components/views/SimpleTable.tsx
index 2a11bc450..f457a4156 100644
--- a/packages/app/src/components/views/SimpleTable.tsx
+++ b/packages/app/src/components/views/SimpleTable.tsx
@@ -144,6 +144,7 @@ export function SimpleTable(props: SimpleTableProps) {
           data, 
           mutate,
           rowKey,
+          isFieldComponent,
           onMoved: async ({resourceKey, target}) => {
             await api.resource(name).sort({
               associatedKey,
diff --git a/packages/app/src/components/views/SortableTable/index.tsx b/packages/app/src/components/views/SortableTable/index.tsx
index 472f769bf..859e80adc 100644
--- a/packages/app/src/components/views/SortableTable/index.tsx
+++ b/packages/app/src/components/views/SortableTable/index.tsx
@@ -21,9 +21,10 @@ interface Props {
   mutate: any,
   rowKey: any, 
   onMoved: any,
+  isFieldComponent?: boolean;
 }
 
-export const components = ({data = {}, rowKey, mutate, onMoved}: Props) => {
+export const components = ({data = {}, rowKey, mutate, onMoved, isFieldComponent}: Props) => {
   return {
     body: {
       wrapper: props => (
@@ -51,7 +52,7 @@ export const components = ({data = {}, rowKey, mutate, onMoved}: Props) => {
       row: ({ className, style, ...restProps }) => {
         // function findIndex base on Table rowKey props and should always be a right array index
         const index = findIndex(data.list, (x: any) => x[rowKey] === restProps['data-row-key']);
-        return <SortableItem index={index} {...restProps} />;
+        return <SortableItem index={index} className={`${className}${isFieldComponent ? '': ' row-clickable'}`} style={style} {...restProps} />;
       },
     },
   };
diff --git a/packages/app/src/components/views/Table.tsx b/packages/app/src/components/views/Table.tsx
index f25ef790f..87640fcc0 100644
--- a/packages/app/src/components/views/Table.tsx
+++ b/packages/app/src/components/views/Table.tsx
@@ -138,6 +138,7 @@ export function Table(props: TableProps) {
           data, 
           mutate,
           rowKey,
+          isFieldComponent,
           onMoved: async ({resourceKey, target}) => {
             await api.resource(name).sort({
               associatedKey,
diff --git a/packages/app/src/components/views/style.less b/packages/app/src/components/views/style.less
index 477abe3cf..268f30626 100644
--- a/packages/app/src/components/views/style.less
+++ b/packages/app/src/components/views/style.less
@@ -21,4 +21,14 @@
 
 .ant-form-item-label {
   font-weight: 500;
+}
+
+
+.row-clickable {
+  cursor: pointer;
+}
+
+.ant-table-tbody > tr.row-clickable:hover > td {
+  background: #e6f7ff;
+  border-color: rgba(0, 0, 0, 0.03);
 }
\ No newline at end of file