clickable-json
Version:
Interactive JSON and JSON CRDT viewer and editor
56 lines • 2.06 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CrdtTypeSwitch = void 0;
const React = require("react");
const TypeSwitch_1 = require("../TypeSwitch");
const CrdtTypeSwitch = ({ types = ['any', 'con', 'vec', 'val'], type, onSubmit, onClick, }) => {
const [typeIndex, setTypeIndex] = React.useState(types.findIndex((t) => t === type.current));
React.useLayoutEffect(() => {
type.current = types[typeIndex];
}, []);
const onNext = () => {
setTypeIndex((n) => {
const index = (n + 1) % types.length;
type.current = types[index];
return index;
});
};
const onPrev = () => {
setTypeIndex((n) => {
const index = (n - 1 + types.length) % types.length;
type.current = types[index];
return index;
});
};
return (React.createElement("span", { style: { display: 'inline-block', padding: '0 0 0 4px', margin: '-1px 0' } },
React.createElement(TypeSwitch_1.TypeSwitch, { value: types[typeIndex], onClick: (e) => {
onNext();
if (onClick)
onClick(e);
}, onKeyDown: (e) => {
switch (e.key) {
case 'ArrowDown':
case 'ArrowRight': {
e.preventDefault();
onNext();
break;
}
case 'ArrowUp':
case 'ArrowLeft': {
e.preventDefault();
onPrev();
break;
}
case 'Enter': {
e.preventDefault();
if (onSubmit) {
e.preventDefault();
onSubmit();
}
break;
}
}
} })));
};
exports.CrdtTypeSwitch = CrdtTypeSwitch;
//# sourceMappingURL=index.js.map