Блог

Есть ли возможность создавать многостолбцовые формы с https://github.com/rjsf-team/react-jsonschema-form

Я использую material ui.

В итоге я использовал этот код

 import * as React from "react";
import Form from "@rjsf/material-ui";
import {FormProps, ObjectFieldTemplateProps} from "@rjsf/core";    
import Button from "@material-ui/core/Button/Button";
import styles from './LSForm.module.scss';
import Grid from "@material-ui/core/Grid/Grid";

interface Props extends FormProps<any> {
   submitButtonText?: string
   showSuccessMessage?: boolean
   hide?: boolean
   columns?: number
   spacing?: 0 | 6 | 4 | 3 | 1 | 2 | 5 | 7 | 8 | 9 | 10 | undefined
}

const LSForm: React.FC<Props> = (props) => {
const getColumns = () => {
    if (props.columns === 1) {
        return 12;
    }
    if (props.columns === 2) {
        return 6;
    }
    if (props.columns === 3) {
        return 4;
    }
    if (props.columns === 4) {
        return 3;
    }
    // Default one colum
    return 12;
};

const getSpacing = (): 0 | 6 | 4 | 3 | 1 | 2 | 5 | 7 | 8 | 9 | 10 | undefined => {
    let spacing: 0 | 6 | 4 | 3 | 1 | 2 | 5 | 7 | 8 | 9 | 10 | undefined = 0;
    if (props.spacing != null) {
        spacing = props.spacing;
    }
    return spacing;
};

const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
    return (
        <div>
            <Grid container spacing={getSpacing()}>
                {props.title}
                {props.description}
                {props.properties.map(element => {
                    return <Grid item xs={getColumns()}><div         className="property-wrapper">{element.content}</div></Grid>
                })}
            </Grid>
        </div>
    );
};

return (
    <>
        { !props.hide amp;amp;
            <Form {...props} ObjectFieldTemplate={ObjectFieldTemplate}>
                { props.children amp;amp;
                <div className={styles.actionBar}>
                    {props.children}
                </div>
                }
                { !props.children amp;amp;
                <div className={styles.actionBar}>
                    <Button type={"submit"} disabled={props.disabled} variant="contained" color="primary">{ props.submitButtonText ? props.submitButtonText : "Speichern"}</Button>
                </div>
                }
            </Form>
        }

    </>
);
};

export default LSForm;
  

Используйте его следующим образом:
…

 return (
    <>

            <LSForm schema={schema}
                    hide={hideForm}
                    spacing={3}
                    columns={3}
                    uiSchema={uiSchema}
                    onSubmit={(data) => onSubmit(data)}>
                <Button type={"submit"} variant="contained" color="primary">Login</Button>
                amp;nbsp;<Button variant="contained" color="primary">Forgot Password</Button>
            </LSForm>
    </>
);
  

…

Я нашел решение, которое мне не нравится:

    const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
    return (
        <div>
            {props.title}
            {props.description}
            {props.properties.map(element => {
                return <div className="property-wrapper">{element.content}</div>
            })}
        </div>
    );
}
 <Form ObjectFieldTemplate={ObjectFieldTemplate}>
  

Потратив несколько часов на поиск в Google, я нашел другое решение:

 const uiSchema = {
    "email": {
        "ui:widget": "email",
        'ui:column': 'xs6'
    },
    "password": {
        "ui:widget": "password",
        'ui:column': 'xs6'
    }
};
  

Проблема здесь: ui: coumn: xs6 работает только с темой начальной загрузки. Поскольку я использую material ui, этот подход нельзя использовать, или я что-то пропустил, чтобы запустить это.

Для получения большего или лучшего решения я бы действительно оценил