Как богато оформить AOR Редактировать страницу

Question

Необходимо создать страницу редактирования, редактирующую ряд параметров в экземпляре ресурса 'сказка'.

Однако добавление любого элемента, такого как MUI Card или даже div, приводит к зависанию приложения различными способами.

Это подходы, которые я попробовал.

1) Добавление компонента карты или размещение моих элементов в div для стилизации

export const EditorEditTale = (props) => {
  return (
  <Edit {...props} title="Tale Editor">
    <SimpleForm >
      <div>
        <Image />
        <TaleCardHeader props={ props } style={taleCardHeaderStyle.editor} />
      </div>
    </SimpleForm>
  </Edit>
  )
};

Это не вызывает ничего сделать.

Второй подход, предполагая, что запись и basePath не передаются детям полностью. Попытка использовать компонент, как показано ниже.

const Input = ({record, basePath}) => {
  return (
    <div>
      <LongTextInput source="taleText" />
    </div>
  )
}

Это приводит к тому, что страница не отображается со всем в некотором цикле блокировки с ошибкой - не может прочитать свойство, не затронутое неопределенным.

Как мне создать пользовательскую страницу редактирования со сложным вводом и стилем.

ОБНОВЛЕНИЕ: пытались написать пользовательскую форму для замены компонента SimpleForm, но пока безуспешно.

Answer 1

Для создания пользовательской формы вы можете выполнить следующие действия:

1. сделайте точную копию SimpleForm для вашего проекта.
2. переименуйте SimpleForm в то, что вы хотите.
3. исправить все относительные импорт.
4. протестируйте новую форму, пока она не заработает.

Я сделал минимальную рабочую форму, основанную на SimpleForm текущей ветки мастера

import React, { Children, Component } from 'react';
import PropTypes from 'prop-types';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import compose from 'recompose/compose';
import getDefaultValues from 'admin-on-rest/mui/form/getDefaultValues';
import FormField from 'admin-on-rest/mui/form/FormField';
import Toolbar from 'admin-on-rest/mui/form/Toolbar';

const formStyle = { padding: '0 1em 1em 1em' };

export class PostForm extends Component {
    handleSubmitWithRedirect = (redirect = this.props.redirect) => this.props.handleSubmit(values => this.props.save(values, redirect));

    render() {
        const { children, invalid, record, resource, basePath, submitOnEnter, toolbar } = this.props;
        return (
            <form className="simple-form">
                <Field name="name_of_a_field" component="input" />
                {toolbar && React.cloneElement(toolbar, {
                    handleSubmitWithRedirect: this.handleSubmitWithRedirect,
                    invalid,
                    submitOnEnter,
                })}
            </form>
        );
    }
}

PostForm.propTypes = {
    basePath: PropTypes.string,
    children: PropTypes.node,
    defaultValue: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.func,
    ]),
    handleSubmit: PropTypes.func, // passed by redux-form
    invalid: PropTypes.bool,
    record: PropTypes.object,
    resource: PropTypes.string,
    redirect: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.bool,
    ]),
    save: PropTypes.func, // the handler defined in the parent, which triggers the REST submission
    submitOnEnter: PropTypes.bool,
    toolbar: PropTypes.element,
    validate: PropTypes.func,
};

PostForm.defaultProps = {
    submitOnEnter: true,
    toolbar: <Toolbar />,
};

const enhance = compose(
    connect((state, props) => ({
        initialValues: getDefaultValues(state, props),
    })),
    reduxForm({
        form: 'record-form',
        enableReinitialize: true,
    }),
);

export default enhance(PostForm);

Приведенный выше код работает для примера AOR.

Надеюсь, это поможет.

(импорт может немного отличаться, если у вас AOR в качестве зависимости npm:

import getDefaultValues from 'admin-on-rest/lib/mui/form/getDefaultValues';
import FormField from 'admin-on-rest/lib/mui/form/FormField';
import Toolbar from 'admin-on-rest/lib/mui/form/Toolbar';

)

Answer 2

Документирование моего окончательного ответа. Вы должны создать пользовательскую форму Redux. Вы можете использовать компоненты AOR Input прямо. Они приходят в упакованном виде для Redux Form.

import { Field, reduxForm } from 'redux-form';
import compose from 'recompose/compose';
import { connect } from 'react-redux';

class StyledForm extends Component {
// Newer version of aor needs this function defined and passed to save buttons. All props are being passed by parent List component. 
handleSubmitWithRedirect = (redirect = this.props.redirect) => this.props.handleSubmit(values => this.props.save(values, redirect));

render() {  
const { handleSubmit, invalid, record, resource, basePath } = this.props
return (<div>
    <form onSubmit={handleSubmit} >
      <Card >
        <CardText >

          //This component simply displays data, something not possible very easily with SimpleForm. 
          <HeaderComp basePath={basePath} record={record} />

          <Field source="category_id"
                 optionText="categoryName"
                 reference="categories"
                 resource={resource}
                 record={record}
                 basePath={basePath}
                 name="NAME OF THE FIELD IN YOUR REDUX DATASTORE"
                 component={REFERENCEFIELDCOMP} />
          //create complex div structures now. 
          <div >
            <span>Tale</span>
            <Field resource={resource} record={record} basePath={basePath} name="taleText" component={TextInput} />
          </div>

         </CardText >

          <MuiToolbar>
            <ToolbarGroup>
              <SaveButton handleSubmitWithRedirect={this.handleSubmitWithRedirect}/>
              //Add custom buttons with custom actions
              <Field record={record} name="status" component={EditButtons} />

            </ToolbarGroup>
          </MuiToolbar>
      </Card>
    </form>
  </div>)
    }
};

const enhance = compose(
    connect((state, props) => ({
        initialValues: getDefaultValues(state, props),
    })),
    reduxForm({
        form: 'record-form',
        enableReinitialize: true,
    }),
);

export default enhance(StyledForm);

Вам нужно будет либо импортировать, либо скопировать getDefaultValues ​​из AOR в модулях узла. Я скопировал его в файл ниже.

import getDefaultValues from '../functions/getDefaultValues';

Если вам нужно поле referenceField в вашем поле. Затем оберните его в пользовательский компонент, как показано ниже

const DropDownSelector = ({optionText, ...props}) => {
  return (
      <ReferenceInput {...props} label="" >
        <SelectInput optionText={optionText} />
      </ReferenceInput>
  )
}