test-task-sws

1
import styles from "./EditableRow.module.scss";
2

3
import { useCallback, useEffect, useRef, useState } from "react";
4
import { InputNumber, InputText } from "../components";
5

6
import { IEditableRow } from "./EditableRow.types";
7

8
/**
9
 * Editable row of tree table component
10
 */
11
export default function EditableRow({ qRowsWithLessNesting, linesClassName, nestingLvl, node, children, onSendCreatedRow, onSendEditedRow }: IEditableRow) {
12
	const [formData, setFormData] = useState({
13
		rowName: node.data.rowName,
14
		salary: `${node.data.salary}`,
15
		equipmentCosts: `${node.data.equipmentCosts}`,
16
		overheads: `${node.data.overheads}`,
17
		estimatedProfit: `${node.data.estimatedProfit}`,
18
	});
19
	const formDataRef = useRef(formData);
20

21
	useEffect(() => {
22
		formDataRef.current = formData;
23
	}, [formData]);
24

25
	const onChangeFormData = useCallback(
26
		(field: string, value: string) => {
27
			setFormData((prevFormData) => ({
28
				...prevFormData,
29
				[field]: value,
30
			}));
31
		},
32
		[setFormData],
33
	);
34

35
	const onPressEnter = useCallback(() => {
36
		!node.editMode ? onSendEditedRow(formDataRef.current) : onSendCreatedRow(formDataRef.current);
37
	}, [onSendCreatedRow]);
38

39
	return (
40
		<>
41
			{qRowsWithLessNesting > 0 && (
42
				<div className={styles["vertical-add-line-container"]}>
43
					<div
44
						className={styles["vertical-add-line"]}
45
						style={{
46
							marginLeft: `${nestingLvl * 22}px`,
47
							left: `${3}px`,
48
							top: `${-45 - 60 * qRowsWithLessNesting}px`,
49
							height: `${65 * qRowsWithLessNesting}px`,
50
						}}
51
					></div>
52
				</div>
53
			)}
54
			<tr className={styles["row"]}>
55
				<td className={styles["lvl-col"]} style={{ minWidth: `${55 + 22 * nestingLvl}px` }}>
56
					<div className={styles[linesClassName]} style={{ marginLeft: `${nestingLvl * 22}px` }}></div>
57
					{children}
58
				</td>
59
				<td>
60
					<InputText field="rowName" formData={formData} onChangeFormData={onChangeFormData} onPressEnter={onPressEnter} />
61
				</td>
62
				<td>
63
					<InputNumber field="salary" formData={formData} onChangeFormData={onChangeFormData} onPressEnter={onPressEnter} />
64
				</td>
65
				<td>
66
					<InputNumber field="equipmentCosts" formData={formData} onChangeFormData={onChangeFormData} onPressEnter={onPressEnter} />
67
				</td>
68
				<td>
69
					<InputNumber field="overheads" formData={formData} onChangeFormData={onChangeFormData} onPressEnter={onPressEnter} />
70
				</td>
71
				<td>
72
					<InputNumber field="estimatedProfit" formData={formData} onChangeFormData={onChangeFormData} onPressEnter={onPressEnter} />
73
				</td>
74
			</tr>
75
		</>
76
	);
77
}
78