BaseButton 🅱️

BaseButton es un componente atomico que representa la funcionalidad básica de un botón, utiliza otros componentes atómicos para su funcionamiento, entre ellos están: ThemedContainer, BrilloContainer y AtomText.

Las características de este componente es que podemos manejar el uso de animaciones, diferentes tipos de colores (gracias a themes.ts), manejo de imágenes, indicadores de respuesta correcta e incorrecta, uso de las estrellitas, variantes de texto, dimensiones de contenedor interior y exterior. Todo ello gracias a sus BaseButtonProps, todos los props son opcionales por lo que puedes utilizar únicamente los necesarios.

Su principal enfoque es estandarizar el uso de botones y tener un único componente que se encargue de realizar la funcionalidad básica de un botón.

Props 📜

Prop	Tipo	Descripción
`title`	`string`	Texto a renderizar sobre el botón.
`textVariant`	`textVariants`	Estilo de texto a renderizar en el título del botón. Hacer click aquí para conocer los estilos de texto disponibles.
`icon`	`ImageSourcePropType`	Imagen a renderizar sobre el botón.
`iconStyle`	`StyleProp<ImageStyle>`	Estilos específicos para la imagen renderizada.
`selected`	`boolean`	Indicador `true` o `false` que controla la animación de escala cuando el botón está seleccionado, haciéndolo más grande para indicar visualmente su estado.
`disabled`	`boolean`	Indicador `true` o `false` que nos permite activar o desactivar el uso del botón.
`colorCombination`	`ThemesVariants or ThemeTemplate`	Representa la combinación de colores del contenedor interior y exterior, si se desea usar `ThemesVariants` requerirá un mandarle un `string` para específicar una combinación de colores, si en dado caso no existe alguna combinación de colores es posible crear una nueva con `ThemesTemplate`. Hacer click aquí para conocer las combinaciones de colores disponibles y el uso de `ThemesTemplate`.
`containerStyles`	`StyleProp<ViewStyle>`	Estilos personalizables al contenedor exterior del botón.
`outerContainerStyles`	`StyleProp<ViewStyle>`	Estilos personalizables al contenedor interior del botón.
`textStyle`	`StyleProp<TextStyle>`	Estilos específicos para el texto renderizado sobre el botón.
`showIndicator`	`boolean`	Indicador `true` o `false` que nos permite activar o desactivar la visualización del check verde sobre el botón.
`indicatorStyle`	`StyleProp<ImageStyle>`	Estilos específicos para la imágen del check correcto o incorrecto.
`isCorrect`	`boolean`	Indicador `true` o `false` que permite identificar si el botón seleccionado es la respuesta correcta o incorrecta.
`children`	`React.ReactNode`	El contenido renderizado adentro del botón.
`playBrillo`	`boolean`	Indicador `true` o `false` que nos permite activar o desactivar la animación de las estrellitas.
`brilloStyle`	`StyleProp<ViewStyle>`	Estilos específicos para el contenedor de las estrellitas.
`usePressAnimation`	`boolean`	Indicador `true` o `false` que nos permite activar o desactivar la animación del botón presionado.
`disabledDelay`	`boolean`	Indicador `true` o `false` que nos permite activar o desactivar un retraso temporal en la reactivación del botón.
`lottiViewStyle`	`StyleProp<ViewStyle>`	Estilos específicos para la animación de las estrellitas.

Codigo de ejemplo 🕹️

Native Versión 📱: Bioaventura(Diagnostico)

<Image
    style={styles.troncoImage}
    source={require("@assets/images/bioadventure/m1/tronco.png")}
/>

<View style={styles.buttonContainer}>
<BaseButton
    textStyle={textStyle}
    title={answer}
    onPress={() => {
        checkAnswerHandler(index);
    }}
    selected={answerSelectedIndex === index}
    colorCombination={BaseTheme(index)}
    showIndicator={
        answerSelectedIndex !== currentQuestion.correctAnswer &&
        answerSelectedIndex !== index &&
        currentQuestion.correctAnswer === index &&
        isCorrectAnswer === false
    }
    usePressAnimation={false}
    playBrillo={
        (isCorrectAnswer && answerSelectedIndex === index) ??
        false
    }
    brilloStyle={{
        height: answer.includes(" ") ? "147%" : "165%",
        top: -35,
    }}
/>
</View>

Web Versión 💻: Bioaventura(Diagnostico)

<Image
  style={styles.troncoImage}
  source={require("@assets/images/bioadventure/m1/tronco.png")}
/>

<View style={styles.buttonContainer}>
  <BaseButton
    colorCombination={
      (answerSelectedIndex !== index || isCorrectAnswer === null)
        ? "answerblue"
        : isCorrectAnswer
        ? "correct"
        : "incorrect"
    }
    playBrillo={
      (isCorrectAnswer !== null && isCorrectAnswer && answerSelectedIndex === index) || false
    }
    containerStyles={{
      width: "auto",
      paddingHorizontal: 20,
      justifyContent: "center",
    }}
    title={answer}
    textStyle={{
      fontSize: 17,
      lineHeight: 20,
      width: "100%",
    }}
    onPress={() => {
      checkAnswerHandler(index);
    }}
    selected={answerSelectedIndex === index}
    showIndicator={
      answerSelectedIndex !== currentQuestion.correctAnswer &&
      answerSelectedIndex !== index &&
      currentQuestion.correctAnswer === index &&
      isCorrectAnswer === false
    }
    disabled={isCorrectAnswer || false}
  />
</View>