New to PS plugins and React as well, but I’m wondering if I’m missing something or if the support isn’t there yet. I’m trying to create tabs within a panel using React Spectrum. I created a plugin using the ps-react-starter template, ran yarn add @adobe/react-spectrum, and created this component:
import React from "react";
import {Item, TabList, TabPanels, Tabs} from '@adobe/react-spectrum';
export class AppTabs extends React.Component {
constructor(props) {
super(props);
this.state = {
tabId: 1
};
this.tabs = [
{
id: 1,
name: 'Test',
children: 'body'
},
{
id: 2,
name: 'Test 1',
children: 'body'
},
{
id: 3,
name: 'Test 2',
children: 'body'
}
];
// let [tabId, setTabId] = React.useState(1);
};
setTabId = (evt) => {
console.log("Event: ", evt);
this.setState({ ...this.state, tabId: Number(evt) });
};
render() {
return (
<>
<p>Current tab id: {this.state.tabId}</p>
<Tabs aria-label="Tab Test" items={this.tabs} onSelectionChange={this.setTabId}>
<TabList>{(item) => <Item key={item.id}>{item.name}</Item>}</TabList>
<TabPanels>{(item) => <Item key={item.id}>{item.children}</Item>}</TabPanels>
</Tabs>
</>
);
}
}
Then edited the Demos component, removing the ColorPicker and adding the following:
import React from "react";
import {Provider, defaultTheme} from '@adobe/react-spectrum';
import { AppTabs } from "../components/AppTabs";
export class Demos extends React.Component {
render() {
return (
<Provider theme={defaultTheme}>
<AppTabs />
</Provider>
);
}
}
I’ve made no other edits, but when I reload the plugin, I just get errors and I can’t figure out why NodeFilter is undefined.
Can anyone help with what I’m missing? Or is TabPanel still under development?