Правильное получение интервалов и выравниваний в jsonforms ⇐ Javascript

[Anonymous]

В настоящее время я пытаюсь использовать jsonforms для создания различных форм для своего веб-сайта и использую пользовательские кнопки и поля ввода (с использованием пользовательских средств визуализации) для визуализации формы. В настоящее время меня интересует правильный пользовательский интерфейс, вот как определяются мои схемы:

Код: Выделить всё

import { Button } from '@/src/components/Button';
import { Input } from '@/src/components/Input';

export const schema = {
type: 'object',
properties: {
name: {
type: 'string',
minLength: 3,
description: 'Please enter your name',
},
},
};

export const uiSchema = {
type: 'VerticalLayout',
elements: [
{
type: 'HorizontalLayout',

elements: [
{ type: 'Control', label: 'Primary button', scope: `#/properties/${Button.displayName!}` },
{
type: 'Control',
label: 'Input text',
options: { placeholder: 'Please input your text' },
scope: `#/properties/${Input.displayName}`,
},
{
type: 'VerticalLayout',
elements: [
{
type: 'Control',
label: 'Secondary Button',
scope: `#/properties/${Button.displayName!}`,
},
{
type: 'Control',
label: 'Ternary Button',
scope: `#/properties/${Button.displayName!}`,
},
],
},
],
},
],
};

Мои средства визуализации — это компоненты из shadcn, определенные примерно так:

Код: Выделить всё

import * as React from 'react';
import { Input as BaseInput } from '@/components/ui/input';
import { cn } from '@/lib/utils';

import styles from './Input.module.scss';
import { ControlProps } from '@jsonforms/core';
import { Label } from './Label';
import { withJsonFormsControlProps } from '@jsonforms/react';

export interface InputProps extends React.ComponentProps {
isError?: boolean;
errorMsg?: string;
label?: string;
}

export const Input = React.forwardRef(
({ className, errorMsg, isError, label, id, required, ...props }, ref) => {
return (

{label && (

{label}
{required && *}

)}

{errorMsg && isError && {errorMsg}}

);
},
);

Input.displayName = 'Input';

const Renderer = (props: ControlProps) =>  {
const {
visible,
uischema: { label, options },
id,
errors,
} = props;

if (!visible) return null;

const inputId = `${id}-input`;

return (

);
};

export const FormInput = withJsonFormsControlProps(Renderer);

Код: Выделить всё

import { rankWith, scopeEndsWith } from '@jsonforms/core';
import { Button, FormButton } from '@/src/components/Button';
import { FormInput, Input } from '@/src/components/Input';
import { materialRenderers } from '@jsonforms/material-renderers';

const PRIORITY = 10;

const InputTester = rankWith(PRIORITY, scopeEndsWith(Input.displayName!));

const Renderers = [
...materialRenderers,
{ tester: InputTester, renderer: FormInput },
];

export default Renderers;

а вот как выглядит мой пользовательский интерфейс:


как видите, я не могу выровнять поля Ввод текста и Основную кнопку (горизонтальный макет), а также между Вторичные и Тройные кнопки (вертикальное расположение).
Я не могу найти вариант, четко упомянутый в документации для этого, и на некоторых форумах упоминаются темы о темах в пользовательском интерфейсе материала, однако я их не использую.
Как лучше всего этого добиться?

Подробнее здесь: https://stackoverflow.com/questions/798 ... -correctly