viettel-ekyc-sdk
Version:
62 lines • 2.65 kB
JavaScript
import React, { useEffect, useRef } from 'react';
import { FlatList, Image, StyleSheet, Text, View } from 'react-native';
import { OS } from '../constants/OS';
import { SizedBox } from './SizedBox';
export const RequireFrame = ({ requireList, selectedIndex, }) => {
var _a;
const requireFrameRef = useRef(null);
useEffect(() => {
if (requireFrameRef.current) {
requireFrameRef.current.scrollToIndex({
animated: true,
index: selectedIndex,
});
}
}, [selectedIndex]);
return requireList[selectedIndex] !== undefined ? (React.createElement(View, { style: styles.requireFrameContainer },
React.createElement(Text, { style: styles.requireFrameTitle }, (_a = requireList[selectedIndex]) === null || _a === void 0 ? void 0 : _a.label),
React.createElement(SizedBox, { width: 0, height: 10 }),
React.createElement(FlatList, { style: styles.requireFrameFlatlist, ref: requireFrameRef, initialScrollIndex: 0, onScrollToIndexFailed: () => { }, data: requireList, renderItem: ({ item, index }) => (React.createElement(RequireFrameItem, { requireFrameItem: item, index: index, selectedIndex: selectedIndex })), horizontal: true }))) : (React.createElement(View, null));
};
const RequireFrameItem = ({ requireFrameItem, index, selectedIndex, }) => {
return requireFrameItem !== undefined ? (React.createElement(View, { style: styles.requireFrameItem }, selectedIndex === index ? (React.createElement(Image, { style: {
...styles.requireFrameImage,
...styles.requireFrameImageActive,
}, source: requireFrameItem.assetActive, resizeMode: 'cover' })) : (React.createElement(Image, { style: styles.requireFrameImage, source: requireFrameItem.asset, resizeMode: 'cover' })))) : (React.createElement(View, null));
};
const styles = StyleSheet.create({
requireFrameContainer: {
width: 280,
flex: 1,
flexDirection: 'column',
alignContent: 'center',
alignItems: 'center',
height: OS.HEIGHT / 5,
paddingTop: 20,
},
requireFrameTitle: {
color: 'white',
fontSize: 18,
},
requireFrameFlatlist: {
paddingRight: 20,
},
requireFrameItem: {
width: 70,
height: 70,
padding: 3,
marginHorizontal: 10,
},
requireFrameImage: {
width: 70,
height: 70,
padding: 3,
marginHorizontal: 10,
},
requireFrameImageActive: {
borderColor: 'white',
borderWidth: 1,
borderRadius: 10,
},
});
//# sourceMappingURL=RequireFrame.js.map