react-native-diff-viewer
Version:
A React Native component for viewing and comparing JSON configurations with side-by-side diff view
150 lines (149 loc) • 6.61 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DiffViewer = void 0;
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const constants_1 = require("../constants");
const diffHelper_1 = require("../utils/diffHelper");
const DEFAULT_THEME = {
backgroundColor: '#FFFFFF',
textColor: '#000000',
diffAddedColor: '#E6FFE6',
diffRemovedColor: '#FFE6E6',
diffUnchangedColor: '#F5F5F5',
diffChangedColor: '#FFF3E6'
};
const getBackgroundColor = (type, theme) => {
switch (type) {
case constants_1.DIFF_TYPES.ADDED:
return theme.diffAddedColor;
case constants_1.DIFF_TYPES.REMOVED:
return theme.diffRemovedColor;
case constants_1.DIFF_TYPES.CHANGED:
return theme.diffChangedColor;
default:
return theme.diffUnchangedColor;
}
};
const DiffRow = react_1.default.memo(({ item, index, theme, side }) => {
const value = side === constants_1.DIFF_SIDES.LEFT ? item.oldValue : item.newValue;
if (!value)
return null;
return (react_1.default.createElement(react_native_1.View, { style: [styles.rowContainer, { backgroundColor: theme.backgroundColor }] },
react_1.default.createElement(react_native_1.View, { style: styles.rowNumber },
react_1.default.createElement(react_native_1.Text, { style: [styles.lineNumber, { color: theme.textColor }] }, index + 1)),
react_1.default.createElement(react_native_1.View, { style: [styles.row, { backgroundColor: getBackgroundColor(item.type, theme) }] },
react_1.default.createElement(react_native_1.Text, { style: [styles.key, { color: theme.textColor }], numberOfLines: 1 }, `${item.key}: ${value}`))));
});
const DiffList = react_1.default.memo(({ data, theme, side, title }) => {
const renderItem = (0, react_1.useCallback)(({ item, index }) => (react_1.default.createElement(DiffRow, { item: item, index: index, theme: theme, side: side })), [theme, side]);
const keyExtractor = (0, react_1.useCallback)((_, index) => index.toString(), []);
const getItemLayout = (0, react_1.useCallback)((_, index) => ({
length: 40,
offset: 40 * index,
index
}), []);
return (react_1.default.createElement(react_native_1.View, { style: [styles.listContainer, { backgroundColor: theme.backgroundColor }] },
react_1.default.createElement(react_native_1.View, { style: styles.headerContainer },
react_1.default.createElement(react_native_1.Text, { style: [styles.headerText, { color: theme.textColor }] }, title)),
react_native_1.Platform.OS === 'web' ? (react_1.default.createElement(react_native_1.View, null, data.map((item, index) => renderItem({ item, index })))) : (react_1.default.createElement(react_native_1.FlatList, { data: data, renderItem: renderItem, keyExtractor: keyExtractor, getItemLayout: getItemLayout, removeClippedSubviews: true, maxToRenderPerBatch: 20, windowSize: 10, initialNumToRender: 20 }))));
});
const JsonDiffViewer = ({ data1, data2, theme: customTheme, oldVersionTitle = constants_1.DIFF_VIEWER_STRINGS.OLD_VERSION, newVersionTitle = constants_1.DIFF_VIEWER_STRINGS.NEW_VERSION }) => {
const theme = Object.assign(Object.assign({}, DEFAULT_THEME), customTheme);
const diffResult = (0, react_1.useMemo)(() => {
return (0, diffHelper_1.diffJSON)(data1, data2);
}, [data1, data2]);
return (react_1.default.createElement(react_native_1.View, { style: styles.container },
react_1.default.createElement(react_native_1.View, { style: styles.splitContainer },
react_1.default.createElement(react_native_1.View, { style: styles.leftView },
react_1.default.createElement(DiffList, { data: diffResult, theme: theme, side: constants_1.DIFF_SIDES.LEFT, title: oldVersionTitle })),
react_1.default.createElement(react_native_1.View, { style: styles.rightView },
react_1.default.createElement(DiffList, { data: diffResult, theme: theme, side: constants_1.DIFF_SIDES.RIGHT, title: newVersionTitle })))));
};
const styles = react_native_1.StyleSheet.create({
container: {
flex: 1
},
splitContainer: {
flex: 1,
flexDirection: 'row'
},
leftView: {
flex: 1,
marginRight: 4
},
rightView: {
flex: 1,
marginLeft: 4
},
listContainer: Object.assign({ flex: 1, margin: 8, borderRadius: 10 }, react_native_1.Platform.select({
web: {
boxShadow: '0px 2px 3.84px rgba(0, 0, 0, 0.25)'
},
default: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5
}
})),
headerContainer: {
padding: 16,
borderBottomWidth: 1,
borderBottomColor: '#E0E0E0'
},
headerText: {
fontSize: 18,
fontWeight: 'bold'
},
rowContainer: {
flexDirection: 'row',
height: 40,
overflow: 'hidden'
},
row: {
flex: 1,
padding: 5,
flexDirection: 'row'
},
rowNumber: {
width: 50,
justifyContent: 'center',
alignItems: 'flex-end',
paddingRight: 10
},
key: {
fontSize: 16,
flex: 1
},
lineNumber: {
fontSize: 14
}
});
const DiffViewer = react_1.default.memo(JsonDiffViewer);
exports.DiffViewer = DiffViewer;
exports.default = DiffViewer;