From fad06cb5bbcb53db171d3f30d4642c218c1bd063 Mon Sep 17 00:00:00 2001
From: harunorimurata <harunorimurata@toiware.co.jp>
Date: Fri, 8 Mar 2024 22:57:16 +0900
Subject: [PATCH] Add rowspan support for ListTable

---
 __tests__/types/flow/lv1.js             |  1 +
 __tests__/types/flow/lv2.js             |  3 +++
 lv1.js.flow                             |  1 +
 lv2.js.flow                             |  1 +
 src/lv1/lists/TableListCell.tsx         | 11 ++++++++++-
 src/lv2/listTable/ListTable.stories.tsx | 12 +++++++++++-
 src/lv2/listTable/ListTable.tsx         |  2 ++
 7 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/__tests__/types/flow/lv1.js b/__tests__/types/flow/lv1.js
index bd29f9661..e4b9a6422 100644
--- a/__tests__/types/flow/lv1.js
+++ b/__tests__/types/flow/lv1.js
@@ -841,6 +841,7 @@ export default function App() {
         url="/hoge/fuga"
         onSelfWindowNavigation={() => {}}
         colSpan={2}
+        rowSpan={2}
         indentLevel={2}
         {...commonProps}
       >
diff --git a/__tests__/types/flow/lv2.js b/__tests__/types/flow/lv2.js
index e1e24565a..e58d0c093 100644
--- a/__tests__/types/flow/lv2.js
+++ b/__tests__/types/flow/lv2.js
@@ -1061,6 +1061,7 @@ export default function App() {
                 alignRight: true,
                 small: true,
                 colSpan: 2,
+                rowSpan: 2,
                 'data-masking': true,
                 'data-test': 'test',
               },
@@ -1103,6 +1104,7 @@ export default function App() {
                 alignRight: true,
                 small: true,
                 colSpan: 2,
+                rowSpan: 2,
                 'data-test': 'test',
               },
               { value: '2' },
@@ -1122,6 +1124,7 @@ export default function App() {
                     alignRight: true,
                     small: true,
                     colSpan: 2,
+                    rowSpan: 2,
                   },
                   { value: '2' },
                 ],
diff --git a/lv1.js.flow b/lv1.js.flow
index e80fef90b..43818eeeb 100644
--- a/lv1.js.flow
+++ b/lv1.js.flow
@@ -1196,6 +1196,7 @@ class TableListCell extends React.Component<{|
   alignTop?: boolean,
   onSelfWindowNavigation?: (url?: string) => void | Promise<void>,
   colSpan?: number,
+  rowSpan?: number,
   indentLevel?: number,
   ...CommonProps,
 |}> {}
diff --git a/lv2.js.flow b/lv2.js.flow
index cccca0763..719bf2141 100644
--- a/lv2.js.flow
+++ b/lv2.js.flow
@@ -126,6 +126,7 @@ export type TableCell = {|
   alignTop?: boolean,
   small?: boolean,
   colSpan?: number,
+  rowSpan?: number,
   'data-masking'?: boolean,
   'data-test'?: string,
 |};
diff --git a/src/lv1/lists/TableListCell.tsx b/src/lv1/lists/TableListCell.tsx
index 7cb6a00a0..cf075aedc 100644
--- a/src/lv1/lists/TableListCell.tsx
+++ b/src/lv1/lists/TableListCell.tsx
@@ -40,6 +40,10 @@ type Props = {
    * colSpanを設定します
    */
   colSpan?: number;
+  /**
+   * rowSpanを設定します
+   */
+  rowSpan?: number;
   /**
    * ツリー状の表現のためのインデントレベルです。左端のカラムにのみ使われる想定です
    */
@@ -58,6 +62,7 @@ const TableListCell: React.FC<Props> = (props: Props) => {
     alignTop,
     breakWord,
     colSpan,
+    rowSpan,
     indentLevel,
     onSelfWindowNavigation,
   } = props;
@@ -75,7 +80,11 @@ const TableListCell: React.FC<Props> = (props: Props) => {
   const textNodeId = `${uniqueId}__text`;
 
   return (
-    <td {...commonProps(props, listBaseClass, classModifier)} colSpan={colSpan}>
+    <td
+      {...commonProps(props, listBaseClass, classModifier)}
+      colSpan={colSpan}
+      rowSpan={rowSpan}
+    >
       {/* IEのみdisplay:tableで表示するため、indentContainerWrapperが必要 */}
       <span className="vb-tableListCell__indentContainerWrapper">
         <span className="vb-tableListCell__indentContainer">
diff --git a/src/lv2/listTable/ListTable.stories.tsx b/src/lv2/listTable/ListTable.stories.tsx
index 9a99ced9b..903521a19 100644
--- a/src/lv2/listTable/ListTable.stories.tsx
+++ b/src/lv2/listTable/ListTable.stories.tsx
@@ -164,7 +164,10 @@ const rows = [
   {
     cells: [
       { value: 'テーブルリスト' },
-      { value: 'テーブルリスト' },
+      {
+        value: '結合セル',
+        rowSpan: 2,
+      },
       {
         value: '結合セル',
         colSpan: 2,
@@ -172,6 +175,13 @@ const rows = [
       },
     ],
   },
+  {
+    cells: [
+      { value: 'テーブルリスト' },
+      { value: 'テーブルリスト' },
+      { value: 'テーブルリスト' },
+    ],
+  },
 ];
 
 export default {
diff --git a/src/lv2/listTable/ListTable.tsx b/src/lv2/listTable/ListTable.tsx
index 476e12d84..e8ea422eb 100644
--- a/src/lv2/listTable/ListTable.tsx
+++ b/src/lv2/listTable/ListTable.tsx
@@ -56,6 +56,7 @@ export type TableCell = {
    */
   breakWord?: boolean;
   colSpan?: number;
+  rowSpan?: number;
   'data-masking'?: boolean;
   'data-test'?: string;
 };
@@ -187,6 +188,7 @@ const ListTable: React.FC<Props> = (props: Props) => {
                       onSelfWindowNavigation={row.onSelfWindowNavigation}
                       breakWord={cell.breakWord}
                       colSpan={cell.colSpan}
+                      rowSpan={cell.rowSpan}
                       data-masking={cell['data-masking']}
                       data-test={cell['data-test']}
                     >