/* Copyright © 2016 Kuali, Inc. - All Rights Reserved
* You may use and modify this code under the terms of the Kuali, Inc.
* Pre-Release License Agreement. You may not distribute it.
*
* You should have received a copy of the Kuali, Inc. Pre-Release License
* Agreement with this file. If not, please write to license@kuali.co.
*/
import { partial } from 'lodash'
import PropTypes from 'prop-types'
import React from 'react'
import Chip from 'react-md/lib/Chips'
import styles from './styles.css'
import Fetch from '../fetch'
export default function TypeaheadView({ getById, notFoundMsg, noValueMsg, value }) {
if (!value) return <div>{noValueMsg}</div>
return (
<Fetch loadFn={partial(getById, value)}>
{(loading, error, item) => {
const label = loading ? '...' : error ? notFoundMsg : item.name || '--'
return (
<Chip
style={{ margin: 5 }}
className={error && styles.notFound}
label={label}
/>
)
}}
</Fetch>
)
}
TypeaheadView.displayName = 'TypeaheadView'
TypeaheadView.propTypes = {
getById: PropTypes.func.isRequired,
notFoundMsg: PropTypes.string.isRequired,
noValueMsg: PropTypes.string.isRequired,
value: PropTypes.string,
}
|