src/components/RawDataComponents/TableRowComponent.tsx - master - SOFG1/generic

src/components/RawDataComponents/TableRowComponent.tsx
65 строк2 KB
Eddy
use selectors
25 июл 2024, 18:31
25 июл 2024, 18:3125bde51
import React from "react"
import { ITableColumn } from "../../store/rawData";
import styled from "styled-components";
import { convert972to0 } from "../../utils/convert972to0";
import TableStatusComponent from "./TableStatusComponent";
import { useSelector } from "react-redux";
import { rawDataTableColumnsSelector } from "../../store/rawData/selectors";

const PhoneLink = styled.a`
  text-decoration: none;
  color: inherit;
`;



interface IProps {
    rows: ITableColumn[]
}

const TableRowComponent = React.memo(({ rows }: IProps) => {
    const tableColumns = useSelector(rawDataTableColumnsSelector);


    return <>
        {rows.map((row, index) => {
            return <tr key={index}>
                {tableColumns.map((column) => {
                    const cell = row[column.slug];
                    const isPhone =
                        column.slug === "phone" ||
                        column.slug === "mobile_phone";

                    if (isPhone) {
                        return (
                            <td key={column.slug}>
                                <PhoneLink
                                    href={`tel:${convert972to0(cell)}`}
                                >
                                    {cell}
                                </PhoneLink>
                            </td>
                        );
                    }


                    if (column.slug === "status") {
                        return <TableStatusComponent row={row} key={column.slug} />
                    }

                    if (column.slug === "mobilizer") {
                        return < td key={column.slug} > {row.mobilizer_full_name}</td>
                    }

                    if (column.slug === "referal") {
                        return < td key={column.slug} > {row.referal_full_name}</td>
                    }

                    return <td key={column.slug}>{cell}</td>
                })}
            </tr >
        })}
    </>
})

export default TableRowComponent