@fluentui/react-northstar
Version:
A themable React component library.
67 lines (65 loc) • 2.18 kB
JavaScript
import * as React from 'react';
import { DebugPanelData } from './DebugPanelData';
import { filter } from './utils';
import { deepmerge } from '@fluentui/styles';
export var DebugPanelItem = function DebugPanelItem(props) {
var _React$useState = React.useState(''),
value = _React$useState[0],
setValue = _React$useState[1];
var propData = props.data,
valueKey = props.valueKey,
commentKey = props.commentKey,
commentKeyPredicate = props.commentKeyPredicate,
idKey = props.idKey;
var reversedData = JSON.parse(JSON.stringify(propData)).reverse();
var data = valueKey ? reversedData.map(function (v) {
return v[valueKey];
}) : reversedData;
var comments = commentKey ? reversedData.map(function (v) {
return v[commentKey];
}) : [];
var ids = idKey ? reversedData.map(function (v) {
return v[idKey];
}) : [];
var mergedThemes = [];
mergedThemes.push({}); // init
for (var i = 1; i < data.length; i++) {
mergedThemes.push(deepmerge(mergedThemes[i - 1], data[i - 1]));
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
onChange: function onChange(e) {
return setValue(e.target.value);
},
style: {
padding: '2px 4px',
marginBottom: '4px',
width: '100%',
border: '1px solid #ccc',
background: 'none'
},
placeholder: "Filter"
}), data.map(function (theme, idx) {
var filteredTheme = value === '' ? theme : filter(theme, value);
return /*#__PURE__*/React.createElement("pre", {
key: idx,
style: {
position: 'relative',
marginBottom: '4px',
borderTop: idx > 0 ? '1px solid #ddd' : 'none'
}
}, ids && ids[idx] && /*#__PURE__*/React.createElement("div", {
style: {
position: 'absolute',
right: 0,
color: '#707070'
}
}, ids[idx]), /*#__PURE__*/React.createElement(DebugPanelData, {
data: filteredTheme,
comments: comments[idx],
commentKeyPredicate: commentKeyPredicate,
overrides: mergedThemes[idx],
highlightKey: value
}));
}));
};
//# sourceMappingURL=DebugPanelItem.js.map