react-native-simple-timeline
Version:
React Native Simple Timeline
95 lines (94 loc) • 3.37 kB
JavaScript
/**
* Simple React Native Timeline
* https://github.com/kabitacode/react-native-simple-timeline
*
* @format
*/
import React from 'react';
import { View, Text, FlatList, ScrollView } from 'react-native';
import { styles } from "./style";
function Timeline(_ref) {
let {
data,
direction,
customStyle = {}
} = _ref;
const {
container = {},
leftColumn = {},
rightColumn = {},
dotContainer = {},
dot = {},
connector = {},
dotConnectorHorizontalWrapper = {},
containerHorizontal = {},
dotContainerHorizontal = {},
dotHorizontal = {},
connectorHorizontal = {},
textStyle = {}
} = customStyle;
const renderItem = _ref2 => {
let {
item,
index
} = _ref2;
let lastIndex = index === data.length - 1;
return /*#__PURE__*/React.createElement(View, {
key: index,
style: [styles.container, container]
}, /*#__PURE__*/React.createElement(View, {
style: [styles.leftColumn, leftColumn]
}, /*#__PURE__*/React.createElement(View, {
style: [styles.dotContainer, dotContainer]
}, /*#__PURE__*/React.createElement(View, {
style: [styles.dot, dot]
})), !lastIndex && /*#__PURE__*/React.createElement(View, {
style: [styles.connector, connector]
})), /*#__PURE__*/React.createElement(View, {
style: [styles.rightColumn, rightColumn]
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.txtStatus, textStyle.txtStatus]
}, item === null || item === void 0 ? void 0 : item.status), /*#__PURE__*/React.createElement(Text, {
style: [styles.txtDate, textStyle.txtDate]
}, item === null || item === void 0 ? void 0 : item.date)));
};
if (direction == 'horizontal') {
return /*#__PURE__*/React.createElement(ScrollView, {
horizontal: true,
showsHorizontalScrollIndicator: false
}, /*#__PURE__*/React.createElement(View, {
style: {
flexDirection: 'row',
justifyContent: 'space-around',
height: 100
}
}, data.map((item, index) => {
let lastIndex = index === data.length - 1;
return /*#__PURE__*/React.createElement(View, {
key: index,
style: [styles.containerHorizontal, containerHorizontal]
}, /*#__PURE__*/React.createElement(View, {
style: [styles.dotConnectorHorizontalWrapper, dotConnectorHorizontalWrapper]
}, /*#__PURE__*/React.createElement(View, {
style: [styles.dotContainerHorizontal, dotContainerHorizontal]
}, /*#__PURE__*/React.createElement(View, {
style: [styles.dotHorizontal, dotHorizontal]
})), !lastIndex && /*#__PURE__*/React.createElement(View, {
style: [styles.connectorHorizontal, connectorHorizontal]
})), /*#__PURE__*/React.createElement(View, {
style: customStyle.containerHorizontalText
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.txtStatus, textStyle.txtStatus]
}, item === null || item === void 0 ? void 0 : item.status), /*#__PURE__*/React.createElement(Text, {
style: [styles.txtDate, textStyle.txtDate]
}, item === null || item === void 0 ? void 0 : item.date)));
})));
} else {
return /*#__PURE__*/React.createElement(FlatList, {
data: data,
renderItem: renderItem
});
}
}
export default Timeline;
//# sourceMappingURL=index.js.map