Skip to main content

oneOf

Enum with titles​

Where dropdown render is needed, enum is the first thing that come to mind. Unfortunately, it's lack of titles functionality (enumNames proposal wasn't accepted). In this case, oneOf + const is here to the rescue.

note

In this example, schema's node with oneOf doesn't contain type keyword, so repo's getNodeType must return oneOf type in order to render registered component automatically. Alternatively, <RepositoryComponentByType /> could be used to render oneOf component manually inside object component.

import React from 'react';
import {
    AutoView,
    RepositoryProvider,
    CoreSchemaMetaSchema
} from '@autoviews/core';
import {Box, Typography} from '@mui/material';

import schema from './schema.json';
import {repo} from './repo';

const App = () => {
    const [value, setValue] = React.useState<string>('');
    const onChange = React.useCallback(e => setValue(e.target.value), []);

    return (
        <>
            <RepositoryProvider components={repo}>
                <AutoView
                    schema={schema as CoreSchemaMetaSchema}
                    data={value}
                    onChange={onChange}
                />
            </RepositoryProvider>
            {value && (
                <>
                    <Typography>
                        <Box
                            sx={{marginTop: '20px'}}
                            style={{display: 'flex', alignItems: 'center'}}
                        >
                            <span>You just selected</span>
                            <span
                                style={{
                                    background: value,
                                    display: 'block',
                                    width: '16px',
                                    height: '16px',
                                    margin: '0 10px',
                                    borderRadius: '4px'
                                }}
                            />
                        </Box>
                    </Typography>
                </>
            )}
        </>
    );
};

export default App;

OneOf inside object​

Common example with form, where only one field is required (homePhone or mobilePhone).

This examples have two different oneOf components, one the same as in previous example, and second one, which is rendered manually as part of object type.

note

Note, here

contains some JSON Schema generation, which could passed to AutoView to automatically render dropdown with registered in repo component.

import React from 'react';
import {
    AutoView,
    RepositoryProvider,
    CoreSchemaMetaSchema
} from '@autoviews/core';

import schema from './schema.json';
import {repo} from './repo';

export const App = () => {
    const [value, setValue] = React.useState({});
    const onChange = React.useCallback(e => setValue(e.target.value), []);

    return (
        <RepositoryProvider components={repo}>
            <AutoView
                schema={schema as CoreSchemaMetaSchema}
                data={value}
                onChange={onChange}
            />
        </RepositoryProvider>
    );
};

export default App;