@fluentui/react-northstar
Version:
A themable React component library.
74 lines (71 loc) • 3.49 kB
JavaScript
;
exports.__esModule = true;
exports.DebugPanelItem = void 0;
var React = _interopRequireWildcard(require("react"));
var _DebugPanelData = require("./DebugPanelData");
var _utils = require("./utils");
var _styles = require("@fluentui/styles");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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((0, _styles.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 : (0, _utils.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.DebugPanelData, {
data: filteredTheme,
comments: comments[idx],
commentKeyPredicate: commentKeyPredicate,
overrides: mergedThemes[idx],
highlightKey: value
}));
}));
};
exports.DebugPanelItem = DebugPanelItem;
//# sourceMappingURL=DebugPanelItem.js.map