gilour

Back Back Up Advanced Editor

import { useMemo } from "react";
import {
  Flex,
  Checkbox,
  Typography,
  Dropdown,
  MenuProps,
  Button,
  Tag,
} from "antd";
import { CommonColumnsData } from "@shared/modals";
import styles from "./TotalBlock.module.scss";
import Download from "@shared/assets/images/icons/download-excel.svg";
import { formatNumber } from '@/shared/lib';

interface TotalCheckboxProps {
    selectedRows?: CommonColumnsData[]
    selectedCount: any 
    totalIncome: any 
    totalExpense: any
    isUpload?: boolean
    downloadExcelHadler?: () => void
    top?: number;
}

export const TotalBlock: React.FC<TotalCheckboxProps> = ({
    selectedCount,
    isUpload = true,
    totalIncome, 
    downloadExcelHadler,
    totalExpense,
    top}) => {

return (
    <Flex style={{top: top}} className={styles.total} align="center">
      <Checkbox indeterminate />
      <Typography.Text className={styles["total-selected"]}>
        Выбрано: <span className={styles["total-count"]}>{selectedCount}</span>
      </Typography.Text>
      { totalIncome > 0 && <Typography.Text style={{marginRight: '8px'}} className={styles["total-sum"]}>
        <Tag className={styles["total-sum"]}>
            + {formatNumber(totalIncome)} ₽
        </Tag>
      </Typography.Text> }
      { totalExpense > 0 && <Typography.Text className={totalIncome > 0 ? '': styles["total-cons"]}>
        <Tag className={totalIncome > 0 ? '': styles["total-cons"]}>
            – {formatNumber(totalExpense)} ₽
        </Tag>
      </Typography.Text> }

{isUpload ? (
        <Button
        size="large"
        className={styles.excel}
        type="default"
        onClick={downloadExcelHadler}
        icon={<img src={Download} />}
      >
        Excel
      </Button>
      ) : ''
      }
    </Flex>
  );
};