in with the new

src/core/components/param-body.jsx

@@ -0,0 +1,141 @@
+import React, { Component, PropTypes } from "react"
+import shallowCompare from "react-addons-shallow-compare"
+import { Set, fromJS, List } from "immutable"
+import { getSampleSchema } from "core/utils"
+
+const NOOP = Function.prototype
+
+export default class ParamBody extends Component {
+
+  static propTypes = {
+    param: PropTypes.object,
+    onChange: PropTypes.func,
+    onChangeConsumes: PropTypes.func,
+    consumes: PropTypes.object,
+    consumesValue: PropTypes.string,
+    fn: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    isExecute: PropTypes.bool,
+    specSelectors: PropTypes.object.isRequired,
+    pathMethod: PropTypes.array.isRequired
+  };
+
+  static defaultProp = {
+    consumes: fromJS(["application/json"]),
+    param: fromJS({}),
+    onChange: NOOP,
+    onChangeConsumes: NOOP,
+  };
+
+  constructor(props, context) {
+    super(props, context)
+
+    this.state = {
+      isEditBox: false,
+      value: ""
+    }
+
+  }
+
+  componentDidMount() {
+    this.updateValues.call(this, this.props)
+  }
+
+  shouldComponentUpdate(props, state) {
+    return shallowCompare(this, props, state)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.updateValues.call(this, nextProps)
+  }
+
+  updateValues = (props) => {
+    let { specSelectors, pathMethod, param, isExecute, consumesValue="", onChangeConsumes } = props
+    let parameter = specSelectors ? specSelectors.getParameter(pathMethod, param.get("name")) : {}
+    let isXml = /xml/i.test(consumesValue)
+    let paramValue = isXml ? parameter.get("value_xml") : parameter.get("value")
+
+    if ( paramValue ) {
+      this.setState({ value: paramValue })
+      this.onChange(paramValue, {isXml: isXml, isEditBox: isExecute})
+    } else {
+      if (isXml) {
+        this.onChange(this.sample("xml"), {isXml: isXml, isEditBox: isExecute})
+      } else {
+        this.onChange(this.sample(), {isEditBox: isExecute})
+      }
+    }
+  }
+
+  sample = (xml) => {
+    let { param, fn:{inferSchema} } = this.props
+    let schema = inferSchema(param.toJS())
+
+    return getSampleSchema(schema, xml)
+  }
+
+  onChange = (value, { isEditBox, isXml }) => {
+    this.setState({value, isEditBox})
+    this._onChange(value, isXml)
+  }
+
+  _onChange = (val, isXml) => { (this.props.onChange || NOOP)(this.props.param, val, isXml) }
+
+  handleOnChange = e => {
+    let {consumesValue} = this.props
+    this.onChange(e.target.value.trim(), {isXml: /xml/i.test(consumesValue)})
+  }
+
+  toggleIsEditBox = () => this.setState( state => ({isEditBox: !state.isEditBox}))
+
+  render() {
+    let {
+      onChangeConsumes,
+      param,
+      isExecute,
+      specSelectors,
+      pathMethod,
+
+      getComponent,
+    } = this.props
+
+    const Button = getComponent("Button")
+    const TextArea = getComponent("TextArea")
+    const HighlightCode = getComponent("highlightCode")
+    const ContentType = getComponent("contentType")
+    // for domains where specSelectors not passed
+    let parameter = specSelectors ? specSelectors.getParameter(pathMethod, param.get("name")) : param
+    let errors = parameter.get("errors", List())
+    let consumesValue = specSelectors.contentTypeValues(pathMethod).get("requestContentType")
+    let consumes = this.props.consumes && this.props.consumes.size ? this.props.consumes : ParamBody.defaultProp.consumes
+
+    let { value, isEditBox } = this.state
+
+    return (
+      <div className="body-param">
+        {
+          isEditBox && isExecute
+            ? <TextArea className={ "body-param__text" + ( errors.count() ? " invalid" : "")} value={value} onChange={ this.handleOnChange }/>
+            : (value && <HighlightCode className="body-param__example"
+                               value={ value }/>)
+        }
+        <div className="body-param-options">
+          {
+            !isExecute ? null
+                       : <div className="body-param-edit">
+                        <Button className={isEditBox ? "btn cancel body-param__example-edit" : "btn edit body-param__example-edit"}
+                                 onClick={this.toggleIsEditBox}>{ isEditBox ? "Cancel" : "Edit"}
+                         </Button>
+                         </div>
+          }
+          <label htmlFor="">
+            <span>Parameter content type</span>
+            <ContentType value={ consumesValue } contentTypes={ consumes } onChange={onChangeConsumes} className="body-param-content-type" />
+          </label>
+        </div>
+
+      </div>
+    )
+
+  }
+}