namirasoft-site-react 1.4.547 → 1.4.549

package/src/components/NSTable.tsx

@@ -565,7 +565,9 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 			let childrenMap = this.buildChildrenMap();
 			let indexOfRow = new Map<RowType, number>();
 			this.state.rows.forEach((r, i) => indexOfRow.set(r, i));
-			let renderRow = (rowValue: RowType, rowIndex: number, depth: number, parentKey: string): React.ReactNode[] =>
+			let INDENT = 16;
+			let lineColor = "rgba(20, 27, 92, 0.35)";
+			let renderRow = (rowValue: RowType, rowIndex: number, depth: number, parentKey: string, ancestorHasNext: boolean[], isLastChild: boolean): React.ReactNode[] =>
 			{
 				let row = { index: rowIndex, value: rowValue };
 				let rowKey = this.props.getRowKey(row);
@@ -620,55 +622,114 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 										data-label={`${column.text}: `}
 										width={column.formatter.width}
 										className='py-3'
+										style={isFirstDataColumn && hierarchical ? { overflow: "visible" } : undefined}
 										onClick={(e) =>
 										{
 											onColumnClick(e, column);
 											onCellClick(e, cell);
 										}}
 									>
-										{isFirstDataColumn && hierarchical && (
-											<span
-												data-cell-type="tree-toggle"
+										{isFirstDataColumn && hierarchical ? (
+											<div
 												style={{
-													display: "inline-flex",
+													display: "flex",
 													alignItems: "center",
-													justifyContent: "center",
-													marginRight: 6,
-													paddingLeft: depth * 16,
 												}}
-												onClick={(e) => e.stopPropagation()}
 											>
-												{hasChildren ? (
-													<button
-														type="button"
-														onClick={(e) =>
-														{
-															e.stopPropagation();
-															this.toggleExpanded(rowKey);
-														}}
-														style={{
-															width: 18,
-															height: 18,
-															lineHeight: "16px",
-															padding: 0,
-															border: "1px solid rgba(20, 27, 92, 0.4)",
-															borderRadius: 3,
-															background: "#fff",
-															cursor: "pointer",
-															fontSize: 14,
-															fontWeight: "bold",
-															color: "rgba(20, 27, 92, 1)",
-														}}
-														aria-label={expanded ? "Collapse" : "Expand"}
-													>
-														{expanded ? "−" : "+"}
-													</button>
-												) : (
-													<span style={{ display: "inline-block", width: 18, height: 18 }} />
-												)}
-											</span>
+												{Array.from({ length: depth }).map((_, i) =>
+												{
+													let isLastLevel = i === depth - 1;
+													let drawVerticalTop = i < depth - 1 ? ancestorHasNext[i] : true;
+													let drawVerticalBottom = i < depth - 1 ? ancestorHasNext[i] : !isLastChild;
+													let drawHorizontal = isLastLevel;
+													return (
+														<span
+															key={i}
+															style={{
+																position: "relative",
+																display: "inline-block",
+																width: INDENT,
+																alignSelf: "stretch",
+																flex: "0 0 auto",
+															}}
+														>
+															{drawVerticalTop && (
+																<span style={{
+																	position: "absolute",
+																	left: INDENT / 2,
+																	top: -24,
+																	height: "calc(50% + 24px)",
+																	width: 1,
+																	background: lineColor,
+																}} />
+															)}
+															{drawVerticalBottom && (
+																<span style={{
+																	position: "absolute",
+																	left: INDENT / 2,
+																	top: "50%",
+																	height: "calc(50% + 24px)",
+																	width: 1,
+																	background: lineColor,
+																}} />
+															)}
+															{drawHorizontal && (
+																<span style={{
+																	position: "absolute",
+																	left: INDENT / 2,
+																	top: "50%",
+																	width: INDENT / 2,
+																	height: 1,
+																	background: lineColor,
+																}} />
+															)}
+														</span>
+													);
+												})}
+												<span
+													data-cell-type="tree-toggle"
+													style={{
+														display: "inline-flex",
+														alignItems: "center",
+														justifyContent: "center",
+														marginRight: 6,
+													}}
+													onClick={(e) => e.stopPropagation()}
+												>
+													{hasChildren ? (
+														<button
+															type="button"
+															onClick={(e) =>
+															{
+																e.stopPropagation();
+																this.toggleExpanded(rowKey);
+															}}
+															style={{
+																width: 18,
+																height: 18,
+																lineHeight: "16px",
+																padding: 0,
+																border: "1px solid rgba(20, 27, 92, 0.4)",
+																borderRadius: 3,
+																background: "#fff",
+																cursor: "pointer",
+																fontSize: 14,
+																fontWeight: "bold",
+																color: "rgba(20, 27, 92, 1)",
+															}}
+															aria-label={expanded ? "Collapse" : "Expand"}
+														>
+															{expanded ? "−" : "+"}
+														</button>
+													) : (
+														<span style={{ display: "inline-block", width: 18, height: 18 }} />
+													)}
+												</span>
+												<span>{cell.formatted ?? ""}</span>
+											</div>
+										) : (
+											<span>{cell.formatted ?? ""}</span>
 										)}
-										<span>{cell.formatted ?? ""}</span>
 									</td>
 								);
 							})
@@ -677,10 +738,12 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 				);
 				if (hierarchical && hasChildren && expanded)
 				{
-					children.forEach((child) =>
+					let childAncestors = [...ancestorHasNext, !isLastChild];
+					children.forEach((child, ci2) =>
 					{
 						let ci = indexOfRow.get(child) ?? -1;
-						renderRow(child, ci, depth + 1, reactKey).forEach(n => nodes.push(n));
+						let lastChild = ci2 === children.length - 1;
+						renderRow(child, ci, depth + 1, reactKey, childAncestors, lastChild).forEach(n => nodes.push(n));
 					});
 				}
 				return nodes;
@@ -704,7 +767,7 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 			{
 				topLevel = this.state.rows;
 			}
-			content = topLevel.flatMap((rowValue) => renderRow(rowValue, indexOfRow.get(rowValue) ?? 0, 0, ""));
+			content = topLevel.flatMap((rowValue, i) => renderRow(rowValue, indexOfRow.get(rowValue) ?? 0, 0, "", [], i === topLevel.length - 1));
 		}
 
 		let getSortSign = (column: TableColumnInfo) =>
@@ -790,8 +853,8 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 					</tbody>
 
 					<tfoot className={!show_pagination && !show_button_panel ? Styles.padding_0 : ""}>
-						<tr>
-							<td colSpan={this.getColumns(true).length + (this.props.checkbox ? 1 : 0)}>
+						<tr className={Styles.ns_tfoot_row}>
+							<td className={Styles.ns_tfoot_cell}>
 								<div
 									ref={this.TableScrollbar_Ref}
 									className={Styles.ns_table_scrollbar}