import { AtomShellType , Theme } from '@ulangi/ulangi-common/enums' ; import { ObservableParticle , ObservableScreenLayout , ObservableShell , } from '@ulangi/ulangi-observable' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { StyleSheet , View } from 'react-native' ; import { AtomParticle } from './AtomParticle' ; export interface AtomParticlesProps { theme : Theme ; screenLayout : ObservableScreenLayout ; particles : ObservableParticle [ ] ; getShellByPosition : ( position : { x : number ; y : number ; } ) => ObservableShell | undefined ; transferParticleToSameShell : ( particle : ObservableParticle , position : { x : number ; y : number ; } , isUserMove : boolean ) => void ; transferParticleToAnotherShell : ( particle : ObservableParticle , position : { x : number ; y : number ; } , newShell : AtomShellType , isUserMove : boolean ) => void ; isMaxReached : ( shell : AtomShellType ) => boolean ; } @ observer export class AtomParticles extends React . Component < AtomParticlesProps > { public render ( ) { return ( < View style = { styles . container } > { this . props . particles . map ( ( particle ) : React . ReactElement < any > => { return ( < AtomParticle key = { particle . id } theme = { this . props . theme } screenLayout = { this . props . screenLayout } particle = { particle } getShellByPosition = { this . props . getShellByPosition } transferParticleToAnotherShell = { this . props . transferParticleToAnotherShell } transferParticleToSameShell = { this . props . transferParticleToSameShell } isMaxReached = { this . props . isMaxReached } / > ) ; } ) } < /View>); } } const styles = StyleSheet . create ( { container : { position : 'absolute' , } , } ) ;