Fixes #3100 - Style changes for required properties. Pass required prop down to ObjectModel properly. Remove passing of required prop to "type" models.

This commit is contained in:
Owen Conti
2017-07-06 06:38:57 -06:00
parent e1a7bed9a3
commit 0862369c56

View File

@@ -29,18 +29,19 @@ class ObjectModel extends Component {
name: PropTypes.string, name: PropTypes.string,
isRef: PropTypes.bool, isRef: PropTypes.bool,
expandDepth: PropTypes.number, expandDepth: PropTypes.number,
depth: PropTypes.number depth: PropTypes.number,
required: PropTypes.bool
} }
render(){ render(){
let { schema, name, isRef, getComponent, depth, ...props } = this.props let { schema, name, isRef, getComponent, depth, required, ...props } = this.props
let { expandDepth } = this.props let { expandDepth } = this.props
const JumpToPath = getComponent("JumpToPath", true) const JumpToPath = getComponent("JumpToPath", true)
let description = schema.get("description") let description = schema.get("description")
let properties = schema.get("properties") let properties = schema.get("properties")
let additionalProperties = schema.get("additionalProperties") let additionalProperties = schema.get("additionalProperties")
let title = schema.get("title") || name let title = schema.get("title") || name
let required = schema.get("required") let requiredProperties = schema.get("required")
const Markdown = getComponent("Markdown") const Markdown = getComponent("Markdown")
const JumpToPathSection = ({ name }) => <span className="model-jump-to-path"><JumpToPath path={`definitions.${name}`} /></span> const JumpToPathSection = ({ name }) => <span className="model-jump-to-path"><JumpToPath path={`definitions.${name}`} /></span>
let collapsedContent = (<span> let collapsedContent = (<span>
@@ -76,17 +77,18 @@ class ObjectModel extends Component {
{ {
!(properties && properties.size) ? null : properties.entrySeq().map( !(properties && properties.size) ? null : properties.entrySeq().map(
([key, value]) => { ([key, value]) => {
let isRequired = List.isList(required) && required.contains(key) let isRequired = List.isList(requiredProperties) && requiredProperties.contains(key)
let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" } let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" }
if ( isRequired ) { if ( isRequired ) {
propertyStyle.fontWeight = "bold" propertyStyle.fontWeight = "bold"
} }
return (<tr key={key}> return (<tr key={key}>
<td style={ propertyStyle }>{ key }:</td> <td style={ propertyStyle }>
{ key }{ isRequired && <span style={{ color: "red" }}>*</span> }
</td>
<td style={{ verticalAlign: "top" }}> <td style={{ verticalAlign: "top" }}>
<Model key={ `object-${name}-${key}_${value}` } { ...props } <Model key={ `object-${name}-${key}_${value}` } { ...props }
required={ isRequired }
getComponent={ getComponent } getComponent={ getComponent }
schema={ value } schema={ value }
depth={ depth + 1 } /> depth={ depth + 1 } />
@@ -257,7 +259,7 @@ class Model extends Component {
switch(type) { switch(type) {
case "object": case "object":
return <ObjectModel className="object" { ...this.props } schema={ modelSchema } return <ObjectModel className="object" { ...this.props } schema={ modelSchema }
name={ name || modelName } name={ name || modelName } required={ required }
isRef={ isRef!== undefined ? isRef : !!$$ref }/> isRef={ isRef!== undefined ? isRef : !!$$ref }/>
case "array": case "array":
return <ArrayModel className="array" { ...this.props } schema={ modelSchema } name={ name || modelName } required={ required } /> return <ArrayModel className="array" { ...this.props } schema={ modelSchema } name={ name || modelName } required={ required } />