-
Notifications
You must be signed in to change notification settings - Fork 27
/
index.tsx
36 lines (30 loc) · 902 Bytes
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React, { useState, useEffect, useContext } from "react";
import styled from "styled-components";
import { InspectorContext } from "../provider";
const Container = styled.div``;
export default function Knobs() {
const [knobs, setKnobs] = useState({});
const inspector = useContext(InspectorContext);
useEffect(() => {
if (inspector.haveKnobs()) {
setKnobs({ ...inspector.getKnobs() });
}
inspector.addKnobSubscriber((knob: any) => {
setKnobs((previousKnobs: any) => ({
...previousKnobs,
...{ [knob.name]: knob }
}));
});
}, []);
if (Object.entries(knobs).length == 0) {
return null;
}
return (
<Container>
{Object.entries(knobs).map(([name, knob]: any) => {
const Component = inspector.getKnobRenderer(knob.type);
return <Component key={knob.name} {...knob} />;
})}
</Container>
);
}