ＴＳ

import React, { useState, useRef, useEffect } from "react";
import { inputTypes, InputData } from "../types/input.types";
import { Field, reduxForm, InjectedFormProps } from "redux-form";

import { Icon } from "semantic-ui-react";
import InputField from "./General/InputFields.js/InputField";
import { connect } from "react-redux";

interface RowProps {
	index: number;
}

const Component: React.FC<
	RowProps & InjectedFormProps<InputData & RowProps>
> = ({ index }) => {
	const [edit, setEdit] = useState<boolean>(false);
	const ref = useRef<HTMLInputElement>(null);

	useEffect(() => {
		if (edit) {
			ref.current?.focus();
		}
	}, [edit, ref]);

	const onCheckClick = () => {
		setEdit(false);
	};

	const onCancelClick = () => {
		setEdit(false);
	};

	const uiIconGroup = () => {
		if (edit) {
			return (
				<>
					<Icon
						onClick={onCheckClick}
						className="table__check_icon table__icon"
						name="check circle outline"
					/>
					<Icon
						onClick={onCancelClick}
						className="table__cancel_icon table__icon"
						name="times circle outline"
					/>
				</>
			);
		} else {
			return (
				<>
					<Icon
						onClick={() => setEdit(true)}
						className="table__edit_icon table__icon"
						name="edit"
					/>
					<Icon
						className="table__delete_icon table__icon"
						name="trash alternate"
					/>
				</>
			);
		}
	};

	return (
		<div className="table__row">
			{Object.keys(inputTypes).map((key, index) => {
				return (
					<Field
						refEl={index === 0 ? ref : null}
						className="table__cell"
						key={key}
						component={InputField}
						name={key}
						readOnly={!edit}
					/>
				);
			})}
			<div className="table__cell table__cell--icon">{uiIconGroup()}</div>
		</div>
	);
};

Component.displayName = "Row";

const Row = reduxForm<InputData>({ form: "stock" })(Component);

export default connect(null, {})(Row);