All files CodeMirrorCore.js

0% Statements 0/18
0% Branches 0/10
0% Functions 0/3
0% Lines 0/17
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62                                                                                                                           
import React from 'react'
import PropTypes from 'prop-types'
import { Controlled as ControlledCodeMirror } from 'react-codemirror2'
import { FlatButton, Toolbar, ToolbarGroup } from 'material-ui'
import { editorTypes } from './editorTypes'
 
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/xml/xml'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/javascript/javascript'
 
export const CodeMirrorCore = ({
  input: { value, onChange },
  meta: { valid, error },
  type,
  label,
  defaultValue = '',
  required
}) => {
  const { mode, format, parse, stringify } = editorTypes[type]
  return (
    <div>
      <span style={{ color: '#c4c4c4' }}>
        {label}
        {required ? ' * ' : ' '}
      </span>
      {valid ? null : <span style={{ color: '#ff3d3a' }}> ({error})</span>}
      {Boolean(format) && (
        <Toolbar noGutter>
          <ToolbarGroup>
            <FlatButton label="Format" onClick={() => onChange(format(value))} />
          </ToolbarGroup>
        </Toolbar>
      )}
      <ControlledCodeMirror
        label={label}
        value={stringify(value || defaultValue)}
        options={{ mode, lineNumbers: true, lineWrapping: true }}
        onBeforeChange={(editor, data, valueFromEditor) => {
          onChange(parse(valueFromEditor))
        }}
      />
    </div>
  )
}
const valueType = PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object])
CodeMirrorCore.propTypes = {
  input: PropTypes.shape({
    value: valueType,
    onChange: PropTypes.func
  }),
  meta: PropTypes.shape({
    valid: PropTypes.bool,
    error: PropTypes.string
  }),
  record: PropTypes.object,
  type: PropTypes.oneOf(Object.keys(editorTypes)).isRequired,
  label: PropTypes.node.isRequired,
  defaultValue: valueType,
  required: PropTypes.bool
}