74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
import { Column, List, Button } from "ui"
|
|
import { sizeInfo } from "ui/style"
|
|
|
|
export class MasterList extends React.Component {
|
|
static propTypes = {
|
|
capitalizedName: PropTypes.string,
|
|
items: PropTypes.array,
|
|
listData: PropTypes.func,
|
|
onItemListClick: PropTypes.func,
|
|
selectedItem: PropTypes.object,
|
|
selectionModified: PropTypes.bool,
|
|
onAddNewItem: PropTypes.func,
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
items: null,
|
|
}
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (nextProps.items !== this.props.items) {
|
|
this.setState({ items: nextProps.items })
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { selectedItem, selectionModified, capitalizedName } = this.props
|
|
const { items } = this.state
|
|
|
|
return (
|
|
<Column fillParent>
|
|
<Column.Item grow>
|
|
<List
|
|
items={items}
|
|
render={(item, index) => {
|
|
const data = item._id
|
|
? this.props.listData(item)
|
|
: {
|
|
icon: "blank",
|
|
text: `[New ${capitalizedName}]`,
|
|
}
|
|
return (
|
|
<List.Item
|
|
key={item._id || "0"}
|
|
onClick={(e) => this.props.onItemListClick(e, index)}
|
|
open={item === this.props.selectedItem}>
|
|
<List.Icon name={data.icon} size={sizeInfo.listIcon} />
|
|
<List.Text>{data.text}</List.Text>
|
|
{item === selectedItem && selectionModified ? (
|
|
<List.Icon name="edit" size={sizeInfo.listIcon} />
|
|
) : null}
|
|
</List.Item>
|
|
)
|
|
}}
|
|
/>
|
|
</Column.Item>
|
|
<Column.Item height={sizeInfo.formColumnSpacing} />
|
|
<Column.Item height={sizeInfo.buttonHeight}>
|
|
<Button
|
|
width="100%"
|
|
color="inverse"
|
|
onClick={this.props.onAddNewItem}
|
|
text={`Add New ${capitalizedName}`}
|
|
/>
|
|
</Column.Item>
|
|
</Column>
|
|
)
|
|
}
|
|
}
|