Droppable

Descripción

El componente droppable esta creado con una arquitectura strategy junto con una Decorator. Es el encargado de crear los objetos con la propiedad de droppable usando la libreria react-dnd. Este objeto Renderizar n cantidad de droppables. Todos los objetos droppable son renderizados un flex-Direction: "row" y flexWrap, por lo que si se quiere modificar la alineacion de estos solo se tiene solo se tiene que modificar el contenedor. Cada droppable esta contenido en un showBrilloContainer para que este salte estrellas si la respuesta es correcta.

Lo mas importante de este componente es el id. Si este esta mal configurado, no se va a obtener el resultado esperado. Este id guarda lugar en el estado DroppedItems del DragAndDropProvider

Props

Propiedad	Tipo	Descripción
quantity	number	Opcional. Por defecto tiene un valor de 5. Define la cantidad de droppables que se van a renderizar.
id	numberor number[]	Opcional. Solo utilizarlo en caso de ser necesario. Define el id del droppable. Este id es el que va a definir qué droppable es el que va a recibir el objeto draggable en los estados.
configuration	Configuration	Opcional. Tiene configuraciones por defecto. Es el prop más importante, aquí se envían todas las configuraciones a los objetos droppable para ser creados.
styleContainer	StyleProp<ViewStyle>	Opcional. Estilos para el contenedor de los droppables.

Configuración

Propiedad	Tipo	Descripción
uniqueDrop	boolean	Opcional. Indica si solo un droppable puede ser soltado en un draggable.
hideOnFinishAnimation	boolean	Opcional. Oculta el droppable al finalizar la animación.
text	string	Opcional. Texto del droppable.
useTextIdNumber	boolean	Opcional. Usa el número de ID como texto.
correctIndex	number	Opcional. Índice cual es el correcto del droppable.
defaultImage	ImageSourcePropType	Opcional. Imagen del droppable.
correctImage	ImageSourcePropType	Opcional. Imagen que se despliega si isCorrect es true, correcta del droppable.
incorrectImage	ImageSourcePropType	Opcional. Imagen que se despliega si isCorrect es false, incorrecta del droppable.
animation	object	Opcional. Configuración de animaciones del droppable. Se usa el DnD
multiplePositionDroppable	number[]	Opcional. Este prop se aplica para cuando se quiera que lso droppable tengan posiciones random cuando son droppeados
hideDropped	boolean	Opcional. Oculta el elemento droppable una vez soltado.
outerStyle	StyleProp<ViewStyle>	Opcional. Estilos externos del droppable.
innerStyle	StyleProp<ViewStyle>	Opcional. Estilos internos del droppable.
textStyles	StyleProp<TextStyle>	Opcional. Estilos del texto del droppable.
droppedElementStyles	StyleProp<ViewStyle>	Opcional. Estilos del elemento droppable una vez soltado.

Detalle de cada configuracion

id

• Tipo: number
• Descripción: Identificador único que se asigna automáticamente en droppable. Se recomienda nunca asignarlo manualmente. A menos que sea necesario tener varias instancias.

text

• Tipo: string
• Descripción: Texto que se muestra en los droppable. Por default si es un boton este tiene el texto de "Arrastra aquí". y cuando es imagen el texto es vacio.
• Ejemplo de uso:

Ejemplo default de Droppable

<Droppable />

Ejemplo con text

<Dropppable configuration={{ text: "Chanin Love" }} />

useTextIdNumber

• Tipo: boolean
• Descripción: Si es true, el texto de los droppable será el número de ID de cada droppable.

<Dropppable configuration={{ useTextIdNumber: true }} />

uniqueDrop

• Tipo: boolean
• Descripción: Por default este cofiguracion es true, lo que hace que solo un objeto puede ser droppeado en un droppable. Pero si se quiere que mas de un objeto draggable puede ser soltado en un droppable, se debe cambiar este valor a false.

<Droppable configuration={{ uniqueDrop: false }} />

animation

• Tipo: animation: { initial?: Variant; animate?: Variant; transition?: Transition; exit?: Variant; }
• Descripción: Esta configuracion es para agregar una animacion al momento que el droppable es soltado. Esta hecho con la libreria framer-motion.
• Combinaciones: Este prop combina con hideOnFinishAnimation para que oculte el droppable una vez se termine la animación. Lo que puede ocurrir si no se llega a activar, cuando se tiran mas draggable todos los que estaban droppeados se vuelven a animar.
• Ejemplo de uso:

<Dropppable
  quantity={1}
  configuration={{
    animation: {
      initial: {
        scale: 1,
        rotate: 0,
        x: 0,
      },
      animate: {
        scale: [1, 1.3, 0.8, 1],
        rotate: [0, 180, 360],
        x: [0, 50, -50, 0],
      },
      transition: {
        duration: 3,
        ease: "easeInOut",
        times: [0, 0.25, 0.5, 1],
      },
      exit: {
        scale: 1,
        rotate: 0,
        x: 0,
      },
    },
  }}
/>

hideOnFinishAnimation

• Tipo: boolean
• Descripción: Esta condiguracion es para ocultar el droppable una vez se termine la animación. Se recomienda que al final de cada animacion esta termine con el objeto oculto o con el objeto invisible para que no solo desaparezca. Esto es para cuando se quiera poner la configuracion de uniqueDrop: false, debido a que una vez en droppeado otro objeto todos los que ya estaban en el droppable se vuelven a animar.
• Combinaciones: Este prop combina con animation.

