<commit_before>import React from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

import withTheme from '../theme/withTheme'
import spacing from 'material-ui/styles/spacing'
import typography from 'material-ui/styles/typography'

import { List } from 'material-ui/List'
import Subheader from 'material-ui/Subheader'


const mapThemeToStyles = (theme) => {
  const headingRoot = {
    color: theme.palette.disabledColor,
    fontWeight: typography.fontWeightMedium,
    padding: spacing.desktopGutterLess,
    fontSize: spacing.desktopGutter,
  }

  return {
    noDocuments: {
      ...headingRoot,
      textAlign: 'center',
      padding: theme.appBar.height,
      fontSize: spacing.desktopGutterMore,
    },
  }
}

const getList = (
  documents = [],
  selected,
  DocEdit,
  editProps,
  DocView,
  viewProps,
  docIdSelector,
) => {
  const items = documents.map((doc, index) => {
    const id = docIdSelector(doc)
    return selected.id === id ?
      <DocEdit
        {...editProps}
        selected={selected}
        key={`${id}.edit`}
        id={id}
        document={doc}
      />
      :
      <DocView
        {...viewProps}
        index={index}
        id={id}
        key={`${id}.view`}
        document={doc}
      />
  })
  if (selected.isNew) {
    items.splice(selected.atIndex, 0,
      <DocEdit
        {...editProps}
        selected={selected}
        key={`new-${selected.atIndex}`}
      />
    )
  }
  return items
}

const mongoIdSelector = (doc) => doc._id

const DocList = ({
  vocab,
  title,
  documents,
  selected,
  styles,
  DocEdit,
  editProps,
  DocView,
  viewProps,
  docIdSelector = mongoIdSelector,
}) =>
  selected.isNew || (documents && documents.length) ?
    <div id={`${vocab.id}-list-selector`}>
      <List>
        {title ? <Subheader>{title}</Subheader> : null}
        <ReactCSSTransitionGroup
          transitionName="doc-list-item"
          transitionAppear
          transitionAppearTimeout={250}
          transitionEnterTimeout={250}
          transitionLeaveTimeout={150}
        >
          {getList(
            documents,
            selected,
            DocEdit,
            editProps,
            DocView,
            viewProps,
            docIdSelector,
          )}
        </ReactCSSTransitionGroup>
      </List>
    </div>
    :
    <div style={styles.noDocuments}>No {vocab.documents} defined</div>


export default
withTheme(
  DocList,
  mapThemeToStyles,
)<commit_msg>Add docProps prop to DocList<commit_after>import React from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

import withTheme from '../theme/withTheme'
import spacing from 'material-ui/styles/spacing'
import typography from 'material-ui/styles/typography'

import { List } from 'material-ui/List'
import Subheader from 'material-ui/Subheader'


const mapThemeToStyles = (theme) => {
  const headingRoot = {
    color: theme.palette.disabledColor,
    fontWeight: typography.fontWeightMedium,
    padding: spacing.desktopGutterLess,
    fontSize: spacing.desktopGutter,
  }

  return {
    noDocuments: {
      ...headingRoot,
      textAlign: 'center',
      padding: theme.appBar.height,
      fontSize: spacing.desktopGutterMore,
    },
  }
}

const mongoIdSelector = (doc) => doc._id

const DocList = ({
  vocab,
  title,
  documents = [],
  selected,
  styles,
  docProps,
  DocEdit,
  editProps,
  DocView,
  viewProps,
  docIdSelector = mongoIdSelector,
}) => {
  const docComponents = documents.map((doc, index) => {
    const id = docIdSelector(doc)
    return selected.id === id ?
      <DocEdit
        {...docProps}
        {...editProps}
        selected={selected}
        key={`${id}.edit`}
        id={id}
        document={doc}
      />
      :
      <DocView
        {...docProps}
        {...viewProps}
        index={index}
        id={id}
        key={`${id}.view`}
        document={doc}
      />
  })
  if (selected.isNew) {
    docComponents.splice(selected.atIndex, 0,
      <DocEdit
        {...docProps}
        {...editProps}
        selected={selected}
        key={`new-${selected.atIndex}`}
      />
    )
  }
  return selected.isNew || documents.length ?
    <div id={`${vocab.id}-list-selector`}>
      <List>
        {title ? <Subheader>{title}</Subheader> : null}
        <ReactCSSTransitionGroup
          transitionName="doc-list-item"
          transitionAppear
          transitionAppearTimeout={250}
          transitionEnterTimeout={250}
          transitionLeaveTimeout={150}
        >
          {docComponents}
        </ReactCSSTransitionGroup>
      </List>
    </div>
    :
    <div style={styles.noDocuments}>No {vocab.documents} defined</div>
}

export default
  withTheme(
    DocList,
    mapThemeToStyles,
  )
{'fraction_non_alphanumeric': 0.12976939203354299, 'fraction_numerical': 0.0041928721174004195, 'mean_word_length': 2.369350282485876, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 38, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4408430', 'n_tokens_mistral': 1538, 'n_tokens_neox': 1497, 'n_words': 276}