zidniryi

detailwork.js

Jun 18th, 2021
890
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react'
  2. import {Text, View, TouchableOpacity, Image, ScrollView, SafeAreaView} from 'react-native'
  3. import Modal from 'react-native-modal'
  4. import styles from './styles/StyleDetailWork'
  5.  
  6. function DetailWork({visible, onClose, data, title}) {
  7.   const renderDetailList = () => {
  8.     return data.map((item, index) => {
  9.       return (
  10.         <View key={item.name} accessibilityLabel="viewInformation" style={styles.containerItemDetail}>
  11.           <View accessibilityLabel={`subViewInformation${index}`} style={styles.subContainerItemDetail}>
  12.             <View
  13.               accessibilityLabel={`viewImage${index}`}
  14.               style={{
  15.                 width: '15%'
  16.               }}>
  17.               <Image accessibilityLabel={`image-${index}`} source={{uri: item.image}} style={styles.image} />
  18.             </View>
  19.             <View accessibilityLabel="viewInformationWork" style={styles.containerTitleItem}>
  20.               <Text accessibilityLabel={`textTitleWork-${index}`} style={styles.textTitleItem}>
  21.                 {item.name}
  22.               </Text>
  23.               <View accessibilityLabel="viewDescriptionWork" style={styles.containerDescriptionItem}>
  24.                 <Text accessibilityLabel={`textDescription-${index}`} style={styles.textDesriptionItem}>
  25.                   {item.longDescription}
  26.                 </Text>
  27.               </View>
  28.             </View>
  29.           </View>
  30.         </View>
  31.       )
  32.     })
  33.   }
  34.  
  35.   return (
  36.     <Modal
  37.       propagateSwipe
  38.       accessibilityLabel="modalDetailWork"
  39.       onBackButtonPress={() => onClose()}
  40.       onBackdropPress={() => onClose()}
  41.       onSwipeComplete={() => onClose()}
  42.       hideModalContentWhileAnimating
  43.       useNativeDriver
  44.       animationIn="slideInUp"
  45.       animationOut="slideOutDown"
  46.       isVisible={visible}
  47.       onClose={() => onClose()}
  48.       style={styles.modalContainer}
  49.       swipeThreshold={100}
  50.       swipeDirection={['down', 'left']}>
  51.       <View accessibilityLabel="viewModalDetailWork" style={styles.subContainer}>
  52.         <View accessibilityLabel="viewButtonClose" style={styles.containerButtonClose}>
  53.           <TouchableOpacity accessibilityLabel="buttonClose" onPress={() => onClose()} style={styles.subContainerButtonClose} />
  54.         </View>
  55.         <View accessibilityLabel="viewTitle" style={styles.containerTitle}>
  56.           <Text accessibilityLabel={`mdlTittleWork${title}`} style={styles.textTitle}>
  57.             Detail Pengerjaan {title}
  58.           </Text>
  59.         </View>
  60.         <ScrollView accessibilityLabel="listDetailWork" style={styles.containerDetail}>
  61.           <TouchableOpacity>{renderDetailList()}</TouchableOpacity>
  62.         </ScrollView>
  63.         <SafeAreaView>
  64.           <View accessibilityLabel="viewButtonTutup" style={styles.containerButtonTutup}>
  65.             <TouchableOpacity accessibilityLabel="buttonTutup" onPress={() => onClose()} style={styles.subContainerButtonTutup}>
  66.               <Text accessibilityLabel="textTutup" style={styles.textTutup}>
  67.                 TUTUP
  68.               </Text>
  69.             </TouchableOpacity>
  70.           </View>
  71.         </SafeAreaView>
  72.       </View>
  73.     </Modal>
  74.   )
  75. }
  76.  
  77. export default DetailWork
  78.  
RAW Paste Data