Ejemplo de un mal uso de animacion y uniqueDrop: false. Que le hace falta hideOnFinishAnimation

<Dropppable
  quantity={1}
  configuration={{
    uniqueDrop: false,
    animation: {
      initial: {
        scale: 1,
        rotate: 0,
        opacity: 1,
      },
      animate: {
        scale: [1, 1, 2, 0],
        rotate: [0, 45, -45, 45, -45, 0],
        opacity: [1, 1, 0.5, 0],
      },
      transition: {
        duration: 2,
        ease: "easeInOut",
        times: [0, 0.2, 0.5, 1],
      },
      exit: {
        scale: 0,
        opacity: 0,
      },
    },
  }}
/>

Ejemplo de un buen uso de animacion y uniqueDrop: false. Con hideOnFinishAnimation

<Dropppable
  quantity={1}
  configuration={{
    uniqueDrop: false,
    hideOnFinishAnimation: true,
    animation: {
      initial: {
        scale: 1,
        rotate: 0,
        opacity: 1,
      },
      animate: {
        scale: [1, 1, 2, 0],
        rotate: [0, 45, -45, 45, -45, 0],
        opacity: [1, 1, 0.5, 0],
      },
      transition: {
        duration: 2,
        ease: "easeInOut",
        times: [0, 0.2, 0.5, 1],
      },
      exit: {
        scale: 0,
        opacity: 0,
      },
    },
  }}
/>

defaultImage

• Tipo: ImageSourcePropType
• Descripción: Imagen que muestra el droppable.
• Ejemplo de uso:

<Dropppable
  quantity={1}
  configuration={{
    defaultImage: require("@assets/images/common/agujero_negro.png"),
  }}
/>

correctImage

• Tipo: ImageSourcePropType
• Descripción: Imagen que se muestra cuando el droppable es correcto.
• Ejemplo de uso:

<Dropppable
  quantity={1}
  configuration={{
    hideDropped: true,
    defaultImage: require("@assets/images/bioadventure/m1/madriguera.png"),
    correctImage: require("@assets/images/bioadventure/m1/madriguera_true.png"),
    incorrectImage: require("@assets/images/bioadventure/m1/madriguera_false.png"),
    outerStyle: {
      height: 200,
      width: 200,
    },
    hideOnFinishAnimation: true,
    animation: {
      initial: { x: 0, y: 0, rotate: 0, scale: 1, opacity: 1 },
      animate: {
        x: "0%",
        y: "20%",
        rotate: 720,
        scale: 0,
        opacity: 0,
      },
      transition: {
        duration: 1,
        ease: "easeInOut",
      },
    },
  }}
/>

Este clip es de Bioaventura-Choza de la materia y energia-m1-CP02

incorrectImage

• Tipo: ImageSourcePropType
• Descripción: Imagen que se muestra cuando el droppable es correcto o incorrecto. Este usa el prop de isCorrect que se le pasa a dragAndDropProvider.
• Ejemplo de uso:

<Dropppable
  quantity={1}
  configuration={{
    hideDropped: true,
    defaultImage: require("@assets/images/bioadventure/m1/madriguera.png"),
    correctImage: require("@assets/images/bioadventure/m1/madriguera_true.png"),
    incorrectImage: require("@assets/images/bioadventure/m1/madriguera_false.png"),
    outerStyle: {
      height: 200,
      width: 200,
    },
    hideOnFinishAnimation: true,
    animation: {
      initial: { x: 0, y: 0, rotate: 0, scale: 1, opacity: 1 },
      animate: {
        x: "0%",
        y: "20%",
        rotate: 720,
        scale: 0,
        opacity: 0,
      },
      transition: {
        duration: 1,
        ease: "easeInOut",
      },
    },
  }}
/>

Este clip es de Bioaventura-Choza de la materia y energia-m1-CP02

correctIndex

• Tipo: number
• Descripción: Índice cual es el correcto del droppable. El unico caso de uso por el momento es en las lunas. Intergalatica-Planeta Aritmetica-m1-CP01.
• Ejemplo de uso:

multiplePositionDroppable

• Tipo: number[]
• Descripción: Este prop se aplica para cuando se quiera que lso droppable tengan posiciones random aplicados con un right.
• Ejemplo de uso:

Este clip es de Bioaventura-Choza de la materia y energia-m2-OBS

hideDropped

• Tipo: boolean
• Descripción: Oculta el elemento droppable una vez soltado.
• Ejemplo de uso:

<Dropppable configuration={{ hideDropped: true }} />

outerStyle

• Tipo: StyleProp<ViewStyle>
• Descripción: Este elemento es para agregar estilos al contenedor del draggable por la parte de afuera.

innerStyle

• Tipo: StyleProp<ViewStyle>
• Descripción: Este elemento es para agregar estilos al contenedor del draggable por la parte de adentro.

textStyles

• Tipo: StyleProp<TextStyle>
• Descripción: Este elemento es para agregar estilos al texto que se despliega en el droppable.

droppedElementStyles

• Tipo: StyleProp<ViewStyle>
• Descripción: Este elemento es para agregar estilos al elemento droppable una vez soltado.
• Ejemplo de uso:

<Dropppable
  quantity={1}
  configuration={{
    droppedElementStyles: {
      left: -50,
      top: -50,
    },
  }}
/>