How to use @rjsf/core - 3 common examples

const PluginDrawer: React.FC = ({
  name,
  active,
  disabled,
  schema,
  initialData,
  onActive,
  onInactive,
  onClose,
  onFinish,
}) => {
  const { formatMessage } = useIntl();
  const PluginForm = withTheme(AntDTheme);

  if (!name) {
    return null;
  }

  // NOTE: 用于作为 PluginForm 的引用
  let form: any;

  return (

export * from './transform';

export enum PanelType {
  Plugin,
  Condition,
  Default,
}

type Props = {
  data: any;
  onChange: (data: Record) => void;
  readonly: boolean;
};

const PluginForm = withTheme(AntDTheme);

const LAYOUT = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const TAIL_LAYOUT = {
  wrapperCol: { offset: 8, span: 16 },
};

const SelectedSidebar: React.FC = ({ data = {}, onChange, readonly = false }) => {
  const [form] = Form.useForm();
  const [chart, setChart] = useState(cloneDeep(Object.keys(data).length ? data : INIT_CHART));
  const [schema, setSchema] = useState();
  const [selectedType, setSelectedType] = useState(PanelType.Default);
  const [pluginList, setPluginList] = useState([]);
  const [pluginCategory, setPluginCategory] = useState('All');

import { Button } from "@material-ui/core";
import { withTheme } from "@rjsf/core";
import { Theme as MuiTheme } from "@rjsf/material-ui";
import Immutable, { isImmutable } from "immutable";
import React from "react";
import { WrappedFieldProps } from "redux-form";
import { TDispatchProp } from "types";

const Form = withTheme(MuiTheme);

interface Props extends TDispatchProp {
  schema: any;
}

interface State {}

export class RenderJsonSchemaForm extends React.PureComponent {
  constructor(props: Props & WrappedFieldProps) {
    super(props);
    this.state = {};
  }

  public render() {
    const { input, schema } = this.props;
    return (