abacus-notepad-component

Example usage:

const onNotepadChange = html =>
  this.props.updateNotepad(currentTestId, html)

const notepad     = this.props.store.getIn([ 'app', 'notepad' ])
const notepadHTML = notepad && notepad.get('html')
notepad && logger.debug('notepad', notepadHTML)

const shouldShowNotepad = this.props.store.getIn([ 'app', 'shouldShowNotepad' ])

logger.debug(currentTest.toJS())

const notepadArea =
  shouldShowNotepad && currentTestId && notepadHTML ?
    <NotepadComponent
      label={`Notes for ${currentTestId}`}
      html={notepadHTML}
      onChange={onNotepadChange} />
    :
    <div className="notepad col-xs-12"></div>;

Pretty much everything in this component has defaults but can be changed via props:

static defaultProps = {
  alloyEditorConfig : { allowedContent : true },
  changeDelay       : 2000,
  html              : ABACUS_NOTEPAD_INNER_HTML,
  id                : ABACUS_NOTEPAD_HTML_ELEMENT_ID,
  containerId       : ABACUS_NOTEPAD_CONTAINER_HTML_ELEMENT_ID,
  label             : ABACUS_NOTEPAD_LABEL_TEXT,
  labelStyle        : {
    display     : 'block',
    fontSize    : '1.2em',
    color       : '#2F4761'
  },
  containerStyle    : {
    position    : 'relative',
    margin      : '2.63em auto',
    width       : '92%',
    minHeight   : '18em',
    minWidth    : '10em'
  },
  style             : {
    border      : '1px solid #2F4761',
    padding     : '1em',
    background  : 'linear-gradient(rgb(244, 245, 240),rgb(244, 245, 240),rgb(255,255,255))',
    margin      : '0em auto',
    height      : '100%',
    width       : '100%'
  }
};