Customizing swagger-ui via plugins

enum.table.plugin.jsx

import React from 'react';
import PropTypes from 'prop-types';

class EnumTable extends React.Component {
    render() {
        const {propVal} = this.props;
        return (
            <table className="c-codeTable">
                <thead>
                    <tr><th>Code</th><th>Value</th><th>Description</th></tr>
                </thead>
                <tbody>
                {propVal.entrySeq().map((v, k) => {
                    const splitValue = String(v[1]).split(': ', 2);
                    return <tr key={`${k}-${v}`}><td>{v[0]}</td><td className="u-pr+">{splitValue[0]}</td><td>{splitValue[1] || null}</td></tr>;
                })}
                </tbody>
            </table>
        );
    }
}
EnumTable.propTypes = {
    propKey: PropTypes.string,
    propVal: PropTypes.any,
    propStyle: PropTypes.object
};

export default () => {
    return {
        components: {
            EnumTable
        }
    };
};

property.wrap.preset.jsx

import React from 'react';
import PropTypes from 'prop-types';

export default () => {
    return {
        wrapComponents: {
            Property: (Original, system) => {
                const CodeTable = system.getComponent('CodeTable');
                const EnumTable = system.getComponent('EnumTable');
                const ModelCollapse = system.getComponent('ModelCollapse');
                const CodeTableActions = system.getSystem().codeTableActions;

                class PropertyWrap extends React.Component {
                    render() {
                        const {propKey, propStyle} = this.props;
                        const hasCodeTable = propKey === 'x-code-table-value';
                        const hasEnumDescriptions = propKey === 'x-enum-descriptions';
                        return (
                            <div className={hasCodeTable || hasEnumDescriptions ? 'c-codeTableWrapper': null }>
                                { !hasEnumDescriptions ? <Original {...this.props} /> :
                                <span style={ propStyle }>{`${propKey}: `}</span>
                                }
                                { !hasCodeTable ? null :
                                <ModelCollapse collapsed={true} collapsedContent="[...]">
                                    [
                                    <CodeTable {...this.props} CodeTableActions={CodeTableActions} />
                                    ]
                                </ModelCollapse>
                                }
                                { !hasEnumDescriptions ? null :
                                <ModelCollapse collapsed={true} collapsedContent="[...]">
                                    [
                                    <EnumTable {...this.props} />
                                    ]
                                </ModelCollapse>
                                }
                            </div>
                        );
                    }
                }
                PropertyWrap.propTypes = {
                    propKey: PropTypes.string,
                    propVal: PropTypes.any,
                    propStyle: PropTypes.object
                };

                return PropertyWrap;
            }
        }
    };
};