# All files / IconButton index.tsx

0% Statements 0/9
0% Branches 0/9
0% Functions 0/1
0% Lines 0/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90

     import { IconButton as MUIIconButton } from "@mui/material";
    import { Icon } from "../Icon";
    import { contentTypes } from "../../shared/iconTypes/icons";
    import { colors } from "../../theme/colors";
    import React from "react";
    interface IconButtonProps {
      icon: keyof typeof contentTypes;
      iconSize?: number;
      iconColor?: string; // Agregamos la propiedad iconColor
      onClick?: () => void;
      mode?: "primary" | "secondary" | "tertiary" | "quaternary";
      disabled?: boolean;
      style?: React.CSSProperties;
    }

    export const IconButton = ({
      icon,
      onClick,
      iconSize,
      iconColor, // La incluimos en las props
      mode = "primary",
      disabled = false,
      style = {},
    }: IconButtonProps) => {
      const iconButtonStyleNoDisabled = {
        primary: {
          backgroundColor: colors.accent[500],
          color: "white",
        },
        secondary: {
          backgroundColor: "transparent",
          color: colors.accent[500],
          border: `1px dashed ${colors.accent[500]}`,
        },
        tertiary: {
          backgroundColor: "transparent",
          color: colors.accent[500],
          border: `1px solid ${colors.accent[500]}`,
        },
        quaternary: {
          backgroundColor: "transparent",
          color: colors.accent[500],
        },
      };

      const iconButtonStyleDisabled = {
        primary: {
          backgroundColor: colors.neutral[400],
          color: "white",
        },
        secondary: {
          backgroundColor: "transparent",
          color: colors.neutral[400],
          border: `1px dashed ${colors.neutral[400]}`,
        },
        tertiary: {
          backgroundColor: "transparent",
          color: colors.neutral[400],
          border: `1px solid ${colors.neutral[400]}`,
        },
        quaternary: {
          backgroundColor: "transparent",
          color: colors.neutral[400],
        },
      };

      const finalIconColor = iconColor
        ? iconColor
        : disabled
        ? iconButtonStyleDisabled[mode].color
        : iconButtonStyleNoDisabled[mode].color;

      return (
        <MUIIconButton
          style={{
            ...(disabled
              ? iconButtonStyleDisabled[mode]
              : iconButtonStyleNoDisabled[mode]),
            borderRadius: "10px",
            ...style,
          }}
          aria-label="iconButton"
          onClick={onClick}
          disabled={disabled}
        >
          <Icon name={icon} size={iconSize} color={finalIconColor} />
        </MUIIconButton>
      );
    };